import { Hype } from '@because/hype'
import { theme, define, stylesToCSS, initScript, baseStyles } from '@because/toes/tools'
import { readdir, stat } from 'fs/promises'
import { readFileSync } from 'fs'
import { join, extname, basename } from 'path'
import type { Child } from 'hono/jsx'
const APPS_DIR = process.env.APPS_DIR!
const app = new Hype({ prettyHTML: false })
const Container = define('Container', {
fontFamily: theme('fonts-sans'),
padding: '20px',
maxWidth: '1200px',
margin: '0 auto',
color: theme('colors-text'),
})
const Header = define('Header', {
marginBottom: '20px',
paddingBottom: '10px',
borderBottom: `2px solid ${theme('colors-border')}`,
})
const Title = define('Title', {
margin: 0,
fontSize: '24px',
fontWeight: 'bold',
})
const Subtitle = define('Subtitle', {
color: theme('colors-textMuted'),
fontSize: '18px',
marginTop: '5px',
})
const FileList = define('FileList', {
listStyle: 'none',
padding: 0,
margin: '20px 0',
border: `1px solid ${theme('colors-border')}`,
borderRadius: theme('radius-md'),
overflow: 'hidden',
})
const FileItem = define('FileItem', {
padding: '10px 15px',
borderBottom: `1px solid ${theme('colors-border')}`,
states: {
':last-child': {
borderBottom: 'none',
},
':hover': {
backgroundColor: theme('colors-bgHover'),
},
}
})
const FileLink = define('FileLink', {
base: 'a',
textDecoration: 'none',
color: theme('colors-link'),
display: 'flex',
alignItems: 'center',
gap: '8px',
states: {
':hover': {
textDecoration: 'underline',
},
}
})
const FileIcon = define('FileIcon', {
base: 'svg',
width: '18px',
height: '18px',
flexShrink: 0,
fill: theme('colors-textMuted'),
})
const CodeBlock = define('CodeBlock', {
margin: '20px 0',
border: `1px solid ${theme('colors-border')}`,
borderRadius: theme('radius-md'),
overflowX: 'auto',
selectors: {
'& pre': {
margin: 0,
padding: '15px',
whiteSpace: 'pre',
backgroundColor: theme('colors-bgSubtle'),
},
'& pre code': {
whiteSpace: 'pre',
fontFamily: theme('fonts-mono'),
},
},
})
const CodeHeader = define('CodeHeader', {
padding: '10px 15px',
backgroundColor: theme('colors-bgElement'),
borderBottom: `1px solid ${theme('colors-border')}`,
fontWeight: 'bold',
fontSize: '14px',
})
const ErrorBox = define('ErrorBox', {
color: theme('colors-error'),
padding: '20px',
backgroundColor: theme('colors-bgElement'),
borderRadius: theme('radius-md'),
margin: '20px 0',
})
const BackLink = define('BackLink', {
base: 'a',
textDecoration: 'none',
color: theme('colors-link'),
display: 'inline-flex',
alignItems: 'center',
gap: '5px',
marginBottom: '15px',
states: {
':hover': {
textDecoration: 'underline',
},
},
})
const FolderIcon = () => (
)
const FileIconSvg = () => (
)
interface LayoutProps {
title: string
subtitle?: string
children: Child
highlight?: boolean
}
function Layout({ title, subtitle, children, highlight }: LayoutProps) {
return (
{title}
{highlight && (
<>
)}
{children}
{highlight && }
)
}
app.get('/styles.css', c => c.text(baseStyles + stylesToCSS(), 200, {
'Content-Type': 'text/css; charset=utf-8',
}))
async function listFiles(appPath: string, subPath: string = '') {
const fullPath = join(appPath, subPath)
const entries = await readdir(fullPath, { withFileTypes: true })
const items = entries.map(entry => ({
name: entry.name,
isDirectory: entry.isDirectory(),
path: subPath ? `${subPath}/${entry.name}` : entry.name,
}))
return items.sort((a, b) => {
if (a.isDirectory !== b.isDirectory) {
return a.isDirectory ? -1 : 1
}
return a.name.localeCompare(b.name)
})
}
function getLanguage(filename: string): string {
const ext = extname(filename).toLowerCase()
const langMap: Record = {
'.js': 'javascript',
'.jsx': 'javascript',
'.ts': 'typescript',
'.tsx': 'typescript',
'.json': 'json',
'.css': 'css',
'.html': 'html',
'.md': 'markdown',
'.sh': 'bash',
'.yml': 'yaml',
'.yaml': 'yaml',
}
return langMap[ext] || 'plaintext'
}
app.get('/', async c => {
const appName = c.req.query('app')
const version = c.req.query('version') || 'current'
const filePath = c.req.query('file') || ''
if (!appName) {
return c.html(
Please specify an app name with ?app=<name>
)
}
const appPath = join(APPS_DIR, appName, version)
const versionSuffix = version !== 'current' ? ` @ ${version}` : ''
try {
await stat(appPath)
} catch {
return c.html(
App "{appName}" (version: {version}) not found
)
}
const fullPath = join(appPath, filePath)
let fileStats
try {
fileStats = await stat(fullPath)
} catch {
return c.html(
Path "{filePath}" not found
)
}
const parentPath = filePath.split('/').slice(0, -1).join('/')
const versionParam = version !== 'current' ? `&version=${version}` : ''
const backUrl = `/?app=${appName}${versionParam}${parentPath ? `&file=${parentPath}` : ''}`
if (fileStats.isFile()) {
const content = readFileSync(fullPath, 'utf-8')
const language = getLanguage(basename(fullPath))
return c.html(
← Back
{basename(fullPath)}
{content}
)
}
const files = await listFiles(appPath, filePath)
return c.html(
{filePath && ← Back}
{files.map(file => (
{file.isDirectory ? : }
{file.name}
))}
)
})
export default app.defaults