Merge pull request #8 from tkokhing/flexidynamic

major re-org, flexi dynamic change in MDX

Author: tkokhing

src/app/_components/main_frame/dismissible-box.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function DismissibleBox({ children }: { children: React.ReactNode }) {
+  const [visible, setVisible] = useState(true);
+
+  if (!visible) return null;
+
+  return (
+    <div className="relative border border-gray-300 rounded-md p-4 bg-gray-200 hover:bg-slate-400 text-slate-800">
+      <button
+        onClick={() => setVisible(false)}
+        className="absolute top-2 right-2 text-gray-500 hover:text-red-600 text-sm font-bold"
+        aria-label="Close"
+      >
+        ✕
+      </button>
+      {children}
+    </div>
+  );
+}

src/app/_components/post_gen/MDXRender.tsx

@@ -45,7 +45,7 @@ export function MoreStoriesConcise({ posts }: Props) {
   return (
     <section>
       <div className="flex justify-between items-center mb-4">
-        <h2 className="text-4xl md:text-6xl font-thin tracking-tighter leading-tight">
+        <h2 className="italic text-sm md:text-base font-thin tracking-tighter leading-tight">
           Browse by {sortBy === "title" ? "Title (A–Z)" : "Date (Newest)"}
         </h2>
         <div className="flex gap-2">
@@ -82,6 +82,7 @@ export function MoreStoriesConcise({ posts }: Props) {
             date={post.date}
             slug={post.slug}
             subPath={post.subPath}
+            excerpt={post.excerpt}
             postStatus={post.postStatus}
           />
         ))}

src/app/_components/post_gen/more-stories-concise.tsx

@@ -0,0 +1,25 @@
+// dual use for page.tsx and mdx
+
+import Container from "@/app/_components/preference/container";
+import { getAllPosts } from "@/lib/api";
+import { MoreStoriesConcise } from "@/app/_components/post_gen/more-stories-concise"
+import { Suspense } from "react";
+
+type Props = {
+  dir: string;
+};
+
+export function PostListConcise ({ dir }: Props) {
+  const allPosts = getAllPosts(dir);
+
+  return (
+    <main>
+      <Container>
+        <Suspense>
+        {allPosts.length > 0 && <MoreStoriesConcise posts={allPosts} />}
+        </Suspense>
+      </Container>
+    </main>
+  );
+
+}

src/app/_components/post_gen/post-list-concise.tsx

@@ -6,6 +6,7 @@ type Props = {
   date: string;
   slug: string;
   subPath: string;
+  excerpt: string;
   postStatus: string;
 };
 
@@ -14,14 +15,18 @@ export function TitlePreview({
   date,
   slug,
   subPath,
+  excerpt,
   postStatus,
   }: Props) 
   {
   return (
     <div>
-      <h3 className="shadow-sm w-full dark:shadow-sky-900/50 hover:shadow-2xl hover:dark:shadow-zinc-50/100 hover:dark:shadow-lg py-3 px-4 text-2xl mb-3 leading-snug">
+      <h3 className="shadow-sm w-full dark:shadow-sky-900/50 hover:shadow-2xl hover:dark:shadow-zinc-50/100 hover:dark:shadow-lg py-3 px-4 text-xl mb-3 leading-snug">
         <Link href={`/${subPath}/${slug}`} className="hover:underline">
           {title}
+          <p className="text-pretty text-xs mb-4 italic">
+            {excerpt}
+          </p>
           <p className="text-right text-xs mb-4 italic">
             {postStatus} <DateFormatter dateString={date} />
           </p>

src/app/_components/post_gen/title-preview.tsx

@@ -1,24 +1,29 @@
 // for content injections and 
 // export to different page.tsx for dynamic language switching
 'use client';
-
 import enFrontierData from '@/lib/_data_exporter/frontier_data_en.mdx';
 import zhFrontierData from '@/lib/_data_exporter/frontier_data_zh.mdx';
 import enCyberDomainData from '@/lib/_data_exporter/strategic_cyber_domains_en.mdx';
 import zhCyberDomainData from '@/lib/_data_exporter/strategic_cyber_domains_zh.mdx';
+import enCyberThreatsData from '@/lib/_data_exporter/cyber_threats_25_en.mdx';
+import zhCyberThreatsData from '@/lib/_data_exporter/cyber_threats_25_zh.mdx';
 import enBlueprintBattlefieldDataData from '@/lib/_data_exporter/blueprint_to_battlefield_en.mdx';
 import zhBlueprintBattlefieldDataData from '@/lib/_data_exporter/blueprint_to_battlefield_zh.mdx';
 
 import DisplayLanguageContent from '@/app/_components/language_handler/language-display';
 
 export const FrontierData = () => {
   return <DisplayLanguageContent LanguageChoice={{ en: enFrontierData, zh: zhFrontierData }}/>
-}
+};
 
 export const CyberDomainData = () => {
   return <DisplayLanguageContent LanguageChoice={{ en: enCyberDomainData, zh: zhCyberDomainData }}/>
-}
+};
+
+export const CyberThreatsData = () => {
+  return <DisplayLanguageContent LanguageChoice={{ en: enCyberThreatsData, zh: zhCyberThreatsData }}/>
+};
 
 export const BlueprintBattlefieldData = () => {
   return <DisplayLanguageContent LanguageChoice={{ en: enBlueprintBattlefieldDataData, zh: zhBlueprintBattlefieldDataData }}/>
-}
+};

src/app/_components/preference/data-exporter.tsx

@@ -0,0 +1,26 @@
+// app/_components/toggle-frame.tsx
+
+"use client";
+
+import { useState, ReactNode } from "react";
+
+type Props = {
+  label?: string;
+  children: ReactNode;
+};
+
+export function ToggleFrame({ label, children }: Props) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="my-4">
+      <button
+        onClick={() => setOpen(!open)}
+        className="underline text-blue-800 dark:text-blue-300  hover:text-tkokhing-blue hover:dark:text-tkokhing-dark transition"
+      >
+        {open ? `Hide ${label}` : `Show ${label}`}
+      </button>
+      {open && <div className="mt-2">{children}</div>}
+    </div>
+  );
+}

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

@@ -1,13 +1,15 @@
-// pull from private repo: [tkokhing/blog_post/_posts] MDX_FOLDER
+// [tkokhing/blog_post/_posts] MDX_FOLDER
 import { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { getPostBySlug } from "@/lib/api";
 import { generatePageMetadata } from "@/lib/generatePageMetadata";
 import { generatePageStaticParams } from "@/lib/generatePageStaticParams";
 import Container from "@/app/_components/preference/container";
-import { FrontierData } from "@/app/_components/preference/data-exporter";
 import { PostHeader } from "@/app/_components/post_gen/post-header";
 import { PostBody } from "@/app/_components/post_gen/post-body";
+import { ToggleFrame } from "@/app/_components/preference/toggle-frame";
+import { FrontierData } from "@/app/_components/preference/data-exporter";
+import { PostListConcise } from "@/app/_components/post_gen/post-list-concise";
 
 const MDX_FOLDER = "_posts"; 
 
@@ -22,6 +24,8 @@ export default async function Post(props: Params) {
   const post = getPostBySlug(params.slug, MDX_FOLDER);
   const ImportComponents = {
     FrontierData,
+    ToggleFrame,
+    PostListConcise,
   };
   if (!post) return notFound();
 

src/app/blog/posts/[slug]/page.tsx

@@ -1,19 +1,6 @@
 // blog/post/ list page
-import Container from "@/app/_components/preference/container";
-import { getAllPosts } from "@/lib/api";
-import { MoreStoriesConcise } from "@/app/_components/post_gen/more-stories-concise"
-import { Suspense } from "react";
+import { PostListConcise } from "@/app/_components/post_gen/post-list-concise";
 
-export default function PostsIndex() {
-  const allPosts = getAllPosts("_posts");
-
-  return (
-    <main>
-      <Container>
-        <Suspense>
-        {allPosts.length > 0 && <MoreStoriesConcise posts={allPosts} />}
-        </Suspense>
-      </Container>
-    </main>
-  );
-}
+export default function BlogPostListPage() {
+  return <PostListConcise dir={"_posts"} />
+}

src/app/blog/posts/page.tsx

@@ -1,15 +1,15 @@
-// pull from private repo: [tkokhing/frontier_post/_frontier] MDX_FOLDER
+// [tkokhing/frontier_post/_frontier] MDX_FOLDER
 import { Metadata } from "next";
 import { notFound } from "next/navigation";
 import Container from "@/app/_components/preference/container";
-import { CyberDomainData } from "@/app/_components/preference/data-exporter";
-import { BlueprintBattlefieldData } from "@/app/_components/preference/data-exporter";
 import { PostHeader } from "@/app/_components/post_gen/post-header";
 import { PostBody } from "@/app/_components/post_gen/post-body";
 import { getPostBySlug } from "@/lib/api";
 import { generatePageMetadata } from "@/lib/generatePageMetadata";
 import { generatePageStaticParams } from "@/lib/generatePageStaticParams";
-
+import { CyberDomainData } from "@/app/_components/preference/data-exporter";
+import { BlueprintBattlefieldData } from "@/app/_components/preference/data-exporter";
+import { CyberThreatsData } from "@/app/_components/preference/data-exporter";
 const MDX_FOLDER = "_frontier"; 
 
 type Params = {
@@ -23,6 +23,7 @@ export default async function Post(props: Params) {
   const post = getPostBySlug(params.slug, MDX_FOLDER);
   const ImportComponents = {
     CyberDomainData,
+    CyberThreatsData,
     BlueprintBattlefieldData,
   };
   if (!post) return notFound();