Adding markdown files for news & documentation

package.json

@@ -9,6 +9,7 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/markdown-remark": "^6.0.2",
     "@astrojs/mdx": "^4.0.5",
     "@astrojs/react": "^4.1.4",
     "@astrojs/tailwind": "^5.1.5",
@@ -17,6 +18,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "astro": "^5.1.6",
+    "astro-remote": "^0.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.17"

src/components/Breadcrumbs.astro

@@ -0,0 +1,78 @@
+---
+// NavBreadcrumbs.astro
+const { pathname } = Astro.url;
+
+// Utility function to format path segments
+function formatPathSegment(segment: string, index: number) {
+  // Decode and basic formatting
+  let formatted = decodeURIComponent(segment).replace('_', ' ');
+
+  // Replace drc-static with INFO
+  if (segment === 'drc-static') {
+    return 'INFO';
+  }
+
+  // Handle special cases
+  if (segment === 'processed') return 'Processed Data';
+  if (segment === 'entity') return 'Entity';
+  if (segment === 'form') return 'Data and Metadata Form';
+  if (segment === 'urlform') return 'Code Assets Form';
+  if (segment === 'uploaded') return 'Uploaded Assets';
+
+  return formatted;
+}
+
+// Process the path
+const pathSegments = pathname.split('/').filter(Boolean);
+const formattedSegments = pathSegments.map((segment, index) => {
+  let formatted = formatPathSegment(segment, index);
+
+  // Special case handling
+  if (pathSegments[0] === 'data' && pathSegments[1] === 'processed') {
+    if (index === 2 && pathSegments[2] === 'entity') formatted = 'Entity';
+  }
+  if (pathSegments[0] === 'data' && pathSegments[1] === 'search') {
+    if (index === 3 && pathSegments[3] === 'entity') formatted = 'Entity';
+  }
+  if (pathSegments[0] === 'search') {
+    if (index === 2 && pathSegments[2] === 'entity') formatted = 'Entity';
+  }
+
+  return {
+    segment: segment === 'drc-static' ? 'INFO' : segment, // Use INFO in the path
+    formatted: formatted.toUpperCase(),
+    path: '/' + pathSegments.slice(0, index + 1).join('/')
+  };
+});
+
+// Don't render if we're at the root
+if (pathSegments.length < 2) return null;
+---
+
+<nav aria-label="breadcrumb" class="flex items-center space-x-2 px-1 py-2">
+  {formattedSegments.map((item, index) => (
+    <>
+      {index > 0 && (
+        <span class="text-secondary-main font-medium mx-1">›</span>
+      )}
+      {index === formattedSegments.length - 1 ? (
+        <span class="font-hanken text-[14px] font-medium text-secondary-main cursor-default">
+          {item.formatted}
+        </span>
+      ) : (
+        <a
+          href={item.path}
+          class="font-hanken text-[14px] font-medium text-gray-600 hover:text-secondary-main transition-colors duration-200"
+        >
+          {item.formatted}
+        </a>
+      )}
+    </>
+  ))}
+</nav>
+
+<style>
+  nav {
+    font-family: 'Hanken Grotesk', sans-serif;
+  }
+</style>

src/components/C2M2Table.astro

@@ -0,0 +1,36 @@
+---
+import { Markdown } from 'astro-remote';
+
+interface Props {
+  content: string;
+}
+
+const { content } = Astro.props;
+---
+
+<div class="markdown-content">
+  <Markdown content={content} />
+</div>
+
+<style>
+  .markdown-content {
+    @apply max-w-full overflow-x-auto p-4;
+  }
+
+  .markdown-content :global(table) {
+    @apply min-w-full border-collapse my-4;
+  }
+
+  .markdown-content :global(th),
+  .markdown-content :global(td) {
+    @apply border border-gray-300 px-4 py-2 text-left;
+  }
+
+  .markdown-content :global(th) {
+    @apply bg-gray-100 font-semibold;
+  }
+
+  .markdown-content :global(tr:nth-child(even)) {
+    @apply bg-gray-50;
+  }
+</style>

