fix callouts

Author: zzq0826

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,
+  }
+}

package-lock.json

@@ -28,6 +28,7 @@
     "@astrojs/prism": "^1.0.2",
     "@astrojs/tailwind": "^3.1.3",
     "@nanostores/preact": "^0.3.1",
+    "astro-auto-import": "^0.3.0",
     "astro-i18next": "^1.0.0-beta.21",
     "clipboard": "^2.0.11",
     "ethers": "^5.7.2",

package.json

@@ -5,7 +5,6 @@ import WhatsNext from "./WhatsNext.astro"
 const { content, githubEditUrl, headings } = Astro.props
 const title = content.title
 const whatsNext = content.whatsnext
-console.log("whatsNext", whatsNext)
 ---
 
 <article id="article" class="content">

src/components/PageContent/PageContent.astro

@@ -48,7 +48,7 @@ Some networks are not EVM-compatible and use languages other than Solidity for s
 
 The structure of a smart contract is similar to that of a class in Javascript, with a few differences. For example, the following `HelloWorld` contract is a simple smart contract that stores a single variable and includes a function to update the value of that variable.
 
-::solidity-remix[/samples/Tutorials/HelloWorld.sol]
+::solidity-remix[samples/Tutorials/HelloWorld.sol]
 
 ### Solidity versions
 

src/content/docs/en/getting-started/overview.md

@@ -9,9 +9,20 @@ import ClickToZoom from "../../../../components/ClickToZoom.astro"
 import priceAggr from "../../../../assets/images/contract-devs/price-aggr.png"
 import ToggleElement from "../../../../components/ToggleElement.astro"
 import Aside from "../../../../components/Aside.astro"
+import CodeSample from "../../../../components/CodeSample/CodeSample.astro"
+
+:::tip[Did you know?]
+Astro helps you build faster websites with “Islands Architecture”.
+:::
+
+:::solidity-remix[samples/Tutorials/HelloWorld.sol]
+Astro helps you build faster websites with “Islands Architecture”.
+:::
 
 Content for the Research landing page. for fancy stuff, see the infrastructure page.
 
+<CodeSample lang="solidity" src="/samples/Tutorials/Test.sol" />
+
 ### Callouts
 
 <Aside type="note" title="note">
@@ -31,12 +42,6 @@ Content for the Research landing page. for fancy stuff, see the infrastructure p
   For .md file you can use this code.
 </Aside>
 
-```
-:::tip[Did you know?]
- Astro helps you build faster websites with “Islands Architecture”.
-:::
-```
-
 ### Images zoom
 
 <ClickToZoom src={priceAggr} />

src/content/docs/en/learn/index.mdx

@@ -47,8 +47,6 @@ if (!page.notTranslated) {
   changeLanguage(params.lang)
 }
 
-console.log("page", page)
-
 const content = {
   ...page.data,
   lang: params.lang,