feat: overhaul markdown rendering

Author: KrLite

astro.config.ts

@@ -3,9 +3,27 @@ import path from 'path'
 import vue from '@astrojs/vue'
 import mdx from '@astrojs/mdx'
 import devtoolsJson from 'vite-plugin-devtools-json'
+import type { Extension } from 'micromark-util-types'
+import { micromarkExtensions } from '@/lib/markdown'
+import remarkGfm from 'remark-gfm'
 
 export default defineConfig({
-  integrations: [vue(), mdx()],
+  integrations: [
+    vue(),
+    mdx({
+      remarkPlugins: [
+        remarkGfm,
+        (_tree, file) => {
+          const data = file.data as {
+            micromarkExtensions?: Extension[]
+          }
+
+          data.micromarkExtensions ??= []
+          data.micromarkExtensions.push(...micromarkExtensions)
+        }
+      ]
+    })
+  ],
   i18n: {
     locales: ['en', 'zh'],
     defaultLocale: 'en',

package.json

@@ -31,7 +31,10 @@
     "decamelcase-keys": "^1.1.1",
     "esbuild": "^0.25.12",
     "lodash": "^4.17.21",
-    "marked": "^16.4.2",
+    "micromark-extension-cjk-friendly": "^1.2.3",
+    "micromark-extension-cjk-friendly-gfm-strikethrough": "^1.2.3",
+    "remark-gfm": "^4.0.1",
+    "remark-mdx": "^3.1.1",
     "serve": "^14.2.5",
     "tsx": "^4.20.6",
     "vite-plugin-devtools-json": "^0.4.1",

pnpm-lock.yaml

@@ -3,8 +3,9 @@ import Logo from '@/assets/logo.svg'
 import LanguageSelector from './navigation/LanguageSelector.astro'
 import { commitHash, commitHashShort } from '@/lib/commit-hash'
 import { t } from 'astro-i18n'
-import { marked } from 'marked'
+
 import { getCopyrightSpan } from '@/lib/copyright'
+import { renderInline } from '@/lib/markdown'
 
 const props = Astro.props
 ---
@@ -16,23 +17,23 @@ const props = Astro.props
   <div class="content">
     <p>&copy; {getCopyrightSpan(2024)}&emsp;結束ティータイム</p>
     <p
-      set:html={marked.parseInline(
+      set:html={renderInline(
         t('component.footer.content', undefined, { locale: Astro.currentLocale })
       )}
     />
   </div>
   <div class="footnote">
     <p>
       <span
-        set:html={marked.parseInline(
+        set:html={renderInline(
           t('component.footer.footnote.pre', undefined, { locale: Astro.currentLocale })
         )}
       />
       <span class="select-wrapper">
         <LanguageSelector />
       </span>
       <span
-        set:html={marked.parseInline(
+        set:html={renderInline(
           t('component.footer.footnote.post', undefined, { locale: Astro.currentLocale })
         )}
       />

src/components/Footer.astro

@@ -6,25 +6,67 @@ const props = Astro.props
 
 <div {...props}>
   <slot name="title" />
-  <TicketCard class="description-card" borderThickness="1px" cornerSize="3.25em">
+  <div class="spacing" data-spacing="1"></div>
+  <TicketCard class="card description-card" borderThickness="1px" cornerSize="3.25em">
     <slot name="description" />
   </TicketCard>
-  <TicketCard class="portfolio-card" borderThickness="1px" cornerSize="3.25em">
+  <TicketCard class="card portfolio-card" borderThickness="1px" cornerSize="3.25em">
     <slot name="portfolio" />
   </TicketCard>
 </div>
 
 <style lang="scss">
+  @use '@/styles/mixins' as *;
+
+  .spacing {
+    &[data-spacing='1'] {
+      height: 2.5rem;
+
+      @include layout(desktop) {
+        height: 0;
+      }
+    }
+  }
+
+  .card {
+    padding: 1.5em 1em;
+
+    --hr-spacing: 2em;
+    --hr-padding: 1em;
+
+    @include layout(compact) {
+      padding: 2em 1px;
+      margin: 0 -1px;
+
+      --hr-spacing: 2em;
+      --hr-padding: 0;
+
+      &:last-child {
+        mask: linear-gradient(to bottom, black calc(100% - 2em), transparent calc(100% - 2em));
+      }
+    }
+
+    @include layout(desktop) {
+      padding: 2em;
+      margin: 4.25em 2.5em;
+
+      --hr-spacing: 3em;
+      --hr-padding: 2em;
+    }
+  }
+
   .description-card {
-    margin: 4.25em 2.5em;
-    rotate: -3.27deg;
-    transform: translateX(-2.1%);
+    @include layout(desktop) {
+      rotate: -3.27deg;
+      transform: translateX(-3.8%);
+    }
   }
 
   .portfolio-card {
-    margin: 4.25em 2.5em;
-    rotate: 1.97deg;
-    transform: translateX(3.2%);
+    @include layout(desktop) {
+      rotate: 2.15deg;
+      transform: translateX(4.2%);
+    }
   }
 
   .links {

src/components/Overview.astro

@@ -14,7 +14,8 @@ const { borderThickness = '1px', cornerSize = '3.25em', ...props } = Astro.props
   style={`--border-thickness: ${borderThickness}; --corner-size: ${cornerSize}`}
   {...props}
 >
-  <div class="content"><slot /></div>
+  <slot />
+  <div class="border"></div>
   <div class="corner" data-corner="lt"></div>
   <div class="corner" data-corner="rt"></div>
   <div class="corner" data-corner="rb"></div>
@@ -25,14 +26,23 @@ const { borderThickness = '1px', cornerSize = '3.25em', ...props } = Astro.props
   .card {
     position: relative;
     overflow: hidden;
+    min-width: calc(var(--corner-size) * 2);
+    min-height: calc(var(--corner-size) * 2);
+
+    & > .border {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
 
-    & > .content {
-      padding: 2em;
       border-left: var(--border-thickness) solid var(--color-border);
       border-right: var(--border-thickness) solid var(--color-border);
       border-top: var(--border-thickness) dashed var(--color-border);
       border-bottom: var(--border-thickness) dashed var(--color-border);
       box-sizing: border-box;
+
+      pointer-events: none;
     }
 
     & > .corner {

src/components/TicketCard.astro

@@ -1,12 +1,23 @@
-**Kessoku Tea Time (結束ティータイム)[^name]** is a group of cute developers.
-
-[^name]: The name Kessoku Tea Time (結束ティータイム) is a combination of Kessoku (結束), which derives from the band [Kessoku Band (結束バンド)](https://bocchi-the-rock.fandom.com/wiki/Kessoku_Band) from the bangumi [Bocchi the Rock!](https://bocchi.rocks/), and Tea Time (ティータイム), which derives from the band [Ho-kago Tea Time (放課後ティータイム)](https://k-on.fandom.com/wiki/Ho-kago_Tea_Time) from the bangumi [K-ON! (けいおん！)](https://www.tbs.co.jp/anime/k-on/).
+**Kessoku Tea Time (結束ティータイム)** is a group of cute developers.
 
 ### What We Do&ensp;<img style="display: inline-block;height: 1.5em;margin-top: auto;margin-bottom: -0.25em" alt="image" src="https://github.com/KessokuTeaTime/.github/assets/68179735/4787c537-e7f7-4046-9d39-189df6cb7ed2" />
 
-- Make [Minecraft](https://minecraft.net) mods on multiple mod loaders
+- Make **[Minecraft](https://minecraft.net)** mods on multiple mod loaders
+- Design subtle websites and cute graphics (like this one!)
+- Build **open source** developer tools and libraries
 
 ### What We Can't Do&ensp;<img style="display: inline-block;height: 1.5em;margin-top: auto;margin-bottom: -0.25em" alt="image" src="https://github.com/KessokuTeaTime/.github/assets/68179735/c3360830-7261-4b0f-a9a9-b466f1c6fb2c" />
 
 - Sing
 - Become the most popular band in Shimokitazawa
+
+---
+
+<sub>
+  The name **Kessoku Tea Time (結束ティータイム)** is a combination of **Kessoku (結束),** which
+  derives from the band **[Kessoku Band
+  (結束バンド)](https://bocchi-the-rock.fandom.com/wiki/Kessoku_Band)** from the bangumi **[Bocchi
+  the Rock!](https://bocchi.rocks/),** and **Tea Time (ティータイム),** which derives from the band
+  **[Ho-kago Tea Time (放課後ティータイム)](https://k-on.fandom.com/wiki/Ho-kago_Tea_Time)** from
+  the bangumi **[K-ON! (けいおん！)](https://www.tbs.co.jp/anime/k-on/).**
+</sub>

src/components/attachments/index/Description.mdx

@@ -1 +1 @@
-# 結束ティータイム<span style="color: var(--tint-mute)"> ~ A cybershelter with tea, music and love.</span>
+# 結束ティータイム <span style="color: var(--tint-mute)"><span style="white-space: nowrap">~ A cybershelter</span> with tea, music <span style="white-space: nowrap">and love.</span></span>

src/components/attachments/index/Title.mdx

@@ -1,12 +1,23 @@
-<b>结束 TEA TIME（結束ティータイム）[^name]</b>是一群可爱的开发者。
-
-[^name]: 结束 TEA TIME（結束ティータイム）是由[结束乐队（結束バンド）](https://bocchi-the-rock.fandom.com/wiki/Kessoku_Band)的结束（来自番剧[孤独摇滚](https://bocchi.rocks/)）和[放学后 TEA TIME（放課後ティータイム）](https://k-on.fandom.com/wiki/Ho-kago_Tea_Time)的TEA TIME（ティータイム）（来自番剧[轻音少女 K-ON!](https://www.tbs.co.jp/anime/k-on/)）组合而成。
+**结束 TEA TIME（結束ティータイム）**{'\u200B'}是一群可爱的开发者。
 
 ### 我们在做的&ensp;<img style="display: inline-block;height: 1.5em;margin-top: auto;margin-bottom: -0.25em" alt="image" src="https://github.com/KessokuTeaTime/.github/assets/68179735/4787c537-e7f7-4046-9d39-189df6cb7ed2" />
 
-- 为[Minecraft](https://minecraft.net)制作跨加载器的模组
+- 为{'\u200B'}**[Minecraft](https://minecraft.net)**{'\u200B'}制作跨加载器的模组
+- 设计好康的网站和阔耐的图片（这个就是！）
+- 构建**开源**的工具和库
 
 ### 我们做不到&ensp;<img style="display: inline-block;height: 1.5em;margin-top: auto;margin-bottom: -0.25em" alt="image" src="https://github.com/KessokuTeaTime/.github/assets/68179735/c3360830-7261-4b0f-a9a9-b466f1c6fb2c" />
 
 - 唱歌
 - 成为下北泽最受欢迎的乐队
+
+---
+
+<sub>
+  **结束 TEA TIME（結束ティータイム）**{'\u200B'}是由{'\u200B'}
+  **[结束乐队（結束バンド）](https://bocchi-the-rock.fandom.com/wiki/Kessoku_Band)**{'\u200B'}的
+  {'\u200B'}**结束（来自番剧[孤独摇滚](https://bocchi.rocks/)）**{'\u200B'}和{'\u200B'}**[放学后 TEA
+  TIME（放課後ティータイム）](https://k-on.fandom.com/wiki/Ho-kago_Tea_Time)**{'\u200B'}的{'\u200B'}
+  **TEA TIME（ティータイム）（来自番剧[轻音少女 K-ON!](https://www.tbs.co.jp/anime/k-on/)）**
+  {'\u200B'}组合而成的名称。
+</sub>

src/components/attachments/index/zh/Description.mdx

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { WordleDate, WordlePartialDate, type Month } from '@/lib/wordle'
+import { renderInline } from '@/lib/markdown'
 import { t } from 'astro-i18n'
 import { computed, onMounted, ref, watchEffect } from 'vue'
-import { marked } from 'marked'
 import { Icon } from '@iconify/vue'
 
 const props = defineProps<{
@@ -53,7 +53,7 @@ function onPlay() {
     <p v-if="!isOpened">
       <span
         v-html="
-          marked.parseInline(
+          renderInline(
             t(
               'page.games.wordle.date_picker.description',
               { date: date.toDate().toLocaleDateString() },
@@ -66,7 +66,7 @@ function onPlay() {
       <button
         class="underline"
         v-html="
-          marked.parseInline(t('page.games.wordle.date_picker.play_another', undefined, { locale }))
+          renderInline(t('page.games.wordle.date_picker.play_another', undefined, { locale }))
         "
         @click="isOpened = true"
       />