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

Create a wiki for PictureSign

Browse Source
This commit is contained in:
Martin Prokoph
2024-06-28 11:53:00 +02:00
parent d404d99ccf
commit 75715104b1
11 changed files with 2845 additions and 2150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
.astro/icon.d.ts vendored
View File

File diff suppressed because it is too large Load Diff

16
astro.config.mjs
View File

@@ -1,13 +1,15 @@
import { defineConfig } from 'astro/config'
import mdx from '@astrojs/mdx'
import tailwind from '@astrojs/tailwind'
import icon from "astro-icon"
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import tailwind from '@astrojs/tailwind';
import icon from "astro-icon";
import alpinejs from "@astrojs/alpinejs";
// https://astro.build/config
export default defineConfig({
site: 'https://www.midnightdust.eu',
compressHTML: true,
integrations: [mdx(), icon(), tailwind({
applyBaseStyles: false,
})],
})
applyBaseStyles: false
}), alpinejs()]
});

4414
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@@ -32,5 +32,10 @@
"sass": "^1.49.9",
"svgo": "^3.2.0",
"tailwindcss": "^3.2.7"
},
"dependencies": {
"@astrojs/alpinejs": "^0.4.0",
"@types/alpinejs": "^3.13.10",
"alpinejs": "^3.14.1"
}
}

BIN
public/picturesign/helper-gui.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

1
src/components/Header.astro
View File

@@ -28,6 +28,7 @@ import { Icon } from 'astro-icon/components'
<li class="submenu-item">
<a href="/wiki/midnightlib/">MidnightLib</a>
<a href="/wiki/midnightcontrols/">MidnightControls</a>
<a href="/wiki/picturesign/">PictureSign</a>
</li>
</ul>
</li>

232
src/components/VersionDropdown.astro
View File

