mirror of
https://github.com/Motschen/midnightdust-eu.git
synced 2025-12-15 10:05:09 +01:00
Fix JavaScript not working after switching pages
This commit is contained in:
Martin Prokoph
1701
package-lock.json
generated
1701
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
18
package.json
18
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"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",
|
||||
"author": "Martin Prokoph",
|
||||
"homepage": "https://www.midnightdust.eu/",
|
||||
@@ -11,24 +11,24 @@
|
||||
"preview": "astro preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/mdx": "^2.3.1",
|
||||
"@astrojs/mdx": "^3.1.6",
|
||||
"@astrojs/partytown": "^2.1.2",
|
||||
"@astrojs/tailwind": "^5.1.1",
|
||||
"@iconify-json/ion": "^1.2.0",
|
||||
"@iconify-json/mdi": "^1.2.0",
|
||||
"@iconify-json/simple-icons": "^1.2.3",
|
||||
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
||||
"@typescript-eslint/parser": "^5.62.0",
|
||||
"@typescript-eslint/eslint-plugin": "^8.6.0",
|
||||
"@typescript-eslint/parser": "^8.6.0",
|
||||
"accessible-astro-components": "^2.3.6",
|
||||
"astro": "^4.15.7",
|
||||
"astro-compress": "^2.3.1",
|
||||
"astro-icon": "^1.1.1",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-plugin-astro": "^0.23.0",
|
||||
"eslint": "^9.10.0",
|
||||
"eslint-plugin-astro": "^1.2.4",
|
||||
"eslint-plugin-jsx-a11y": "^6.10.0",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-astro": "^0.8.1",
|
||||
"prettier-plugin-tailwindcss": "^0.2.8",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-astro": "^0.14.1",
|
||||
"prettier-plugin-tailwindcss": "^0.6.6",
|
||||
"sass": "^1.79.1",
|
||||
"svgo": "^3.3.2",
|
||||
"tailwindcss": "^3.4.12"
|
||||
|
||||
@@ -5,67 +5,78 @@ interface Props {
|
||||
const { includeHashtag } = Astro.props
|
||||
import { Icon } from 'astro-icon/components'
|
||||
---
|
||||
|
||||
<section class="my-6">
|
||||
<div class="">
|
||||
<p class="text-lg">Select a color below to get the hex code:</p>
|
||||
<div class="flex">
|
||||
<fieldset>
|
||||
<input
|
||||
type="color"
|
||||
id="color-select"
|
||||
class="h-16 w-48 hover:cursor-pointer rounded-xl border-neutral-900 dark:border-neutral-100 border-4"
|
||||
/>
|
||||
</fieldset>
|
||||
<button
|
||||
id="copy-button"
|
||||
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="success-icon" name="ion:checkmark-outline" class="hidden" />
|
||||
<p id="color-label">{includeHashtag ? '#' : ''}000000</p>
|
||||
<color-picker>
|
||||
<section class="my-6">
|
||||
<div class="">
|
||||
<p class="text-lg">Select a color below to get the hex code:</p>
|
||||
<div class="flex">
|
||||
<fieldset>
|
||||
<input
|
||||
type="color"
|
||||
id="color-select"
|
||||
class="h-16 w-48 hover:cursor-pointer rounded-xl border-neutral-900 dark:border-neutral-100 border-4"
|
||||
/>
|
||||
</fieldset>
|
||||
<button
|
||||
id="copy-button"
|
||||
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="success-icon" name="ion:checkmark-outline" class="hidden" />
|
||||
<p id="color-label">{includeHashtag ? '#' : ''}000000</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</color-picker>
|
||||
|
||||
<script>
|
||||
// Get the 2 elements from above
|
||||
const colorLabel = document.getElementById("color-label");
|
||||
const colorSelect = document.getElementById("color-select");
|
||||
const copyButton = document.getElementById("copy-button");
|
||||
// Define the behaviour for our new type of HTML element.
|
||||
class ColorPicker extends HTMLElement {
|
||||
connectedCallback() {
|
||||
// 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 successIcon = document.getElementById("success-icon");
|
||||
const copyIcon = document.getElementById("copy-icon");
|
||||
const successIcon = document.getElementById("success-icon");
|
||||
|
||||
colorSelect?.addEventListener("change", async (e) => {
|
||||
const {
|
||||
target: { value }, // Returns the chosen color (already in hex format :D)
|
||||
} = e;
|
||||
if (colorLabel) colorLabel.innerText = colorLabel.innerText.startsWith('#') ? value : value.replace('#', '');
|
||||
});
|
||||
colorSelect?.addEventListener("change", async (e) => {
|
||||
const {
|
||||
target: { value }, // Returns the chosen color (already in hex format :D)
|
||||
} = e;
|
||||
if (colorLabel) colorLabel.innerText = colorLabel.innerText.startsWith('#') ? value : value.replace('#', '');
|
||||
});
|
||||
|
||||
// Add event listener to copy the color to the clipboard
|
||||
if (colorLabel) copyButton?.addEventListener('click', () => copyString(colorLabel.innerText, copyButton));
|
||||
|
||||
// Add event listener to copy the color to the clipboard
|
||||
if (colorLabel) copyButton?.addEventListener('click', () => copyString(colorLabel.innerText, copyButton));
|
||||
|
||||
async function copyString(text: string, button: HTMLElement) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
async function copyString(text: string, button: HTMLElement) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
|
||||
// visual feedback that task is completed
|
||||
if (button) {
|
||||
button.style.backgroundColor = "#"+text.replace('#', '');
|
||||
button.style.borderColor = "#"+text.replace('#', '');
|
||||
}
|
||||
if (copyIcon) copyIcon.style.display = 'none';
|
||||
if (successIcon) successIcon.style.display = 'initial';
|
||||
// visual feedback that task is completed
|
||||
if (button) {
|
||||
button.style.backgroundColor = "#"+text.replace('#', '');
|
||||
button.style.borderColor = "#"+text.replace('#', '');
|
||||
}
|
||||
if (copyIcon) copyIcon.style.display = 'none';
|
||||
if (successIcon) successIcon.style.display = 'initial';
|
||||
|
||||
setTimeout(() => {
|
||||
if (button) {
|
||||
button.style.backgroundColor = 'var(--secondary-100)';
|
||||
button.style.borderColor = 'var(--secondary-100)';
|
||||
setTimeout(() => {
|
||||
if (button) {
|
||||
button.style.backgroundColor = '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>
|
||||
@@ -3,44 +3,6 @@ import DefaultLayout from './DefaultLayout.astro'
|
||||
|
||||
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}>
|
||||
<div class="container">
|
||||
@@ -50,6 +12,51 @@ const { frontmatter } = Astro.props
|
||||
</div>
|
||||
</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>
|
||||
.copy-code {
|
||||
position: absolute;
|
||||
|
||||
@@ -173,13 +173,4 @@ 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>
|
||||
```
|
||||
Reference in New Issue
Block a user