Merge pull request #12 from scroll-tech/ui-refactor

UI refactor

Author: dghelm

astro.config.ts

@@ -2,8 +2,8 @@ import { defineConfig } from "astro/config"
 import preact from "@astrojs/preact"
 import react from "@astrojs/react"
 import astroI18next from "astro-i18next"
-import { astroCallouts } from "./integrations/astro-callouts"
-import { solidityRemixCode } from "./integrations/solidity-remix"
+import { astroCallouts, asideAutoImport } from "./integrations/astro-callouts"
+import { solidityRemixCode, codeSampleAutoImport } from "./integrations/solidity-remix"
 import { youtubeEmbed } from "./integrations/youtube-embed"
 import mdx from "@astrojs/mdx"
 import rehypeSlug from "rehype-slug"
@@ -12,6 +12,7 @@ import rehypeKatex from "rehype-katex"
 import remarkGfm from "remark-gfm"
 import remarkMath from "remark-math"
 import image from "@astrojs/image"
+import AutoImport from "astro-auto-import"
 
 import sitemap from "@astrojs/sitemap"
 
@@ -24,6 +25,9 @@ export default defineConfig({
     astroFlavoredMarkdown: true,
   },
   integrations: [
+    AutoImport({
+      imports: [asideAutoImport, codeSampleAutoImport],
+    }),
     preact({
       compat: true,
     }),

integrations/astro-callouts.ts

@@ -1,18 +1,16 @@
-/**
- * Astro's implementation of callouts
- * https://github.com/withastro/docs/blob/main/integrations/astro-asides.ts
- */
-
 import type { AstroIntegration } from "astro"
 import type * as mdast from "mdast"
-import type * as unified from "unified"
-import { h } from "hastscript"
 import remarkDirective from "remark-directive"
-import { visit } from "unist-util-visit"
+import type * as unified from "unified"
 import { remove } from "unist-util-remove"
+import { visit } from "unist-util-visit"
+import { makeComponentNode } from "./utils/makeComponentNode"
 
 const AsideTagname = "AutoImportedAside"
 
+export const asideAutoImport: Record<string, [string, string][]> = {
+  "~/components/Aside.astro": [["default", AsideTagname]],
+}
 /**
  * remark plugin that converts blocks delimited with `:::` into instances of
  * the `<Aside>` component. Depends on the `remark-directive` module for the
@@ -38,8 +36,9 @@ function remarkAsides(): unified.Plugin<[], mdast.Root> {
   const variants = new Set(["note", "tip", "caution", "danger"])
 
   const transformer: unified.Transformer<mdast.Root> = (tree) => {
-    visit(tree, (node) => {
-      if (node.type !== "containerDirective") return
+    // @ts-expect-error Possibly infinite type instantiation we can’t do anything about.
+    visit(tree, (node, index, parent) => {
+      if (!parent || index === null || node.type !== "containerDirective") return
       const type = node.name
       if (!variants.has(type)) return
 
@@ -57,9 +56,8 @@ function remarkAsides(): unified.Plugin<[], mdast.Root> {
         }
       })
 
-      const data = node.data || (node.data = {})
-      data.hName = AsideTagname
-      data.hProperties = h(AsideTagname, { type, title }).properties
+      // Replace this node with the aside component it represents.
+      parent.children[index] = makeComponentNode(AsideTagname, { attributes: { type, title } }, ...node.children)
     })
   }
 
@@ -75,18 +73,12 @@ export function astroCallouts(): AstroIntegration {
   return {
     name: "@astrojs/callouts",
     hooks: {
-      "astro:config:setup": ({ injectScript, updateConfig }) => {
+      "astro:config:setup": ({ updateConfig }) => {
         updateConfig({
           markdown: {
             remarkPlugins: [remarkDirective, remarkAsides()],
           },
         })
-
-        // Auto-import the Aside component and attach it to the global scope
-        injectScript(
-          "page-ssr",
-          `import ${AsideTagname} from "~/components/Aside.astro"; global.${AsideTagname} = ${AsideTagname};`
-        )
       },
     },
   }

integrations/solidity-remix.ts

@@ -10,9 +10,14 @@ import { h } from "hastscript"
 import remarkDirective from "remark-directive"
 import { visit } from "unist-util-visit"
 import { remove } from "unist-util-remove"
+import { makeComponentNode } from "./utils/makeComponentNode"
 
 const CodeSampleTagName = "AutoImportedCodeSample"
 
+export const codeSampleAutoImport: Record<string, [string, string][]> = {
+  "~/components/CodeSample/CodeSample.astro": [["default", CodeSampleTagName]],
+}
+
 /**
  * remark plugin that converts blocks delimited with `:::` into instances of
  * the `<CodeSample>` component. Depends on the `remark-directive` module for the
@@ -52,6 +57,18 @@ function remarkSolidityRemix(): unified.Plugin<[], mdast.Root> {
 
       if (!src) throw Error("No source was provided for the solidity example")
 
+      // const codeSnippetWrapper = makeComponentNode(
+      // 	CodeSnippetTagname,
+      // 	{ mdx: isMDX, attributes },
+      // 	code
+      // );
+
+      // parent.children[index] = makeComponentNode(
+      // 	AsideTagname,
+      // 	{ mdx: isMDXFile(file), attributes: { type, title } },
+      // 	...node.children
+      // );
+
       const data = node.data || (node.data = {})
       data.hName = CodeSampleTagName
       data.hProperties = h(CodeSampleTagName, {
@@ -73,18 +90,12 @@ export function solidityRemixCode(): AstroIntegration {
   return {
     name: "@smart-contract/solidity-remix",
     hooks: {
-      "astro:config:setup": ({ injectScript, updateConfig }) => {
+      "astro:config:setup": ({ updateConfig }) => {
         updateConfig({
           markdown: {
             remarkPlugins: [remarkDirective, remarkSolidityRemix()],
           },
         })
-
-        // Auto-import the Aside component and attach it to the global scope
-        injectScript(
-          "page-ssr",
-          `import ${CodeSampleTagName} from "~/components/CodeSample/CodeSample.astro"; global.${CodeSampleTagName} = ${CodeSampleTagName};`
-        )
       },
     },
   }

integrations/utils/makeComponentNode.ts

@@ -0,0 +1,33 @@
+import type { BlockContent } from "mdast"
+import type { MdxJsxAttribute, MdxJsxFlowElement } from "mdast-util-mdx-jsx"
+
+interface NodeProps {
+  attributes?: Record<string, string | boolean | number | undefined | null>
+}
+
+/**
+ * Create AST node for a custom component injection.
+ *
+ * @example
+ * makeComponentNode('MyComponent', { prop: 'val' }, h('p', 'Paragraph inside component'))
+ *
+ */
+export function makeComponentNode(
+  name: string,
+  { attributes = {} }: NodeProps = {},
+  ...children: BlockContent[]
+): MdxJsxFlowElement {
+  return {
+    type: "mdxJsxFlowElement",
+    name,
+    attributes: Object.entries(attributes)
+      // Filter out non-truthy attributes to avoid empty attrs being parsed as `true`.
+      .filter(([_k, v]) => v !== false && Boolean(v))
+      .map(([name, value]) => ({
+        type: "mdxJsxAttribute",
+        name,
+        value: value as MdxJsxAttribute["value"],
+      })),
+    children,
+  }
+}