link post fixes

src/components/LinkTeaser/index.astro

@@ -0,0 +1,29 @@
+---
+import PostTitle from '@layouts/Post/Title.astro'
+import styles from './index.module.css'
+import type { CollectionEntry } from 'astro:content'
+import LinkActions from '@layouts/Post/LinkActions.astro'
+
+type Props = {
+  post: CollectionEntry<'articles' | 'links'>
+  hideDate?: boolean
+}
+
+const { post, hideDate } = Astro.props
+const { slug } = post
+const { title, date, updated } = post.data
+const { linkurl } = post.data as CollectionEntry<'links'>['data']
+const { Content } = await post.render()
+---
+
+<article class={styles.post}>
+  <PostTitle
+    title={title}
+    date={hideDate ? undefined : date}
+    updated={updated}
+    linkurl={linkurl}
+    className={styles.title}
+  />
+  <Content />
+  <LinkActions slug={slug} linkurl={linkurl} />
+</article>

src/components/LinkTeaser/index.module.css

@@ -0,0 +1,9 @@
+.post {
+  display: block;
+  margin-top: calc(var(--spacer) * var(--line-height));
+  margin-bottom: calc(var(--spacer) * var(--line-height));
+}
+
+.post + .post {
+  margin-top: calc(var(--spacer) * var(--line-height));
+}

src/layouts/Archive.astro

@@ -5,6 +5,7 @@ import type { CollectionEntry } from 'astro:content'
 import PostTeaser from '@components/PostTeaser/index.astro'
 import Pagination from '@components/Pagination/index.astro'
 import PhotoTeaser from '@components/PhotoTeaser.astro'
+import LinkTeaser from '@components/LinkTeaser/index.astro'
 
 type Props = {
   page: Page<CollectionEntry<'articles' | 'links' | 'photos'>>
@@ -40,6 +41,8 @@ const classes = `posts ${
       page?.data?.map((post) =>
         post.collection === 'photos' ? (
           <PhotoTeaser post={post} />
+        ) : post.collection === 'links' ? (
+          <LinkTeaser post={post} />
         ) : (
           <PostTeaser post={post} />
         )

src/layouts/Base/index.module.css

@@ -67,6 +67,7 @@
 
 .pagetitle {
   font-size: var(--font-size-h3);
+  color: var(--text-color-light);
   margin-top: 0;
   margin-bottom: var(--spacer);
   display: flex;

src/layouts/Post/LinkActions.astro

@@ -14,7 +14,7 @@ const { slug, linkurl } = Astro.props
   <a href={linkurl}>
     Go to source <ExternalLink />
   </a>
-  <a href={slug} rel="tooltip" title="Permalink">
+  <a href={`/${slug}/`} rel="tooltip" title="Permalink">
     <Link />
   </a>
 </div>

src/layouts/Post/Title.module.css

@@ -5,6 +5,7 @@
 
 .titleLink {
   font-size: var(--font-size-h3);
+  margin-bottom: 0;
 }
 
 .titleLink svg {
@@ -24,5 +25,5 @@
   font-family: var(--font-family-base);
   font-size: var(--font-size-small);
   color: var(--text-color-light);
-  margin-bottom: var(--spacer);
+  margin-bottom: calc(var(--spacer) / 2);
 }

src/pages/archive/[page].astro

@@ -1,5 +1,5 @@
 ---
-import { loadAndFormatCollection } from '@lib/astro'
+import { loadAndFormatCollection, sortPosts } from '@lib/astro'
 import type { GetStaticPathsOptions, InferGetStaticPropsType } from 'astro'
 import LayoutArchive from '@layouts/Archive.astro'
 import config from '@config/blog.config'
@@ -9,7 +9,8 @@ type Props = InferGetStaticPropsType<typeof getStaticPaths>
 export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
   const articles = await loadAndFormatCollection('articles')
   const links = await loadAndFormatCollection('links')
-  return paginate([...articles, ...links], { pageSize: config.itemsPerPage })
+  const sorted = sortPosts([...articles, ...links])
+  return paginate(sorted, { pageSize: config.itemsPerPage })
 }
 // All paginated data + posts are passed on the "page" prop
 const { page } = Astro.props as Props