Skip to content

Commit

Permalink
replace alphine js with vue????
Browse files Browse the repository at this point in the history
  • Loading branch information
@3vorp
3vorp committed Apr 28, 2024
1 parent d53a214 commit daafa12
Showing 1 changed file with 145 additions and 155 deletions.
300 changes: 145 additions & 155 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,186 +5,176 @@

<link rel="stylesheet" href="{{ site.baseurl }}/css/index.css">

<h1 class="display-4" align="center">Discover Faithful</h1><br>
<div class="res-grid-2">
<div class="card discover">
<div class="poster">
<img class="card-image" src="{{ site.baseurl }}/image/home/poster_32.jpg" alt="Faithful 32x">
<img class="card-image wordmark" src="{{ site.baseurl }}/image/home/f32.png" alt="Faithful 32x wordmark">
</div>
<div class="card-body">
<div class="card-text auto-flex">
<h7 class="my-2 text-center" style="min-height: 65px">The original Minecraft texture feel, with double the resolution and double the fun!</h7><br>
<div id="app">
<h1 class="display-4" align="center">Discover Faithful</h1><br>
<div class="res-grid-2">
<div class="card discover">
<div class="poster">
<img class="card-image" src="{{ site.baseurl }}/image/home/poster_32.jpg" alt="Faithful 32x">
<img class="card-image wordmark" src="{{ site.baseurl }}/image/home/f32.png" alt="Faithful 32x wordmark">
</div>
<div class="card-body">
<div class="card-text auto-flex">
<h7 class="my-2 text-center" style="min-height: 65px">The original Minecraft texture feel, with double the resolution and double the fun!</h7><br>
</div>
<a class="btn block btn-dark" href="{{ site.baseurl }}/faithful32x/latest">See Latest Version</a>
</div>
<a class="btn block btn-dark" href="{{ site.baseurl }}/faithful32x/latest">See Latest Version</a>
</div>
</div>
<div class="card discover">
<div class="poster">
<img class="card-image" src="{{ site.baseurl }}/image/home/poster_64.jpg" alt="Faithful 64x">
<img class="card-image wordmark" src="{{ site.baseurl }}/image/home/f64.png" alt="Faithful 64x wordmark">
</div>
<div class="card-body">
<div class="card-text auto-flex">
<h7 class="my-2 text-center" style="min-height: 65px">An even more detailed experience with quadruple-resolution textures!</h7><br>
<div class="card discover">
<div class="poster">
<img class="card-image" src="{{ site.baseurl }}/image/home/poster_64.jpg" alt="Faithful 64x">
<img class="card-image wordmark" src="{{ site.baseurl }}/image/home/f64.png" alt="Faithful 64x wordmark">
</div>
<div class="card-body">
<div class="card-text auto-flex">
<h7 class="my-2 text-center" style="min-height: 65px">An even more detailed experience with quadruple-resolution textures!</h7><br>
</div>
<a class="btn block btn-dark" href="{{ site.baseurl }}/faithful64x/latest">See Latest Version</a>
</div>
<a class="btn block btn-dark" href="{{ site.baseurl }}/faithful64x/latest">See Latest Version</a>
</div>
</div>
</div>

<br>
<br>

