chrisryn/fiddle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add browse dashboard, tags, visibility control, export, QR sharing, and embed mode

Browse Source 
- Browse dashboard at / with search, framework filter, tag pills, and pagination
- Tags system with autocomplete datalist and per-fiddle tag management
- Listed/unlisted toggle for visibility control (unlisted still accessible via direct URL)
- Export standalone HTML with inlined CSS/JS and framework CDN tags
- QR code modal for sharing fiddle URLs
- Embed mode at /embed/:id for minimal preview-only rendering
- Extract shared loadScript() utility from 4 files into utils.js
- Database schema: listed column, tags and fiddle_tags tables with index
This commit is contained in:
root
2026-02-26 14:19:52 -06:00
parent 7f51af17a3
commit e41c3e7dc4
18 changed files with 921 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
public/browse.html Normal file
View File

@@ -0,0 +1,40 @@
<!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>
</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>