Motschen/midnightdust-eu
1
0
Fork 0
mirror of https://github.com/Motschen/midnightdust-eu.git synced 2025-12-16 10:35:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Ready for publishing

Browse Source
This commit is contained in:
Martin Prokoph
2024-02-09 18:57:41 +01:00
parent d46cec2925
commit 2b3bcd5746
10 changed files with 13 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/scss/base/_color.scss
View File

@@ -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
src/layouts/DefaultLayout.astro
View File

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

150
src/pages/accessible-components.astro
View File

@@ -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>&nbsp;
<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>

7
src/pages/blog/new-website.mdx
View File

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

16
src/pages/markdown-page.md
View File

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

27
src/pages/mdx-page.mdx
View File

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

2
src/pages/midnightlib.astro
View File

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