extract editorial components to markdown.tsx, simplify liveline to content-only
- New website/src/components/markdown.tsx with all reusable components: EditorialPage, TableOfContents, BackButton, P, Code, Caption, CodeBlock, ChartPlaceholder, Section, Divider, SectionHeading, List, Li, PropsTable - liveline.tsx reduced from ~988 to ~370 lines, now pure content - Renamed Paragraph->P, InlineCode->Code for brevity - TOC accepts items/logo props for reuse across pages - Centered image captions - Divider with equal top/bottom padding - Variable spacing CSS rules for code blocks, images, section dividers
This commit is contained in:
Tommy D. Rossi
@@ -0,0 +1,578 @@
|
||||
/*
|
||||
* Editorial markdown components for the liveline-style pages.
|
||||
* Extracted from liveline.tsx so page files are content-only.
|
||||
*
|
||||
* All components use CSS variables from liveline.css (--ll-*).
|
||||
* Import liveline.css and liveline-prism.css in the page file.
|
||||
*/
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import Prism from "prismjs";
|
||||
import "prismjs/components/prism-jsx";
|
||||
import "prismjs/components/prism-tsx";
|
||||
import "prismjs/components/prism-bash";
|
||||
|
||||
/* =========================================================================
|
||||
TOC sidebar (fixed left)
|
||||
========================================================================= */
|
||||
|
||||
function useActiveTocId() {
|
||||
const [activeId, setActiveId] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const headings = document.querySelectorAll<HTMLElement>("h1[id]");
|
||||
if (headings.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
const visible: string[] = [];
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting && entry.target.id) {
|
||||
visible.push(entry.target.id);
|
||||
}
|
||||
});
|
||||
|
||||
if (visible.length > 0) {
|
||||
const sorted = visible.sort((a, b) => {
|
||||
const elA = document.getElementById(a);
|
||||
const elB = document.getElementById(b);
|
||||
if (!elA || !elB) {
|
||||
return 0;
|
||||
}
|
||||
return elA.getBoundingClientRect().top - elB.getBoundingClientRect().top;
|
||||
});
|
||||
setActiveId(sorted[sorted.length - 1]);
|
||||
}
|
||||
},
|
||||
{
|
||||
rootMargin: "-80px 0px -75% 0px",
|
||||
threshold: 0,
|
||||
},
|
||||
);
|
||||
|
||||
headings.forEach((heading) => {
|
||||
observer.observe(heading);
|
||||
});
|
||||
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return activeId;
|
||||
}
|
||||
|
||||
export function TableOfContents({
|
||||
items,
|
||||
logo,
|
||||
}: {
|
||||
items: Array<{ label: string; href: string }>;
|
||||
logo?: string;
|
||||
}) {
|
||||
const activeId = useActiveTocId();
|
||||
|
||||
return (
|
||||
<aside
|
||||
className="fixed top-[80px] hidden lg:block"
|
||||
style={{ left: "max(1rem, calc((100vw - 550px) / 2 - 200px))", width: "122px" }}
|
||||
>
|
||||
<nav>
|
||||
<a
|
||||
href="/"
|
||||
className="no-underline transition-colors block"
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
fontWeight: 700,
|
||||
lineHeight: "20px",
|
||||
letterSpacing: "-0.09px",
|
||||
padding: "4px 0",
|
||||
color: "var(--ll-text-primary)",
|
||||
fontFamily: "var(--ll-font-primary)",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = "var(--ll-text-hover)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = "var(--ll-text-primary)";
|
||||
}}
|
||||
>
|
||||
{logo ?? "index"}
|
||||
</a>
|
||||
{items.map((item) => {
|
||||
const isActive = `#${activeId}` === item.href;
|
||||
const defaultColor = isActive ? "var(--ll-text-primary)" : "var(--ll-text-secondary)";
|
||||
return (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="block no-underline"
|
||||
style={{
|
||||
fontSize: "13px",
|
||||
fontWeight: 475,
|
||||
lineHeight: "15.6px",
|
||||
letterSpacing: "-0.04px",
|
||||
padding: "3px 0",
|
||||
color: defaultColor,
|
||||
fontFamily: "var(--ll-font-primary)",
|
||||
transition: "color 0.15s ease",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!isActive) {
|
||||
e.currentTarget.style.color = "var(--ll-text-hover)";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = defaultColor;
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
Back button (fixed top-right)
|
||||
========================================================================= */
|
||||
|
||||
export function BackButton() {
|
||||
return (
|
||||
<a
|
||||
href="/"
|
||||
className="fixed top-5 right-5 z-[100000] flex items-center justify-center w-10 h-10 rounded-full no-underline"
|
||||
style={{
|
||||
background: "var(--ll-btn-bg)",
|
||||
color: "var(--ll-text-secondary)",
|
||||
boxShadow: "var(--ll-btn-shadow)",
|
||||
transition: "color 0.15s, transform 0.15s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = "var(--ll-text-hover)";
|
||||
e.currentTarget.style.transform = "scale(1.05)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = "var(--ll-text-secondary)";
|
||||
e.currentTarget.style.transform = "scale(1)";
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
e.currentTarget.style.transform = "scale(0.95)";
|
||||
}}
|
||||
onMouseUp={(e) => {
|
||||
e.currentTarget.style.transform = "scale(1.05)";
|
||||
}}
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<path
|
||||
d="M12.25 7H1.75M1.75 7L6.125 2.625M1.75 7L6.125 11.375"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
Typography
|
||||
========================================================================= */
|
||||
|
||||
export function SectionHeading({ id, children }: { id: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<h1
|
||||
id={id}
|
||||
className="scroll-mt-[5.25rem]"
|
||||
style={{
|
||||
fontFamily: "var(--ll-font-primary)",
|
||||
fontSize: "14px",
|
||||
fontWeight: 560,
|
||||
lineHeight: "20px",
|
||||
letterSpacing: "-0.09px",
|
||||
color: "var(--ll-text-primary)",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
transform: "translateY(-10px)",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
|
||||
export function P({ children, className = "" }: { children: React.ReactNode; className?: string }) {
|
||||
return (
|
||||
<p
|
||||
className={className}
|
||||
style={{
|
||||
fontFamily: "var(--ll-font-primary)",
|
||||
fontSize: "14px",
|
||||
fontWeight: 475,
|
||||
lineHeight: "20px",
|
||||
letterSpacing: "-0.09px",
|
||||
color: "var(--ll-text-primary)",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
export function Caption({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "var(--ll-font-primary)",
|
||||
fontSize: "12px",
|
||||
fontWeight: 475,
|
||||
textAlign: "center",
|
||||
lineHeight: "20px",
|
||||
letterSpacing: "-0.09px",
|
||||
color: "var(--ll-text-secondary)",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
export function Code({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<code className="ll-inline-code">
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
Layout
|
||||
========================================================================= */
|
||||
|
||||
export function Divider() {
|
||||
return (
|
||||
<div style={{ padding: "24px 0", display: "flex", alignItems: "center" }}>
|
||||
<div style={{ height: "1px", background: "var(--ll-divider)", flex: 1 }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Section({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<Divider />
|
||||
<SectionHeading id={id}>{title}</SectionHeading>
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function List({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<ul
|
||||
className="m-0 pl-5"
|
||||
style={{
|
||||
fontFamily: "var(--ll-font-primary)",
|
||||
fontSize: "14px",
|
||||
fontWeight: 475,
|
||||
lineHeight: "20px",
|
||||
letterSpacing: "-0.09px",
|
||||
color: "var(--ll-text-primary)",
|
||||
listStyleType: "disc",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export function Li({ children }: { children: React.ReactNode }) {
|
||||
return <li style={{ padding: "0 0 8px 12px" }}>{children}</li>;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
Code block with Prism syntax highlighting and line numbers
|
||||
========================================================================= */
|
||||
|
||||
export function CodeBlock({ children, lang = "jsx" }: { children: string; lang?: string }) {
|
||||
const codeRef = useRef<HTMLElement>(null);
|
||||
const lines = children.split("\n");
|
||||
|
||||
useEffect(() => {
|
||||
if (codeRef.current) {
|
||||
Prism.highlightElement(codeRef.current);
|
||||
}
|
||||
}, [children]);
|
||||
|
||||
return (
|
||||
<figure className="m-0 ll-bleed">
|
||||
<div className="relative">
|
||||
<pre
|
||||
className="overflow-x-auto"
|
||||
style={{
|
||||
background: "var(--ll-code-bg)",
|
||||
borderRadius: "8px",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex"
|
||||
style={{
|
||||
padding: "12px 8px 8px",
|
||||
fontFamily: "var(--ll-font-code)",
|
||||
fontSize: "12px",
|
||||
fontWeight: 400,
|
||||
lineHeight: "18px",
|
||||
letterSpacing: "normal",
|
||||
color: "var(--ll-text-primary)",
|
||||
tabSize: 2,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="select-none shrink-0"
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
color: "var(--ll-code-line-nr)",
|
||||
textAlign: "right",
|
||||
paddingRight: "20px",
|
||||
minWidth: "28px",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
{lines.map((_, i) => {
|
||||
return (
|
||||
<span key={i} className="block">
|
||||
{i + 1}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</span>
|
||||
<code
|
||||
ref={codeRef}
|
||||
className={`language-${lang}`}
|
||||
style={{ whiteSpace: "pre", background: "none", padding: 0 }}
|
||||
>
|
||||
{children}
|
||||
</code>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</figure>
|
||||
);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
Chart placeholder (dark box with animated line)
|
||||
========================================================================= */
|
||||
|
||||
export function ChartPlaceholder({ height = 200, label }: { height?: number; label?: string }) {
|
||||
return (
|
||||
<div className="ll-bleed">
|
||||
<div
|
||||
className="w-full overflow-hidden relative"
|
||||
style={{
|
||||
height: `${height}px`,
|
||||
background: "rgb(17, 17, 17)",
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 550 200"
|
||||
className="absolute inset-0 w-full h-full"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="chartFill" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#3b82f6" stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor="#3b82f6" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
d="M0,140 C30,135 60,120 90,125 C120,130 150,100 180,95 C210,90 240,110 270,105 C300,100 330,80 360,85 C390,90 420,70 450,65 C480,60 510,75 550,60"
|
||||
fill="none"
|
||||
stroke="#3b82f6"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path
|
||||
d="M0,140 C30,135 60,120 90,125 C120,130 150,100 180,95 C210,90 240,110 270,105 C300,100 330,80 360,85 C390,90 420,70 450,65 C480,60 510,75 550,60 L550,200 L0,200 Z"
|
||||
fill="url(#chartFill)"
|
||||
/>
|
||||
<circle cx="550" cy="60" r="4" fill="#3b82f6">
|
||||
<animate attributeName="r" values="4;6;4" dur="2s" repeatCount="indefinite" />
|
||||
<animate attributeName="opacity" values="1;0.6;1" dur="2s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
</svg>
|
||||
{label && (
|
||||
<div
|
||||
className="absolute top-3 right-3 px-2 py-1 rounded text-xs"
|
||||
style={{
|
||||
background: "rgba(59, 130, 246, 0.15)",
|
||||
color: "#3b82f6",
|
||||
fontFamily: "var(--ll-font-code)",
|
||||
fontWeight: 475,
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
Comparison table
|
||||
========================================================================= */
|
||||
|
||||
export function PropsTable({
|
||||
title,
|
||||
rows,
|
||||
}: {
|
||||
title?: string;
|
||||
rows: Array<[string, string, string]>;
|
||||
}) {
|
||||
return (
|
||||
<div className="w-full max-w-full overflow-x-auto" style={{ padding: "8px 0" }}>
|
||||
{title && (
|
||||
<div
|
||||
style={{
|
||||
fontFamily: "var(--ll-font-primary)",
|
||||
fontSize: "11px",
|
||||
fontWeight: 400,
|
||||
color: "var(--ll-text-muted)",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.02em",
|
||||
padding: "0 0 6px",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
)}
|
||||
<table
|
||||
className="w-full"
|
||||
style={{
|
||||
borderSpacing: 0,
|
||||
borderCollapse: "collapse",
|
||||
}}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
{["Prop", "Type", "Default"].map((header) => {
|
||||
return (
|
||||
<th
|
||||
key={header}
|
||||
className="text-left"
|
||||
style={{
|
||||
padding: "4.8px 12px 4.8px 0",
|
||||
fontSize: "11px",
|
||||
fontWeight: 400,
|
||||
fontFamily: "var(--ll-font-primary)",
|
||||
color: "var(--ll-text-muted)",
|
||||
borderBottom: "1px solid var(--ll-border)",
|
||||
}}
|
||||
>
|
||||
{header}
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map(([prop, type, def]) => {
|
||||
return (
|
||||
<tr key={prop}>
|
||||
<td
|
||||
style={{
|
||||
padding: "4.8px 12px 4.8px 0",
|
||||
fontSize: "11px",
|
||||
fontWeight: 400,
|
||||
fontFamily: "var(--ll-font-code)",
|
||||
color: "var(--ll-text-primary)",
|
||||
borderBottom: "1px solid var(--ll-border)",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{prop}
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
padding: "4.8px 12px 4.8px 0",
|
||||
fontSize: "11px",
|
||||
fontWeight: 400,
|
||||
fontFamily: "var(--ll-font-code)",
|
||||
color: "var(--ll-text-muted)",
|
||||
borderBottom: "1px solid var(--ll-border)",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{type}
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
padding: "4.8px 12px 4.8px 0",
|
||||
fontSize: "11px",
|
||||
fontWeight: 400,
|
||||
fontFamily: "var(--ll-font-code)",
|
||||
color: "var(--ll-text-muted)",
|
||||
borderBottom: "1px solid var(--ll-border)",
|
||||
}}
|
||||
>
|
||||
{def}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
Page shell — wraps content with layout, TOC, back button, animations
|
||||
========================================================================= */
|
||||
|
||||
export function EditorialPage({
|
||||
toc,
|
||||
logo,
|
||||
children,
|
||||
}: {
|
||||
toc: Array<{ label: string; href: string }>;
|
||||
logo?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="liveline-page relative min-h-screen overflow-x-hidden"
|
||||
style={{
|
||||
background: "var(--ll-bg)",
|
||||
color: "var(--ll-text-primary)",
|
||||
fontFamily: "var(--ll-font-primary)",
|
||||
WebkitFontSmoothing: "antialiased",
|
||||
textRendering: "optimizeLegibility",
|
||||
}}
|
||||
>
|
||||
<BackButton />
|
||||
<TableOfContents items={toc} logo={logo} />
|
||||
|
||||
<div
|
||||
className="mx-auto"
|
||||
style={{ width: "550px", maxWidth: "calc(100% - 2rem)", padding: "0 1rem 6rem" }}
|
||||
>
|
||||
<div style={{ height: "80px" }} />
|
||||
|
||||
<article className="liveline-article flex flex-col gap-[24px]">
|
||||
{children}
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+277
-829
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user