remove toc

This commit is contained in:
Barrett Ruth 2026-01-12 11:19:21 -05:00
parent a19b417d71
commit f3aeeb1b5f
8 changed files with 177 additions and 282 deletions

165
public/styles/common.css Normal file
View file

@ -0,0 +1,165 @@
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-Thin.ttf") format("truetype");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-ThinItalic.ttf") format("truetype");
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-Extralight.ttf") format("truetype");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-ExtralightItalic.ttf") format("truetype");
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-LightItalic.ttf") format("truetype");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-RegularItalic.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-MediumItalic.ttf") format("truetype");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-BoldItalic.ttf") format("truetype");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-Black.ttf") format("truetype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-BlackItalic.ttf") format("truetype");
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Apercu Mono";
src: url("/fonts/apercu-mono/ApercuMonoProLight.ttf") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Apercu Mono";
src: url("/fonts/apercu-mono/ApercuMonoProRegular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Apercu Mono";
src: url("/fonts/apercu-mono/ApercuMonoProMedium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Apercu Mono";
src: url("/fonts/apercu-mono/ApercuMonoProBold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
pre,
code,
pre code,
.astro-code,
code[class*="language-"] {
font-family: "Apercu Mono", monospace !important;
}
html,
body {
font-family: "Signifier", serif;
}
header,
footer {
padding: 30px 20px;
font-size: 1.5em;
display: flex;
align-items: center;
justify-content: space-between;
}

View file

@ -1,165 +1,5 @@
@font-face { header h1 {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-Thin.ttf") format("truetype");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-ThinItalic.ttf") format("truetype");
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-Extralight.ttf") format("truetype");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-ExtralightItalic.ttf") format("truetype");
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-Light.ttf") format("truetype");
font-weight: 300; font-weight: 300;
font-style: normal; font-size: 2em;
font-display: swap; /* letter-spacing: 0.05em; */
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-LightItalic.ttf") format("truetype");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-RegularItalic.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-MediumItalic.ttf") format("truetype");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-BoldItalic.ttf") format("truetype");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-Black.ttf") format("truetype");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Signifier";
src: url("/fonts/signifier/Signifier-BlackItalic.ttf") format("truetype");
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Apercu Mono";
src: url("/fonts/apercu-mono/ApercuMonoProLight.ttf") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Apercu Mono";
src: url("/fonts/apercu-mono/ApercuMonoProRegular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Apercu Mono";
src: url("/fonts/apercu-mono/ApercuMonoProMedium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Apercu Mono";
src: url("/fonts/apercu-mono/ApercuMonoProBold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
pre,
code,
pre code,
.astro-code,
code[class*="language-"] {
font-family: "Apercu Mono", monospace !important;
}
html,
body {
font-family: "Signifier", serif;
}
header,
footer {
padding: 30px 20px;
font-size: 1.5em;
display: flex;
align-items: center;
justify-content: space-between;
} }

View file

@ -1,80 +0,0 @@
---
// Auto-generated TOC from MDX headings - Left sidebar
interface Props {
headings: Array<{
depth: number;
slug: string;
text: string;
}>;
}
const { headings } = Astro.props;
// Filter to only show h1 and h2
const tocHeadings = headings.filter((h) => h.depth <= 2);
---
{
tocHeadings.length > 0 && (
<aside class="toc-sidebar">
<div class="toc-title">contents</div>
<nav class="toc-nav">
{tocHeadings.map((heading) => (
<a
href={`#${heading.slug}`}
class={heading.depth === 1 ? "h1-link" : "h2-link"}
>
{heading.text}
</a>
))}
</nav>
</aside>
)
}
<style>
.toc-sidebar {
width: 100%;
}
.toc-title {
font-weight: normal;
margin-bottom: 1rem;
text-align: left;
font-size: 1.5em;
}
.toc-nav {
display: flex;
flex-direction: column;
gap: 0.3rem;
align-items: flex-start;
margin: 0;
padding: 0;
}
.toc-nav a {
color: var(--text);
text-decoration: none;
line-height: 1.4;
text-align: left;
}
.toc-nav a:hover {
text-decoration: underline;
}
.toc-nav a.h1-link {
padding-left: 0;
}
.toc-nav a.h2-link {
padding-left: 1.5rem;
}
@media (max-width: 1200px) {
.toc-sidebar {
display: none;
}
}
</style>

View file

@ -8,7 +8,6 @@ const base = z.object({
useD3: z.boolean().optional(), useD3: z.boolean().optional(),
scripts: z.array(z.string()).optional(), scripts: z.array(z.string()).optional(),
redirect: z.string().optional(), redirect: z.string().optional(),
showToc: z.boolean().optional(),
}); });
export const collections = { export const collections = {

View file

@ -10,7 +10,7 @@ const { title, description = "barrett ruth's website" } = Astro.props;
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content={description} /> <meta name="description" content={description} />
<link rel="icon" type="image/webp" href="/logo.webp" /> <link rel="icon" type="image/webp" href="/logo.webp" />
<link rel="stylesheet" href="/styles/index.css" /> <link rel="stylesheet" href="/styles/base.css" />
<title>{title}</title> <title>{title}</title>
<slot name="head" /> <slot name="head" />
</head> </head>

View file

@ -1,6 +1,5 @@
--- ---
import BaseLayout from "./BaseLayout.astro"; import BaseLayout from "./BaseLayout.astro";
import TableOfContents from "../components/TableOfContents.astro";
interface Props { interface Props {
frontmatter: { frontmatter: {
@ -11,7 +10,6 @@ interface Props {
useD3?: boolean; useD3?: boolean;
scripts?: string[]; scripts?: string[];
category?: string; category?: string;
showToc?: boolean;
}; };
post?: { post?: {
id?: string; id?: string;
@ -26,13 +24,7 @@ interface Props {
} }
const { frontmatter, headings = [] } = Astro.props as Props; const { frontmatter, headings = [] } = Astro.props as Props;
const { const { title, description, useKatex = false, useD3 = false } = frontmatter;
title,
description,
useKatex = false,
useD3 = false,
showToc = false,
} = frontmatter;
let documentTitle = title; let documentTitle = title;
--- ---
@ -54,14 +46,6 @@ let documentTitle = title;
</Fragment> </Fragment>
<Fragment> <Fragment>
{
showToc && (
<aside>
<TableOfContents headings={headings} />
</aside>
)
}
<div> <div>
<header> <header>
<h1>{title}</h1> <h1>{title}</h1>

View file

@ -2,24 +2,8 @@
import BaseLayout from "../layouts/BaseLayout.astro"; import BaseLayout from "../layouts/BaseLayout.astro";
--- ---
<BaseLayout title="404 - Not Found"> <BaseLayout title="404 - not found">
<div class="not-found-container"> <div>
<h1>404</h1> <h1>404 - not found</h1>
</div> </div>
</BaseLayout> </BaseLayout>
<style>
.not-found-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
min-height: 60vh;
}
h1 {
font-size: 5em;
font-weight: normal;
margin: 0;
}
</style>

View file

@ -3,4 +3,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
const title = "barrett ruth"; const title = "barrett ruth";
--- ---
<BaseLayout title={title}> henlo </BaseLayout> <BaseLayout title={title}
><em>barrett</em> ruth
<script src="index.css" is:inline></script>
</BaseLayout>