GH-81 Connect website with github for use pinned repos (#81)

Author: vLuckyyy

public/assets/img/projects/chat.webp renamed to public/assets/img/projects/logo/ChatFormatter_icon.webp

@@ -1,67 +1,45 @@
 <template>
   <section id="projects">
-
     <h1>{{ $t("message.projects.title") }}</h1>
     <p>{{ $t("message.projects.subtitle") }}</p>
-
     <div class="row projects-row">
       <Project
-          description="♾️ All the most important server functions in one!️"
-          githubUrl="https://github.com/EternalCodeTeam/EternalCore"
-          imageUrl="/assets/img/projects/infinity.webp"
-          name="EternalCore"
-          :hrefText="$t('message.projects.more')"
-      />
-      <Project
-          description="📝 The most intelligent chat formatting plugin with minimessages support!"
-          githubUrl="https://github.com/EternalCodeTeam/ChatFormatter"
-          spigotUrl="https://www.spigotmc.org/resources/102212/"
-          modrinth-url="https://modrinth.com/plugin/chatformatter"
-          imageUrl="/assets/img/projects/chat.webp"
-          name="ChatFormatter"
-          :hrefText="$t('message.projects.more')"
-      />
-      <Project
-          description="⚔ Combat Logging system for Minecraft!"
-          githubUrl="https://github.com/EternalCodeTeam/EternalCombatLog"
-          imageUrl="/assets/img/projects/swords.webp"
-          name="CombatLog"
-          :hrefText="$t('message.projects.more')"
-      />
-      <Project
-          description="👮‍♂️ EternalCode discord community officer!"
-          githubUrl="https://github.com/EternalCodeTeam/DiscordOfficer"
-          imageUrl="/assets/img/projects/police-officer.webp"
-          name="DiscordOfficer"
-          :hrefText="$t('message.projects.more')"
-      />
-      <Project
-          description="📖 All documentations of EternalCodeTeam Projects & Tutorials 😍"
-          githubUrl="https://github.com/EternalCodeTeam/Docs"
-          imageUrl="/assets/img/projects/folder.webp"
-          name="Docs"
-          :hrefText="$t('message.projects.more')"
-      />
-      <Project
-          description="🏬 EternalCodeTeam website based on Bootstrap 5 and Vue.js!"
-          githubUrl="https://github.com/EternalCodeTeam/EternalCode-WWW"
-          imageUrl="/assets/img/projects/web.webp"
-          name="EternalCode-WWW"
+          v-for="(project, index) in projects"
+          :key="index"
+          :description="project.description"
+          :githubUrl="project.link"
           :hrefText="$t('message.projects.more')"
+          :imageUrl="'/assets/img/projects/logo/' + project.repo + '_icon.webp'"
+          :spigotUrl="projectLinks[project.repo]?.spigotmc"
+          :modrinthUrl="projectLinks[project.repo]?.modrinth"
+          :name="project.repo"
       />
-
     </div>
   </section>
 </template>
 
 <script>
 import Project from "./components/Project.vue";
+import projectLinks from "@/info/project_links.json"
 
 export default {
   name: "Projects",
   components: {
     Project,
   },
+  data() {
+    return {
+      projects: [],
+      projectLinks: projectLinks
+    };
+  },
+  mounted() {
+    fetch("https://gh-pinned-repos.egoist.dev/?username=eternalcodeteam")
+        .then(response => response.json())
+        .then(data => {
+          this.projects = data;
+        });
+  },
 };
 </script>
 

public/assets/img/projects/police-officer.webp renamed to public/assets/img/projects/logo/DiscordOfficer_icon.webp

@@ -0,0 +1,10 @@
+{
+  "ChatFormatter": {
+    "spigotmc": "https://www.spigotmc.org/resources/%EF%B8%8F-chatformatter-%E2%9C%94%EF%B8%8F-minimessages-%E2%9C%94%EF%B8%8F-template-system-%E2%9C%94%EF%B8%8F-placeholders-%E2%9C%94%EF%B8%8F-vault-support.102212/",
+    "modrinth": "https://modrinth.com/plugin/chatformatter"
+  },
+  "EternalCombat": {
+    "spigotmc": "https://www.spigotmc.org/resources/eternalcombat-%E2%9C%94%EF%B8%8Fenchance-your-combat-system-with-eternalcombat.109056/",
+    "modrinth": "https://modrinth.com/plugin/eternalcombat"
+  }
+}