GH-95 All project section (#95)

* Initial commit

* Change styling to match site contents

* Change styling of button for all-projects section. Add hover effect, set label with status display. Add timeout for GitHub fetch to match time of fetching pinned repositories.

* Extend timeout to 3sec

* Styling changes and remove on/off status from toggle status label

* Delete button, set label to toggle list, use language file for section title

* Match background color with projects above

* Delete AllProjects.vue, fetch all projects from repository to our site. Ignore .github project.

* Set placeholder icon for all repositories w/o one. Set order of repositories based on pinned status (not working yet)

* Set reorder method for projects. Run into problems :/

* Check solution for projects.ts

* style correction

* Fix unused lang settings, fix Project.vue style from Projects.vue. Add ProjectsFetch.ts, add all-projects component

* Add language detection of projects, add corresponding project icon

* Change arrow pointer for dropdown text

* add user-select: none;

* Cleanup code

* Cleanup code

* Add scroll into view for button press

---------

Co-authored-by: Krzysztof Haller <[email protected]>

Author: CitralFlo

public/assets/img/projects/language/Go.webp

@@ -0,0 +1,138 @@
+<template>
+  <section id="all-projects">
+    <div class="all-projects-section">
+      <label class="others-status" @click="toggleActive">
+        {{ $t("message.projects.other") }}
+        <svg
+            class="arrow" :class="{ active: isActive}"
+            aria-hidden="true"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg">
+          <path
+              clip-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              fill-rule="evenodd"></path>
+        </svg>
+      </label>
+      <div class="all-projects-tab-container">
+        <div id="all-projects-tab" class="all-projects-tab" :class="{ active: isActive}">
+          <div class="row projects-row">
+            <Project v-for="(project, index) in projects"
+                     :key="index"
+                     :name="project.name"
+                     :description="project.description"
+                     :githubUrl="`https://github.com/EternalCodeTeam/${project.name}`"
+                     :imageUrl="'/assets/img/projects/language/' + project.language + '.webp'"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+
+import Project from "@/components/projects/components/Project.vue";
+import {notPinnedProjects} from "@/components/projects/ProjectsFetch.ts";
+
+export default {
+  name: "Projects",
+  components: {
+    Project
+  },
+  data() {
+    return {
+      projects: [],
+      isActive: false,
+    };
+  },
+  mounted() {
+    notPinnedProjects.then((projects) => this.projects = projects);
+  },
+  methods: {
+    toggleActive() {
+      this.isActive = !this.isActive;
+      if (this.isActive) {
+        setTimeout(() => {
+          document.getElementById("all-projects-tab").scrollIntoView({behavior: "auto"});
+        }, 290);
+      }
+    },
+  },
+};
+</script>
+
+<style>
+#all-projects {
+  padding: 0 12% 3% 12%;
+}
+
+.arrow {
+  width: 60px;
+  height: auto;
+  transition: 0.3s ease-in-out
+}
+
+.arrow.active {
+  transform: rotate(-180deg);
+}
+
+
+.all-projects-tab-container {
+  overflow: hidden;
+}
+
+.others-status {
+  display: inline-block;
+  color: var(--primary-title);
+  font-weight: 800;
+  user-select: none;
+  font-size: 30px;
+  cursor: pointer;
+}
+
+.all-projects-tab {
+  z-index: -1;
+  margin-top: -110vh;
+  transition-duration: 0.5s;
+  opacity: 1;
+}
+
+.all-projects-tab.active {
+  display: block;
+  margin-top: 50px;
+  transition-duration: 0.5s;
+  opacity: 1;
+}
+
+.row.projects-row img {
+  width: 65%;
+}
+
+
+#all-projects > div {
+  margin: 0;
+  padding: 0;
+}
+
+.others-status {
+  z-index: 3;
+  width: 100%;
+  text-align: center;
+  margin: auto;
+}
+
+@media only screen and (max-width: 1000px) {
+  .all-projects-section {
+    position: center;
+    padding: 5px;
+  }
+
+  .all-projects-tab {
+    margin-top: -500vh;
+  }
+
+}
+</style>

public/assets/img/projects/language/Java.webp

@@ -4,15 +4,14 @@
     <p>{{ $t("message.projects.subtitle") }}</p>
     <div class="row projects-row">
       <Project
-          v-for="(project, index) in projects"
+          v-for="(project, index) in this.projects"
           :key="index"
+          :name="project.name"
           :description="project.description"
+          :imageUrl="'/assets/img/projects/logo/' + project.name + '_icon.webp'"
           :githubUrl="project.link"