@@ -1,204 +1,54 @@
---
import { loaderList, versionList, selectedLoader, selectedVersion } from '../js/modversion.js'
import { loaderList, versionList, selectedLoader, selectedVersion, getResultingVersion } from '../js/modversion.js'
---
<div id="version-dropdown">
<div class="container">
<div class="wrapper">
<ul class="version-dropdowns">
<li class="menu-item has-version-dropdown">
<button aria-haspopup="true" aria-expanded="false">{selectedLoader.charAt(0).toUpperCase() + selectedLoader.slice(1)}</button>
<ul class="dropdown-menu">
{ loaderList.map((loader) =>
<li class="submenu-item">
<a href="javascript:;">{loader.charAt(0).toUpperCase() + loader.slice(1)}</a>
</li>
)}
</ul>
</li>
<li class="menu-item has-version-dropdown">
<button aria-haspopup="true" aria-expanded="false">{selectedVersion}</button>
<ul class="dropdown-menu">
{ versionList.map((version) =>
<li class="submenu-item">
<a href="javascript:;">{version}</a>
</li>
)}
</ul>
</li>
</ul>
<label for="loader-selector" class="sr-only">Select the Modloader</label>
<select
x-data="{
loader: localStorage.selectedLoader || 'fabric',
switchLoader: function (newValue) {
localStorage.selectedLoader = newValue;
console.log('New loader: ' + localStorage.selectedLoader);
},
}"
name="loader-selector"
id="loader-selector"
class="appearance-none cursor-pointer rounded-md pl-3 pr-2 py-1.5 dark:bg-stone-950 dark:text-white focus-visible:outline-none"
x-model="loader"
aria-label="Choose the Modloader"
@change="switchLoader($event.target.value)">
{ loaderList.map((loader) =>
<option value={loader}>{loader.charAt(0).toUpperCase() + loader.slice(1)}</option>
)}
</select>
<label for="version-selector" class="sr-only">Select the Version</label>
<select
x-data="{
version: localStorage.selectedVersion || '1.21',
switchVersion: function (newValue) {
localStorage.selectedVersion = newValue;
console.log('New version: ' + localStorage.selectedVersion);
console.log(getResultingVersion());
},
}"
name="version-selector"
id="version-selector"
class="appearance-none cursor-pointer rounded-md pl-3 pr-2 py-1.5 dark:bg-stone-950 dark:text-white focus-visible:outline-none"
x-model="version"
aria-label="Choose the Version"
@change="switchVersion($event.target.value)">
{ versionList.map((version) =>
<option value={version}>{version}</option>
)}
</select>
<label for="version-selector" x-text="getResultingVersion()">Resulting Version</label>
</div>
</div>
</div>
<script>
document.addEventListener('astro:page-load', () => {
// variables
const mainElement = document.querySelector('#version-dropdown')
const mainMenu = mainElement.querySelector('ul')
const dropdownMenus = [...document.querySelectorAll('.has-version-dropdown button')]
// functions
const setActiveMenuItem = () => {
const mobileDesktopMenus = mainElement.querySelectorAll('div > ul')
const currenPathname = window.location.pathname
mobileDesktopMenus.forEach((menu) => {
const menuItems = [...menu.querySelectorAll('a:not([rel*="external"])')] as HTMLAnchorElement[]
menuItems.forEach((menuItem) => {
if (currenPathname.includes(menuItem.pathname.replaceAll('/', ''))) {
menuItem.classList.add('is-active')
menuItem.setAttribute('aria-current', 'page')
}
})
})
}
const isOutOfViewport = (element) => {
const elementBounds = element.getBoundingClientRect()
return elementBounds.right > (window.innerWidth || document.documentElement.clientWidth)
}
const openDropdownMenu = (dropdownMenu) => {
const dropdownList = dropdownMenu.parentNode.querySelector('ul')
dropdownMenu.classList.add('show')
dropdownMenu.setAttribute('aria-expanded', 'true')
if (isOutOfViewport(dropdownList)) {
dropdownList.style.left = 'auto'
}
}
const closeDropdownMenu = (dropdownMenu) => {
dropdownMenu.classList.remove('show')
dropdownMenu.setAttribute('aria-expanded', 'false')
}
const closeAllDropdownMenus = () => {
for (let i = 0; i < dropdownMenus.length; i++) {
closeDropdownMenu(dropdownMenus[i])
}
}
const toggleDropdownMenu = (event) => {
if (event.target.getAttribute('aria-expanded') === 'false') {
closeAllDropdownMenus()
openDropdownMenu(event.target)
} else {
closeDropdownMenu(event.target)
}
}
// execution
mainMenu &&
mainMenu.addEventListener('keydown', (event) => {
const element = event.target as Element
const currentMenuItem = element.closest('li')
const menuItems = [...mainMenu.querySelectorAll('.menu-item')]
const currentDropdownMenu = element.closest('.has-dropdown button')
const currentDropdownMenuItem = element.closest('.has-version-dropdown li')
const currentIndex = menuItems.findIndex((item) => item === currentMenuItem)
const key = event.key
let targetItem
if (key === 'ArrowRight') {
if (menuItems.indexOf(currentMenuItem) === menuItems.length - 1) {
targetItem = menuItems[0]
} else {
targetItem = menuItems[currentIndex + 1]
}
}
if (key === 'ArrowLeft') {
if (menuItems.indexOf(currentMenuItem) === 0) {
targetItem = menuItems[menuItems.length - 1]
} else {
targetItem = menuItems[currentIndex - 1]
}
}
if (key === 'Escape') {
targetItem = menuItems[0]
}
if (currentDropdownMenu) {
const firstDropdownItem = currentDropdownMenu.nextElementSibling.querySelector('li')
if (key === 'ArrowDown') {
event.preventDefault()
openDropdownMenu(currentDropdownMenu)
targetItem = firstDropdownItem
}
if (key === 'Escape') {
closeDropdownMenu(currentDropdownMenu)
}
}
if (currentDropdownMenuItem) {
const currentDropdownList = currentDropdownMenuItem.parentNode
const dropdownMenuItems = [...currentDropdownList.querySelectorAll('li')]
const currentIndex = dropdownMenuItems.findIndex((item) => item === currentDropdownMenuItem)
if (key === 'ArrowDown') {
event.preventDefault()
if (dropdownMenuItems.indexOf(currentDropdownMenuItem as HTMLLIElement) === dropdownMenuItems.length - 1) {
targetItem = dropdownMenuItems[0]
} else {
targetItem = dropdownMenuItems[currentIndex + 1]
}
}
if (key === 'ArrowUp') {
event.preventDefault()
if (dropdownMenuItems.indexOf(currentDropdownMenuItem as HTMLLIElement) === 0) {
targetItem = dropdownMenuItems[dropdownMenuItems.length - 1]
} else {
targetItem = dropdownMenuItems[currentIndex - 1]
}
}
if (key === 'Escape') {
const currentDropdownMenu = (currentDropdownList as Element).previousElementSibling
targetItem = currentDropdownMenu.parentNode
closeAllDropdownMenus()
}
if (key === 'Tab') {
const currentDropdownMenu = (currentDropdownList as Element).previousElementSibling
if (dropdownMenuItems.indexOf(currentDropdownMenuItem as HTMLLIElement) === dropdownMenuItems.length - 1) {
closeDropdownMenu(currentDropdownMenu)
}
}
}
if (targetItem) {
targetItem.querySelector('a, button, input').focus()
}
})
dropdownMenus &&
dropdownMenus.forEach((dropdownMenu) => {
dropdownMenu.addEventListener('click', toggleDropdownMenu)
})
setActiveMenuItem()
window.addEventListener('click', (event) => {
const element = event.target as Element
if (!element.hasAttribute('aria-haspopup') && !element.classList.contains('submenu-item')) {
closeAllDropdownMenus()
}
})
})
</script>
<style lang="scss" is:global>
@use '../assets/scss/base/breakpoint' as *;
@use '../assets/scss/base/outline' as *;

