probablycorey/workshop
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

index cards

Browse Source
This commit is contained in:
Chris Wanstrath 2025-07-28 11:33:37 -07:00
parent 3159b3c160
commit 14d983974b
2 changed files with 84 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
packages/cubby/src/components/Projects.tsx
View File

@ -1,11 +1,7 @@
interface ProjectData {
name: string
mtime: Date
status: "recent" | "active" | "inactive"
}
import type { ProjectMetadata } from "../server"
interface ProjectsProps {
projects: ProjectData[]
projects: ProjectMetadata[]
}
export function Projects({ projects }: ProjectsProps) {
@ -19,19 +15,88 @@ export function Projects({ projects }: ProjectsProps) {
return (
<div>
<style>
{`
.project-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
list-style: none;
padding: 0;
}
.project-card {
border: 1px solid #ccc;
padding: 15px;
border-radius: 4px;
width: 250px;
position: relative;
padding-bottom: 40px;
}
.status-icon {
font-size: 12px;
border-bottom: none;
cursor: default;
position: absolute;
top: 15px;
right: 15px;
}
.project-title {
margin: 0 0 10px 0;
font-size: 16px;
padding-right: 25px;
}
.project-meta {
font-size: 12px;
margin: 10px 0 0 0;
list-style: none;
padding: 0;
}
.project-meta li {
margin: 5px 0;
}
li {
list-style: none !important;
}
abbr {
border-bottom: none !important;
cursor: default !important;
}
.last-modified {
color: #666;
font-size: 11px;
position: absolute;
bottom: 15px;
left: 15px;
right: 15px;
}
`}
</style>
<h1>Projects</h1>
<ul>
{projects.map(project => <li key={project.name}>
<abbr style={{ fontSize: "12px", borderBottom: "none", cursor: "default" }} title={statusText(project.status)}>
{project.status === "recent" ? "🟢" : project.status === "active" ? "🟡" : "🔴"}
</abbr>&nbsp;
<a
href={`/p/${project.name}`}
title={`Last modified ${project.mtime.toLocaleString()}`}
>
{project.name}
</a>
</li>)}
<ul className="project-grid">
{projects.map(project => (
<li key={project.name} className="project-card">
<h2 className="project-title">
<a
href={`/p/${project.name}`}
title={`Last modified ${project.mtime.toLocaleString()}`}
>
{project.name}
</a>
<abbr className="status-icon" title={statusText(project.status)}>
{project.status === "recent" ? "🟢" : project.status === "active" ? "🟡" : "🔴"}
</abbr>
</h2>
<ul className="project-meta">
<li><a href={project.github}>GitHub</a></li>
{project.url && (
<li><a href={project.url}>{project.url.replace(`https://${project.name}.`, "")}</a></li>
)}
</ul>
<div className="last-modified">
{project.mtime.toLocaleString()}
</div>
</li>
))}
</ul>
</div>
)

2
packages/cubby/src/server.tsx
View File

@ -55,7 +55,7 @@ api.get('/projects', async c => {
// ----------------------------------------------------------------------------
app.get("/", async (c) => {
const projects = await projectsWithDates()
const projects = await projectsWithMetadata()
return c.html(tsx(<Projects projects={projects} />))
})