mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-21 23:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(page): added /about page

Browse source
This commit is contained in:
Corentin Thomasset 2021-10-18 13:49:45 +02:00
parent 1ac0cbdd68
commit ee74b6d469
No known key found for this signature in database
GPG key ID: 3103EB5E79496F9C
2 changed files with 138 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

51
components/GithubContributors.vue Normal file
View file

@ -0,0 +1,51 @@
<template>
<div class="github-contributor">
<v-list class="pa-0">
<v-list-item v-for="(contributor, i) in contributors" :key="i" :href="contributor.html_url" target="_blank" rel="noopener noreferrer">
<v-list-item-avatar>
<v-img :src="contributor.avatar_url" />
</v-list-item-avatar>
<v-list-item-content>
{{ contributor.login }}
</v-list-item-content>
</v-list-item>
</v-list>
</div>
</template>
<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
import axios from 'axios'
const url = 'https://api.github.com/repos/CorentinTh/it-tools/contributors'
interface IGithubContributors {
contributions: number;
// eslint-disable-next-line camelcase
avatar_url: string;
login: string;
type: 'User' | 'Bot'
}
@Component
export default class GithubContributors extends Vue {
contributors: IGithubContributors[] = []
fetchOnServer = true
fetch() {
axios
.get(url)
.then(({data}: {data: IGithubContributors[]}) => {
this.contributors = data.filter(u => u.type === 'User').sort((a, b) => b.contributions - a.contributions)
})
}
}
</script>
<style scoped lang="less">
.github-contributor{
.v-list {
background: transparent !important;
}
}
</style>

82
pages/about.vue
View file

@ -1,32 +1,94 @@
<template>
<v-row justify="center" align="center">
<v-col cols="12" sm="12" md="8">
<h1>Yolo</h1>
<div class="about-page mt-10">
<v-row justify="center">
<v-col cols="12" sm="6" md="7" xl="5" class="about-section">
<v-card>
<v-card-title>Changelog</v-card-title>
<v-card-title class="justify-center text-h4">
<div class="pt-5">
About
</div>
</v-card-title>
<v-card-text>
Welcome to IT-Tools! This wonderful website, originally created with ❤ by <a href="https://corentin-thomasset.fr" target="_blank" rel="noopener noreferrer">Corentin Thomasset</a>, aggregate a set of useful tools that every developer may need once in a while. And don't forget to add IT-Tools to your shortcut bar (press <code>Ctrl + D</code>).
<v-row class="mt-10">
<v-col cols="12" lg="6" md="12">
<h2>A tool is missing?</h2>
<p class="text-justify">
If you need a tool that is not currently not present here, and you think can be
relevant, you are welcome to submit a feature request <a
href="//github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=enhancement&template=feature_request.md&title=%5BFEAT%5D%20My%20feature"
target="_blank"
rel="noopener noreferrer"
>here</a>.
</p>
</v-col>
<v-col cols="12" lg="6" md="12">
<h2>Found a bug?</h2>
<p class="text-justify">
If you found a bug, or something broken that doesn't work as expected, please fill a bug report here <a
href="//github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=bug&template=bug_report.md&title=%5BBUG%5D%20My%20bug"
target="_blank"
rel="noopener noreferrer"
>here</a>.
</p>
</v-col>
</v-row>
</v-card-text>
</v-card>
<br>
<v-card>
<v-card-title class="justify-center text-h4">
<div class="pt-5">
Contributors
</div>
</v-card-title>
<v-card-text>
<GithubContributors />
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-card>
<v-card-title class="justify-center text-h4">
<div class="pt-5">
Changelog
</div>
</v-card-title>
<v-card-text>
<div class="changelog" v-html="changelog" />
</v-card-text>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script>
import {Component, Vue} from 'nuxt-property-decorator'
import GithubContributors from '@/components/GithubContributors.vue'
import changelog from '@/CHANGELOG.md'
@Component
@Component({components: {GithubContributors}})
export default class About extends Vue {
changelog = changelog.replace(/<h1>(.*?)<\/p>/is, '') // Remove h1 and first paragraphe
}
</script>
<style lang="less">
.changelog {
.about-page {
.about-section{
text-align: justify;
}
.changelog {
h2 {
&:not(:first-child) {
margin-top: 25px;
}
color: #ffffff;
}
@ -34,5 +96,11 @@ export default class About extends Vue {
margin-top: 10px;
padding-left: 5px;
}
.v-card-title{
text-align: center;
}
}
}
</style>