Merge pull request #46 from yunu7067/develop

v1.0.11

astro.config.mjs

@@ -4,21 +4,24 @@ import tailwind from '@astrojs/tailwind';
 import image from '@astrojs/image';
 import sitemap from '@astrojs/sitemap';
 import mdx from '@astrojs/mdx';
-import {remarkMath, remarkReadingTime, rehypeKatex, rehypeFigure} from './plugins';
+import {
+  remarkMath,
+  remarkReadingTime,
+  remarkCodeTitle,
+  rehypeKatex,
+  rehypeFigure,
+  rehypeAutolinkHeading,
+} from './plugins';
 
 // https://astro.build/config
 export default defineConfig({
-  vite: {
-    ssr: {
-      external: ['http-cache-semantics', 'image-size', 'mime'],
-    },
-  },
+  vite: {},
   site: 'https://yunu7067.example.com', // sitemap
   markdown: {
     // Applied to .md and .mdx files
     extendDefaultPlugins: true,
-    remarkPlugins: [remarkReadingTime, remarkMath],
-    rehypePlugins: [rehypeKatex, rehypeFigure],
+    remarkPlugins: [remarkReadingTime, remarkMath, remarkCodeTitle],
+    rehypePlugins: [rehypeAutolinkHeading, rehypeKatex, rehypeFigure],
     syntaxHighlight: 'shiki',
     shikiConfig: {
       // https://github.com/shikijs/shiki/blob/main/docs/themes.md#theming-with-css-variables

package.json

@@ -21,26 +21,24 @@
     "astro": "astro"
   },
   "devDependencies": {
-    "@astrojs/image": "0.9.2",
+    "@astrojs/image": "0.10.0",
     "@astrojs/mdx": "^0.11.4",
     "@astrojs/rss": "^1.0.2",
     "@astrojs/sitemap": "1.0.0",
-    "@astrojs/solid-js": "1.1.1",
-    "@astrojs/tailwind": "2.0.2",
+    "@astrojs/solid-js": "1.2.0",
+    "@astrojs/tailwind": "2.1.0",
     "@tailwindcss/line-clamp": "0.4.2",
     "@types/eslint": "^8.4.6",
     "@types/flexsearch": "^0.7.3",
     "@types/node": "^18.8.1",
     "@types/prettier": "^2.7.1",
-    "astro": "1.4.6",
+    "astro": "1.5.0",
     "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",
-    "mime": "^3.0.0",
     "node-html-parser": "6.1.1",
     "reading-time": "1.5.0",
+    "rehype-autolink-headings": "^6.1.1",
     "rehype-katex": "^6.0.2",
     "remark-math": "^5.1.1",
     "sass": "1.55.0",

plugins/index.js

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

plugins/rehype-autolink-heading.mjs

@@ -0,0 +1,15 @@
+import {s} from 'hastscript';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+
+export const rehypeAutolinkHeading = [
+  rehypeAutolinkHeadings,
+  {
+    behavior: 'prepend',
+    content: s(
+      `svg`,
+      {width: '0.875em', height: '0.875em', viewBox: `0 0 24 24`},
+      s(`path`, {fill: `none`, d: 'M0 0h24v24H0z'}),
+      s(`path`, {fill: `currentColor`, d: 'M17 11V4h2v17h-2v-8H7v8H5V4h2v7z'}),
+    ),
+  },
+];

plugins/remark-code-title.mjs

@@ -0,0 +1,32 @@
+import {visit} from 'unist-util-visit';
+
+/**
+ * @author https://www.npmjs.com/package/remark-code-titles
+ */
+export function remarkCodeTitle() {
+  return tree =>
+    visit(tree, 'code', (node, index) => {
+      const nodeLang = node.lang || '';
+      let language = '',
+        title = '';
+
+      if (nodeLang.includes(':')) {
+        language = nodeLang.slice(0, nodeLang.search(':'));
+        title = nodeLang.slice(nodeLang.search(':') + 1, nodeLang.length);
+      }
+
+      if (!title) {
+        return;
+      }
+
+      const className = 'remark-code-title';
+
+      const titleNode = {
+        type: 'html',
+        value: `<div class="${className}">${title}</div>`.trim(),
+      };
+
+      tree.children.splice(index, 0, titleNode);
+      node.lang = language;
+    });
+}

src/components/Search.tsx

@@ -83,7 +83,6 @@ export default function Search({keys}: {keys: string[]}) {
         >
           <SearchLine width='20' height='20' />
         </label>
-        <p class='mb-5'>(검색 필드: title, description, tags)</p>
       </div>
 
       <output>

src/pages/p/markdown-syntax/index.mdx

@@ -70,7 +70,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 
 #### Code block with backticks
 
-```html
+```html:Example.html
 <!DOCTYPE html>
 <html lang="en">
   <head>

src/pages/page/[...page].astro

@@ -4,6 +4,7 @@ import BlogPostPreview from '$coms/PostPreview.astro';
 import Pagination from '$coms/Pagination.astro';
 import config from '$config';
 import MainLayout from '$lays/MainLayout.astro';
+import BlogPreview from '$coms/BlogPreview.astro';
 
 export async function getStaticPaths({paginate}: GetStaticPathsOptions) {
   const allPosts = await Astro.glob('../p/**/*.{md,mdx}');
@@ -44,18 +45,20 @@ const props = {
   wide={props.wide}
 >
   <main class='w-full'>
-    <div class='max-w-3xl w-full mx-auto'>
-      <main class=''>
-        <h2 class='mt-8 mb-1 text-5xl tracking-tight text-center'>All Posts</h2>
-        <small class='block text-base text-center mb-6'
-          >{page.start + 1}–{page.end + 1} of {page.total}
-        </small>
-        {page.data.map(post => <BlogPostPreview post={post} />)}
-      </main>
+    {/* Hero */}
+    <div class='pt-[88px] flex flex-col'>
+      <div class='max-w-3xl w-full mx-auto px-5 pt-8 pb-24'>
+        <span class='text-lg text-gray-600'></span>
+        <h1 class='text-6xl font-bold leading-relaxed'>All Posts</h1>
+        <h2 class='text-2xl leading-normal text-gray-600'>
+          {page.start + 1}–{page.end + 1} of {page.total}
+        </h2>
+      </div>
+    </div>
+    <div class='max-w-3xl w-full mx-auto px-5 py-4'>
+      <BlogPreview posts={page.data} />
 
-      <footer>
-        <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
-      </footer>
+      <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
     </div>
   </main>
 </MainLayout>