From f2f3dd652a545622419a75c6113f697d8c592691 Mon Sep 17 00:00:00 2001
From: Mark Teekman <mark.teekman@gmail.com>
Date: Thu, 3 Nov 2022 22:11:14 +0100
Subject: [PATCH 1/7] Improved blog and posts (pagination, breadcrumbs, SEO).

---
 src/pages/blog.astro                          | 50 -------------
 src/pages/blog/[...page].astro                | 70 +++++++++++++++++++
 .../{posts/[id].astro => blog/[post].astro}   | 25 ++++++-
 3 files changed, 93 insertions(+), 52 deletions(-)
 delete mode 100644 src/pages/blog.astro
 create mode 100644 src/pages/blog/[...page].astro
 rename src/pages/{posts/[id].astro => blog/[post].astro} (62%)

diff --git a/src/pages/blog.astro b/src/pages/blog.astro
deleted file mode 100644
index 82953b9..0000000
--- a/src/pages/blog.astro
+++ /dev/null
@@ -1,50 +0,0 @@
----
-import DefaultLayout from '../layouts/DefaultLayout.astro'
-import { Card } from 'accessible-astro-components'
-
-const response = await fetch('https://jsonplaceholder.typicode.com/posts')
-const data = await response.json()
----
-
-<DefaultLayout title="Blog">
-  <section class="margin-48">
-    <div class="container">
-      <h1>Blog</h1><br>
-      <p class="size-18">An example of a blog with dynamic content fetched from <a href="https://jsonplaceholder.typicode.com/posts">JSONPlaceholder</a> using the title, body and userId. The <a href="https://components.accessible-astro.dev/card">Accessible Astro Card Component</a> is used here to display al the posts.</p>
-    </div>
-  </section>
-  <section class="margin-48">
-    <div class="container">
-      <ul>
-        {data.map((post) => (
-          <li>
-            <Card 
-              url={'/posts/' + post.id}
-              title={post.title}
-              footer={'userId:' + post.userId}
-            >
-              {post.body}
-            </Card>
-          </li>
-        ))}
-      </ul>
-    </div>
-  </section>
-</DefaultLayout>
-
-<style lang="scss">
-  ul {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: 4rem;
-
-    @media (min-width: 550px) {
-      grid-template-columns: repeat(2, 1fr);
-      grid-gap: 2rem;
-    }
-
-    @media (min-width: 950px) {
-      grid-template-columns: repeat(3, 1fr);
-    }
-  }
-</style>
\ No newline at end of file
diff --git a/src/pages/blog/[...page].astro b/src/pages/blog/[...page].astro
new file mode 100644
index 0000000..6f36304
--- /dev/null
+++ b/src/pages/blog/[...page].astro
@@ -0,0 +1,70 @@
+---
+import DefaultLayout from '../../layouts/DefaultLayout.astro'
+import { Card, Pagination } from 'accessible-astro-components'
+
+export async function getStaticPaths({ paginate }) {
+  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+  const data = await response.json()
+
+  return paginate(data, { pageSize: 6 })
+}
+
+const { page } = Astro.props
+---
+
+<DefaultLayout 
+  title="Blog"
+  description="An example of a blog with dynamic content fetched from JSONPlaceholder using the title, body and userId."
+>
+  <section class="margin-48">
+    <div class="container">
+      <h1>Blog</h1><br>
+      <p class="size-18">An example of a blog with dynamic content fetched from <a href="https://jsonplaceholder.typicode.com/posts">JSONPlaceholder</a> using the title, body and userId. The <a href="https://components.accessible-astro.dev/card">Accessible Astro Card Component</a> is used here to display al the posts.</p>
+    </div>
+  </section>
+  <section class="margin-48">
+    <div class="container">
+      <p class="size-12"><em>Post {page.start + 1} through {page.end + 1} of {page.total} total posts</em></p>
+      <ul class="margin-12">
+        {page.data.map((post) => (
+          <li>
+            <Card 
+              url={'/blog/' + post.title.replaceAll(' ', '-').toLowerCase()}
+              title={post.title}
+              footer={'userId:' + post.userId}
+            >
+              {post.body}
+            </Card>
+          </li>
+        ))}
+      </ul>
+      <div class="align-center margin-32 top">
+        <Pagination 
+          firstPage={page.url.prev ? '/blog' : null}
+          previousPage={page.url.prev ? page.url.prev : null}
+          nextPage={page.url.next ? page.url.next : null}
+          lastPage={page.url.next ? `/blog/${Math.round(page.total / page.size)}` : null}
+          currentPage={page.currentPage}
+          totalPages={Math.round(page.total / page.size)}
+        />
+      </div>
+    </div>
+  </section>
+</DefaultLayout>
+
+<style lang="scss">
+  ul {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: 4rem;
+
+    @media (min-width: 550px) {
+      grid-template-columns: repeat(2, 1fr);
+      grid-gap: 2rem;
+    }
+
+    @media (min-width: 950px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/posts/[id].astro b/src/pages/blog/[post].astro
similarity index 62%
rename from src/pages/posts/[id].astro
rename to src/pages/blog/[post].astro
index 52f56b2..ff6e216 100644
--- a/src/pages/posts/[id].astro
+++ b/src/pages/blog/[post].astro
@@ -1,12 +1,13 @@
 ---
 import DefaultLayout from '../../layouts/DefaultLayout.astro'
+import { Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components'
 
 export async function getStaticPaths() {
   const data = await fetch('https://jsonplaceholder.typicode.com/posts').then(response => response.json())
 
   return data.map((post) => {
     return {
-      params: { id: post.id.toString() },
+      params: { post: post.title.replaceAll(' ', '-').toLowerCase() },
       props: { post }
     }
   })
@@ -15,7 +16,27 @@ export async function getStaticPaths() {
 const { post } = Astro.props
 ---
 
-<DefaultLayout title="Blog">
+<DefaultLayout 
+  title={post.title}
+  description={post.body}
+  url={post.title}
+>
+  <div class="container margin-24">
+    <Breadcrumbs>
+      <BreadcrumbsItem 
+        href="/"
+        label="Home"
+      />
+      <BreadcrumbsItem
+        href="/blog"
+        label="Blog"
+      />
+      <BreadcrumbsItem
+        currentPage={true}
+        label={post.title}
+      />
+    </Breadcrumbs>
+  </div>
   <section class="margin-48">
     <div class="container">
       <h1>{post.title}</h1><br>

From f93594f99f246692cc1a2307322b746317519d7a Mon Sep 17 00:00:00 2001
From: Mark Teekman <mark.teekman@gmail.com>
Date: Thu, 3 Nov 2022 22:11:41 +0100
Subject: [PATCH 2/7] Fixed typo in the title of the 404 page.

---
 src/pages/404.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/404.astro b/src/pages/404.astro
index 48c350e..b412871 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -2,7 +2,7 @@
 import DefaultLayout from '../layouts/DefaultLayout.astro'
 ---
 
-<DefaultLayout title="About">
+<DefaultLayout title="404">
   <section class="margin-48">
     <div class="container">
       <h1>404</h1><br>

From 6e0a671fd3298dad5f9ad093222a0237e963df16 Mon Sep 17 00:00:00 2001
From: Mark Teekman <mark.teekman@gmail.com>
Date: Thu, 3 Nov 2022 22:12:06 +0100
Subject: [PATCH 3/7] New SEO component `SiteMeta.astro`.

---
 src/components/SiteMeta.astro | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/components/SiteMeta.astro

diff --git a/src/components/SiteMeta.astro b/src/components/SiteMeta.astro
new file mode 100644
index 0000000..7a2f5d5
--- /dev/null
+++ b/src/components/SiteMeta.astro
@@ -0,0 +1,20 @@
+---
+const { 
+  title,
+  description,
+  url,
+  image,
+} = Astro.props
+
+let subtitle = 'Accessible Astro Starter'
+---
+
+<!-- open graph -->
+<meta property="og:title" content={`${title} - ${subtitle}`}>
+<meta property="og:description" content={description}>
+<meta property="og:type" content="website">
+<meta property="og:url" content={url}>
+<meta property="og:image" content={Astro.site ? `${Astro.site}${image}` : image}>
+
+<!-- page title -->
+<title>{title} - {subtitle}</title>

From 541425c2b5c36ef7b061d3207f9fc1328bca43e8 Mon Sep 17 00:00:00 2001
From: Mark Teekman <mark.teekman@gmail.com>
Date: Thu, 3 Nov 2022 22:15:53 +0100
Subject: [PATCH 4/7] Moved theming styles to `DefaultLayout.astro` and added
 the new `SiteMeta.astro` component.

---
 src/assets/scss/base/_root.scss | 19 ------------
 src/layouts/DefaultLayout.astro | 53 ++++++++++++++++++++++++++-------
 2 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/src/assets/scss/base/_root.scss b/src/assets/scss/base/_root.scss
index b32c8ad..f4e99e1 100644
--- a/src/assets/scss/base/_root.scss
+++ b/src/assets/scss/base/_root.scss
@@ -10,23 +10,4 @@
       --#{$color}-#{$shade}: #{$value};
     }
   }
-  --radius-small: 3px;
-  --radius-large: 6px;
-  --gap-default: 2rem;
-  --font-measure: 70ch;
-  --font-family-default: "Open Sans", sans-serif;
-  --font-family-special: "Open Sans", sans-serif;
-  --font-color: var(--neutral-900);
-  --action-color: var(--secondary-500);
-  --background: var(--neutral-100);
-  --primary-background: var(--primary-100);
-  --neutral-background: var(--neutral-200);
-}
-
-.darkmode {
-  --font-color: var(--neutral-100);
-  --action-color: var(--secondary-100);
-  --background: var(--neutral-800);
-  --primary-background: var(--primary-500);
-  --neutral-background: var(--neutral-900);
 }
diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro
index a504aa1..7f7d365 100644
--- a/src/layouts/DefaultLayout.astro
+++ b/src/layouts/DefaultLayout.astro
@@ -1,10 +1,15 @@
 ---
 import '../assets/scss/globals.scss'
+import SiteMeta from '../components/SiteMeta.astro'
 import Header from '../components/Header.astro'
 import Footer from '../components/Footer.astro'
 
-const {title} = Astro.props
-let subtitle = 'Accessible Astro Starter'
+const {
+  title = 'Astro',
+  description = 'A starter project with accessible features using Astro static site builder. Contains accessible landmarks, skip links, a dark mode color scheme, better focus outline and keyboard menu navigation.',
+  url,
+  image = '/social-preview-image.png',
+} = Astro.props
 ---
 
 <html lang="en" dir="ltr">
@@ -21,15 +26,16 @@ let subtitle = 'Accessible Astro Starter'
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;800&display=swap" rel="stylesheet">
 
-    <!-- open graph -->
-    <meta property="og:title" content="Accessible Astro Starter">
-    <meta property="og:description" content="A starter project with accessible features using Astro static site builder. Contains accessible landmarks, skip links, a dark mode color scheme, better focus outline and keyboard menu navigation.">
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="https://starter.accessible-astro.dev">
-    <meta property="og:image" content="/social-preview-image.png">
-
-    <!-- page title -->
-    <title>{title} - {subtitle}</title>
+    <SiteMeta
+      title={title}
+      description={description.substring(0, 100)}
+      url={
+        Astro.site 
+          ? `${Astro.site}/${title.toLowerCase().replaceAll(' ', '-')}`
+          : `https://accessible-astro.dev/${title.toLowerCase().replaceAll(' ', '-')}`
+      }
+      image={image}
+    />
   </head>
   <body>
     <Header />
@@ -41,6 +47,31 @@ let subtitle = 'Accessible Astro Starter'
 </html>
 
 <style lang="scss">
+  // theme settings
+  :root {
+    --radius-small: 3px;
+    --radius-large: 6px;
+    --gap-default: 2rem;
+    --font-measure: 70ch;
+    --font-family-default: "Open Sans", sans-serif;
+    --font-family-special: "Open Sans", sans-serif;
+    // light theme
+    --font-color: var(--neutral-900);
+    --action-color: var(--secondary-500);
+    --background: var(--neutral-100);
+    --primary-background: var(--primary-100);
+    --neutral-background: var(--neutral-200);
+  }
+
+  // dark color scheme overrides
+  .darkmode {
+    --font-color: var(--neutral-100);
+    --action-color: var(--secondary-100);
+    --background: var(--neutral-800);
+    --primary-background: var(--primary-500);
+    --neutral-background: var(--neutral-900);
+  }
+
   // sticky footer on low content pages
   html,
   body {

From 214693df119de47bf65eedadf362bcc1f6e33054 Mon Sep 17 00:00:00 2001
From: Mark Teekman <mark.teekman@gmail.com>
Date: Thu, 3 Nov 2022 22:16:38 +0100
Subject: [PATCH 5/7] Simplified styles for ordered and unordered lists.

---
 src/assets/scss/base/_list.scss  | 56 +++++++++++++++-----------------
 src/assets/scss/base/_reset.scss |  2 +-
 src/components/Navigation.astro  |  1 +
 3 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/assets/scss/base/_list.scss b/src/assets/scss/base/_list.scss
index e1618ac..47c99bf 100644
--- a/src/assets/scss/base/_list.scss
+++ b/src/assets/scss/base/_list.scss
@@ -5,40 +5,39 @@
 @use "breakpoint" as *;
 @use "space" as *;
 
-:where(main) ul:not([class]) {
-  padding: 0 0 0 $space-24;
-  list-style-type: none;
+ul:not([class]),
+ol:not([class]) {
+  margin-left: $space-16;
+
+  ul,
+  ol {
+    padding: $space-8 $space-16 0;
+  }
 
   li {
-    position: relative;
     margin-bottom: $space-8;
-
-    @include breakpoint(medium) {
-      margin-bottom: $space-12;
-    }
-
-    &::before {
-      position: relative;
-      z-index: 2;
-      float: left;
-      clear: both;
-      margin: 9px 10px 0 -19px;
-      width: 8px;
-      height: 8px;
-      border-radius: 60px;
-      background: var(--action-color);
-      content: "";
-    }
   }
+}
 
-  ul {
-    padding: $space-16 0 0 $space-16;
+ul:not([class]) {
+  > li::marker {
+    display: block;
+    color: var(--primary-800);
   }
 }
 
-:where(main) ol:not([class]) {
+ol.incremented {
   counter-reset: item;
 
+  ol{
+    counter-reset: item;
+  }
+
+  ol,
+  ul {
+    margin: $space-12 0 0 $space-16;
+  }
+
   li {
     display: block;
     margin-bottom: $space-8;
@@ -52,16 +51,15 @@
       counter-increment: item;
     }
 
+    &:last-child {
+      margin-bottom: 0;
+    }
+
     p {
       display: inline;
     }
   }
 
-  ol,
-  ul {
-    margin: $space-12 0 0 $space-16;
-  }
-
   ul {
     li::before {
       content: "";
diff --git a/src/assets/scss/base/_reset.scss b/src/assets/scss/base/_reset.scss
index c1ff6dd..fe59939 100644
--- a/src/assets/scss/base/_reset.scss
+++ b/src/assets/scss/base/_reset.scss
@@ -41,7 +41,7 @@ ul {
   padding: 0;
 }
 
-ul {
+ul:where([class]) {
   list-style: none;
 }
 
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 7324aaf..b548317 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -251,6 +251,7 @@ import { DarkMode } from 'accessible-astro-components'
       > ul {
         display: flex;
         gap: 1.5rem;
+        list-style-type: none;
 
         .is-active {
           font-weight: bold;

From d5f402f1aa44190d3033a31b2fb38550e855760b Mon Sep 17 00:00:00 2001
From: Mark Teekman <mark.teekman@gmail.com>
Date: Thu, 3 Nov 2022 22:17:24 +0100
Subject: [PATCH 6/7] Update Astro to version 1.6.3 and Accessible Astro
 Components to 1.6.1.

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 4c534e5..01ac975 100644
--- a/package.json
+++ b/package.json
@@ -11,11 +11,11 @@
     "preview": "astro preview"
   },
   "dependencies": {
-    "accessible-astro-components": "^1.5.7",
+    "accessible-astro-components": "^1.6.1",
     "astro-icon": "^0.7.3"
   },
   "devDependencies": {
-    "astro": "^1.4.4",
+    "astro": "^1.6.3",
     "sass": "^1.49.9"
   }
 }

From 07c1418c8774489b79d9e9efd8516745b4957927 Mon Sep 17 00:00:00 2001
From: Mark Teekman <mark.teekman@gmail.com>
Date: Thu, 3 Nov 2022 22:17:48 +0100
Subject: [PATCH 7/7] Update version to 1.6.0.

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 01ac975..2ee5162 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "accessible-astro-starter",
   "description": "An Accessible Starter Theme for Astro including several accessiblity features and tools to help you build faster.",
-  "version": "1.5.5",
+  "version": "1.6.0",
   "author": "Mark Teekman",
   "homepage": "https://accessible-astro.dev",
   "scripts": {