public/img/icons/backarrow.png
public/img/icons/backarrow.png
This is a binary file and will not be displayed.
public/img/icons/home.png
public/img/icons/home.png
This is a binary file and will not be displayed.
+32
src/components/Toolbar.astro
+32
src/components/Toolbar.astro
···
···
1
+
---
2
+
const { backlink = "/home" } = Astro.props;
3
+
---
4
+
5
+
<div id="toolbar" class="flex">
6
+
<a href={backlink}>
7
+
<img class="center" src="/img/icons/backarrow.png" alt="return" />
8
+
</a>
9
+
<a href="/home">
10
+
<img class="center" src="/img/icons/home.png" alt="home" />
11
+
</a>
12
+
</div>
13
+
14
+
<style>
15
+
#toolbar {
16
+
justify-content: space-between;
17
+
position: sticky;
18
+
top: 0;
19
+
margin-bottom: 13px;
20
+
}
21
+
22
+
#toolbar a {
23
+
color: var(--white);
24
+
background-color: var(--black);
25
+
border: 10px double;
26
+
padding: 6px;
27
+
}
28
+
29
+
#toolbar img {
30
+
display: block;
31
+
}
32
+
</style>
+2
src/pages/blog/[slug].astro
+2
src/pages/blog/[slug].astro
···
1
---
2
import { getCollection, render } from "astro:content";
3
import Base from "../../components/Base.astro";
4
import "../../styles/main.css";
5
6
export async function getStaticPaths() {
···
22
type: "article",
23
}}
24
>
25
<article class="bwcontainer">
26
<header class="bwbox center">
27
<h1>{post.data.title}</h1>
···
1
---
2
import { getCollection, render } from "astro:content";
3
import Base from "../../components/Base.astro";
4
+
import Toolbar from "../../components/Toolbar.astro";
5
import "../../styles/main.css";
6
7
export async function getStaticPaths() {
···
23
type: "article",
24
}}
25
>
26
+
<Toolbar backlink="/blog" />
27
<article class="bwcontainer">
28
<header class="bwbox center">
29
<h1>{post.data.title}</h1>