src/components/Footer.astro

@@ -0,0 +1,7 @@
+---
+import "@/styles/base.css";
+---
+<div class="bg-secondary-main text-white flex justify-between items-center px-8 py-4">
+
+</div>
+

src/components/Layout.astro

@@ -1,64 +1,29 @@
 ---
-import '@/styles/base.css'
-import Prose from '@/components/Prose.astro'
+import "@/styles/base.css";
+import Prose from "@/components/Prose.astro";
+import Nav from "./Nav.astro";
+import Footer from "./Footer.astro";
 ---
 
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
-		<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon.png`} />
+		<link
+			rel="icon"
+			type="image/svg+xml"
+			href={`${import.meta.env.BASE_URL}/favicon.png`}
+		/>
+		<title>CFDE Information Portal</title>
 	</head>
 	<body>
-		<main class="container mx-auto flex flex-col gap-2">
-      <div class="flex flex-row flex-wrap gap-4">
-        <a
-					class="font-bold text-primary hover:bg-gray-100 transition p-4"
-					class:list={[Astro.url.pathname === `${import.meta.env.BASE_URL}/` && 'underline']}
-					href={`${import.meta.env.BASE_URL}/`}>
-					Home
-				</a>
-				<a
-					class="font-bold text-primary hover:bg-gray-100 transition p-4"
-					class:list={[Astro.url.pathname.startsWith(`${import.meta.env.BASE_URL}/dccs/`) && 'underline']}
-					href={`${import.meta.env.BASE_URL}/dccs/`}>
-					CF Programs
-				</a>
-        <a
-					class="font-bold text-primary hover:bg-gray-100 transition p-4"
-					class:list={[Astro.url.pathname.startsWith(`${import.meta.env.BASE_URL}/centers/`) && 'underline']}
-					href={`${import.meta.env.BASE_URL}/centers/`}>
-					CFDE Centers
-				</a>
-        <a
-					class="font-bold text-primary hover:bg-gray-100 transition p-4"
-					class:list={[Astro.url.pathname.startsWith(`${import.meta.env.BASE_URL}/partnerships/`) && 'underline']}
-					href={`${import.meta.env.BASE_URL}/partnerships/`}>
-					Partnerships
-				</a>
-        <a
-					class="font-bold text-primary hover:bg-gray-100 transition p-4"
-					class:list={[Astro.url.pathname.startsWith(`${import.meta.env.BASE_URL}/outreach/`) && 'underline']}
-					href={`${import.meta.env.BASE_URL}/outreach/`}>
-					Outreach
-				</a>
-        <a
-					class="font-bold text-primary hover:bg-gray-100 transition p-4"
-					class:list={[Astro.url.pathname.startsWith(`${import.meta.env.BASE_URL}/publications/`) && 'underline']}
-					href={`${import.meta.env.BASE_URL}/publications/`}>
-					Publications
-				</a>
-        <a
-					class="font-bold text-primary hover:bg-gray-100 transition p-4"
-					class:list={[Astro.url.pathname.startsWith(`${import.meta.env.BASE_URL}/webinars/`) && 'underline']}
-					href={`${import.meta.env.BASE_URL}/webinars/`}>
-					Webinars
-				</a>
-      </div>
-      <Prose>
-        <slot />
-      </Prose>
+		<main class="container mx-auto flex flex-col px-12">
+			<Nav />
+			<Prose>
+				<slot />
+			</Prose>
 		</main>
+		<Footer />
 	</body>
 </html>

src/components/Nav.astro

@@ -0,0 +1,149 @@
+---
+import "@/styles/base.css";
+import Breadcrumbs from "@/components/Breadcrumbs.astro";
+---
+<div class="flex justify-between items-center px-8 py-4">
+    {/* Left side - Logo and Title */}
+    <div class="flex items-center">
+        <div class="flex justify-center items-center mr-2">
+            <img
+                src="https://info.cfde.cloud/img/favicon.png"
+                alt="Logo"
+                class="w-[55px] h-auto"
+            />
+        </div>
+        <div>
+            <a
+                class="font-hanken text-h1 font-weight-450 uppercase text-secondary-main"
+                >CFDE WORKBENCH</a
+            >
+        </div>
+    </div>
+
+    {/* Right side - Portal Links and Login */}
+    <div class="flex items-center gap-5 pr-4">
+        <a
+            href="/information-portal"
+            class="nav"
+        >
+            INFORMATION PORTAL
+        </a>
+        <a
+            href="https://data.cfde.cloud/"
+            class="nav"
+        >
+            DATA PORTAL
+        </a>
+        <a
+            href=""
+            class="font-hanken text-nav font-semibold px-4 py-2 border border-secondary-main text-secondary-main hover:bg-secondary-main hover:text-white transition-colors duration-200"
+        >
+            LOGIN
+        </a>
+    </div>
+</div>
+<div class="mx-6 mb-4 pl-2">
+    <div  class="flex flex-row flex-wrap gap-2 ">
+    <a
+        class="nav"
+        class:list={[
+            Astro.url.pathname === `${import.meta.env.BASE_URL}/` &&
+                "underline",
+        ]}
+        href={`${import.meta.env.BASE_URL}/`}
+    >
+        Home
+    </a>
+    <a
+        class="nav"
+        class:list={[
+            Astro.url.pathname.startsWith(
+                `${import.meta.env.BASE_URL}/dccs/`,
+            ) && "underline",
+        ]}
+        href={`${import.meta.env.BASE_URL}/dccs/`}
+    >
+        CF Programs
+    </a>
+    <a
+        class="nav"
+        class:list={[
+            Astro.url.pathname.startsWith(
+                `${import.meta.env.BASE_URL}/centers/`,
+            ) && "underline",
+        ]}
+        href={`${import.meta.env.BASE_URL}/centers/`}
+    >
+        CFDE Centers
+    </a>
+    <a
+        class="nav"
+        class:list={[
+            Astro.url.pathname.startsWith(
+                `${import.meta.env.BASE_URL}/partnerships/`,
+            ) && "underline",
+        ]}
+        href={`${import.meta.env.BASE_URL}/partnerships/`}
+    >
+        Partnerships
+    </a>
+    <a
+        class="nav"
+        class:list={[
+            Astro.url.pathname.startsWith(
+                `${import.meta.env.BASE_URL}/outreach/`,
+            ) && "underline",
+        ]}
+        href={`${import.meta.env.BASE_URL}/outreach/`}
+    >
+        Outreach
+    </a>
+    <a
+        class="nav"
+        class:list={[
+            Astro.url.pathname.startsWith(
+                `${import.meta.env.BASE_URL}/publications/`,
+            ) && "underline",
+        ]}
+        href={`${import.meta.env.BASE_URL}/publications/`}
+    >
+        Publications
+    </a>
+    <a
+        class="nav"
+        class:list={[
+            Astro.url.pathname.startsWith(
+                `${import.meta.env.BASE_URL}/webinars/`,
+            ) && "underline",
+        ]}
+        href={`${import.meta.env.BASE_URL}/webinars/`}
+    >
+        Webinars
+    </a>
+    <a
+        class="nav"
+        class:list={[
+            Astro.url.pathname.startsWith(
+                `${import.meta.env.BASE_URL}/documentation/`,
+            ) && "underline",
+        ]}
+        href={`${import.meta.env.BASE_URL}/documentation/`}
+    >
+        Documentation
+    </a>
+    <a
+        class="nav"
+        class:list={[
+            Astro.url.pathname.startsWith(
+                `${import.meta.env.BASE_URL}/news/`,
+            ) && "underline",
+        ]}
+        href={`${import.meta.env.BASE_URL}/news/`}
+    >
+        What's New?
+    </a>
+</div>
+    <div class="">
+        <Breadcrumbs />
+    </div>
+</div>