feat: Reduce build size by client side fetching garden json (#95)

.eslintignore

@@ -1 +1,4 @@
+out/
 output/
+
+packages/site/public/garden.json

.gitignore

@@ -4,6 +4,8 @@ node_modules/
 out/
 output/
 
+packages/site/public/garden.json
+
 *.tsbuildinfo
 .env
 .pnpm-debug.log

.prettierignore

@@ -1,4 +1,8 @@
 .next
 gardens
+out
 output
 pnpm-lock.yaml
+
+packages/site/public/garden.json
+

packages/garden/src/garden.ts

@@ -16,6 +16,7 @@ export interface Garden {
   config: GardenConfig;
   thing: (filename: string) => FileThing;
   findBackLinks: (things: Things, name: string) => Array<Link>;
+  getMetaFilename: () => string;
   meta: () => Promise<Things>;
   load: () => Promise<Things>;
   refresh: (filenameToPatch?: string) => Promise<Things>;
@@ -25,8 +26,8 @@ export interface GardenOptions {
   allowGlobalMeta?: boolean;
   directory?: string;
   excludedDirectories?: string[];
-  hasMultiple?: boolean;
   gardens?: { [key: string]: string };
+  hasMultiple?: boolean;
   liveMeta?: boolean;
   verbose?: boolean;
 }
@@ -35,9 +36,9 @@ export interface GardenConfig {
   allowGlobalMeta: boolean;
   directory: string;
   excludedDirectories: string[];
+  gardens: { [key: string]: string };
   hasMultiple: boolean;
   liveMeta: boolean;
-  gardens: { [key: string]: string };
   verbose: boolean;
 }
 
@@ -265,6 +266,7 @@ export const createGarden = (options: GardenOptions): Garden => {
     findBackLinks: (things: Things, name: string) => {
       return findBackLinks(things, name);
     },
+    getMetaFilename: () => getMetaFilename(config),
     thing: (filename: string) => {
       return loadThing(config, filename);
     },

packages/site/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

packages/site/src/components/siteGarden.ts

@@ -0,0 +1,6 @@
+import { createGarden, toConfig } from "@garden/garden";
+
+import options from "../../garden.config.js";
+
+export const config = toConfig(options);
+export const garden = createGarden(config);

packages/site/src/pages/[[...name]].tsx

@@ -1,29 +1,26 @@
 import {
-  createGarden,
   findItemOrWanted,
   findLinks,
   findWantedThings,
   getAllItems,
-  toConfig,
 } from "@garden/garden";
 import { findDeepLinks } from "@garden/graph";
-import { Item, Link } from "@garden/types";
-import { useState } from "react";
+import { Item, Link, Things } from "@garden/types";
+import { useEffect, useState } from "react";
 
-import options from "../../garden.config.js";
 import GraphDiagram from "../components/graph-diagram";
+import { config, garden } from "../components/siteGarden";
 import { useKey } from "../components/useKey";
 import useWindowDimensions from "../components/useWindowDimensions";
 import { createGraph } from "../lib/graph/graph";
 import markdownToHtml from "../lib/markdownToHtml";
 
-const config = toConfig(options);
-const garden = createGarden(config);
-
 function ItemPage({ item }) {
   const { height, width } = useWindowDimensions();
   const [depth, setDepth] = useState(2);
   const [scale, setScale] = useState(1.3);
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState<Things>({});
 
   useKey((key) => setDepth(parseInt(key)), ["1", "2", "3", "4", "5"]);
 
@@ -33,6 +30,16 @@ function ItemPage({ item }) {
   useKey(() => setScale(scale * 1.3), ["x"]);
   useKey(() => setScale(scale * 1.5), ["z"]);
 
+  useEffect(() => {
+    fetch("/garden.json")
+      .then((res) => res.json())
+      .then((data) => {
+        setLoading(false);
+        console.log(data);
+        setData(data);
+      });
+  }, []);
+
   return (
     <>
       <div className="container max-w-4xl px-4">
@@ -45,16 +52,18 @@ function ItemPage({ item }) {
           ))}
         </ul>
       </div>
-      <GraphDiagram
-        width={width}
-        height={height}
-        scale={scale}
-        graph={createGraph(
-          item.name,
-          item.garden,
-          findDeepLinks(item.garden, item.name, depth)
-        )}
-      />
+      {!isLoading && data && (
+        <GraphDiagram
+          width={width}
+          height={height}
+          scale={scale}
+          graph={createGraph(
+            item.name,
+            data,
+            findDeepLinks(data, item.name, depth)
+          )}
+        />
+      )}
     </>
   );
 }
@@ -66,15 +75,13 @@ export async function getStaticProps({ params }) {
   );
   const links = await findLinks(garden, item);
   const content = await markdownToHtml(item.content || "no content");
-  const things = await garden.load();
 
   return {
     props: {
       item: {
         ...item,
         links,
         content,
-        garden: things,
       },
     },
   };

packages/site/src/scripts/pre-build.ts

@@ -11,9 +11,10 @@ const argv = yargs(hideBin(process.argv)).argv;
 const garden = createGarden(config);
 
 const refresh = (filenameToPatch?: string) =>
-  garden
-    .refresh(filenameToPatch)
-    .then((meta) => console.log(`refreshed ${Object.keys(meta).length} items`));
+  garden.refresh(filenameToPatch).then((meta) => {
+    console.log(`refreshed ${Object.keys(meta).length} items`);
+    fs.copyFileSync(garden.getMetaFilename(), "public/garden.json");
+  });
 
 const cmdCallback = (error, stdout, stderr) => {
   error && console.error(`exec error: ${error}`);
@@ -22,10 +23,14 @@ const cmdCallback = (error, stdout, stderr) => {
   refresh();
 };
 
-if (!fs.existsSync(config.directory)) {
-  console.log(`Creating ${config.directory}`);
-  fs.mkdirSync(config.directory);
-}
+const mkdir = (directory: string) => {
+  if (!fs.existsSync(directory)) {
+    console.log(`Creating ${directory}`);
+    fs.mkdirSync(directory);
+  }
+};
+
+mkdir(config.directory);
 
 if (config.hasMultiple) {
   const gardens = config.gardens;