feat: add bases for GitHub API interaction and cache

This commit is contained in:
Lucien Cartier-Tilet 2023-05-04 23:21:43 +02:00
parent 91a8d4e220
commit 7c185dd453
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
8 changed files with 234 additions and 1 deletions

View File

@ -11,5 +11,5 @@ trim_trailing_whitespace = true
indent_style = space indent_style = space
indent_size = 2 indent_size = 2
[*.ts] [*.{ts,vue}]
quote_type = single quote_type = single

View File

@ -1,11 +1,13 @@
import { defineClientConfig } from '@vuepress/client'; import { defineClientConfig } from '@vuepress/client';
import PreviewImage from './components/PreviewImage.vue'; import PreviewImage from './components/PreviewImage.vue';
import ResponsiveImage from './components/ResponsiveImage.vue'; import ResponsiveImage from './components/ResponsiveImage.vue';
import LatestRepositories from './components/LatestRepositories.vue';
export default defineClientConfig({ export default defineClientConfig({
enhance({ app, router, siteData }) { enhance({ app, router, siteData }) {
app.component('PreviewImage', PreviewImage); app.component('PreviewImage', PreviewImage);
app.component('ResponsiveImage', ResponsiveImage); app.component('ResponsiveImage', ResponsiveImage);
app.component('LatestRepositories', LatestRepositories);
}, },
setup() {}, setup() {},
layouts: {}, layouts: {},

View File

@ -0,0 +1,36 @@
<template>
<div v-if="error">
{{ error }}
</div>
<div v-else v-for="repo in githubRepos">
<p>{{ repo.name }} updated at {{ repo.updated_at }}</p>
</div>
</template>
<script setup lang="ts">
import { readFromCache } from '../composables/cache';
import {
GithubError,
GithubRepo,
getLatestRepositories,
} from '../composables/github';
let githubRepos: GithubRepo[] | null = null;
let error: GithubError | null;
const getRepositories = () => {
return getLatestRepositories('phundrak', 5);
};
readFromCache<GithubRepo[]>('latestRepos', getRepositories).subscribe({
next: (repos: GithubRepo[]) => {
githubRepos = repos;
error = null;
},
error: (errorResponse: GithubError) => {
githubRepos = null;
error = errorResponse;
},
});
</script>
<style lang="less"></style>

View File

@ -0,0 +1,46 @@
import { Observable, of } from 'rxjs';
const cacheAgeLimitInMilliseconds = 1000 * 60 * 60;
export function isDataOutdated(name: string): boolean {
const lastUpdated: number = +localStorage.getItem(name + '-timestamp');
const now: number = Date.now();
const elapsedTime: number = now - lastUpdated;
return elapsedTime > cacheAgeLimitInMilliseconds;
}
export function storeInCache<T>(
data: Observable<T>,
name: string
): Observable<T> {
data.subscribe({
next: (response: T) => {
localStorage.setItem(name, JSON.stringify(response));
localStorage.setItem(name + '-timestamp', `${Date.now()}`);
},
});
return data;
}
export function readFromCache<T>(
name: string,
callback: () => Observable<T>
): Observable<T> {
let data: Observable<T>;
if (isDataOutdated(name)) {
data = storeInCache<T>(callback(), name);
} else {
let dataFromCache = localStorage.getItem(name);
try {
data = of(JSON.parse(dataFromCache));
} catch (err) {
console.error(
`Could not parse ${JSON.stringify(
dataFromCache
)}: ${err}. Fetching again data from callback function.`
);
data = storeInCache<T>(callback(), name);
}
}
return data;
}

View File

@ -0,0 +1,139 @@
import { Observable, switchMap, map } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
export interface GithubRepo {
id: number;
node_id: string;
name: string;
full_name: string;
private: boolean;
owner: Owner;
html_url: string;
description: string;
fork: boolean;
url: string;
forks_url: string;
keys_url: string;
collaborators_url: string;
teams_url: string;
hooks_url: string;
issue_events_url: string;
events_url: string;
assignees_url: string;
branches_url: string;
tags_url: string;
blobs_url: string;
git_tags_url: string;
git_refs_url: string;
trees_url: string;
statuses_url: string;
languages_url: string;
stargazers_url: string;
contributors_url: string;
subscribers_url: string;
subscription_url: string;
commits_url: string;
git_commits_url: string;
comments_url: string;
issue_comment_url: string;
contents_url: string;
compare_url: string;
merges_url: string;
archive_url: string;
downloads_url: string;
issues_url: string;
pulls_url: string;
milestones_url: string;
notifications_url: string;
labels_url: string;
releases_url: string;
deployments_url: string;
created_at: Date;
updated_at: Date;
pushed_at: Date;
git_url: string;
ssh_url: string;
clone_url: string;
svn_url: string;
homepage: string;
size: number;
stargazers_count: number;
watchers_count: number;
language: string;
has_issues: boolean;
has_projects: boolean;
has_downloads: boolean;
has_wiki: boolean;
has_pages: boolean;
forks_count: number;
mirror_url: null;
archived: boolean;
disabled: boolean;
open_issues_count: number;
license: null;
allow_forking: boolean;
is_template: boolean;
web_commit_signoff_required: boolean;
topics: any[];
visibility: string;
forks: number;
open_issues: number;
watchers: number;
default_branch: string;
}
export interface Owner {
login: string;
id: number;
node_id: string;
avatar_url: string;
gravatar_id: string;
url: string;
html_url: string;
followers_url: string;
following_url: string;
gists_url: string;
starred_url: string;
subscriptions_url: string;
organizations_url: string;
repos_url: string;
events_url: string;
received_events_url: string;
type: string;
site_admin: boolean;
}
export interface GithubError {
message: string;
documentation_url: string;
}
export function getLatestRepositories(
user: string,
amount: number
): Observable<GithubRepo[]> {
return getRepositoriesOfUser(user).pipe(
map((repositories: GithubRepo[]) => {
return repositories
.sort(
(a: GithubRepo, b: GithubRepo) =>
+b.updated_at - +a.updated_at
)
.slice(0, amount);
})
);
}
export function getRepositoriesOfUser(user: string): Observable<GithubRepo[]> {
const fetchUrl = `https://api.github.com/users/${user}/repos`;
return fromFetch(fetchUrl).pipe(
switchMap((response: Response) => {
if (response.ok) {
return response.json();
} else {
console.error(`Error ${response.status}: ${JSON.stringify(response)}`);
return [];
}
}),
);
}

View File

@ -3,5 +3,7 @@ title: Projets
--- ---
# Programmation # Programmation
## Projets GitHub les plus étoilés ## Projets GitHub les plus étoilés
<LatestRepositories />
## Derniers dépôts de code actifs sur GitHub ## Derniers dépôts de code actifs sur GitHub
# Linguistique # Linguistique

View File

@ -17,6 +17,7 @@
"build": "vuepress build content" "build": "vuepress build content"
}, },
"dependencies": { "dependencies": {
"rxjs": "^7.8.1",
"vuepress-plugin-remove-html-extension": "^0.1.0" "vuepress-plugin-remove-html-extension": "^0.1.0"
}, },
"config": { "config": {

View File

@ -2323,6 +2323,13 @@ rxjs@^7.5.5:
dependencies: dependencies:
tslib "^2.1.0" tslib "^2.1.0"
rxjs@^7.8.1:
version "7.8.1"
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
dependencies:
tslib "^2.1.0"
safe-buffer@~5.2.0: safe-buffer@~5.2.0:
version "5.2.1" version "5.2.1"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"