<div class="res-grid-2">
<div class="card discover">
<div class="poster">
<img class="card-image" src="{{ site.baseurl }}/image/home/poster_cf32.jpg" alt="Classic Faithful 32x">
<img class="card-image wordmark" src="{{ site.baseurl }}/image/home/cf32.png" alt="Classic Faithful 32x Wordmark">
</div>
<div class="card-body">
<div class="card-text auto-flex">
<h7 class="my-2 text-center" style="min-height: 65px">The older yet refreshed look of Faithful, for when you need that nostalgic hit!</h7><br>
<div class="res-grid-2">
<div class="card discover">
<div class="poster">
<img class="card-image" src="{{ site.baseurl }}/image/home/poster_cf32.jpg" alt="Classic Faithful 32x">
<img class="card-image wordmark" src="{{ site.baseurl }}/image/home/cf32.png" alt="Classic Faithful 32x Wordmark">
</div>
<div class="button-2">
<a class="btn btn-dark" href="{{ site.baseurl }}/classicfaithful/32x-jappa">New Textures [Jappa]</a>
<a class="btn btn-dark" href="{{ site.baseurl }}/classicfaithful/32x-programmer-art">Old Textures [PA]</a>
<div class="card-body">
<div class="card-text auto-flex">
<h7 class="my-2 text-center" style="min-height: 65px">The older yet refreshed look of Faithful, for when you need that nostalgic hit!</h7><br>
</div>
<div class="button-2">
<a class="btn btn-dark" href="{{ site.baseurl }}/classicfaithful/32x-jappa">New Textures [Jappa]</a>
<a class="btn btn-dark" href="{{ site.baseurl }}/classicfaithful/32x-programmer-art">Old Textures [PA]</a>
</div>
</div>
</div>
</div>
<div class="card discover">
<div class="poster">
<img class="card-image" src="{{ site.baseurl }}/image/home/poster_cf64.jpg" alt="Classic Faithful 64x">
<img class="card-image wordmark" src="{{ site.baseurl }}/image/home/cf64.png" alt="Classic Faithful 64x Wordmark">
</div>
<div class="card-body">
<div class="card-text auto-flex">
<h7 class="my-2 text-center" style="min-height: 65px">The traditional Faithful style with fully refreshed and ultra high-resolution textures!</h7><br>
<div class="card discover">
<div class="poster">
<img class="card-image" src="{{ site.baseurl }}/image/home/poster_cf64.jpg" alt="Classic Faithful 64x">
<img class="card-image wordmark" src="{{ site.baseurl }}/image/home/cf64.png" alt="Classic Faithful 64x Wordmark">
</div>
<div class="card-body">
<div class="card-text auto-flex">
<h7 class="my-2 text-center" style="min-height: 65px">The traditional Faithful style with fully refreshed and ultra high-resolution textures!</h7><br>
</div>
<a class="btn block btn-dark" href="{{ site.baseurl }}/classicfaithful/64x-jappa">View Post</a>
</div>
<a class="btn block btn-dark" href="{{ site.baseurl }}/classicfaithful/64x-jappa">View Post</a>
</div>
</div>
</div>

<br>
<br>

