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

24
public/index.html
View File

@@ -9,7 +9,7 @@
<body>
<header class="toolbar">
<div class="toolbar-left">
<a href="/" class="logo">Fiddle</a>
<a href="/" class="logo" title="Browse fiddles">Fiddle</a>
<select id="framework-mode">
<option value="html-css-js">HTML / CSS / JS</option>
<option value="typescript">TypeScript</option>
@@ -32,6 +32,15 @@
</select>
</div>
<div class="toolbar-right">
<div class="tags-input-wrap">
<input type="text" id="tags-input" placeholder="Add tags..." list="tags-datalist" spellcheck="false">
<datalist id="tags-datalist"></datalist>
<div id="tags-display" class="tags-display"></div>
</div>
<label class="listed-toggle" title="Show in browse page">
<input type="checkbox" id="listed-checkbox" checked>
Listed
</label>
<label class="auto-run-toggle" title="Auto-run on change">
<input type="checkbox" id="auto-run-checkbox" checked>
Auto
@@ -39,6 +48,8 @@
<button id="btn-run" title="Run (Ctrl+Enter)">Run</button>
<button id="btn-save" title="Save (Ctrl+S)">Save</button>
<button id="btn-fork" title="Fork">Fork</button>
<button id="btn-export" title="Export standalone HTML" class="btn-secondary">Export</button>
<button id="btn-qr" title="QR code" class="btn-secondary">QR</button>
</div>
</header>
@@ -60,6 +71,17 @@
</div>
</main>
<div id="qr-modal" class="modal-overlay hidden">
<div class="modal-content">
<div class="modal-header">
<span>Share via QR Code</span>
<button id="qr-modal-close" class="btn-small">&times;</button>
</div>
<div id="qr-canvas"></div>
<div id="qr-url" class="qr-url"></div>
</div>
</div>
<div id="share-toast" class="toast hidden"></div>
<script>