Skip to content
Merged
Show file tree
Hide file tree
Changes from 31 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
ea819d0
Enhance SCSS breakpoints and font definitions for improved responsive…
markteekman Mar 29, 2025
a4f9343
Replace color system by new OKLCH color system using light-dark(), wi…
markteekman Mar 29, 2025
1f385de
refactor: improve menu items color and add highlighted menu item option
markteekman Apr 2, 2025
900ecac
refactor: remove unused SCSS globals and outline files; enhance butto…
markteekman Apr 2, 2025
c58aa40
refactor: enhance footer structure and accessibility; update kbd styl…
markteekman Apr 4, 2025
23b1e12
feat: add ExternalLink component and enhance footer accessibility
markteekman Apr 4, 2025
a095b51
feat: introduce Logo component and enhance footer structure
markteekman Apr 11, 2025
1e3463b
refactor: update color variables for improved consistency and accessi…
markteekman Apr 11, 2025
08967e3
feat: update icon library and enhance component accessibility
markteekman Apr 11, 2025
a486e13
feat: add Atkinson Hyperlegible font family and remove Open Sans
markteekman Apr 19, 2025
a931f90
feat: implement Color Contrast Checker component and update color var…
markteekman Apr 20, 2025
15aa47a
feat: enhance Color Contrast Checker with tabbed themes and add new P…
markteekman Apr 25, 2025
1d98b06
fix: update footer accessibility tip for screen reader support
markteekman Apr 25, 2025
e30ebd6
feat: update Astro configuration and integrate Tailwind CSS 4.0
markteekman Apr 26, 2025
142af72
chore: update several dependencies
markteekman Apr 26, 2025
1f0eb38
feat: enhance homepage with community section and avatar group
markteekman Apr 26, 2025
9602405
feat: update AvatarGroup in homepage with diverse team members
markteekman Apr 26, 2025
eb0d2a6
feat: add accessibility statement template
markteekman Apr 27, 2025
72ab4ff
refactor: update SCSS for improved consistency and accessibility
markteekman Apr 27, 2025
5366dbc
feat: enhance TypeScript and modern CSS in components
markteekman Apr 28, 2025
486bed3
feat: add featured images and author details to blog components, enha…
markteekman Apr 28, 2025
e0bab31
feat: add BreakoutImage and SocialShares components for enhanced blog…
markteekman Apr 28, 2025
0cdcac7
feat: add new project content and images for enhanced portfolio prese…
markteekman May 3, 2025
e6b08a4
refactor: clean up Header and Navigation components
markteekman May 3, 2025
c962e3d
fix: update image paths and component imports in blog and portfolio p…
markteekman May 3, 2025
1b4b0ab
chore: remove unused animation styles to streamline SCSS
markteekman May 3, 2025
2b74bfe
fix: adjust minimum inline size in Navigation component for better la…
markteekman May 3, 2025
eb36c6f
feat: enhance project structure and image handling for improved perfo…
markteekman May 3, 2025
29354c5
chore: update accessible-astro-components dependency to version 4.1.1
markteekman May 3, 2025
0f65453
feat: improve accessibility and performance in components
markteekman May 3, 2025
02ffb3f
chore: bump version to 4.0.0 and add portfolio to project tags
markteekman May 3, 2025
76d552d
feat: enhance accessibility and functionality in components
markteekman May 4, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,7 @@ yarn-error.log*
package-lock.json

# astro build files
.astro
.astro

# cursor rules
.cursor/rules
28 changes: 18 additions & 10 deletions astro.config.mjs
Original file line number Diff line number Diff line change
@@ -1,21 +1,16 @@
import { defineConfig } from 'astro/config'
import mdx from '@astrojs/mdx'
import tailwind from '@astrojs/tailwind'
import compress from 'astro-compress'
import icon from 'astro-icon'
import tailwindcss from '@tailwindcss/vite'
import { fileURLToPath } from 'url'
import path from 'path'

