initial

joplin notion extension/Web Development/Extras/jekyll/11ty.md

@@ -0,0 +1,70 @@
+11ty
+https://snipcart.com/blog/11ty-tutorial
+
+- install globally using `npm install -g @11ty/eleventy`
+- to build it use `eleventy` and for hot reloading in dev mode use `eleventy --serve`.
+ 
+
+ for integrating with  react
+ https://github.com/kaicataldo/eleventy-plugin-react
+ sample project :  [react.zip](../../../../_resources/react.zip)
+
+
+ 
+ - install all thise required modules
+ `npm install eleventy-plugin-react babel-loader @babel/core @babel/preset-env @babel/preset-react react react-dom core-js@3 regenerator-runtime`
+- in project , in .eleventy.js configuration is like this:  the layout with .njk  and postprocess option is changed to just return html because rest part is hamdled by this layout `base.njk`.
+- for custom layout for separate pages do this in `.eleventy.js`
+```js
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPlugin(eleventyReact);
+
+  // Set custom layouts for different pages
+  eleventyConfig.addPassthroughCopy("src/assets"); // Optional: For copying static assets
+
+  // This is where you can set different layouts based on conditions
+  eleventyConfig.addGlobalData("layout", (data) => {
+    if (data.page.url === "/about/") {
+      return "about-layout.njk"; // Use 'about-layout.njk' for the about page
+    } else {
+      return "base.njk"; // Default layout for all other pages
+    }
+  });
+
+  return {
+    dir: {
+      input: "src/pages", // Input directory for pages
+      output: "_site", // Output directory for generated static files
+    },
+  };
+};
+
+```
+ 
+ - in gatsby for client side component
+  ```js
+
+
+import React, { useEffect, useState } from 'react';
+
+const ClientOnlyComponent = () => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true); // This sets isClient to true only on the client-side
+  }, []); // The empty dependency array ensures this effect runs only once after the initial render
+
+  if (!isClient) {
+    return null; // Avoid rendering anything on the server-side
+  }
+
+  return (
+    <div>
+      This component is rendered on the client-side only.
+    </div>
+  );
+};
+
+export default ClientOnlyComponent;
+
+```