Merge pull request #52 from markteekman/next

Next

.eslintrc.js

@@ -0,0 +1,48 @@
+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',
+    },
+  ],
+}

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120,
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  "pluginSearchDirs": false
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Mark Teekman
+Copyright (c) 2023 Mark Teekman
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,222 +1,53 @@
 # Accessible Astro Starter
 
-This starter project is build upon the (awesome) [Astro Static Site Builder](https://astro.build/). To help you build your project *faster*, this theme includes some dedicated accessible components (such as a keyboard accessible and responsive navigation) and several components coming from the [Accessible Astro Components](https://github.com/markteekman/accessible-astro-components) npm package. This theme also includes example pages, a blog with dynamic routes, a custom 404 page and many **Design System** utility classes, patterns and primatives (such as grids, buttons, lists, spacings, sizes and more).
-
 ![accessible-astro-starter](https://user-images.githubusercontent.com/3909046/203257395-163f7002-65ff-4c55-a00c-256d708f6b2d.png)
 
-[Live demo](https://starter.accessible-astro.dev)
+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!
 
-## Getting started
-Run the following commands in your project folder to get started:
-```console
-npm install && npm start
-```
+🚀 [Live Preview](https://accessible-astro.dev)
 
-## Accessibility features
+## ♿ (Accessibility) Features
 
+- Tailwind CSS support
+- 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
+- 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
-- `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
-- `DarkMode.astro` component toggle with accessible button and a user system preferred color scheme *
-- `Breadcrumbs.astro` component provides a way to navigate the blog posts *
-- `Pagination.astro` component provides another way to navigate the blog posts *
+- `[...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
+- `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
+- `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.dev/accessible-components)
+- A collection of utility classes such as breakpoints, button classes, font settings, resets and outlines in `src/assets/scss/base`
 
-**Provided by the Accessible Astro Components package.*
-
-## Extra features
-
-- `SiteMeta.astro` SEO component for setting custom meta deta on different pages
-- `[...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
-- [Accessible Astro Components](https://github.com/markteekman/accessible-astro-components) package comes preinstalled with extra components such as Accordions, Modals and Notifications
-- Nate Moore's awesome [Astro Icon](https://github.com/natemoo-re/astro-icon) package is also preinstalled which can be applied to different use cases
-
-## Utilities
-
-👉🏻    _Note: Examples are included in the **index.astro** file_
-
-This starter contains some extra **Design System** like utility classes to aid in the global layout of your project. All of this can be found in the `src/assets/scss/base` directory, and compiles in the `src/assets/globals.scss` file. Using these primitives is totally optional, use or remove at your own preference :) What it contains:
-
-- Reset file to reset browser defaults and ensure everything looks good
-- Some basic font settings, such as responsive heading sizes
-- Color shades for your color pallet, rendered to the `:root` of your website as custom properties
-- Simple auto-grid setting using `display: grid` and a `data-attribute`
-- A bit more advanced grid settings using `display` grid to easily setup a 12-column layout
-- Utilities set in `_utility.scss` for things such as spacing, sizes, colors, and box-shadows
-
-### 12 Column Grid
-
-12 Column Grid enables you to build custom column based layouts. Using `display: grid;` you can define the amount of columns that elements should take up in your `.grid`, and for which breakpoint they should do so. You can also use offset on a grid to create an extra column of offset. The grid offers different utilities for the individual grid items such `equal-height`, `x-start`, `x-center`, `x-end`, `y-start`, `y-center` and `y-end`. Grid comes with default gutters, to disable them you can use the utility class `no-gutters`.
-
-```html
-<div class="container">
-  <div class="grid">
-    <div class="small-12 medium-3">
-      <h3>Sidebar</h3>
-      <!-- ... -->
-    </div>
-    <div class="small-12 medium-8 offset-medium-4">
-      <h3>Main</h3>
-      <!-- ... -->
-    </div>
-  </div>
-</div>
-```
-
-### Alignment
-
-Alignment classes can be used to align elements in your HTML. There's `align-center`, `align-horizontal` and `align-vertical`.
-
-```html
-<div class="align-center w-screen h-screen">
-  <h1>Center me on the screen!</h1>
-</div>
-```
-
-### Animations
-
-There are a couple of basic animations which you can throw on your HTML elements like `blink`, `fade-in`, `pop-up` and `spin`. You can also use some animation delays to create different effects.
-
-```html
-<div data-animation="fade-in">
-  <p>I've got a fancy fade-in animation that starts right away.</p>
-</div>
-<div data-animation="fade-in" data-animation-delay="0.25s">
-  <p>I've got a fancy fade-in animation after 0.25s.</p>
-</div>
-<div data-animation="fade-in" data-animation-delay="0.5s">>
-  <p>I've got a fancy fade-in animation after 0.5s.</p>
-</div>
-```
-
-### Auto Grid
-
-Simply apply the `data-auto-grid` attribute on your parent `div` with a number from 2-6 (if you need more columns just tweak the for loop in `_auto-grid.scss`). The grid automatically creates new rows (this is how `display: grid` works by default).
-
-```html
-<div class="container" data-auto-grid="3">
-  <p>First column</p>
-  <p>Second column</p>
-  <p>Third column</p>
-</div>
-```
-
-You can also center the contents of the cell using the `data-grid-center` attribute. Use it together with `data-auto-grid`.
-
-```html
-<div class="container" data-auto-grid="3" data-grid-center>
-  <!-- ... -->
-</div>
-```
-
-### Borders
-
-With two border radius utility classes (`radius-small` and `radius-large`) you can change the border radius of your HTML elements on the fly.
-
-```html
-<div class="bg-neutral-900 space-32 radius-large">
-  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
-</div>
-```
-
-### Buttons
-
-A Button primitive to easily apply button styles to your `<button>` and `<a>` tags. Simply apply the class `button` to your element. There are different variations in colors (`color-secondary`, `color-info`, `color-success`, `color-warning`, `color-error`) which is primary by default, sizing (`size-tiny`, `size-large`, `size-huge`) which is medium by default and behavior (`behavior-full`) which stretches the button to 100% width.
-
-```html
-<a href="/" class="button color-success size-huge behavior-full">
-  Click me to go to space!
-</a>
-```
-
-### Colors
-
-You can setup your own color schemes in the `_colors.scss` file. You'll find a SCSS map, which gets printed inside `_root.scss` as custom properties. There are also several color utilities such as `text-primary-#` and `bg-neutral-#` based on all colors you've defined. `text-primary-#` should be used on a parent element to give the child's the respective color.
-
-```scss
-$colors: (
-  primary: (
-    100: hsl(262, 90%, 95%),
-    200: hsl(262, 100%, 88%),
-    300: hsl(262, 100%, 78%),
-    400: hsl(268, 82%, 60%),
-    500: hsl(273, 79%, 48%),
-  ),
-  // ...
-);
-```
-
-```html
-<div class="text-neutral-100 bg-neutral-900 space-32">
-  <p>Dark background with white text on it!</p>
-</div>
-```
-
-### Elevations
-
-Use elevations on your HTML elements to add a box shadow of different intensities. Use either `elevation-100`, `elevation-200`, `elevation-300`, `elevation-400` or `elevation-500`.
-
-```html
-<div class="space-32 radius-large elevation-400">
-  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
-</div>
-```
-
-### Height / Width
-
-You can set the height and width of your elements to either 100 view port units or percentages using `h-screen`, `h-full`, `w-screen` and `w-full` respectfully.
-
-```html
-<div class="h-screen w-screen align-center">
-  <p>I'm centered in the middle of the screen!</p>
-</div>
-```
-
-### Margins, Paddings and Spaces
-
-To prevent spacing each element in your website individually and to prevent inconsistencies, you can use the `.margin-#` and `.padding-#` utility classes. A good practice is to set in on your `<section>` elements, for starters. To space out content you can use a special `.space-content` class on your parent div (for example an element of your `.grid`). By default, margin/padding top and bottom are set with these utilities. You can also set it explicitly using either `.top` of `.bottom` class tokens. Find or tweak all spacing options in `_space.scss`. `space-#` tokens however add padding all around an element, which is great of you need to make card like blocks on the fly by combining `space` with the other utilities.
-
-```html
-<section class="padding-32">
-  <div class="container">
-    <h2 class="margin-16 bottom">Grid example</h2>
-  </div>
-</section>
-```
-
-```html
-<div class="box space-32 bg-primary-200 radius-small elevation-100">
-  <div class="space-content">
-    <h3>I look like a card!</h3>
-    <p>And space-content adds space between us for readability.</p>
-  </div>
-</div>
-```
-
-### Sizes
+## 🚀 Getting started
 
-If you need an exception on your font-size for a specific reason you can use size utility classes to accomplish that. Using it is easy. Find or tweak all spacing options in `_size.scss`.
+Clone this theme locally and run any of the following commands in your terminal:
 
-```html
-<div class="container">
-  <p class="size-20">I'm a bigger font size!</p>
-</div>
-```
+| Command           | Action                                       |
+| :---------------- | :------------------------------------------- |
+| `npm install`     | Installs dependencies                        |
+| `npm run dev`     | Starts local dev server at `localhost:3000`  |
+| `npm run build`   | Build your production site to `./dist/`      |
+| `npm run preview` | Preview your build locally, before deploying |
 
-## Other Accessible Astro projects
+## 📦 Other Accessible Astro projects
 
 - [Accessible Astro Dashboard](https://github.com/markteekman/accessible-astro-dashboard/)
 - [Accessible Astro Components](https://github.com/markteekman/accessible-astro-components/)
-- [Accessible Astro Documentation](https://accessible-astro.dev)
 
-## Helping out
+## ❤️ Helping out
 
 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:
 
@@ -225,7 +56,7 @@ If you find that something isn't working right then I'm always happy to hear it
 3. [Starting a discussion](https://github.com/markteekman/accessible-astro-starter/discussions)
 4. [Buying me a coffee!](https://www.buymeacoffee.com/markteekman)
 
-## Thank you!
+## ☕ Thank you!
 
 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 :)
 

astro.config.mjs

@@ -1,4 +1,9 @@
 import { defineConfig } from 'astro/config'
+import compress from 'astro-compress'
+import mdx from '@astrojs/mdx'
+import tailwind from '@astrojs/tailwind'
 
 // https://astro.build/config
-export default defineConfig({})
+export default defineConfig({
+  integrations: [compress(), mdx(), tailwind()],
+})

package.json

@@ -1,7 +1,7 @@
 {
   "name": "accessible-astro-starter",
   "description": "An Accessible Starter Theme for Astro including several accessiblity features and tools to help you build faster.",
-  "version": "1.6.2",
+  "version": "2.0.0",
   "author": "Mark Teekman",
   "homepage": "https://accessible-astro.dev",
   "scripts": {
@@ -10,12 +10,24 @@
     "build": "astro build",
     "preview": "astro preview"
   },
-  "dependencies": {
-    "accessible-astro-components": "^1.6.1",
-    "astro-icon": "^0.7.3"
-  },
   "devDependencies": {
-    "astro": "^1.6.3",
-    "sass": "^1.49.9"
+    "@astrojs/mdx": "^0.15.2",
+    "@astrojs/partytown": "^1.0.3",
+    "@astrojs/tailwind": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "@typescript-eslint/parser": "^5.50.0",
+    "accessible-astro-components": "^1.6.4",
+    "astro": "^2.0.1",
+    "astro-compress": "1.1.28",
+    "astro-icon": "^0.7.3",
+    "eslint": "^8.33.0",
+    "eslint-plugin-astro": "^0.23.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "prettier": "^2.8.3",
+    "prettier-plugin-astro": "^0.8.0",
+    "prettier-plugin-tailwindcss": "^0.2.2",
+    "sass": "^1.49.9",
+    "svgo": "^2.8.0",
+    "tailwindcss": "^3.2.7"
   }
 }