From 7af9abff1dd9efe655295caf2c5a5b2a308d76b0 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sun, 31 Aug 2025 14:21:27 +0200 Subject: [PATCH 01/27] feat: enhance Footer component with accessible-astr-components Link and add author credit for the astronaut image --- src/components/Footer.astro | 62 ++++++++++++++++++++++++------------- 1 file changed, 40 insertions(+), 22 deletions(-) diff --git a/src/components/Footer.astro b/src/components/Footer.astro index ae974fbf..33cc2001 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -2,6 +2,7 @@ import CallToAction from './CallToAction.astro' import ExternalLink from './ExternalLink.astro' import Logo from './Logo.astro' +import { Link } from 'accessible-astro-components' /** * Footer Component @@ -17,42 +18,58 @@ const currentYear = new Date().getFullYear()

Footer

-

Navigation

+

Theme features

    -
  • Home
    • -
  • Blog
    • -
  • Portfolio
    • +
  • Accessibility statement
    • +
  • Accessible components
    • +
  • Color contrast checker
    • +
  • Markdown page
    • +
  • MDX page
    • +
  • 404 page
-

Theme features

+

Incluud projects

Developer tools

  • - ARIA Authoring Practices + Web Developer Extension
  • - Focus Management + Accessibility Insights
  • - Semantic HTML Guide + axe DevTools
  • - Screen Reader Survey + WAVE Web Accessibility +
    • +
  • + ARIA Design Patterns +
    • +
  • + WCAG Plain English
@@ -64,17 +81,18 @@ const currentYear = new Date().getFullYear() > + Ctrl + Enter for Narrator.

+

Cute astronaut image by Kobby Mendez on Unsplash.

- © {currentYear} - Starter Theme for Astro. + © {currentYear} - Starter Theme for Astro.

- Made with ❤️ by Mark Teekman. Part of IncluudMark Teekman. Part of Incluud.

From e80178bf6ea3c4983a704078b50f82efa2c18bd7 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sun, 31 Aug 2025 14:23:10 +0200 Subject: [PATCH 02/27] feat: update Header component to use accessible-astro-components Link and add new contact page link --- src/components/Header.astro | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Header.astro b/src/components/Header.astro index d0d43d2f..049f163a 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -48,6 +48,9 @@ import { Icon } from 'astro-icon/components' +
  • + Contact +
  • Docs
    • From d854c90ca61b86ab0e4261d5eaeea5692ab8bce6 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Wed, 3 Sep 2025 14:41:26 +0200 Subject: [PATCH 03/27] feat: add FeaturedPosts and FeaturedProjects components for showcasing content --- src/components/FeaturedPosts.astro | 89 +++++++++++++++++++++++++++ src/components/FeaturedProjects.astro | 67 ++++++++++++++++++++ src/layouts/DefaultLayout.astro | 8 +++ src/pages/blog/[...page].astro | 19 +----- src/pages/portfolio/[...page].astro | 21 +------ 5 files changed, 169 insertions(+), 35 deletions(-) create mode 100644 src/components/FeaturedPosts.astro create mode 100644 src/components/FeaturedProjects.astro diff --git a/src/components/FeaturedPosts.astro b/src/components/FeaturedPosts.astro new file mode 100644 index 00000000..4070b343 --- /dev/null +++ b/src/components/FeaturedPosts.astro @@ -0,0 +1,89 @@ +--- +import { Card, Heading, Link } from 'accessible-astro-components' + +// Import images directly for optimization +import postImage1 from '@assets/images/posts/post-image-1.png' +import postImage2 from '@assets/images/posts/post-image-2.png' +import postImage3 from '@assets/images/posts/post-image-3.png' + +/** + * FeaturedPosts Component + * + * @description A component that displays featured blog posts from JSONPlaceholder API + */ +interface Props { + /** + * Additional classes to apply to the section + */ + class?: string + /** + * The number of posts to display + * @default 3 + */ + limit?: number + /** + * The title for the section + * @default "Latest posts" + */ + title?: string +} + +interface Post { + id: number + userId: number + title: string + body: string + featuredImage: any + shortUrl: string +} + +const { class: className, limit = 3, title = 'Latest posts' } = Astro.props + +// Fetch posts from API +const response = await fetch('https://jsonplaceholder.typicode.com/posts') +const data = await response.json() + +const postImages = [postImage1, postImage2, postImage3] + +// Function to truncate title for better display +function truncateTitle(title: string): string { + const words = title.split(' ') + const truncated = words.slice(0, 4).join(' ') + return truncated +} + +// Process and limit posts for featured section +const featuredPosts: Post[] = data.slice(0, limit).map((post: any) => { + const truncatedTitle = truncateTitle(post.title) + return { + ...post, + featuredImage: postImages[post.id % postImages.length], + title: truncatedTitle, + shortUrl: truncatedTitle.replaceAll(' ', '-').toLowerCase(), + } +}) +--- + +
    +
    + {title} +
    + { + featuredPosts.map((post) => ( + + {post.body} + + )) + } +
    +
    + Read all posts +
    +
    +
    diff --git a/src/components/FeaturedProjects.astro b/src/components/FeaturedProjects.astro new file mode 100644 index 00000000..8199edd4 --- /dev/null +++ b/src/components/FeaturedProjects.astro @@ -0,0 +1,67 @@ +--- +import { Card, Heading, Link } from 'accessible-astro-components' +import { getCollection } from 'astro:content' + +// Import images directly for optimization +import projectImage1 from '@assets/images/projects/project-image-1.png' +import projectImage2 from '@assets/images/projects/project-image-2.png' +import projectImage3 from '@assets/images/projects/project-image-3.png' + +/** + * FeaturedProjects Component + * + * @description A component that displays featured projects from Astro Content Collections + */ +interface Props { + /** + * Additional classes to apply to the section + */ + class?: string + /** + * The number of projects to display + * @default 3 + */ + limit?: number + /** + * The title for the section + * @default "Featured projects" + */ + title?: string +} + +const { class: className, limit = 3, title = 'Featured projects' } = Astro.props + +// Get projects from content collection +const projects = await getCollection('projects') +const projectImages = [projectImage1, projectImage2, projectImage3] + +// Limit projects and add featured images +const featuredProjects = projects.slice(0, limit).map((project, index) => ({ + ...project, + featuredImage: projectImages[index % projectImages.length], +})) +--- + +
    +
    + {title} +
    + { + featuredProjects.map((project) => ( + + {project.data.description} + + )) + } +
    +
    + View all projects +
    +
    +
    diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro index b0b45475..3d207278 100644 --- a/src/layouts/DefaultLayout.astro +++ b/src/layouts/DefaultLayout.astro @@ -36,6 +36,8 @@ const {
    diff --git a/src/pages/blog/[...page].astro b/src/pages/blog/[...page].astro index d07d5185..28ce2e4b 100644 --- a/src/pages/blog/[...page].astro +++ b/src/pages/blog/[...page].astro @@ -17,7 +17,7 @@ interface Post { userId: number title: string body: string - featuredImage: any // Changed to any to accommodate ImageMetadata + featuredImage: any shortUrl: string } @@ -74,7 +74,9 @@ const { page } = Astro.props as Props imageComponent={post.featuredImage} url={'/blog/' + post.shortUrl} title={post.title} + headingLevel="h2" footer={'userId:' + post.userId} + fullHeight={true} > {post.body} @@ -96,18 +98,3 @@ const { page } = Astro.props as Props
    - - diff --git a/src/pages/portfolio/[...page].astro b/src/pages/portfolio/[...page].astro index c2e81858..d496697c 100644 --- a/src/pages/portfolio/[...page].astro +++ b/src/pages/portfolio/[...page].astro @@ -34,10 +34,6 @@ interface Props { } const { page } = Astro.props - -// Prepare pagination props -const currentPage = page.currentPage -const totalPages = Math.ceil(page.total / page.size) --- {project.data.description} @@ -82,18 +80,3 @@ const totalPages = Math.ceil(page.total / page.size) - - From ab0a506f225b7044daac4319b238091a52aba900 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Thu, 4 Sep 2025 16:47:33 +0200 Subject: [PATCH 04/27] feat: change extension to .ts for content collection --- src/{content.config.mjs => content.config.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/{content.config.mjs => content.config.ts} (100%) diff --git a/src/content.config.mjs b/src/content.config.ts similarity index 100% rename from src/content.config.mjs rename to src/content.config.ts From 307ca0b80a352745810256a9b4f46b4a05e9f139 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Thu, 4 Sep 2025 16:49:40 +0200 Subject: [PATCH 05/27] update: update navigation breakpoint to accommodate for added menu item --- src/assets/scss/base/_breakpoint.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/scss/base/_breakpoint.scss b/src/assets/scss/base/_breakpoint.scss index 1fcbe78a..2c2c64f2 100644 --- a/src/assets/scss/base/_breakpoint.scss +++ b/src/assets/scss/base/_breakpoint.scss @@ -6,7 +6,7 @@ $breakpoints: ( 'l': 1024px, 'xl': 1280px, '2xl': 1536px, - 'nav': 900px, + 'nav': 1000px, ) !default; @mixin breakpoint($breakpoint) { From c2b070469933ea3e058efd2c71a052f42123029d Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Thu, 4 Sep 2025 16:50:07 +0200 Subject: [PATCH 06/27] refactor: replace anchor tags with Link component in Header --- src/components/Header.astro | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index 049f163a..9420b389 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,6 +1,6 @@ --- import Navigation from '../components/Navigation.astro' -import { DarkMode, SkipLink } from 'accessible-astro-components' +import { DarkMode, Link, SkipLink } from 'accessible-astro-components' import { Icon } from 'astro-icon/components' /** @@ -14,13 +14,13 @@ import { Icon } from 'astro-icon/components'
  • - Home + Home
  • - Blog + Blog
  • - Portfolio + Portfolio
  • - Contact + Contact
  • - Docs + Docs
  • - + Go to the GitHub page - +
  • From 7087bf35f8c184b46b96d8cfec4f72520fe23e4c Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Fri, 5 Sep 2025 13:18:04 +0200 Subject: [PATCH 07/27] refactor: replace headings with Heading component and anchor tags with Link component in index.astro --- src/pages/index.astro | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index e2a48f2c..2ddfdc36 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -5,14 +5,16 @@ import Feature from '@components/Feature.astro' import Counter from '@components/Counter.astro' import ContentMedia from '@components/ContentMedia.astro' import ExternalLink from '@components/ExternalLink.astro' -import { Accordion, AccordionItem, Avatar, AvatarGroup } from 'accessible-astro-components' +import FeaturedProjects from '@components/FeaturedProjects.astro' +import FeaturedPosts from '@components/FeaturedPosts.astro' +import { Accordion, AccordionItem, Avatar, AvatarGroup, Button, Heading, Link } from 'accessible-astro-components' ---
    -

    Features

    + Features
    Keyboard navigation, focus indicators, ARIA labels, semantic HTML, and more. This theme is designed to be @@ -47,7 +49,7 @@ import { Accordion, AccordionItem, Avatar, AvatarGroup } from 'accessible-astro-
    -

    Accessible components

    + Accessible components

    This theme provides plenty of tried and tested Accessible Astro Components. Some are native to this theme and a lot of others are integrated using a -

    WCAG 2.2 AA compliant

    + WCAG 2.2 AA compliant

    Using semantic HTML, landmarks, skip links, screen reader friendly content, aria-labels, keyboard accessible navigation and components, clear outlines and tab indicators and the right color contrast, you're more certain of reaching WCAG AA compliance.

    + +
    -

    FAQ

    + FAQ

    This section demonstrates how to effectively use the Accordion component to organize and display frequently asked questions in an accessible and user-friendly way.

    - Contact support team + Contact support team
    @@ -112,8 +116,8 @@ import { Accordion, AccordionItem, Avatar, AvatarGroup } from 'accessible-astro- To make custom components accessible, focus on these key aspects: use semantic HTML where possible, implement proper keyboard support, add appropriate ARIA attributes, manage focus when needed, and ensure adequate color contrast. Always test with screen readers and keyboard navigation. Consider using - established design patterns from the ARIA Authoring Practices GuideARIA Authoring Practices Guide.

    @@ -123,7 +127,7 @@ import { Accordion, AccordionItem, Avatar, AvatarGroup } from 'accessible-astro-
    -

    Our community

    + Our community

    We're a community of developers who are passionate about making the web more accessible. We're always looking for new ways to improve the accessibility of the web. @@ -143,7 +147,7 @@ import { Accordion, AccordionItem, Avatar, AvatarGroup } from 'accessible-astro-

    -

    Impact in numbers

    + Impact in numbers
    From be69333df0037f0e857e96f4049d8f97e1664bd3 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Sat, 6 Sep 2025 13:45:14 +0200 Subject: [PATCH 08/27] feat: add contact and thank-you pages with accessible form components and validation --- src/pages/contact.astro | 125 ++++++++++++++++++++++++++++++++++++++ src/pages/thank-you.astro | 22 +++++++ 2 files changed, 147 insertions(+) create mode 100644 src/pages/contact.astro create mode 100644 src/pages/thank-you.astro diff --git a/src/pages/contact.astro b/src/pages/contact.astro new file mode 100644 index 00000000..e91012f6 --- /dev/null +++ b/src/pages/contact.astro @@ -0,0 +1,125 @@ +--- +import DefaultLayout from '@layouts/DefaultLayout.astro' +import PageHeader from '@components/PageHeader.astro' +import { Form, Input, Button, Textarea, Checkbox, Fieldset, Heading, Link, Radio } from 'accessible-astro-components' +import { Icon } from 'astro-icon/components' +--- + + + +
    +
    + Let's talk +
    +
    +
    +
    +
    +
    + + + + + + + + +