Fix dev SSR preloading

postcss.config.js

@@ -3,15 +3,15 @@ import tailwindcss from "tailwindcss";
 import postcssPresentEnv from "postcss-preset-env";
 import pxtorem from "postcss-pxtorem";
 
-
 export default {
-    plugins: [
-        pxtorem({
-            replace: true,
-            propList: ["*"],
-        }),
-        postcssPresentEnv(),
-        tailwindcss,
-        ...(process.env.NODE_ENV === "production" ? [cssnano] : []),
-    ]
-};
+  plugins: [
+    pxtorem({
+      replace: true,
+      propList: ["*"],
+    }),
+    postcssPresentEnv(),
+    tailwindcss,
+    ...(process.env.NODE_ENV === "production" ? [cssnano] : []),
+  ],
+};
+

src/BlogArticle.tsx

@@ -0,0 +1,26 @@
+import {JSX, Component} from "solid-js";
+import {css} from "@linaria/core";
+import cn from "classnames";
+
+
+interface Props {
+    children?: JSX.Element;
+}
+
+const BlogArticle: Component<Props> = (props) => {
+    const {children} = $destructure(props);
+
+    return (
+        <div class={cn(_BlogArticle)}>
+            {children}
+        </div>
+    );
+};
+
+
+const _BlogArticle = css`
+`;
+
+
+
+export default BlogArticle;

src/app.tsx

@@ -1,18 +1,11 @@
+import "~/style/global.style";
+
 import { MetaProvider, Title } from "@solidjs/meta";
-import { RouteDefinition, Router } from "@solidjs/router";
-import { Suspense, lazy } from "solid-js";
+import { Router } from "@solidjs/router";
+import { Suspense } from "solid-js";
 import { config } from "~/config";
-
 import Header from "~/Header";
-import "~/style/global.style";
-import "./app.css";
-
-const BlogIndex = lazy(() => import("~/BlogIndex"));
-const GallerySite = lazy(() => import("~/GallerySite"));
-
-const articlesImportMap = import.meta.glob("./articles/*.mdx");
-const getArticleComponent = (name: string) =>
-  articlesImportMap[`./articles/${name}.mdx`];
+import { routes } from "~/routes";
 
 export default function App() {
   return (
@@ -28,38 +21,7 @@ export default function App() {
         </MetaProvider>
       )}
     >
-      {
-        [
-          { path: "/", component: () => <BlogIndex /> },
-          { path: "/gallery", component: () => <GallerySite /> },
-          {
-            path: "/articles/:name",
-            component: (p) => {
-              // router bug: 'name' not in 'p', update when this is fixed
-              const name = p.location.pathname.replace(
-                `${config.base}/articles/`,
-                "",
-              );
-              const Article = lazy(getArticleComponent(name) as any);
-              return (
-                <Article
-                  components={
-                    {
-                      // h1: () => {
-                      //   return <span>hi</span>;
-                      // },
-                    }
-                  }
-                  {...p}
-                />
-              );
-            },
-            matchFilters: {
-              name: (name: string) => !!getArticleComponent(name),
-            },
-          },
-        ] as RouteDefinition[]
-      }
+      {routes}
     </Router>
   );
 }

src/routeMap.tsx

@@ -1,7 +1,9 @@
 import App from "~/app";
+import BlogIndex from "~/BlogIndex";
 import GallerySite from "~/GallerySite";
 
 export const routeMap: Record<string, string | string[]> = {
   "/*": [App],
+  "/": [BlogIndex],
   "/gallery": [GallerySite],
 } as any;

src/routes.tsx

@@ -0,0 +1,37 @@
+import { RouteDefinition } from "@solidjs/router";
+import { lazy } from "solid-js";
+import { config } from "~/config";
+
+const BlogIndex = lazy(() => import("~/BlogIndex"));
+
+const articlesImportMap = import.meta.glob("./articles/*.mdx");
+const getArticleComponent = (name: string) =>
+  articlesImportMap[`./articles/${name}.mdx`];
+
+export const routes: RouteDefinition[] = [
+  { path: "/", component: () => <BlogIndex /> },
+  { path: "/gallery", component: lazy(() => import("~/GallerySite")) },
+  {
+    path: "/articles/:name",
+    component: (p) => {
+      // router bug: 'name' not in 'p', update when this is fixed
+      const name = p.location.pathname.replace(`${config.base}/articles/`, "");
+      const Article = lazy(getArticleComponent(name) as any);
+      return (
+        <Article
+          components={
+            {
+              // h1: () => {
+              //   return <span>hi</span>;
+              // },
+            }
+          }
+          {...p}
+        />
+      );
+    },
+    matchFilters: {
+      name: (name: string) => !!getArticleComponent(name),
+    },
+  },
+];