From 2f4981cc56a73dfc8970da64b654f596414bedaa Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sun, 1 May 2022 11:23:09 +0200 Subject: [PATCH 01/13] Add example of external link --- src/components/Header.astro | 18 ++---------------- 1 file changed, 2 insertions(+), 16 deletions(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index b80ce3d..7638b4c 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -23,25 +23,11 @@ import Navigation from '../components/Navigation.astro' -
  • - - -
  • - About + Example Page
  • - Contact + External Link
    • From 48171f6db19a80f6ff2a7ad87cb001260373b8dc Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sun, 1 May 2022 11:23:20 +0200 Subject: [PATCH 02/13] Add support for external links --- src/components/Navigation.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro index 2b37580..4bf690c 100644 --- a/src/components/Navigation.astro +++ b/src/components/Navigation.astro @@ -34,7 +34,7 @@ import ResponsiveToggle from './ResponsiveToggle.astro' // functions const setActiveMenuItem = () => { - const menuItems = [...mainMenu.querySelectorAll('a')] + const menuItems = [...mainMenu.querySelectorAll('a:not([rel*="external"])')] menuItems.forEach(menuItem => { if (menuItem.pathname === window.location.pathname) { From 2f42f0a64e40ad3a33d69881b094621f03d69d2c Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sun, 1 May 2022 11:23:27 +0200 Subject: [PATCH 03/13] Add a custom 404 page --- src/pages/404.astro | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/pages/404.astro diff --git a/src/pages/404.astro b/src/pages/404.astro new file mode 100644 index 0000000..86ab66d --- /dev/null +++ b/src/pages/404.astro @@ -0,0 +1,19 @@ +--- +import DefaultLayout from '../layouts/DefaultLayout.astro' +--- + + +
    +
    +

    404


    +
    +
    +
    +
    +

    This page does not exist.

    + Go back to the homepage +
    +
    +     + + From af5afba9fd358cc555e384b8c678e55b4b5889c8 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sun, 1 May 2022 11:23:41 +0200 Subject: [PATCH 04/13] Rename the about page to example page --- src/pages/{about.astro => example-page.astro} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/pages/{about.astro => example-page.astro} (99%) diff --git a/src/pages/about.astro b/src/pages/example-page.astro similarity index 99% rename from src/pages/about.astro rename to src/pages/example-page.astro index 6836a62..0c2fd9e 100644 --- a/src/pages/about.astro +++ b/src/pages/example-page.astro @@ -5,7 +5,7 @@ import DefaultLayout from '../layouts/DefaultLayout.astro'
    -

    About page


    +

    Example Page


    From ba186dbf2036dde69b9fa3c4ce50d84a29bcb8e1 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sun, 1 May 2022 11:23:49 +0200 Subject: [PATCH 05/13] Remove contact page --- src/pages/contact.astro | 19 ------------------- 1 file changed, 19 deletions(-) delete mode 100644 src/pages/contact.astro diff --git a/src/pages/contact.astro b/src/pages/contact.astro deleted file mode 100644 index 42ef568..0000000 --- a/src/pages/contact.astro +++ /dev/null @@ -1,19 +0,0 @@ ---- -import DefaultLayout from '../layouts/DefaultLayout.astro' ---- - - -
    -
    -

    Contact page


    -
    -
    -
    -
    -

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae veniam repellat deleniti obcaecati facilis non, praesentium aperiam laudantium excepturi assumenda doloremque animi quis aliquam eligendi quia nemo asperiores et eaque, sunt voluptatibus, saepe exercitationem id. Quis sequi maxime fugiat nam reprehenderit nesciunt quaerat obcaecati, ipsa dignissimos voluptatum voluptatem, optio quidem quos repudiandae dolorem voluptatibus fuga officia odio nemo recusandae voluptas. Eaque incidunt exercitationem tempora mollitia doloribus hic esse a maxime? A explicabo culpa maiores. Provident suscipit vitae eligendi sit molestias minima. Suscipit non, qui quisquam ex quos, incidunt eius adipisci mollitia quod natus doloremque optio tempore consectetur esse perspiciatis minima quae vitae, recusandae aliquam deserunt at aliquid? Possimus nihil rerum quia, in culpa sit, inventore quasi minus repudiandae voluptates, vitae quibusdam. Maiores quaerat atque quos ut nam aliquid reprehenderit est exercitationem. Nulla dolorum, officia porro a ut, temporibus quas doloremque similique architecto incidunt explicabo repudiandae ducimus eveniet maxime necessitatibus ipsa iste alias voluptatibus facere minus consequatur corporis ea. Sapiente debitis, eos, vitae blanditiis doloribus non unde dolorum reiciendis illum pariatur earum porro magnam quos, ullam dolorem consectetur. Minima vitae ea distinctio. Nisi ipsam ducimus qui magnam aut! Aspernatur, ea tempore laboriosam ipsa voluptatem magnam quasi distinctio architecto, obcaecati eum corporis!

    -

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae veniam repellat deleniti obcaecati facilis non, praesentium aperiam laudantium excepturi assumenda doloremque animi quis aliquam eligendi quia nemo asperiores et eaque, sunt voluptatibus, saepe exercitationem id. Quis sequi maxime fugiat nam reprehenderit nesciunt quaerat obcaecati, ipsa dignissimos voluptatum voluptatem, optio quidem quos repudiandae dolorem voluptatibus fuga officia odio nemo recusandae voluptas. Eaque incidunt exercitationem tempora mollitia doloribus hic esse a maxime? A explicabo culpa maiores. Provident suscipit vitae eligendi sit molestias minima. Suscipit non, qui quisquam ex quos, incidunt eius adipisci mollitia quod natus doloremque optio tempore consectetur esse perspiciatis minima quae vitae, recusandae aliquam deserunt at aliquid? Possimus nihil rerum quia, in culpa sit, inventore quasi minus repudiandae voluptates, vitae quibusdam. Maiores quaerat atque quos ut nam aliquid reprehenderit est exercitationem. Nulla dolorum, officia porro a ut, temporibus quas doloremque similique architecto incidunt explicabo repudiandae ducimus eveniet maxime necessitatibus ipsa iste alias voluptatibus facere minus consequatur corporis ea. Sapiente debitis, eos, vitae blanditiis doloribus non unde dolorum reiciendis illum pariatur earum porro magnam quos, ullam dolorem consectetur. Minima vitae ea distinctio. Nisi ipsam ducimus qui magnam aut! Aspernatur, ea tempore laboriosam ipsa voluptatem magnam quasi distinctio architecto, obcaecati eum corporis!

    -
    -
    -     - - From 41682361e4ea136994a4c17ead8502f3c9b7cd40 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sun, 1 May 2022 11:24:00 +0200 Subject: [PATCH 06/13] Update h1 on home page --- src/pages/index.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 21a8251..f4afb06 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -5,7 +5,7 @@ import DefaultLayout from '../layouts/DefaultLayout.astro'
    -

    Hello world!


    +

    Accessible Astro Starter


    From e86d513faf0d1d6d0bd4f7ca315629c0a85413c7 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sun, 1 May 2022 11:25:26 +0200 Subject: [PATCH 07/13] Remove excess line breaks --- src/pages/404.astro | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/404.astro b/src/pages/404.astro index 86ab66d..48c350e 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -15,5 +15,3 @@ import DefaultLayout from '../layouts/DefaultLayout.astro'
    - - From d506f1bc21fdd953934cd1342adeea77b948b19c Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sun, 1 May 2022 11:25:35 +0200 Subject: [PATCH 08/13] Update version to 1.3.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9a585ad..9f0b10d 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.3.1", + "version": "1.3.2", "author": "Mark Teekman", "homepage": "https://accessible-astro.dev", "scripts": { From e0c2e563c622ba0ff804947692fc5e61a51a7bcb Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sun, 1 May 2022 14:46:26 +0200 Subject: [PATCH 09/13] Add current year and Astro credits --- src/components/Footer.astro | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 7aa38ac..5a35dbe 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,7 +1,11 @@ +--- +const currentYear = new Date().getFullYear() +--- +
    -

    © Footer Copyright

    +

    © {currentYear} - Starter Theme for Astro.

    -
    \ No newline at end of file + From 36bd41ba51a6ec6a6ae025d6aee47d52ca2cc6e9 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sun, 1 May 2022 20:11:54 +0200 Subject: [PATCH 10/13] Update the Example Page page title --- src/pages/example-page.astro | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/example-page.astro b/src/pages/example-page.astro index 0c2fd9e..1cffe2e 100644 --- a/src/pages/example-page.astro +++ b/src/pages/example-page.astro @@ -2,7 +2,7 @@ import DefaultLayout from '../layouts/DefaultLayout.astro' --- - +

    Example Page


    @@ -15,4 +15,3 @@ import DefaultLayout from '../layouts/DefaultLayout.astro'
    - From d52ce6b0c2598709947999ca148f5db79fe0ca0e Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sun, 1 May 2022 20:12:16 +0200 Subject: [PATCH 11/13] Add a blog and dynamic page for the posts as an example --- src/components/Header.astro | 3 +++ src/pages/blog.astro | 50 +++++++++++++++++++++++++++++++++++++ src/pages/posts/[id].astro | 47 ++++++++++++++++++++++++++++++++++ 3 files changed, 100 insertions(+) create mode 100644 src/pages/blog.astro create mode 100644 src/pages/posts/[id].astro diff --git a/src/components/Header.astro b/src/components/Header.astro index 7638b4c..eca8513 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -9,6 +9,9 @@ import Navigation from '../components/Navigation.astro'
  • Home
    • +
  • + Blog +
    • diff --git a/src/pages/blog.astro b/src/pages/blog.astro new file mode 100644 index 0000000..82953b9 --- /dev/null +++ b/src/pages/blog.astro @@ -0,0 +1,50 @@ +--- +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() +--- + + +
      +
      +

      Blog


      +

      An example of a blog with dynamic content fetched from JSONPlaceholder using the title, body and userId. The Accessible Astro Card Component is used here to display al the posts.

      +
      +
      +
      +
      +
        + {data.map((post) => ( +
      • + + {post.body} + +
        • + ))} +
      +
      +
      +       + + \ No newline at end of file diff --git a/src/pages/posts/[id].astro b/src/pages/posts/[id].astro new file mode 100644 index 0000000..52f56b2 --- /dev/null +++ b/src/pages/posts/[id].astro @@ -0,0 +1,47 @@ +--- +import DefaultLayout from '../../layouts/DefaultLayout.astro' + +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() }, + props: { post } + } + }) +} + +const { post } = Astro.props +--- + + +
      +
      +

      {post.title}


      +

      By userId: {post.userId}

      +
      +
      +
      +
      +

      {post.body}

      +
      +
      +       + + \ No newline at end of file From bd43715f72780ac03c604708ef27f57a21faf92f Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sun, 1 May 2022 20:12:26 +0200 Subject: [PATCH 12/13] Update README.md --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index a44c6d5..07e28d9 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,10 @@ In this starter you'll find a couple of things: - `.sr-only` token class for screen reader only text content - `prefers-reduced-motion` disables animations for users that have this preference turned on +## Extra features + +- Comes with a demo blog which is rendered using fetched data and the Accessible Astro Card Component + ## Utilities 👉🏻   _Note: Examples are included in the **index.astro** file_ From 275c67f75d9be047b3b84675b709a30dc7ceff73 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sun, 1 May 2022 20:12:34 +0200 Subject: [PATCH 13/13] Update version to 1.4.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9f0b10d..db1a50e 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.3.2", + "version": "1.4.0", "author": "Mark Teekman", "homepage": "https://accessible-astro.dev", "scripts": {