diff --git a/README.md b/README.md index db07894..681b344 100644 --- a/README.md +++ b/README.md @@ -1,65 +1 @@ -# Accessible Astro Starter - -![social-preview-image](https://user-images.githubusercontent.com/3909046/219942674-9894853e-def8-4180-84b8-6b577dacfcaa.png) - -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! - -🚀 [Live Preview](https://accessible-astro.netlify.app/) - -## ♿ (Accessibility) Features - -- Astro 4.0 -- 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 -- `[...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` -- View Transitions (⚠️ see [astro-docs](https://docs.astro.build/en/guides/view-transitions/#accessibility) for accessibility considerations) - -## 🚀 Getting started - -Clone this theme locally and run any of the following commands in your terminal: - -| Command | Action | -| :---------------- | :------------------------------------------- | -| `npm install` | Installs dependencies | -| `npm run dev` | Starts local dev server at `localhost:4321` | -| `npm run build` | Build your production site to `./dist/` | -| `npm run preview` | Preview your build locally, before deploying | - -## 📦 Other Accessible Astro projects - -- [Accessible Astro Dashboard](https://github.com/markteekman/accessible-astro-dashboard/) -- [Accessible Astro Components](https://github.com/markteekman/accessible-astro-components/) - -## ❤️ 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: - -1. [Filing an issue](https://github.com/markteekman/accessible-astro-starter/issues) -2. [Submitting a pull request](https://github.com/markteekman/accessible-astro-starter/pulls) -3. [Starting a discussion](https://github.com/markteekman/accessible-astro-starter/discussions) -4. [Buying me a coffee!](https://www.buymeacoffee.com/markteekman) - -## ☕ 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 :) - -[![buymeacoffee-button](https://user-images.githubusercontent.com/3909046/150683481-be070424-7bb0-4dd7-a3cb-43b5605163f5.png)](https://www.buymeacoffee.com/markteekman) +# New Website for Motschen's Projects diff --git a/public/social-preview-image.png b/public/social-preview-image.png index a0832f6..5f3be49 100644 Binary files a/public/social-preview-image.png and b/public/social-preview-image.png differ diff --git a/public/wcag-compliant.webp b/public/wcag-compliant.webp deleted file mode 100644 index 5ca927e..0000000 Binary files a/public/wcag-compliant.webp and /dev/null differ diff --git a/src/assets/scss/base/_color.scss b/src/assets/scss/base/_color.scss index dc1d4e5..72832f7 100644 --- a/src/assets/scss/base/_color.scss +++ b/src/assets/scss/base/_color.scss @@ -4,11 +4,11 @@ $colors: ( primary: ( - 100: hsl(276, 100%, 79%), - 200: hsl(276, 79%, 69%), - 300: hsl(276, 53%, 49%), - 400: hsl(276, 64%, 48%), - 500: hsl(276, 96%, 20%), + 100: hsl(243, 100%, 79%), + 200: hsl(243, 79%, 69%), + 300: hsl(243, 53%, 49%), + 400: hsl(243, 64%, 48%), + 500: hsl(243, 96%, 20%), ), secondary: ( 100: hsl(140, 80%, 68%), diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro index 5df5c70..9edeb02 100644 --- a/src/layouts/DefaultLayout.astro +++ b/src/layouts/DefaultLayout.astro @@ -6,8 +6,8 @@ import Header from '../components/Header.astro' import Footer from '../components/Footer.astro' const { - title = 'Motschen', - description = 'A starter project with accessibility features using Astro static site builder. Contains accessible landmarks, skip links, a dark mode color scheme, better focus outline and keyboard menu navigation.', + title = 'MidnightDust', + description = 'Modding done with passion', url, image = '/social-preview-image.png', author = 'Martin Prokoph', @@ -21,7 +21,7 @@ const { - + -
-
-

Accessible Components

-

- This theme has a lot of extra a11y components provided by the Accessible Astro Component NPM package to help you build accessible pages faster: -

-
-
-
-
-
-
-

Accordion

- - -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo - accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod - veritatis laboriosam est tenetur. -

- Tab to me! - - -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo - accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod - veritatis laboriosam est tenetur. -

- - -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo - accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod - veritatis laboriosam est tenetur. -

- - -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo - accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod - veritatis laboriosam est tenetur. -

- - -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo - accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod - veritatis laboriosam est tenetur. -

- - -
-
-

Breadcrumbs

- - - - - -
-
-

Cards

- -
-
-

DarkMode Toggle

-

This component can be viewed in the top right corner besides the main navigation.

-
-
-

Media

- -
-
-

Modals

-   - - -

Why hello, I be the first Modal.

- - -

- Ah yes, and I be the second Modal. Lorem ipsum dolor sit amet, consectetur adipisicing elit. - Sed, a! Ratione eaque temporibus alias tempora pariatur dolorem. -

- - -
-
-

Notification

- -

Message: This is a notification!

- - -

- Info: This is a notification of type info. -

- - -

- Success: This is a notification of type success. -

- - -

- Warning: This is a notification of type warning and goes on multiple lines to see how that - looks. -

- - -

- Error: This is a notification of type error. -