20
src/js/modversion.js
View File

@@ -27,7 +27,19 @@ versionList = await Object.keys(versionMap).sort().reverse();
export var selectedVersion = "1.21";
var resultingVersionID = await finishedArray[selectedLoader + "+" + selectedVersion];
export var resultingVersion = "Could not find the latest version!";
resultingVersion = modInfo.find((info) => info.id == resultingVersionID).version_number;
{console.log(resultingVersion)}
export function setLoaderVersion(version) {
selectedLoader = version;
}
export function setGameVersion(version) {
selectedVersion = version;
}
export function getResultingVersion() {
var resultingVersionID = finishedArray[selectedLoader + "+" + selectedVersion];
var resultingVersion = "Not available";
if (selectedLoader != "forge") resultingVersion += " (yet)"
try {
resultingVersion = modInfo.find((info) => info.id == resultingVersionID).version_number;
} catch {}
return resultingVersion;
}

4
src/pages/index.astro
View File

@@ -10,8 +10,8 @@ import Counter from '../components/Counter.astro'
<div class="container">
<h2 class="mb-16 text-6xl">Statistics</h2>
<div class="grid grid-cols-1 gap-12 sm:grid-cols-2 md:grid-cols-3">
<Counter icon="ion:star" count="484+" title="Stars in Total" sub="On GitHub" />
<Counter icon="ion:download" count="61.000.000+" title="Total Downloads" sub="Modrinth & CurseForge" />
<Counter icon="ion:star" count="572+" title="Stars in Total" sub="On GitHub" />
<Counter icon="ion:download" count="78.000.000+" title="Total Downloads" sub="Modrinth & CurseForge" />
<Counter icon="ion:code-slash" count="5+" title="Years" sub="Development experience" />
</div>
</div>

15
src/pages/wiki/midnightlib.mdx
View File

