Merge pull request #1787 from kubosho/update-unified-and-related-pack…

…ages Update unified and related packages
kubosho · Jul 22, 2024 · 3b59b9c · 3b59b9c
2 parents f35618a + 694a45b
commit 3b59b9c
Show file tree

Hide file tree

Showing 7 changed files with 10,760 additions and 14,209 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -17,6 +17,9 @@ function getAdapter(): AstroIntegration {
 export default defineConfig({
   adapter: getAdapter(),
   integrations: [sitemap()],
+  markdown: {
+    syntaxHighlight: 'prism',
+  },
   output: 'hybrid',
   site: SITE_URL,
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,22 +21,18 @@
   "dependencies": {
     "@astrojs/cloudflare": "^11.0.1",
     "@astrojs/sitemap": "^3.1.6",
-    "@mapbox/rehype-prism": "^0.9.0",
     "astro": "^4.12.2",
     "dayjs": "^1.11.12",
     "escape-html": "^1.0.3",
     "prismjs": "^1.29.0",
-    "rehype": "^13.0.1",
-    "rehype-stringify": "^9.0.3",
     "remark-breaks": "^4.0.0",
-    "remark-gfm": "^3.0.1",
-    "remark-parse": "^10.0.2",
-    "remark-prism": "^1.3.6",
-    "remark-rehype": "^10.1.0",
-    "remark-stringify": "^10.0.3",
+    "remark-gfm": "^4.0.0",
+    "remark-html": "^16.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-stringify": "^11.0.0",
     "rosetta": "^1.1.0",
     "strip-markdown": "^6.0.0",
-    "unified": "^10.1.2"
+    "unified": "^11.0.5"
   },
   "devDependencies": {
     "@astrojs/node": "^8.3.2",
@@ -45,7 +41,6 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/escape-html": "^1.0.2",
-    "@types/mapbox__rehype-prism": "^0.8.0",
     "@types/node": "^20.14.11",
     "@types/prismjs": "^1.26.4",
     "fishery": "^2.2.2",
@@ -57,7 +52,6 @@
     "stylelint": "^16.7.0",
     "stylelint-config-recommended": "^14.0.1",
     "typescript": "^5.5.3",
-    "unified": "^10.1.2",
     "vitest": "^2.0.3"
   }
 }
diff --git a/src/app/entry/__tests__/fixtures/sauna.html b/src/app/entry/__tests__/fixtures/sauna.html
@@ -7,4 +7,4 @@ <h2>感じた感覚</h2>
 <p>この一連の流れは心地良さがあって、これが「整う」ことかと感じた。</p>
 <h2>やばさ</h2>
 <p>しかし椅子に座るまでの平衡感覚の失い方や血の巡りが急に良くなった感覚などを考えると、明らかに血管に対してダメージを与えていると考えてしまった。</p>
-<p>言ってしまえば「整う」のは自分の寿命を多少犠牲にして超回復するような代物ではないかと考えた。</p>
+<p>言ってしまえば「整う」のは自分の寿命を多少犠牲にして超回復するような代物ではないかと考えた。</p>
diff --git a/src/app/entry/entry_converter.ts b/src/app/entry/entry_converter.ts
@@ -1,21 +1,15 @@
-import rehypePrism from '@mapbox/rehype-prism';
-import html from 'rehype-stringify';
 import breaks from 'remark-breaks';
 import gfm from 'remark-gfm';
-import markdown from 'remark-parse';
-import remarkToRehype from 'remark-rehype';
+import html from 'remark-html';
+import parse from 'remark-parse';
 import stringify from 'remark-stringify';
 import strip from 'strip-markdown';
 import { unified } from 'unified';
 
-const markdownProcessor = unified().use(markdown).use(gfm);
+const markdownProcessor = unified().use(parse).use(gfm);
 
 export async function convertMarkdownToHtml(markdownText: string): Promise<string> {
-  const processor = markdownProcessor()
-    .use(breaks)
-    .use(remarkToRehype, { allowDangerousHtml: true })
-    .use(rehypePrism, { ignoreMissing: true })
-    .use(html, { allowDangerousHtml: true });
+  const processor = markdownProcessor().use(breaks).use(html, { sanitize: false });
 
   return (await processor.process(markdownText)).value.toString();
 }

diff --git a/src/app/feed/__tests__/fixtures/feed.xml b/src/app/feed/__tests__/fixtures/feed.xml
@@ -53,13 +53,13 @@
 &lt;p&gt;これは今も変わってなさそうでHTMLに定義されているクラス名はランダムな文字列です。&lt;/p&gt;
 &lt;p&gt;このためクラス名を元にスタイル定義をすると、将来の変更でスタイルが適用されなくなりそうです。&lt;/p&gt;
 &lt;p&gt;そのためStylus上で &lt;code&gt;data-*&lt;/code&gt; 属性のセレクタに対してスタイル定義をすれば将来的に壊れにくくなりそうという考えを持ちました。これに従って書いたCSSは次の通りです。&lt;/p&gt;
-&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;&lt;span class=&quot;token attribute&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token attr-name&quot;&gt;data-testid&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&#39;primaryColumn&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
-  &lt;span class=&quot;token property&quot;&gt;max-width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;600&lt;/span&gt;&lt;span class=&quot;token unit&quot;&gt;px&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
+&lt;pre&gt;&lt;code class=&quot;language-css&quot;&gt;[data-testid=&#39;primaryColumn&#39;] {
+  max-width: 600px;
+}
 
-&lt;span class=&quot;token selector&quot;&gt;&lt;span class=&quot;token attribute&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;token attr-name&quot;&gt;data-testid&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&#39;sidebarColumn&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;]&lt;/span&gt;&lt;/span&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
-  &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
-&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
+[data-testid=&#39;sidebarColumn&#39;] {
+  display: none;
+}
 &lt;/code&gt;&lt;/pre&gt;
 &lt;p&gt;このCSSを適用したTwitterのスクリーンショットを見てみましょう。&lt;/p&gt;
 &lt;p&gt;&lt;img src=&quot;https://blog-assets.kubosho.com/twitter_home_after.png&quot; alt=&quot;CSSを調整した後のTwitterは2カラム表示になっている。右サイドバーは非表示になっている&quot;&gt;&lt;/p&gt;

diff --git a/src/app/feed/feed_generator.ts b/src/app/feed/feed_generator.ts
@@ -56,7 +56,7 @@ async function createItemsXmlString(entries: TinyCollectionEntry[]): Promise<str
 <link rel="alternate" href="${SITE_URL}${pathList.entries}/${slug}"/>
 <id>tag:${SITE_HOSTNAME},${dayjs(data.publishedAt).tz('Asia/Tokyo').format('YYYY-MM-DD')}:entry:${slug}</id>
 <summary>${data.excerpt}</summary>
-<content type="html">${escapeHTML(content)}</content>
+<content type="html">${escapeHTML(content).trim()}</content>
 <published>${dayjs(data.publishedAt).tz('Asia/Tokyo').toISOString()}</published>
 <updated>${dayjs(data.revisedAt).tz('Asia/Tokyo').toISOString()}</updated>
 </entry>`;