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

Add QoL features: preview theme, external resources, shortcuts, mobile layout

Browse Source 
- Dark/light preview theme toggle with localStorage persistence and
  dark CSS injection in preview, export, and embed
- External CSS/JS resources modal with per-fiddle persistence in
  options column, injected as link/script tags
- Keyboard shortcuts cheat sheet modal (? button or ? key)
- Mobile-responsive CSS with breakpoints at 768px and 480px
  for both editor and browse pages
This commit is contained in:
root
2026-02-26 15:39:16 -06:00
parent 77f64d2862
commit b18c9c1dc8
8 changed files with 239 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/js/embed.js
View File

@@ -79,11 +79,25 @@ async function init() {
? `<script src="https://cdn.tailwindcss.com"><\/script>\n`
: '';
// Dark preview theme — from fiddle options or URL param
const previewTheme = params.get('theme') || opts.previewTheme || 'light';
const darkCss = previewTheme === 'dark'
? `<style>body { background: #1e1e1e; color: #ccc; }</style>\n`
: '';
// External resources
let resourceTags = '';
const resources = opts.resources || [];
for (const r of resources) {
if (r.type === 'css') resourceTags += `<link rel="stylesheet" href="${r.url}">\n`;
else if (r.type === 'js') resourceTags += `<script src="${r.url}"><\/script>\n`;
}
const doc = `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
${tailwindScript}<style>${allCss}</style>
${darkCss}${resourceTags}${tailwindScript}<style>${allCss}</style>
${importMapTag}
</head>
<body>