Skip to content

Commit 062e4bd

Browse files
markteekmanmarkteekman
authored
Merge pull request #119 from markteekman/next
Update project to v3.3.0 with Incluud branding and latest dependencies
2 parents b75df9d + 5d8101a commit 062e4bd

File tree

8 files changed

+181
-86
lines changed

8 files changed

+181
-86
lines changed

‎.prettierrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
"semi": false,
44
"singleQuote": true,
55
"printWidth": 120,
6-
"plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
6+
"plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss", "prettier-plugin-css-order"],
77
"pluginSearchDirs": false
88
}

‎README.md‎

Lines changed: 55 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
11
# Accessible Astro Starter
22

3+
[![Built with Astro](https://astro.badg.es/v2/built-with-astro/small.svg)](https://astro.build)
4+
35
![accessible-astro-starter](https://github.com/user-attachments/assets/f3538452-5d57-4118-b713-4631dd51bd84)
46

5-
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!
7+
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.
8+
9+
[![LIVE DEMO](https://img.shields.io/badge/LIVE_DEMO-4ECCA3?style=for-the-badge&logo=astro&logoColor=black)](https://accessible-astro.netlify.app//)  
10+
[![DOCUMENTATION](https://img.shields.io/badge/DOCUMENTATION-A682FF?style=for-the-badge&logo=astro&logoColor=black)](https://accessible-astro.incluud.dev/)  
11+
[![Follow on X](https://img.shields.io/badge/X-000000?style=for-the-badge&logo=x&logoColor=white)](https://x.com/incluud)  
12+
[![Follow on BlueSky](https://img.shields.io/badge/BlueSky-0285FF?style=for-the-badge&logo=bluesky&logoColor=white)](https://bsky.app/profile/incluud.dev)  
13+
[![Sponsor on Open Collective](https://img.shields.io/badge/Open%20Collective-7FADF2?style=for-the-badge&logo=opencollective&logoColor=white)](https://opencollective.com/incluud)  
14+
[![Sponsor on GitHub](https://img.shields.io/badge/sponsor-30363D?style=for-the-badge&logo=GitHub-Sponsors&logoColor=EA4AAA)](https://github.com/sponsors/incluud)
15+
16+
## Our mission
617

7-
🚀 [Live Preview](https://accessible-astro.netlify.app/)
18+
> Provide developers with accessible, easy-to-use components that make building inclusive web applications simpler and faster, without compromising on customization or performance.
819
9-
## ♿ (Accessibility) Features
20+
## (Accessibility) Features
1021

11-
- Astro 5.0
22+
- Astro 5+
1223
- Tailwind CSS support
1324
- Prettier integration with `prettier-plugin-astro` and `prettier-plugin-tailwind`
1425
- 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
3142
- `prefers-reduced-motion` disables animations for users that have this preference turned on
3243
- Ships with many components such as Accordions, Breadcrumbs, Modals, Pagination [and many more](https://accessible-astro.dev/accessible-components)
3344
- A collection of utility classes such as breakpoints, button classes, font settings, resets and outlines in `src/assets/scss/base`
34-
- View Transitions (⚠️ see [astro-docs](https://docs.astro.build/en/guides/view-transitions/#accessibility) for accessibility considerations)
45+
- Astro's View Transitions
3546

36-
## 🚀 Getting started
47+
## Getting started
3748

3849
Clone this theme locally and run any of the following commands in your terminal:
3950

@@ -44,22 +55,48 @@ Clone this theme locally and run any of the following commands in your terminal:
4455
| `npm run build` | Build your production site to `./dist/` |
4556
| `npm run preview` | Preview your build locally, before deploying |
4657

47-
## 📦 Other Accessible Astro projects
58+
## Accessible Astro projects
59+
60+
- [Accessible Astro Starter](https://github.com/incluud/accessible-astro-starter): Fully accessible starter for kickstarting Astro projects, with Tailwind.
61+
- [Accessible Astro Components](https://github.com/incluud/accessible-astro-components/): Library of reusable, accessible components build for Astro.
62+
- [Accessible Astro Dashboard](https://github.com/incluud/accessible-astro-dashboard/): User-friendly dashboard interface with a login screen and widgets.
63+
- [Accessible Astro Docs](https://github.com/incluud/accessible-astro-docs): Comprehensive documentation for all Accessible Astro projects.
64+
65+
Check out our [roadmap](https://github.com/orgs/incluud/projects/4/views/1) to see what's coming next!
66+
67+
## Contributing
68+
69+
We welcome contributions to improve the documentation! You can help by:
70+
71+
1. [Filing an issue](https://github.com/incluud/accessible-astro-starter/issues)
72+
2. [Submitting a pull request](https://github.com/incluud/accessible-astro-starter/pulls)
73+
3. [Starting a discussion](https://github.com/incluud/accessible-astro-starter/discussions)
74+
4. [Supporting on Open Collective](https://opencollective.com/incluud)
75+
76+
## Support this project
77+
78+
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.
79+
80+
[![Sponsor on Open Collective](https://img.shields.io/badge/Open%20Collective-7FADF2?style=for-the-badge&logo=opencollective&logoColor=white)](https://opencollective.com/incluud)
81+
82+
## Together we make a difference
4883

49-
- [Accessible Astro Dashboard](https://github.com/markteekman/accessible-astro-dashboard/)
50-
- [Accessible Astro Components](https://github.com/markteekman/accessible-astro-components/)
84+
We want to express our heartfelt gratitude to everyone who contributes to making the web more accessible:
5185

52-
## ❤️ Helping out
86+
<a href="https://github.com/incluud/accessible-astro-starter/graphs/contributors">
87+
<img src="https://contrib.rocks/image?repo=incluud/accessible-astro-starter" />
88+
</a>
5389

54-
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:
90+
- **The Astro team** for creating an amazing static site generator and the wonderful Starlight theme
91+
- **Our contributors** who dedicate their time and expertise to improve these tools
92+
- **Our sponsors** who help make this project sustainable
93+
- **The web community** for embracing and promoting web accessibility
94+
- **You, the developer** for choosing to make your projects more accessible
5595

56-
1. [Filing an issue](https://github.com/markteekman/accessible-astro-starter/issues)
57-
2. [Submitting a pull request](https://github.com/markteekman/accessible-astro-starter/pulls)
58-
3. [Starting a discussion](https://github.com/markteekman/accessible-astro-starter/discussions)
59-
4. [Buying me a coffee!](https://www.buymeacoffee.com/markteekman)
96+
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. ✨
6097

61-
## ☕ Thank you!
98+
Remember: Accessibility is not a feature, it's a fundamental right. Thank you for being part of this journey!
6299

63-
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 :)
100+
## The story behind Accessible Astro
64101

65-
[![buymeacoffee-button](https://user-images.githubusercontent.com/3909046/150683481-be070424-7bb0-4dd7-a3cb-43b5605163f5.png)](https://www.buymeacoffee.com/markteekman)
102+
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.

‎package.json‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,59 @@
11
{
22
"name": "accessible-astro-starter",
33
"description": "An Accessible Starter Theme for Astro including several accessibility features and tools to help you build faster.",
4-
"version": "3.2.5",
5-
"author": "Mark Teekman",
4+
"version": "3.3.0",
5+
"author": "Incluud",
6+
"license": "MIT",
67
"homepage": "https://accessible-astro.netlify.app/",
78
"scripts": {
89
"dev": "astro dev",
910
"start": "astro dev",
1011
"build": "astro build",
1112
"preview": "astro preview"
1213
},
14+
"keywords": [
15+
"astro",
16+
"astro-component",
17+
"astro-components",
18+
"accessible",
19+
"accessibility",
20+
"a11y",
21+
"wcag",
22+
"responsive",
23+
"ui-library",
24+
"ui-components",
25+
"blog"
26+
],
27+
"repository": {
28+
"type": "git",
29+
"url": "git+https://github.com/incluud/accessible-astro-starter.git"
30+
},
31+
"bugs": {
32+
"url": "https://github.com/incluud/accessible-astro-starter/issues"
33+
},
1334
"devDependencies": {
14-
"@astrojs/mdx": "^4.0.3",
35+
"@astrojs/mdx": "^4.0.8",
1536
"@astrojs/partytown": "^2.1.3",
16-
"@astrojs/tailwind": "^5.1.4",
37+
"@astrojs/tailwind": "^6.0.0",
1738
"@iconify-json/ion": "^1.2.1",
1839
"@iconify-json/mdi": "^1.2.1",
1940
"@typescript-eslint/eslint-plugin": "^6.21.0",
2041
"@typescript-eslint/parser": "^6.21.0",
21-
"astro": "^5.1.3",
42+
"astro": "^5.3.0",
2243
"astro-compress": "^2.3.5",
2344
"astro-icon": "^1.1.4",
2445
"eslint": "^8.57.0",
2546
"eslint-plugin-astro": "^0.31.4",
2647
"eslint-plugin-jsx-a11y": "^6.10.2",
2748
"prettier": "^3.4.1",
2849
"prettier-plugin-astro": "^0.14.1",
50+
"prettier-plugin-css-order": "^2.1.2",
2951
"prettier-plugin-tailwindcss": "^0.6.9",
3052
"sass": "^1.81.0",
3153
"svgo": "^3.3.2",
3254
"tailwindcss": "^3.4.15"
3355
},
3456
"dependencies": {
35-
"accessible-astro-components": "^3.0.1"
57+
"accessible-astro-components": "^4.0.1"
3658
}
3759
}

‎src/components/Header.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
22
import Navigation from '../components/Navigation.astro'
3-
import { SkipLinks } from 'accessible-astro-components'
3+
import { SkipLink } from 'accessible-astro-components'
44
import { Icon } from 'astro-icon/components'
55
---
66

77
<header>
8-
<SkipLinks />
8+
<SkipLink />
99
<Navigation>
1010
<li class="menu-item">
1111
<a href="/">Home</a>
@@ -28,7 +28,7 @@ import { Icon } from 'astro-icon/components'
2828
</ul>
2929
</li>
3030
<li class="menu-item">
31-
<a href="#" title="external link" rel="external noopener noreferrer">External Link</a>
31+
<a href="https://accessible-astro.incluud.dev/" rel="external">Docs</a>
3232
</li>
3333
<li class="menu-item type-icon">
3434
<a href="https://github.com/markteekman/accessible-astro-starter" title="Go to the GitHub page">

‎src/components/Hero.astro‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,11 @@ const { src = '/astronaut-hero-img.webp' } = Astro.props
1212
<slot><span class="text-gradient">Accessible</span> Starter for Astro</slot>
1313
</h1>
1414
<div class="flex flex-col gap-3 min-[500px]:flex-row">
15-
<a class="button has-icon" href="https://github.com/markteekman/accessible-astro-starter">
15+
<a class="button has-icon" href="https://github.com/incluud/accessible-astro-starter">
1616
<Icon name="ion:star-outline" />
1717
Star on GitHub
1818
</a>
19-
<a
20-
class="button has-icon color-secondary"
21-
href="https://github.com/markteekman/accessible-astro-starter/blob/main/README.md"
22-
>
19+
<a class="button has-icon color-secondary" href="https://accessible-astro.incluud.dev/">
2320
<Icon name="ion:bookmark-outline" />
2421
Read the Docs
2522
</a>

‎src/components/Navigation.astro‎

Lines changed: 42 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -223,14 +223,14 @@ import logo from '../assets/img/logo.svg'
223223
#main-navigation {
224224
> .container {
225225
display: flex;
226-
justify-content: space-between;
227226
flex-wrap: wrap;
227+
justify-content: space-between;
228228
}
229229

230230
&.is-desktop {
231231
.desktop-menu {
232-
visibility: visible;
233232
position: static;
233+
visibility: visible;
234234
}
235235

236236
.mobile-menu {
@@ -254,10 +254,10 @@ import logo from '../assets/img/logo.svg'
254254
}
255255

256256
.desktop-menu {
257-
visibility: hidden;
258-
z-index: -99;
259257
position: absolute;
260258
left: 0;
259+
visibility: hidden;
260+
z-index: -99;
261261
}
262262

263263
.responsive-toggle {
@@ -279,9 +279,9 @@ import logo from '../assets/img/logo.svg'
279279

280280
a,
281281
button {
282-
text-decoration: none;
283282
font-size: 1.125rem;
284283
line-height: 1.6875rem;
284+
text-decoration: none;
285285
}
286286

287287
a:hover,
@@ -290,8 +290,8 @@ import logo from '../assets/img/logo.svg'
290290
.has-dropdown > button:hover,
291291
.has-dropdown > button:focus {
292292
text-decoration: underline;
293-
text-decoration-thickness: 1px;
294293
text-decoration-style: wavy;
294+
text-decoration-thickness: 1px;
295295
text-underline-offset: 7px;
296296
}
297297

@@ -317,8 +317,8 @@ import logo from '../assets/img/logo.svg'
317317
a,
318318
button {
319319
display: block;
320-
width: 100%;
321320
padding: 0.5rem 0;
321+
width: 100%;
322322
}
323323
}
324324

@@ -329,9 +329,9 @@ import logo from '../assets/img/logo.svg'
329329
display: flex;
330330
align-items: center;
331331
gap: 0.5rem;
332-
padding: 0;
333332
margin-top: -1px;
334333
border: none;
334+
padding: 0;
335335
color: var(--action-color);
336336

337337
&:hover {
@@ -343,20 +343,20 @@ import logo from '../assets/img/logo.svg'
343343
}
344344

345345
&::after {
346-
content: '';
347-
width: 0.85rem;
348-
height: 0.75em;
346+
transform: rotate(135deg);
349347
margin-top: -0.25rem;
350-
border-style: solid;
351348
border-width: 0.2em 0.2em 0 0;
349+
border-style: solid;
352350
border-color: var(--action-color);
353-
transform: rotate(135deg);
351+
width: 0.85rem;
352+
height: 0.75em;
353+
content: '';
354354
}
355355

356356
&.show {
357357
&::after {
358-
margin-top: 0.25rem;
359358
transform: rotate(-45deg);
359+
margin-top: 0.25rem;
360360
}
361361

362362
~ ul {
@@ -370,45 +370,48 @@ import logo from '../assets/img/logo.svg'
370370
ul {
371371
display: none;
372372
position: absolute;
373-
z-index: 100;
374-
min-width: 260px;
375373
top: 125%;
376374
right: 0;
377375
bottom: auto;
378376
left: 0;
379-
padding: 1rem;
380-
background-color: var(--neutral-background);
381-
border: 2px solid black;
377+
z-index: 100;
382378
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
379+
border: 2px solid black;
380+
background-color: var(--neutral-background);
381+
padding: 1rem;
382+
min-width: 260px;
383383
}
384384
}
385-
}
386385

387-
.darkmode-toggle {
388-
padding: 0;
389-
border: none;
386+
.darkmode-toggle {
387+
border: none;
388+
padding: 0;
390389

391-
svg {
392-
width: 30px;
393-
margin-top: 4px;
394-
}
395-
396-
svg path {
397-
fill: var(--action-color);
398-
}
390+
.icon {
391+
margin-top: 4px;
392+
inline-size: 30px;
393+
block-size: 30px;
394+
}
399395

400-
&:hover {
401396
svg path {
402-
fill: var(--action-color-state);
397+
fill: var(--action-color);
403398
}
404-
}
405-
406-
&:focus {
407-
@include outline;
408399

409-
&:not(:focus-visible) {
410-
outline: none;
400+
&:hover {
411401
box-shadow: none;
402+
403+
svg path {
404+
fill: var(--action-color-state);
405+
}
406+
}
407+
408+
&:focus {
409+
@include outline;
410+
411+
&:not(:focus-visible) {
412+
outline: none;
413+
box-shadow: none;
414+
}
412415
}
413416
}
414417
}

0 commit comments

Comments
 (0)