From 57d5a66ea27885b3608a23aeda29aa58a36eb8d7 Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Tue, 11 Oct 2022 11:43:02 -0400 Subject: [PATCH] many improvements --- .gitignore | 2 +- package-lock.json | 37 +++++++------------ package.json | 3 +- src/{index.css => App.css} | 75 +++++++++++++++++++++++++++++++++++++- src/{index.tsx => App.tsx} | 55 +++++++++++++++++++++++----- src/index.html | 4 +- src/repoCard.tsx | 40 +++++++++++++++++++- 7 files changed, 175 insertions(+), 41 deletions(-) rename src/{index.css => App.css} (90%) rename src/{index.tsx => App.tsx} (53%) diff --git a/.gitignore b/.gitignore index 9cbcb8f..d5517d3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ node_modules dist .cache -.parcel-cache \ No newline at end of file +.parcel-cache diff --git a/package-lock.json b/package-lock.json index b7eb24a..893897f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,10 +5,12 @@ "requires": true, "packages": { "": { + "name": "seigler.github.io", "version": "1.0.0", "license": "MIT", "dependencies": { "@preact/signals": "^1.1.1", + "dayjs": "^1.11.5", "http-link-header": "^1.0.5", "preact": "^10.11.1" }, @@ -1778,6 +1780,11 @@ "node": ">=8.0.0" } }, + "node_modules/dayjs": { + "version": "1.11.5", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz", + "integrity": "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==" + }, "node_modules/detect-libc": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", @@ -2099,15 +2106,7 @@ "integrity": "sha512-5+ZS9h+xeADcJTF2oRCT3yNZBlDYyOgQSdrWNBCqsIwm8ucKbF061OBVv/WHP4Zk8FToNhwFklk/hMuOngqsIg==", "dev": true, "dependencies": { - "detect-libc": "^1.0.3", - "lightningcss-darwin-arm64": "1.16.0", - "lightningcss-darwin-x64": "1.16.0", - "lightningcss-linux-arm-gnueabihf": "1.16.0", - "lightningcss-linux-arm64-gnu": "1.16.0", - "lightningcss-linux-arm64-musl": "1.16.0", - "lightningcss-linux-x64-gnu": "1.16.0", - "lightningcss-linux-x64-musl": "1.16.0", - "lightningcss-win32-x64-msvc": "1.16.0" + "detect-libc": "^1.0.3" }, "engines": { "node": ">= 12.0.0" @@ -2300,12 +2299,6 @@ "dev": true, "hasInstallScript": true, "dependencies": { - "@lmdb/lmdb-darwin-arm64": "2.5.2", - "@lmdb/lmdb-darwin-x64": "2.5.2", - "@lmdb/lmdb-linux-arm": "2.5.2", - "@lmdb/lmdb-linux-arm64": "2.5.2", - "@lmdb/lmdb-linux-x64": "2.5.2", - "@lmdb/lmdb-win32-x64": "2.5.2", "msgpackr": "^1.5.4", "node-addon-api": "^4.3.0", "node-gyp-build-optional-packages": "5.0.3", @@ -2338,9 +2331,6 @@ "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.7.2.tgz", "integrity": "sha512-mWScyHTtG6TjivXX9vfIy2nBtRupaiAj0HQ2mtmpmYujAmqZmaaEVPaSZ1NKLMvicaMLFzEaMk0ManxMRg8rMQ==", "dev": true, - "dependencies": { - "msgpackr-extract": "^2.1.2" - }, "optionalDependencies": { "msgpackr-extract": "^2.1.2" } @@ -2353,12 +2343,6 @@ "hasInstallScript": true, "optional": true, "dependencies": { - "@msgpackr-extract/msgpackr-extract-darwin-arm64": "2.1.2", - "@msgpackr-extract/msgpackr-extract-darwin-x64": "2.1.2", - "@msgpackr-extract/msgpackr-extract-linux-arm": "2.1.2", - "@msgpackr-extract/msgpackr-extract-linux-arm64": "2.1.2", - "@msgpackr-extract/msgpackr-extract-linux-x64": "2.1.2", - "@msgpackr-extract/msgpackr-extract-win32-x64": "2.1.2", "node-gyp-build-optional-packages": "5.0.3" }, "bin": { @@ -3964,6 +3948,11 @@ "css-tree": "^1.1.2" } }, + "dayjs": { + "version": "1.11.5", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz", + "integrity": "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==" + }, "detect-libc": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", diff --git a/package.json b/package.json index 1bcacee..4d0cdde 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "bugs": { "url": "https://github.com/seigler/seigler.github.io/issues" }, - "homepage": "https://github.com/seigler/seigler.github.io#readme", + "homepage": "https://seigler.github.io/", "prettier": { "arrowParens": "always", "bracketSameLine": true, @@ -51,6 +51,7 @@ }, "dependencies": { "@preact/signals": "^1.1.1", + "dayjs": "^1.11.5", "http-link-header": "^1.0.5", "preact": "^10.11.1" } diff --git a/src/index.css b/src/App.css similarity index 90% rename from src/index.css rename to src/App.css index 03c79c6..f1aba38 100644 --- a/src/index.css +++ b/src/App.css @@ -13,6 +13,9 @@ My updates: 'Helvetica Neue', sans-serif; --mono-font: Consolas, Menlo, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + /* Layout */ + --gap: 1rem; + /* Default (light) theme */ --bg: #fff; --accent-bg: #f5f7ff; @@ -83,7 +86,7 @@ body { font-size: 1.15rem; line-height: 1.5; display: grid; - grid-template-columns: 1fr min(45rem, 90%) 1fr; + grid-template-columns: 1fr min(80rem, 90%) 1fr; margin: 0; } #root > * { @@ -645,7 +648,77 @@ progress:indeterminate::-moz-progress-bar { background-color: var(--accent-bg); } +/* Loader */ + +.loader { + width: 100%; + height: 12px; + display: inline-block; + background-color: var(--bg); + background-image: linear-gradient( + 45deg, + var(--border) 25%, + transparent 25%, + transparent 50%, + var(--border) 50%, + var(--border) 75%, + transparent 75%, + transparent + ); + font-size: 30px; + background-size: 1em 1em; + animation: barStripe 1s linear infinite; +} + +@keyframes barStripe { + 0% { + background-position: 1em 0; + } + 100% { + background-position: 0 0; + } +} + +/* My additions */ + a.isActive { background-color: var(--accent); color: var(--bg) !important; } + +.card { + border: 1px solid var(--border); + flex-grow: 1; + padding: var(--gap); + border-radius: 5px; + display: flex; + flex-direction: column; +} + +.grid-container { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: 1fr auto; + gap: var(--gap); +} + +.grid-item { + grid-column: span 12; + display: flex; + justify-content: stretch; + align-items: stretch; +} +@media (min-width: 20rem) { + .grid-item { + grid-column: span var(--width, 1); + } +} + +.tag { + font-size: 0.8em; + background-color: var(--accent); + color: var(--accent-bg); + border-radius: 0.5em; + white-space: nowrap; + padding: 0 0.3em; +} diff --git a/src/index.tsx b/src/App.tsx similarity index 53% rename from src/index.tsx rename to src/App.tsx index 07dd52f..7d0e9a0 100644 --- a/src/index.tsx +++ b/src/App.tsx @@ -10,12 +10,15 @@ export type GithubRepo = { full_name: string html_url: string created_at: string + description: string | null homepage: string | null stargazers_count: number topics: string[] fork: boolean } +const sourceFullName = 'seigler/seigler.github.io' + const repos = signal([]) const topics = computed(() => { const map = repos.value.reduce((map, repo) => { @@ -27,6 +30,7 @@ const topics = computed(() => { .filter(({ count }) => count > 1) }) const isLoading = signal(true) +const filter = signal<(r: GithubRepo) => boolean>(() => true) function fetchDataUntilNoNext(uri: string) { fetch(uri) @@ -43,6 +47,17 @@ function fetchDataUntilNoNext(uri: string) { }) .then((data) => { repos.value = repos.value.concat(data) + if (isLoading.value === false) { + repos.value = [ + ...repos.value.sort((a, b) => + a.created_at < b.created_at + ? 1 + : a.created_at > b.created_at + ? -1 + : 0 + ) + ] + } }) .catch((reason) => console.error("Couldn't fetch repos because:", reason)) } @@ -60,17 +75,37 @@ function App() { <>

Joshua Seigler's github repos

+
-
- {topics.value.map(({ topic, count }) => ( -
- {topic}: {count} -
- ))} - {repos.value.map((repo) => ( - - ))} -
+ {isLoading.value ? ( + + ) : ( +
+ {repos.value.filter(filter.value).map((repo) => ( +
+ +
+ ))} +
+ )} + ) } diff --git a/src/index.html b/src/index.html index 6c619c1..a11eb77 100644 --- a/src/index.html +++ b/src/index.html @@ -5,10 +5,10 @@ Joshua Seigler’s GitHub Overview - +
- + diff --git a/src/repoCard.tsx b/src/repoCard.tsx index e7db679..0830bde 100644 --- a/src/repoCard.tsx +++ b/src/repoCard.tsx @@ -1,6 +1,42 @@ import { h, Fragment, render } from 'preact' -import { GithubRepo } from '.' +import type { GithubRepo } from './App' +import dayjs from 'dayjs' export function RepoCard({ repo }: { repo: GithubRepo }) { - return
{repo.full_name}
+ const { + id, + name, + full_name, + html_url, + created_at, + description, + homepage, + stargazers_count, + topics, + fork + } = repo + return ( +
+
+ + {name} + + {stargazers_count ?
{stargazers_count}⭐
: null} +
+

{description}

+ +
+ ) }