@@ -6,7 +6,7 @@ title: MidnightLib Wiki
import VersionDropdown from '../../components/VersionDropdown.astro'
import { Icon } from 'astro-icon/components'
import { Notification } from 'accessible-astro-components'
import { resultingVersion } from '../../js/modversion.js'
import { getResultingVersion } from '../../js/modversion.js'
# MidnightLib Wiki
@@ -33,7 +33,7 @@ dependencies {
```
### `gradle.properties`
<VersionDropdown></VersionDropdown>
{<pre><code className="language-java">midnightlib_version = {resultingVersion}</code></pre>}
{<pre><code className="language-java">midnightlib_version = {getResultingVersion()}</code></pre>}
<Notification type="info">
<Icon name="ion:information-circle-outline" />
@@ -119,4 +119,13 @@ If you don't use the whole library and therefore not the automatic ModMenu integ
public ConfigScreenFactory<?> getModConfigScreenFactory() {
return parent -> MidnightConfig.getScreen(parent, "modid");
}`
```
```
<script>
import Alpine from "alpinejs";
document.addEventListener('alpine:init', () => {
//Alpine.data('versionSelection', () => ({
//}))
})
</script>

72
src/pages/wiki/picturesign.mdx Normal file
View File

@@ -0,0 +1,72 @@
---
layout: ../../layouts/MarkdownLayout.astro
title: PictureSign Wiki
---
import { Icon } from 'astro-icon/components'
import { Notification } from 'accessible-astro-components'
# PictureSign Wiki
Welcome to the PictureSign wiki.
This documentation aims to help you make your world come alive using signs.
Explore PictureSign's features on this page:
[Get to know the features](/picturesign)
### Placing a picture
This mod works using signs to store picture information, making it 100% client-sided – the mod works on every server!
To start, place a picture and click on the icon in the bottom-right.
Great! You have now opened the helper interface. Here, you can add a URL to your desired media and customize various options!
<center><img alt="An image of the PictureSign helper interface" src="/picturesign/helper-gui.webp" width="900"></img></center>
<p class="text-center italic">An image of the PictureSign helper interface</p>
### Using GIFs, video and audio
To use the Multimedia capabilities of this mod, first make sure you have installed the [WATERMeDIA](https://modrinth.com/mod/watermedia) mod, as well as [VLC media player](https://www.videolan.org/vlc/) on your system.
These components allow the video and audio support of PictureSign to work properly.
GIF support does not neccessarily need VLC, just WATERMeDIA.
### Setting up pictures
Pictures can come from various sources:
- Websites (Recommended): [Imgur](https://imgur.com/), [ImgBB](https://ibb.co/), [PictShare](https://pictshare.net/), [Freeimage](https://iili.io/)
- Only these websites will work by default. This is a security measure.
- Resourcepack Textures: Use prefix <span class="bg-clip-text text-transparent bg-gradient-to-r from-green-500 to-blue-500 font-mono">rp:</span> (".png" is optional)
- Texture from Vanilla: e.g. "rp:textures/block/diamond_block.png"
- Texture from a Mod: e.g. "rp:picturesign:textures/gui/sprites/icon/picturesign"
- Local files: Use prefix <span class="bg-clip-text text-transparent bg-gradient-to-r from-green-500 to-blue-500 font-mono">file:</span>
- File in your Minecraft folder: e.g. "file:./config/picturesign/image.png"
- File on your Hard drive: e.g. "file:C:/Users/Motschen/Pictures/image.png" (Windows) or "file:/home/motschen/Pictures/image.png" (Linux/MacOS)
<Notification type="info">
<Icon name="ion:information-circle-outline" />
<p>
<strong>Info:</strong> Avoid using local files to load pictures.
They will not be visible by other players, exept if their instance also includes the files.
</p>
</Notification>
### Setting up GIFs
GIFs can currently only come from one source:
- Websites: [Imgur](https://imgur.com/), [Tenor](https://tenor.com/)
- Only these websites will work by default. This is a security measure.
### Setting up videos and audios
Multimedia can currently only come from one source:
- Websites: [YouTube](https://youtube.com/), [Vimeo](https://vimeo.com/)
- Only these websites will work by default. This is a security measure.
### (Advanced) Changing multimedia properties via JSON
You can specify a volume as well as setting custom start and end times for multimedia using json files.
An example JSON would look like this:
```json
{
"url": "https://youtu.be/dQw4w9WgXcQ",
"volume": "100",
"start_at": "0:18",
"end_at": "1:00"
}
```
Upload your JSON file to one of the following sources:
- Websites: [GitHub](https://github.com/), [GitHub Gists](https://gist.github.com/), [JSON Keeper](https://www.jsonkeeper.com/), [n:point](https://npoint.io/), [JSONsilo](https://jsonsilo.com/)
- Only these websites will work by default. This is a security measure.