opentwig 1.0.0

package/theme/dark/style.css

@@ -0,0 +1,313 @@
+/* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+
+/* css reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Dark theme background */
+body {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+    min-height: 100vh;
+    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    color: #e8e8e8;
+}
+
+.app-bg {
+    min-height: 100vh;
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    padding: 28px 16px;
+}
+
+.card {
+    width: 100%;
+    max-width: 480px;
+    background: rgba(30, 30, 46, 0.95);
+    backdrop-filter: blur(20px);
+    border-radius: 24px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
+    padding-bottom: 28px;
+    min-height: calc(100vh - 56px);
+    display: flex;
+    flex-direction: column;
+}
+
+.top-actions {
+    display: flex;
+    justify-content: flex-end;
+    padding: 12px 16px;
+}
+
+.icon-btn {
+    width: 36px;
+    height: 36px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 9999px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.icon-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+    transform: translateY(-1px);
+}
+
+.icon-btn svg {
+    stroke: white;
+}
+
+.profile {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    padding: 8px 24px 16px;
+}
+
+.avatar {
+    width: 96px;
+    height: 96px;
+    border-radius: 9999px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: 3px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
+}
+
+.avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 9999px;
+}
+
+.name {
+    font-weight: 700;
+    margin-top: 12px;
+    font-size: 22px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.tagline {
+    margin-top: 4px;
+    color: #a0a0a0;
+    font-size: 14px;
+}
+
+.links {
+    padding: 16px;
+    display: grid;
+    gap: 12px;
+}
+
+.link-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-decoration: none;
+    background: rgba(255, 255, 255, 0.05);
+    color: inherit;
+    border-radius: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 16px;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+}
+
+.link-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 24px rgba(102, 126, 234, 0.2);
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(102, 126, 234, 0.3);
+}
+
+.footer-links {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    color: #888;
+    font-size: 12px;
+    margin-top: auto;
+    padding-top: 18px;
+}
+
+.footer-links a {
+    color: inherit;
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+.footer-links a:hover { 
+    color: #667eea;
+    text-decoration: underline; 
+}
+
+/* QR Code - Desktop Only */
+.qr-desktop {
+    display: none;
+}
+
+@media (min-width: 1022px) {
+    .qr-desktop {
+        display: block;
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 1000;
+    }
+    
+    .qr-content {
+        text-align: center;
+        background: rgba(30, 30, 46, 0.95);
+        backdrop-filter: blur(20px);
+        border-radius: 16px;
+        padding: 16px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    }
+    
+    .qr-content h3 {
+        font-size: 14px;
+        font-weight: 500;
+        color: #e8e8e8;
+        margin-bottom: -10px;
+    }
+    
+    .qr-content img {
+        width: 140px;
+        height: 140px;
+        border-radius: 8px;
+    }
+}
+
+/* Modal Dialog Styles */
+.modal-dialog {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    border: none;
+    padding: 0;
+    margin: 0;
+    z-index: 1000;
+    display: none;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-dialog[open] {
+    display: flex;
+}
+
+.modal-dialog::backdrop {
+    background: rgba(0, 0, 0, 0.7);
+}
+
+.modal-content {
+    background: rgba(30, 30, 46, 0.95);
+    backdrop-filter: blur(20px);
+    border-radius: 16px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
+    max-width: 90vw;
+    max-height: 90vh;
+    width: 100%;
+    max-width: 500px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 24px 16px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.modal-header h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: #e8e8e8;
+    margin: 0;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 6px;
+    color: #a0a0a0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.modal-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #e8e8e8;
+}
+
+.modal-close:active {
+    transform: scale(0.95);
+}
+
+.modal-body {
+    padding: 20px 24px 24px;
+    overflow-y: auto;
+    flex: 1;
+}
+
+.modal-body p {
+    margin: 0;
+    line-height: 1.6;
+    color: #c0c0c0;
+    font-size: 14px;
+}
+
+/* Animation for modal appearance */
+.modal-dialog[open] {
+    animation: modalFadeIn 0.2s ease-out;
+}
+
+.modal-content {
+    animation: modalSlideIn 0.2s ease-out;
+}
+
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes modalSlideIn {
+    from {
+        transform: scale(0.9) translateY(-20px);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1) translateY(0);
+        opacity: 1;
+    }
+}

package/theme/default/components/avatar.js

@@ -0,0 +1,7 @@
+module.exports = function() {
+    return `
+        <div class="avatar">
+            <img src="./avatar.png" alt="Avatar" />
+        </div>
+    `;
+}

package/theme/default/components/dialog.js

@@ -0,0 +1,20 @@
+module.exports = function(link, index) {
+    return `
+        <a href="#" onclick="event.preventDefault(); document.getElementById('dialog${index}').showModal(); return false;">${link.title}</a>
+        <dialog id="dialog${index}" class="modal-dialog">
+            <div class="modal-content" onclick="event.stopPropagation();">
+                <div class="modal-header">
+                    <h3>${link.title}</h3>
+                    <button class="modal-close" onclick="document.getElementById('dialog${index}').close(); return false;" aria-label="Close dialog">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <p>${link.content}</p>
+                </div>
+            </div>
+        </dialog>
+    `;
+}

package/theme/default/components/footer-link.js

@@ -0,0 +1,5 @@
+module.exports = function(link) {
+    return `
+        <a href="${link.url}">${link.title}</a>
+    `;
+}

package/theme/default/components/link.js

@@ -0,0 +1,7 @@
+module.exports = function({link}) {
+    return `
+        <a class="link-item" href="${link.url}" target="_blank" rel="noopener">
+            <span>${link.title}</span>
+        </a>
+    `;
+}

package/theme/default/components/qr.js

@@ -0,0 +1,10 @@
+module.exports = function() {
+    return `
+        <div class="qr-desktop">
+            <div class="qr-content">
+                <h3>View on mobile</h3>
+                <img src="./qr.svg" alt="QR Code" />
+            </div>
+        </div>
+    `;
+}

package/theme/default/components/share-button.js

@@ -0,0 +1,11 @@
+module.exports = function({share}) {
+    if (!share) {
+        return '';
+    }
+
+    return `
+        <button class="icon-btn" aria-label="Share" onclick="() => navigator.share({ url: location.href, title:'${share.title}', text:'${share.text}' })">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
+        </button>
+    `;
+}

package/theme/default/index.js

@@ -0,0 +1,53 @@
+const avatarComponent = require('./components/avatar');
+const linkComponent = require('./components/link');
+const footerLinkComponent = require('./components/footer-link');
+const shareButtonComponent = require('./components/share-button');
+const qrComponent = require('./components/qr');
+const dialogComponent = require('./components/dialog');
+
+module.exports = function({title, url, name, content, avatar, links, footerLinks, share}) {
+  return `<!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>${title}</title>
+      <meta name="description" content="${content}">
+      <link rel="stylesheet" href="./style.css">
+      <meta property="og:title" content="tufantunc | Twitter | Linktree"/>
+      <meta property="og:description" content="Merhaba."/>
+      <meta property="og:url" content="${url}"/>
+      <meta property="og:image" content="${url}/og-image.png"/>
+    </head>
+    <body>
+      <div class="app-bg">
+        <div class="card">
+          <div class="top-actions">
+            ${shareButtonComponent({share})}
+          </div>
+
+          <div class="profile">
+            ${avatarComponent({avatar})}
+            <div class="name">${name}</div>
+            <div class="tagline">${content}</div>
+          </div>
+
+          <div class="links">
+            ${links.map(link => linkComponent({link})).join('')}
+          </div>
+
+          <div class="footer-links">
+            ${footerLinks.map((link, index) => {
+              if(link.hasOwnProperty('content')) {
+                return dialogComponent(link, index);
+              } else {
+                return footerLinkComponent(link);
+              }
+            }).join('<span class="dot">•</span>')}
+          </div>
+        </div>
+        ${qrComponent()}
+      </div>
+    </body>
+  </html>`;
+};

package/theme/default/style.css

@@ -0,0 +1,277 @@
+/* css reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* background like Linktree preview */
+body {
+    background: #c7c9cb;
+    min-height: 100vh;
+    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+    color: #0a0a0a;
+}
+
+.app-bg {
+    min-height: 100vh;
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    padding: 28px 16px;
+}
+
+.card {
+    width: 100%;
+    max-width: 480px;
+    background: #eceff3;
+    border-radius: 20px;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
+    padding-bottom: 28px;
+    min-height: calc(100vh - 56px);
+    display: flex;
+    flex-direction: column;
+}
+
+.top-actions {
+    display: flex;
+    justify-content: flex-end;
+    padding: 12px 16px;
+}
+
+.icon-btn {
+    width: 36px;
+    height: 36px;
+    border: 1px solid rgba(0,0,0,0.15);
+    background: #fff;
+    border-radius: 9999px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.profile {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    padding: 8px 24px 16px;
+}
+
+.avatar {
+    width: 96px;
+    height: 96px;
+    border-radius: 9999px;
+    background: #dedede;
+}
+
+.avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 9999px;
+}
+
+.name {
+    font-weight: 700;
+    margin-top: 12px;
+    font-size: 22px;
+}
+
+.tagline {
+    margin-top: 4px;
+    color: #5a5a5a;
+    font-size: 14px;
+}
+
+.links {
+    padding: 16px;
+    display: grid;
+    gap: 12px;
+}
+
+.link-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-decoration: none;
+    background: #fff;
+    color: inherit;
+    border-radius: 12px;
+    border: 1px solid rgba(0,0,0,0.1);
+    padding: 16px;
+    transition: transform .06s ease, box-shadow .12s ease;
+}
+
+.link-item:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
+}
+
+.footer-links {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    color: #5a5a5a;
+    font-size: 12px;
+    margin-top: auto;
+    padding-top: 18px;
+}
+
+.footer-links a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.footer-links a:hover { text-decoration: underline; }
+
+/* QR Code - Desktop Only */
+.qr-desktop {
+    display: none;
+}
+
+@media (min-width: 1022px) {
+    .qr-desktop {
+        display: block;
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 1000;
+    }
+    
+    .qr-content {
+        text-align: center;
+    }
+    
+    .qr-content h3 {
+        font-size: 14px;
+        font-weight: 500;
+        color: #0a0a0a;
+        margin-bottom: -10px;
+    }
+    
+    .qr-content img {
+        width: 140px;
+        height: 140px;
+    }
+}
+
+/* Modal Dialog Styles */
+.modal-dialog {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    border: none;
+    padding: 0;
+    margin: 0;
+    z-index: 1000;
+    display: none;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-dialog[open] {
+    display: flex;
+}
+
+.modal-dialog::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+    max-width: 90vw;
+    max-height: 90vh;
+    width: 100%;
+    max-width: 500px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 24px 16px;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.modal-header h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: #0a0a0a;
+    margin: 0;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 6px;
+    color: #666;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.modal-close:hover {
+    background: #f5f5f5;
+    color: #333;
+}
+
+.modal-close:active {
+    transform: scale(0.95);
+}
+
+.modal-body {
+    padding: 20px 24px 24px;
+    overflow-y: auto;
+    flex: 1;
+}
+
+.modal-body p {
+    margin: 0;
+    line-height: 1.6;
+    color: #333;
+    font-size: 14px;
+}
+
+/* Animation for modal appearance */
+.modal-dialog[open] {
+    animation: modalFadeIn 0.2s ease-out;
+}
+
+.modal-content {
+    animation: modalSlideIn 0.2s ease-out;
+}
+
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes modalSlideIn {
+    from {
+        transform: scale(0.9) translateY(-20px);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1) translateY(0);
+        opacity: 1;
+    }
+}

package/theme/minimal/index.js

@@ -0,0 +1,4 @@
+// Minimal theme - uses default theme completely
+const defaultTheme = require('../default/index.js');
+
+module.exports = defaultTheme;