Add articles, update article component

.github/workflows/CI.yml

@@ -18,6 +18,9 @@ jobs:
     name: Build
     runs-on: ubuntu-latest
     steps:
+      - name: install deps
+        run: sudo apt install imagemagick
+
       - name: Git checkout
         uses: actions/checkout@v3
 

app.config.ts

@@ -3,19 +3,21 @@ import { defineConfig } from "@solidjs/start/config";
 import path from "node:path";
 import rehypeRaw from "rehype-raw";
 import remarkFrontmatter from "remark-frontmatter";
-import remarkShikiTwoslash from "remark-shiki-twoslash";
 import { PluginOption } from "vite";
 import compileTime from "vite-plugin-compile-time";
 import solidSvg from "vite-plugin-solid-svg";
 import { linariaVitePlugin } from "./vite/linariaVitePlugin";
-// import devtools from "solid-devtools/vite";
 // @ts-ignore
 import _mdx from "@vinxi/plugin-mdx";
-import tsconfig from "./tsconfig.json";
-import { viteImagePlugin } from "./vite/viteImagePlugin";
-import remarkGfm from "remark-gfm";
 import rehypeShiki from "@shikijs/rehype";
 import { transformerNotationDiff } from "@shikijs/transformers";
+import remarkGfm from "remark-gfm";
+import remarkCaptions from "remark-captions";
+import tsconfig from "./tsconfig.json";
+import { viteImagePlugin } from "./vite/viteImagePlugin";
+import { parseDelimitedString } from "./src/util/parseDelimitedString";
+
+// import devtools from "solid-devtools/vite";
 
 const { default: mdx } = _mdx;
 