- -
-
-

Pagination

- -
-
-

SkipLinks

-

This component can be viewed by shift+tabbing until they show up.

-
-
-
-
- diff --git a/src/pages/blog/new-website.mdx b/src/pages/blog/new-website.mdx index 9010f3c..0668582 100644 --- a/src/pages/blog/new-website.mdx +++ b/src/pages/blog/new-website.mdx @@ -9,9 +9,8 @@ After years of just having a lame and half broken, useless site, I proudly prese I now utilize [Astro](https://astro.build/) to achieve blazing fast performance, eye candy and usefulness at the same time. ![!Image](/social-preview-image.png) -

A preview of the main site

+

A preview of the main site

-The new site is based on [Astro Accessible Starter](https://github.com/markteekman/accessible-astro-starter), making it accessible to everyone from the beginning. +The new site is based on [Astro Accessible Starter](https://github.com/markteekman/accessible-astro-starter), making it accessible to everyone from the beginning. It also makes use of [TailwindCSS](https://tailwindcss.com/) for styling. I did however change quite a lot, adding an interactive wiki, dedicated pages for my mods, as well as this cool markdown-based blog. -The wiki for MidnightLib features a version selector which always lists the latest versions, obtained straight from Modrinth's API. -I still have to finish that feature and update the assets to be more light-mode-friendly, but I'm going to publish the site first. \ No newline at end of file +The wiki for MidnightLib features a version selector which always lists the latest versions, obtained straight from Modrinth's API. \ No newline at end of file diff --git a/src/pages/markdown-page.md b/src/pages/markdown-page.md deleted file mode 100644 index 26860d9..0000000 --- a/src/pages/markdown-page.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -layout: ../layouts/MarkdownLayout.astro -title: Markdown Page ---- - -# Markdown Page - -Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae veniam repellat deleniti obcaecati facilis non, praesentium aperiam laudantium excepturi assumenda doloremque animi quis aliquam eligendi quia nemo asperiores et eaque, sunt voluptatibus, saepe exercitationem id. Quis sequi maxime fugiat nam reprehenderit nesciunt quaerat obcaecati, ipsa dignissimos voluptatum voluptatem, optio quidem quos repudiandae dolorem voluptatibus fuga officia odio nemo recusandae voluptas. - -```js -console.log('Hello Accessible World!') -``` - -Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae veniam repellat deleniti obcaecati facilis non, praesentium aperiam laudantium excepturi assumenda doloremque animi quis aliquam eligendi quia nemo asperiores et eaque, sunt voluptatibus, saepe exercitationem id. Quis sequi maxime fugiat nam reprehenderit nesciunt quaerat obcaecati, ipsa dignissimos voluptatum voluptatem, optio quidem quos repudiandae dolorem voluptatibus fuga officia odio nemo recusandae voluptas. - -[Get this theme on GitHub](https://github.com/markteekman/accessible-astro-starter) diff --git a/src/pages/mdx-page.mdx b/src/pages/mdx-page.mdx deleted file mode 100644 index 64a9db1..0000000 --- a/src/pages/mdx-page.mdx +++ /dev/null @@ -1,27 +0,0 @@ ---- -layout: ../layouts/MarkdownLayout.astro -title: MDX Page ---- - -import { Icon } from 'astro-icon/components' -import { Notification } from 'accessible-astro-components' - -# MDX Page - - - -

- Info: This page utilizes Astro's MDX feature which let's you use components in a markdown file and - supports out-of-the-box syntax highlighting with Shiki. -

- - -Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae veniam repellat deleniti obcaecati facilis non, praesentium aperiam laudantium excepturi assumenda doloremque animi quis aliquam eligendi quia nemo asperiores et eaque, sunt voluptatibus, saepe exercitationem id. Quis sequi maxime fugiat nam reprehenderit nesciunt quaerat obcaecati, ipsa dignissimos voluptatum voluptatem, optio quidem quos repudiandae dolorem voluptatibus fuga officia odio nemo recusandae voluptas. - -```js -console.log('Hello Accessible World!') -``` - -Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae veniam repellat deleniti obcaecati facilis non, praesentium aperiam laudantium excepturi assumenda doloremque animi quis aliquam eligendi quia nemo asperiores et eaque, sunt voluptatibus, saepe exercitationem id. Quis sequi maxime fugiat nam reprehenderit nesciunt quaerat obcaecati, ipsa dignissimos voluptatum voluptatem, optio quidem quos repudiandae dolorem voluptatibus fuga officia odio nemo recusandae voluptas. - -[Get this theme on GitHub](https://github.com/markteekman/accessible-astro-starter) diff --git a/src/pages/midnightlib.astro b/src/pages/midnightlib.astro index 590b756..0beb9ab 100644 --- a/src/pages/midnightlib.astro +++ b/src/pages/midnightlib.astro @@ -9,7 +9,7 @@ import ContentMedia from '../components/ContentMedia.astro'

Implement configurations easier than ever before!

- Just create Java fields, annotate them with @Entry, + Just create Java fields, annotate them with @Entry, maybe add some more additional options, and boom!
This example can be found here, and helps you get started (almost) faster than speed of light!