Add Next/Prev Post Links

astro.config.mjs

@@ -21,6 +21,7 @@ export default defineConfig(
     markdown: {
       // TODO: Maybe use shiki and see if it is better and has line highlighting.
       syntaxHighlight: false,
+      mode: "mdx",
       remarkPlugins: [
         "remark-gfm",
         codeHighlightPre,

src/blogComponents/intersectionObserver/IntersectionObserver.astro

@@ -116,7 +116,7 @@ const { threshold = 0, percentage = false, rootMargin = 0 } = Astro.props
       scrollElement.addEventListener("scroll", e => {
         cloneContainer.style.bottom = `${e.target.scrollTop}px`
       })
-      console.log(`${rootMargin}px`)
+
       const observer = new IntersectionObserver(
         entries => observerCallback(entries[0], [mainElement, cloneElement]),
         { threshold, rootMargin: `${rootMargin}px`, root: scrollElement }

src/components/BlogList.jsx

@@ -1,10 +1,11 @@
-import { useState } from "preact/hooks"
 import TagBar from "./TagBar.jsx"
 import SearchBar from "./SearchBar.jsx"
 import BlogPostPreview from "./BlogPostPreview.jsx"
+import { useSessionStorage } from "../hooks/useStorage.js"
 
 export default function BlogList({ allPosts }) {
-  const [selectedTags, setSelectedTags] = useState([])
+  const [searchQuery, setSearchQuery] = useSessionStorage("searchTerm", "")
+  const [selectedTags, setSelectedTags] = useSessionStorage("selectedTags", [])
   const tags = Object.entries(
     allPosts.reduce((totals, post) => {
       return post.tags.reduce((tagTotals, tag) => {
@@ -20,7 +21,6 @@ export default function BlogList({ allPosts }) {
     .map(tag => {
       return { ...tag, selected: selectedTags.includes(tag.name) }
     })
-  const [searchQuery, setSearchQuery] = useState("")
   const filteredPosts = allPosts.filter(post => {
     return (
       (post.title.toLowerCase().includes(searchQuery) ||

src/components/BlogPost.astro

@@ -1,7 +1,7 @@
 ---
 import dateFormatter from '../utils/dateFormatter.js'
 import TagBar from './TagBar.jsx'
-import ShareButtons from '/src/components/ShareButtons.jsx'
+import ShareButtons from './ShareButtons.jsx'
 
 export interface Props {
 	title: string;
@@ -10,7 +10,7 @@ export interface Props {
 	tags: string[]
 }
 
-const { title, date, tags, url } = Astro.props;
+const { title, date, tags, url, nextPost, prevPost } = Astro.props;
 const siteUrl = Astro.site.href
 ---
 
@@ -32,15 +32,23 @@ const siteUrl = Astro.site.href
 			<main>
 				<slot />
 			</main>
-			<!-- TODO: Add author and next/previous buttons. Also, maybe add a scroll to top button as well -->
+			<footer>
+				<div>
+					{prevPost && <div class="adjacent-post-link-title">Prev Article</div>}
+					{prevPost && <a href={prevPost.url}>{prevPost.title}</a>}
+				</div>
+				<div class="next">
+					{nextPost && <div class="adjacent-post-link-title">Next Article</div>}
+					{nextPost && <a href={nextPost.url}>{nextPost.title}</a>}
+				</div>
+			</footer>
+			<!-- TODO: Add related blog post links to the end of the articles. Have this data pulled from the frontmatter and also from the articles with the same tag/tags -->
+			<!-- TODO: Add author section -->
+			<!-- TODO: Add a scroll to top button as well -->
 			<!-- TODO: Add custom 404 page -->
-			<!-- TODO: Add search/tags to URL to make the back button work better -->
 			<!-- TODO: Add Google Analytics -->
 			<!-- TODO: Add social share images (https://joeprevite.com/create-a-twitter-card-for-your-blog) (Maybe dynamically generate a CSS page that is scraped with puppeteer or use something like ImageMagik or ffmpeg) -->
 			<!-- TODO: Add Pagination -->
-			<!-- TODO: Add in width slider for users -->
-			<!-- TODO: Add Themes/Dark mode -->
-			<!-- TODO: Add prefers-color-scheme support -->
 		</div>
 	</article>
 </div>
@@ -62,6 +70,13 @@ const siteUrl = Astro.site.href
 		margin-bottom: 2rem;
 	}
 
+	footer {
+		margin-top: 2rem;
+		display: flex;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+
 	.title,
 	.publish-date {
 		margin: 0;
@@ -76,6 +91,16 @@ const siteUrl = Astro.site.href
 		font-weight: 700;
 	}
 
+	.adjacent-post-link-title {
+		color: var(--theme-text-lighter);
+		font-weight: bold;
+		font-size: .8em;
+	}
+
+	.next {
+		text-align: end;
+	}
+
 	@media (max-width: 50em) {
 		.title {
 			font-size: 1.75rem;

src/hooks/useStorage.js

@@ -0,0 +1,35 @@
+import { useCallback, useState, useEffect } from "preact/hooks"
+
+const hasWindow = typeof window !== "undefined"
+
+export function useLocalStorage(key, defaultValue) {
+  return useStorage(key, defaultValue, hasWindow ? window.localStorage : null)
+}
+
+export function useSessionStorage(key, defaultValue) {
+  return useStorage(key, defaultValue, hasWindow ? window.sessionStorage : null)
+}
+
+function useStorage(key, defaultValue, storageObject) {
+  const [value, setValue] = useState(() => {
+    const jsonValue = storageObject?.getItem(key)
+    if (jsonValue != null) return JSON.parse(jsonValue)
+
+    if (typeof defaultValue === "function") {
+      return defaultValue()
+    } else {
+      return defaultValue
+    }
+  })
+
+  useEffect(() => {
+    if (value === undefined) return storageObject.removeItem(key)
+    storageObject.setItem(key, JSON.stringify(value))
+  }, [key, value, storageObject])
+
+  const remove = useCallback(() => {
+    setValue(undefined)
+  }, [])
+
+  return [value, setValue, remove]
+}