no-astro-mdx

astro.config.ts

@@ -1,11 +1,6 @@
 import { defineConfig, AstroUserConfig } from 'astro/config'
 import vercel from '@astrojs/vercel/serverless'
-// import node from '@astrojs/node'
 import solidJs from '@astrojs/solid-js'
-import mdx from '@astrojs/mdx'
-// import partytown from '@astrojs/partytown'
-import { markdownOptions as markdown } from './mdx.config'
-// import sitemap from '@astrojs/sitemap'
 import type { CSSOptions } from 'vite'
 import defaultGenerateScopedName from 'postcss-modules/build/generateScopedName'
 import { isDev } from './src/utils/config'
@@ -37,9 +32,7 @@ const css: CSSOptions = {
 
 const astroConfig: AstroUserConfig = {
   site: 'https://new.discours.io',
-  integrations: [solidJs(), mdx()],
-  //, partytown({})],
-  markdown,
+  integrations: [solidJs()],
   output: 'server',
   adapter: vercel(),
   vite: {
@@ -51,12 +44,6 @@ const astroConfig: AstroUserConfig = {
           manualChunks(id) {
             if (id.includes('node_modules')) {
               let chunkid = 'vendor'
-              if (id.includes('shiki')) {
-                chunkid = 'shiki'
-              }
-              if (id.includes('prismjs')) {
-                chunkid = 'prismjs'
-              }
               if (id.includes('acorn')) {
                 chunkid = 'acorn'
               }
@@ -81,7 +68,6 @@ const astroConfig: AstroUserConfig = {
               if (
                 id.includes('yjs') ||
                 id.includes('y-prosemirror') ||
-                id.includes('y-awareness') ||
                 id.includes('y-protocols') ||
                 id.includes('y-webrtc')
               ) {

mdx.config.ts

@@ -1,34 +0,0 @@
-import type { AstroUserConfig } from 'astro'
-import type { RehypePlugin } from '@astrojs/markdown-remark'
-import { selectAll } from 'hast-util-select'
-import rehypeToc from '@jsdevtools/rehype-toc'
-import rehypeAutolinkHeadings from 'rehype-autolink-headings'
-import rehypeSlug from 'rehype-slug'
-import remarkCodeTitles from 'remark-code-titles'
-
-const write =
-  (cl) =>
-  ({ properties }) => {
-    properties.className = properties.className ? properties.className + ' ' + cl : cl
-  }
-
-const adder = ([selector, className]) => {
-  const writer = write(className)
-  return (node) => selectAll(selector, node).forEach((el) => writer(el as any))
-}
-
-const addClasses = (additions) => {
-  const adders = Object.entries(additions).map((entry) => adder(entry))
-  return (node) => adders.forEach((a) => a(node))
-}
-
-export const markdownOptions: AstroUserConfig['markdown'] = {
-  remarkPlugins: [remarkCodeTitles],
-  rehypePlugins: [
-    rehypeSlug,
-    [rehypeToc as RehypePlugin<any>, { headings: ['h1', 'h2', 'h3'] }],
-    [rehypeAutolinkHeadings, { behavior: 'prepend' }],
-    [addClasses, { 'h1,h2,h3': 'title' }]
-  ],
-  extendDefaultPlugins: true
-}

package.json

@@ -36,18 +36,16 @@
     "loglevel": "^1.8.0",
     "loglevel-plugin-prefix": "^0.8.4",
     "mailgun.js": "^8.0.1",
+    "markdown-it": "^13.0.1",
+    "markdown-it-container": "^3.0.0",
+    "markdown-it-implicit-figures": "^0.10.0",
+    "markdown-it-mark": "^3.0.1",
+    "markdown-it-replace-link": "^1.1.0",
     "nanostores": "^0.7.0",
-    "postcss-modules": "^5.0.0",
-    "rehype-autolink-headings": "^6.1.1",
-    "rehype-slug": "^5.0.1",
-    "rehype-toc": "^3.0.2",
-    "remark-code-titles": "^0.1.2"
+    "postcss-modules": "^5.0.0"
   },
   "devDependencies": {
-    "@astrojs/markdown-remark": "1.1.2",
-    "@astrojs/mdx": "^0.11.1",
-    "@astrojs/node": "^1.1.0",
-    "@astrojs/partytown": "^1.0.0",
+    "@astrojs/language-server": "^0.27.0",
     "@astrojs/solid-js": "^1.1.0",
     "@astrojs/vercel": "^2.1.0",
     "@babel/core": "^7.18.13",
@@ -114,6 +112,10 @@
     "prosemirror-schema-list": "^1.2.2",
     "prosemirror-state": "^1.4.1",
     "prosemirror-view": "^1.28.1",
+    "rehype-autolink-headings": "^6.1.1",
+    "rehype-slug": "^5.0.1",
+    "rehype-toc": "^3.0.2",
+    "remark-code-titles": "^0.1.2",
     "rollup": "~2.79.1",
     "rollup-plugin-visualizer": "^5.8.2",
     "sass": "^1.55.0",

src/components/Article/Comment.tsx

@@ -4,11 +4,10 @@ import { AuthorCard } from '../Author/Card'
 import { Show } from 'solid-js/web'
 import { clsx } from 'clsx'
 import type { Author, Reaction as Point } from '../../graphql/types.gen'
-import { createMemo, createSignal, onMount } from 'solid-js'
+import { createMemo } from 'solid-js'
 import { t } from '../../utils/intl'
 // import { createReaction, updateReaction, deleteReaction } from '../../stores/zine/reactions'
-import { renderMarkdown } from '@astrojs/markdown-remark'
-import { markdownOptions } from '../../../mdx.config'
+import MD from './MD'
 import { deleteReaction } from '../../stores/zine/reactions'
 
 export default (props: {
@@ -18,17 +17,7 @@ export default (props: {
   compact?: boolean
 }) => {
   const comment = createMemo(() => props.comment)
-  const [body, setBody] = createSignal('')
-  onMount(() => {
-    const b: string = props.comment?.body
-    if (b?.toString().startsWith('<')) {
-      setBody(b)
-    } else {
-      renderMarkdown(b, markdownOptions)
-        .then(({ code }) => setBody(code))
-        .catch(console.error)
-    }
-  })
+  const body = createMemo(() => comment().body.toString().trim())
   const remove = () => {
     if (comment()?.id) {
       console.log('[comment] removing', comment().id)
@@ -71,7 +60,7 @@ export default (props: {
           </Show>
 
           <div class="comment-body" contenteditable={props.canEdit} id={'comment-' + (comment().id || '')}>
-            <div innerHTML={body()} />
+            <MD body={body()} />
           </div>
 
           <Show when={!props.compact}>

src/components/Article/FullArticle.tsx

@@ -3,14 +3,13 @@ import './Full.scss'
 import { Icon } from '../Nav/Icon'
 import ArticleComment from './Comment'
 import { AuthorCard } from '../Author/Card'
-import { createEffect, createMemo, createSignal, For, onMount, Show } from 'solid-js'
+import { createMemo, For, onMount, Show } from 'solid-js'
 import type { Author, Reaction, Shout } from '../../graphql/types.gen'
 import { t } from '../../utils/intl'
 import { showModal } from '../../stores/ui'
 import { useAuthStore } from '../../stores/auth'
 import { incrementView } from '../../stores/zine/articles'
-import { renderMarkdown } from '@astrojs/markdown-remark'
-import { markdownOptions } from '../../../mdx.config'
+import MD from './MD'
 
 const MAX_COMMENT_LEVEL = 6
 
@@ -38,24 +37,9 @@ const formatDate = (date: Date) => {
 }
 
 export const FullArticle = (props: ArticleProps) => {
-  const [body, setBody] = createSignal(props.article.body?.startsWith('<') ? props.article.body : '')
-
+  const body = createMemo(() => props.article.body.toString().trim())
   const { session } = useAuthStore()
 
-  createEffect(() => {
-    if (body() || !props.article.body) {
-      return
-    }
-
-    if (props.article.body.startsWith('<')) {
-      setBody(props.article.body)
-    } else {
-      renderMarkdown(props.article.body, markdownOptions)
-        .then(({ code }) => setBody(code))
-        .catch(console.error)
-    }
-  })
-
   onMount(() => {
     incrementView({ articleSlug: props.article.slug })
   })
@@ -110,7 +94,7 @@ export const FullArticle = (props: ArticleProps) => {
         </div>
 
         <div class="shout__body">
-          <div innerHTML={body()} />
+          <MD body={body()} />
         </div>
       </article>
 

src/components/Article/MD.tsx

@@ -0,0 +1,24 @@
+import MD from 'markdown-it'
+import mdfig from 'markdown-it-implicit-figures'
+import mdmark from 'markdown-it-mark'
+import mdcustom from 'markdown-it-container'
+import mdlinks from 'markdown-it-replace-link'
+import { createMemo } from 'solid-js'
+
+const mit = MD({
+  html: true,
+  linkify: true,
+  typographer: true
+})
+mit.use(mdmark)
+mit.use(mdcustom)
+mit.use(mdfig, {
+  dataType: false, // <figure data-type="image">
+  figcaption: true // <figcaption>alternative text</figcaption>
+})
+mit.use(mdlinks)
+
+export default (props: { body: string }) => {
+  const body = createMemo(() => (props.body.startsWith('<') ? props.body : mit.render(props.body)))
+  return <div innerHTML={body()} />
+}