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

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

• 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

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

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;