xevion/utsa-handbook
1
0
Fork 0
mirror of https://github.com/Xevion/utsa-handbook.git synced 2025-12-09 04:09:05 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix headings type issues

Browse Source
This commit is contained in:
Xevion
2024-03-11 00:04:44 -05:00
parent dc74c495c7
commit 163ef97f31
4 changed files with 28 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/TableOfContents.astro
View File

@@ -1,12 +1,17 @@
--- ---
const { headers } = Astro.props; import type { MarkdownHeading } from 'astro';
interface Props {
headings: MarkdownHeading[];
}
const { headings } = Astro.props;
--- ---
<ul class="flex flex-col gap-4 mt-24"> <ul class="flex flex-col gap-4 mt-24">
{ {
headers.map(({ slug, text }) => { headings.map(({ slug, text }) => {
return ( return (
<li class="text-slate-400 hover:text-slate-900"> <li class="text-slate-400 hover:text-slate-f900">
#<a href={`#${slug}`}>{text}</a> #<a href={`#${slug}`}>{text}</a>
</li> </li>
); );

11
src/layouts/Main.astro
View File

@@ -5,10 +5,13 @@ import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro"; import Footer from "@components/Footer.astro";
import Sidebar from "@components/Sidebar.astro"; import Sidebar from "@components/Sidebar.astro";
import TableOfContents from "@components/TableOfContents.astro"; import TableOfContents from "@components/TableOfContents.astro";
import type { MarkdownHeading } from "astro";
type Props = CollectionEntry<"handbook">["data"]; type Props = Pick<CollectionEntry<"handbook">["data"], "title" | "description"> & {
headings: MarkdownHeading[];
};
const { title, description, pubDate, lastModified, headers } = Astro.props; const { title, description, headings } = Astro.props;
const currentPage = new URL(Astro.request.url).pathname; const currentPage = new URL(Astro.request.url).pathname;
--- ---
@@ -29,11 +32,11 @@ const currentPage = new URL(Astro.request.url).pathname;
<slot /> <slot />
</main> </main>
{ {
headers && headers.length > 0 && ( headings && headings.length > 0 && (
<div class="col-span-3 sticky top-0 h-screen flex"> <div class="col-span-3 sticky top-0 h-screen flex">
<nav aria-labelledby="grid-right"> <nav aria-labelledby="grid-right">
<div class="px-8"> <div class="px-8">
<TableOfContents headers={headers} /> <TableOfContents headings={headings} />
</div> </div>
</nav> </nav>
</div> </div>

4
src/pages/[...slug].astro
View File

@@ -14,10 +14,10 @@ type Props = CollectionEntry<'handbook'>;
const isProd = import.meta.env.PROD; const isProd = import.meta.env.PROD;
const {render, data} = Astro.props; const {render, data} = Astro.props;
const {title, lastModified} = data; const {title, lastModified} = data;
const { Content } = await render(); const { Content, headings } = await render();
--- ---
<Main {...data}> <Main {headings} { ...data}>
<h2 class="text-2xl font-semibold mb-2">{title}</h2> <h2 class="text-2xl font-semibold mb-2">{title}</h2>
<!-- lastModified can be undefined in some rare circumstances (usually development only), this might fail in production if something went wrong. --> <!-- lastModified can be undefined in some rare circumstances (usually development only), this might fail in production if something went wrong. -->
<span>{(lastModified ?? (isProd ? null : new Date()))!.toLocaleDateString('en-us', { <span>{(lastModified ?? (isProd ? null : new Date()))!.toLocaleDateString('en-us', {

20
src/pages/index.astro
View File

@@ -1,13 +1,15 @@
--- ---
import BaseHead from '@components/BaseHead.astro'; // import BaseHead from '@components/BaseHead.astro';
import Header from '@components/Header.astro'; // import Header from '@components/Header.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '@/consts'; // import { SITE_TITLE, SITE_DESCRIPTION } from '@/consts';
import { getCollection } from 'astro:content'; // import { getCollection } from 'astro:content';
import Main from '@layouts/Main.astro'; import Main from '@layouts/Main.astro';
import FormattedDate from '@components/FormattedDate.astro'; // import FormattedDate from '@components/FormattedDate.astro';
const posts = (await getCollection('handbook')).sort( // const posts = (await getCollection('handbook')).sort(
(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf() // (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
); // );
--- ---
<Main>asd</Main> <Main title="test" description='test' headings={[]}>
Nothing here yet.
</Main>