extract js/css
This commit is contained in:
Chris Wanstrath
parent
24db9dab50
commit
d11ad03e4b
0
packages/cubby/main
Normal file
0
packages/cubby/main
Normal file
104
packages/cubby/public/css/main.css
Normal file
104
packages/cubby/public/css/main.css
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
.content-wrapper {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.side-content {
|
||||
width: 30%;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.content-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
.side-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
main ul.file-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
main ul.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
main ul.file-list li .delete-button {
|
||||
display: none;
|
||||
padding: 0 4px;
|
||||
margin: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
color: #ff4444;
|
||||
transition: transform 0.2s;
|
||||
cursor: pointer;
|
||||
font-size: 1.2em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
main ul.file-list li:hover .delete-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
main ul.file-list li .delete-button:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.upload-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 0%;
|
||||
height: 20px;
|
||||
background: #4CAF50;
|
||||
}
|
||||
|
||||
.drag-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.drag-text {
|
||||
color: white;
|
||||
font-size: 2em;
|
||||
}
|
||||
114
packages/cubby/public/js/project.js
Normal file
114
packages/cubby/public/js/project.js
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
const fileInput = document.getElementById("file-input")
|
||||
const uploadButton = document.getElementById("upload-button")
|
||||
const progressContainer = document.getElementById("progress-container")
|
||||
const progressBar = document.getElementById("progress-bar")
|
||||
const progressText = document.getElementById("progress-text")
|
||||
const dragOverlay = document.getElementById("drag-overlay")
|
||||
const deleteButtons = document.querySelectorAll(".delete-button")
|
||||
let dragCounter = 0
|
||||
|
||||
fileInput.addEventListener("change", () => {
|
||||
uploadButton.style.display = fileInput.files.length > 0 ? "block" : "none"
|
||||
})
|
||||
|
||||
deleteButtons.forEach(button => {
|
||||
button.addEventListener("click", async () => {
|
||||
const file = button.dataset.file
|
||||
if (!confirm("Are you sure you want to delete " + file + "?")) return
|
||||
|
||||
try {
|
||||
const response = await fetch(window.location.pathname + "/delete/" + file, {
|
||||
method: "DELETE"
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
window.location.reload()
|
||||
} else {
|
||||
alert("Delete failed")
|
||||
}
|
||||
} catch (err) {
|
||||
alert("Delete failed")
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function uploadFile(file) {
|
||||
const xhr = new XMLHttpRequest()
|
||||
const formData = new FormData()
|
||||
formData.append("file", file)
|
||||
|
||||
progressContainer.style.display = "block"
|
||||
uploadButton.disabled = true
|
||||
fileInput.disabled = true
|
||||
|
||||
xhr.upload.addEventListener("progress", (e) => {
|
||||
if (e.lengthComputable) {
|
||||
const percent = Math.round((e.loaded / e.total) * 100)
|
||||
progressBar.style.width = percent + "%"
|
||||
progressText.textContent = percent + "%"
|
||||
}
|
||||
})
|
||||
|
||||
xhr.addEventListener("load", () => {
|
||||
if (xhr.status === 200) {
|
||||
window.location.reload()
|
||||
} else {
|
||||
alert("Upload failed")
|
||||
progressContainer.style.display = "none"
|
||||
uploadButton.disabled = false
|
||||
fileInput.disabled = false
|
||||
}
|
||||
})
|
||||
|
||||
xhr.addEventListener("error", () => {
|
||||
alert("Upload failed")
|
||||
progressContainer.style.display = "none"
|
||||
uploadButton.disabled = false
|
||||
fileInput.disabled = false
|
||||
})
|
||||
|
||||
xhr.open("POST", window.location.pathname + "/upload")
|
||||
xhr.send(formData)
|
||||
}
|
||||
|
||||
uploadButton.addEventListener("click", () => {
|
||||
const file = fileInput.files[0]
|
||||
if (!file) return
|
||||
uploadFile(file)
|
||||
})
|
||||
|
||||
document.addEventListener("dragenter", (e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
dragCounter++
|
||||
dragOverlay.style.display = "flex"
|
||||
})
|
||||
|
||||
document.addEventListener("dragleave", (e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
dragCounter--
|
||||
if (dragCounter === 0) {
|
||||
dragOverlay.style.display = "none"
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener("dragover", (e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
})
|
||||
|
||||
document.addEventListener("drop", async (e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
dragCounter = 0
|
||||
dragOverlay.style.display = "none"
|
||||
|
||||
const files = [...e.dataTransfer.files]
|
||||
if (files.length === 0) return
|
||||
|
||||
for (const file of files) {
|
||||
uploadFile(file)
|
||||
break
|
||||
}
|
||||
})
|
||||
24
packages/cubby/src/components/Layout.tsx
Normal file
24
packages/cubby/src/components/Layout.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
interface LayoutProps {
|
||||
children: any
|
||||
title?: string
|
||||
}
|
||||
|
||||
export function Layout({ children, title }: LayoutProps) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{title ? title : "Cubby"}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="/css/pico.fuchsia.css" />
|
||||
<link rel="stylesheet" href="/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
{children}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
52
packages/cubby/src/components/Project.tsx
Normal file
52
packages/cubby/src/components/Project.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import { marked } from "marked"
|
||||
|
||||
interface ProjectProps {
|
||||
name: string
|
||||
readme: string
|
||||
files: string[]
|
||||
}
|
||||
|
||||
export function Project({ name, readme, files }: ProjectProps) {
|
||||
return (
|
||||
<>
|
||||
<p><a href="/">« Back</a></p>
|
||||
<div class="content-wrapper">
|
||||
<div class="main-content">
|
||||
<p dangerouslySetInnerHTML={{ __html: marked.parse(readme) }} />
|
||||
</div>
|
||||
<div class="side-content">
|
||||
{files.length > 0 && (
|
||||
<>
|
||||
<h2>Files</h2>
|
||||
<ul class="file-list">
|
||||
{files.sort().map(file => (
|
||||
<li key={file}>
|
||||
<a href={`/${name}/${file}`}>{file}</a>
|
||||
<button
|
||||
type="button"
|
||||
class="delete-button"
|
||||
data-file={file}
|
||||
>×</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
<h2>Upload File</h2>
|
||||
<div id="upload-container" class="upload-container">
|
||||
<input type="file" id="file-input" class="file-input" />
|
||||
<button type="button" id="upload-button" class="upload-button" style="display: none">Upload</button>
|
||||
<div id="progress-container" class="progress-container">
|
||||
<div id="progress-bar" class="progress-bar"></div>
|
||||
<div id="progress-text">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="drag-overlay" class="drag-overlay">
|
||||
<div class="drag-text">DROP FILE HERE</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/project.js"></script>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -5,6 +5,8 @@ import { marked } from "marked"
|
|||
import { readdirSync } from "fs"
|
||||
import { mkdir, readdir } from 'node:fs/promises'
|
||||
import { basename, join } from 'path'
|
||||
import { Layout } from "./components/Layout"
|
||||
import { Project } from "./components/Project"
|
||||
|
||||
const PROJECTS_DIR = ".."
|
||||
const WORKSHOP_REPO = "https://github.com/probablycorey/the-rabbit-hole"
|
||||
|
|
@ -12,8 +14,8 @@ const CUBBY_DIR = "./cubby"
|
|||
|
||||
const app = new Hono()
|
||||
app.use('/css/*', serveStatic({ root: './public' }))
|
||||
app.use('/js/*', serveStatic({ root: './public' }))
|
||||
|
||||
// all the workshop projects!
|
||||
async function projects(): Promise<string[]> {
|
||||
const subdirs = readdirSync(PROJECTS_DIR, { withFileTypes: true })
|
||||
.filter((entry: any) => entry.isDirectory())
|
||||
|
|
@ -22,134 +24,10 @@ async function projects(): Promise<string[]> {
|
|||
return subdirs
|
||||
}
|
||||
|
||||
// magic
|
||||
function tsx(node: any) {
|
||||
return "<!DOCTYPE html>" + render(<Layout>{node}</Layout>)
|
||||
}
|
||||
|
||||
// more magic
|
||||
function js(code: TemplateStringsArray, ...args: any[]): string {
|
||||
return code.join("") + args.map(arg => arg.toString()).join("")
|
||||
}
|
||||
|
||||
// can you believe it?
|
||||
function css(code: TemplateStringsArray, ...args: any[]): string {
|
||||
return code.join("") + args.map(arg => arg.toString()).join("")
|
||||
}
|
||||
|
||||
// layout
|
||||
function Layout({ children, title }: { children: any, title?: string }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{title ? title : "Cubby"}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="/css/pico.fuchsia.css" />
|
||||
<style dangerouslySetInnerHTML={{
|
||||
__html: css`
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
.main-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.side-content {
|
||||
width: 30%;
|
||||
min-width: 250px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.content-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
.side-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
main ul.file-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
main ul.file-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
main ul.file-list li .delete-button {
|
||||
display: none;
|
||||
padding: 0 4px;
|
||||
margin: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
color: #ff4444;
|
||||
transition: transform 0.2s;
|
||||
cursor: pointer;
|
||||
font-size: 1.2em;
|
||||
line-height: 1;
|
||||
}
|
||||
main ul.file-list li:hover .delete-button {
|
||||
display: block;
|
||||
}
|
||||
main ul.file-list li .delete-button:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.upload-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.file-input {
|
||||
margin: 0;
|
||||
}
|
||||
.upload-button {
|
||||
width: 100%;
|
||||
}
|
||||
.progress-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
display: none;
|
||||
}
|
||||
.progress-bar {
|
||||
width: 0%;
|
||||
height: 20px;
|
||||
background: #4CAF50;
|
||||
}
|
||||
.drag-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: none;
|
||||
}
|
||||
.drag-text {
|
||||
color: white;
|
||||
font-size: 2em;
|
||||
}
|
||||
`}} />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
{children}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
||||
// list all workshop projects
|
||||
app.get("/", async (c) => {
|
||||
const names = await projects()
|
||||
return c.html(tsx(
|
||||
|
|
@ -162,7 +40,6 @@ app.get("/", async (c) => {
|
|||
))
|
||||
})
|
||||
|
||||
// show a project's README and uploaded cubby files
|
||||
app.get("/:name", async (c) => {
|
||||
const name = c.req.param("name").replace("..", "")
|
||||
const readme = await Bun.file(`${PROJECTS_DIR}/${name}/README.md`).text()
|
||||
|
|
@ -177,169 +54,9 @@ app.get("/:name", async (c) => {
|
|||
}
|
||||
}
|
||||
|
||||
return c.html(tsx((
|
||||
<>
|
||||
{/* <p><a href={`${WORKSHOP_REPO}/tree/main/packages/${name}`}>View on GitHub</a></p> */}
|
||||
<p><a href="/">« Back</a></p>
|
||||
<div class="content-wrapper">
|
||||
<div class="main-content">
|
||||
<p dangerouslySetInnerHTML={{ __html: await marked(readme) }} />
|
||||
</div>
|
||||
<div class="side-content">
|
||||
{files.length > 0 && (
|
||||
<>
|
||||
<h2>Files</h2>
|
||||
<ul class="file-list">
|
||||
{files.sort().map(file => (
|
||||
<li key={file}>
|
||||
<a href={`/${name}/${file}`}>{file}</a>
|
||||
<button
|
||||
type="button"
|
||||
class="delete-button"
|
||||
data-file={file}
|
||||
>×</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
<h2>Upload File</h2>
|
||||
<div id="upload-container" class="upload-container">
|
||||
<input type="file" id="file-input" class="file-input" />
|
||||
<button type="button" id="upload-button" class="upload-button" style="display: none">Upload</button>
|
||||
<div id="progress-container" class="progress-container">
|
||||
<div id="progress-bar" class="progress-bar"></div>
|
||||
<div id="progress-text">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="drag-overlay" class="drag-overlay">
|
||||
<div class="drag-text">DROP FILE HERE</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script dangerouslySetInnerHTML={{
|
||||
__html: js`
|
||||
const fileInput = document.getElementById("file-input")
|
||||
const uploadButton = document.getElementById("upload-button")
|
||||
const progressContainer = document.getElementById("progress-container")
|
||||
const progressBar = document.getElementById("progress-bar")
|
||||
const progressText = document.getElementById("progress-text")
|
||||
const dragOverlay = document.getElementById("drag-overlay")
|
||||
const deleteButtons = document.querySelectorAll(".delete-button")
|
||||
let dragCounter = 0
|
||||
|
||||
fileInput.addEventListener("change", () => {
|
||||
uploadButton.style.display = fileInput.files.length > 0 ? "block" : "none"
|
||||
})
|
||||
|
||||
deleteButtons.forEach(button => {
|
||||
button.addEventListener("click", async () => {
|
||||
const file = button.dataset.file
|
||||
if (!confirm("Are you sure you want to delete " + file + "?")) return
|
||||
|
||||
try {
|
||||
const response = await fetch(window.location.pathname + "/delete/" + file, {
|
||||
method: "DELETE"
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
window.location.reload()
|
||||
} else {
|
||||
alert("Delete failed")
|
||||
}
|
||||
} catch (err) {
|
||||
alert("Delete failed")
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function uploadFile(file) {
|
||||
const xhr = new XMLHttpRequest()
|
||||
const formData = new FormData()
|
||||
formData.append("file", file)
|
||||
|
||||
progressContainer.style.display = "block"
|
||||
uploadButton.disabled = true
|
||||
fileInput.disabled = true
|
||||
|
||||
xhr.upload.addEventListener("progress", (e) => {
|
||||
if (e.lengthComputable) {
|
||||
const percent = Math.round((e.loaded / e.total) * 100)
|
||||
progressBar.style.width = percent + "%"
|
||||
progressText.textContent = percent + "%"
|
||||
}
|
||||
})
|
||||
|
||||
xhr.addEventListener("load", () => {
|
||||
if (xhr.status === 200) {
|
||||
window.location.reload()
|
||||
} else {
|
||||
alert("Upload failed")
|
||||
progressContainer.style.display = "none"
|
||||
uploadButton.disabled = false
|
||||
fileInput.disabled = false
|
||||
}
|
||||
})
|
||||
|
||||
xhr.addEventListener("error", () => {
|
||||
alert("Upload failed")
|
||||
progressContainer.style.display = "none"
|
||||
uploadButton.disabled = false
|
||||
fileInput.disabled = false
|
||||
})
|
||||
|
||||
xhr.open("POST", window.location.pathname + "/upload")
|
||||
xhr.send(formData)
|
||||
}
|
||||
|
||||
uploadButton.addEventListener("click", () => {
|
||||
const file = fileInput.files[0]
|
||||
if (!file) return
|
||||
uploadFile(file)
|
||||
})
|
||||
|
||||
document.addEventListener("dragenter", (e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
dragCounter++
|
||||
dragOverlay.style.display = "flex"
|
||||
})
|
||||
|
||||
document.addEventListener("dragleave", (e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
dragCounter--
|
||||
if (dragCounter === 0) {
|
||||
dragOverlay.style.display = "none"
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener("dragover", (e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
})
|
||||
|
||||
document.addEventListener("drop", async (e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
dragCounter = 0
|
||||
dragOverlay.style.display = "none"
|
||||
|
||||
const files = [...e.dataTransfer.files]
|
||||
if (files.length === 0) return
|
||||
|
||||
for (const file of files) {
|
||||
uploadFile(file)
|
||||
break
|
||||
}
|
||||
})
|
||||
`
|
||||
}} />
|
||||
</>
|
||||
)))
|
||||
return c.html(tsx(<Project name={name} readme={readme} files={files} />))
|
||||
})
|
||||
|
||||
// download a file from a project's cubby
|
||||
app.get('/:id/:filename', async c => {
|
||||
const { id, filename } = c.req.param()
|
||||
const path = join(CUBBY_DIR, `project_${id}`, filename)
|
||||
|
|
@ -353,7 +70,6 @@ app.get('/:id/:filename', async c => {
|
|||
})
|
||||
})
|
||||
|
||||
// upload a file to a project's cubby
|
||||
app.post('/:id/upload', async c => {
|
||||
const id = c.req.param('id')
|
||||
|
||||
|
|
@ -369,7 +85,6 @@ app.post('/:id/upload', async c => {
|
|||
if (!(file instanceof File))
|
||||
return c.json({ error: 'Invalid file' }, 400)
|
||||
|
||||
// strip any directory parts from the uploaded filename
|
||||
const filename = basename(file.name)
|
||||
const filepath = join(folder, filename)
|
||||
await Bun.write(filepath, await file.arrayBuffer())
|
||||
|
|
@ -381,7 +96,6 @@ app.post('/:id/upload', async c => {
|
|||
}
|
||||
})
|
||||
|
||||
// delete a file from a project's cubby
|
||||
app.delete('/:id/delete/:filename', async c => {
|
||||
const { id, filename } = c.req.param()
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user