<div class="res-grid-2" id="last-grid">
<div class="card discover">
<div class="poster">
<img class="card-image" src="{{ site.baseurl }}/image/home/poster_addons.jpg" alt="Faithful Add-ons">
<img class="card-image wordmark" src="{{ site.baseurl }}/image/home/addons.png" alt="Faithful Add-ons wordmark">
</div>
<div class="card-body">
<div class="card-text auto-flex">
<h7 class="my-2 text-center" style="min-height: 65px">A plethora of modifications to all our base packs, ranging from redstone utilities to a rainbow XP bar!</h7><br>
<div class="res-grid-2" id="last-grid">
<div class="card discover">
<div class="poster">
<img class="card-image" src="{{ site.baseurl }}/image/home/poster_addons.jpg" alt="Faithful Add-ons">
<img class="card-image wordmark" src="{{ site.baseurl }}/image/home/addons.png" alt="Faithful Add-ons wordmark">
</div>
<div class="card-body">
<div class="card-text auto-flex">
<h7 class="my-2 text-center" style="min-height: 65px">A plethora of modifications to all our base packs, ranging from redstone utilities to a rainbow XP bar!</h7><br>
</div>
<a class="btn block btn-dark" href="{{ site.baseurl }}/addons">Discover Add-ons</a>
</div>
<a class="btn block btn-dark" href="{{ site.baseurl }}/addons">Discover Add-ons</a>
</div>
</div>
<!-- <div class="card discover">
<div class="poster">
<img class="card-image" src="{{ site.baseurl }}/image/home/poster_mods.jpg" alt="Faithful Dungeons">
<img class="card-image wordmark" src="{{ site.baseurl }}/image/home/mods.png" alt="Faithful Mods wordmark">
</div>
<div class="card-body">
<div class="card-text auto-flex">
<h7 class="my-2 text-center" style="min-height: 65px">A massive catalog of mods and modpack support for retaining the Faithful feel however you choose to play! </h7><br>
<!-- <div class="card discover">
<div class="poster">
<img class="card-image" src="{{ site.baseurl }}/image/home/poster_mods.jpg" alt="Faithful Dungeons">
<img class="card-image wordmark" src="{{ site.baseurl }}/image/home/mods.png" alt="Faithful Mods wordmark">
</div>
<p class="btn block btn-dark disabled">Coming Soon...</p>
<div class="btn-group">
<a class="btn btn-dark col-6" href="{{ site.baseurl }}/mods">Mods</a>
<a class="btn btn-dark col-6" href="{{ site.baseurl }}/modpacks">Modpacks</a>
<div class="card-body">
<div class="card-text auto-flex">
<h7 class="my-2 text-center" style="min-height: 65px">A massive catalog of mods and modpack support for retaining the Faithful feel however you choose to play! </h7><br>
</div>
<p class="btn block btn-dark disabled">Coming Soon...</p>
<div class="btn-group">
<a class="btn btn-dark col-6" href="{{ site.baseurl }}/mods">Mods</a>
<a class="btn btn-dark col-6" href="{{ site.baseurl }}/modpacks">Modpacks</a>
</div>
</div>
</div>
-->
</div>
-->
</div>

<br>

<p class="blurple banner">
<a href="https://discord.gg/sN9YRQbBv7">Join our Discord now and contribute to the project!</a>
</p>
<br>

<script defer src="js/axios.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script>
const NB_ITEMS = 3
const LOADING_ID = "loading"
const DEFAULT = new Array(NB_ITEMS).fill({
slug: LOADING_ID,
title: "Loading...",
images: {
header: "{{ site.baseurl }}/image/home/see_more.png"
},
options: {
tags: [],
optifine: false,
},
})
document.addEventListener('alpine:init', () => {
Alpine.data('add', () => ({
addons: DEFAULT,
init() {
fetch('https://api.faithfulpack.net/v2/addons/approved')
.then(res => res.json())
.then(val => {
const res = []
<hr>
<br>
<h1 class="display-4" align="center">Add-ons</h1>
<div class="res-grid-4">
<template v-for="addon in addons">
<a class="card img-card" :href="addon.slug === LOADING_ID ? '' : '/addons/' + addon.slug">
<img :src="addon.slug === LOADING_ID ? '{{ site.baseurl }}/image/home/see_more.png' : 'https://database.faithfulpack.net/images/addons/' + addon.slug + '/header'" :alt="addon.name" loading="lazy">
<div class="img-card-shadow"></div>
<h3 v-text="addon.name"></h3>
<div class="addon-flags" style="margin-bottom: 5px">
<img v-show="addon.options.tags.includes('Java')" style="margin-bottom: 5px" src="/image/icon/java.png" alt="available for Java Edition" loading="lazy">
<img v-show="addon.options.tags.includes('Bedrock')" style="margin-bottom: 5px" src="/image/icon/bedrock.png" alt="available for Bedrock Edition" loading="lazy">
<img v-show="addon.options.optifine" style="margin-bottom: 5px" class="optifine" src="/image/icon/optifine.png" alt="requires optifine" loading="lazy">
</div>
</a>
</template>
<a class="card img-card" rel="noopener" href="{{ site.baseurl }}/addons">
<img src="{{ site.baseurl }}/image/home/see_more.png" loading="lazy" alt="See more" style="background: #0000 !important">
<h3>See More</h3>
</a>
</div>

let items = val
for (let i = 0; i <NB_ITEMS; i++) {
// splice removes element from list and returns the retrieved elements
// removes duplicate suggested add-ons
const element = items.splice((Math.random() * items.length) | 0, 1)[0]
res.push(element)
}
this.addons = res
})
.catch((err) => {
console.error(err)
this.addons = []
})
}
}))
})
</script>
<hr>
<br>
<h1 class="display-4" align="center">Faithful News</h1>

