reorganized header/footer, added SEO metadata
This commit is contained in:
parent
e8f88106c4
commit
19b306b703
|
@ -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
12
src/components/Header.astro
Normal 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
42
src/components/Metadata.astro
Normal 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" />
|
|
@ -24,27 +24,23 @@ const Nav = () => {
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="my-10 w-fit mx-auto">
|
<nav class="pt-4 w-full flex flex-row justify-around">
|
||||||
<h1 class="text-4xl md:text-6xl font-bold font-display text-center">J. Hunter DeLoche.</h1>
|
<For each={pages}>{
|
||||||
<nav class="pt-4 w-full flex flex-row justify-around">
|
(page, _) =>
|
||||||
<For each={pages}>{
|
<a class={
|
||||||
(page, _) =>
|
(page.path == currentPage() || page.path + "/" == currentPage()) ?
|
||||||
<a class={
|
inactiveClasses + " " + activeClasses :
|
||||||
(page.path == currentPage() || page.path + "/" == currentPage()) ?
|
inactiveClasses
|
||||||
inactiveClasses + " " + activeClasses :
|
}
|
||||||
inactiveClasses
|
href={page.path}
|
||||||
}
|
onClick={() => {
|
||||||
href={page.path}
|
setCurrentPage(page.path);
|
||||||
onClick={() => {
|
}}
|
||||||
console.log("link clicked; setting cur page to " + page.path);
|
>
|
||||||
setCurrentPage(page.path);
|
{page.name}
|
||||||
}}
|
</a>
|
||||||
>
|
}</For>
|
||||||
{page.name}
|
</nav>
|
||||||
</a>
|
|
||||||
}</For>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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,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,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,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>
|
||||||
|
|
|
@ -17,5 +17,8 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
future: {
|
||||||
|
hoverOnlyWhenSupported: true,
|
||||||
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue