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_ diff --git a/package.json b/package.json index 9a585ad..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.1", + "version": "1.4.0", "author": "Mark Teekman", "homepage": "https://accessible-astro.dev", "scripts": { 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() +--- + \ No newline at end of file + diff --git a/src/components/Header.astro b/src/components/Header.astro index b80ce3d..eca8513 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -9,19 +9,8 @@ import Navigation from '../components/Navigation.astro' - 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) { diff --git a/src/pages/404.astro b/src/pages/404.astro new file mode 100644 index 0000000..48c350e --- /dev/null +++ b/src/pages/404.astro @@ -0,0 +1,17 @@ +--- +import DefaultLayout from '../layouts/DefaultLayout.astro' +--- + + +
+
+

404


+
+
+
+
+

This page does not exist.

+ Go back to the homepage +
+
+
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/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!

-
-
-
- - diff --git a/src/pages/about.astro b/src/pages/example-page.astro similarity index 98% rename from src/pages/about.astro rename to src/pages/example-page.astro index 6836a62..1cffe2e 100644 --- a/src/pages/about.astro +++ b/src/pages/example-page.astro @@ -2,10 +2,10 @@ import DefaultLayout from '../layouts/DefaultLayout.astro' --- - +
-

About page


+

Example Page


@@ -15,4 +15,3 @@ import DefaultLayout from '../layouts/DefaultLayout.astro'
- 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


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