Initial commit
This commit is contained in:
36 files changed
+5204
No files matched your search
@@ -0,0 +1,67 @@
|
||||
import Link from 'next/link'
|
||||
import {ArrowLeft, ArrowUpRight, FileCode2, RefreshCw, Terminal} from 'lucide-react'
|
||||
import {languageLabel, rawSnippetUrl} from '@/lib/snippet-utils'
|
||||
import {SnippetEditor} from '@/components/snippet-editor'
|
||||
|
||||
const API_BASE = 'http://127.0.0.1:6868'
|
||||
|
||||
type Snippet = { createdAt?: string; filename: string; content: string }
|
||||
|
||||
async function getSnippet(id: string): Promise<{ data?: Snippet; status: number }> {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/${encodeURIComponent(id)}`, {cache: 'no-store'})
|
||||
if (!response.ok) return {status: response.status}
|
||||
return {data: await response.json(), status: response.status}
|
||||
} catch {
|
||||
return {status: 503}
|
||||
}
|
||||
}
|
||||
|
||||
export default async function ReaderPage({params}: { params: Promise<{ snippet_id: string }> }) {
|
||||
const {snippet_id: id} = await params
|
||||
const result = await getSnippet(id)
|
||||
const snippet = result.data
|
||||
const message = result.status === 404 ? 'This snippet does not exist or has expired.' : 'The snippet server could not be reached.'
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-background text-foreground">
|
||||
<header className="border-b border-border">
|
||||
<div className="mx-auto flex max-w-6xl items-center justify-between px-5 py-4 lg:px-8"><Link href="/"
|
||||
className="flex items-center gap-3 font-mono text-sm font-semibold tracking-tight"><span
|
||||
className="grid size-8 place-items-center rounded-lg bg-primary text-primary-foreground"><Terminal
|
||||
size={16}/></span>KSnippets</Link><Link href="/"
|
||||
className="inline-flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground"><ArrowLeft
|
||||
size={14}/> New snippet</Link></div>
|
||||
</header>
|
||||
<div className="mx-auto max-w-6xl px-5 py-10 lg:px-8 lg:py-16">
|
||||
{snippet ? <>
|
||||
<div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div><p className="mb-3 font-mono text-xs uppercase tracking-[0.2em] text-brand">snippet / <em>{id}</em></p><h1
|
||||
className="flex items-center gap-3 text-3xl font-semibold tracking-[-0.03em]">
|
||||
<FileCode2 size={25} className="text-brand"/>{snippet.filename}</h1><p
|
||||
className="mt-3 text-sm text-muted-foreground">{snippet.createdAt ? new Date(snippet.createdAt).toLocaleString() : 'Published snippet'}
|
||||
<span className="mx-2 text-border">·</span> <span
|
||||
className="font-mono">{languageLabel(snippet.filename)}</span></p></div>
|
||||
<a href={rawSnippetUrl(id)} target="_blank" rel="noreferrer"
|
||||
className="inline-flex w-fit items-center gap-2 rounded-lg border border-border bg-card px-4 py-2.5 text-sm font-medium hover:bg-muted">Open
|
||||
raw <ArrowUpRight size={15}/></a></div>
|
||||
<SnippetEditor value={snippet.content} filename={snippet.filename} readOnly/>
|
||||
<div
|
||||
className="mt-4 font-mono text-xs text-muted-foreground">{snippet.content.split('\n').length} lines
|
||||
</div>
|
||||
</> : <div className="mx-auto max-w-lg py-16 text-center">
|
||||
<div
|
||||
className="mx-auto mb-5 grid size-14 place-items-center rounded-2xl bg-muted text-muted-foreground">{result.status === 404 ? '404' :
|
||||
<RefreshCw size={22}/>}</div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{result.status === 404 ? 'Snippet not found' : 'Connection error'}</h1>
|
||||
<p className="mt-3 leading-6 text-muted-foreground">{message}</p>
|
||||
<div className="mt-7 flex justify-center gap-3"><Link href="/"
|
||||
className="rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground">Create
|
||||
a snippet</Link>{result.status !== 404 && <a href={`/${id}`}
|
||||
className="rounded-lg border border-border px-4 py-2.5 text-sm font-medium hover:bg-muted">Try
|
||||
again</a>}</div>
|
||||
</div>}
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
@import 'shadcn/tailwind.css';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--font-sans: 'Geist', 'Geist Fallback';
|
||||
--font-mono: 'Geist Mono', 'Geist Mono Fallback';
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-brand: var(--brand);
|
||||
--color-editor: var(--editor);
|
||||
--radius-lg: 0.75rem;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--background: oklch(0.975 0.008 90);
|
||||
--foreground: oklch(0.19 0.025 250);
|
||||
--card: oklch(1 0 0);
|
||||
--primary: oklch(0.22 0.035 250);
|
||||
--primary-foreground: oklch(0.98 0.008 90);
|
||||
--muted: oklch(0.94 0.012 90);
|
||||
--muted-foreground: oklch(0.49 0.025 250);
|
||||
--border: oklch(0.88 0.018 90);
|
||||
--destructive: oklch(0.58 0.19 25);
|
||||
--brand: oklch(0.68 0.14 153);
|
||||
--editor: oklch(0.17 0.025 250);
|
||||
}
|
||||
|
||||
* { @apply border-border; }
|
||||
html { background: var(--background); }
|
||||
body { @apply bg-background text-foreground font-sans antialiased; }
|
||||
button, a, input { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, opacity 160ms ease; }
|
||||
.snippet-codemirror .cm-editor { font-family: var(--font-geist-mono), ui-monospace, monospace; }
|
||||
.snippet-codemirror .cm-scroller { padding: 12px 0; }
|
||||
@@ -0,0 +1,28 @@
|
||||
import {Analytics} from '@vercel/analytics/next'
|
||||
import {Geist, Geist_Mono} from 'next/font/google'
|
||||
import type {Metadata, Viewport} from 'next'
|
||||
import './globals.css'
|
||||
|
||||
const geist = Geist({subsets: ['latin'], variable: '--font-geist-sans'})
|
||||
const geistMono = Geist_Mono({subsets: ['latin'], variable: '--font-geist-mono'})
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'KSnippets',
|
||||
description: 'Snippets for RTAST',
|
||||
icons: [
|
||||
{url: '/icon.svg'}
|
||||
],
|
||||
}
|
||||
|
||||
export const viewport: Viewport = {
|
||||
colorScheme: 'light',
|
||||
themeColor: '#f8f7f2',
|
||||
userScalable: true,
|
||||
}
|
||||
|
||||
export default function RootLayout({children}: Readonly<{ children: React.ReactNode }>) {
|
||||
return <html lang="en" className="bg-background">
|
||||
<body className={`${geist.variable} ${geistMono.variable}`}>{children}{process.env.NODE_ENV === 'production' &&
|
||||
<Analytics/>}</body>
|
||||
</html>
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
'use client'
|
||||
|
||||
import {FormEvent, useState} from 'react'
|
||||
import {ArrowUpRight, Check, Copy, FileCode2, Loader2, Send, Terminal, X} from 'lucide-react'
|
||||
import {languageLabel, rawSnippetUrl, SnippetEditor, snippetUrl} from '@/components/snippet-editor'
|
||||
|
||||
const API_BASE = 'http://127.0.0.1:6868'
|
||||
|
||||
async function copyToClipboard(text: string) {
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return true;
|
||||
} catch (err) {
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-999999px';
|
||||
textArea.style.top = '-999999px';
|
||||
document.body.appendChild(textArea);
|
||||
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
|
||||
const successful = document.execCommand('copy');
|
||||
document.body.removeChild(textArea);
|
||||
|
||||
if (!successful) throw new Error('execCommand copy failed');
|
||||
return true;
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export default function Page() {
|
||||
const [content, setContent] = useState('')
|
||||
const [filename, setFilename] = useState('untitled.txt')
|
||||
const [snippetId, setSnippetId] = useState('')
|
||||
const [status, setStatus] = useState<'idle' | 'loading' | 'error'>('idle')
|
||||
const [error, setError] = useState('')
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
async function submit(event: FormEvent) {
|
||||
event.preventDefault()
|
||||
if (!content.trim()) {
|
||||
setError('Add some content before publishing.');
|
||||
setStatus('error');
|
||||
return
|
||||
}
|
||||
setStatus('loading');
|
||||
setError('');
|
||||
setSnippetId('')
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/v1/snippets`, {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({content, filename})
|
||||
})
|
||||
if (!response.ok) throw new Error(`Request failed with ${response.status}`)
|
||||
const data = await response.json()
|
||||
if (!data.snippet_id) throw new Error('The server did not return a snippet_id.')
|
||||
setSnippetId(data.snippet_id);
|
||||
setStatus('idle')
|
||||
} catch (caught) {
|
||||
setStatus('error');
|
||||
setError(caught instanceof Error ? caught.message : 'Could not reach the snippet server.')
|
||||
}
|
||||
}
|
||||
|
||||
async function copyLink() {
|
||||
if (!snippetId) return
|
||||
await copyToClipboard(snippetUrl(snippetId));
|
||||
setCopied(true);
|
||||
window.setTimeout(() => setCopied(false), 1600)
|
||||
}
|
||||
|
||||
function reset() {
|
||||
setContent('');
|
||||
setFilename('untitled.txt');
|
||||
setSnippetId('');
|
||||
setError('');
|
||||
setStatus('idle')
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-background text-foreground">
|
||||
<header className="border-b border-border">
|
||||
<div className="mx-auto flex max-w-6xl items-center justify-between px-5 py-4 lg:px-8">
|
||||
<a href="/" className="flex items-center gap-3 font-mono text-sm font-semibold tracking-tight"><span
|
||||
className="grid size-8 place-items-center rounded-lg bg-primary text-primary-foreground"><Terminal
|
||||
size={16}/></span>KSnippets</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="mx-auto max-w-6xl px-5 py-10 lg:px-8 lg:py-16">
|
||||
<form onSubmit={submit}>
|
||||
<div className="mb-3 flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2 text-sm font-medium"><FileCode2 size={16}
|
||||
className="text-brand"/> New
|
||||
snippet
|
||||
</div>
|
||||
<div className="flex items-center gap-2"><span
|
||||
className="rounded-md bg-muted px-2.5 py-1 font-mono text-[11px] text-muted-foreground">{languageLabel(filename)}</span>
|
||||
<button type="button" onClick={reset}
|
||||
className="rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
aria-label="Clear editor"><X size={15}/></button>
|
||||
</div>
|
||||
</div>
|
||||
<SnippetEditor value={content} filename={filename} onChange={setContent}/>
|
||||
<div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"><label
|
||||
className="flex items-center gap-3 text-sm text-muted-foreground"><span
|
||||
className="font-mono text-xs">filename</span><input value={filename}
|
||||
onChange={(event) => setFilename(event.target.value || 'untitled.txt')}
|
||||
className="w-44 border-b border-border bg-transparent py-1 text-foreground outline-none focus:border-brand"/></label>
|
||||
<button disabled={status === 'loading'}
|
||||
className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground transition hover:bg-primary/90 disabled:cursor-wait disabled:opacity-70">{status === 'loading' ?
|
||||
<Loader2 size={16} className="animate-spin"/> : <Send size={16}/>} Publish snippet
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{status === 'error' && <div role="alert"
|
||||
className="mt-5 rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">{error}</div>}
|
||||
{snippetId && <section className="mt-8 rounded-xl border border-brand/30 bg-brand/5 p-5">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div><p className="mb-1 text-xs font-medium uppercase tracking-widest text-brand">published
|
||||
successfully</p><a href={`/${snippetId}`}
|
||||
className="font-mono text-sm text-foreground underline decoration-brand underline-offset-4">/{snippetId}</a>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button type="button" onClick={copyLink}
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-xs font-medium hover:bg-muted">{copied ?
|
||||
<Check size={14}/> : <Copy size={14}/>}{copied ? 'Copied' : 'Copy link'}</button>
|
||||
<a href={rawSnippetUrl(snippetId)} target="_blank" rel="noreferrer"
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-primary px-3 py-2 text-xs font-medium text-primary-foreground">Raw <ArrowUpRight
|
||||
size={14}/></a></div>
|
||||
</div>
|
||||
</section>}
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user