mordoc 0.1.13 → 1.0.0

package/src/app/landing/LandingPage.tsx

@@ -0,0 +1,62 @@
+/**
+ * LandingPage — full-width route component for pages with `layout: landing`.
+ *
+ * Rendered instead of Content when a page's frontmatter declares
+ * `layout: landing`. The App shell suppresses the sidenav and hamburger
+ * for these routes (detected via the route handle set in routes.tsx).
+ *
+ * Unlike Content, LandingPage has no article chrome: no breadcrumb, no
+ * TOC column, no read-time badge, no frontmatter title/description header.
+ * The author composes the page entirely via Markdoc tags. The .content
+ * wrapper has no horizontal padding — hero and section components each
+ * own their inner padding so full-bleed backgrounds reach the viewport edge.
+ *
+ * The same loader mechanism as Content — lazy virtual:mordoc/page/<routePath>
+ * — supplies the PageData, so SSR, SSG, and HMR all work identically.
+ *
+ * CJS interop: same Markdoc default-import constraint as Content.tsx.
+ */
+
+import { useEffect } from 'react';
+import { useLoaderData } from 'react-router';
+import React from 'react';
+import Markdoc from '@markdoc/markdoc';
+import { useMordocData } from '../data-context.js';
+import { Footer } from '../footer/Footer.js';
+import { CodeBlock } from '../content/code-block/CodeBlock.js';
+import { Image } from '../content/image/Image.js';
+import { Callout } from '../content/callout/Callout.js';
+import { Card } from '../content/card/Card.js';
+import { CardGrid } from '../content/card/CardGrid.js';
+import { ContentLink } from '../content/link/ContentLink.js';
+import { Heading } from '../content/heading/Heading.js';
+import { Hero } from './hero/Hero.js';
+import { Section } from './section/Section.js';
+import { Button } from './button/Button.js';
+import type { PageData } from '../../types/content.js';
+import styles from './LandingPage.module.css';
+
+export function LandingPage() {
+  const pageData = useLoaderData() as PageData;
+  const { site } = useMordocData();
+
+  useEffect(() => {
+    const pageTitle = pageData.frontmatter.title;
+    document.title = pageTitle ? `${pageTitle} — ${site.name}` : site.name;
+  }, [pageData.frontmatter.title, site.name]);
+
+  const rendered = Markdoc.renderers.react(pageData.renderable, React, {
+    components: { CodeBlock, Image, Callout, Card, CardGrid, ContentLink, Heading, Hero, Section, Button },
+  });
+
+  return (
+    <div className={styles.landing}>
+      <div className={styles.content} data-pagefind-body>
+        {rendered}
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export default LandingPage;

package/src/app/landing/button/Button.module.css

@@ -0,0 +1,37 @@
+/* ── Button ───────────────────────────────────────────────────── */
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.625rem;
+  padding: 0 1.375rem;
+  border-radius: var(--radius-md);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  border: 1.5px solid transparent;
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+/* ── Primary ──────────────────────────────────────────────────── */
+
+.primary {
+  background: var(--accent);
+  color: var(--accent-on);
+  border-color: var(--accent);
+}
+
+.primary:hover {
+  background: var(--accent-strong);
+  border-color: var(--accent-strong);
+}
+
+/* Markdoc wraps button body text in <p> — collapse it so the button
+   renders cleanly without affecting inline-flex layout */
+.button :global(p) {
+  display: contents;
+}

package/src/app/landing/button/Button.tsx

@@ -0,0 +1,50 @@
+/**
+ * Button — styled CTA link for landing pages and content pages.
+ *
+ * Renders as a React Router Link for internal paths (starting with "/")
+ * or a plain <a target="_blank"> for external URLs.
+ *
+ * Markdoc wraps the button's body text in a <p> tag because the tag is
+ * block-level. The CSS collapses it with `display: contents` so the
+ * button renders as a clean inline-flex element regardless.
+ *
+ * Registered as a Markdoc tag (`button`) in markdoc-config.ts and in
+ * LandingPage.tsx's components map. Also registered in Content.tsx so it
+ * can be used in regular content pages.
+ *
+ * The prop is named `path` (not `href`) to match Mordoc's authoring
+ * convention — consistent with sidenav/topnav YAML and card tags.
+ */
+
+import { Link } from 'react-router';
+import React from 'react';
+import styles from './Button.module.css';
+
+interface ButtonProps {
+  path: string;
+  children?: React.ReactNode;
+}
+
+function isExternal(path: string) {
+  return path.startsWith('http://') || path.startsWith('https://') || path.startsWith('//');
+}
+
+export function Button({ path, children }: ButtonProps) {
+  const className = `${styles.button} ${styles.primary}`;
+
+  if (isExternal(path)) {
+    return (
+      <a href={path} className={className} target="_blank" rel="noopener noreferrer" data-pagefind-ignore>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <Link to={path} className={className} data-pagefind-ignore>
+      {children}
+    </Link>
+  );
+}
+
+export default Button;

package/src/app/landing/hero/Hero.module.css

@@ -0,0 +1,108 @@
+/* ============================================================
+   HERO TOKENS
+   ============================================================ */
+:root {
+  --hero-inner-max:  72rem;
+  --hero-title-size: clamp(2rem, 4vw, 3.125rem);
+  --hero-desc-size:  1.125rem;
+  --hero-v-padding:  7rem;
+}
+
+/* ── Base ─────────────────────────────────────────────────────── */
+
+.hero {
+  position: relative;
+  width: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+/* ── Inner — always a centered column ────────────────────────── */
+
+.inner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: var(--hero-inner-max);
+  margin: 0 auto;
+  padding: var(--hero-v-padding) var(--page-gutter);
+  gap: 2.5rem;
+}
+
+/* ── Text block — narrower than inner for readability ─────────── */
+
+.heroText {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 1.25rem;
+  max-width: 42rem;
+  width: 100%;
+}
+
+/* ── Title ────────────────────────────────────────────────────── */
+
+.heroTitle {
+  font-size: var(--hero-title-size);
+  font-weight: 700;
+  line-height: 1.12;
+  letter-spacing: -0.025em;
+  color: var(--hero-title-color, var(--color-fg));
+  margin: 0;
+}
+
+/* Second title line — accent color by default, overridable per-hero */
+.titleAccent {
+  color: var(--hero-title-accent-color, var(--accent-emphasis));
+}
+
+/* ── Description ──────────────────────────────────────────────── */
+
+.heroDescription {
+  font-size: var(--hero-desc-size);
+  line-height: 1.7;
+  color: var(--hero-desc-color, var(--color-fg-muted));
+  margin: 0;
+}
+
+/* ── CTAs ─────────────────────────────────────────────────────── */
+
+.heroCtas {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Markdoc may wrap button tags in a <p> — collapse it */
+.heroCtas :global(p) {
+  display: contents;
+}
+
+/* ── Foreground image — full inner width, below CTAs ─────────── */
+
+.heroImageWrap {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.heroImage {
+  width: 100%;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  display: block;
+}
+
+/* ── Responsive ───────────────────────────────────────────────── */
+
+@media (max-width: 600px) {
+  :root {
+    --hero-v-padding: 4rem;
+  }
+}

package/src/app/landing/hero/Hero.tsx

@@ -0,0 +1,81 @@
+/**
+ * Hero — full-width landing page hero section.
+ *
+ * Always renders as a centered column. When `image` is provided it appears
+ * below the CTAs (full inner width), giving a "product preview" feel.
+ *
+ * Title supports two lines via `title` + `titleAccent`. `titleAccent` is
+ * rendered on a new line in the accent color so authors can highlight a key
+ * phrase without any custom CSS.
+ *
+ * `background` sets a background image or color but applies no overlay —
+ * the author is responsible for preparing an image that works with the
+ * existing text colors.
+ *
+ * Registered as a Markdoc tag (`hero`) in markdoc-config.ts and in
+ * LandingPage.tsx's components map.
+ */
+
+import React from 'react';
+import styles from './Hero.module.css';
+
+interface HeroProps {
+  title: string;
+  titleAccent?: string;
+  description?: string;
+  image?: string;
+  background?: string;
+  titleColor?: string;
+  titleAccentColor?: string;
+  descriptionColor?: string;
+  children?: React.ReactNode;
+}
+
+export function Hero({ title, titleAccent, description, image, background, titleColor, titleAccentColor, descriptionColor, children }: HeroProps) {
+  const style: React.CSSProperties = {};
+  if (background) {
+    const isImagePath =
+      background.startsWith('/') ||
+      background.startsWith('http://') ||
+      background.startsWith('https://');
+    if (isImagePath) {
+      style.backgroundImage = `url(${background})`;
+    } else {
+      style.backgroundColor = background;
+    }
+  }
+  if (titleColor)       (style as Record<string, string>)['--hero-title-color']        = titleColor;
+  if (titleAccentColor) (style as Record<string, string>)['--hero-title-accent-color'] = titleAccentColor;
+  if (descriptionColor) (style as Record<string, string>)['--hero-desc-color']         = descriptionColor;
+
+  return (
+    <section className={styles.hero} style={style}>
+      <div className={styles.inner}>
+        <div className={styles.heroText}>
+          <h1 className={styles.heroTitle}>
+            <span>{title}</span>
+            {titleAccent && (
+              <>
+                <br />
+                <span className={styles.titleAccent}>{titleAccent}</span>
+              </>
+            )}
+          </h1>
+          {description && (
+            <p className={styles.heroDescription}>{description}</p>
+          )}
+          {children && (
+            <div className={styles.heroCtas}>{children}</div>
+          )}
+        </div>
+        {image && (
+          <div className={styles.heroImageWrap}>
+            <img src={image} alt="" className={styles.heroImage} />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export default Hero;

package/src/app/landing/section/Section.module.css

@@ -0,0 +1,100 @@
+/* ── Section ──────────────────────────────────────────────────── */
+
+.section {
+  position: relative;
+  width: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  overflow: hidden;
+}
+
+/* Dark overlay for image backgrounds */
+.overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 0;
+}
+
+/* ── Inner container ──────────────────────────────────────────── */
+
+.inner {
+  position: relative;
+  z-index: 1;
+  max-width: 72rem;
+  margin: 0 auto;
+  padding: 4rem var(--page-gutter);
+}
+
+/* ── Section title ────────────────────────────────────────────── */
+
+.sectionTitle {
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.018em;
+  color: var(--color-fg);
+  margin: 0 0 2rem 0;
+}
+
+.hasBackgroundImage .sectionTitle {
+  color: #ffffff;
+}
+
+/* ── Content area ─────────────────────────────────────────────── */
+
+.content :global(h2) {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: -0.015em;
+  color: var(--color-fg);
+  margin: 2.5rem 0 1rem;
+}
+
+.content :global(h2):first-child {
+  margin-top: 0;
+}
+
+.content :global(h3) {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--color-fg);
+  margin: 2rem 0 0.75rem;
+}
+
+.content :global(p) {
+  font-size: 1rem;
+  line-height: 1.7;
+  color: var(--color-fg-muted);
+  margin: 0 0 1rem;
+  max-width: 60ch;
+}
+
+.content :global(p):last-child {
+  margin-bottom: 0;
+}
+
+/* Image bg — push prose text to white */
+.hasBackgroundImage .content :global(h2),
+.hasBackgroundImage .content :global(h3) {
+  color: #ffffff;
+}
+
+.hasBackgroundImage .content :global(p) {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* ── Responsive ───────────────────────────────────────────────── */
+
+@media (max-width: 600px) {
+  .inner {
+    padding: 2.5rem var(--page-gutter);
+  }
+
+  .sectionTitle {
+    font-size: 1.375rem;
+  }
+}

package/src/app/landing/section/Section.tsx

@@ -0,0 +1,61 @@
+/**
+ * Section — full-width landing page content block.
+ *
+ * Provides a visual grouping container with optional background and an
+ * optional title rendered as an <h2>. The inner content is constrained
+ * to a readable max-width and centered.
+ *
+ * Background via `background` attribute:
+ *   - image path (/... or http...)   → background-image
+ *   - CSS color (#hex, rgb, named…)  → background-color
+ *   - omitted                        → transparent
+ *
+ * Children can be any mix of Markdoc block content (headings, paragraphs,
+ * lists, code fences) and custom tags (cardGrid, card, callout, button).
+ *
+ * Registered as a Markdoc tag (`section`) in markdoc-config.ts and in
+ * LandingPage.tsx's components map.
+ */
+
+import React from 'react';
+import styles from './Section.module.css';
+
+interface SectionProps {
+  title?: string;
+  background?: string;
+  children?: React.ReactNode;
+}
+
+export function Section({ title, background, children }: SectionProps) {
+  const style: React.CSSProperties = {};
+  let isImageBg = false;
+
+  if (background) {
+    const isImagePath =
+      background.startsWith('/') ||
+      background.startsWith('http://') ||
+      background.startsWith('https://');
+    if (isImagePath) {
+      style.backgroundImage = `url(${background})`;
+      isImageBg = true;
+    } else {
+      style.backgroundColor = background;
+    }
+  }
+
+  const className = [
+    styles.section,
+    isImageBg ? styles.hasBackgroundImage : '',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <section className={className} style={style}>
+      <div className={styles.inner}>
+        {title && <h2 className={styles.sectionTitle}>{title}</h2>}
+        <div className={styles.content}>{children}</div>
+      </div>
+    </section>
+  );
+}
+
+export default Section;

package/src/app/lang-utils.ts

@@ -0,0 +1,11 @@
+/**
+ * Re-exports all lang utilities from the shared `src/utils/lang-utils.ts`.
+ * The shared location is importable by both the React app and Node-side code
+ * (pipeline, SSG runner). App-side imports continue to use this path unchanged.
+ */
+export {
+  detectCurrentLang,
+  buildLangPrefix,
+  stripLangPrefix,
+  resolveLabel,
+} from '../utils/lang-utils.js';

package/src/app/main.tsx

@@ -0,0 +1,67 @@
+import { StrictMode } from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import { RouterProvider } from 'react-router';
+import site from 'virtual:mordoc/site';
+import language from 'virtual:mordoc/language';
+import navigation from 'virtual:mordoc/navigation';
+import assets from 'virtual:mordoc/assets';
+import pagesIndex from 'virtual:mordoc/pages-index';
+import translations from 'virtual:mordoc/translations';
+import type { ShellData } from '../types/pipeline.js';
+import './index.css';
+import 'virtual:mordoc/theme';
+import { MordocDataContext } from './data-context.js';
+import { createAppRouter } from './routes.js';
+
+/**
+ * Browser entry. Assembles `ShellData` from the eager virtual modules
+ * and hydrates the React tree.
+ *
+ * This is the only file in `src/app/` that imports the
+ * eager `virtual:mordoc/*` modules directly — every other shell
+ * component reads them via `useMordocData()`. Keeping the imports
+ * pinned here is what guarantees CSR/SSR symmetry: the server entry
+ * doesn't need any virtual imports because its `render(request, data)`
+ * receives the same `ShellData` from the dev middleware (or, later,
+ * from the SSG runner).
+ *
+ * `createBrowserRouter` is given `hydrationData` from the
+ * `<script>window.__staticRouterHydrationData = ...</script>` tag that
+ * `<StaticRouterProvider>` emits during SSR. Without this, the data
+ * router would re-run the initial route's loader on first mount,
+ * triggering a redundant fetch of the same lazy page chunk that the
+ * server already used to produce the initial HTML.
+ */
+const container = document.getElementById('app');
+if (!container) {
+  throw new Error('mordoc: #app element not found in HTML shell');
+}
+
+const shellData: ShellData = {
+  site,
+  language,
+  navigation,
+  assets,
+  pagesIndex,
+  translations,
+};
+
+const hydrationData = window.__staticRouterHydrationData;
+const router = createAppRouter(hydrationData);
+
+const app = (
+  <StrictMode>
+    <MordocDataContext.Provider value={shellData}>
+      <RouterProvider router={router} />
+    </MordocDataContext.Provider>
+  </StrictMode>
+);
+
+// SSR/SSG (production): server-rendered HTML is in the container — hydrate to
+// preserve it and attach event listeners without a full re-render.
+// Dev: container is empty — mount fresh via createRoot.
+if (hydrationData) {
+  hydrateRoot(container, app);
+} else {
+  createRoot(container).render(app);
+}

package/src/app/not-found/NotFound.module.css

@@ -0,0 +1,92 @@
+/* ── Page shell — mirrors the article-column layout from Content ── */
+
+.page {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: calc(100svh - var(--header-total));
+}
+
+.articleArea {
+  flex: 1;
+}
+
+.article {
+  max-width: var(--content-max-width);
+  width: 100%;
+  margin: 0 auto;
+  padding: 3rem 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .article {
+    padding: 3rem 2rem;
+  }
+}
+
+/* ── 404 display number ─────────────────────────────────────── */
+
+.code404 {
+  margin: 0 0 0.5rem;
+  font-size: 7rem;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.04em;
+  color: var(--color-fg-muted);
+  opacity: 0.3;
+  user-select: none;
+}
+
+/* ── Heading + description ──────────────────────────────────── */
+
+.title {
+  margin: 0 0 0.75rem;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  color: var(--color-fg);
+}
+
+.description {
+  margin: 0 0 2rem;
+  font-size: 1rem;
+  line-height: 1.7;
+  color: var(--color-content-fg);
+}
+
+/* Inline code pill for the path — matches prose inline-code style */
+.path {
+  padding: 0.1em 0.375em;
+  background: var(--color-surface);
+  color: var(--color-content-fg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  font-weight: 500;
+}
+
+/* ── Go home button ─────────────────────────────────────────── */
+
+.homeButton {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1.125rem;
+  background: var(--accent-emphasis);
+  color: var(--accent-on);
+  border-radius: var(--radius-md);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: background 150ms ease;
+}
+
+.homeButton:hover {
+  background: var(--accent-strong);
+}
+
+.homeButton:focus-visible {
+  outline: 2px solid var(--accent-emphasis);
+  outline-offset: 2px;
+}