Merge pull request #45 from yunu7067/develop

v1.0.10

.eslintrc.js

@@ -0,0 +1,11 @@
+/** @type {import("@types/eslint").Linter.Config} */
+module.exports = {
+  ignorePatterns: ['node_modules', 'dist'],
+  root: true,
+  env: {
+    node: true,
+  },
+  plugins: [],
+  extends: [],
+  overrides: [],
+};

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+pnpm-lock.yaml

.prettierrc

@@ -5,7 +5,7 @@
   "htmlWhitespaceSensitivity": "css",
   "jsxBracketSameLine": false,
   "jsxSingleQuote": true,
-  "printWidth": 120,
+  "printWidth": 100,
   "proseWrap": "preserve",
   "quoteProps": "as-needed",
   "semi": true,
@@ -16,5 +16,19 @@
   "vueIndentScriptAndStyle": true,
   "rangeStart": 0,
   "requirePragma": false,
-  "insertPragma": false
+  "insertPragma": false,
+  "overrides": [
+    {
+      "files": [".*", "*.json", "*.md", "*.toml", "*.yml"],
+      "options": {
+        "useTabs": false
+      }
+    },
+    {
+      "files": ["**/*.astro"],
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
 }

README.md

@@ -22,15 +22,21 @@
 ### Plan
 - [ ] JSON Feed
 
-## Changelog
-
-#### 1.0.9
-- Support for rss.
-- Support for MDX using `@astrojs/image`
-- Support for KaTeX math notation in Markdown/MDX.
-- Add right side Table of Contents.
-- Change image optimization library from `astro-imagetools` to `@astrojs/image`.
-  - Astro 1.0 버전이 되면서 마크다운에는 JSX 컴포넌트를 사용할 수 없게 변경되었음. 따라서 MDX를 사용하거나 별도의 integrations를 만들어 처리해야 함. 그렇기 때문에 일단은 이미지 최적화 기능은 비활성화시킴.
+## URL structure
+
+| Path                  | Query | Name      |
+| :-------------------- | :---- | :-------- |
+| /                     |       |           |
+| /portfolio/           |       | Portfolio |
+| /search/              |       | Search    |
+| /page/                |       | Page      |
+| /page/{page}          |       | Page      |
+| /p/{slug}             |       | Blog      |
+| /series/              |       | Series    |
+| /series/{series}      |       | Series    |
+| /tag/{tagname}/       |       | Tags      |
+| /tag/{tagname}/{page} |       | Tags      |
+| /rss.xml              |       | RSS       |
 
 ## How to use
 
@@ -86,21 +92,42 @@ about 페이지는 `/src/pages/about.mdx`에 작성합니다.
 
 #### Frontmatter
 
-| Attribute   | Type     | required | Description       |
-| :---------- | -------- | -------- | :---------------- |
-| title       | string   | true     | post title        |
-| publishDate | string   | true     | post publish date |
-| description | string   | true     | post description  |
-| heroImage   | string   | false    | hero image        |
-| tags        | string[] | false    | tag name list     |
-| series      | string   | false    | series name       |
+| Attribute   | Type     | required | Default | Description       |
+| :---------- | -------- | -------- | :--: | :---------------- |
+| title       | string   | true     |  |  |post title        |
+| description | string   | true     |  | post description  |
+| publishDate | string   | true     |  | post publish date |
+| toc      | boolean   | false    | `true` | show table of contents       |
+| heroImage   | string   | false    |  | hero image        |
+| tags        | string[] | false    |  | tag name list     |
+| series      | string   | false    |  | series name       |
+| comments      | boolean   | false    | `true` | show comments system      |
 
 ### RSS
 
 default : true
 
 rss를 활성화시키려면 config.js에서 rss를 true로 변경해줍니다.
 
+## Changelog
+
+**1.0.9**
+- Support for rss.
+- Support for MDX using `@astrojs/image`
+- Support for KaTeX math notation in Markdown/MDX.
+- Add right side Table of Contents.
+- Change image optimization library from `astro-imagetools` to `@astrojs/image`.
+  - Astro 1.0 버전이 되면서 마크다운에는 JSX 컴포넌트를 사용할 수 없게 변경되었음. 따라서 MDX를 사용하거나 별도의 integrations를 만들어 처리해야 함. 그렇기 때문에 일단은 이미지 최적화 기능은 비활성화시킴.
+
+
+**1.0.10**
+- Redesign the site.
+- Now automatically change the `img` to `figure` tag.
+- add MarkdownImage components.
+- remove sidebar
+- Support for RSS
+- Change package manager from `yarn` to `pnpm`.
+
 ## Credits
 
 - [Remix Icon](https://github.com/Remix-Design/RemixIcon) - Apache License 2.0

astro.config.mjs

@@ -4,25 +4,27 @@ import tailwind from '@astrojs/tailwind';
 import image from '@astrojs/image';
 import sitemap from '@astrojs/sitemap';
 import mdx from '@astrojs/mdx';
-import remarkMath from 'remark-math';
-import rehypeKatex from 'rehype-katex';
-import {remarkReadingTime} from './plugins/remark-reading-time.mjs';
+import {remarkMath, remarkReadingTime, rehypeKatex, rehypeFigure} from './plugins';
 
 // https://astro.build/config
 export default defineConfig({
-  vite: {},
+  vite: {
+    ssr: {
+      external: ['http-cache-semantics', 'image-size', 'mime'],
+    },
+  },
   site: 'https://yunu7067.example.com', // sitemap
   markdown: {
     // Applied to .md and .mdx files
     extendDefaultPlugins: true,
     remarkPlugins: [remarkReadingTime, remarkMath],
-    rehypePlugins: [rehypeKatex],
+    rehypePlugins: [rehypeKatex, rehypeFigure],
     syntaxHighlight: 'shiki',
     shikiConfig: {
       // https://github.com/shikijs/shiki/blob/main/docs/themes.md#theming-with-css-variables
       theme: 'github-dark',
       wrap: true,
     },
   },
-  integrations: [mdx({}), solid(), tailwind(), image({logLevel: 'silent'}), sitemap()],
+  integrations: [mdx({}), solid(), tailwind(), image({logLevel: 'error'}), sitemap()],
 });

content/about.md

@@ -0,0 +1,15 @@
+---
+description: Lorem Ipsum!
+
+---
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis eleifend ipsum, at blandit arcu faucibus vel. Suspendisse finibus erat sit amet lobortis pharetra. Quisque tempor pretium elementum. Vestibulum interdum est tellus, eget pellentesque velit molestie in. In hac habitasse platea dictumst. Donec ut porta leo. Vivamus luctus tellus a velit semper facilisis. Mauris pharetra ligula nec leo elementum, id mollis justo tempor. Proin accumsan hendrerit nisi, id tincidunt enim. Nullam scelerisque dolor ut erat tristique, vitae dapibus dolor placerat.
+
+Nullam accumsan erat ut laoreet sodales. Nullam at lorem eget orci faucibus auctor. Vivamus vel aliquet ante. Ut ut arcu non neque iaculis bibendum. Vestibulum a sem massa. In non libero efficitur, pretium erat sed, placerat ante. Mauris nec molestie urna. In fermentum dui urna, in bibendum massa convallis eget. Fusce congue imperdiet ligula. Sed accumsan nibh sed venenatis mattis.
+
+Quisque a feugiat nunc. Nulla facilisi. Curabitur cursus ultrices lectus, et condimentum ante ultrices commodo. Suspendisse consectetur nisl eget arcu fermentum imperdiet. Vivamus viverra vitae mi eu sodales. Morbi accumsan ligula purus, eget consectetur odio posuere sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc felis ex, rhoncus eu purus vel, aliquet luctus est. Quisque maximus ligula id dui lobortis, id eleifend felis fermentum. Sed vulputate eu turpis id sollicitudin. Sed tempus ultricies leo, sed malesuada dolor mattis eget.
+
+Mauris eget odio eu ante egestas tincidunt. Praesent tristique tincidunt imperdiet. Pellentesque ut maximus nisi. Sed congue mi eu diam accumsan imperdiet. Fusce quis tincidunt odio, eu accumsan quam. Donec porttitor, ex rutrum gravida hendrerit, lectus diam auctor orci, sit amet vestibulum est elit consequat nibh. Nunc dictum leo quis leo vestibulum scelerisque. Cras ut lorem iaculis, molestie turpis a, convallis massa. Duis a dolor sit amet risus mattis sodales. Pellentesque id ultricies metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus id feugiat nisl. Fusce quam metus, sollicitudin ut neque a, hendrerit condimentum justo. Cras molestie venenatis ante quis mollis. Etiam pharetra, est sit amet bibendum rhoncus, arcu purus ullamcorper justo, eget lobortis justo urna maximus dolor.
+
+Pellentesque ultrices metus in velit bibendum pretium. Sed aliquet, odio ac cursus posuere, erat quam ultrices nisl, non ultricies tortor quam non ante. Vivamus sit amet nunc rhoncus, scelerisque velit sed, pretium diam. Donec vitae dui sit amet metus vestibulum placerat. Quisque commodo eros vitae nibh pellentesque vulputate. Fusce at venenatis est. Fusce in nisl non purus gravida suscipit vitae auctor nibh. Aenean egestas sodales lectus, at fringilla urna maximus nec. Vivamus quis urna a lectus sollicitudin euismod. Nam et dictum nunc, at porta tortor. Integer aliquam, nibh nec ornare aliquam, massa ex aliquam urna, eget pharetra erat libero ut turpis.
+
+Mail: [email protected]

package.json

@@ -17,19 +17,24 @@
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
+    "bnp": "astro build && astro preview",
     "astro": "astro"
   },
   "devDependencies": {
-    "@astrojs/image": "0.9.1",
-    "@astrojs/mdx": "^0.11.3",
+    "@astrojs/image": "0.9.2",
+    "@astrojs/mdx": "^0.11.4",
     "@astrojs/rss": "^1.0.2",
     "@astrojs/sitemap": "1.0.0",
-    "@astrojs/solid-js": "1.1.0",
+    "@astrojs/solid-js": "1.1.1",
     "@astrojs/tailwind": "2.0.2",
     "@tailwindcss/line-clamp": "0.4.2",
+    "@types/eslint": "^8.4.6",
     "@types/flexsearch": "^0.7.3",
-    "astro": "1.4.2",
+    "@types/node": "^18.8.1",
+    "@types/prettier": "^2.7.1",
+    "astro": "1.4.6",
     "flexsearch": "^0.7.21",
+    "hastscript": "^7.0.2",
     "http-cache-semantics": "^4.1.0",
     "image-size": "^1.0.2",
     "mdast-util-to-string": "^3.1.0",
@@ -40,6 +45,7 @@
     "remark-math": "^5.1.1",
     "sass": "1.55.0",
     "solid-js": "1.5.6",
-    "tailwindcss": "^3.1.8"
+    "tailwindcss": "^3.1.8",
+    "unist-util-visit": "^4.1.1"
   }
 }

plugins/index.js

@@ -0,0 +1,6 @@
+/* Remark Plugins */
+export {default as remarkMath} from 'remark-math';
+export * from './remark-reading-time.mjs';
+/* Rehype Plugins */
+export {default as rehypeKatex} from 'rehype-katex';
+export * from './rehype-figure.mjs';

plugins/rehype-figure.mjs

@@ -0,0 +1,27 @@
+import {h} from 'hastscript';
+import {visit} from 'unist-util-visit';
+
+/**
+ *
+ * @type {import('unified').Plugin<Array<void>, Root>}
+ */
+export function rehypeFigure() {
+  const buildFigureChildern = ({properties}) => [
+    h('img', {...properties}),
+    properties.alt && properties.alt.trim().length > 0 ? h('figcaption', properties.alt) : '',
+  ];
+
+  return (tree, file) => {
+    visit(tree, {tagName: 'img'}, (node, index, parent) => {
+      if (parent.tagName === 'figure') {
+        return;
+      }
+
+      const figureChildernEls = buildFigureChildern(node);
+
+      node.tagName = 'figure';
+      node.properties = {};
+      node.children = figureChildernEls;
+    });
+  };
+}