related posts tweaks

content/photos/2014-04-26-ai-weiwei-stools/index.md

@@ -5,6 +5,7 @@ author: Matthias Kretschmann
 ---
 
 Ai Weiwei - Evidence, Stools at Martin Gropius Bau
+
 Processed with VSCOcam with b2 preset
 
 [flickr](https://www.flickr.com/photos/krema/14016811365/) | [EyeEm](http://www.eyeem.com/p/35839008)

content/photos/2021-11-26-forever-bicycles/index.md

@@ -1,7 +1,7 @@
 ---
 date: 2021-11-26T15:32:28.000Z
 
-title: Forever Bicycles
+title: Ai Weiwei, Forever Bicycles
 image: ./2021-11-26-forever-bicycles.jpg
 ---
 

content/photos/2021-11-26-law-of-the-journey/index.md

@@ -1,7 +1,7 @@
 ---
 date: 2021-11-26T16:12:03.000Z
 
-title: Law of the Journey
+title: Ai Weiwei, Law of the Journey
 image: ./2021-11-26-law-of-the-journey.jpg
 ---
 

src/components/PhotoTeaser.astro

@@ -9,29 +9,17 @@ const { title, image } = data
 ---
 
 <style>
-  .photo a {
+  .photo {
     display: block;
   }
-
-  .photo figure,
-  .photo figure > div {
-    margin: 0;
-  }
-
-  .photo figcaption {
-    font-size: var(--font-size-base);
-    padding-left: calc(var(--spacer) / 2);
-    padding-right: calc(var(--spacer) / 2);
-  }
 </style>
 
-<article class="photo">
-  {
+{
   image ? (
-      <a href={`/${slug}`}>
+    <a class="photo" href={`/${slug}`}>
       <Picture
-          width={184}
-          height={184}
+        width={202}
+        height={202}
         src={image}
         alt={title}
         title={title}
@@ -39,5 +27,4 @@ const { title, image } = data
       />
     </a>
   ) : null
-  }
-</article>
+}

src/components/RelatedPosts/index.astro

@@ -12,45 +12,35 @@ type Props = {
 }
 const { post, isPhotos } = Astro.props as Props
 const allPosts = await getAllPostsForSearch()
+const allPostsWithoutCurrent = allPosts?.filter(
+  (post) => post.slug !== Astro.props.post.slug
+) as CollectionEntry<'articles' | 'photos' | 'links'>[]
 
 // Configure fuse.js
 // https://fusejs.io/api/options.html
-const fuseOptions: Fuse.IFuseOptions<
-  CollectionEntry<'articles' | 'photos' | 'links'>
-> = {
-  keys: ['data.tags', 'data.title', 'data.lead', 'collection'],
+const fuse = new Fuse(allPostsWithoutCurrent, {
+  keys: ['data.tags', 'data.title', 'data.lead'],
   useExtendedSearch: true,
-  minMatchCharLength: 3,
-  threshold: 0.8
-}
-// TODO; figure out how to remove any
-const allPostsWithoutCurrent = allPosts?.filter(
-  (post) => post.slug !== Astro.props.post.slug
-)
-const fuse = new Fuse(allPostsWithoutCurrent as any, fuseOptions)
+  threshold: 0.6
+})
 const relatedPosts = fuse
   // https://www.fusejs.io/examples.html#extended-search
   .search(
-    `${post?.data?.tags?.join(' | ')} | ${post?.data?.title} | ${
-      (post?.data as any)?.lead
-    } | ${post?.collection}`
+    `${post?.data?.tags?.join(' | ')} | "${post?.data?.lead}" | "${
+      post?.data?.title
+    }"`
   )
   .map((result) => result.item)
   .slice(0, 6)
 ---
 
-<section class={styles.relatedPosts}>
-  <h1 class={styles.title}>
-    Related {isPhotos ? 'Photos' : 'Posts'}{' '}
-    <!-- <button class={styles.button} onClick={() => refreshPosts()}>
-      Refresh
-    </button> -->
-  </h1>
+<section class={`${styles.relatedPosts} ${isPhotos ? styles.photos : ''}`}>
+  <h1 class={styles.title}>Related</h1>
   <ul>
     {
       relatedPosts?.map((post) => (
         <li>
-          {isPhotos ? (
+          {post.collection === 'photos' ? (
             <PhotoTeaser post={post as CollectionEntry<'photos'>} />
           ) : (
             <PostTeaser

src/components/RelatedPosts/index.module.css

@@ -14,9 +14,12 @@
 
 @media (min-width: 40rem) {
   .relatedPosts ul {
-    grid-template-columns: repeat(3, 1fr);
     gap: var(--spacer);
   }
+
+  .relatedPosts.photos ul {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
 .relatedPosts li {
@@ -28,26 +31,10 @@
   display: none;
 }
 
-.relatedPosts figure {
-  margin: 0;
-}
-
-.relatedPosts img {
-  margin-bottom: 0;
-}
-
 .relatedPosts a > div {
   margin-bottom: 0;
 }
 
 .relatedPosts a h1 {
-  font-size: var(--font-size-h4);
-}
-
-.button {
-  font-size: var(--font-size-mini);
-  display: inline-block;
-  color: var(--text-color-light);
-  text-transform: uppercase;
-  margin-left: calc(var(--spacer) / 2);
+  font-size: var(--font-size-h5);
 }

src/components/layouts/Archive.astro

@@ -22,12 +22,13 @@ const classes = `posts ${
 
 <style>
   .photos {
+    display: grid;
+    gap: var(--spacer);
     grid-template-columns: repeat(2, 1fr);
   }
 
   @media (min-width: 40rem) {
     .photos {
-      gap: calc(var(--spacer) * 1.5);
       grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
     }
   }

src/pages/index.astro

@@ -35,7 +35,6 @@ const photos = (await loadAndFormatCollection('photos')).slice(
 
   @media (min-width: 40rem) {
     .photos {
-      gap: calc(var(--spacer) * 1.5);
       grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
     }
   }