Update v1.7.0

astro.config.mjs

@@ -3,20 +3,21 @@ import { s } from 'hastscript';
 
 import react from '@astrojs/react';
 import sitemap from '@astrojs/sitemap';
+import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers';
 import compress from 'astro-compress';
 import astroExpressiveCode from 'astro-expressive-code';
 import rename from 'astro-rename';
 import robotsTxt from 'astro-robots-txt';
 
 import remarkAlertBlocks from '@lucjosin/remark-alert-blocks';
 import remarkCodeHighlight from '@lucjosin/remark-code-highlight';
+import remarkCodeSet from '@lucjosin/remark-code-set';
 import remarkImageCaption from '@lucjosin/remark-image-caption';
 import remarkPostReference from '@lucjosin/remark-post-reference';
 import remarkReadmeStats from '@lucjosin/remark-readme-stats';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeExternalLinks from 'rehype-external-links';
 import rehypeSlug from 'rehype-slug';
-import codeset from 'remark-codeset';
 import remarkCollapse from 'remark-collapse';
 import numberedFootnoteLabels from 'remark-numbered-footnote-labels';
 import remarkToc from 'remark-toc';
@@ -42,7 +43,13 @@ export default defineConfig({
   // Ref: https://docs.astro.build/en/guides/integrations-guide/
   // Ref: https://docs.astro.build/en/guides/integrations-guide/sitemap/
   integrations: [
-    astroExpressiveCode(),
+    astroExpressiveCode({
+      themes: ['dark-plus', 'light-plus'],
+      useDarkModeMediaQuery: true,
+      themeCssSelector: (theme) =>
+        `[data-theme='${theme.name.replace('-plus', '')}']`,
+      plugins: [pluginLineNumbers()],
+    }),
     rename({
       rename: {
         strategy: (key) => renamer.rename(key),
@@ -116,7 +123,7 @@ export default defineConfig({
         remarkReadmeStats,
         {
           darkBgColor: '111111',
-          lightBgColor: 'f0f0f0',
+          lightBgColor: 'ffffff',
           borderRadius: '10',
         },
       ],
@@ -125,7 +132,7 @@ export default defineConfig({
       remarkAlertBlocks,
       remarkCodeHighlight,
       remarkImageCaption,
-      codeset,
+      remarkCodeSet,
       remarkToc,
       [
         remarkCollapse,

package.json

@@ -14,42 +14,43 @@
     "@astrojs/sitemap": "^3.0.2",
     "@lucjosin/remark-alert-blocks": "./plugins/remark-alert-blocks",
     "@lucjosin/remark-code-highlight": "./plugins/remark-code-highlight",
+    "@lucjosin/remark-code-set": "./plugins/remark-code-set",
     "@lucjosin/remark-image-caption": "./plugins/remark-image-caption",
     "@lucjosin/remark-post-reference": "./plugins/remark-post-reference",
     "@lucjosin/remark-readme-stats": "./plugins/remark-readme-stats",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
     "astro": "^3.3.4",
-    "astro-compress": "^2.1.5",
-    "astro-expressive-code": "^0.26.2",
+    "astro-compress": "^2.2.10",
+    "astro-expressive-code": "^0.33.4",
     "astro-icon": "^0.8.1",
-    "astro-rename": "^1.1.1",
+    "astro-rename": "^1.1.2",
     "astro-robots-txt": "^1.0.0",
-    "eslint": "^8.52.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-astro": "^0.29.1",
-    "prettier": "^3.0.3",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-astro": "^0.31.4",
+    "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.12.0",
-    "rehype-autolink-headings": "^7.0.0",
+    "rehype-autolink-headings": "^7.1.0",
     "rehype-external-links": "^3.0.0",
     "rehype-slug": "^6.0.0",
-    "remark-codeset": "^1.1.4",
     "remark-collapse": "^0.1.2",
     "remark-numbered-footnote-labels": "^1.1.0",
     "remark-toc": "^8.0.1",
-    "satori": "^0.10.9",
+    "satori": "^0.10.13",
     "satori-html": "^0.3.2",
     "svgo": "2.8.0",
     "typescript": "^5.2.2"
   },
   "dependencies": {
     "@astrojs/react": "^3.0.3",
     "@astrojs/rss": "^3.0.0",
+    "@expressive-code/plugin-line-numbers": "^0.33.4",
     "@resvg/resvg-js": "^2.5.0",
     "@swup/astro": "^1.3.2",
     "@types/react": "^18.2.29",
     "@types/react-dom": "^18.2.14",
-    "medium-zoom": "^1.0.8",
+    "medium-zoom": "^1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "reading-time": "^1.5.0"

plugins/remark-code-set/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@lucjosin/remark-code-set",
+  "version": "1.0.0",
+  "type": "module",
+  "author": {
+    "name": "Lucas Josino",
+    "username": "LucJosin",
+    "email": "contact@lucasjosino.com",
+    "url": "https://lucasjosino.com"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "homepage": "https://github.com/LucJosin/lucasjosino.com",
+  "bugs": {
+    "url": "https://github.com/LucJosin/lucasjosino.com",
+    "email": "hawapi@lucasjosino.com"
+  },
+  "license": "MIT",
+  "keywords": [
+    "remark-plugin",
+    "remark-code-set"
+  ],
+  "main": "src/index.js",
+  "dependencies": {
+    "hastscript": "^8.0.0",
+    "remark": "^15.0.1",
+    "unist-util-is": "^6.0.0",
+    "unist-util-visit": "^5.0.0"
+  }
+}

plugins/remark-code-set/src/index.js

@@ -0,0 +1,72 @@
+import { parse } from 'node:querystring';
+import { remark } from 'remark';
+import { visit } from 'unist-util-visit';
+
+const metaDelimiter = ' ';
+
+function createTabs(tabs, children) {
+  return {
+    type: 'wrapper',
+    data: {
+      hName: 'div',
+      hProperties: {
+        id: tabs,
+        className: 'remark-code-tabs',
+      },
+    },
+    children: children,
+  };
+}
+
+function createTab(childNode, group, index) {
+  const tabId = `${group}#${index}`;
+  const code = remark().parse(childNode).children[0];
+  const meta = parse(code.meta ?? '', metaDelimiter);
+
+  return [
+    {
+      type: 'html',
+      value: `<label for="${tabId}" class="remark-code-tab">
+        <input
+          type="radio"
+          id=${tabId}
+          name="${group}"
+          ${index === 0 ? 'checked' : ''}/>
+        <span>${meta.label}</span>
+      </label>`,
+    },
+    {
+      type: 'wrapper',
+      data: {
+        hName: 'div',
+        hProperties: {
+          className: 'remark-code-content',
+        },
+      },
+      children: [code],
+    },
+  ];
+}
+
+export default function remarkCodeTabs() {
+  return function transform(tree) {
+    visit(tree, 'code', function (node) {
+      if (node.lang !== 'codeset') return;
+
+      const meta = parse(node.meta ?? '', metaDelimiter);
+      if (!meta.tabs) return;
+
+      const codeList = node.value.split(':-:');
+
+      const tabs = [];
+      for (let i = 0; i < codeList.length; i++) {
+        tabs.push(...createTab(codeList[i], meta.tabs, i));
+      }
+
+      // Create wrapper
+      const newNode = createTabs(meta.tabs, [...tabs]);
+
+      Object.assign(node, newNode);
+    });
+  };
+}