noah/jhunterdeloche.com
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

reorganized header/footer, added SEO metadata

Browse source
This commit is contained in:
Noah Swerhun 2024-04-02 20:35:34 -05:00
parent e8f88106c4
commit 19b306b703
9 changed files with 90 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Footer.astro
View file

@ -2,11 +2,11 @@
--- ---
<div class="font-thin text-sm flex flex-col items-center my-10"> <footer class="font-thin text-sm flex flex-col items-center my-10">
<div class="font-display"> <div class="font-display">
Copyright (C) {new Date().getFullYear().toString()} James Hunter Deloche. Copyright (C) {new Date().getFullYear().toString()} James Hunter Deloche.
</div> </div>
<!-- <a class="underline" href="https://git.noahsw.xyz/noah/jhunterdeloche.com" --> <!-- <a class="underline" href="https://git.noahsw.xyz/noah/jhunterdeloche.com" -->
<!-- >View the Source</a --> <!-- >View the Source</a -->
<!-- > --> <!-- > -->
</div> </footer>

12
src/components/Header.astro Normal file
View file

@ -0,0 +1,12 @@
---
import Nav from "../components/Nav.tsx";
---
<header class="my-10 w-fit mx-auto">
<h1 class="text-4xl md:text-6xl font-bold font-display text-center">
J. Hunter DeLoche.
</h1>
<div transition:persist>
<Nav client:load />
</div>
</header>

42
src/components/Metadata.astro Normal file
View file

@ -0,0 +1,42 @@
---
interface Props {
title: string;
description: string;
}
const domain = "jhunterdeloche.com";
const author = "J. Hunter DeLoche";
const site_name = "J. Hunter DeLoche's Website";
const image_link = "";
const image_desc = "";
const { title, description }: Props = Astro.props;
---
<meta name="robots" content="index, follow" />
<meta name="description" content={description} />
<meta name="author" content={author} />
<meta property="og:site_name" content={site_name} />
<meta name="twitter:domain" property="twitter:domain" content={domain} />
<meta name="og:title" property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta
name="twitter:description"
property="twitter:description"
content={description}
/>
<meta name="og:image" content={image_link} />
<meta property="twitter:card" content={image_link} />
<meta
name="twitter:image:src"
property="twitter:image:src"
content={image_link}
/>
<meta name="twitter:image" property="twitter:image" content={image_link} />
<meta name="og:image:alt" property="og:image:alt" content={image_desc} />
<meta property="og:url" content={domain} />
<meta property="og:type" content="website" />

4
src/components/Nav.tsx
View file

@ -24,8 +24,6 @@ const Nav = () => {
return ( return (
<div class="my-10 w-fit mx-auto">
<h1 class="text-4xl md:text-6xl font-bold font-display text-center">J. Hunter DeLoche.</h1>
<nav class="pt-4 w-full flex flex-row justify-around"> <nav class="pt-4 w-full flex flex-row justify-around">
<For each={pages}>{ <For each={pages}>{
(page, _) => (page, _) =>
@ -36,7 +34,6 @@ const Nav = () => {
} }
href={page.path} href={page.path}
onClick={() => { onClick={() => {
console.log("link clicked; setting cur page to " + page.path);
setCurrentPage(page.path); setCurrentPage(page.path);
}} }}
> >
@ -44,7 +41,6 @@ const Nav = () => {
</a> </a>
}</For> }</For>
</nav> </nav>
</div>
); );
}; };

19
src/layouts/Layout.astro
View file

@ -1,42 +1,43 @@
--- ---
import Nav from "../components/Nav.tsx";
import Footer from "../components/Footer.astro"; import Footer from "../components/Footer.astro";
import Header from "../components/Header.astro";
import Metadata from "../components/Metadata.astro";
import { ViewTransitions } from "astro:transitions"; import { ViewTransitions } from "astro:transitions";
interface Props { interface Props {
title: string; title: string;
description: string;
} }
const { title } = Astro.props; const { title, description }: Props = Astro.props;
--- ---
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<Metadata title={title} description={description} />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="preconnect" href="https://fonts.bunny.net" /> <link rel="preconnect" href="https://fonts.bunny.net" />
<link <link
href="https://fonts.bunny.net/css?family=kanit:200,300|old-standard-tt:400,700" href="https://fonts.bunny.net/css?family=kanit:200,300|old-standard-tt:400,700"
rel="stylesheet" rel="stylesheet"
/> />
<meta name="generator" content={Astro.generator} />
<title>{title}</title> <title>{title}</title>
<ViewTransitions /> <ViewTransitions />
</head> </head>
<body class="font-body bg-background text-foreground"> <body class="font-body bg-background text-foreground">
<div class="w-11/12 md:w-2/3 mx-auto"> <div class="w-11/12 md:w-2/3 mx-auto">
<header transition:persist> <Header />
<Nav client:load />
</header>
<main transition:animate="fade"> <main transition:animate="fade">
<slot /> <slot />
</main> </main>
<footer>
<Footer /> <Footer />
</footer>
</div> </div>
</body> </body>
</html> </html>

2
src/pages/index.astro
View file

@ -2,6 +2,6 @@
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
--- ---
<Layout title="J. Hunter DeLoche | About"> <Layout title="J. Hunter DeLoche | About" description="about">
<div class="">This is the about page</div> <div class="">This is the about page</div>
</Layout> </Layout>

2
src/pages/music.astro
View file

@ -2,6 +2,6 @@
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
--- ---
<Layout title="J. Hunter DeLoche | Music"> <Layout title="J. Hunter DeLoche | Music" description="music">
<div class="">this is the music page</div> <div class="">this is the music page</div>
</Layout> </Layout>

2
src/pages/writing.astro
View file

@ -2,6 +2,6 @@
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
--- ---
<Layout title="J. Hunter DeLoche | Writing"> <Layout title="J. Hunter DeLoche | Writing" description="writing">
<div class="">This is the writing page</div> <div class="">This is the writing page</div>
</Layout> </Layout>

3
tailwind.config.mjs
View file

@ -17,5 +17,8 @@ export default {
}, },
}, },
}, },
future: {
hoverOnlyWhenSupported: true,
},
plugins: [], plugins: [],
} }