feat: Add sidebar

macx · Jun 1, 2024 · 3618ed2 · 3618ed2
1 parent 4b25ae2
commit 3618ed2
Showing 7 changed files with 132 additions and 10 deletions.
diff --git a/src/components/ArticleCard.astro b/src/components/ArticleCard.astro
@@ -153,6 +153,42 @@ if (!images[imagePath]) {
       }
     }
 
+    @container aside (width < 25em) {
+      &:first-child {
+        border-block-end-width: 0;
+        border-end-end-radius: 0;
+        border-end-start-radius: 0;
+      }
+
+      &:not(:last-child):not(:first-child) {
+        border-radius: 0;
+        // background-color: red;
+      }
+
+      &:last-child {
+        border-block-start-width: 0;
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+      }
+
+      header {
+        order: 2;
+      }
+
+      .title {
+        font-size: 1rem;
+      }
+
+      .image {
+        order: 1;
+      }
+
+      .description {
+        display: none;
+        padding-block-start: 0;
+      }
+    }
+
     @container article-card (width < 20em) {
       .title {
         min-height: 3lh;

diff --git a/src/components/Aside.astro b/src/components/Aside.astro
@@ -0,0 +1,28 @@
+---
+const { tutorials } = Astro.props
+
+import LatestTutorials from './LatestTutorials.astro'
+---
+
+<aside class='articles'>
+  {tutorials && <LatestTutorials max={tutorials} />}
+</aside>
+
+<style>
+  aside {
+    display: block;
+    flex: 1 0 15rem;
+
+    h2 {
+      font-size: var(--fs);
+      font-weight: var(--fw-bold);
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      margin-block: var(--sp-l) var(--sp-m);
+
+      &:first-child {
+        margin-block-start: 0;
+      }
+    }
+  }
+</style>
diff --git a/src/components/LatestTutorials.astro b/src/components/LatestTutorials.astro
@@ -0,0 +1,33 @@
+---
+import { getCollection } from 'astro:content'
+import ArticleCard from './ArticleCard.astro'
+import Button from '@components/Button.astro'
+
+const { max = 3 } = Astro.props
+
+const allTutorials = await getCollection('tutorials', ({ data }) => {
+  return import.meta.env.PROD ? data.isDraft !== true : true
+})
+
+const filteredTutorials = allTutorials
+  .sort(
+    (a, b) =>
+      new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime()
+  )
+  .slice(0, max)
+---
+
+<h2>Tutorials</h2>
+
+<div class='l-articles'>
+  {filteredTutorials.map((article) => <ArticleCard article={article} />)}
+
+  <div>
+    <Button
+      type='link'
+      label='Alle Tutorials'
+      href='/tutorials'
+      primary={false}
+    />
+  </div>
+</div>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -4,13 +4,16 @@ import '../styles/main.scss'
 import Header from '@components/Header.astro'
 import Footer from '@components/Footer.astro'
 import TableOfContent from '@components/TableOfContents.astro'
+import Aside from '@components/Aside.astro'
 import Metadata from '@components/Metadata.astro'
 
 type Layout = 'wide' | 'standard'
 
 const { headings, layout = 'standard' as Layout, redirect } = Astro.props
-const { title, description, pubDate, toc, cover, ogType } =
+const { title, description, pubDate, toc, aside, cover, ogType } =
   Astro.props.frontmatter || Astro.props
+
+const asideConfig = aside ? aside : false
 ---
 
 <!doctype html>
@@ -29,12 +32,13 @@ const { title, description, pubDate, toc, cover, ogType } =
     <Header />
 
     <main id='main'>
-      <div class='stage'>
+      <div class:list={['stage', { 'with-articles': asideConfig }]}>
         <div class:list={['content', { wide: layout === 'wide' }]}>
           <slot />
         </div>
 
-        {toc && <TableOfContent headings={headings} />}
+        {toc && headings && <TableOfContent headings={headings} />}
+        {asideConfig && <Aside tutorials={asideConfig.tutorials} />}
       </div>
 
       <slot name='page-footer' />

diff --git a/src/pages/index.mdx b/src/pages/index.mdx
@@ -3,6 +3,7 @@ layout: ../layouts/BaseLayout.astro
 title: 'Dax Seminar'
 description: 'Das Seminar GT 1191 vermittelt dir die Grundlagen für die Erstellung von responsiven Websites mit kurzen Ladezeiten und gutem UI/UX.'
 toc: false
+aside: { tutorials: 3 }
 studipLink: 'https://studip.hawk.de/dispatch.php/course/details?sem_id=fc760068e7bca04db0eb188955db45f1'
 ---
 

diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
@@ -1,4 +1,4 @@
-@use './mixins';
+@use './mixins' as mx;
 
 *,
 *::before,
@@ -12,7 +12,7 @@ html {
   scroll-behavior: smooth;
   scroll-padding-top: calc(var(--header-height) + var(--sp));
 
-  @include mixins.respond('m') {
+  @include mx.respond('m') {
     scroll-padding-top: calc(var(--header-height) + var(--sp-l));
   }
 }
@@ -80,6 +80,17 @@ main {
     display: flex;
     flex-direction: column;
     gap: calc(var(--sp-content) + var(--sp));
+
+    &.with-articles {
+      .content {
+        margin-inline: auto;
+        order: 1;
+      }
+
+      .articles {
+        order: 2;
+      }
+    }
   }
 
   .content {
@@ -91,13 +102,17 @@ main {
     }
   }
 
+  aside {
+    container: aside / inline-size;
+  }
+
   &:not(:has(aside)) {
     .content {
       margin-inline: auto;
     }
   }
 
-  @include mixins.respond('l', 'to') {
+  @include mx.respond('l', 'to') {
     &:has(.toc-list.hidden-l) {
       gap: var(--sp);
     }
@@ -111,7 +126,7 @@ main {
     }
   }
 
-  @include mixins.respond('l') {
+  @include mx.respond('l') {
     .stage {
       flex-direction: row;
       justify-content: space-between;
@@ -127,4 +142,12 @@ main {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: var(--sp-content);
+
+  @include mx.respond('l') {
+    .with-articles & {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sp);
+    }
+  }
 }
diff --git a/src/styles/components/_content.scss b/src/styles/components/_content.scss
@@ -154,7 +154,4 @@
     margin-block: var(--sp-content);
     border-color: var(--clr-line);
   }
-
-  @inlcude mx.respond('m') {
-  }
 }