@@ -132,48 +134,49 @@ export default defineConfig({
           jsx: true,
           jsxImportSource: "solid-js",
           providerImportSource: "solid-mdx",
+          remarkPlugins: [
+            remarkFrontmatter,
+            remarkGfm,
+            [
+              remarkCaptions,
+              {
+                external: {
+                  table: "Table:",
+                },
+              },
+            ],
+          ],
           rehypePlugins: [
-            // rehypeSlug, rehypeCollectHeadings,
-            [rehypeRaw, { passThrough: nodeTypes }],
             [
               rehypeShiki,
               {
-                // disableImplicitReactImport: true,
-                // includeJSDocInHover: true,
-                // theme: "css-variables",
-                // themes: { dark: "github-dark", light: "github-light" },
                 theme: "github-dark",
                 transformers: [
                   transformerNotationDiff(),
-                  // {
-                  //   line(node: any, line: any) {
-                  // node.properties["data-line"] = line;
-                  // if (!node.children.length) {
-                  //   console.log(node, this.lines.length, line);
-                  // }
-                  // if ([1, 3, 4].includes(line))
-                  //   this.addClassToHast(node, "foo");
-                  // },
-                  // },
+                  (() => {
+                    let meta: any;
+                    return {
+                      preprocess(raw: any, options: any) {
+                        meta = {};
+                        const rawMeta = options.meta.__raw;
+                        if (!rawMeta) return;
+                        meta = Object.fromEntries(
+                          Object.entries(
+                            parseDelimitedString(rawMeta, " ")
+                          ).map(([k, v]) => [k, JSON.parse(v)])
+                        );
+                      },
+                      code(node: any) {
+                        node.properties = { ...node.properties, ...meta };
+                        node.meta = meta;
+                      },
+                    };
+                  })(),
                 ],
-
-                // 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/*"],
-                //   },
-                // },
               },
             ],
+            [rehypeRaw, { passThrough: nodeTypes }],
           ],
-          remarkPlugins: [remarkFrontmatter, remarkGfm],
         }),
         linariaVitePlugin({
           include: [/\/src\//],

generated/image-loader/assets/about/project-blog-1.jpg.meta.json

@@ -1 +1 @@
-{"width":1138,"height":569,"gradient":["#374452","#34404C"]}
+{"width":2240,"height":1395,"gradient":["#343F4B","#2E3A46"]}

generated/image-loader/src/articles/2024-04-14-deploying-nixos-to-digital-ocean/droplet-created.jpg.x400.meta.json

@@ -0,0 +1 @@
+{"width":589,"height":400,"gradient":["#1D2123","#1D1E20"]}

generated/image-loader/src/articles/2024-04-14-deploying-nixos-to-digital-ocean/no-nixos.jpg.x300.meta.json

@@ -0,0 +1 @@
+{"width":801,"height":300,"gradient":["#1B1D20","#1D1E22"]}

generated/image-loader/src/articles/2024-04-14-deploying-nixos-to-digital-ocean/no-nixos.jpg.x400.meta.json

@@ -0,0 +1 @@
+{"width":1068,"height":400,"gradient":["#1B1D20","#1D1E22"]}

package.json

@@ -14,24 +14,24 @@
     "@kobalte/core": "0.12.6",
     "@linaria/core": "6.1.0",
     "@mdx-js/mdx": "3.0.1",
-    "@solidjs/meta": "^0.29.2",
-    "@solidjs/router": "^0.13.2",
+    "@solidjs/meta": "0.29.3",
+    "@solidjs/router": "0.13.2",
     "@solidjs/start": "^1.0.0-rc.0",
     "@vinxi/plugin-mdx": "3.7.1",
     "@wyw-in-js/vite": "0.5.0",
     "babel-plugin-transform-remove-imports": "1.7.1",
     "classnames": "2.5.1",
     "cssnano": "6.1.2",
-    "postcss-preset-env": "9.5.4",
+    "postcss-preset-env": "9.5.5",
     "postcss-pxtorem": "6.1.0",
     "rehype-raw": "7.0.0",
     "remark-shiki-twoslash": "^3.1.3",
-    "sass": "1.72.0",
+    "sass": "1.75.0",
     "solid-js": "^1.8.16",
     "solid-labels": "0.16.0",
     "solid-mdx": "0.0.7",
     "tailwindcss": "3.4.3",
-    "typescript": "5.4.4",
+    "typescript": "5.4.5",
     "vinxi": "^0.3.11",
     "vite-plugin-compile-time": "0.2.1"
   },
@@ -48,10 +48,11 @@
     "imagemagick": "0.1.3",
     "prettier": "3.2.5",
     "prettier-plugin-organize-imports": "3.2.4",
-    "prettier-plugin-tailwindcss": "0.5.13",
+    "prettier-plugin-tailwindcss": "0.5.14",
+    "remark-captions": "2.2.3",
     "remark-frontmatter": "5.0.0",
     "remark-gfm": "4.0.0",
-    "solid-devtools": "0.30.0",
+    "solid-devtools": "0.30.1",
     "ts-node": "10.9.2",
     "vite-plugin-solid-svg": "0.8.1"
   }

src/Article.tsx

@@ -1,8 +1,9 @@
-import { Tooltip } from "@kobalte/core";
+import { Separator, Tooltip } from "@kobalte/core";
 import { css } from "@linaria/core";
 import { Meta } from "@solidjs/meta";
 import cn from "classnames";
 import { Component, children, lazy } from "solid-js";
+import DialogImage from "~/DialogImage";
 import LazyImage from "~/LazyImage";
 import Spoiler from "~/Spoiler";
 import Icon from "~/components/Icon";
@@ -29,7 +30,15 @@ const Article: Component<Props> = (props) => {
   return (
     <div class={_Article}>
       <Meta name="description" content={meta.description} />
+      <span class="mb-2">
+        <a href="/">Articles</a>{" "}
+        <span class="text-colors-textb;e-300a">{">"}</span> {meta.title}
+      </span>
       <h1 class="text-colors-text-900a">{meta.title}</h1>
+      <div class="mb-4 mt-1 text-colors-text-300a">
+        {meta.date} by <a href="/about">Matic Utsumi Gačar</a>
+      </div>
+      <Separator.Root class="mb-4 mt-4 border-colors-text-100a" />
       <RawArticle
         components={{
           ["data-lsp"]: (props: any) => {
@@ -50,31 +59,46 @@ const Article: Component<Props> = (props) => {
           pre: (props: any) => <pre {...props} title={null} />,
           Img: (props: any) => {
             return (
-              <figure class="mb-2 mt-2 flex justify-center">
+              <figure class="mb-8 mt-8 flex justify-center">
                 <div>
-                  <img {...props} class="ml-auto mr-auto" />
+                  {/* <img {...props} class="ml-auto mr-auto" /> */}
+                  <DialogImage
+                    thumbnail={props.src}
+                    image={props.src}
+                    alt="image"
+                  />
                   <Show when={props.caption}>
-                    <figcaption class="mt-1">{props.caption}</figcaption>
+                    <figcaption class="mt-1 text-colors-text-300a">
+                      {props.caption}
+                    </figcaption>
                   </Show>
                 </div>
               </figure>
             );
           },
-          // code: (props: any) => {
-          //   const { children: _c, ...rest } = $destructure(props);
-          //   const c = children(() => _c);
-          //   return (
-          //     <code
-          //       {...rest}
-          //       class={
-          //         typeof c() == "string"
-          //           ? "rounded bg-colors-primary-300 pl-2 pr-2"
-          //           : ""
-          //       }>
-          //       {c()}
-          //     </code>
-          //   );
-          // },
+          code: (props: any) => {
+            const { children: _c, title, ...rest } = $destructure(props);
+            const c = children(() => _c);
+            return (
+              <>
+                <Show when={title}>
+                  <div class="relative left-[-8px] top-[-8px] flex w-[calc(100%+16px)] gap-2 bg-colors-primary-200 pb-1 pl-4 pr-4 pt-1">
+                    <IconText icon="code" />
+                    {title}
+                  </div>
+                </Show>
+                <code
+                  {...rest}
+                  class={
+                    typeof c() == "string"
+                      ? "rounded bg-colors-primary-300 pl-2 pr-2"
+                      : ""
+                  }>
+                  {c()}
+                </code>
+              </>
+            );
+          },
           h1: (props: any) => (
             <h2 {...props} class="text-h2 text-colors-text-900a" />
           ),
@@ -90,21 +114,45 @@ const Article: Component<Props> = (props) => {
           ),
           li: (props: any) => <li {...props} />,
           em: (props: any) => <em {...props} class="pr-1" />,
+          figure: (props: any) => {
+            const { children, ...rest } = $destructure(props);
+            //   const c = children(() => _c);
+            //
+            //   const isTable =
+            //     (c() as any[])?.find((x: any) => typeof x != "string")?.tagName ==
+            //     "TABLE";
+            //
+            //   console.log("fig", isTable, c());
+            //   if (isTable) {
+            //     return <figure {...rest}>{c()}</figure>;
+            //   }
+            return (
+              <figure {...rest} class="flex justify-center">
+                <div class="">{children}</div>
+              </figure>
+            );
+          },
           table: (props: any) => (
             <table
               {...props}
-              class="mb-4 mt-4 border-2 border-colors-text-300a"
+              class="mb-8 ml-auto mr-auto mt-8 border-2 border-colors-text-300a"
             />
           ),
           th: (props: any) => {
             return (
               <th
                 {...props}
                 style={{ ...props.style, "text-align": props.style.textAlign }}
-                class="pb-1 pl-2 pr-2 pt-1 pt-1 text-colors-text-900a"
+                class="pb-1 pl-2 pr-2 pt-1 text-colors-text-900a"
               />
             );
           },
+          figcaption: (props: any) => (
+            <figcaption
+              {...props}
+              class="relative top-[-24px] text-colors-text-300a"
+            />
+          ),
           td: (props: any) => <td {...props} class="pb-1 pl-2 pr-2 pt-1" />,
           Spoiler: (props: any) => <Spoiler>{props.children}</Spoiler>,
           Embed: (props: any) => {
@@ -133,18 +181,6 @@ const Article: Component<Props> = (props) => {
             }
             return null;
           },
-          div: (props: any) => {
-            if (props.className?.includes("code-title")) {
-              const { className, ...rest } = $destructure(props);
-              return (
-                <div class={cn(className, "flex gap-2")} {...rest}>
-                  <IconText icon="code" />
-                  {props.children}
-                </div>
-              );
-            }
-            return <div {...props} />;
-          },
           ["data-err"]: (props: any) => {
             return null;
           },
@@ -159,6 +195,10 @@ const _Article = css`
     // width: calc((var(--width) / 16) * ${remBase}rem);
     // height: calc((var(--height) / 16) * ${remBase}rem);
   }
+  // figure {
+  //   display: flex;
+  //   justify-content: center;
+  // }
 `;
 
 export default Article;

src/BlogIndex.tsx

@@ -19,10 +19,10 @@ const BlogIndex: Component<Props> = (props) => {
         <For each={articles}>
           {(item, idx) => (
             <>
-              <li class="flex flex-col p-4 hover:bg-colors-primary-100">
+              <li class="flex flex-col hover:bg-colors-primary-100">
                 <a
                   href={`${config.base}${item.url}`}
-                  class="flex flex-col no-underline">
+                  class="flex flex-col p-4 no-underline">
                   <span class="text-h2 text-colors-primary-800">
                     {item.title}
                   </span>
@@ -36,7 +36,7 @@ const BlogIndex: Component<Props> = (props) => {
                 </a>
               </li>
               <Show when={idx() != articles.length - 1}>
-                <Separator.Root class="border-colors-text-300a" />
+                <Separator.Root class="border-colors-text-100a" />
               </Show>
             </>
           )}