Merge pull request #30 from rubixvi/development

Development

app/docs/[[...slug]]/page.tsx

@@ -52,11 +52,14 @@ export async function generateMetadata({ params: { slug = [] } }: PageProps) {
 
   if (!res) return null;
 
-  const { frontmatter } = res;
+  const { frontmatter, lastUpdated } = res;
 
   return {
     title: `${frontmatter.title} - ${Settings.title}`,
     description: frontmatter.description,
+    ...(lastUpdated && {
+      lastModified: new Date(lastUpdated).toISOString(),
+    }),
   };
 }
 

app/globals.css

@@ -87,7 +87,7 @@
 .prose th,
 .prose td {
   @apply border border-border;
-  padding: 10px 15px;
+  padding: 8px 10px;
 }
 
 pre {

app/layout.tsx

@@ -60,7 +60,7 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <Navbar />
-          <main className="px-8 h-auto">
+          <main className="px-5 sm:px-8 h-auto">
             {children}
           </main>
           <Footer />

components/navbar.tsx

@@ -13,15 +13,15 @@ import { SheetClose } from "@/components/ui/sheet";
 
 export function Navbar() {
   return (
-    <nav className="sticky top-0 z-50 w-full h-16 border-b backdrop-filter backdrop-blur-xl bg-opacity-5 lg:px-4 px-2">
+    <nav className="sticky top-0 z-50 w-full h-16 border-b backdrop-filter backdrop-blur-xl bg-opacity-5 md:px-4 px-2">
       <div className="mx-auto flex h-full items-center justify-between p-1 sm:p-3 md:gap-2">
         <div className="flex items-center gap-5">
           <SheetLeft />
           <div className="flex items-center gap-6">
-            <div className="hidden sm:flex">
+            <div className="hidden md:flex">
               <Logo />
             </div>
-            <div className="hidden lg:flex items-center gap-5 text-sm font-medium text-muted-foreground">
+            <div className="hidden md:flex items-center gap-5 text-sm font-medium text-muted-foreground">
               <NavMenu />
             </div>
           </div>

dist/scripts/scripts/content.mjs

@@ -1,18 +1,10 @@
 import path from "path";
 import { promises as fs } from "fs";
-import { compile } from "@mdx-js/mdx";
 import grayMatter from "gray-matter";
 import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkStringify from "remark-stringify";
 import remarkMdx from "remark-mdx";
-import remarkGfm from "remark-gfm";
-import remarkRehype from "remark-rehype";
-import rehypePrism from "rehype-prism-plus";
-import rehypeSlug from "rehype-slug";
-import rehypeAutolinkHeadings from "rehype-autolink-headings";
-import rehypeCodeTitles from "rehype-code-titles";
-import rehypeKatex from "rehype-katex";
 import { visit } from "unist-util-visit";
 import { Documents } from '../settings/documents.mjs';
 const docsDir = path.join(process.cwd(), "contents/docs");
@@ -83,17 +75,6 @@ async function processMdxFile(filePath) {
         .use(removeCustomComponents)
         .use(remarkStringify)
         .process(content);
-    const compiledMdx = await compile(content, {
-        remarkPlugins: [remarkGfm, remarkRehype],
-        rehypePlugins: [
-            rehypeSlug,
-            rehypeAutolinkHeadings,
-            rehypeCodeTitles,
-            rehypeKatex,
-            [rehypePrism, { ignoreMissing: true }],
-        ],
-        format: "mdx",
-    });
     const slug = createSlug(filePath);
     const matchedDoc = findDocumentBySlug(slug);
     return {

lib/markdown.ts

@@ -12,6 +12,8 @@ import { visit } from "unist-util-visit";
 
 import { PageRoutes } from "./pageroutes";
 import { components } from './components'; 
+import { Settings } from "../settings/config";
+import { GitHubLink } from "../settings/navigation";
 
 async function parseMdx<Frontmatter>(rawMdx: string) {
   return await compileMDX<Frontmatter>({
@@ -40,55 +42,96 @@ type BaseMdxFrontmatter = {
   description: string;
 };
 
+const computeDocumentPath = (slug: string) => {
+  return Settings.gitload
+    ? `${GitHubLink.href}/raw/main/contents/docs/${slug}/index.mdx`
+    : path.join(process.cwd(), "/contents/docs/", `${slug}/index.mdx`);
+};
+
 const getDocumentPathMemoized = (() => {
   const cache = new Map<string, string>();
   return (slug: string) => {
-    const cachedPath = cache.get(slug);
-    if (cachedPath) return cachedPath;
-
-    const contentPath = path.join(process.cwd(), "/contents/docs/", `${slug}/index.mdx`);
-    cache.set(slug, contentPath);
-    return contentPath;
+    if (!cache.has(slug)) {
+      cache.set(slug, computeDocumentPath(slug));
+    }
+    return cache.get(slug)!;
   };
 })();
 
 export async function getDocument(slug: string) {
   try {
     const contentPath = getDocumentPathMemoized(slug);
-    const rawMdx = await fs.readFile(contentPath, "utf-8");
-    const parsedMdx = await parseMdx<BaseMdxFrontmatter>(rawMdx);
+    let rawMdx = "";
+    let lastUpdated: string | null = null;
 
+    if (Settings.gitload) {
+      const response = await fetch(contentPath);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch content from GitHub: ${response.statusText}`);
+      }
+      rawMdx = await response.text();
+      lastUpdated = response.headers.get('Last-Modified') ?? null;
+    } else {
+      rawMdx = await fs.readFile(contentPath, "utf-8");
+      const stats = await fs.stat(contentPath);
+      lastUpdated = stats.mtime.toISOString();
+    }
+
+    const parsedMdx = await parseMdx<BaseMdxFrontmatter>(rawMdx);
     const tocs = await getTable(slug);
 
     return {
       frontmatter: parsedMdx.frontmatter,
       content: parsedMdx.content,
       tocs,
+      lastUpdated,
     };
   } catch (err) {
-    console.log(err);
+    console.error(err);
     return null;
   }
 }
 
 const headingsRegex = /^(#{2,4})\s(.+)$/gm;
 
-export async function getTable(slug: string) {
-  const contentPath = await getDocumentPath(slug);
-  const extractedHeadings = [];
-
-  const stream = createReadStream(contentPath, { encoding: 'utf-8' });
-  for await (const chunk of stream) {
-    const matches = [...chunk.matchAll(headingsRegex)];
-    extractedHeadings.push(...matches.map((match) => {
-      const level = match[1].length;
-      const text = match[2].trim();
-      return {
-        level: level,
-        text: text,
-        href: `#${innerslug(text)}`,
-      };
-    }));
+export async function getTable(slug: string): Promise<Array<{ level: number; text: string; href: string }>> {
+  const extractedHeadings: Array<{ level: number; text: string; href: string }> = [];
+  let rawMdx = "";
+
+  if (Settings.gitload) {
+    const contentPath = `${GitHubLink.href}/raw/main/contents/docs/${slug}/index.mdx`;
+    try {
+      const response = await fetch(contentPath);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch content from GitHub: ${response.statusText}`);
+      }
+      rawMdx = await response.text();
+    } catch (error) {
+      console.error("Error fetching content from GitHub:", error);
+      return [];
+    }
+  } else {
+    const contentPath = path.join(process.cwd(), "/contents/docs/", `${slug}/index.mdx`);
+    try {
+      const stream = createReadStream(contentPath, { encoding: 'utf-8' });
+      for await (const chunk of stream) {
+        rawMdx += chunk;
+      }
+    } catch (error) {
+      console.error("Error reading local file:", error);
+      return [];
+    }
+  }
+
+  let match;
+  while ((match = headingsRegex.exec(rawMdx)) !== null) {
+    const level = match[1].length;
+    const text = match[2].trim();
+    extractedHeadings.push({
+      level: level,
+      text: text,
+      href: `#${innerslug(text)}`,
+    });
   }
 
   return extractedHeadings;
@@ -98,10 +141,6 @@ function innerslug(text: string) {
   return text.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
 }
 
-function getDocumentPath(slug: string) {
-  return path.join(process.cwd(), "/contents/docs/", `${slug}/index.mdx`);
-}
-
 const pathIndexMap = new Map(PageRoutes.map((route, index) => [route.href, index]));
 
 export function getPreviousNext(path: string) {

scripts/content.ts

@@ -96,18 +96,6 @@ async function processMdxFile(filePath: string) {
     .use(remarkStringify)
     .process(content);
 
-  const compiledMdx = await compile(content, {
-    remarkPlugins: [remarkGfm, remarkRehype],
-    rehypePlugins: [
-      rehypeSlug,
-      rehypeAutolinkHeadings,
-      rehypeCodeTitles,
-      rehypeKatex,
-      [rehypePrism, { ignoreMissing: true }],
-    ],
-    format: "mdx",
-  });
-
   const slug = createSlug(filePath);
   const matchedDoc = findDocumentBySlug(slug);
 

settings/config.ts

@@ -21,6 +21,8 @@ const feedbackedit = true;
 const tableofcontent = true;
 const totopscroll = true;
 
+const loadfromgithub = false;
+
 export const Company = {
   name: companyname,
   link: companylink,
@@ -38,6 +40,7 @@ export const Settings = {
   toc: tableofcontent,
   feedback: feedbackedit,
   totop: totopscroll,
+  gitload: loadfromgithub,
   openGraph: {
     type: "website",
     title: sitename,

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "lib": ["dom", "dom.iterable", "esnext"],
+    "target": "es2015",
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,