More finishing touches

This commit is contained in:
Martin Prokoph
2024-02-09 16:14:09 +01:00
parent e9dce8446b
commit b121e3d1cc
25 changed files with 82 additions and 230 deletions

View File

@@ -22,9 +22,7 @@ const { page } = Astro.props
<div class="space-content container">
<h1>Blog</h1>
<p class="text-2xl">
An example of a blog with dynamic content fetched from <a href="https://jsonplaceholder.typicode.com/posts"
>JSONPlaceholder</a
> using the title, body and userId. The Accessible Astro Card Component is used here to display al the posts.
Just my personal blog, where I write about cool projects and endeavours.
</p>
</div>
</section>
@@ -36,9 +34,9 @@ const { page } = Astro.props
page.data.map((post) => (
<li>
<Card
url={'/blog/' + post.title.replaceAll(' ', '-').toLowerCase()}
url={'/blog/' + post.postId}
title={post.title}
footer={'Written by: ' + post.userId}
footer={'Published: ' + post.date}
img={post.img}
>
{post.body}

View File

@@ -1,59 +0,0 @@
---
import DefaultLayout from '../../layouts/DefaultLayout.astro'
import { Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components'
import blogPosts from '../../../public/blog/blog-posts.json'
export async function getStaticPaths() {
const data = blogPosts;
//const data = await fetch('https://jsonplaceholder.typicode.com/posts').then((response) => response.json())
return data.map((post) => {
return {
params: { post: post.title.replaceAll(' ', '-').toLowerCase() },
props: { post },
}
})
}
const { post } = Astro.props
---
<DefaultLayout title={post.title} description={post.body} url={post.title}>
<div class="container">
<div class="mt-12">
<Breadcrumbs>
<BreadcrumbsItem href="/" label="Home" />
<BreadcrumbsItem href="/blog" label="Blog" />
<BreadcrumbsItem currentPage={true} label={post.title} />
</Breadcrumbs>
</div>
</div>
<section class="my-12">
<div class="container">
<h1>{post.title}</h1><br />
<p>By user: {post.userId}</p>
</div>
</section>
<section class="my-12">
<div class="container">
<p class="text-2xl">{post.body}</p>
</div>
</section>
</DefaultLayout>
<style lang="scss">
ul {
display: grid;
grid-template-columns: 1fr;
grid-gap: 4rem;
@media (min-width: 550px) {
grid-template-columns: repeat(2, 1fr);
grid-gap: 2rem;
}
@media (min-width: 950px) {
grid-template-columns: repeat(3, 1fr);
}
}
</style>

View File

@@ -0,0 +1,17 @@
---
layout: ../../layouts/BlogLayout.astro
title: So... I have a new website now!
author: Martin Prokoph
date: 09th February 2024
---
After years of just having a lame and half broken, useless site, I proudly present my new website.
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 centered="true">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.
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.

View File

@@ -1,74 +0,0 @@
---
import DefaultLayout from '../../layouts/DefaultLayout.astro'
import { Card, Pagination } from 'accessible-astro-components'
export async function getStaticPaths({ paginate }) {
const response = await fetch('https://jsonplaceholder.typicode.com/posts')
const data = await response.json()
return paginate(data, { pageSize: 6 })
}
const { page } = Astro.props
---
<DefaultLayout
title="Gallery"
description="An overview of my projects and endeavours."
>
<section class="my-12">
<div class="space-content container">
<h1>Gallery</h1>
<p class="text-2xl">
An overview of my projects and endeavours.
</p>
</div>
</section>
<section class="my-12">
<div class="container">
<p class="text-sm"><em>Post {page.start + 1} through {page.end + 1} of {page.total} total posts</em></p>
<ul class="my-3">
{
page.data.map((post) => (
<li>
<Card
url={'/blog/' + post.title.replaceAll(' ', '-').toLowerCase()}
title={post.title}
footer={'userId:' + post.userId}
>
{post.body}
</Card>
</li>
))
}
</ul>
<div class="mt-12 grid place-content-center">
<Pagination
firstPage={page.url.prev ? '/blog' : null}
previousPage={page.url.prev ? page.url.prev : null}
nextPage={page.url.next ? page.url.next : null}
lastPage={page.url.next ? `/blog/${Math.round(page.total / page.size)}` : null}
currentPage={page.currentPage}
totalPages={Math.round(page.total / page.size)}
/>
</div>
</div>
</section>
</DefaultLayout>
<style lang="scss">
ul {
display: grid;
grid-template-columns: 1fr;
grid-gap: 4rem;
@media (min-width: 550px) {
grid-template-columns: repeat(2, 1fr);
grid-gap: 2rem;
}
@media (min-width: 950px) {
grid-template-columns: repeat(3, 1fr);
}
}
</style>

View File

@@ -1,57 +0,0 @@
---
import DefaultLayout from '../../layouts/DefaultLayout.astro'
import { Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components'
export async function getStaticPaths() {
const data = await fetch('https://jsonplaceholder.typicode.com/posts').then((response) => response.json())
return data.map((post) => {
return {
params: { post: post.title.replaceAll(' ', '-').toLowerCase() },
props: { post },
}
})
}
const { post } = Astro.props
---
<DefaultLayout title={post.title} description={post.body} url={post.title}>
<div class="container">
<div class="mt-12">
<Breadcrumbs>
<BreadcrumbsItem href="/" label="Home" />
<BreadcrumbsItem href="/blog" label="Blog" />
<BreadcrumbsItem currentPage={true} label={post.title} />
</Breadcrumbs>
</div>
</div>
<section class="my-12">
<div class="container">
<h1>{post.title}</h1><br />
<p>By userId: {post.userId}</p>
</div>
</section>
<section class="my-12">
<div class="container">
<p class="text-2xl">{post.body}</p>
</div>
</section>
</DefaultLayout>
<style lang="scss">
ul {
display: grid;
grid-template-columns: 1fr;
grid-gap: 4rem;
@media (min-width: 550px) {
grid-template-columns: repeat(2, 1fr);
grid-gap: 2rem;
}
@media (min-width: 950px) {
grid-template-columns: repeat(3, 1fr);
}
}
</style>

View File

@@ -6,8 +6,8 @@ import ContentMedia from '../components/ContentMedia.astro'
---
<DefaultLayout title="MidnightLib">
<ContentMedia imgSrc="/midnightlib-example-code.png">
<h2>Implement configurations easier than ever!</h2>
<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 @Entry, 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"

View File

@@ -14,11 +14,8 @@ Welcome to the MidnightLib wiki. Thanks for showing interest in our library!
This documentation aims to show you how to use the config system and the other features the library provides.
Use the tabs on the right side to switch between the different pages.
Explore MidnightLib's features on this page!
<a class="button has-icon color-secondary text-center text-lg items-center" href="/midnightlib">
<Icon name="ion:bookmark-outline" />
Get to know the features
</a>
Explore MidnightLib's features on this page:
[Get to know the features](/midnightlib)
To use the library in your mods, just edit `build.gradle` and `gradle.properties` as seen below:
### `build.gradle`
@@ -113,10 +110,10 @@ The .json language file for your config class could look similar to this:
```
To initialize the config you have to call `MidnightConfig.init("modid", MidnightConfigExample.class);` in your ModInitializer.
To get an instance of the config screen you have to call `MidnightConfig.getScreen(parent, "modid");`
To get an instance of the config screen you have to call `MidnightConfig.getScreen(parent, "modid");`
If you don't use the whole library and therefore not the automatic ModMenu integration, the code in your ModMenu integration class would look something like this:
### `ModMenuInit.java`
If you don't use the whole library and therefore not the automatic ModMenu integration, the code in your ModMenu integration class would look something like this:
```java
@Override
public ConfigScreenFactory<?> getModConfigScreenFactory() {