opentwig 1.1.0 → 1.1.2

package/src/live-ui/styles.css

@@ -0,0 +1,578 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background: #f5f5f5;
+    color: #333;
+    overflow: hidden;
+}
+
+.app-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 24px;
+    background: #fff;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.app-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 24px;
+    background: #fff;
+    border-bottom: 1px solid #e5e5e5;
+    height: 60px;
+    flex-shrink: 0;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.app-header h1 {
+    font-size: 18px;
+    font-weight: 600;
+    color: #2c3e50;
+}
+
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: #666;
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #ccc;
+    animation: pulse 2s infinite;
+}
+
+.status-dot.connected {
+    background: #52c41a;
+}
+
+.status-dot.disconnected {
+    background: #f5222d;
+}
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+.header-right {
+    display: flex;
+    gap: 8px;
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.btn-primary {
+    background: #2c3e50;
+    color: #fff;
+}
+
+.btn-primary:hover {
+    background: #1a252f;
+    transform: translateY(-1px);
+}
+
+.btn-secondary {
+    background: #fff;
+    color: #2c3e50;
+    border: 1px solid #d9d9d9;
+}
+
+.btn-secondary:hover {
+    background: #f5f5f5;
+    border-color: #40a9ff;
+}
+
+.main-content {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+}
+
+.preview-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.preview-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 16px;
+    background: #fff;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.preview-title {
+    font-size: 13px;
+    font-weight: 500;
+    color: #666;
+}
+
+.refresh-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px;
+    border: none;
+    background: #f5f5f5;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.refresh-btn:hover {
+    background: #e8e8e8;
+}
+
+.refresh-btn svg {
+    stroke: #666;
+}
+
+.preview-frame {
+    flex: 1;
+    background: #f0f2f5;
+    overflow: hidden;
+}
+
+#previewFrame {
+    width: 100%;
+    height: 100%;
+    border: none;
+    background: #fff;
+}
+
+.sidebar {
+    width: 400px;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border-left: 1px solid #e5e5e5;
+    overflow: hidden;
+    transition: width 0.3s ease;
+}
+
+.sidebar.collapsed {
+    width: 0;
+}
+
+.sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    border-bottom: 1px solid #e5e5e5;
+    background: #fafafa;
+}
+
+.sidebar-header h2 {
+    font-size: 14px;
+    font-weight: 600;
+    color: #2c3e50;
+}
+
+.toggle-sidebar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s;
+}
+
+.toggle-sidebar:hover {
+    background: #e8e8e8;
+}
+
+.toggle-sidebar svg {
+    stroke: #666;
+}
+
+.sidebar-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+}
+
+.config-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.section-title {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: #666;
+    margin-bottom: 12px;
+    letter-spacing: 0.5px;
+}
+
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-group label {
+    display: block;
+    font-size: 13px;
+    font-weight: 500;
+    color: #333;
+    margin-bottom: 6px;
+}
+
+.form-group input[type="text"],
+.form-group input[type="url"],
+.form-group textarea,
+.form-group select {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    font-size: 13px;
+    transition: all 0.2s;
+}
+
+.form-group textarea {
+    min-height: 80px;
+    resize: vertical;
+    font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group textarea:focus,
+.form-group select:focus {
+    outline: none;
+    border-color: #40a9ff;
+    box-shadow: 0 0 0 2px rgba(64, 169, 255, 0.1);
+}
+
+.link-item {
+    background: #f5f5f5;
+    border: 1px solid #e5e5e5;
+    border-radius: 6px;
+    padding: 12px;
+    margin-bottom: 8px;
+}
+
+.link-item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.link-item-title {
+    font-size: 12px;
+    font-weight: 500;
+    color: #666;
+}
+
+.link-item-actions {
+    display: flex;
+    gap: 4px;
+}
+
+.link-item-actions button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s;
+}
+
+.link-item-actions button:hover {
+    background: #e8e8e8;
+}
+
+.link-item-actions button svg {
+    width: 14px;
+    height: 14px;
+    stroke: #666;
+}
+
+.add-link-btn {
+    width: 100%;
+    padding: 8px;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    background: transparent;
+    color: #40a9ff;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.add-link-btn:hover {
+    background: rgba(64, 169, 255, 0.05);
+    border-color: #40a9ff;
+}
+
+.theme-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+}
+
+.theme-card {
+    padding: 12px;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+    text-align: center;
+}
+
+.theme-card:hover {
+    border-color: #40a9ff;
+    background: rgba(64, 169, 255, 0.05);
+}
+
+.theme-card.active {
+    border-color: #40a9ff;
+    background: rgba(64, 169, 255, 0.1);
+}
+
+.theme-card-name {
+    font-size: 12px;
+    font-weight: 500;
+    color: #333;
+}
+
+.avatar-upload {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    border: 2px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.avatar-upload:hover {
+    border-color: #40a9ff;
+    background: rgba(64, 169, 255, 0.05);
+}
+
+.avatar-preview {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: #f5f5f5;
+    object-fit: cover;
+}
+
+.avatar-upload-text {
+    flex: 1;
+    font-size: 12px;
+    color: #666;
+}
+
+.sidebar-footer {
+    padding: 16px;
+    border-top: 1px solid #e5e5e5;
+    background: #fafafa;
+}
+
+.auto-save-toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 36px;
+    height: 20px;
+}
+
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 20px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 14px;
+    width: 14px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: .4s;
+    border-radius: 50%;
+}
+
+input:checked + .slider {
+    background-color: #2c3e50;
+}
+
+input:checked + .slider:before {
+    transform: translateX(16px);
+}
+
+.auto-save-toggle span:last-child {
+    font-size: 12px;
+    color: #666;
+}
+
+.last-saved {
+    font-size: 11px;
+    color: #999;
+}
+
+.notification-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.notification {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    border-radius: 6px;
+    background: #fff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    font-size: 13px;
+    animation: slideIn 0.3s ease-out;
+    max-width: 300px;
+}
+
+.notification.success {
+    border-left: 4px solid #52c41a;
+}
+
+.notification.error {
+    border-left: 4px solid #f5222d;
+}
+
+.notification.info {
+    border-left: 4px solid #40a9ff;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@media (max-width: 1024px) {
+    .sidebar {
+        position: fixed;
+        right: 0;
+        top: 60px;
+        bottom: 0;
+        z-index: 1000;
+        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
+    }
+
+    .sidebar.collapsed {
+        right: -400px;
+    }
+
+    .preview-toolbar {
+        padding: 8px 12px;
+    }
+}
+
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    font-size: 13px;
+    color: #666;
+}
+
+.loading::after {
+    content: "";
+    width: 20px;
+    height: 20px;
+    margin-left: 12px;
+    border: 2px solid #e5e5e5;
+    border-top-color: #40a9ff;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

package/src/utils/favicon.js

@@ -0,0 +1,20 @@
+/**
+ * Leaf favicon SVG for OpenTwig
+ * Used across all themes
+ */
+
+const LEAF_FAVICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>`;
+
+/**
+ * Get favicon as data URI for embedding in HTML
+ * @returns {string} Data URI for favicon
+ */
+function getFaviconDataURI() {
+    const base64 = Buffer.from(LEAF_FAVICON_SVG).toString('base64');
+    return `data:image/svg+xml;base64,${base64}`;
+}
+
+module.exports = {
+    LEAF_FAVICON_SVG,
+    getFaviconDataURI
+};

package/src/utils/loadConfig.js

@@ -11,7 +11,9 @@ module.exports = function() {
         process.exit(1);
     }
     
-    const config = require(configPath);
+    // Use fs.readFileSync instead of require to avoid caching issues
+    const configContent = fs.readFileSync(configPath, 'utf8');
+    const config = JSON.parse(configContent);
     
     // Apply default values to the loaded configuration
     return applyDefaults(config);

package/src/utils/setupWatcher.js

@@ -12,10 +12,10 @@ const setupWatcher = (configPath, wss, onConfigChange) => {
     let watcher = null;
     let isPaused = false;
     
-    const handleConfigChange = debounce(async (event, path) => {
+    const handleConfigChange = debounce(async (path) => {
         if (isPaused) return;
         
-        console.log(`Config file changed: ${event} ${path}`);
+        console.log(`Config file changed: ${path}`);
         
         try {
             if (onConfigChange) {

package/src/utils/startLiveServer.js

@@ -50,22 +50,22 @@ const startLiveServer = async (customPort) => {
         }
     });
     
-    app.post('/api/config', (req, res) => {
+    app.post('/api/config', async (req, res) => {
         try {
             const newConfig = req.body;
             currentConfig = applyDefaults(newConfig);
             
             fs.writeFileSync(configPath, JSON.stringify(currentConfig, null, 4));
             
-            buildPage(currentConfig).then(({ html, css, ogImage, qrImage }) => {
-                saveFiles(html, css, currentConfig.avatar, ogImage, qrImage);
-                wss.broadcastConfigUpdate(currentConfig);
-            }).catch(error => {
-                console.error('Error building page:', error);
-            });
+            const { html, css, ogImage, qrImage } = await buildPage(currentConfig);
+            saveFiles(html, css, currentConfig.avatar, ogImage, qrImage);
             
             res.json({ success: true, config: currentConfig });
+            
+            // Broadcast reload after files are saved
+            wss.broadcastReload();
         } catch (error) {
+            console.error('Error building page:', error);
             res.status(500).json({ error: error.message });
         }
     });
@@ -201,7 +201,10 @@ const startLiveServer = async (customPort) => {
     
     const watcher = setupWatcher(configPath, wss, async (changedPath) => {
         try {
-            currentConfig = loadConfig();
+            // Read config directly from file to avoid require cache issues
+            const configContent = fs.readFileSync(configPath, 'utf8');
+            const fileConfig = JSON.parse(configContent);
+            currentConfig = applyDefaults(fileConfig);
             await buildPage(currentConfig);
             console.log('Page rebuilt from config change');
         } catch (error) {

package/theme/default/index.js

@@ -5,6 +5,7 @@ const shareButtonComponent = require('./components/share-button');
 const qrComponent = require('./components/qr');
 const dialogComponent = require('./components/dialog');
 const escapeHTML = require('../../src/utils/escapeHTML');
+const { getFaviconDataURI } = require('../../src/utils/favicon');
 
 module.exports = function({title, url, name, content, avatar, links, footerLinks, share}) {
 
@@ -20,6 +21,7 @@ module.exports = function({title, url, name, content, avatar, links, footerLinks
   <meta property="og:description" content="${escapeHTML(content)}"/>
   <meta property="og:url" content="${escapeHTML(url)}"/>
   <meta property="og:image" content="${escapeHTML(url)}/og-image.jpg"/>
+  <link rel="icon" type="image/svg+xml" href="${getFaviconDataURI()}">
     </head>
     <body>
       <div class="app-bg">

package/vitest.config.js

@@ -1,11 +1,20 @@
-module.exports = {
-  test: {
-    environment: 'node',
-    include: ['**/*.test.js'],
-    coverage: {
-      provider: 'v8',
-      reporter: ['text', 'json'],
-      exclude: ['node_modules/', 'dist/', '**/*.test.js', 'test-og.js']
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    test: {
+        globals: true,
+        environment: 'node',
+        include: ['tests/**/*.test.js'],
+        coverage: {
+            provider: 'v8',
+            reporter: ['text', 'json', 'html'],
+            exclude: [
+                'node_modules/',
+                'tests/',
+                'website/',
+                'theme/',
+                'dist/'
+            ]
+        }
     }
-  }
-};
+});