This repository has been archived by the owner on Aug 19, 2023. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 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]>
- Loading branch information
Showing
10 changed files
with
290 additions
and
96 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}; |
Oops, something went wrong.
d73c5aaThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
eternal-code-www – ./
eternal-code-www-git-master-eternalcode-www.vercel.app
www.eternalcode.me
eternal-code-www-eternalcode-www.vercel.app
eternal-code-www.vercel.app
www.eternalcode.pl
eternalcode.pl
eternalcode.me