urara/mdsvex.config.js at main · importantimport/urara · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import { lex, parse as parseFence } from 'fenceparser'
import Slugger from 'github-slugger'
import { toString } from 'mdast-util-to-string'
import { escapeSvelte } from 'mdsvex'
import { join, parse } from 'node:path'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypeExternalLinks from 'rehype-external-links'
import rehypeSlug from 'rehype-slug'
import remarkFFF from 'remark-fff'
import remarkFootnotes from 'remark-footnotes'
import { createShikiHighlighter, renderCodeToHTML, runTwoSlash } from 'shiki-twoslash'
import { visit } from 'unist-util-visit'

const remarkUraraFm
  = () =>
    (tree, { data, filename }) => {
      const filepath = filename ? filename.split('/src/routes')[1] : 'unknown'
      const { dir, name } = parse(filepath)
      if (!data.fm)
        data.fm = {}
      // Generate slug & path
      data.fm.slug = filepath
      data.fm.path = join(dir, `/${name}`.replace('/+page', '').replace('.svelte', ''))
      // Generate ToC
      if (data.fm.toc !== false) {
        const [slugs, toc] = [new Slugger(), []]
        visit(tree, 'heading', (node) => {
          toc.push({
            depth: node.depth,
            slug: slugs.slug(toString(node), false),
            title: toString(node),
          })
        })
        if (toc.length > 0)
          data.fm.toc = toc
        else data.fm.toc = false
      }
    }

// Better type definitions needed
const remarkUraraSpoiler = () => tree =>
  visit(tree, 'paragraph', (node) => {
    const { children } = node
    const text = children[0].value
    const re = /\|\|(.+?)\|\|/g
    if (re.test(children[0].value)) {
      children[0].type = 'html'
      children[0].value = text.replace(re, (_match, p1) => `<span class="spoiler">${p1}</span>`)
    }
    return node
  })

/** @type {import("mdsvex").MdsvexOptions} */
export default {
  extensions: ['.svelte.md', '.md'],
  highlight: {
    highlighter: async (code, lang, meta) => {
      let fence, twoslash
      try {
        fence = parseFence(lex([lang, meta].filter(Boolean).join(' ')))
      }
      catch (error) {
        throw new Error(`Could not parse the codefence for this code sample \n${code}`)
      }
      if (fence?.twoslash === true)
        twoslash = runTwoSlash(code, lang)
      return `{@html \`${escapeSvelte(
        renderCodeToHTML(
          code,
          lang,
          fence ?? {},
          { themeName: 'material-default' },
          await createShikiHighlighter({ theme: 'material-default' }),
          twoslash,
        ),
      )}\` }`
    },
  },
  layout: {
    _: './src/lib/components/post_layout.svelte',
  },
  rehypePlugins: [
    rehypeSlug,
    [rehypeAutolinkHeadings, { behavior: 'wrap' }],
    [
      rehypeExternalLinks,
      {
        rel: ['nofollow', 'noopener', 'noreferrer', 'external'],
        target: '_blank',
      },
    ],
  ],
  remarkPlugins: [
    [
      remarkFFF,
      {
        autofill: {
          path: path => path.replace('/src/routes/', '/urara/'),
          provider: 'fs',
        },
        presets: [],
        strict: {
          media: {
            array: false,
            type: 'string',
          },
        },
        target: 'mdsvex',
      },
    ],
    remarkUraraFm,
    remarkUraraSpoiler,
    [remarkFootnotes, { inlineNotes: true }],
  ],
  smartypants: {
    dashes: 'oldschool',
  },
}