Add CSS, tailwind, colors, theming

app.config.ts

@@ -1,5 +1,8 @@
 import { defineConfig } from "@solidjs/start/config";
+import { nodeTypes } from "@mdx-js/mdx";
 import { linariaVitePlugin } from "./vite/linariaVitePlugin";
+import remarkShikiTwoslash from "remark-shiki-twoslash";
+import rehypeRaw from "rehype-raw";
 import pkg from "@vinxi/plugin-mdx";
 
 const { default: mdx } = pkg;
@@ -9,11 +12,14 @@ export default defineConfig({
   devOverlay: false,
 
   server: {
+    static: true,
     prerender: {
       routes: [
         "/",
         "/about",
         "/foo",
+        "/page/1",
+        "/page/2",
         //
         // "/articles/2024-03-25-first-article",
       ],
@@ -26,11 +32,42 @@ export default defineConfig({
 
   vite(options) {
     return {
+      css: { postcss: "./postcss.config.js" },
       plugins: [
         mdx.withImports({})({
           jsx: true,
           jsxImportSource: "solid-js",
           providerImportSource: "solid-mdx",
+          rehypePlugins: [
+            // rehypeSlug, rehypeCollectHeadings,
+            [rehypeRaw, { passThrough: nodeTypes }],
+          ],
+          remarkPlugins: [
+            // remarkFrontmatter,
+            // remarkMdxFrontmatter,
+            [
+              remarkShikiTwoslash.default,
+              {
+                disableImplicitReactImport: true,
+                includeJSDocInHover: true,
+                // theme: "css-variables",
+                themes: ["github-dark", "github-light"],
+                defaultCompilerOptions: {
+                  allowSyntheticDefaultImports: true,
+                  esModuleInterop: true,
+                  target: "ESNext",
+                  module: "esnext",
+                  lib: ["lib.dom.d.ts", "lib.es2015.d.ts"],
+                  jsxImportSource: "solid-js",
+                  jsx: "preserve",
+                  types: ["solid-start/env"],
+                  paths: {
+                    "~/*": ["./src/*"],
+                  },
+                },
+              },
+            ],
+          ],
         }),
         linariaVitePlugin({
           include: [

package.json

@@ -10,7 +10,10 @@
   "dependencies": {
     "@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",
@@ -19,6 +22,10 @@
     "@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",
+    "cssnano": "6.1.0",
+    "postcss-pxtorem": "6.1.0",
     "sass": "1.72.0",
     "@vinxi/plugin-mdx": "3.7.1",
     "vinxi": "^0.3.11"

postcss.config.js

@@ -0,0 +1,17 @@
+import cssnano from "cssnano";
+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] : []),
+    ]
+};

src/app.tsx

@@ -3,6 +3,7 @@ import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
 import { css } from "@linaria/core";
+import "~/style/global.style";
 import "./app.css";
 
 export default function App() {
@@ -16,7 +17,9 @@ export default function App() {
             About
           </a>
           <a href="/foo">Foo</a>
-          <Suspense>{props.children}</Suspense>
+          <div class="content-container">
+            <Suspense>{props.children}</Suspense>
+          </div>
         </MetaProvider>
       )}
     >

src/entry-server.tsx

@@ -4,7 +4,7 @@ import { createHandler, StartServer } from "@solidjs/start/server";
 export default createHandler(() => (
   <StartServer
     document={({ assets, children, scripts }) => (
-      <html lang="en">
+      <html lang="en" class="theme-dark">
         <head>
           <meta charset="utf-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />

src/routes/about.tsx

@@ -1,11 +1,14 @@
 import { Title } from "@solidjs/meta";
 import { css } from "@linaria/core";
+import { getRequestEvent } from "solid-js/web";
 
 export default function Home() {
+  const q = getRequestEvent()?.request.url;
   return (
     <main>
       <Title>About</Title>
       <h1 class={f}>About</h1>
+      <div>q: {q}</div>
     </main>
   );
 }

src/routes/articles/2024-03-25-starting-a-blog.mdx

@@ -0,0 +1,10 @@
+# Starting a blog
+
+Since everyone and their dog likes to post about cool new tech on their blog, I decided to try it out.
+
+I'll mostly write about frameworks, libraries and how to make lots of moving parts work together.
+
+```ts
+const f = 33;
+console.log(f);
+```

src/routes/articles/2024-03-30-maping-chord-key-combos-on-linux.mdx

@@ -0,0 +1,26 @@
+# Mapping chord key combos on Linux
+
+Recently I realized that lots of my key combinations require pretty unhealthy hand movements.
+
+```python
+import map2
+
+# capture keyboard inputs with a reader
+reader = map2.Reader(patterns=["/dev/input/by-id/your-kbd"])
+# re-map them using a chrod mapper
+mapper = map2.ChordMapper()
+# and write them to a virtual device
+writer = map2.Writer(clone_from="/dev/input/by-id/your-kbd")
+# setup the event pipeline
+map2.link([reader, mapper, writer])
+
+# and map some chords!
+mapper_kbd_arp.map([";", "a"], "A")
+mapper_kbd_arp.map([";", "s"], "S")
+mapper_kbd_arp.map([";", "d"], "D")
+mapper_kbd_arp.map([";", "f"], "F")
+mapper_kbd_arp.map([";", "g"], "G")
+# and so on...
+```
+
+And that's it!

src/routes/index.tsx

@@ -26,7 +26,7 @@ export default function Home() {
       <h1>Hello world!</h1>
       <Text />
       <NoHydration>
-        <ul>
+        <ul class="mb-8 text-colors-secondary-800">
           <For each={list()}>
             {(item) => (
               <li>

src/routes/page/[page].tsx

@@ -0,0 +1,11 @@
+import { getRequestEvent } from "solid-js/web";
+
+export default function Home() {
+  const q = getRequestEvent()?.request.url;
+  return (
+    <main>
+      <h1>Page</h1>
+      <div>q: {q}</div>
+    </main>
+  );
+}

src/style/animations.ts

@@ -0,0 +1,11 @@
+import {style} from "@client/style/commonStyle";
+
+
+export const flashAnimation = style`
+  animation: flash 0.6s alternate ease-in-out infinite;
+
+  @keyframes flash {
+    0% { opacity: 0.4; }
+    100% { opacity: 0.7; }
+  }
+`;

src/style/colorVariableCSS.ts

@@ -0,0 +1,20 @@
+import { normalizeColorName, themeColors } from "~/style/colorsTs";
+
+export const colorVariablesCSS = (() => {
+  let colorVariablesCSS = "";
+  for (const [key, value] of Object.entries(themeColors)) {
+    const theme = key;
+    if (typeof value == "object") {
+      colorVariablesCSS += `&.theme-${theme} {`;
+      for (const [name, color] of Object.entries(themeColors[theme])) {
+        colorVariablesCSS += `--color-${normalizeColorName(name)}: ${color};`;
+      }
+      colorVariablesCSS += "\n}";
+    } else {
+      // top level
+      colorVariablesCSS += `--color-${normalizeColorName(key)}: ${value};`;
+    }
+  }
+  return colorVariablesCSS;
+})();
+

src/style/colorsTs.tsx

@@ -0,0 +1,18 @@
+import theme from "./theme";
+
+export const themeColors = theme.colors as any;
+
+export const themeColorList = (() => {
+    const list: string[] = [];
+
+    for (const colorSet of [themeColors, themeColors.light, themeColors.dark]) {
+        for (const [key, value] of Object.entries(colorSet)) {
+            if (typeof value == "string") list.push(key);
+        }
+    }
+
+    return list;
+})();
+
+export const normalizeColorName = (colorName: string) =>
+    colorName.replace(/\//g, "-");

src/style/commonStyle.tsx

@@ -0,0 +1,52 @@
+import * as layoutMixins from "~/style/mixins/layoutTs";
+import {
+    _boxShadowMixin,
+    _dropShadowMixin,
+} from "~/style/mixins/shadowMixins";
+import * as sizes from "~/style/sizesTS";
+import * as reactStyleUtil from "~/style/styleUtil";
+import * as styleUtils from "~/style/styleUtilTS";
+import * as textStyles from "~/style/textStylesTS";
+
+export const jumboText = textStyles._jumboText;
+export const largeText = textStyles._largeText;
+export const bigText = textStyles._bigText;
+export const heading1Text = textStyles._heading1Text;
+export const heading2Text = textStyles._heading2Text;
+export const heading3Text = textStyles._heading3Text;
+export const bodyText = textStyles._bodyText;
+export const subText = textStyles._subText;
+export const smallText = textStyles._smallText;
+
+export type FontSize = textStyles._FontSize;
+export type FontStyle = textStyles._FontStyle;
+export const primaryFont = textStyles._primaryFont;
+export const primaryFontItalic = textStyles._primaryFontItalic;
+export const primaryFontBold = textStyles._primaryFontBold;
+export const primaryFontBoldItalic = textStyles._primaryFontBoldItalic;
+
+export const text = textStyles._text;
+export const variableTextStyle = textStyles._variableTextStyle;
+
+export const sizeXS = sizes._sizeXS;
+export const sizeS = sizes._sizeS;
+export const sizeM = sizes._sizeM;
+export const sizeL = sizes._sizeL;
+export const sizeXL = sizes._sizeXL;
+export const breakpoint = sizes._breakpoint;
+export const breakpointFrom = sizes._breakpointFrom;
+export const breakpointUntil = sizes._breakpointUntil;
+
+export const style = styleUtils.style;
+
+export const edgeChildrenNoMargin = layoutMixins._edgeChildrenNoMargin;
+export const edgeChildrenNoPadding = layoutMixins._edgeChildrenNoPadding;
+export const contentContainer = layoutMixins._contentContainer;
+
+export const color = layoutMixins._color;
+export const staticColor = layoutMixins._staticColor;
+
+export const withStyle = reactStyleUtil._withStyle;
+
+export const dropShadow = _dropShadowMixin;
+export const boxShadow = _boxShadowMixin;