-          :hrefText="$t('message.projects.more')"
-          :imageUrl="'/assets/img/projects/logo/' + project.repo + '_icon.webp'"
-          :modrinthUrl="projectLinks[project.repo]?.modrinth"
-          :name="project.repo"
-          :spigotUrl="projectLinks[project.repo]?.spigotmc"
+          :spigotUrl="projectLinks[project.name]?.spigotmc"
+          :modrinthUrl="projectLinks[project.name]?.modrinth"
       />
     </div>
   </section>
@@ -21,6 +20,7 @@
 <script>
 import Project from "./components/Project.vue";
 import projectLinks from "@/info/project_links.json";
+import {pinnedProjects} from "@/components/projects/ProjectsFetch.ts";
 
 export default {
   name: "Projects",
@@ -34,12 +34,8 @@ export default {
     };
   },
   mounted() {
-    fetch("https://gh-pinned-repos.egoist.dev/?username=eternalcodeteam")
-        .then(response => response.json())
-        .then(data => {
-          this.projects = data;
-        });
-  },
+    pinnedProjects.then((projects) => this.projects = projects);
+  }
 };
 </script>
 
@@ -54,42 +50,6 @@ export default {
   margin: 10px 0;
 }
 
-@media only screen and (max-width: 1000px) {
-  #projects {
-    padding: 3% 12%;
-  }
-
-  #projects h1 {
-    font-size: 30px;
-  }
-
-  #projects p {
-    font-size: small;
-    margin-bottom: 15%;
-  }
-
-  #projects img {
-    width: 40%;
-    margin-bottom: 10%;
-  }
-
-  #projects .card-pro {
-    margin-bottom: 5%;
-    padding: 15% 10% 15% 12%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .card-pro h5 {
-    color: var(--primary-title);
-  }
-
-  .card-pro h6 {
-    color: var(--secondary-title);
-  }
-}
-
 #projects {
   padding: 3% 12% 3% 12%;
 }
@@ -117,36 +77,27 @@ export default {
   width: 65%;
 }
 
-.card-pro {
-  background-color: var(--light-gray);
-  border-radius: 12px;
-  margin-bottom: 2%;
-  padding: 6% 10%;
-  transition: 0.5s;
-  height: 100%;
-}
-
-.card-pro a:hover {
-  color: #707070;
-  transition: 0.5s;
-}
+@media only screen and (max-width: 1000px) {
+  #projects {
+    padding: 3% 12%;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
+  }
 
-.card-pro h5 {
-  color: var(--secondary-title);
-  font-weight: 600;
-}
+  #projects h1 {
+    font-size: 30px;
+  }
 
+  #projects p {
+    font-size: small;
+    margin-bottom: 15%;
+  }
 
-.card-pro h6 {
-  color: rgb(114, 114, 114);
-  font-weight: 400;
-  font-size: small;
-}
+  #projects img {
+    width: 70%;
+    margin-bottom: 10%;
+  }
 
-.card-pro a {
-  font-size: small;
-  text-decoration: none;
-  color: #a6abaf;
 }
-
 </style>

public/assets/img/projects/language/null.webp

@@ -0,0 +1,46 @@
+type Project = {
+    name: string,
+    description: string,
+    link: string,
+}
+
+const EGOIST_PINNED_REPOS_URL = "https://gh-pinned-repos.egoist.dev/?username=eternalcodeteam";
+type EgoistPinnedProject = {
+    repo: string,
+    description: string,
+    link: string,
+}
+const pinnedProjects: Promise<Array<Project>> = fetch(EGOIST_PINNED_REPOS_URL)
+    .then(response => response.json() as Promise<EgoistPinnedProject[]>)
+    .then(projects => projects.map(project => ({
+        name: project.repo,
+        description: project.description,
+        link: project.link,
+    })));
+
+const GITHUB_API_URL = "https://api.github.com/users/eternalcodeteam/repos?type=public";
+type GithubApiProject = {
+    name: string,
+    description: string,
+    html_url: string,
+    language: string,
+}
+const ignoredRepos = [".github"];
+
+const allProjects: Promise<Array<Project>> = fetch(GITHUB_API_URL)
+    .then(response => response.json() as Promise<GithubApiProject[]>)
+    .then(projects => projects.filter(project => !ignoredRepos.includes(project.name)))
+    .then(projects => projects.map(project => ({
+        name: project.name,
+        description: project.description,
+        link: project.html_url,
+        language: project.language,
+    })));
+
+const notPinnedProjects: Promise<Array<Project>> = Promise.all([allProjects, pinnedProjects])
+    .then(([allProjects, pinnedProjects]) => {
+        const pinned = pinnedProjects.map(project => project.name);
+        return allProjects.filter(project => !pinned.includes(project.name));
+    });
+
+export {pinnedProjects, notPinnedProjects};