From daafa1254426133ef65c6e2330392a15d866d33b Mon Sep 17 00:00:00 2001
From: Evorp <3vorpgaming@gmail.com>
Date: Sun, 28 Apr 2024 13:45:39 -0700
Subject: [PATCH] replace alphine js with vue????

---
 index.html | 300 ++++++++++++++++++++++++++---------------------------
 1 file changed, 145 insertions(+), 155 deletions(-)

diff --git a/index.html b/index.html
index 1909f00d..e6cc15b7 100644
--- a/index.html
+++ b/index.html
@@ -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/alpinejs@3.9.0/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/vue@2.6.14/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>
\ No newline at end of file