<hr>
<br>
<h1 class="display-4" align="center">Add-ons</h1>
<div class="res-grid-4" x-data="add" @click="console.log(addons)">
<template x-for="addon in addons">
<a class="card img-card" x-bind:href="addon.slug === LOADING_ID ? '' : '/addons/' + addon.slug">
<img x-bind:src="addon.slug === LOADING_ID ? '{{ site.baseurl }}/image/home/see_more.png' : 'https://database.faithfulpack.net/images/addons/' + addon.slug + '/header'" x-bind:alt="addon.name" loading="lazy">
<div class="img-card-shadow"></div>
<h3 x-text="addon.name"></h3>
<div class="addon-flags" style="margin-bottom: 5px">
<img x-show="addon.options.tags.includes('Java')" style="margin-bottom: 5px" src="/image/icon/java.png" alt="available for Java Edition" loading="lazy">
<img x-show="addon.options.tags.includes('Bedrock')" style="margin-bottom: 5px" src="/image/icon/bedrock.png" alt="available for Bedrock Edition" loading="lazy">
<img x-show="addon.options.optifine" style="margin-bottom: 5px" class="optifine" src="/image/icon/optifine.png" alt="requires optifine" loading="lazy">
</div>
</a>
</template>
<a class="card img-card" rel="noopener" href="{{ site.baseurl }}/addons">
<img src="{{ site.baseurl }}/image/home/see_more.png" loading="lazy" alt="See more" style="background: #0000 !important">
<h3>See More</h3>
</a>
<div class="res-grid-3">
{%- for post in site.posts limit:6 -%}
<a class="card img-card" rel="noopener" href="{{ site.baseurl }}{{ post.permalink }}">
{%- if post.header-img -%}
<img src="{{ post.header-img }}" loading="lazy" alt="{{ image.basename }}">
{%- else -%}
<img src="https://database.faithfulpack.net/images/website/posts/placeholder.jpg" loading="lazy" alt="{{ post.title }}">
{%- endif -%}
<h3>{{ post.title }}</h3>
</a>
{%- endfor -%}
</div>
<br>
<a class="btn btn-dark col-6 center" href="{{ site.baseurl }}/news">See more</a>
</div>

<hr>
<br>
<h1 class="display-4" align="center">Faithful News</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
const v = new Vue({
el: "#app",
data() {
return {
addons: [],
NB_ITEMS: 3,
LOADING_ID: "loading",

<div class="res-grid-3">
{%- for post in site.posts limit:6 -%}
<a class="card img-card" rel="noopener" href="{{ site.baseurl }}{{ post.permalink }}">
{%- if post.header-img -%}
<img src="{{ post.header-img }}" loading="lazy" alt="{{ image.basename }}">
{%- else -%}
<img src="https://database.faithfulpack.net/images/website/posts/placeholder.jpg" loading="lazy" alt="{{ post.title }}">
{%- endif -%}
<h3>{{ post.title }}</h3>
</a>
{%- endfor -%}
</div>
<br>
<a class="btn btn-dark col-6 center" href="{{ site.baseurl }}/news">See more</a>
};
},
created() {
fetch('https://api.faithfulpack.net/v2/addons/approved')
.then(res => res.json())
.then(val => {
const res = []

let items = val
for (let i = 0; i < this.NB_ITEMS; i++) {
// splice removes element from list and returns the retrieved elements
// removes duplicate suggested add-ons
const element = items.splice((Math.random() * items.length) | 0, 1)[0]
res.push(element)
}
this.addons = res
})
.catch((err) => {
console.error(err)
this.addons = []
});
}
});
</script>

0 comments on commit daafa12

Please sign in to comment.