radiant-docs 0.1.0

package/template/src/pages/[...slug].astro

@@ -0,0 +1,77 @@
+---
+import { getCollection } from "astro:content";
+import { getAllRoutes, type Route } from "../lib/routes";
+import { getConfig, validateMdxContent } from "../lib/validation";
+import MdxPage from "../components/MdxPage.astro";
+import OpenApiPage from "../components/OpenApiPage.astro";
+import type { GetStaticPathsResult } from "astro";
+
+export async function getStaticPaths(): Promise<GetStaticPathsResult> {
+  await validateMdxContent();
+  const routes = await getAllRoutes();
+  const docs = await getCollection("docs");
+  const config = await getConfig();
+
+  // console.log("routes", routes);
+
+  // Helper to find entry
+  const findEntry = (filePath: string) => {
+    return docs.find((doc: any) => {
+      const docPath = doc.id.replace(/\.mdx$/, "");
+      return docPath === filePath;
+    });
+  };
+
+  // Map existing routes
+  const paths = routes.map((route) => {
+    if (route.type === "mdx") {
+      const entry = findEntry(route.filePath);
+      if (!entry) {
+        throw new Error(
+          `Could not find content collection entry for path: ${route.filePath}`
+        );
+      }
+      return {
+        params: { slug: route.slug },
+        props: { route, entry },
+      };
+    } else {
+      return {
+        params: { slug: route.slug },
+        props: { route },
+      };
+    }
+  });
+
+  // Add the home page route
+  if (config.home) {
+    const homeEntry = findEntry(config.home);
+    if (!homeEntry) {
+      throw new Error(`Home page content not found for path: ${config.home}`);
+    }
+    const homeRoute: Route = {
+      type: "mdx",
+      slug: "/",
+      filePath: config.home,
+      title: homeEntry.data.title,
+    };
+    paths.push({
+      params: { slug: "/" },
+      props: { route: homeRoute, entry: homeEntry },
+    });
+  }
+
+  return paths;
+}
+
+const props = Astro.props as { route: Route; entry?: any };
+const { route, entry } = props;
+---
+
+{
+  route.type === "mdx" ? (
+    <MdxPage entry={entry!} />
+  ) : (
+    <OpenApiPage route={route} />
+  )
+}

package/template/src/styles/global.css

