mirror of
https://github.com/seigler/seigler.github.io
synced 2025-07-25 22:36:12 +00:00
many improvements
This commit is contained in:
Joshua Seigler
parent
4340bcf97b
commit
57d5a66ea2
7 changed files with 175 additions and 41 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -1,4 +1,4 @@
|
|||
node_modules
|
||||
dist
|
||||
.cache
|
||||
.parcel-cache
|
||||
.parcel-cache
|
||||
|
|
|
|||
37
package-lock.json
generated
37
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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<GithubRepo[]>([])
|
||||
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() {
|
|||
<>
|
||||
<header>
|
||||
<h1>Joshua Seigler's github repos</h1>
|
||||
<nav
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
gap: 'var(--gap)'
|
||||
}}>
|
||||
<button onClick={() => (filter.value = () => true)}>All</button>
|
||||
{topics.value.map(({ topic, count }) => (
|
||||
<button
|
||||
onClick={() => (filter.value = (r) => r.topics.includes(topic))}>
|
||||
{topic}: {count}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
{topics.value.map(({ topic, count }) => (
|
||||
<div>
|
||||
{topic}: {count}
|
||||
</div>
|
||||
))}
|
||||
{repos.value.map((repo) => (
|
||||
<RepoCard repo={repo} />
|
||||
))}
|
||||
</main>
|
||||
{isLoading.value ? (
|
||||
<span class="loader"></span>
|
||||
) : (
|
||||
<main class="grid-container">
|
||||
{repos.value.filter(filter.value).map((repo) => (
|
||||
<div key={repo.id} className="grid-item" style={{ '--width': '4' }}>
|
||||
<RepoCard repo={repo} />
|
||||
</div>
|
||||
))}
|
||||
</main>
|
||||
)}
|
||||
<footer>
|
||||
Styles based on <a href="https://simplecss.org/">simple.css</a>. Data
|
||||
from GitHub API.{' '}
|
||||
<a href={`https://github.com/${sourceFullName}`}>Source code</a>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -5,10 +5,10 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Joshua Seigler’s GitHub Overview</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
<link rel="stylesheet" href="App.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./index.tsx" type="module"></script>
|
||||
<script src="./App.tsx" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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 <div>{repo.full_name}</div>
|
||||
const {
|
||||
id,
|
||||
name,
|
||||
full_name,
|
||||
html_url,
|
||||
created_at,
|
||||
description,
|
||||
homepage,
|
||||
stargazers_count,
|
||||
topics,
|
||||
fork
|
||||
} = repo
|
||||
return (
|
||||
<div class="card">
|
||||
<header style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<strong>
|
||||
<a href={html_url}>{name}</a>
|
||||
</strong>
|
||||
{stargazers_count ? <div>{stargazers_count}⭐</div> : null}
|
||||
</header>
|
||||
<p style={{ flexGrow: 1 }}>{description}</p>
|
||||
<footer>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 'calc(var(--gap) / 4)'
|
||||
}}>
|
||||
{topics.map((t) => (
|
||||
<span class="tag">{t}</span>
|
||||
))}
|
||||
</div>
|
||||
<small>Created {dayjs(created_at).format('MMM D, YYYY')}</small>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue