Merge pull request #29 from markteekman/develop

Develop

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_

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": {

src/components/Footer.astro

@@ -1,7 +1,11 @@
+---
+const currentYear = new Date().getFullYear()
+---
+
 <footer>
   <section class="padding-16 color-neutral">
     <div class="container">
-      <p>&copy; Footer Copyright</p>
+      <p>&copy; {currentYear} - Starter Theme for <a href="https://astro.build/">Astro</a>.</p>
     </div>
   </section>
-</footer>
+</footer>

src/components/Header.astro

@@ -9,19 +9,8 @@ import Navigation from '../components/Navigation.astro'
     <li class="menu-item">
       <a href="/">Home</a>
     </li>
-    <li class="menu-item has-dropdown">
-      <button aria-haspopup="true" aria-expanded="false">Dropdown</button>
-      <ul>
-        <li class="submenu-item">
-          <a href="/dropdown/subpage1">Sub menu item 1</a>
-        </li>
-        <li class="submenu-item">
-          <a href="/dropdown/subpage2">Sub menu item 2</a>
-        </li>
-        <li class="submenu-item">
-          <a href="/dropdown/subpage3">Sub menu item 3</a>
-        </li>
-      </ul>
+    <li class="menu-item">
+      <a href="/blog">Blog</a>
     </li>
     <li class="menu-item has-dropdown">
       <button aria-haspopup="true" aria-expanded="false">Dropdown</button>
@@ -38,10 +27,10 @@ import Navigation from '../components/Navigation.astro'
       </ul>
     </li>
     <li class="menu-item">
-      <a href="/about/">About</a>
+      <a href="/example-page/">Example Page</a>
     </li>
     <li class="menu-item">
-      <a href="/contact/">Contact</a>
+      <a href="https://github.com/markteekman/accessible-astro-starter" title="external link" rel="external noopener noreferrer">External Link</a>
     </li>
   </Navigation>
 </header>

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) {

src/pages/404.astro

@@ -0,0 +1,17 @@
+---
+import DefaultLayout from '../layouts/DefaultLayout.astro'
+---
+
+<DefaultLayout title="About">
+  <section class="margin-48">
+    <div class="container">
+      <h1>404</h1><br>
+    </div>
+  </section>
+  <section class="margin-48">
+    <div class="container space-content">
+      <p class="size-20">This page does not exist.</p>
+      <a class="size-18" href="/">Go back to the homepage</a>
+    </div>
+  </section>
+</DefaultLayout>

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()
+---
+
+<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>

src/pages/about.astro → src/pages/example-page.astro

@@ -2,10 +2,10 @@
 import DefaultLayout from '../layouts/DefaultLayout.astro'
 ---
 
-<DefaultLayout title="About">
+<DefaultLayout title="Example Page">
   <section class="margin-48">
     <div class="container">
-      <h1>About page</h1><br>
+      <h1>Example Page</h1><br>
     </div>
   </section>
   <section class="margin-48">
@@ -15,4 +15,3 @@ import DefaultLayout from '../layouts/DefaultLayout.astro'
     </div>
   </section>
 </DefaultLayout>
-

src/pages/index.astro

@@ -5,7 +5,7 @@ import DefaultLayout from '../layouts/DefaultLayout.astro'
 <DefaultLayout title="Home">
   <section class="margin-48">
     <div class="container">
-      <h1>Hello world!</h1><br>
+      <h1>Accessible Astro <em>Starter</em></h1><br>
     </div>
   </section>
   <section class="padding-48 color-primary">

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
+---
+
+<DefaultLayout title="Blog">
+  <section class="margin-48">
+    <div class="container">
+      <h1>{post.title}</h1><br>
+      <p>By userId: {post.userId}</p>
+    </div>
+  </section>
+  <section class="margin-48">
+    <div class="container">
+      <p class="size-20">{post.body}</p>
+    </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>