Add article loading

shiro · Mar 28, 2024 · 5bfeebb · 5bfeebb
1 parent 580d166
commit 5bfeebb
Show file tree

Hide file tree

Showing 11 changed files with 275 additions and 95 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
 node_modules/
 .output/
 .vinxi/
-app.config.timestamp.*
+app.config.timestamp*
diff --git a/app.config.ts b/app.config.ts
@@ -3,6 +3,7 @@ import { nodeTypes } from "@mdx-js/mdx";
 import { linariaVitePlugin } from "./vite/linariaVitePlugin";
 import remarkShikiTwoslash from "remark-shiki-twoslash";
 import rehypeRaw from "rehype-raw";
+import compileTime from "vite-plugin-compile-time"
 // @ts-ignore
 import _mdx from "@vinxi/plugin-mdx";
 
@@ -48,6 +49,7 @@ export default defineConfig({
     return {
       css: { postcss: "./postcss.config.js" },
       plugins: [
+        compileTime(),
         mdx.withImports({})({
           jsx: true,
           jsxImportSource: "solid-js",
@@ -105,3 +107,6 @@ export default defineConfig({
     };
   },
 });
+
+// solid next:
+// https://github.com/solidjs/solid-docs-next/blob/fc5ec0b803f0ae2a9deb55e1c6fb7c2c60b46c87/app.config.ts
diff --git a/package.json b/package.json
@@ -9,28 +9,29 @@
     "version": "vinxi version"
   },
   "dependencies": {
+    "@babel/plugin-transform-export-namespace-from": "7.24.1",
+    "@babel/preset-typescript": "7.24.1",
+    "@linaria/core": "6.1.0",
+    "@mdx-js/mdx": "3.0.1",
     "@solidjs/meta": "^0.29.2",
-    "@wyw-in-js/vite": "0.5.0",
-    "typescript": "5.4.3",
     "@solidjs/router": "^0.13.1",
-    "tailwindcss": "3.4.1",
-    "remark-shiki-twoslash": "^3.1.3",
-    "@linaria/core": "6.1.0",
     "@solidjs/start": "^1.0.0-rc.0",
-    "solid-js": "^1.8.16",
+    "@vinxi/plugin-mdx": "3.7.1",
+    "@wyw-in-js/vite": "0.5.0",
     "babel-plugin-transform-remove-imports": "1.7.1",
-    "@babel/plugin-transform-export-namespace-from": "7.24.1",
-    "@babel/preset-typescript": "7.24.1",
-    "@mdx-js/mdx": "3.0.1",
-    "solid-mdx": "0.0.7",
-    "rehype-raw": "^6.1.1", 
-    "postcss-preset-env": "9.4.0",
-    "solid-labels": "0.16.0",
     "cssnano": "6.1.0",
+    "postcss-preset-env": "9.4.0",
     "postcss-pxtorem": "6.1.0",
+    "rehype-raw": "^6.1.1",
+    "remark-shiki-twoslash": "^3.1.3",
     "sass": "1.72.0",
-    "@vinxi/plugin-mdx": "3.7.1",
-    "vinxi": "^0.3.11"
+    "solid-js": "^1.8.16",
+    "solid-labels": "0.16.0",
+    "solid-mdx": "0.0.7",
+    "tailwindcss": "3.4.1",
+    "typescript": "5.4.3",
+    "vinxi": "^0.3.11",
+    "vite-plugin-compile-time": "0.2.1"
   },
   "engines": {
     "node": ">=18"

diff --git a/src/app.tsx b/src/app.tsx
@@ -1,21 +1,16 @@
+import { css } from "@linaria/core";
 import { MetaProvider, Title } from "@solidjs/meta";
-import { Router } from "@solidjs/router";
-import { FileRoutes } from "@solidjs/start/router";
+import { RouteDefinition, Router } from "@solidjs/router";
 import { Suspense, lazy } from "solid-js";
-import { css } from "@linaria/core";
+import { config } from "~/config";
 import "~/style/global.style";
 import "./app.css";
-import { config } from "~/config";
 
 const Foo = lazy(() => import("~/routes/index"));
-const Article2 = lazy(
-  () =>
-    import("~/routes/articles/2024-03-25-starting-a-blog.mdx"),
-);
-const Article = lazy(
-  () =>
-    import("~/routes/articles/2024-03-30-maping-chord-key-combos-on-linux.mdx"),
-);
+
+const articlesImportMap = import.meta.glob("./articles/*.mdx");
+const getArticleComponent = (name: string) =>
+  articlesImportMap[`./articles/${name}.mdx`];
 
 export default function App() {
   return (
@@ -35,36 +30,34 @@ export default function App() {
         </MetaProvider>
       )}
     >
-      {[
-        { path: "/", component: () => <Foo /> },
-        {
-          path: "/articles/:name",
-          component: (p) => {
-            return (
-              <Article2
-                components={{
-                  h1: () => {
-                    return <span>hi</span>;
-                  },
-                }}
-                {...p} />
-            );
+      {
+        [
+          { path: "/", component: () => <Foo /> },
+          {
+            path: "/articles/:name",
+            component: (p) => {
+              // router bug: 'name' not in 'p', update when this is fixed
+              const name = p.location.pathname.replace("/articles/", "");
+              const Article = lazy(getArticleComponent(name) as any);
+              return (
+                <Article
+                  components={
+                    {
+                      // h1: () => {
+                      //   return <span>hi</span>;
+                      // },
+                    }
+                  }
+                  {...p}
+                />
+              );
+            },
+            matchFilters: {
+              name: (name: string) => !!getArticleComponent(name),
+            },
           },
-        },
-        {
-          path: "/articles/2024-03-30-maping-chord-key-combos-on-linux",
-          component: () => (
-            <Article
-              components={{
-                h1: () => {
-                  return <span>hi</span>;
-                },
-              }}
-            />
-          ),
-        },
-      ]}
-      {/* <FileRoutes /> */}
+        ] as RouteDefinition[]
+      }
     </Router>
   );
 }

diff --git a/...s/articles/2024-03-25-starting-a-blog.mdx → src/articles/2024-03-25-starting-a-blog.mdx b/...s/articles/2024-03-25-starting-a-blog.mdx → src/articles/2024-03-25-starting-a-blog.mdx
diff --git a/...3-30-maping-chord-key-combos-on-linux.mdx → ...3-30-maping-chord-key-combos-on-linux.mdx b/...3-30-maping-chord-key-combos-on-linux.mdx → ...3-30-maping-chord-key-combos-on-linux.mdx
diff --git a/src/entry-server.tsx b/src/entry-server.tsx
@@ -2,21 +2,22 @@
 import { createHandler, StartServer } from "@solidjs/start/server";
 import { config } from "~/config";
 
-export default createHandler(() => (
-  <StartServer
-    document={({ assets, children, scripts }) => (
-      <html lang="en" class="theme-dark">
-        <head>
-          <meta charset="utf-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <link rel="icon" href={`${config.base}/favicon.ico`} />
-          {assets}
-        </head>
-        <body>
-          <div id="app">{children}</div>
-          {scripts}
-        </body>
-      </html>
-    )}
-  />
-));
+export default createHandler(() => {
+    return (
+        <StartServer
+            document={({ assets, children, scripts }) => (
+                <html lang="en" class="theme-dark">
+                    <head>
+                        <meta charset="utf-8" />
+                        <meta name="viewport" content="width=device-width, initial-scale=1" />
+                        <link rel="icon" href={`${config.base}/favicon.ico`} />
+                        {assets}
+                    </head>
+                    <body>
+                        <div id="app">{children}</div>
+                        {scripts}
+                    </body>
+                </html>
+            )} />
+    );
+});
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -1,32 +1,20 @@
-import { For } from "solid-js/web";
 import { Title } from "@solidjs/meta";
-import Counter from "~/components/Counter";
+import { For, NoHydration } from "solid-js/web";
 import Text from "~/atoms/Text.md";
-import fs from "fs";
-import path from "path";
-import { NoHydration } from "solid-js/web";
-import { config } from "~/config";
+import Counter from "~/components/Counter";
+import { getArticles } from "~/ssg/getArticles";
 
-const base = "./src/routes/articles";
-const list = () => {
-  "use server";
-  return fs.readdirSync(base).map((x) => {
-    const raw = fs.readFileSync(path.join(base, x)).toString();
-    const title = raw.split("\n")[0].slice(2);
-    const url = `${config.base}/articles/${x.split(".")[0]}`;
-    return { title, url };
-  });
-};
+const list = getArticles();
 
-export default function Home() {
+const List = () => {
   return (
     <main>
       <Title>Hello World</Title>
       <h1>Hello world!</h1>
       <Text />
       <NoHydration>
         <ul class="mb-8 text-colors-secondary-800">
-          <For each={list()}>
+          <For each={list}>
             {(item) => (
               <li>
                 <a href={item.url}>{item.title}</a>
@@ -45,4 +33,6 @@ export default function Home() {
       </p>
     </main>
   );
-}
+};
+
+export default List;
diff --git a/src/ssg/getArticles.ssg.ts b/src/ssg/getArticles.ssg.ts
@@ -0,0 +1,18 @@
+import fs from "fs";
+import path from "path";
+
+const base = "./src/articles";
+export const getArticlesSSG = () => {
+  return fs.readdirSync(base).map((x) => {
+    const raw = fs.readFileSync(path.join(base, x)).toString();
+    const title = raw.split("\n")[0].slice(2);
+    const url = `/articles/${x.split(".")[0]}`;
+    return { title, url };
+  });
+};
+
+export default async () => {
+  return {
+    data: getArticlesSSG(),
+  }
+}
diff --git a/src/ssg/getArticles.ts b/src/ssg/getArticles.ts
@@ -0,0 +1 @@
+export const getArticles = () => import.meta.compileTime("./getArticles.ssg.ts");
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const getArticles = () => import.meta.compileTime("./getArticles.ssg.ts");