Update project to v3.3.0 with Incluud branding and latest dependencies

markteekman · markteekman · commit 04fad00e3512 · 2025-02-13T20:08:39.000+01:00
- Upgrade Astro and Tailwind dependencies
- Update package.json with new version, author, and keywords
- Refresh README with new branding, badges, and expanded project information
- Update components to use latest accessible-astro-components
- Add new documentation links and project mission statement
- Modify Header, Hero, and Accessible Components pages with updated links
diff --git a/README.md b/README.md
@@ -1,14 +1,25 @@
 # Accessible Astro Starter
 
+[![Built with Astro](https://astro.badg.es/v2/built-with-astro/small.svg)](https://astro.build)
+
 ![accessible-astro-starter](https://github.com/user-attachments/assets/f3538452-5d57-4118-b713-4631dd51bd84)
 
-Accessible Astro Starter is a ready to use, SEO and a11y friendly blogging theme. It contains plenty of accessible components to build several page types, Tailwind CSS to help you build faster and example pages such as a dynamic Blog, 404, Markdown and MDX. This theme is designed to help you build your project faster and provide a solid base for accessibility!
+A ready-to-use, SEO and accessibility-focused Astro starter template. Built with modern web standards and WCAG guidelines in mind, it provides a solid foundation for creating inclusive websites. Features Tailwind CSS integration, comprehensive component library, and example pages including a dynamic blog, 404, and MDX support.
+
+[![LIVE DEMO](https://img.shields.io/badge/LIVE_DEMO-4ECCA3?style=for-the-badge&logo=astro&logoColor=black)](https://accessible-astro.netlify.app//) &nbsp;
+[![DOCUMENTATION](https://img.shields.io/badge/DOCUMENTATION-A682FF?style=for-the-badge&logo=astro&logoColor=black)](https://accessible-astro.incluud.dev/) &nbsp;
+[![Follow on X](https://img.shields.io/badge/X-000000?style=for-the-badge&logo=x&logoColor=white)](https://x.com/incluud) &nbsp;
+[![Follow on BlueSky](https://img.shields.io/badge/BlueSky-0285FF?style=for-the-badge&logo=bluesky&logoColor=white)](https://bsky.app/profile/incluud.dev) &nbsp;
+[![Sponsor on Open Collective](https://img.shields.io/badge/Open%20Collective-7FADF2?style=for-the-badge&logo=opencollective&logoColor=white)](https://opencollective.com/incluud) &nbsp;
+[![Sponsor on GitHub](https://img.shields.io/badge/sponsor-30363D?style=for-the-badge&logo=GitHub-Sponsors&logoColor=EA4AAA)](https://github.com/sponsors/incluud)
+
+## Our mission
 
-🚀 [Live Preview](https://accessible-astro.netlify.app/)
+> Provide developers with accessible, easy-to-use components that make building inclusive web applications simpler and faster, without compromising on customization or performance.
 
-## ♿ (Accessibility) Features
+## (Accessibility) Features
 
-- Astro 5.0
+- Astro 5+
 - Tailwind CSS support
 - Prettier integration with `prettier-plugin-astro` and `prettier-plugin-tailwind`
 - ESLint integration with strict accessibility settings for `eslint-plugin-jsx-a11y`
@@ -31,9 +42,9 @@ Accessible Astro Starter is a ready to use, SEO and a11y friendly blogging theme
 - `prefers-reduced-motion` disables animations for users that have this preference turned on
 - Ships with many components such as Accordions, Breadcrumbs, Modals, Pagination [and many more](https://accessible-astro.dev/accessible-components)
 - A collection of utility classes such as breakpoints, button classes, font settings, resets and outlines in `src/assets/scss/base`
-- View Transitions (⚠️ see [astro-docs](https://docs.astro.build/en/guides/view-transitions/#accessibility) for accessibility considerations)
+- Astro's View Transitions
 
-## 🚀 Getting started
+## Getting started
 
 Clone this theme locally and run any of the following commands in your terminal:
 
@@ -44,22 +55,48 @@ Clone this theme locally and run any of the following commands in your terminal:
 | `npm run build`   | Build your production site to `./dist/`      |
 | `npm run preview` | Preview your build locally, before deploying |
 
-## 📦 Other Accessible Astro projects
+## Accessible Astro projects
+
+- [Accessible Astro Starter](https://github.com/incluud/accessible-astro-starter): Fully accessible starter for kickstarting Astro projects, with Tailwind.
+- [Accessible Astro Components](https://github.com/incluud/accessible-astro-components/): Library of reusable, accessible components build for Astro.
+- [Accessible Astro Dashboard](https://github.com/incluud/accessible-astro-dashboard/): User-friendly dashboard interface with a login screen and widgets.
+- [Accessible Astro Docs](https://github.com/incluud/accessible-astro-docs): Comprehensive documentation for all Accessible Astro projects.
+
+Check out our [roadmap](https://github.com/orgs/incluud/projects/4/views/1) to see what's coming next!
+
+## Contributing
+
+We welcome contributions to improve the documentation! You can help by:
+
+1. [Filing an issue](https://github.com/incluud/accessible-astro-starter/issues)
+2. [Submitting a pull request](https://github.com/incluud/accessible-astro-starter/pulls)
+3. [Starting a discussion](https://github.com/incluud/accessible-astro-starter/discussions)
+4. [Supporting on Open Collective](https://opencollective.com/incluud)
+
+## Support this project
+
+Your support helps us cover basic costs and continue building accessible solutions for the Astro ecosystem. By becoming a sponsor, you're not just supporting code – you're helping create a more inclusive web for everyone. Every contribution, big or small, helps maintain and improve these accessibility-focused tools.
+
+[![Sponsor on Open Collective](https://img.shields.io/badge/Open%20Collective-7FADF2?style=for-the-badge&logo=opencollective&logoColor=white)](https://opencollective.com/incluud)
+
+## Together we make a difference
 
-- [Accessible Astro Dashboard](https://github.com/markteekman/accessible-astro-dashboard/)
-- [Accessible Astro Components](https://github.com/markteekman/accessible-astro-components/)
+We want to express our heartfelt gratitude to everyone who contributes to making the web more accessible:
 
-## ❤️ Helping out
+<a href="https://github.com/incluud/accessible-astro-starter/graphs/contributors">
+<img src="https://contrib.rocks/image?repo=incluud/accessible-astro-starter" />
+</a>
 
-If you find that something isn't working right then I'm always happy to hear it to improve this starter! You can contribute in many ways and forms. Let me know by either:
+- **The Astro team** for creating an amazing static site generator and the wonderful Starlight theme
+- **Our contributors** who dedicate their time and expertise to improve these tools
+- **Our sponsors** who help make this project sustainable
+- **The web community** for embracing and promoting web accessibility
+- **You, the developer** for choosing to make your projects more accessible
 
-1. [Filing an issue](https://github.com/markteekman/accessible-astro-starter/issues)
-2. [Submitting a pull request](https://github.com/markteekman/accessible-astro-starter/pulls)
-3. [Starting a discussion](https://github.com/markteekman/accessible-astro-starter/discussions)
-4. [Buying me a coffee!](https://www.buymeacoffee.com/markteekman)
+Together, we're not just building documentation or components – we're creating a more inclusive and accessible web for everyone. Every contribution, whether it's code, documentation, bug reports, or feedback, helps move us closer to this goal. ✨
 
-## ☕ Thank you!
+Remember: Accessibility is not a feature, it's a fundamental right. Thank you for being part of this journey!
 
-A big thank you to the creators of the awesome Astro static site generator and to all using this starter to make the web a bit more accessible for all people around the world :)
+## The story behind Accessible Astro
 
-[![buymeacoffee-button](https://user-images.githubusercontent.com/3909046/150683481-be070424-7bb0-4dd7-a3cb-43b5605163f5.png)](https://www.buymeacoffee.com/markteekman)
+Accessible Astro started as a personal project by [Mark Teekman](https://github.com/markteekman) in 2021 when Astro was in its early stages, born from a passion for web accessibility and the Astro framework. What began as a single starter template grew into a family of accessible solutions, leading to the creation of [Incluud](https://github.com/incluud), an initiative with [Peter Padberg](https://github.com/peterpadberg) to make the web more inclusive. Today, these projects continue to grow and evolve with the help of our amazing community, staying true to their original purpose: making web accessibility easier for developers and better for everyone.
diff --git a/package.json b/package.json
@@ -1,24 +1,45 @@
 {
   "name": "accessible-astro-starter",
   "description": "An Accessible Starter Theme for Astro including several accessibility features and tools to help you build faster.",
-  "version": "3.2.5",
-  "author": "Mark Teekman",
+  "version": "3.3.0",
+  "author": "Incluud",
+  "license": "MIT",
   "homepage": "https://accessible-astro.netlify.app/",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview"
   },
+  "keywords": [
+    "astro",
+    "astro-component",
+    "astro-components",
+    "accessible",
+    "accessibility",
+    "a11y",
+    "wcag",
+    "responsive",
+    "ui-library",
+    "ui-components",
+    "blog"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/incluud/accessible-astro-starter.git"
+  },
+  "bugs": {
+    "url": "https://github.com/incluud/accessible-astro-starter/issues"
+  },
   "devDependencies": {
-    "@astrojs/mdx": "^4.0.3",
+    "@astrojs/mdx": "^4.0.8",
     "@astrojs/partytown": "^2.1.3",
-    "@astrojs/tailwind": "^5.1.4",
+    "@astrojs/tailwind": "^6.0.0",
     "@iconify-json/ion": "^1.2.1",
     "@iconify-json/mdi": "^1.2.1",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "astro": "^5.1.3",
+    "astro": "^5.3.0",
     "astro-compress": "^2.3.5",
     "astro-icon": "^1.1.4",
     "eslint": "^8.57.0",
@@ -32,6 +53,6 @@
     "tailwindcss": "^3.4.15"
   },
   "dependencies": {
-    "accessible-astro-components": "^3.0.1"
+    "accessible-astro-components": "^4.0.1"
   }
 }
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,11 +1,11 @@
 ---
 import Navigation from '../components/Navigation.astro'
-import { SkipLinks } from 'accessible-astro-components'
+import { SkipLink } from 'accessible-astro-components'
 import { Icon } from 'astro-icon/components'
 ---
 
 <header>
-  <SkipLinks />
+  <SkipLink />
   <Navigation>
     <li class="menu-item">
       <a href="/">Home</a>
@@ -28,7 +28,7 @@ import { Icon } from 'astro-icon/components'
       </ul>
     </li>
     <li class="menu-item">
-      <a href="#" title="external link" rel="external noopener noreferrer">External Link</a>
+      <a href="https://accessible-astro.incluud.dev/" rel="external">Docs</a>
     </li>
     <li class="menu-item type-icon">
       <a href="https://github.com/markteekman/accessible-astro-starter" title="Go to the GitHub page">
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -12,14 +12,11 @@ const { src = '/astronaut-hero-img.webp' } = Astro.props
           <slot><span class="text-gradient">Accessible</span> Starter for Astro</slot>
         </h1>
         <div class="flex flex-col gap-3 min-[500px]:flex-row">
-          <a class="button has-icon" href="https://github.com/markteekman/accessible-astro-starter">
+          <a class="button has-icon" href="https://github.com/incluud/accessible-astro-starter">
             <Icon name="ion:star-outline" />
             Star on GitHub
           </a>
-          <a
-            class="button has-icon color-secondary"
-            href="https://github.com/markteekman/accessible-astro-starter/blob/main/README.md"
-          >
+          <a class="button has-icon color-secondary" href="https://accessible-astro.incluud.dev/">
             <Icon name="ion:bookmark-outline" />
             Read the Docs
           </a>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -388,8 +388,9 @@ import logo from '../assets/img/logo.svg'
     padding: 0;
     border: none;
 
-    svg {
-      width: 30px;
+    .icon {
+      inline-size: 30px;
+      block-size: 30px;
       margin-top: 4px;
     }
 
@@ -398,6 +399,8 @@ import logo from '../assets/img/logo.svg'
     }
 
     &:hover {
+      box-shadow: none;
+
       svg path {
         fill: var(--action-color-state);
       }
diff --git a/src/pages/accessible-components.astro b/src/pages/accessible-components.astro
@@ -15,6 +15,7 @@ import {
   TabsList,
   TabsTab,
   TabsPanel,
+  Video,
 } from 'accessible-astro-components'
 ---
 
@@ -25,15 +26,16 @@ import {
       <p class="text-2xl">
         This theme has a lot of extra a11y components provided by the <a
           href="https://github.com/markteekman/accessible-astro-components">Accessible Astro Components</a
-        > NPM package to help you build accessible pages faster:
+        > NPM package to help you build accessible pages faster. To learn more about the components and how to use them,
+        checkout our <a href="https://accessible-astro.incluud.dev/">documentation website</a>.
       </p>
     </div>
   </section>
   <section class="mb-12 mt-32">
     <div class="container">
       <div class="grid grid-cols-1 gap-32 md:grid-cols-2">
         <div class="space-content">
-          <h2>Accordion (normal)</h2>
+          <h2>Accordion (default)</h2>
           <Accordion>
             <AccordionItem title="First Item">
               <p>
@@ -74,38 +76,38 @@ import {
           </Accordion>
         </div>
         <div class="space-content">
-          <h2>Accordion (exclusive)</h2>
+          <h2>Accordion (chevron)</h2>
           <Accordion>
-            <AccordionItem name="exclusive" title="First Item">
+            <AccordionItem name="exclusive" title="First Item" variant="chevron">
               <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
                 accusantium debitis <a href="#">sapiente obcaecati</a> magnam incidunt sit. Molestiae exercitationem quibusdam
                 quod veritatis laboriosam est tenetur.
               </p>
               <a href="#">Tab to me!</a>
             </AccordionItem>
-            <AccordionItem name="exclusive" title="Second Item">
+            <AccordionItem name="exclusive" title="Second Item" variant="chevron">
               <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
                 accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
                 veritatis laboriosam est tenetur.
               </p>
             </AccordionItem>
-            <AccordionItem name="exclusive" title="Third Item">
+            <AccordionItem name="exclusive" title="Third Item" variant="chevron">
               <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
                 accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
                 veritatis laboriosam est tenetur.
               </p>
             </AccordionItem>
-            <AccordionItem name="exclusive" title="Fourth Item">
+            <AccordionItem name="exclusive" title="Fourth Item" variant="chevron">
               <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
                 accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
                 veritatis laboriosam est tenetur.
               </p>
             </AccordionItem>
-            <AccordionItem name="exclusive" title="Fifth Item">
+            <AccordionItem name="exclusive" title="Fifth Item" variant="chevron">
               <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
                 accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod
@@ -121,6 +123,26 @@ import {
             <BreadcrumbsItem href="/blog" label="Blog" />
             <BreadcrumbsItem currentPage={true} label="My blog post" />
           </Breadcrumbs>
+          <Breadcrumbs>
+            <BreadcrumbsItem href="/" label="Home" hasIcon>
+              <Icon name="ion:home" slot="icon" />
+            </BreadcrumbsItem>
+            <BreadcrumbsItem href="/docs" label="Documentation" />
+            <BreadcrumbsItem label="Breadcrumbs" currentPage={true} />
+          </Breadcrumbs>
+          <Breadcrumbs>
+            <BreadcrumbsItem href="/" label="Home">
+              <span slot="separator" class="separator" aria-hidden="true">
+                <Icon name="ion:chevron-forward-outline" />
+              </span>
+            </BreadcrumbsItem>
+            <BreadcrumbsItem href="/docs" label="Documentation">
+              <span slot="separator" class="separator" aria-hidden="true">
+                <Icon name="ion:chevron-forward-outline" />
+              </span>
+            </BreadcrumbsItem>
+            <BreadcrumbsItem label="Breadcrumbs" currentPage={true} />
+          </Breadcrumbs>
         </div>
         <div class="space-content">
           <h2>Cards</h2>
@@ -157,26 +179,26 @@ import {
         <div class="space-content">
           <h2>Notification</h2>
           <Notification>
-            <Icon name="ion:notifications-outline" /><p><strong>Message:</strong> This is a notification!</p>
+            <Icon name="ion:notifications-outline" size="24" /><p><strong>Message:</strong> This is a notification!</p>
           </Notification>
           <Notification role="status" type="info">
-            <Icon name="ion:information-circle-outline" /><p>
+            <Icon name="ion:information-circle-outline" size="24" /><p>
               <strong>Info:</strong> This is a notification of type info.
             </p>
           </Notification>
           <Notification role="status" type="success">
-            <Icon name="ion:checkbox-outline" /><p>
+            <Icon name="ion:checkbox-outline" size="24" /><p>
               <strong>Success:</strong> This is a notification of type success.
             </p>
           </Notification>
           <Notification role="status" type="warning">
-            <Icon name="ion:warning-outline" /><p>
+            <Icon name="ion:warning-outline" size="24" /><p>
               <strong>Warning:</strong> This is a notification of type warning and goes on multiple lines to see how that
               looks.
             </p>
           </Notification>
           <Notification role="alert" type="error">
-            <Icon name="ion:alert-circle-outline" /><p>
+            <Icon name="ion:alert-circle-outline" size="24" /><p>
               <strong>Error:</strong> This is a notification of type error.
             </p>
           </Notification>
@@ -248,4 +270,18 @@ import {
       </div>
     </div>
   </section>
+  <section class="mb-12 mt-32">
+    <div class="container">
+      <div class="grid grid-cols-1 gap-32 md:grid-cols-2">
+        <div class="space-content">
+          <h2>Video (default)</h2>
+          <Video src="https://www.youtube.com/watch?v=j8K-ESJF814" title="Video" />
+        </div>
+        <div class="space-content">
+          <h2>Video (aspect ratio)</h2>
+          <Video src="https://www.youtube.com/watch?v=j8K-ESJF814" title="Video" ratio="1:1" />
+        </div>
+      </div>
+    </div>
+  </section>
 </DefaultLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -72,7 +72,7 @@ import { Accordion, AccordionItem } from 'accessible-astro-components'
       </div>
       <div class="space-content">
         <Accordion>
-          <AccordionItem name="exclusive" title="What is WCAG and why is it important?">
+          <AccordionItem name="exclusive" title="What is WCAG and why is it important?" open>
             <p>
               WCAG (Web Content Accessibility Guidelines) is a set of internationally recognized standards for web
               accessibility. Following WCAG ensures your website is usable by people with various disabilities,

Original file line number	Diff line number	Diff line change
`@@ -388,8 +388,9 @@ import logo from '../assets/img/logo.svg'`
`388`	`388`	`padding: 0;`
`389`	`389`	`border: none;`
`390`	`390`
`391`		`- svg {`
`392`		`- width: 30px;`
	`391`	`+ .icon {`
	`392`	`+ inline-size: 30px;`
	`393`	`+ block-size: 30px;`
`393`	`394`	`margin-top: 4px;`
`394`	`395`	`}`
`395`	`396`
`@@ -398,6 +399,8 @@ import logo from '../assets/img/logo.svg'`
`398`	`399`	`}`
`399`	`400`
`400`	`401`	`&:hover {`
	`402`	`+ box-shadow: none;`
	`403`	`+`
`401`	`404`	`svg path {`
`402`	`405`	`fill: var(--action-color-state);`
`403`	`406`	`}`