Complete a blog tutorial
This commit is contained in:
parent
a14cb236e3
commit
4375b7c2e4
26 changed files with 2489 additions and 538 deletions
25
src/layouts/BaseLayout.astro
Normal file
25
src/layouts/BaseLayout.astro
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
---
|
||||
import Header from "../components/Header.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import "../styles/global.css";
|
||||
const { pageTitle } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{pageTitle}</title>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<h1>{pageTitle}</h1>
|
||||
<slot />
|
||||
<Footer />
|
||||
<script>
|
||||
import "../scripts/menu.js";
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
41
src/layouts/MarkdownPostLayout.astro
Normal file
41
src/layouts/MarkdownPostLayout.astro
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
---
|
||||
import BaseLayout from "./BaseLayout.astro";
|
||||
const { frontmatter } = Astro.props;
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle={frontmatter.title}>
|
||||
<p>{frontmatter.pubDate.toLocaleDateString()}</p>
|
||||
<p><em>{frontmatter.description}</em></p>
|
||||
<p>Written by: {frontmatter.author}</p>
|
||||
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
|
||||
<div class="tags">
|
||||
{
|
||||
frontmatter.tags.map((tag: string) => (
|
||||
<p class="tag">
|
||||
<a href={`/tags/${tag}`}>{tag}</a>
|
||||
</p>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<slot />
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
a {
|
||||
color: #00539f;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin: 0.25em;
|
||||
border: dotted 1px #a1a1a1;
|
||||
border-radius: 0.5em;
|
||||
padding: 0.5em 1em;
|
||||
font-size: 1.15em;
|
||||
background-color: #f8fcfd;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue