- Tailwind CSS: toolbar checkbox injects Play CDN into preview, persisted per-fiddle via new options JSON column - Markdown mode: uses marked.js CDN, renders markdown to HTML preview with CSS tab for custom styling - WASM mode: starter template with inline WebAssembly add function, supports top-level await via module detection - npm imports: auto-detect bare import specifiers in module code and inject importmap pointing to esm.sh CDN - Module auto-detection for html-css-js mode (import/export statements) - DB migration adds options column, server passes through all API endpoints - All features work across preview, export, and embed
43 lines
1.3 KiB
HTML
43 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Fiddle - Browse</title>
|
|
<link rel="stylesheet" href="/css/browse.css">
|
|
</head>
|
|
<body>
|
|
<header class="browse-header">
|
|
<a href="/" class="logo">Fiddle</a>
|
|
<a href="/new" class="btn-new">+ New Fiddle</a>
|
|
</header>
|
|
|
|
<div class="browse-toolbar">
|
|
<input type="text" id="search-input" placeholder="Search fiddles..." spellcheck="false">
|
|
<select id="filter-framework">
|
|
<option value="">All Frameworks</option>
|
|
<option value="javascript">HTML/CSS/JS</option>
|
|
<option value="typescript">TypeScript</option>
|
|
<option value="react">React (JSX)</option>
|
|
<option value="react-ts">React + TS</option>
|
|
<option value="vue">Vue</option>
|
|
<option value="svelte">Svelte</option>
|
|
<option value="markdown">Markdown</option>
|
|
<option value="wasm">WASM</option>
|
|
</select>
|
|
<select id="filter-sort">
|
|
<option value="updated">Recently Updated</option>
|
|
<option value="created">Recently Created</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="tags-bar" class="tags-bar"></div>
|
|
|
|
<main id="fiddle-grid" class="fiddle-grid"></main>
|
|
|
|
<div id="pagination" class="pagination"></div>
|
|
|
|
<script type="module" src="/js/browse.js"></script>
|
|
</body>
|
|
</html>
|