Separate default body contents into General layout, keep Base

This commit is contained in:
2023-11-27 20:17:58 -06:00
parent 4aeffb978c
commit a7c5debb5c
4 changed files with 75 additions and 55 deletions

View File

@@ -1,60 +1,39 @@
---
import '@styles/global.scss';
import '@styles/fonts.scss';
import Header from '@components/Header.astro';
import { ViewTransitions } from 'astro:transitions';
const repository_url = `https://github.com/${import.meta.env.PUBLIC_VERCEL_GIT_REPO_OWNER}/${import.meta.env.PUBLIC_VERCEL_GIT_REPO_SLUG}`
const build_revision = import.meta.env.PUBLIC_VERCEL_GIT_COMMIT_SHA;
import "@styles/global.scss";
import "@styles/fonts.scss";
import { ViewTransitions } from "astro:transitions";
interface Props {
title?: string;
title?: string;
build_revision?: string;
}
const { title } = Astro.props;
const titleTag = title != undefined ? `${title} | undefined.behavio.rs` : 'undefined.behavio.rs';
const { title: titleProp, build_revision } = Astro.props;
const title =
titleProp != undefined
? `${titleProp} | undefined.behavio.rs`
: "undefined.behavio.rs";
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<meta name="build-commit-id" content={build_revision} />
<title>
{titleTag}
</title>
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link as="font" crossorigin href="/fonts/-cmunrm.woff2" rel="preload">
<link as="font" crossorigin href="/fonts/-cmuntt.woff2" rel="preload">
<link as="font" crossorigin href="/fonts/-cmunti.woff2" rel="preload">
<link as="sitemap" type="application/xml" href="/sitemap-index.xml">
<link href="/feed.xml" rel="alternate" type="application/xml">
<ViewTransitions />
</head>
<body class="flex-col align-middle w-full max-w-full">
<Header className="mt-5 mb-3" />
<nav class="text-center text-xl text-[#808080] [&>a]:text-white [&>a]:underline decoration-white/85 [&>span]:select-none">
<a href="/">~/</a>
<span>:</span>
<a href="https://xevion.dev">~/about/</a>
<span>:</span>
<a href="https://xevion.dev/projects">~/projects/</a>
<span>:</span>
<a href="https://xevion.dev/resume">~/resume/</a>
</nav>
<div class="max-w-screen-lg">
<slot name="default" />
</div>
<p class="text-center">
<a href="/feed.xml">RSS</a>
|
<a href={`${repository_url}/commit/${build_revision}`}>
<span id="commit-id" style={{color: '#' + build_revision.slice(0, 6)}}>#{build_revision.slice(0, 7)}</span>
</a>
</p>
</body>
<!-- <script type="text/javascript">
<head>
<meta charset="utf-8" />
<meta content="width=device-width" name="viewport" />
<meta name="build-commit-id" content={build_revision} />
<title>{title}</title>
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link as="font" crossorigin href="/fonts/-cmunrm.woff2" rel="preload" />
<link as="font" crossorigin href="/fonts/-cmuntt.woff2" rel="preload" />
<link as="font" crossorigin href="/fonts/-cmunti.woff2" rel="preload" />
<link as="sitemap" type="application/xml" href="/sitemap-index.xml" />
<link rel="alternate" type="application/xml" href="/feed.xml" />
<ViewTransitions />
</head>
<body class="flex-col align-middle w-full max-w-full">
<slot />
</body><!-- <script type="text/javascript">
Is all of this too much effort to make the animation play in just the right way?
window.onbeforeunload = function() {
Remember the origin so it can be checked for page reloads
@@ -72,5 +51,4 @@ const titleTag = title != undefined ? `${title} | undefined.behavio.rs` : 'undef
}
</script>
-->
</html>

42
src/layouts/General.astro Normal file
View File

@@ -0,0 +1,42 @@
---
import Base from "@layouts/Base.astro";
import Header from "@components/Header.astro";
const repository_url = `https://github.com/${
import.meta.env.PUBLIC_VERCEL_GIT_REPO_OWNER
}/${import.meta.env.PUBLIC_VERCEL_GIT_REPO_SLUG}`;
const build_revision = import.meta.env.PUBLIC_VERCEL_GIT_COMMIT_SHA;
interface Props {
title?: string;
}
const { title } = Astro.props;
---
<Base title={title}>
<Header className="mt-5 mb-3" />
<nav
class="text-center text-xl text-[#808080] [&>a]:text-white [&>a]:underline decoration-white/85 [&>span]:select-none"
>
<a href="/">~/</a>
<span>:</span>
<a href="https://xevion.dev">~/about/</a>
<span>:</span>
<a href="https://xevion.dev/projects">~/projects/</a>
<span>:</span>
<a href="https://xevion.dev/resume">~/resume/</a>
</nav>
<div class="max-w-screen-lg">
<slot name="default" />
</div>
<p class="text-center">
<a href="/feed.xml">RSS</a>
|
<a href={`${repository_url}/commit/${build_revision}`}>
<span id="commit-id" style={{ color: "#" + build_revision.slice(0, 6) }}
>#{build_revision.slice(0, 7)}</span
>
</a>
</p>
</Base>

View File

@@ -1,5 +1,5 @@
---
import Base from "@layouts/Base.astro";
import General from "@layouts/General.astro";
import { type CollectionEntry } from 'astro:content';
import { format } from "date-fns";
@@ -10,7 +10,7 @@ const { post } = Astro.props;
const { title, pubDate, tags } = post.data;
const tagCount = tags.length;
---
<Base title={title}>
<General title={title}>
<div class="max-w-3xl mx-4">
<h1>
<a href={post.slug}>
@@ -34,4 +34,4 @@ const tagCount = tags.length;
</p>
</div>
<hr />
</Base>
</General>

View File

@@ -1,12 +1,12 @@
---
import { getCollection } from "astro:content";
import Base from "@layouts/Base.astro";
import General from "@layouts/General.astro";
import Summary from "@components/Summary.astro";
const posts = await getCollection("blog");
posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime());
---
<Base>
<General>
{
posts.map((post) => (
<Summary