@nuraly/lumenjs 0.1.2 → 0.1.4

package/templates/social/pages/apps/index.ts

@@ -0,0 +1,116 @@
+import { LitElement, html, css } from 'lit';
+
+const svg = {
+  search: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`,
+};
+
+export async function loader() {
+  return {
+    featured: [
+      { id: 'poll', name: 'Polls', desc: 'Create polls and surveys for your community', color: '#7c3aed', icon: 'bar-chart' },
+      { id: 'calendar', name: 'Calendar', desc: 'Track events, meetings, and deadlines', color: '#3b49df', icon: 'calendar' },
+      { id: 'notes', name: 'Quick Notes', desc: 'Markdown notes that sync across devices', color: '#22c55e', icon: 'file-text' },
+    ],
+    categories: ['Productivity', 'Entertainment', 'Finance', 'Social', 'Developer Tools', 'Health'],
+    apps: [
+      { id: 'poll', name: 'Poll Creator', desc: 'Create polls and surveys for your feed', category: 'Social', color: '#7c3aed' },
+      { id: 'calendar', name: 'Mini Calendar', desc: 'Track events and meetings', category: 'Productivity', color: '#3b49df' },
+      { id: 'notes', name: 'Quick Notes', desc: 'Markdown notes with cloud sync', category: 'Productivity', color: '#22c55e' },
+      { id: 'timer', name: 'Focus Timer', desc: 'Pomodoro timer for deep work', category: 'Productivity', color: '#ef4444' },
+      { id: 'weather', name: 'Weather', desc: 'Local weather and forecasts', category: 'Entertainment', color: '#f59e0b' },
+      { id: 'stocks', name: 'Stock Tracker', desc: 'Watch your portfolio in real-time', category: 'Finance', color: '#10b981' },
+      { id: 'news', name: 'News Feed', desc: 'Curated tech news from top sources', category: 'Entertainment', color: '#6366f1' },
+      { id: 'tasks', name: 'Task Board', desc: 'Kanban-style task management', category: 'Productivity', color: '#8b5cf6' },
+      { id: 'translate', name: 'Translator', desc: 'Translate text between languages', category: 'Developer Tools', color: '#06b6d4' },
+      { id: 'code', name: 'Code Snippets', desc: 'Save and share code snippets', category: 'Developer Tools', color: '#0f172a' },
+      { id: 'fitness', name: 'Step Counter', desc: 'Track daily steps and activity', category: 'Health', color: '#ec4899' },
+      { id: 'budget', name: 'Budget Tracker', desc: 'Track expenses and income', category: 'Finance', color: '#14b8a6' },
+    ],
+  };
+}
+
+export class PageApps extends LitElement {
+  static properties = { loaderData: { type: Object }, _category: { state: true } };
+  loaderData: any = {};
+  _category: string = '';
+
+  static styles = css`
+    :host { display: block; }
+    .card { background: var(--bg); border-radius: 6px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 12px; }
+    h2 { font-size: 20px; font-weight: 700; padding: 16px 20px 8px; margin: 0; }
+
+    .search-wrap { padding: 0 20px 16px; position: relative; }
+    .search-icon { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); display: flex; }
+    .search { width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--border); border-radius: 9999px; font-size: 14px; outline: none; background: var(--input-bg); }
+    .search:focus { border-color: var(--accent); background: var(--bg); }
+
+    .featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 20px 16px; }
+    .feat-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; cursor: pointer; text-decoration: none; color: inherit; transition: box-shadow 0.15s; }
+    .feat-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
+    .feat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 700; }
+    .feat-name { font-size: 15px; font-weight: 700; margin-top: 10px; }
+    .feat-desc { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.3; }
+
+    .categories { display: flex; gap: 6px; padding: 0 20px 12px; overflow-x: auto; scrollbar-width: none; }
+    .categories::-webkit-scrollbar { display: none; }
+    .cat-btn { padding: 6px 14px; border-radius: 9999px; border: 1px solid var(--border); background: var(--bg); font-size: 13px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; font-weight: 500; }
+    .cat-btn:hover { border-color: var(--accent); color: var(--accent); }
+    .cat-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
+
+    .app-list { padding: 0 20px 8px; }
+    .app-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-light); align-items: center; }
+    .app-item:last-child { border-bottom: none; }
+    .app-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0; }
+    .app-info { flex: 1; min-width: 0; }
+    .app-name { font-size: 14px; font-weight: 700; }
+    .app-desc { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
+    .app-cat { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
+    .open-btn { padding: 5px 14px; border-radius: 9999px; border: 1px solid var(--accent); color: var(--accent); background: var(--bg); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; }
+    .open-btn:hover { background: rgba(124,58,237,0.1); }
+
+    @media (max-width: 640px) { .featured { grid-template-columns: 1fr; } }
+  `;
+
+  render() {
+    const { featured, categories, apps } = this.loaderData;
+    const filtered = this._category ? apps?.filter((a: any) => a.category === this._category) : apps;
+    return html`
+      <div class="card">
+        <h2>Apps</h2>
+        <div class="search-wrap">
+          <span class="search-icon">${svg.search}</span>
+          <input class="search" type="text" placeholder="Search apps...">
+        </div>
+        <h2 style="font-size:16px;padding-top:0">Featured</h2>
+        <div class="featured">
+          ${(featured || []).map((f: any) => html`
+            <a class="feat-card" href="/apps/${f.id}">
+              <div class="feat-icon" style="background:${f.color}">${f.name.charAt(0)}</div>
+              <div class="feat-name">${f.name}</div>
+              <div class="feat-desc">${f.desc}</div>
+            </a>
+          `)}
+        </div>
+        <div class="categories">
+          <button class="cat-btn ${this._category === '' ? 'active' : ''}" @click=${() => this._category = ''}>All</button>
+          ${(categories || []).map((c: string) => html`
+            <button class="cat-btn ${this._category === c ? 'active' : ''}" @click=${() => this._category = c}>${c}</button>
+          `)}
+        </div>
+        <div class="app-list">
+          ${(filtered || []).map((a: any) => html`
+            <div class="app-item">
+              <div class="app-icon" style="background:${a.color}">${a.name.charAt(0)}</div>
+              <div class="app-info">
+                <div class="app-name">${a.name}</div>
+                <div class="app-desc">${a.desc}</div>
+                <div class="app-cat">${a.category}</div>
+              </div>
+              <a class="open-btn" href="/apps/${a.id}">Open</a>
+            </div>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+}

package/templates/social/pages/auth/login.ts

@@ -0,0 +1,92 @@
+import { LitElement, html, css } from 'lit';
+
+// Google 'G' logo SVG (official colors)
+const googleLogo = html`<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 01-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" fill="#4285F4"/>
+  <path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 009 18z" fill="#34A853"/>
+  <path d="M3.964 10.71A5.41 5.41 0 013.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 000 9c0 1.452.348 2.827.957 4.042l3.007-2.332z" fill="#FBBC05"/>
+  <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 00.957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58z" fill="#EA4335"/>
+</svg>`;
+
+export async function loader({ query }: any) {
+  return {
+    error: query?.error ?? null,
+    returnTo: query?.returnTo ?? '/',
+  };
+}
+
+export class PageAuthLogin extends LitElement {
+  static properties = { loaderData: { type: Object } };
+  loaderData: any = {};
+
+  static styles = css`
+    :host { display: flex; align-items: center; justify-content: center; min-height: 80vh; padding: 24px 16px; }
+
+    .card {
+      width: 100%; max-width: 380px;
+      background: var(--bg); border: 1px solid var(--border);
+      border-radius: 16px; padding: 40px 32px;
+      text-align: center;
+      box-shadow: 0 4px 24px rgba(0,0,0,0.06);
+    }
+
+    .logo {
+      width: 52px; height: 52px; border-radius: 50%;
+      background: var(--accent); color: #fff;
+      font-size: 24px; font-weight: 900;
+      display: flex; align-items: center; justify-content: center;
+      margin: 0 auto 20px;
+    }
+
+    h1 { font-size: 22px; font-weight: 800; margin: 0 0 6px; color: var(--text); }
+    p { font-size: 14px; color: var(--text-secondary); margin: 0 0 28px; }
+
+    .error {
+      background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;
+      color: #dc2626; font-size: 13px; padding: 10px 14px;
+      margin-bottom: 20px; text-align: left;
+    }
+
+    .google-btn {
+      display: flex; align-items: center; justify-content: center; gap: 10px;
+      width: 100%; padding: 11px 20px;
+      background: var(--bg); color: var(--text);
+      border: 1px solid var(--border); border-radius: 8px;
+      font-size: 14px; font-weight: 600;
+      text-decoration: none; cursor: pointer;
+      transition: background 0.15s, border-color 0.15s;
+    }
+    .google-btn:hover { background: var(--bg-secondary); border-color: var(--accent); }
+
+    .divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-tertiary); font-size: 12px; }
+    .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
+
+    .terms { font-size: 12px; color: var(--text-tertiary); margin-top: 20px; line-height: 1.5; }
+  `;
+
+  render() {
+    const { error, returnTo } = this.loaderData;
+    const loginUrl = `/__nk_auth/login/google?returnTo=${encodeURIComponent(returnTo ?? '/')}`;
+    const errorMsg = error === 'access_denied' ? 'Access was denied. Please try again.'
+      : error === 'state_mismatch' ? 'Login session expired. Please try again.'
+      : error ? 'Authentication failed. Please try again.'
+      : null;
+
+    return html`
+      <div class="card">
+        <div class="logo">N</div>
+        <h1>Sign in</h1>
+        <p>Welcome back — sign in to continue</p>
+
+        ${errorMsg ? html`<div class="error">${errorMsg}</div>` : ''}
+
+        <a class="google-btn" href="${loginUrl}">
+          ${googleLogo}
+          Continue with Google
+        </a>
+
+        <p class="terms">By signing in you agree to our Terms of Service and Privacy Policy.</p>
+      </div>
+    `;
+  }
+}

package/templates/social/pages/bookmarks.ts

@@ -0,0 +1,57 @@
+import { LitElement, html, css } from 'lit';
+
+const svg = {
+  bookmark: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>`,
+};
+
+export async function loader() {
+  return {
+    bookmarks: [
+      { id: 1, username: 'aymen', display_name: 'Aymen Labidi', initials: 'AL', color: '#7c3aed', title: 'Why file-based routing changes everything', saved: '2 hours ago' },
+      { id: 7, username: 'emma_data', display_name: 'Emma Williams', initials: 'EW', color: '#3572a5', title: 'Polars vs Pandas: a practical comparison', saved: '1 day ago' },
+      { id: 4, username: 'mike_ops', display_name: 'Mike Johnson', initials: 'MJ', color: '#22c55e', title: 'Migrating CI/CD to GitHub Actions: a retrospective', saved: '3 days ago' },
+    ],
+  };
+}
+
+export class PageBookmarks extends LitElement {
+  static properties = { loaderData: { type: Object } };
+  loaderData: any = {};
+
+  static styles = css`
+    :host { display: block; }
+    .card { background: var(--bg); border-radius: 6px; border: 1px solid var(--border); overflow: hidden; }
+    h2 { font-size: 20px; font-weight: 700; padding: 16px 20px; margin: 0; border-bottom: 1px solid var(--border-light); }
+    .item { display: flex; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--border-light); cursor: pointer; }
+    .item:hover { background: var(--bg-hover); }
+    .item:last-child { border-bottom: none; }
+    .item-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
+    .item-body { flex: 1; }
+    .item-title { font-size: 15px; font-weight: 600; }
+    .item-title a { color: var(--text); text-decoration: none; }
+    .item-title a:hover { color: var(--accent); }
+    .item-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
+    .empty { padding: 48px 20px; text-align: center; color: var(--text-secondary); font-size: 14px; }
+  `;
+
+  render() {
+    const bookmarks = this.loaderData.bookmarks || [];
+    return html`
+      <div class="card">
+        <h2>Bookmarks</h2>
+        ${bookmarks.length === 0
+          ? html`<div class="empty">No bookmarks yet</div>`
+          : bookmarks.map((b: any) => html`
+            <div class="item">
+              <div class="item-icon">${svg.bookmark}</div>
+              <div class="item-body">
+                <div class="item-title"><a href="/post/${b.id}">${b.title}</a></div>
+                <div class="item-meta">${b.display_name} · Saved ${b.saved}</div>
+              </div>
+            </div>
+          `)
+        }
+      </div>
+    `;
+  }
+}

package/templates/social/pages/explore.ts

@@ -0,0 +1,73 @@
+import { LitElement, html, css } from 'lit';
+
+export async function loader() {
+  return {
+    tags: [
+      { name: 'webcomponents', count: 1250, color: '#3b49df' },
+      { name: 'typescript', count: 3400, color: '#3178c6' },
+      { name: 'devops', count: 890, color: '#e44d26' },
+      { name: 'machinelearning', count: 2100, color: '#f7df1e' },
+      { name: 'opensource', count: 1800, color: '#22c55e' },
+      { name: 'css', count: 4200, color: '#a855f7' },
+      { name: 'python', count: 5100, color: '#3572a5' },
+      { name: 'beginners', count: 6300, color: '#ef4444' },
+    ],
+    topPosts: [
+      { id: 9, display_name: 'Aymen Labidi', title: 'Building a commit message generator with Claude', likes: 112, comments: 18, time: '4 days ago' },
+      { id: 7, display_name: 'Emma Williams', title: 'Polars vs Pandas: a practical comparison', likes: 93, comments: 15, time: '3 days ago' },
+      { id: 5, display_name: 'Aymen Labidi', title: 'TypeScript\'s type system is secretly a language', likes: 85, comments: 12, time: '2 days ago' },
+    ],
+  };
+}
+
+export class PageExplore extends LitElement {
+  static properties = { loaderData: { type: Object } };
+  loaderData: any = {};
+
+  static styles = css`
+    :host { display: block; }
+    .card { background: var(--bg); border-radius: 6px; border: 1px solid var(--border); padding: 20px; margin-bottom: 12px; }
+    h2 { font-size: 20px; font-weight: 700; margin: 0 0 16px; }
+
+    .tags-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
+    .tag-card { border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px; cursor: pointer; transition: all 0.15s; }
+    .tag-card:hover { border-color: #d0d0d0; box-shadow: 0 2px 4px rgba(0,0,0,0.04); }
+    .tag-top { width: 100%; height: 6px; border-radius: 3px; margin-bottom: 8px; }
+    .tag-name { font-size: 16px; font-weight: 600; }
+    .tag-count { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
+
+    .top-post { padding: 10px 0; border-bottom: 1px solid var(--border-light); }
+    .top-post:last-child { border-bottom: none; }
+    .top-title { font-size: 15px; font-weight: 600; }
+    .top-title a { color: var(--text); text-decoration: none; }
+    .top-title a:hover { color: var(--accent); }
+    .top-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
+  `;
+
+  render() {
+    const { tags, topPosts } = this.loaderData;
+    return html`
+      <div class="card">
+        <h2>Popular Tags</h2>
+        <div class="tags-grid">
+          ${(tags || []).map((t: any) => html`
+            <div class="tag-card">
+              <div class="tag-top" style="background:${t.color}"></div>
+              <div class="tag-name">#${t.name}</div>
+              <div class="tag-count">${t.count.toLocaleString()} posts published</div>
+            </div>
+          `)}
+        </div>
+      </div>
+      <div class="card">
+        <h2>Top Posts This Week</h2>
+        ${(topPosts || []).map((p: any) => html`
+          <div class="top-post">
+            <div class="top-title"><a href="/post/${p.id}">${p.title}</a></div>
+            <div class="top-meta">${p.display_name} · ${p.likes} reactions · ${p.comments} comments · ${p.time}</div>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+}