Feat: Add Tutorials / Collections

astro.config.mjs

@@ -1,5 +1,6 @@
 import { defineConfig } from 'astro/config'
 import mdx from '@astrojs/mdx'
+// import astroFont from '@gamesome/astro-font'
 import icon from 'astro-icon'
 
 import { remarkModifiedTime } from './remark-plugins/remark-modified-time.mjs'
@@ -30,7 +31,17 @@ export default defineConfig({
     remarkPlugins: [remarkDeruntify, remarkDefinitionList, remarkModifiedTime],
     rehypePlugins: [
       rehypeSlug,
-      [rehypeAutoLinkHeadings, { content: [] }],
+      [
+        rehypeAutoLinkHeadings,
+        {
+          content: {
+            type: 'element',
+            tagName: 'span',
+            properties: { className: 'heading-icon' },
+            children: []
+          }
+        }
+      ],
       [rehypeExternalLinks, {}]
     ]
   },
@@ -45,6 +56,27 @@ export default defineConfig({
       },
       gfm: true
     }),
+    // astroFont({
+    //   families: [
+    //     {
+    //       name: 'Open Sans Variable',
+    //       imports: ['@fontsource-variable/open-sans/wdth.css']
+    //     },
+    //     {
+    //       name: 'Domine Variable',
+    //       type: 'sans-serif',
+    //       applyFontFamilyToSelector: ':is(h1, h2, h3, h4)',
+    //       imports: ['@fontsource-variable/open-sans/wdth.css']
+    //     },
+    //     {
+    //       name: 'JetBrains Mono Variable',
+    //       type: 'mono',
+    //       fallbacks: ['Courier New'],
+    //       applyFontFamilyToSelector: 'code',
+    //       imports: ['@fontsource-variable/open-sans/wdth.css']
+    //     }
+    //   ]
+    // }),
     icon({
       include: {
         materialSymbols: ['menu', 'close', 'arrow-upward-rounded'],

src/components/ArticleCard.astro

@@ -0,0 +1,146 @@
+---
+import { Image } from 'astro:assets'
+import FormattedDate from './FormattedDate.astro'
+
+const { article } = Astro.props
+---
+
+<article class:list={['article', { draft: article.data.isDraft }]}>
+  {article.data.isDraft && <div class='draft-banner' />}
+
+  <a href={`/tutorials/${article.slug}/`}>
+    <header>
+      <h3 class='title'>{article.data.title}</h3>
+
+      <FormattedDate date={article.data.pubDate} style='small' />
+    </header>
+
+    <div class='image'>
+      {
+        article.data.heroImage && (
+          <Image
+            src={article.data.heroImage.src}
+            widths={[380, 670, 710]}
+            sizes={`(max-width: 480px) 380px, (max-width: 800) 670px, 710px`}
+            alt={article.data.heroImage.alt}
+          />
+        )
+      }
+    </div>
+
+    <div class='description'>
+      <p>{article.data.description}</p>
+
+      <span class='more'>Weiterlesen</span>
+    </div>
+  </a>
+</article>
+
+<style lang='scss'>
+  @use '../styles/base/mixins';
+
+  .article {
+    @include mixins.media-item('article');
+
+    position: relative;
+
+    a {
+      display: grid;
+      grid-template-areas:
+        'header'
+        'image'
+        'description';
+      color: var(--clr-text);
+      text-decoration: none;
+      transition: box-shadow var(--transition);
+
+      &:hover,
+      &:focus {
+        color: currentColor;
+        text-decoration: none;
+        box-shadow: 0 0.53em 1em -0.5rem rgba(0, 0, 0, 0.2);
+
+        .title,
+        .more {
+          color: var(--clr-primary);
+        }
+
+        .more::after {
+          transform: translateX(0);
+          opacity: 1;
+        }
+
+        .image img {
+          scale: 1.1;
+        }
+      }
+    }
+
+    header {
+      padding: var(--sp);
+      grid-area: header;
+    }
+
+    .title {
+      font-size: 1.3rem;
+      font-family: var(--ff);
+      margin-block: 0 0.5em;
+      transition: all var(--transition);
+    }
+
+    .image {
+      overflow: hidden;
+
+      img {
+        grid-area: image;
+        scale: 1;
+        transition: var(--transition);
+      }
+    }
+
+    .description {
+      font-size: var(--fs-s);
+      padding: var(--sp);
+      grid-area: description;
+    }
+
+    .more {
+      display: inline-flex;
+      align-items: center;
+      transition: all var(--transition);
+
+      &::after {
+        content: '»';
+        margin-inline-start: 1ch;
+        transform: translateX(-5ch);
+        transition: all var(--transition);
+        opacity: 0;
+      }
+    }
+  }
+
+  .draft-banner {
+    position: absolute;
+    inset-block-start: -0.2em;
+    inset-inline-end: 0.5em;
+    z-index: 2;
+    pointer-events: none;
+
+    background-color: var(--clr-warning);
+    color: var(--clr-inverse);
+    box-shadow: 0 0.2em 0.3em -0.2em rgb(0 0 0 / 0.6);
+
+    &::after {
+      display: block;
+      text-align: center;
+      padding-block: 0.4em;
+      padding-inline: 1.7ch;
+      line-height: 1;
+
+      font-size: var(--fs-xs);
+      font-weight: var(--fw-bold);
+
+      content: 'Entwurf';
+    }
+  }
+</style>

src/components/Button.astro

@@ -1,19 +1,43 @@
 ---
 interface Props {
+  type?: 'button' | 'link'
   label: string
-  href: string
+  href?: string
   primary?: boolean
+  small?: boolean
+  listener?: string
 }
 
-const { label, href, primary = false }: Props = Astro.props
+const {
+  type = 'button',
+  label,
+  href,
+  primary = false,
+  small = false,
+  listener
+}: Props = Astro.props
 ---
 
-<a href={href} class={'button ' + (primary ? 'primary' : '')}>
-  {label}
-</a>
+{
+  type === 'link' && href ? (
+    <a href={href} class:list={['button', { primary: primary === true }]}>
+      {label}
+    </a>
+  ) : (
+    <button
+      class:list={['button', { primary: primary }, { small: small }]}
+      data-listener={listener}
+    >
+      {label}
+    </button>
+  )
+}
 
 <style lang='scss'>
-  .button:any-link {
+  .button {
+    all: unset;
+    cursor: pointer;
+
     display: inline-flex;
     align-items: center;
 
@@ -40,6 +64,13 @@ const { label, href, primary = false }: Props = Astro.props
       transform: translateY(-0.1em);
     }
 
+    &.small {
+      font-size: var(--fs-xs);
+      padding-block: 0.3em;
+      padding-inline: var(--sp-xs);
+      line-height: 1;
+    }
+
     &.primary {
       background-color: var(--clr-primary);
       color: var(--clr-inverse);

src/components/Figure.astro

@@ -0,0 +1,19 @@
+---
+import { markdown } from '@astropub/md'
+
+type Props = {
+  caption?: string | boolean
+}
+
+const { caption } = Astro.props
+---
+
+<figure>
+  <slot />
+
+  {
+    caption && typeof caption === 'string' ? (
+      <figcaption>{await markdown(caption)}</figcaption>
+    ) : null
+  }
+</figure>

src/components/FormattedDate.astro

@@ -0,0 +1,24 @@
+---
+interface Props {
+  date: Date
+  style?: string
+}
+
+const { date, style } = Astro.props as Props
+---
+
+<time datetime={date.toISOString()} class={style}>
+  {
+    date.toLocaleDateString('de-DE', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    })
+  }
+</time>
+
+<style>
+  .small {
+    font-size: var(--fs-s);
+  }
+</style>