diff --git a/package.json b/package.json index 4c534e5..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": { @@ -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" } } 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/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/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; 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' +--- + + + + + + + + + +{title} - {subtitle} 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 --- @@ -21,15 +26,16 @@ let subtitle = 'Accessible Astro Starter' - - - - - - - - - {title} - {subtitle} +
@@ -41,6 +47,31 @@ let subtitle = 'Accessible Astro Starter' \ 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 +--- + + +
+
+

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.

+
+
+
+
+

Post {page.start + 1} through {page.end + 1} of {page.total} total posts

+
    + {page.data.map((post) => ( +
  • + + {post.body} + +
    • + ))} +
+
+ +
+
+
+ + + \ 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 --- - + +
+ + + + + +

{post.title}