Revert "Svelte Template Format"

.eleventy.js

@@ -9,69 +9,61 @@ const markdownItKatex = require("@iktakahiro/markdown-it-katex");
 const pluginTOC = require("eleventy-plugin-nesting-toc");
 const yaml = require("js-yaml");
 
-const svelte = require("./customHandlers/svelte");
+const jsx = require("./jsxHandler");
 
 module.exports = (eleventyConfig) => {
-  eleventyConfig.setTemplateFormats(["svelte", "md", "11ty.js"]);
+  eleventyConfig.setTemplateFormats(["jsx", "md", "11ty.js"]);
 
   // static file copy
   const fileCopies = ["images", "favicon.ico", "scripts"];
   for (const f of fileCopies) {
     eleventyConfig.addPassthroughCopy(`src/${f}`);
   }
 
-  // markdown customize
-  const mdLib = markdownIt({ html: true })
-    .use(markdownItAnchor)
-    .use(markdownItKatex);
-  eleventyConfig.setLibrary("md", mdLib);
-
-  // ===== PLUGINS =====
-  eleventyConfig.addPlugin(syntaxHighlight);
-
-  eleventyConfig.addPlugin(pluginTOC, {
-    tags: ["h2", "h3"],
-    wrapperClass: "toc",
-  });
-
-  // ===== custom extensions =====
   // yaml
   eleventyConfig.addDataExtension("yaml", (contents) => yaml.load(contents));
 
-  // svelte
-  eleventyConfig.addExtension("svelte", svelte);
+  // jsx
+  eleventyConfig.addExtension("jsx", jsx);
 
-  // ===== Helper functions =====
   // sass
-  eleventyConfig.addJavaScriptFunction("sassinline", (filename) => {
+  eleventyConfig.addShortcode("sassinline", (filename) => {
     return sass.compile(`${__dirname}/src/styles/${filename}`, {
       style: "compressed",
     }).css;
   });
   eleventyConfig.addWatchTarget("src/styles");
+  eleventyConfig.addPlugin(syntaxHighlight);
 
   // inline markdown
   const mdLibInline = markdownIt({ linkify: true });
-  eleventyConfig.addJavaScriptFunction("mdinline", (md) => {
+  eleventyConfig.addFilter("mdinline", (md) => {
     return mdLibInline.render(md);
   });
 
   // JS Date to ISO date string (YYYY-MM-DD)
-  eleventyConfig.addJavaScriptFunction(
-    "isodate",
-    (/**@type {Date | string}*/ date) => {
-      if (typeof date === "string") {
-        return new Date(date).toISOString().slice(0, 10);
-      }
-      return date.toISOString().slice(0, 10);
+  eleventyConfig.addFilter("isodate", (/**@type {Date | string}*/ date) => {
+    if (typeof date === "string") {
+      return new Date(date).toISOString().slice(0, 10);
     }
-  );
+    return date.toISOString().slice(0, 10);
+  });
 
-  // inline svg
   eleventyConfig.addJavaScriptFunction("svginline", (filename) =>
     fs.readFileSync(path.join(__dirname, `src/_includes/svg/${filename}.svg`))
   );
 
+  eleventyConfig.addPlugin(pluginTOC, {
+    tags: ["h2", "h3"],
+    wrapperClass: "toc",
+  });
+
+  // markdown customize
+  const mdLib = markdownIt({ html: true })
+    .use(markdownItAnchor)
+    .use(markdownItKatex);
+  eleventyConfig.setLibrary("md", mdLib);
+
   return {
     dir: {
       input: "src",

.prettierrc

@@ -1,4 +1,3 @@
 {
-  "endOfLine": "auto",
-  "pluginSearchDirs": ["."]
+  "endOfLine": "auto"
 }

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.tabSize": 2,
-  "[javascript][json][jsonc][yaml][css][scss][svelte]": {
+  "[javascriptreact][javascript][json][jsonc][yaml][css][scss]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true
   }

babel.config.json

@@ -0,0 +1,16 @@
+{
+  "presets": [
+    [
+      "@babel/preset-react",
+      { "runtime": "automatic", "importSource": "preact" }
+    ],
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ]
+  ]
+}

jsconfig.json

@@ -2,7 +2,9 @@
   "compilerOptions": {
     "target": "esnext",
     "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
     "checkJs": true
   },
-  "include": ["./src"]
+  "include": ["./src/**/*.jsx"]
 }

jsxHandler/index.js

@@ -0,0 +1,37 @@
+const path = require("path");
+
+const { jsx } = require("preact/jsx-runtime");
+const { render: renderToStaticMarkup } = require("preact-render-to-string");
+
+let Provider;
+
+module.exports = {
+  outputFileExtension: "html",
+  init() {
+    require("@babel/register")({
+      extensions: [".jsx"],
+    });
+    const jsFuncs = this.config.javascriptFunctions;
+    const ProviderFC = require("../src/_includes/EleventyContext.jsx").default;
+    Provider = ({ children }) => jsx(ProviderFC, { value: jsFuncs, children });
+  },
+  compile(_, inputPath) {
+    return function (data) {
+      const Component = require(resolveInputPath(inputPath)).default;
+      const html = renderToStaticMarkup(
+        jsx(Provider, { children: jsx(Component, data) })
+      );
+      return html.startsWith("<html") ? `<!DOCTYPE html>${html}` : html;
+    };
+  },
+  read: false,
+  getData(inputPath) {
+    return require(resolveInputPath(inputPath)).data;
+  },
+  compileOptions: {
+    permalink: "raw",
+  },
+};
+
+/** @param {string} inputPath */
+const resolveInputPath = (inputPath) => path.join(process.cwd(), inputPath);

package.json

@@ -9,26 +9,29 @@
     "build": "eleventy",
     "clean": "rimraf build",
     "dev": "eleventy --serve",
-    "format:check": "prettier --check --ignore-path .gitignore \"**/*.{js,svelte,json,yaml,scss,css}\"",
-    "format": "prettier --write --ignore-path .gitignore \"**/*.{js,svelte,json,yaml,scss,css}\""
+    "format:check": "prettier --check --ignore-path .gitignore \"**/*.{js,jsx,json,yaml,scss,css}\"",
+    "format": "prettier --write --ignore-path .gitignore \"**/*.{js,jsx,json,yaml,scss,css}\""
   },
   "devDependencies": {
-    "prettier": "^2.6.2",
-    "prettier-plugin-svelte": "^2.6.0",
-    "rimraf": "^3.0.2"
-  },
-  "dependencies": {
     "@11ty/eleventy": "^1.0.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
+    "@babel/core": "^7.17.8",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/register": "^7.17.7",
     "@iktakahiro/markdown-it-katex": "^4.0.1",
     "eleventy-plugin-nesting-toc": "^1.3.0",
     "fast-xml-parser": "^4.0.7",
     "feed": "^4.2.2",
-    "got": "^12.0.3",
+    "got": "^12.0.2",
     "js-yaml": "^4.1.0",
     "markdown-it": "^12.3.2",
-    "markdown-it-anchor": "^8.5.0",
-    "sass": "^1.49.11",
-    "svelte": "^3.46.6"
-  }
+    "markdown-it-anchor": "^8.4.1",
+    "preact": "^10.6.6",
+    "preact-render-to-string": "^5.1.20",
+    "prettier": "^2.6.0",
+    "rimraf": "^3.0.2",
+    "sass": "^1.49.9"
+  },
+  "dependencies": {}
 }

src/404.jsx

@@ -0,0 +1,38 @@
+import { useEleventy } from "./_includes/EleventyContext";
+
+export const data = {
+  permalink: "404.html",
+};
+
+export default (props) => {
+  const { sassinline } = useEleventy();
+  return (
+    <html lang="ja">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>404 Not Found</title>
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="stylesheet" href="https://use.typekit.net/bdo3rru.css" />
+        <style
+          dangerouslySetInnerHTML={{
+            __html: sassinline("portfolio-critical.scss"),
+          }}
+        />
+      </head>
+
+      <body className="body-layout">
+        <main className="main-content">
+          <div className="nav-title">
+            <h2 className="subtitle">
+              <a href="/" className="_uncolor">
+                Honai Ueoka's Portfolio
+              </a>
+            </h2>
+            <h1 className="title">404 Not Found</h1>
+          </div>
+        </main>
+      </body>
+    </html>
+  );
+};

src/_includes/BlogHeader.jsx

@@ -0,0 +1,9 @@
+export const BlogHeader = () => (
+  <header class="site-header">
+    <div class="title">
+      <a href="/blog/" class="_reset-a">
+        Honai's Blog
+      </a>
+    </div>
+  </header>
+);