diff --git a/src/components/Button.astro b/src/components/Button.astro new file mode 100644 index 0000000..d6a950e --- /dev/null +++ b/src/components/Button.astro @@ -0,0 +1,26 @@ +--- +interface Props { + href?: string; + variant?: "text" | "icon"; + title?: string; + class?: string; +} + +const { href, variant = "text", title, class: className = "" } = Astro.props; + +const baseClasses = + "border-transparent inline-block border-b-2 p-2 cursor-pointer hover:border-neutral-300 hover:bg-neutral-100 hover:dark:border-neutral-600 hover:dark:bg-neutral-700"; +const classes = `${baseClasses} ${variant === "icon" && href ? "inline-grid place-content-center" : ""} ${className}`; +--- + +{ + href ? ( + + + + ) : ( + + ) +} diff --git a/src/components/Header.astro b/src/components/Header.astro index f3b4f9f..bd9b6a3 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,5 +1,6 @@ --- import Date from "./Date.astro"; +import Icon from "./Icon.astro"; interface Props { title: string; @@ -29,15 +30,7 @@ const { title, pubDate, modDate, slug } = Astro.props; href={`https://github.com/thiloho/thiloho.github.io/edit/main/src/content/blog/${slug}/index.md`} class="inline-flex items-center gap-1 text-blue-800 hover:no-underline dark:text-blue-300" > - - - - + Edit this page diff --git a/src/components/Icon.astro b/src/components/Icon.astro new file mode 100644 index 0000000..e9aa90d --- /dev/null +++ b/src/components/Icon.astro @@ -0,0 +1,25 @@ +--- +interface Props { + name: "edit" | "rss" | "sun" | "moon" | "book"; + class?: string; +} + +const { name, class: className = "" } = Astro.props; + +const icons = { + edit: '', + rss: '', + sun: '', + moon: '', + book: '', +}; +--- + + diff --git a/src/components/Nav.astro b/src/components/Nav.astro index e284432..4807ad2 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -1,5 +1,7 @@ --- import Logo from "../content/TH.svg"; +import Icon from "./Icon.astro"; +import Button from "./Button.astro"; const routes = ["blog", "tracks"]; --- @@ -14,66 +16,21 @@ const routes = ["blog", "tracks"];
{ routes.map((route) => ( - + )) } - - - - - - - - + +
diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro new file mode 100644 index 0000000..49a06fe --- /dev/null +++ b/src/components/TableOfContents.astro @@ -0,0 +1,49 @@ +--- +import Icon from "./Icon.astro"; +import type { MarkdownHeading } from "astro"; + +interface Props { + headings: MarkdownHeading[]; +} + +const { headings } = Astro.props; +--- + +
+ + + +
+

+ Table of Contents +

+
    + { + headings.length ? ( + headings + .filter(({ depth }) => depth === 2) + .map((heading) => ( +
  • + + {heading.text} + +
    • + )) + ) : ( +

    + No headings to generate entries for yet +

    + ) + } +
+
+
diff --git a/src/components/Track.astro b/src/components/Track.astro new file mode 100644 index 0000000..615a91c --- /dev/null +++ b/src/components/Track.astro @@ -0,0 +1,28 @@ +--- +import { Image } from "astro:assets"; + +interface Props { + title: string; + artist: string; + album: string; + youtubeLink: string; + cover: any; +} + +const { title, artist, album, youtubeLink, cover } = Astro.props; +--- + +
+ + {`Cover + +
+

{title}

+

{artist}

+

{album}

+
+
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro index cefeedf..5991616 100644 --- a/src/pages/blog/[slug].astro +++ b/src/pages/blog/[slug].astro @@ -1,6 +1,7 @@ --- import PageLayout from "../../layouts/PageLayout.astro"; import { getCollection, getEntry, render } from "astro:content"; +import TableOfContents from "../../components/TableOfContents.astro"; export const getStaticPaths = async () => { const allArticles = await getCollection("blog"); @@ -27,53 +28,7 @@ const { Content, headings } = await render(article); modDate={article.data.modDate} {slug} > -
- - - - - -
-

- Table of Contents -

-
    - { - headings.length ? ( - headings - .filter(({ depth }) => depth === 2) - .map((heading) => ( -
  • - - {heading.text} - -
    • - )) - ) : ( -

    - No headings to generate entries for yet -

    - ) - } -
-
-
+ diff --git a/src/pages/tracks.astro b/src/pages/tracks.astro index 9de9518..335113c 100644 --- a/src/pages/tracks.astro +++ b/src/pages/tracks.astro @@ -2,6 +2,7 @@ import PageLayout from "../layouts/PageLayout.astro"; import { Image } from "astro:assets"; import { getCollection } from "astro:content"; +import Track from "../components/Track.astro"; const tracks = await getCollection("tracks"); --- @@ -20,20 +21,13 @@ const tracks = await getCollection("tracks"); > { tracks.map((track) => ( -
- - {`Cover - -
-

{track.data.title}

-

{track.data.artist}

-

{track.data.album}

-
-
+ )) }