Merge pull request #21 from markteekman/develop

Develop

src/components/Header.astro

@@ -1,13 +1,13 @@
 ---
+import SkipLinks from '../components/SkipLinks.astro'
 import Navigation from '../components/Navigation.astro'
 import ResponsiveToggle from '../components/ResponsiveToggle.astro'
-import SkipLinks from '../components/SkipLinks.astro'
 ---
 
 <header>
   <SkipLinks client:load />
   <section class="padding-16 color-neutral">
-    <div class="container temp">
+    <div class="container">
       <img src={(await import('../assets/img/logo.svg')).default} alt="Your Logo">
       <ResponsiveToggle client:load />
       <Navigation client:load />

src/components/Navigation.astro

@@ -1,8 +1,8 @@
 <nav id="main-navigation">
   <ul>
-    <li><a href="#" aria-current="page">Home</a></li>
-    <li><a href="#">About</a></li>
-    <li><a href="#">Contact</a></li>
+    <li><a href="/">Home</a></li>
+    <li><a href="/about">About</a></li>
+    <li><a href="/contact">Contact</a></li>
   </ul>
 </nav>
 
@@ -11,6 +11,18 @@
   const mainNav = document.querySelector('#main-navigation')
   const mainMenu = mainNav.querySelector('ul')
 
+  // functions
+  const setActiveMenuItem = _ => {
+    const menuItems = [...mainMenu.querySelectorAll('a')]
+
+    menuItems.forEach(menuItem => {
+      if (menuItem.pathname === window.location.pathname) {
+        menuItem.classList.add('is-active')
+        menuItem.setAttribute('aria-current', 'page')
+      }
+    })
+  }
+
   // execution
   mainMenu && mainMenu.addEventListener('keydown', event => {
     const currentMenuItem = event.target.closest('li')
@@ -51,6 +63,7 @@
     }
   })
 
+  setActiveMenuItem()
 </script>
 
 <style lang="scss">
@@ -77,6 +90,10 @@
       @include breakpoint(medium) {
         flex-direction: row;
       }
+
+      .is-active {
+        font-weight: bold;
+      }
     }
   }
 </style>

src/components/SkipLinks.astro

@@ -1,13 +1,18 @@
 <section>
-	<div class="container">
-    <nav class="skip-links" aria-label="Skiplinks">
-      <ul>
-        <!-- NOTE: add this when you have content or hyperlinks to skip before you main menu!
-        <li><a href="#main-navigation" data-skip-link>Skip to main menu</a></li> -->
-        <li><a href="#main-content" data-skip-link>Skip to main content</a></li>
-      </ul>
-    </nav>
-	</div>
+  <nav class="skip-links" aria-label="Skiplinks">
+    <ul>
+      <li>
+        <slot name="main-navigation">
+          <a href="#main-navigation" data-skip-link>Skip to main menu</a>
+        </slot>
+      </li>
+      <li>
+        <slot name="main-content">
+          <a href="#main-content" data-skip-link>Skip to main content</a>
+        </slot>
+      </li>
+    </ul>
+  </nav>
 </section>
 
 <script>
@@ -18,25 +23,22 @@
   if (skipLinks.length > 0) {
     skipLinks.forEach(link => {
       link.addEventListener('keydown', event => {
-        // if keydown event is not on the skip link itself, return and exit
         if (!event.target.closest('[data-skip-link]')) return
         const key = event.key
-        // if keydown event is nog an enter, return and exit
+
         if (key !== 'Enter') return
-        // prevent default anchor behaviour
         event.preventDefault()
         const target = event.target.getAttribute('href')
 
-        // NOTE: add this when you have content or hyperlinks to skip before you main menu!
-        // set focus to first menu item for skip link to main navigation
-        // if (target === '#main-navigation') {
-        //   const navigation = document.querySelector('#main-navigation')
-        //   navigation.querySelector('a').focus()
-        // }
+        if (target === '#main-navigation') {
+          const navigation = document.querySelector('#main-navigation')
+          navigation.querySelector('a').focus()
+        }
 
-        // set focus to first h1 for skip link to main content
         if (target === '#main-content') {
-          document.querySelector('h1').focus()
+          const h1 = document.querySelector('h1')
+          h1.setAttribute('tabindex', '-1')
+          h1.focus()
         }
       })
     })

src/pages/about.astro

@@ -0,0 +1,18 @@
+---
+import DefaultLayout from '../layouts/DefaultLayout.astro'
+---
+
+<DefaultLayout title="About">
+  <section class="margin-48">
+    <div class="container">
+      <h1>About page</h1>
+    </div>
+  </section>
+  <section class="margin-24">
+    <div class="container" data-auto-grid="2">
+      <p>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!</p>
+      <p>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!</p>
+    </div>
+  </section>
+</DefaultLayout>
+

src/pages/contact.astro

@@ -0,0 +1,19 @@
+---
+import DefaultLayout from '../layouts/DefaultLayout.astro'
+---
+
+<DefaultLayout title="Contact">
+  <section class="margin-48">
+    <div class="container">
+      <h1>Contact page</h1>
+    </div>
+  </section>
+  <section class="margin-24">
+    <div class="container" data-auto-grid="2">
+      <p>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!</p>
+      <p>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!</p>
+    </div>
+  </section>
+</DefaultLayout>
+
+

src/pages/index.astro

@@ -6,7 +6,7 @@ import DarkMode from '../components/DarkMode.astro'
 <DefaultLayout title="Home">
   <section class="margin-48">
     <div class="container">
-      <h1 tabindex="-1">Hello world!</h1><br>
+      <h1>Hello world!</h1><br>
       <DarkMode client:load />
     </div>
   </section>