add blog build

18.1/k8s1_概念和运行机制简介.md

@@ -1,6 +1,3 @@
----
-tags: k8s,docker,kubernetes
----
 # 初识kubernetes
 kubernetes是管理docker容器的工具，他可以解决这样的一些问题，动态的扩展docker，同一服务类型多个docker的负载均衡，分布式的容器管理，实时保持设定好的服务数目。
 ## 1 分布式容器调度工具

24.06/github_markdown_test.md

@@ -84,9 +84,9 @@ var test = function this_is(){
 }
 ```
 
-```bogus_language
-var test = function this_is(){
-  console.log("language declared as bogus_language");
+```diff
++ var test = function this_is(){
+-   console.log("language declared as bogus_language");
 }
 ```
 

app/blog/[month]/[slug]/page.js

@@ -1,7 +1,5 @@
 import fs from 'fs';
 import path from 'path';
-import matter from 'gray-matter';
-import { bundleMDX } from 'mdx-bundler'
 import remarkGfm from 'remark-gfm';
 import rehypeSlug from 'rehype-slug';
 import rehypePrismPlus from 'rehype-prism-plus';
@@ -11,22 +9,31 @@ import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeCodeCopyButton from '@/rehypePlugins/rehype-code-copy-button.mjs'
 import rehypeImageSrcModifier from '@/rehypePlugins/rehype-image-src-modifier.mjs'
 import rehypeTocExt from '@/rehypePlugins/rehype-toc-ext.mjs'
+import { bundleMDX } from 'mdx-bundler'
 import { getMDXComponent } from 'mdx-bundler/client'
-import '@/app/globals.css'
-import '@/app/prism-dracula.css'
+import readingTime from 'reading-time';
 import querystring from 'querystring';
-import Discussion from '@/app/components/discussion';
-const readingTime = require('reading-time');
+import Discussion from '@/app/components/Discussion';
 import { Button, Card, Tooltip, DirectoryTree } from '@/app/components/Antd';
 import { Tabs, Item } from '@/app/components/Tabs';
 
+
 export default async function Post({ params }) {
   let { month, slug } = params;
   slug = querystring.unescape(slug);
 
+  if (slug.endsWith(".md") || slug.endsWith(".mdx") || slug.endsWith(".html")) {
+    slug = slug.replace(/\.(md|mdx|html)$/, '');
+  }
+
   var mdxPath = path.join(process.cwd(), month, `${slug}.mdx`);
   var mdPath = path.join(process.cwd(), month, `${slug}.md`);
-  const mdxSource = fs.existsSync(mdxPath) ? fs.readFileSync(mdxPath, 'utf8') : fs.readFileSync(mdPath, 'utf8');
+  let mdxSource;
+  try { 
+    mdxSource = fs.existsSync(mdxPath) ? fs.readFileSync(mdxPath, 'utf8') : fs.readFileSync(mdPath, 'utf8'); 
+  } catch (e) {
+    return <><div className='flex items-center h-screen w-fit text-4xl mx-auto'style={{marginTop: '-5rem !important'}}>404 PAGE NOT FOUND</div></>;
+  }
   const { text: readingTimeText } = readingTime(mdxSource);
   const result = await bundleMDX({
     source: mdxSource + '\n\n# ' + month,
@@ -58,7 +65,7 @@ export default async function Post({ params }) {
         <h1>{frontmatter.title || slug}</h1>
         {frontmatter.description && <p>{frontmatter.description}</p>}
         <div className='flex gap-4'>
-          <span>{readingTimeText  + (frontmatter.created ? (" created at" + frontmatter.created):  "")}</span>
+          <span>{readingTimeText  + (frontmatter.created ? (" created at " + frontmatter.created):  "")}</span>
           <div>
             {frontmatter.tags && frontmatter.tags.split(',').filter(item => item.trim().length)
               .map((tag, i) => <span key={i} className=' bg-green-600 text-white px-2 py-1 rounded-md mr-1 text-sm'>{tag.trim()}</span>)}

app/components/Tabs.jsx

@@ -23,14 +23,14 @@ function Tabs({ children, ...props }) {
             <div className={'tabs-button-container ' + props.className} >
                 {children.map((item, index) => (
                     <button
-                        className={(index == currentIndex ? 'tabs-button-selected ' : "tabs-button ") + props.tabBtnClassName}
+                        className={(index == currentIndex ? 'tabs-button-selected ' : "tabs-button ") + props.tabBtnClassName??""}
                         key={index} onClick={() => changeItem(index)}>
                         {item.props.title}
                     </button>
                 ))}
             </div>
             {children.map((item, index) => (
-                <div className={(index == currentIndex ? 'tabs-panel-selected ' : "tabs-panel ") + props.tabPanelClassName} key={index}>
+                <div className={(index == currentIndex ? 'tabs-panel-selected ' : "tabs-panel ") + props.tabPanelClassName??""} key={index}>
                     {item}
                 </div>
             ))}

app/layout.js

@@ -1,5 +1,5 @@
 import { Inter } from "next/font/google";
-import NavBar from "@/app/components/navbar-menu";
+import NavBar from "@/app/components/NavbarMenu";
 import DocSearch from "@/app/components/DocSearch"
 import "./globals.css";
 import "./prism-dracula.css";

package.json

@@ -27,6 +27,7 @@
     "framer-motion": "^11.2.10",
     "mdx-bundler": "^10.0.2",
     "next": "14.2.3",
+    "node-fetch": "^3.3.2",
     "react": "^18.1.0",
     "react-aria": "^3.33.1",
     "react-dom": "^18.1.0",
@@ -35,6 +36,7 @@
     "rehype-autolink-headings": "^7.1.0",
     "rehype-prism-plus": "^2.0.0",
     "rehype-slug": "^6.0.0",
+    "remark-embed-images": "^4.0.0",
     "remark-flexible-code-titles": "^1.2.0",
     "remark-gfm": "^4.0.0",
     "remark-reading-time": "^2.0.1",

rehypePlugins/rehype-image-src-modifier.mjs

@@ -1,4 +1,7 @@
 import { visit } from 'unist-util-visit';
+import fetch from 'node-fetch';
+import fs from 'fs'
+import path from 'path';
 
 function rehypeImageSrcModifier() {
     return (tree) => {
@@ -29,9 +32,26 @@ function rehypeImageSrcModifier() {
                 if (src.startsWith('./img')) {
                     node.properties.src = src.replace('./img', '/oriimg/' + month);
                 }
-                if (src.startsWith('img')) {
+                else if (src.startsWith('img')) {
                     node.properties.src = src.replace('img', '/oriimg/' + month);
                 }
+                else if (src.startsWith('https://i.imgur.com/')) {
+                    let picName = src.replace('https://i.imgur.com/', '');
+                    fetch(src).then(response => {
+                        if (!response.ok) {
+                            console.error(`Failed to fetch ${url}: ${response.statusText}`);
+                        }
+                        return response.buffer();
+                    })
+                    .then(buffer => {
+                        if (!fs.existsSync(path.join(process.cwd(), "public", "imgur"))) {
+                            fs.mkdirSync(path.join(process.cwd(), "public", "imgur"));
+                        }
+                        // 将图片数据写入本地文件
+                        fs.writeFileSync(path.join(process.cwd(), "public", "imgur", picName), buffer);
+                    })
+                    node.properties.src = "/imgur/" + picName;
+                }
             }
         });
     };