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

Fix JavaScript not working after switching pages

Browse Source
This commit is contained in:
Martin Prokoph
2024-09-18 12:58:35 +02:00
parent f102516b76
commit b2e20fa63b
5 changed files with 637 additions and 1289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1701
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "midnightdust-eu", "name": "midnightdust-eu",
"description": "Website for Motschen's Projects. Based on Astro Accessible Starter by Mark Teekman.", "description": "Website for Motschen's Projects. Based on Astro Accessible Starter by Mark Teekman.",
"version": "2.0.0", "version": "2.0.0",
"author": "Martin Prokoph", "author": "Martin Prokoph",
"homepage": "https://www.midnightdust.eu/", "homepage": "https://www.midnightdust.eu/",
@@ -11,24 +11,24 @@
"preview": "astro preview" "preview": "astro preview"
}, },
"devDependencies": { "devDependencies": {
"@astrojs/mdx": "^2.3.1", "@astrojs/mdx": "^3.1.6",
"@astrojs/partytown": "^2.1.2", "@astrojs/partytown": "^2.1.2",
"@astrojs/tailwind": "^5.1.1", "@astrojs/tailwind": "^5.1.1",
"@iconify-json/ion": "^1.2.0", "@iconify-json/ion": "^1.2.0",
"@iconify-json/mdi": "^1.2.0", "@iconify-json/mdi": "^1.2.0",
"@iconify-json/simple-icons": "^1.2.3", "@iconify-json/simple-icons": "^1.2.3",
"@typescript-eslint/eslint-plugin": "^5.62.0", "@typescript-eslint/eslint-plugin": "^8.6.0",
"@typescript-eslint/parser": "^5.62.0", "@typescript-eslint/parser": "^8.6.0",
"accessible-astro-components": "^2.3.6", "accessible-astro-components": "^2.3.6",
"astro": "^4.15.7", "astro": "^4.15.7",
"astro-compress": "^2.3.1", "astro-compress": "^2.3.1",
"astro-icon": "^1.1.1", "astro-icon": "^1.1.1",
"eslint": "^8.57.1", "eslint": "^9.10.0",
"eslint-plugin-astro": "^0.23.0", "eslint-plugin-astro": "^1.2.4",
"eslint-plugin-jsx-a11y": "^6.10.0", "eslint-plugin-jsx-a11y": "^6.10.0",
"prettier": "^2.8.8", "prettier": "^3.3.3",
"prettier-plugin-astro": "^0.8.1", "prettier-plugin-astro": "^0.14.1",
"prettier-plugin-tailwindcss": "^0.2.8", "prettier-plugin-tailwindcss": "^0.6.6",
"sass": "^1.79.1", "sass": "^1.79.1",
"svgo": "^3.3.2", "svgo": "^3.3.2",
"tailwindcss": "^3.4.12" "tailwindcss": "^3.4.12"

113
src/components/ColorPicker.astro
View File

@@ -5,67 +5,78 @@ interface Props {
const { includeHashtag } = Astro.props const { includeHashtag } = Astro.props
import { Icon } from 'astro-icon/components' import { Icon } from 'astro-icon/components'
--- ---
<color-picker>
<section class="my-6"> <section class="my-6">
<div class=""> <div class="">
<p class="text-lg">Select a color below to get the hex code:</p> <p class="text-lg">Select a color below to get the hex code:</p>
<div class="flex"> <div class="flex">
<fieldset> <fieldset>
<input <input
type="color" type="color"
id="color-select" id="color-select"
class="h-16 w-48 hover:cursor-pointer rounded-xl border-neutral-900 dark:border-neutral-100 border-4" class="h-16 w-48 hover:cursor-pointer rounded-xl border-neutral-900 dark:border-neutral-100 border-4"
/> />
</fieldset> </fieldset>
<button <button
id="copy-button" id="copy-button"
class="button has-icon color-secondary ml-3 rounded-md text-white hover:cursor-pointer appearance-none h-16"> class="button has-icon color-secondary ml-3 rounded-md text-white hover:cursor-pointer appearance-none h-16">
<Icon id="copy-icon" name="ion:copy-outline" /> <Icon id="copy-icon" name="ion:copy-outline" />
<Icon id="success-icon" name="ion:checkmark-outline" class="hidden" /> <Icon id="success-icon" name="ion:checkmark-outline" class="hidden" />
<p id="color-label">{includeHashtag ? '#' : ''}000000</p> <p id="color-label">{includeHashtag ? '#' : ''}000000</p>
</div>
</div> </div>
</div> </section>
</section> </color-picker>
<script> <script>
// Get the 2 elements from above // Define the behaviour for our new type of HTML element.
const colorLabel = document.getElementById("color-label"); class ColorPicker extends HTMLElement {
const colorSelect = document.getElementById("color-select"); connectedCallback() {
const copyButton = document.getElementById("copy-button"); // Get the 2 elements from above
const colorLabel = document.getElementById("color-label");
const colorSelect = document.getElementById("color-select");
const copyButton = document.getElementById("copy-button");
const copyIcon = document.getElementById("copy-icon"); const copyIcon = document.getElementById("copy-icon");
const successIcon = document.getElementById("success-icon"); const successIcon = document.getElementById("success-icon");
colorSelect?.addEventListener("change", async (e) => { colorSelect?.addEventListener("change", async (e) => {
const { const {
target: { value }, // Returns the chosen color (already in hex format :D) target: { value }, // Returns the chosen color (already in hex format :D)
} = e; } = e;
if (colorLabel) colorLabel.innerText = colorLabel.innerText.startsWith('#') ? value : value.replace('#', ''); if (colorLabel) colorLabel.innerText = colorLabel.innerText.startsWith('#') ? value : value.replace('#', '');
}); });
// Add event listener to copy the color to the clipboard // Add event listener to copy the color to the clipboard
if (colorLabel) copyButton?.addEventListener('click', () => copyString(colorLabel.innerText, copyButton)); if (colorLabel) copyButton?.addEventListener('click', () => copyString(colorLabel.innerText, copyButton));
async function copyString(text: string, button: HTMLElement) { async function copyString(text: string, button: HTMLElement) {
await navigator.clipboard.writeText(text); await navigator.clipboard.writeText(text);
// visual feedback that task is completed // visual feedback that task is completed
if (button) { if (button) {
button.style.backgroundColor = "#"+text.replace('#', ''); button.style.backgroundColor = "#"+text.replace('#', '');
button.style.borderColor = "#"+text.replace('#', ''); button.style.borderColor = "#"+text.replace('#', '');
} }
if (copyIcon) copyIcon.style.display = 'none'; if (copyIcon) copyIcon.style.display = 'none';
if (successIcon) successIcon.style.display = 'initial'; if (successIcon) successIcon.style.display = 'initial';
setTimeout(() => { setTimeout(() => {
if (button) { if (button) {
button.style.backgroundColor = 'var(--secondary-100)'; button.style.backgroundColor = 'var(--secondary-100)';
button.style.borderColor = 'var(--secondary-100)'; button.style.borderColor = 'var(--secondary-100)';
}
if (copyIcon) copyIcon.style.display = 'initial';
if (successIcon) successIcon.style.display = 'none';
}, 1000);
} }
if (copyIcon) copyIcon.style.display = 'initial'; }
if (successIcon) successIcon.style.display = 'none';
}, 1000);
} }
// Tell the browser to use our ColorPicker class for <color-picker> elements.
customElements.define('color-picker', ColorPicker);
</script> </script>

83
src/layouts/MarkdownLayout.astro
View File

@@ -3,44 +3,6 @@ import DefaultLayout from './DefaultLayout.astro'
const { frontmatter } = Astro.props const { frontmatter } = Astro.props
--- ---
<!-- Copy Code Buttons based on: https://timneubauer.dev/blog/copy-code-button-in-astro/ -->
<script>
let copyButtonLabel = "Copy Code";
let codeBlocks = Array.from(document.querySelectorAll("pre"));
for (let codeBlock of codeBlocks) {
let wrapper = document.createElement("div");
wrapper.style.position = "relative";
let copyButton = document.createElement("button");
copyButton.className = "copy-code";
copyButton.innerHTML = copyButtonLabel;
codeBlock.setAttribute("tabindex", "0");
codeBlock.appendChild(copyButton);
// wrap codebock with relative parent element
if (codeBlock.parentNode) codeBlock.parentNode.insertBefore(wrapper, codeBlock);
wrapper.appendChild(codeBlock);
copyButton.addEventListener("click", async () => {
await copyCode(codeBlock, copyButton);
});
}
async function copyCode(block, button) {
let code = block.querySelector("code");
let text = code.innerText;
await navigator.clipboard.writeText(text);
// visual feedback that task is completed
button.innerText = "Code Copied!";
setTimeout(() => {
button.innerText = copyButtonLabel;
}, 700);
}
</script>
<DefaultLayout title={frontmatter.title}> <DefaultLayout title={frontmatter.title}>
<div class="container"> <div class="container">
@@ -50,6 +12,51 @@ const { frontmatter } = Astro.props
</div> </div>
</DefaultLayout> </DefaultLayout>
<!-- Copy Code Buttons based on: https://timneubauer.dev/blog/copy-code-button-in-astro/ -->
<script>
initCopyCodeButtons();
document.addEventListener('astro:after-swap', initCopyCodeButtons);
function initCopyCodeButtons() {
console.log("Initializing Copy Code Buttons...");
let copyButtonLabel = "Copy Code";
let codeBlocks = Array.from(document.querySelectorAll("pre"));
for (let codeBlock of codeBlocks) {
let wrapper = document.createElement("div");
wrapper.style.position = "relative";
let copyButton = document.createElement("button");
copyButton.className = "copy-code";
copyButton.innerHTML = copyButtonLabel;
codeBlock.setAttribute("tabindex", "0");
codeBlock.appendChild(copyButton);
// wrap codebock with relative parent element
if (codeBlock.parentNode) codeBlock.parentNode.insertBefore(wrapper, codeBlock);
wrapper.appendChild(codeBlock);
copyButton.addEventListener("click", async () => {
await copyCode(codeBlock, copyButton);
});
}
async function copyCode(block, button) {
let code = block.querySelector("code");
let text = code.innerText;
await navigator.clipboard.writeText(text);
// visual feedback that task is completed
button.innerText = "Code Copied!";
setTimeout(() => {
button.innerText = copyButtonLabel;
}, 700);
}
}
</script>
<style is:global> <style is:global>
.copy-code { .copy-code {
position: absolute; position: absolute;

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

@@ -173,13 +173,4 @@ If you don't use the whole library and therefore not the automatic ModMenu integ
public ConfigScreenFactory<?> getModConfigScreenFactory() { public ConfigScreenFactory<?> getModConfigScreenFactory() {
return parent -> MidnightConfig.getScreen(parent, "modid"); return parent -> MidnightConfig.getScreen(parent, "modid");
}` }`
``` ```
<script>
import Alpine from "alpinejs";
document.addEventListener('alpine:init', () => {
//Alpine.data('versionSelection', () => ({
//}))
})
</script>