redefined TABLE styling, implement adaptive_fs_XX and loadPost for MD format

Author: tkokhing

src/app/_components/main_frame/subpage-header.tsx

@@ -45,7 +45,7 @@ const SubpageHeader = () => {
   return (
     <div className="sticky top-0 z-30 bg-slate-50 dark:bg-slate-900">
       <Container>
-        <h2 className="uppercase text-1xl md:text-2xl font-light tracking-tight md:tracking-tighter leading-tight py-4 flex items-center">
+        <h2 className="uppercase text-adaptive_fs_sm md:text-adaptive_fs_xs font-light tracking-tight md:tracking-tighter leading-tight py-1 flex items-center">
           <div className="truncate">{generateBreadcrumbs()}</div>
         </h2>
       <div className="h-1 bg-sky-500 transition-all" style={{ width: `${scroll}%` }} />

src/app/_components/preference/toggle-frame-button.tsx

@@ -11,15 +11,15 @@ export function ToggleAllButton() {
   if (!ctx) return null;
 
   return (
-    <div className="sticky top-[4.5rem] z-20">
-      <div className="flex gap-2 px-4 py-2 justify-end">
+    <div className="sticky top-[1.8rem] md:top-[1.5rem] z-20">
+      <div className="text-adaptive_fs_xs flex gap-1 px-4 py-2 justify-end">
         <button
           disabled={state === "open"}
           onClick={() => {
             ctx.openAll();
             setState("open");
           }}
-          className={`px-3 py-1 rounded text-xs transition ${
+          className={`px-3 py-1 rounded transition ${
             state === "open"
               ? "bg-gray-700 dark:bg-gray-600 text-tkokhing-blue cursor-default"
               : "bg-gray-200 hover:bg-gray-500 dark:text-tkokhing-blue hover:text-tkokhing-dark hover:dark:text-tkokhing-dark"
@@ -34,7 +34,7 @@ export function ToggleAllButton() {
             ctx.closeAll();
             setState("closed");
           }}
-          className={`px-3 py-1 rounded text-xs transition ${
+          className={`px-3 py-1 rounded transition ${
             state === "closed"
               ? "bg-gray-700 dark:bg-gray-600 text-tkokhing-blue cursor-default"
               : "bg-gray-200 hover:bg-gray-500 dark:text-tkokhing-blue hover:text-tkokhing-dark hover:dark:text-tkokhing-dark"

src/app/heptagoning/page.tsx

@@ -1,9 +1,12 @@
 import Container from "@/app/_components/preference/container";
-import { getAllPosts } from "@/lib/share/api";
+import { getAllPosts, loadPost } from "@/lib/share/api";
 import { HeroPost } from "@/app/_components/post_gen/hero-post";
 import { MoreStories } from "@/app/_components/post_gen/more-stories";
+import { PostBody } from "../_components/post_gen/post-body";
 
 export default function Index() {
+
+  const readmeHeptagoning = loadPost("README.md","_heptagoning")
   const allPosts = getAllPosts("_heptagoning/_kill-chain");
 
   const filteredPosts = allPosts.filter(
@@ -14,6 +17,8 @@ export default function Index() {
   return (
     <main>
       <Container>
+      <PostBody content={readmeHeptagoning} />
+      <br />
       <HeroPost
           title={heroPost.title}
           coverImage={heroPost.coverImage}

src/lib/share/api.ts

@@ -8,41 +8,50 @@ function useBasePath(): string {
   return process.env.GITHUB_ACTIONS ? REPO_NAME : '';
 }
 
-function postsDirectory(mdx_folder: string): string{
-  fs.readdir((join(process.cwd(), mdx_folder)), (err) => {
+function postsDirectory(post_folder: string): string{
+  fs.readdir((join(process.cwd(), post_folder)), (err) => {
     if (err) {
       console.error('Error reading directory:', err);
     }
   })
-  return join(process.cwd(), mdx_folder);
+  return join(process.cwd(), post_folder);
 }
 
-function getPostSlugs(mdx_folder: string) {
+// dual usage, call it directly to load MD format
+export function loadPost(slug: string, post_folder: string) {
+  const ext = slug.endsWith(".mdx")
+  ? ".mdx"
+  : slug.endsWith(".md")
+  ? ".md"
+  : ".mdx"; // default fallback
+
+  const realSlug = slug.replace(/\.mdx?$/, "").replace(/\.md$/, "");
+  const fullPath = join(postsDirectory(post_folder), `${realSlug}${ext}`);
+  return fs.readFileSync(fullPath, "utf-8");
+}
+
+function getPostSlugs(post_folder: string) {
   return fs
-    .readdirSync(postsDirectory(mdx_folder), { withFileTypes: true })
+    .readdirSync(postsDirectory(post_folder), { withFileTypes: true })
     .filter(entry => entry.isFile() && entry.name.endsWith(".mdx"))
     .map(entry => entry.name);
 }
 
-export function getPostBySlug(slug: string, mdx_folder: string) {
-  const realSlug = slug.replace(/\.mdx?$/, "");
-  const fullPath = join(postsDirectory(mdx_folder), `${realSlug}.mdx`);
-
-  const fileContents = fs.readFileSync(fullPath, "utf8");
+export function getPostBySlug(slug: string, post_folder: string) {
+  const fileContents = loadPost(slug,post_folder);
   const { data, content } = matter(fileContents);
-
   const BASE_PATH = useBasePath();
 
   // Update URLs based on the environment
   data.coverImage = data.coverImage.startsWith(BASE_PATH) ? data.coverImage : `${BASE_PATH}${data.coverImage}`;
   data.author.picture = data.author.picture.startsWith(BASE_PATH) ? data.author.picture : `${BASE_PATH}${data.author.picture}`;
   data.ogImage.url = data.ogImage.url.startsWith(BASE_PATH) ? data.ogImage.url : `${BASE_PATH}${data.ogImage.url}`;
 
-  return { ...data, slug: realSlug, content } as Post;
+  return { ...data, slug: slug.replace(/\.mdx?$/, ""), content } as Post;
 }
 
-export function getAllPosts(mdx_folder: string): Post[] {
-  const slugs = getPostSlugs(mdx_folder);
-  const posts = slugs.map(slug => getPostBySlug(slug, mdx_folder));
+export function getAllPosts(post_folder: string): Post[] {
+  const slugs = getPostSlugs(post_folder);
+  const posts = slugs.map(slug => getPostBySlug(slug, post_folder));
   return posts.sort((post1, post2) => (post1.date > post2.date ? -1 : 1));
 }

src/styles/blog.module.css

@@ -23,6 +23,10 @@
   color: #1e3a8a;
 }
 
+.prose {
+  max-width: 100%;
+}
+
 /* for < pre > < code > block codes render IP and timming suffix */
 .prose pre{
   @apply bg-[#24292E] rounded-lg p-4;
@@ -42,4 +46,36 @@
   @apply text-tkokhing-dark;
   padding: 0.15em 0.4em;
   border-radius: 0.375rem;
+}
+
+/* Prevent tables from breaking container */
+.prose table {
+  display: block;
+  margin-left: auto;
+  table-layout: auto;
+  margin-right: auto;
+  max-width: 100%;
+  overflow-x: auto;
+  white-space: nowrap;
+  background: rgba(0,0,0,0.13);
+  border-radius: 0.375rem;
+  padding: 0.5rem;
+}
+
+.dark .prose table {
+  background: rgba(255,255,255,0.24);
+}
+
+/* Chrome / Edge / Safari */
+.prose table::-webkit-scrollbar {
+  height: 6px;
+}
+
+.prose table::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.prose table::-webkit-scrollbar-thumb {
+  background: rgba(120,120,120,0.5);
+  border-radius: 9999px;
 }