Add links to blog posts

This commit is contained in:
Brayd 2024-01-04 18:07:06 +01:00
parent 8588114e98
commit 6738b5c728
Signed by: brayd
SSH Key Fingerprint: SHA256:qfebJ1zYUipSSbdcVk/qygkt0xr4VSzCKk7LXw6DGe0
4 changed files with 84 additions and 72 deletions

View File

@ -31,7 +31,7 @@ const socialLinks: Array<{
---
<div class="flex flex-wrap items-end gap-x-4">
<p>Finde mich bei</p>
<p style="margin-top: 30px;">Finde mich bei</p>
<ul class="flex flex-1 items-center gap-x-2 sm:flex-initial">
{
socialLinks.map(({ link, name, friendlyName, isWebmention }) => (

View File

@ -2,6 +2,7 @@
import { Image } from "astro:assets";
import type { CollectionEntry } from "astro:content";
import FormattedDate from "../FormattedDate.astro";
import SocialList from "../SocialList.astro";
interface Props {
content: CollectionEntry<"post">;
@ -51,37 +52,40 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = {
</div>
{
!!data.tags?.length && (
<div class="mt-3">
<svg
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
class="me-1 inline-block h-6 w-6"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z" />
<path d="M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116" />
<path d="M6 9h-.01" />
</svg>
{data.tags.map((tag, i) => (
<>
<a
class="cactus-link inline-block before:content-['#']"
aria-label={`View more blogs with the tag ${tag}`}
href={`/tags/${tag}/`}
data-pagefind-filter="tag"
>
{tag}
</a>
{i < data.tags.length - 1 && ", "}
</>
))}
</div>
<>
<div class="mt-3">
<svg
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
class="me-1 inline-block h-6 w-6"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z" />
<path d="M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116" />
<path d="M6 9h-.01" />
</svg>
{data.tags.map((tag, i) => (
<>
<a
class="cactus-link inline-block before:content-['#']"
aria-label={`View more blogs with the tag ${tag}`}
href={`/tags/${tag}/`}
data-pagefind-filter="tag"
>
{tag}
</a>
{i < data.tags.length - 1 && ", "}
</>
))}
</div>
<SocialList />
</>
)
}

View File

@ -5,6 +5,8 @@ import PageLayout from "@/layouts/Base";
import PostPreview from "@/components/blog/PostPreview";
import Pagination from "@/components/Paginator";
import { getAllPosts, getUniqueTags, sortMDByDate } from "@/utils";
import Donate from "@/components/Donate";
import SocialList from "@/components/SocialList";
export const getStaticPaths = (async ({ paginate }) => {
const allPosts = await getAllPosts();
@ -58,45 +60,49 @@ const paginationProps = {
</section>
{
!!uniqueTags.length && (
<aside>
<h2 class="mb-4 flex items-center text-lg font-semibold">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z" />
<path d="M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116" />
<path d="M6 9h-.01" />
</svg>
Tags
</h2>
<ul class="flex flex-wrap gap-2 text-bgColor">
{uniqueTags.map((tag) => (
<li>
<a
class="flex items-center justify-center rounded-lg bg-accent p-1"
href={`/tags/${tag}/`}
aria-label={`View all posts with the tag: ${tag}`}
>
{tag}
</a>
</li>
))}
</ul>
<span class="mt-4 block sm:text-end">
<a class="sm:hover:text-accent" href="/tags/" aria-label="View all blog categories">
View all →
</a>
</span>
</aside>
<>
<aside>
<h2 class="mb-4 flex items-center text-lg font-semibold">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z" />
<path d="M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116" />
<path d="M6 9h-.01" />
</svg>
Tags
</h2>
<ul class="flex flex-wrap gap-2 text-bgColor">
{uniqueTags.map((tag) => (
<li>
<a
class="flex items-center justify-center rounded-lg bg-accent p-1"
href={`/tags/${tag}/`}
aria-label={`View all posts with the tag: ${tag}`}
>
{tag}
</a>
</li>
))}
</ul>
<span class="mt-4 block sm:text-end">
<a class="sm:hover:text-accent" href="/tags/" aria-label="View all blog categories">
View all →
</a>
</span>
</aside>
<SocialList />
<Donate />
</>
)
}
</div>

View File

@ -2,6 +2,7 @@
import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
import PostLayout from "@/layouts/BlogPost";
import { getAllPosts } from "@/utils";
import Donate from "@/components/Donate";
export const getStaticPaths = (async () => {
const blogEntries = await getAllPosts();
@ -19,4 +20,5 @@ const { Content } = await entry.render();
<PostLayout post={entry}>
<Content />
<Donate />
</PostLayout>