// https://astro.build/config
export default defineConfig({
compressHTML: true,
site: 'https://accessible-astro.netlify.app',
integrations: [
mdx(),
icon(),
tailwind({
applyBaseStyles: false,
}),
compress(),
],
site: 'https://accessible-astro-starter.incluud.dev',
integrations: [mdx(), icon(), compress()],
vite: {
css: {
preprocessorOptions: {
Expand All @@ -26,5 +21,18 @@ export default defineConfig({
},
},
},
plugins: [tailwindcss()],
resolve: {
alias: {
'@components': fileURLToPath(new URL('./src/components', import.meta.url)),
'@layouts': fileURLToPath(new URL('./src/layouts', import.meta.url)),
'@assets': fileURLToPath(new URL('./src/assets', import.meta.url)),
'@content': fileURLToPath(new URL('./src/content', import.meta.url)),
'@pages': fileURLToPath(new URL('./src/pages', import.meta.url)),
'@public': fileURLToPath(new URL('./public', import.meta.url)),
'@post-images': fileURLToPath(new URL('./public/posts', import.meta.url)),
'@project-images': fileURLToPath(new URL('./public/projects', import.meta.url)),
},
},
Comment on lines +25 to +36

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Ensure path aliases are synchronized with TypeScript configuration

The path aliases defined here need to be synchronized with your tsconfig.json to ensure proper IDE support and TypeScript compilation.


🏁 Script executed:

#!/bin/bash
# Check if tsconfig.json contains corresponding path aliases
echo "Checking if tsconfig.json has matching path aliases..."
if [ -f "tsconfig.json" ]; then
  echo "tsconfig.json found, checking for path mappings..."
  grep -A 15 "\"paths\"" tsconfig.json
else
  echo "tsconfig.json not found!"
fi

# Test a few imports to verify aliases are working
echo "Checking for imports using these aliases in the codebase..."
grep -r --include="*.{ts,js,astro,tsx,jsx}" "@components/" src/
grep -r --include="*.{ts,js,astro,tsx,jsx}" "@layouts/" src/

Length of output: 694


Sync path aliases in tsconfig.json with astro.config.mjs
tsconfig.json currently only defines aliases for @components, @layouts, and @assets. You should add the remaining aliases from astro.config.mjs to ensure IDE support and correct TS compilation.

Points of attention:

  • File: tsconfig.json
  • Section: the "paths" mapping

Suggested diff:

   "paths": {
-    "@components/*": ["src/components/*"],
-    "@layouts/*": ["src/layouts/*"],
-    "@assets/*": ["src/assets/*"]
+    "@components/*":      ["src/components/*"],
+    "@layouts/*":         ["src/layouts/*"],
+    "@assets/*":          ["src/assets/*"],
+    "@content/*":         ["src/content/*"],
+    "@pages/*":           ["src/pages/*"],
+    "@public/*":          ["public/*"],
+    "@post-images/*":     ["public/posts/*"],
+    "@project-images/*":  ["public/projects/*"]
   }

After updating, restart your TS server/IDE to pick up the new mappings.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
resolve: {
alias: {
'@components': fileURLToPath(new URL('./src/components', import.meta.url)),
'@layouts': fileURLToPath(new URL('./src/layouts', import.meta.url)),
'@assets': fileURLToPath(new URL('./src/assets', import.meta.url)),
'@content': fileURLToPath(new URL('./src/content', import.meta.url)),
'@pages': fileURLToPath(new URL('./src/pages', import.meta.url)),
'@public': fileURLToPath(new URL('./public', import.meta.url)),
'@post-images': fileURLToPath(new URL('./public/posts', import.meta.url)),
'@project-images': fileURLToPath(new URL('./public/projects', import.meta.url)),
},
},
"paths": {
"@components/*": ["src/components/*"],
"@layouts/*": ["src/layouts/*"],
"@assets/*": ["src/assets/*"],
"@content/*": ["src/content/*"],
"@pages/*": ["src/pages/*"],
"@public/*": ["public/*"],
"@post-images/*": ["public/posts/*"],
"@project-images/*": ["public/projects/*"]
}

},
})
38 changes: 19 additions & 19 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "accessible-astro-starter",
"description": "An Accessible Starter Theme for Astro including several accessibility features and tools to help you build faster.",
"version": "3.4.1",
"version": "4.0.0",

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Major version upgrade requires thorough testing

The version bump to 4.0.0 indicates breaking changes in the application, which aligns with the extensive architectural changes mentioned in the PR description.


🏁 Script executed:

#!/bin/bash
# Check if there's a CHANGELOG.md file documenting the breaking changes
if [ -f "CHANGELOG.md" ]; then
  echo "CHANGELOG.md exists. Checking for version 4.0.0 entries:"
  grep -A 15 "4.0.0" CHANGELOG.md
else
  echo "No CHANGELOG.md found. Consider adding one to document breaking changes."
fi

Length of output: 180


Major version bump to 4.0.0 – document breaking changes and test thoroughly

No CHANGELOG.md was found to capture the breaking changes introduced in v4.0.0. To ensure proper team onboarding and future maintenance, please:

  • Add or update CHANGELOG.md with a “4.0.0” section summarizing all breaking changes.
  • Review and test the Tailwind integration switch to @tailwindcss/vite.
  • Validate your Astro 5.x upgrade—check routing, component APIs, and any deprecated features.
  • Confirm ESLint 9.x and Prettier 3.x configurations still lint and format as expected.
  • Verify the icon library migration to @iconify-json/lucide hasn’t affected any existing icons.

Thoroughly test the application against these changes before merging.

"author": "Incluud",
"license": "MIT",
"homepage": "https://accessible-astro.netlify.app/",
Expand All @@ -22,7 +22,8 @@
"responsive",
"ui-library",
"ui-components",
"blog"
"blog",
"portfolio"
],
"repository": {
"type": "git",
Expand All @@ -32,28 +33,27 @@
"url": "https://github.com/incluud/accessible-astro-starter/issues"
},
"devDependencies": {
"@astrojs/mdx": "^4.0.8",
"@astrojs/partytown": "^2.1.3",
"@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.3.0",
"astro-compress": "^2.3.5",
"astro-icon": "^1.1.4",
"eslint": "^8.57.0",
"eslint-plugin-astro": "^0.31.4",
"@astrojs/mdx": "^4.2.5",
"@astrojs/partytown": "^2.1.4",
"@iconify-json/lucide": "^1.2.39",
"@typescript-eslint/eslint-plugin": "^8.31.0",
"@typescript-eslint/parser": "^8.31.0",
"astro": "^5.7.5",
"astro-compress": "^2.3.8",
"astro-icon": "^1.1.5",
"eslint": "^9.0.0",
"eslint-plugin-astro": "^1.3.1",
"eslint-plugin-jsx-a11y": "^6.10.2",
"prettier": "^3.4.1",
"prettier": "^3.5.3",
"prettier-plugin-astro": "^0.14.1",
"prettier-plugin-css-order": "^2.1.2",
"prettier-plugin-tailwindcss": "^0.6.9",
"sass": "^1.81.0",
"prettier-plugin-tailwindcss": "^0.6.11",
"sass": "^1.87.0",
"svgo": "^3.3.2",
"tailwindcss": "^3.4.15"
"tailwindcss": "^4.1.4"
},
"dependencies": {
"accessible-astro-components": "^4.1.0"
"@tailwindcss/vite": "^4.1.4",
"accessible-astro-components": "^4.1.1"
}
}
Binary file added public/fonts/AtkinsonHyperlegibleNext-Bold.woff2
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file added public/fonts/AtkinsonHyperlegibleNext-Light.woff2
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
89 changes: 89 additions & 0 deletions public/fonts/OFL.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
Copyright (c) 2020, Braille Institute of America, Inc. (https://www.brailleinstitute.org/),
with Reserved Font Names: "ATKINSON" and "HYPERLEGIBLE".

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Names" refers to any names specified as such after the
copyright statement.

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder.

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical writer or other
person who contributed to the Font Software.

PERMISSION & CONDITIONS
VP/#68933639.2
Permission is hereby granted, free of charge, to any person obtaining a copy of the Font
Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and
unmodified copies of the Font Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components, in Original or
Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled, redistributed
and/or sold with any software, provided that each copy contains the above copyright
notice and this license. These can be included either as stand-alone text files, human-
readable headers or in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font Names unless
explicit written permission is granted by the Copyright Holder. This restriction only
applies to the primary font name as presented to the users.

4) The name of the Copyright Holder or the Author(s) of the Font Software shall not be
used to promote, endorse or advertise any Modified Version, except to acknowledge the
contributions of the Copyright Holder and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole, must be distributed
entirely under this license, and must not be distributed under any other license. The
requirement for fonts to remain under this license does not apply to any document
created using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO
EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR
CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR
OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT
SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
Binary file removed public/fonts/OpenSans-Bold.woff
Binary file not shown.
Binary file removed public/fonts/OpenSans-Bold.woff2
Binary file not shown.
Binary file removed public/fonts/OpenSans-ExtraBold.woff
Binary file not shown.
Binary file removed public/fonts/OpenSans-ExtraBold.woff2
Binary file not shown.
Binary file removed public/fonts/OpenSans-Italic.woff
Binary file not shown.
Binary file removed public/fonts/OpenSans-Italic.woff2
Binary file not shown.
Binary file removed public/fonts/OpenSans-Regular.woff
Binary file not shown.
Binary file removed public/fonts/OpenSans-Regular.woff2
Binary file not shown.
Binary file added public/posts/post-image-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/posts/post-image-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/posts/post-image-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/posts/post-image-4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/posts/post-image-5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/posts/post-image-6.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projects/project-image-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projects/project-image-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projects/project-image-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projects/project-image-4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projects/project-image-5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/projects/project-image-6.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/social-preview-image.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/posts/post-image-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/posts/post-image-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/posts/post-image-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/posts/post-image-4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/posts/post-image-5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/posts/post-image-6.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/projects/project-image-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/projects/project-image-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/projects/project-image-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/projects/project-image-4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/projects/project-image-5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/projects/project-image-6.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 10 additions & 13 deletions src/assets/scss/base/_breakpoint.scss
Original file line number Diff line number Diff line change
@@ -1,26 +1,23 @@
@use 'sass:map';

// | -------------------------------------------------------------
// | Breakpoint
// | -------------------------------------------------------------

$breakpoints: (
'default': 0,
'small': 24em,
'medium': 48em,
'large': 75em,
'xs': 320px,
's': 480px,
'm': 768px,
'l': 1024px,
'xl': 1280px,
'2xl': 1536px,
) !default;

@mixin breakpoint($breakpoint) {
@if map.has-key($breakpoints, $breakpoint) {
@media (min-width: map.get($breakpoints, $breakpoint)) {
@if map-has-key($breakpoints, $breakpoint) {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
} @else if (type_of($breakpoint) == number) {
@media (min-width: $breakpoint+'px') {
@media (min-width: #{$breakpoint}px) {
@content;
}
} @else {
@error "Not a correct value, check _base-breakpoints for available values.";
@error "Not a correct value";
}
}
Loading