@@ -0,0 +1,209 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@theme {
+  /* This maps the 'background' utility to our CSS variable */
+  --color-background: var(--background);
+  --color-background-dark: var(--background-dark);
+
+  --color-border: var(--border);
+  --color-border-light: var(--border-light);
+}
+
+/* 2. Light Mode (Default) */
+:root {
+  --background: #ffffff;
+  --background-dark: var(--color-neutral-100);
+
+  --border: var(--color-neutral-200);
+  --border-light: var(--color-neutral-100);
+}
+
+/* 3. Dark Mode */
+.dark {
+  --background: var(--color-neutral-900);
+  --background-dark: var(--color-neutral-950);
+
+  --border: color-mix(in srgb, var(--color-neutral-800) 100%, transparent);
+  --border-light: color-mix(in srgb, var(--color-neutral-800) 50%, transparent);
+}
+
+@variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --breakpoint-xs: 30rem;
+}
+
+[x-cloak] {
+  display: none !important;
+}
+
+/* Prose styling */
+.prose-rules {
+  @apply *:max-w-2xl max-w-none prose prose-neutral *:my-5 *:first:mt-0 *:last:mb-0 dark:prose-invert prose-h2:scroll-mt-28 prose-h3:scroll-mt-24 prose-headings:font-semibold [--tw-prose-bullets:inherit] [--tw-prose-counters:text-neutral-95s0];
+}
+
+/* Code block styling */
+.expressive-code .ec-line .code {
+  border-inline-start-width: 0 !important;
+}
+
+.expressive-code .has-title .copy button,
+.expressive-code .is-terminal .copy button {
+  @apply opacity-100!;
+}
+
+.expressive-code .copy button {
+  @apply rounded-md!;
+}
+
+/* Hide the tooltip text */
+.expressive-code .copy .feedback {
+  @apply hidden!;
+}
+
+.expressive-code .frame:not(.has-title):hover .copy button {
+  @apply bg-white/50! opacity-100! backdrop-blur-xs shadow-xs;
+}
+
+/* Copy icon color */
+.expressive-code .copy button:after {
+  @apply bg-neutral-500/80! duration-200;
+}
+
+.expressive-code .copy button:hover:after {
+  @apply bg-neutral-500!;
+}
+
+/* Copy button animation */
+.expressive-code .copy button div {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
+  @apply transition-all! duration-200! scale-0! opacity-0! bg-green-600! mask-no-repeat mask-center;
+}
+
+.expressive-code .copy button:hover div {
+  @apply opacity-100 bg-green-600!;
+}
+
+.expressive-code .copy:has(.feedback) button div {
+  @apply scale-100! opacity-100!;
+}
+
+.expressive-code .copy button:after {
+  @apply transition-all duration-200;
+}
+
+.expressive-code .copy:has(.feedback) button:after {
+  @apply scale-0 opacity-0;
+}
+
+/* Copy button with code block title  */
+.expressive-code .has-title .copy,
+.expressive-code .is-terminal .copy {
+  @apply top-px!;
+}
+
+.expressive-code .has-title .copy button,
+.expressive-code .is-terminal .copy button {
+  @apply bg-transparent!;
+}
+
+.expressive-code .has-title .copy button:before,
+.expressive-code .is-terminal .copy button:before {
+  @apply border-none;
+}
+
+.expressive-code .is-terminal .title {
+  @apply text-neutral-400 font-normal! text-[13px];
+}
+
+/* Code single-line styling */
+.prose :not(pre) > code {
+  @apply px-1 py-0.5 bg-neutral-100/90 text-neutral-950 rounded-md font-mono font-medium border border-neutral-200/80 shadow-xs after:hidden before:hidden;
+}
+
+/* <ol> numbers */
+.prose :where(ol > li)::marker {
+  @apply font-medium;
+}
+
+/* Code line collapse issue */
+.expressive-code .ec-line .code {
+  @apply min-w-0 w-fit;
+}
+
+/* Collapse icon */
+.expressive-code .ec-section summary :is(.expand, .collapse) {
+  @apply opacity-100!;
+}
+
+/* Tab shadows */
+.expressive-code .frame.has-title:not(.is-terminal) .title {
+  @apply shadow-[1px_0px_2px_0px_rgba(0,0,0,0.01)];
+}
+
+.expressive-code .frame.has-title:not(.is-terminal) .header {
+  @apply shadow-[inset_0px_0.5px_2px_2px_rgba(0,0,0,0.01)];
+}
+
+/* Animations */
+@keyframes scaleIn {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes loading-sweep {
+  0% {
+    background-position: 130% 0;
+  }
+  100% {
+    background-position: -130% 0;
+  }
+}
+
+.animate-loading {
+  background-image: linear-gradient(
+    90deg,
+    transparent 30%,
+    rgba(255, 255, 255, 0.4) 50%,
+    transparent 70%
+  );
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+  animation: loading-sweep 1.3s ease-in-out infinite;
+}
+
+/* Dark mode variant */
+.dark .animate-loading {
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    transparent 100%
+  );
+}
+
+:root {
+  --theme-transition: 0ms; /* Default is instant */
+}
+
+/* When the switching class is active, force ALL transitions 
+   to use our synchronized duration */
+.is-switching-theme * {
+  --theme-transition: 200ms; /* Set your desired sync speed */
+
+  transition-duration: var(--theme-transition) !important;
+  transition-property: background-color, border-color, color, fill, stroke !important;
+}
+/* Ensure the pill slider is NOT affected by the forced color duration 
+   so its movement remains independent */
+.is-switching-theme .anchor-pill {
+  transition-duration: 200ms !important;
+  transition-property: left, width, background-color !important;
+}

package/template/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}