ExploreCraft/website
ExploreCraft/website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[C] upgrade to picocss-v2 and rework modlist massively

Browse source
This commit is contained in:
Sangelo 2024-06-11 15:56:15 +02:00
parent 1b2e90e1f3
commit 7faed5af20
13 changed files with 2391 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -9,7 +9,7 @@
"devDependencies": { "devDependencies": {
"@fontsource/fira-mono": "^4.5.10", "@fontsource/fira-mono": "^4.5.10",
"@neoconfetti/svelte": "^1.0.0", "@neoconfetti/svelte": "^1.0.0",
"@picocss/pico": "^1.5.10", "@picocss/pico": "^2.0.6",
"@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-node": "^1.2.4", "@sveltejs/adapter-node": "^1.2.4",
"@sveltejs/adapter-static": "^2.0.3", "@sveltejs/adapter-static": "^2.0.3",

11
src/app.html
View file

@ -6,6 +6,17 @@
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<noscript>
<div class="noscript">This site uses JavaScript extensively. Please consider enabling it.</div>
<style>
.noscript {
background-color: #fd9696;
text-align: center;
color: black;
padding: 0.3em;
}
</style>
</noscript>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>

7
src/app.scss
View file

@ -1,4 +1,7 @@
@import "@picocss/pico/scss/pico"; /* To import only what you need from Pico [check the documentaion](https://picocss.com/docs/customization.html) */ // @import "@picocss/pico/scss/pico"; /* To import only what you need from Pico [check the documentaion](https://picocss.com/docs/customization.html) */
@use "@picocss/pico/scss/pico" with (
$theme-color: "green"
);
@import url('/assets/fonts/fonts.css'); @import url('/assets/fonts/fonts.css');
/* @import url('https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css'); */ /* @import url('https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css'); */
@ -56,4 +59,4 @@ p, li {
article { article {
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 15px rgba(32, 32, 32, 0.2); box-shadow: 0px 0px 15px rgba(32, 32, 32, 0.2);
} }

65
src/lib/modules/ModCard.svelte → src/lib/modules/ModCards.svelte
View file

@ -31,7 +31,7 @@
} }
</script> </script>
<div class="search-container"> <div class="search-container" role="group">
<input type="search" placeholder="Search the mod-verse..." bind:value={searchQuery} /> <input type="search" placeholder="Search the mod-verse..." bind:value={searchQuery} />
<select bind:value={selectedFile} on:change={handleFileChange}> <select bind:value={selectedFile} on:change={handleFileChange}>
{#each fileList as file} {#each fileList as file}
@ -42,35 +42,15 @@
<hr /> <hr />
<div class="grid"> {#if fuzzySearch(searchQuery, mods.mods).length === 0 && fuzzySearch(searchQuery, mods.optional_mods).length === 0}
{#each Array(Math.ceil(fuzzySearch(searchQuery, mods.mods).length / 3)) as _, index} <p>⚠️ No results found.</p>
{#each fuzzySearch(searchQuery, mods.mods).slice(index * 3, (index + 1) * 3) as mod} {:else}
<a <div class="grid" id="mods">
role="button" {#each Array(Math.ceil(fuzzySearch(searchQuery, mods.mods).length / 3)) as _, index}
class="mod-card contrast" {#each fuzzySearch(searchQuery, mods.mods).slice(index * 3, (index + 1) * 3) as mod}
href={mod.link}
target="_blank"
rel="noopener noreferrer"
>
<img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" />
<div class="mod-card-text-ct">
<p class="mod-card-name">{mod.name}</p>
<p class="mod-card-desc">{mod.description}</p>
</div>
</a>
{/each}
{/each}
</div>
<details open>
<!-- svelte-ignore a11y-no-redundant-roles -->
<summary role="button" class="secondary">Optional Mods</summary>
<div class="grid">
{#each Array(Math.ceil(fuzzySearch(searchQuery, mods.optional_mods).length / 3)) as _, index}
{#each fuzzySearch(searchQuery, mods.optional_mods).slice(index * 3, (index + 1) * 3) as mod}
<a <a
role="button" role="button"
class="mod-card contrast" class="mod-card contrast invert"
href={mod.link} href={mod.link}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@ -84,7 +64,31 @@
{/each} {/each}
{/each} {/each}
</div> </div>
</details>
<details open>
<!-- svelte-ignore a11y-no-redundant-roles -->
<summary role="button" class="secondary">Optional Mods</summary>
<div class="grid" id="optional-mods">
{#each Array(Math.ceil(fuzzySearch(searchQuery, mods.optional_mods).length / 3)) as _, index}
{#each fuzzySearch(searchQuery, mods.optional_mods).slice(index * 3, (index + 1) * 3) as mod}
<a
role="button"
class="mod-card contrast"
href={mod.link}
target="_blank"
rel="noopener noreferrer"
>
<img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" />
<div class="mod-card-text-ct">
<p class="mod-card-name">{mod.name}</p>
<p class="mod-card-desc">{mod.description}</p>
</div>
</a>
{/each}
{/each}
</div>
</details>
{/if}
<style lang="scss"> <style lang="scss">
.grid { .grid {
@ -103,10 +107,10 @@
.search-container { .search-container {
display: flex; display: flex;
gap: 1em;
select { select {
width: 40%; width: 40%;
border-radius: 0px 1000px 1000px 0px;
} }
} }
@ -125,6 +129,7 @@
} }
.mod-card-text-ct { .mod-card-text-ct {
width: 100%;
text-align: left; text-align: left;
p { p {
padding: 0; padding: 0;

2
src/routes/+layout.svelte
View file

@ -20,7 +20,7 @@
<footer> <footer>
<p> <p>
&copy; Sangelo & LogolicusZ, 2023 | <a href="https://gitpot.org/ExploreCraft/website"> Source Code</a> &copy; Sangelo & LogolicusZ, 2023-2024 | <a href="https://gitpot.org/ExploreCraft/website"> Source Code</a>
</p> </p>
</footer> </footer>
</div> </div>

90
src/routes/+page.svelte
View file

@ -1,51 +1,69 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from "svelte";
function rand(min, max) { function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min) return Math.floor(Math.random() * (max - min + 1) + min);
} }
onMount(() => {
document.getElementById('banner').src = document.getElementById('banner').src.replace("pic0", `pic${rand(1,30)}`);
console.log(document.getElementById('banner').src);
})
onMount(() => {
document.getElementById("banner").src = document
.getElementById("banner")
.src.replace("pic0", `pic${rand(1, 30)}`);
console.log(document.getElementById("banner").src);
});
</script> </script>
<svelte:head> <svelte:head>
<title>ExploreCraft</title> <title>ExploreCraft</title>
<meta name="description" content="Welcome to ExploreCraft! An exploration-focused and Quilt based modpack for Minecraft 1.19.2" /> <meta
name="description"
content="Welcome to ExploreCraft! An exploration-focused and Quilt based modpack for Minecraft"
/>
</svelte:head> </svelte:head>
<div class="text-column"> <div class="text-column">
<h1>ExploreCraft</h1> <h1 class="main-title">ExploreCraft</h1>
<p> <p>
This is ExploreCraft! A modpack for Minecraft 1.19.2 (Quilt) designed to keep you moving.<br> This is ExploreCraft! A modpack for Minecraft designed to keep you moving.<br
You may never know what you'll find, after all />
</p> You may never know what you'll find, after all
<p>Have a look around. You can download the modpack and play, have a look in our gallery, or take a look at our modlist.</p> </p>
<p>
Have a look around. You can download the modpack and play, have a look in
our gallery, or take a look at our modlist.
</p>
</div> </div>
<div class="grid buttons"> <div class="grid buttons">
<a href="/downloads" role="button">Download</a> <a href="/downloads" role="button">Download</a>
<a href="/modlist" role="button" class="secondary outline">Modlist</a> <a href="/modlist" role="button" class="secondary outline">Modlist</a>
</div> </div>
<!-- svelte-ignore a11y-img-redundant-alt --> <!-- svelte-ignore a11y-img-redundant-alt -->
<a href="/gallery" class="banner" data-tooltip="See more..."><img src="assets/images/gallery/pic0.png" id="banner" alt="Random picture from the gallery."></a> <a href="/gallery" class="banner" data-tooltip="See more...">
<img
src="assets/images/gallery/pic0.png"
id="banner"
alt="Random picture from the gallery."/>
</a>
<style> <style>
a.banner img { .main-title {
border-radius: 1em; margin-bottom: 2em;
transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out; }
align-self: center; a.banner img {
} border-radius: 1em;
a.banner img:hover { transition:
transform: scale(1.005); all 0.3s ease-in-out,
box-shadow: 0px 0px 16px rgba(32, 32, 32, 0.4); box-shadow 0.3s ease-in-out;
cursor: pointer; align-self: center;
} }
.buttons { a.banner img:hover {
margin-left: 25%; transform: scale(1.005);
margin-right: 25%; box-shadow: 0px 0px 16px rgba(32, 32, 32, 0.4);
margin-bottom: 2em; cursor: pointer;
} }
</style> .buttons {
margin-left: 25%;
margin-right: 25%;
margin-bottom: 2em;
}
</style>

6
src/routes/downloads/+page.svelte
View file

@ -4,7 +4,7 @@
<svelte:head> <svelte:head>
<title>Downloads</title> <title>Downloads</title>
<meta name="description" content="About this app" /> <meta name="description" content="Download the ExploreCraft modpack here!" />
</svelte:head> </svelte:head>
<div class="text-column"> <div class="text-column">
@ -110,6 +110,10 @@
<style> <style>
.msg-box {
display: flex;
justify-content: center;
}
.main-card { .main-card {
width: 50%; width: 50%;
justify-self: center; justify-self: center;

13
src/routes/examples/+page.svelte
View file

@ -1,13 +0,0 @@
<script>
import Modal from "$lib/modules/Modal.svelte";
let showModal = false;
const openModal = () => {
showModal = true;
};
</script>
<button on:click={openModal}>Open Modal</button>
{#if showModal}
<Modal title="Modal Title" msg="Modal Message" submit="https://example.com" bind:isOpen={showModal} />
{/if}

16
src/routes/modlist/+page.svelte
View file

@ -1,14 +1,24 @@
<script> <script>
import ModCard from "../../lib/modules/ModCard.svelte"; import ModCards from "../../lib/modules/ModCards.svelte";
</script> </script>
<svelte:head>
<title>ExploreCraft</title>
<meta
name="description"
content="All the mods used in the ExploreCraft modpack. This list will be kept up-to-date as much as possible."
/>
</svelte:head>
<h1>Modlist</h1> <h1>Modlist</h1>
<p> <p>
Here's ExploreCraft's modlist! We will keep this list as up-to-date as possible.<br> Here's ExploreCraft's modlist! We will keep this list up-to-date as much as possible.<br>
Choose an ExploreCraft version in the dropdown next to the search field. Choose an ExploreCraft version in the dropdown next to the search field.
</p> </p>
<p>Please report any missing mods on our <a href="https://discord.gg/Z2YehhEUVr" target="_blank" rel="noopener noreferrer">Discord</a>.</p>
<ModCard /> <ModCards />
<style lang="scss"> <style lang="scss">
.grid { .grid {

BIN
static/assets/images/modlist/no-mod-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

1084
static/assets/json/modlist-marbled.json
View file

File diff suppressed because it is too large Load diff

1190
static/assets/json/modlist-rekindled.json
View file

File diff suppressed because it is too large Load diff

8
yarn.lock
View file

@ -132,10 +132,10 @@
resolved "https://registry.yarnpkg.com/@neoconfetti/svelte/-/svelte-1.0.0.tgz#84a7f98981ad546d959d8c99460da8cebdf70301" resolved "https://registry.yarnpkg.com/@neoconfetti/svelte/-/svelte-1.0.0.tgz#84a7f98981ad546d959d8c99460da8cebdf70301"
integrity sha512-SmksyaJAdSlMa9cTidVSIqYo1qti+WTsviNDwgjNVm+KQ3DRP2Df9umDIzC4vCcpEYY+chQe0i2IKnLw03AT8Q== integrity sha512-SmksyaJAdSlMa9cTidVSIqYo1qti+WTsviNDwgjNVm+KQ3DRP2Df9umDIzC4vCcpEYY+chQe0i2IKnLw03AT8Q==
"@picocss/pico@^1.5.10": "@picocss/pico@^2.0.6":
version "1.5.13" version "2.0.6"
resolved "https://registry.yarnpkg.com/@picocss/pico/-/pico-1.5.13.tgz#2a2f2f5fcdd4e3f4ceedce7f95889faf39025362" resolved "https://registry.yarnpkg.com/@picocss/pico/-/pico-2.0.6.tgz#16e6d253366ab245e67bac6faa95a45edcac4124"
integrity sha512-BPTeE4JC95+7/vsG9r+6hDR1qUkV4YZ1blI/TI6peOmM94XubjmUDE3jUi4f6DBV6WmCL76ueTct/NerJ33E8A== integrity sha512-/d8qsykowelD6g8k8JYgmCagOIulCPHMEc2NC4u7OjmpQLmtSetLhEbt0j1n3fPNJVcrT84dRp0RfJBn3wJROA==
"@polka/url@^1.0.0-next.24": "@polka/url@^1.0.0-next.24":
version "1.0.0-next.25" version "1.0.0-next.25"