Feature/ux improvements

.gitignore

@@ -27,4 +27,7 @@ yarn-error.log*
 package-lock.json
 
 # astro build files
-.astro
+.astro
+
+# cursor rules
+.cursor/rules

README.md

@@ -4,7 +4,7 @@
 
 ![accessible-astro-starter](https://github.com/user-attachments/assets/f3538452-5d57-4118-b713-4631dd51bd84)
 
-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.
+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 4 integration, comprehensive component library, color contrast checker, and typography with Atkinson Hyperlegible font for improved readability. Includes dynamic blog/portfolio pages with social sharing, and full MDX support.
 
 [![LIVE DEMO](https://img.shields.io/badge/LIVE_DEMO-4ECCA3?style=for-the-badge&logo=astro&logoColor=black)](https://accessible-astro-starter.incluud.dev/)  
 [![DOCUMENTATION](https://img.shields.io/badge/DOCUMENTATION-A682FF?style=for-the-badge&logo=astro&logoColor=black)](https://accessible-astro.incluud.dev/)  
@@ -16,30 +16,39 @@ A ready-to-use, SEO and accessibility-focused Astro starter template. Built with
 
 ## (Accessibility) Features
 
-- Astro 5+
-- Tailwind CSS support
+- Astro 5.7.5+
+- Tailwind CSS 4 support
+- TypeScript integration with path aliases for easier imports
 - Prettier integration with `prettier-plugin-astro` and `prettier-plugin-tailwind`
 - ESLint integration with strict accessibility settings for `eslint-plugin-jsx-a11y`
-- Markdown and MDX support with examples included in the theme
-- Uses the awesome `astro-icon` package for the icons
+- Markdown and MDX support with comprehensive examples and components
+- Modern OKLCH color system with automatic palette generation from primary/secondary colors
+- Atkinson Hyperlegible font for improved readability and accessibility
+- Lucide icon set via `astro-icon` for consistent, friendly icons
 - Excellent Lighthouse/PageSpeed scores
 - Accessible landmarks such as `header`, `main`, `footer`, `section` and `nav`
 - Outline focus indicator which works on dark and light backgrounds
 - Several `aria` attributes which provide a better experience for screen reader users
 - `[...page].astro` and `[post].astro` demonstrate the use of dynamic routes and provide a basic blog with breadcrumbs and pagination
 - `404.astro` provides a custom 404 error page which you can adjust to your needs
-- `Header.astro` component included in the `DefaultLayout.astro` layout
-- `Footer.astro` component included in the `DefaultLayout.astro` layout
+- `Header.astro` component with optimized accessibility and design
+- `Footer.astro` component with informative content and links
 - `SkipLinks.astro` component to skip to either the main menu or the main content
-- `Navigation.astro` component with keyboard accessible (dropdown) navigation (arrow keys, escape key)
-- `ResponsiveToggle.astro` component with an accessible responsive toggle button for the mobile navigation
+- `Navigation.astro` component with keyboard accessible (dropdown) navigation and highlighted menu item option
+- `ResponsiveToggle.astro` component with accessible responsive toggle functionality
 - `DarkMode.astro` component toggle with accessible button and a user system preferred color scheme setting
 - `SiteMeta.astro` SEO component for setting custom meta data on different pages
 - `.sr-only` utility class for screen reader only text content (hides text visually)
 - `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-starter.incluud.dev/accessible-components/)
-- A collection of utility classes such as breakpoints, button classes, font settings, resets and outlines in `src/assets/scss/base`
-- Astro's View Transitions
+- Components including `ColorContrast.astro`, `BlockQuote.astro`, `BreakoutImage.astro`, `ExternalLink.astro`, `Logo.astro`, `SocialShares.astro`, and `PageHeader.astro`
+- Blog and portfolio pages with featured images, author details, social sharing, and breakout images
+- Accessibility Statement template page
+- Color Contrast Checker interactive page
+- Smooth micro-interactions and animations on hover, open and close states (respecting reduced motion preferences)
+- Comprehensive SCSS utility classes
+- CSS with logical properties and custom properties
+- Accessible button and hyperlink styling with clear focus states
+- Styled `<kbd>` element for keyboard shortcut documentation
 
 ## Getting started
 
@@ -59,7 +68,7 @@ Clone this theme locally and run any of the following commands in your terminal:
 - [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! 
+Check out our [roadmap](https://github.com/orgs/incluud/projects/4/views/1) to see what's coming next!
 
 ## Contributing
 

astro.config.mjs

@@ -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: {
@@ -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)),
+      },
+    },
   },
 })

package.json

@@ -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",
   "author": "Incluud",
   "license": "MIT",
   "homepage": "https://accessible-astro.netlify.app/",
@@ -22,7 +22,8 @@
     "responsive",
     "ui-library",
     "ui-components",
-    "blog"
+    "blog",
+    "portfolio"
   ],
   "repository": {
     "type": "git",
@@ -32,28 +33,28 @@
     "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",
+    "sanitize-html": "^2.16.0",
+    "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"
   }
 }

public/fonts/OFL.txt

@@ -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.

src/assets/scss/base/_breakpoint.scss

@@ -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";
   }
 }