diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index fd0cd826..00000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,48 +0,0 @@
-module.exports = {
- env: {
- node: true,
- es2022: true,
- browser: true,
- },
- extends: ['eslint:recommended', 'plugin:astro/recommended', 'plugin:astro/jsx-a11y-strict'],
- parserOptions: {
- ecmaVersion: 'latest',
- sourceType: 'module',
- },
- rules: {},
- overrides: [
- {
- files: ['*.js'],
- rules: {
- 'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],
- },
- },
- {
- files: ['*.astro'],
- parser: 'astro-eslint-parser',
- parserOptions: {
- parser: '@typescript-eslint/parser',
- extraFileExtensions: ['.astro'],
- },
- rules: {
- 'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],
- },
- },
- {
- files: ['*.ts'],
- parser: '@typescript-eslint/parser',
- extends: ['plugin:@typescript-eslint/recommended'],
- rules: {
- '@typescript-eslint/no-unused-vars': [
- 'error',
- { argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
- ],
- '@typescript-eslint/no-non-null-assertion': 'off',
- },
- },
- {
- files: ['**/*.astro/*.js', '*.astro/*.js'],
- parser: '@typescript-eslint/parser',
- },
- ],
-}
diff --git a/astro.config.mjs b/astro.config.mjs
index 19752e9a..94a58dc9 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -4,7 +4,6 @@ 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({
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 00000000..d52a930c
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,119 @@
+import globals from 'globals'
+import js from '@eslint/js'
+import astro from 'eslint-plugin-astro'
+import jsxA11y from 'eslint-plugin-jsx-a11y'
+import tseslint from '@typescript-eslint/eslint-plugin'
+import tsParser from '@typescript-eslint/parser'
+import astroParser from 'astro-eslint-parser'
+
+export default [
+ // Ignore patterns
+ {
+ ignores: [
+ 'dist/**',
+ 'node_modules/**',
+ '.astro/**',
+ '**/*.d.ts', // Ignore generated TypeScript declaration files
+ ],
+ },
+
+ // Base configuration for all files
+ {
+ languageOptions: {
+ globals: {
+ ...globals.node,
+ ...globals.browser,
+ },
+ ecmaVersion: 'latest',
+ sourceType: 'module',
+ },
+ },
+
+ // ESLint recommended rules
+ js.configs.recommended,
+
+ // JavaScript files
+ {
+ files: ['**/*.js'],
+ rules: {
+ 'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],
+ },
+ },
+
+ // Astro files
+ {
+ files: ['**/*.astro'],
+ plugins: {
+ astro,
+ },
+ languageOptions: {
+ parser: astroParser,
+ parserOptions: {
+ parser: '@typescript-eslint/parser',
+ extraFileExtensions: ['.astro'],
+ },
+ },
+ rules: {
+ ...astro.configs.recommended.rules,
+ ...astro.configs['jsx-a11y-strict'].rules,
+ 'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],
+ },
+ },
+
+ // TypeScript files
+ {
+ files: ['**/*.ts'],
+ plugins: {
+ '@typescript-eslint': tseslint,
+ },
+ languageOptions: {
+ parser: tsParser,
+ },
+ rules: {
+ ...tseslint.configs.recommended.rules,
+ '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' }],
+ '@typescript-eslint/no-non-null-assertion': 'off',
+ },
+ },
+
+ // JSX files (React components)
+ {
+ files: ['**/*.jsx'],
+ plugins: {
+ 'jsx-a11y': jsxA11y,
+ },
+ languageOptions: {
+ parserOptions: {
+ ecmaFeatures: {
+ jsx: true,
+ },
+ },
+ },
+ rules: {
+ ...jsxA11y.configs.strict.rules,
+ },
+ },
+
+ // TypeScript JSX files (React components)
+ {
+ files: ['**/*.tsx'],
+ plugins: {
+ '@typescript-eslint': tseslint,
+ 'jsx-a11y': jsxA11y,
+ },
+ languageOptions: {
+ parser: tsParser,
+ parserOptions: {
+ ecmaFeatures: {
+ jsx: true,
+ },
+ },
+ },
+ rules: {
+ ...tseslint.configs.recommended.rules,
+ ...jsxA11y.configs.strict.rules,
+ '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' }],
+ '@typescript-eslint/no-non-null-assertion': 'off',
+ },
+ },
+]
diff --git a/package.json b/package.json
index 3869948b..ff031524 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
"version": "4.0.0",
"author": "Incluud",
"license": "MIT",
+ "type": "module",
"homepage": "https://accessible-astro.netlify.app/",
"scripts": {
"dev": "astro dev",
@@ -33,28 +34,32 @@
"url": "https://github.com/incluud/accessible-astro-starter/issues"
},
"devDependencies": {
- "@astrojs/mdx": "^4.2.5",
+ "@astrojs/mdx": "^4.3.0",
"@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",
+ "@eslint/eslintrc": "^3.3.1",
+ "@eslint/js": "^9.27.0",
+ "@iconify-json/lucide": "^1.2.44",
+ "@typescript-eslint/eslint-plugin": "^8.32.1",
+ "@typescript-eslint/parser": "^8.32.1",
+ "astro": "^5.8.0",
"astro-compress": "^2.3.8",
+ "astro-eslint-parser": "^1.2.2",
"astro-icon": "^1.1.5",
- "eslint": "^9.0.0",
+ "eslint": "^9.27.0",
"eslint-plugin-astro": "^1.3.1",
"eslint-plugin-jsx-a11y": "^6.10.2",
+ "globals": "^16.1.0",
"prettier": "^3.5.3",
"prettier-plugin-astro": "^0.14.1",
"prettier-plugin-css-order": "^2.1.2",
"prettier-plugin-tailwindcss": "^0.6.11",
- "sanitize-html": "^2.16.0",
- "sass": "^1.87.0",
+ "sanitize-html": "^2.17.0",
+ "sass": "^1.89.0",
"svgo": "^3.3.2",
- "tailwindcss": "^4.1.4"
+ "tailwindcss": "^4.1.7"
},
"dependencies": {
- "@tailwindcss/vite": "^4.1.4",
+ "@tailwindcss/vite": "^4.1.7",
"accessible-astro-components": "^4.1.1"
}
}
diff --git a/src/assets/scss/base/_breakpoint.scss b/src/assets/scss/base/_breakpoint.scss
index ddb1fa92..1fcbe78a 100644
--- a/src/assets/scss/base/_breakpoint.scss
+++ b/src/assets/scss/base/_breakpoint.scss
@@ -6,6 +6,7 @@ $breakpoints: (
'l': 1024px,
'xl': 1280px,
'2xl': 1536px,
+ 'nav': 900px,
) !default;
@mixin breakpoint($breakpoint) {
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 3008eb7e..6c424d31 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -9,7 +9,7 @@ import Logo from './Logo.astro'
*/
---
-
+
@@ -57,24 +57,6 @@ import Logo from './Logo.astro'
})
}
- const checkMenuSize = (): void => {
- const mainNavWidth = mainNav.getBoundingClientRect().width
- const desktopMenuEl = document.querySelector('.desktop-menu') as HTMLElement | null
- if (!desktopMenuEl) return
-
- const desktopMenuWidth = desktopMenuEl.getBoundingClientRect().width
- const logoWidthBuffer = 300
- const totalMenuWidth = Math.round(desktopMenuWidth) + logoWidthBuffer
-
- if (totalMenuWidth >= mainNavWidth) {
- mainNav.classList.remove('is-desktop')
- mainNav.classList.add('is-mobile')
- } else if (totalMenuWidth <= mainNavWidth) {
- mainNav.classList.add('is-desktop')
- mainNav.classList.remove('is-mobile')
- }
- }
-
const isOutOfViewport = (element: Element): boolean => {
const elementBounds = element.getBoundingClientRect()
return elementBounds.right > (window.innerWidth || document.documentElement.clientWidth)
@@ -222,9 +204,6 @@ import Logo from './Logo.astro'
})
setActiveMenuItem()
- checkMenuSize()
-
- window.addEventListener('resize', checkMenuSize)
window.addEventListener('click', (event: MouseEvent) => {
const element = event.target as Element
if (!element.hasAttribute('aria-haspopup') && !element.classList.contains('submenu-item')) {
@@ -236,47 +215,47 @@ import Logo from './Logo.astro'