mirror of
https://github.com/Motschen/midnightdust-eu.git
synced 2025-12-13 01:15:10 +01:00
Ready for publishing
This commit is contained in:
Martin Prokoph
66
README.md
66
README.md
@@ -1,65 +1 @@
|
||||
# Accessible Astro Starter
|
||||
|
||||
|
||||
|
||||
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 :)
|
||||
|
||||
[](https://www.buymeacoffee.com/markteekman)
|
||||
# New Website for Motschen's Projects
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 976 KiB After Width: | Height: | Size: 969 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB |
@@ -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%),
|
||||
|
||||
@@ -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 {
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
|
||||
<!-- favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
|
||||
<SiteMeta
|
||||
title={title}
|
||||
|
||||
@@ -1,150 +0,0 @@
|
||||
---
|
||||
import DefaultLayout from '../layouts/DefaultLayout.astro'
|
||||
import { Icon } from 'astro-icon/components'
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
Breadcrumbs,
|
||||
BreadcrumbsItem,
|
||||
Card,
|
||||
Media,
|
||||
Modal,
|
||||
Notification,
|
||||
Pagination,
|
||||
} from 'accessible-astro-components'
|
||||
---
|
||||
|
||||
<DefaultLayout title="Accessible Components">
|
||||
<section class="my-12">
|
||||
<div class="space-content container">
|
||||
<h1>Accessible Components</h1>
|
||||
<p class="text-2xl">
|
||||
This theme has a lot of extra a11y components provided by the <a
|
||||
href="https://github.com/markteekman/accessible-astro-components#Pagination">Accessible Astro Component</a
|
||||
> NPM package to help you build accessible pages faster:
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="mb-12 mt-32">
|
||||
<div class="container">
|
||||
<div class="grid grid-cols-1 gap-32 md:grid-cols-2">
|
||||
<div class="space-content">
|
||||
<h2>Accordion</h2>
|
||||
<Accordion>
|
||||
<AccordionItem header="First Item">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<a href="#">Tab to me!</a>
|
||||
</AccordionItem>
|
||||
<AccordionItem header="Second Item">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem header="Third Item">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem header="Fourth Item">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
<AccordionItem header="Fifth Item">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
<div class="space-content">
|
||||
<h2>Breadcrumbs</h2>
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbsItem href="/" label="Home" />
|
||||
<BreadcrumbsItem href="/blog" label="Blog" />
|
||||
<BreadcrumbsItem currentPage={true} label="My blog post" />
|
||||
</Breadcrumbs>
|
||||
</div>
|
||||
<div class="space-content">
|
||||
<h2>Cards</h2>
|
||||
<Card
|
||||
img="https://images.unsplash.com/photo-1636819488524-1f019c4e1c44?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-content">
|
||||
<h2>DarkMode Toggle</h2>
|
||||
<p>This component can be viewed in the top right corner besides the main navigation.</p>
|
||||
</div>
|
||||
<div class="space-content">
|
||||
<h2>Media</h2>
|
||||
<Media
|
||||
class="rounded-lg"
|
||||
src="https://images.unsplash.com/photo-1636819488537-a9b1ffb315ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-content">
|
||||
<h2>Modals</h2>
|
||||
<button id="modal1-trigger" class="button">Modal 1</button>
|
||||
<button id="modal2-trigger" class="button color-secondary">Modal 2</button>
|
||||
<Modal triggerId="modal1-trigger" title="Modal 1">
|
||||
<p>Why hello, I be the <strong>first</strong> Modal.</p>
|
||||
</Modal>
|
||||
<Modal triggerId="modal2-trigger" title="Modal 2" closeText="Cancel">
|
||||
<p>
|
||||
Ah yes, and I be the <strong>second</strong> Modal. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
Sed, a! Ratione eaque temporibus alias tempora pariatur dolorem.
|
||||
</p>
|
||||
<button class="button" onclick="closeModal()">Confirm action</button>
|
||||
</Modal>
|
||||
</div>
|
||||
<div class="space-content">
|
||||
<h2>Notification</h2>
|
||||
<Notification>
|
||||
<Icon name="ion:notifications-outline" /><p><strong>Message:</strong> This is a notification!</p>
|
||||
</Notification>
|
||||
<Notification type="info">
|
||||
<Icon name="ion:information-circle-outline" /><p>
|
||||
<strong>Info:</strong> This is a notification of type info.
|
||||
</p>
|
||||
</Notification>
|
||||
<Notification type="success">
|
||||
<Icon name="ion:checkbox-outline" /><p>
|
||||
<strong>Success:</strong> This is a notification of type success.
|
||||
</p>
|
||||
</Notification>
|
||||
<Notification type="warning">
|
||||
<Icon name="ion:warning-outline" /><p>
|
||||
<strong>Warning:</strong> This is a notification of type warning and goes on multiple lines to see how that
|
||||
looks.
|
||||
</p>
|
||||
</Notification>
|
||||
<Notification type="error">
|
||||
<Icon name="ion:alert-circle-outline" /><p>
|
||||
<strong>Error:</strong> This is a notification of type error.
|
||||
</p>
|
||||
</Notification>
|
||||
</div>
|
||||
<div class="space-content">
|
||||
<h2>Pagination</h2>
|
||||
<Pagination totalPages="200" />
|
||||
</div>
|
||||
<div class="space-content">
|
||||
<h2>SkipLinks</h2>
|
||||
<p>This component can be viewed by shift+tabbing until they show up.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</DefaultLayout>
|
||||
@@ -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.
|
||||
|
||||
|
||||
<p class="text-center">A preview of the main site</p>
|
||||
<p class="text-center italic">A preview of the main site</p>
|
||||
|
||||
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.
|
||||
The wiki for MidnightLib features a version selector which always lists the latest versions, obtained straight from Modrinth's API.
|
||||
@@ -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)
|
||||
@@ -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
|
||||
|
||||
<Notification type="info">
|
||||
<Icon name="ion:information-circle-outline" />
|
||||
<p>
|
||||
<strong>Info:</strong> 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.
|
||||
</p>
|
||||
</Notification>
|
||||
|
||||
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)
|
||||
@@ -9,7 +9,7 @@ import ContentMedia from '../components/ContentMedia.astro'
|
||||
<ContentMedia imgSrc="/midnightlib-example-code.webp">
|
||||
<h2>Implement configurations easier than ever before!</h2>
|
||||
<p class="text-2xl">
|
||||
Just create Java fields, annotate them with <span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500 font-mono underline decoration-dashed decoration-green-600 decoration-2">@Entry</span>,
|
||||
Just create Java fields, annotate them with <span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500 font-mono">@Entry</span>,
|
||||
maybe add some more additional options, and boom! <br>
|
||||
This example can be found <a href="https://github.com/TeamMidnightDust/MidnightLib/blob/architectury/MidnightConfigExample.java"
|
||||
>here</a>, and helps you get started (almost) faster than speed of light!
|
||||
|
||||
Reference in New Issue
Block a user