flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/blog-template. minimalistic astro blog template
flo-bit.dev/blog-template/
astro
blog
template
hide buttons if js disabled, move background images
author
Florian
date
(Feb 21, 2025, 4:56 AM +0100)
commit
ec24b6ab
ec24b6aba20537552f6808e365ae424153baf62a
parent
8d785e01
8d785e0196acf49b574610a5806176a6177faffb
+37
-19
src/assets/background.png
src/assets/backgrounds/background.png
src/assets/background.png
src/assets/backgrounds/background.png
src/assets/backgrounds/blog-placeholder-1.jpg
src/assets/backgrounds/blog-placeholder-1.jpg
This is a binary file and will not be displayed.
src/assets/blog-placeholder-2.jpg
src/assets/backgrounds/blog-placeholder-2.jpg
src/assets/blog-placeholder-2.jpg
src/assets/backgrounds/blog-placeholder-2.jpg
src/assets/blog-placeholder-3.jpg
src/assets/backgrounds/blog-placeholder-3.jpg
src/assets/blog-placeholder-3.jpg
src/assets/backgrounds/blog-placeholder-3.jpg
src/assets/blog-placeholder-4.jpg
src/assets/backgrounds/blog-placeholder-4.jpg
src/assets/blog-placeholder-4.jpg
src/assets/backgrounds/blog-placeholder-4.jpg
+2
-2
src/components/HeroImage.astro
+2
-2
src/components/HeroImage.astro
···
3
3
4
4
const { image } = Astro.props;
5
5
const images = import.meta.glob<{ default: ImageMetadata }>(
6
-
"/src/assets/*.{jpeg,jpg,png,gif}"
6
+
"/src/assets/**/*.{jpeg,jpg,png,gif}"
7
7
);
8
8
9
9
// replace ../.. with src in image
···
11
11
12
12
if (!images[replacedImage])
13
13
throw new Error(
14
-
`"${replacedImage}" does not exist in glob: "src/assets/*.{jpeg,jpg,png,gif}"`
14
+
`"${replacedImage}" does not exist in glob: "src/assets/**/*.{jpeg,jpg,png,gif}"`
15
15
);
16
16
---
17
17
+9
-1
src/components/ThemeToggle.astro
+9
-1
src/components/ThemeToggle.astro
···
9
9
10
10
<button
11
11
class={cn(
12
-
"flex items-center justify-center text-base-950 hover:text-base-600 dark:text-base-50 dark:hover:text-base-400",
12
+
"theme-toggle flex items-center justify-center text-base-950 hover:text-base-600 dark:text-base-50 dark:hover:text-base-400",
13
13
className
14
14
)}
15
15
data-theme-toggle
···
53
53
></path>
54
54
</svg>
55
55
</button>
56
+
57
+
<noscript>
58
+
<style>
59
+
.theme-toggle {
60
+
display: none;
61
+
}
62
+
</style>
63
+
</noscript>
56
64
57
65
<script>
58
66
(() => {
+1
-1
src/components/search/CommandPalette.svelte
+1
-1
src/components/search/CommandPalette.svelte
+10
src/components/search/Search.svelte
+10
src/components/search/Search.svelte
+2
-2
src/content/blog/adding-content.mdx
+2
-2
src/content/blog/adding-content.mdx
···
3
3
description: "Learn how to add content to your blog directly in the code"
4
4
pubDate: "Oct 24 2024"
5
5
published: true
6
-
heroImage: "/src/assets/blog-placeholder-4.jpg"
6
+
heroImage: "/src/assets/backgrounds/blog-placeholder-4.jpg"
7
7
tags: ["setup", "markdown"]
8
8
---
9
9
···
14
14
title: "My first blog post"
15
15
description: "This is my first blog post"
16
16
pubDate: "Oct 24 2024"
17
-
heroImage: "../../assets/blog-placeholder-4.jpg"
17
+
heroImage: "/src/assets/backgrounds/blog-placeholder-4.jpg"
18
18
tags: ["first", "blog"]
19
19
---
20
20
```
+1
-1
src/content/blog/how-to-use.mdx
+1
-1
src/content/blog/how-to-use.mdx
···
3
3
description: "Learn how to use this blog template with github pages (for free, with no coding required)"
4
4
pubDate: "Oct 26 2024"
5
5
published: true
6
-
heroImage: "/src/assets/blog-placeholder-2.jpg"
6
+
heroImage: "/src/assets/backgrounds/blog-placeholder-2.jpg"
7
7
tags: ["setup"]
8
8
---
9
9
+1
-1
src/content/blog/likes-via-bluesky.mdx
+1
-1
src/content/blog/likes-via-bluesky.mdx
···
3
3
description: "how to show likes on your blog posts using bluesky"
4
4
pubDate: "Nov 22 2024"
5
5
published: true
6
-
heroImage: "/src/assets/blog-placeholder-3.jpg"
6
+
heroImage: "/src/assets/backgrounds/blog-placeholder-3.jpg"
7
7
tags: ["setup", "bluesky"]
8
8
disableComments: false
9
9
---
+4
-4
src/content/blog/markdown-style-guide.mdx
+4
-4
src/content/blog/markdown-style-guide.mdx
···
4
4
description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro."
5
5
pubDate: "Jun 19 2024"
6
6
published: true
7
-
heroImage: "/src/assets/blog-placeholder-1.jpg"
7
+
heroImage: "/src/assets/backgrounds/blog-placeholder-1.jpg"
8
8
tags:
9
9
- markdown
10
10
---
···
41
41
42
42
```
43
43
44
-
It's recommended to put all images in the `src/assets/` directory. and use relative path to the image, eg. for `/src/assets/blog-placeholder-1.jpg`
44
+
It's recommended to put all images in the `src/assets/` directory. and use relative path to the image, eg. for `/src/assets/backgrounds/blog-placeholder-1.jpg`
45
45
46
46
```markdown
47
-
47
+
48
48
```
49
49
50
50
### Output
51
51
52
-
52
+
53
53
54
54
## Blockquotes
55
55
+2
-2
src/content/blog/post-options.mdx
+2
-2
src/content/blog/post-options.mdx
···
3
3
description: "Learn how to configure a post"
4
4
pubDate: "Oct 23 2024"
5
5
published: true
6
-
heroImage: "/src/assets/blog-placeholder-3.jpg"
6
+
heroImage: "/src/assets/backgrounds/blog-placeholder-3.jpg"
7
7
tags: ["setup"]
8
8
---
9
9
···
54
54
- path to the hero image, image _has to be_ in /src/assets folder and _has to start_ with `/src/assets/` or `../../assets/`
55
55
56
56
```yml
57
-
heroImage: "../../assets/blog-placeholder-4.jpg"
57
+
heroImage: "../../assets/backgrounds/blog-placeholder-4.jpg"
58
58
```
59
59
60
60
### tags (optional)
+1
-1
src/content/blog/showing-code.mdx
+1
-1
src/content/blog/showing-code.mdx
+1
-1
src/content/blog/showing-embeds.mdx
+1
-1
src/content/blog/showing-embeds.mdx
+1
-1
src/pages/open-graph/[...route].ts
+1
-1
src/pages/open-graph/[...route].ts
+2
-2
src/pages/posts/[...slug].astro
+2
-2
src/pages/posts/[...slug].astro
···
23
23
const { Content } = await post.render();
24
24
25
25
const images = import.meta.glob<{ default: ImageMetadata }>(
26
-
"/src/assets/*.{jpeg,jpg,png,gif}"
26
+
"/src/assets/**/*.{jpeg,jpg,png,gif}"
27
27
);
28
28
const replacedHero = post.data.heroImage?.replace("../..", "/src");
29
29
if (replacedHero && !images[replacedHero])
30
30
throw new Error(
31
-
`"${post.data.heroImage}" does not exist in glob: "src/assets/*.{jpeg,jpg,png,gif}"`
31
+
`"${post.data.heroImage}" does not exist in glob: "src/assets/**/*.{jpeg,jpg,png,gif}"`
32
32
);
33
33
---
34
34