v3.4.0

Author: paoloronco

README.md

@@ -2,7 +2,7 @@
 
 ### Your personal links hub
 
-[![Version](https://img.shields.io/badge/version-3.3.1-blue.svg)](https://github.com/paoloronco/Lynx)
+[![Version](https://img.shields.io/badge/version-3.4.0-blue.svg)](https://github.com/paoloronco/Lynx)
 
 **Lynx** is an open-source, self-hosted link manager that helps you gather all your digital touchpoints in a single page, with secure authentication and a fully customizable design.
 
@@ -11,11 +11,11 @@
 # 📑 Table of Contents  
 
 1. [Lynx](#lynx)  
-   - [🧪 Demo](#-demo)  
+   - [🎥 Video](#-video)  
+   - [🧪 Demo](#-demo) 
    - [✨ Features](#-features)  
    - [🔒 Security Features](#-security-features)  
    - [🛠 Tech Stack](#-tech-stack)   
-   - [🎥 Video](#-video)  
 2. [🚀 Quick Start](#-quick-start)  
    - [1. Clone, Install & Run](#1-clone-install--run)  
    - [2. 🚀 Deploy on Railway](#2--deploy-on-railway)  
@@ -25,6 +25,12 @@
 5. [👨‍💻 Developed With](#-developed-with)  
 6. [📜 License](#-license)  
 
+---
+## 🎥 Video
+
+#### Lynx Demo
+[![Watch the demo](./docs/demo.gif)](https://app.storylane.io/share/tjpm3tey6ven)
+
 ---
 
 ## 🧪 Demo
@@ -37,6 +43,7 @@
 
 ⚠️ The database resets automatically every 15 minutes.
 
+---
 
 ## ✨ Features
 
@@ -68,18 +75,11 @@
 
 ---
 
-## 🎥 Video
-
-#### Lynx Demo
-[![Watch the demo](./docs/demo.gif)](https://app.storylane.io/share/tjpm3tey6ven)
-
----
-
 ## 🚀 Quick Start
 
 Credentials:
   User: `admin`
-Password: `ChangeMe123!`
+  Password: `ChangeMe123!`
 
 ### 1. Clone, Install & Run
 
@@ -95,8 +95,8 @@ Password: `ChangeMe123!`
     npm run start
   ```
 
-<p> Public → http://localhost:5173
-<p> Admin → http://localhost:5173/admin
+<p> Public → http://localhost:3001
+<p> Admin → http://localhost:3001/admin
 
 ### 2. 🚀 Deploy on Railway
 
@@ -117,7 +117,7 @@ You can deploy **Lynx** on [Railway](https://railway.com) in a few steps:
 
 ### 3. 🚀 Other alternatives to deploy it:
 
-- [Render] (https://render.com/)
+- [Render](https://render.com/)
 - [DigitalOcean App Platform](https://www.digitalocean.com/products/app-platform)  
 - [Fly.io (Docker)](https://fly.io/docs/)  
 - [Heroku (Container)](https://devcenter.heroku.com/articles/container-registry-and-runtime)  
@@ -143,46 +143,38 @@ You can deploy **Lynx** on [Railway](https://railway.com) in a few steps:
 
 ## 📝 Changelog
 
-### v3.3.1
+### v3.4.0
 
 ### 🔧 Admin
-- Updated title to: “Lynx – Your personal links hub”
-- **Profile**
-  - Bio now supports **line breaks** (`whitespace-pre-line`)
+* Updated title to: “Lynx – Your personal links hub”
+* **Profile**
+ * Bio now supports **line breaks** (`whitespace-pre-line`)
   - Empty bio is automatically hidden (no blank space left)
   - Social links are hidden when empty
   - Profile picture now displays correctly
-- **Links**
+* **Links**
   - Consistent text color applied across title, description, and URL
   - Improved Text Card rendering: Link name on the first line, URL on the second line (with horizontal scroll for long URLs)
   - Added support for image/emoji next to links
+  - Added ability to insert either: 
+    * **Text Card** → full card with only text, entire card clickable via a single link
+    * **Bulleted List** → list with a title and multiple links underneath
   - Option to export/import links as JSON
   - Bug fixes in rendering icons, removing cards, and updating links
   - Fixed bugs with icons, card removal, and link updates
   - Extended customization: choose font, size, and alignment for links
-- **Theme**
+* **Theme**
   - Removed duplicate “Content” tab (was redundant with name + bio)
   - Partially removed Typography tab → now integrated into Links and Profile sections for better UX
   - Export/Import now properly saves and restores themes
-- **UI**
+* **UI**
   - Updated footer to:
     `Powered by Lynx | Lynx - Your personal links hub`
 
-
-### 🚀 Demo
-- Demo is fully functional, but **password change is disabled**
-
-
 ---
 ## 📌 To-Do / Next Steps
 
 ### 🔧 Admin
-- **Links**
-  - Bug fix: links fonts personalization (font type, dimensions, alignment) 
-  - Bug fix: Ability to center text and customize its alignment within cards
-- **Themes**
-  - Further improvements to theme usability and customization
-  - Enhanced personalization options for layouts, colors, and styles
 - **Code**
   - Code cleaning & refactoring: removing unnecessary parts, obsolete code, and unused dependencies (e.g., leftover Supabase or Firebase integrations).
 

server/lynx.db-shm

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
-import { Plus, Link, Type, Upload, Download } from "lucide-react";
+import { Plus, Link, List, Type, Upload, Download } from "lucide-react";
 import { LinkCard, LinkData } from "./LinkCard";
 import { TextCard } from "./TextCard";
 import { useToast } from "@/components/ui/use-toast";
@@ -56,6 +56,21 @@ export const LinkManager = ({ links, onLinksUpdate }: LinkManagerProps) => {
     setIsDirty(true);
   };
 
+  // Create a bulleted list text card (clickable list items)
+  const addNewBulletedList = () => {
+    const newListCard: LinkData = {
+      id: Date.now().toString(),
+      title: "New list",
+      description: "",
+      url: "",
+      type: "text",
+      textItems: [],
+    };
+    const updated = [...workingLinks, newListCard];
+    setWorkingLinks(updated);
+    setIsDirty(true);
+  };
+
   const updateLink = (updatedLink: LinkData) => {
     const updatedLinks = workingLinks.map(link => 
       String(link.id) === String(updatedLink.id) ? updatedLink : link
@@ -215,9 +230,8 @@ export const LinkManager = ({ links, onLinksUpdate }: LinkManagerProps) => {
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h2 className="text-xl font-semibold text-foreground">Your Content</h2>
-        <div className="flex gap-2">
+      <div className="flex flex-col gap-2">
+  <div className="flex gap-2 justify-center flex-wrap">
           <Button 
             onClick={addNewLink}
             variant="gradient"
@@ -226,14 +240,24 @@ export const LinkManager = ({ links, onLinksUpdate }: LinkManagerProps) => {
             <Link className="w-4 h-4" />
             Add Link
           </Button>
+          <Button 
+            onClick={addNewBulletedList}
+            variant="outline"
+            className="gap-2"
+          >
+            <List className="w-4 h-4" />
+            Add bulled list
+          </Button>
           <Button 
             onClick={addNewTextCard}
             variant="outline"
             className="gap-2"
           >
             <Type className="w-4 h-4" />
-            Add Text
+            Add Text Card
           </Button>
+        </div>
+  <div className="flex gap-2 justify-center flex-wrap">
           <Button onClick={handleSave} variant="default" className="gap-2" disabled={!isDirty || busy}>
             Save
           </Button>
@@ -261,9 +285,13 @@ export const LinkManager = ({ links, onLinksUpdate }: LinkManagerProps) => {
                   <Link className="w-4 h-4 mr-2" />
                   Add Link
                 </Button>
+                <Button onClick={addNewBulletedList} variant="outline">
+                  <List className="w-4 h-4 mr-2" />
+                  Add bulled list
+                </Button>
                 <Button onClick={addNewTextCard} variant="outline">
                   <Type className="w-4 h-4 mr-2" />
-                  Add Text
+                  Add Text Card
                 </Button>
               </div>
             </div>

server/lynx.db-wal

@@ -106,10 +106,10 @@ export const PublicTextCard = ({ link }: PublicTextCardProps) => {
             <ul className="text-sm leading-relaxed space-y-2 mb-3" style={link.textColor ? { color: link.textColor } : undefined}>
               {link.textItems.map((item, index) => (
                 <li key={index} className="flex">
-                  <span className="mr-2">•</span>
+                  <span className="mr-2" style={{ color: item.textColor || link.textColor }}>•</span>
                   <div className="flex-1 min-w-0">
                     {/* Label on its own line */}
-                    <div>{item.text}</div>
+                    <div style={{ color: item.textColor || link.textColor, fontSize: item.fontSize || undefined, fontFamily: item.fontFamily || link.descriptionFontFamily || undefined }}>{item.text}</div>
                     {/* URL on second indented line without wrapping */}
                     {item.url && (
                       <button
@@ -119,6 +119,7 @@ export const PublicTextCard = ({ link }: PublicTextCardProps) => {
                         }}
                         className="ml-6 block whitespace-nowrap overflow-x-auto hover:underline hover:text-primary transition-colors text-left"
                         title={item.url}
+                        style={{ color: item.textColor || link.textColor }}
                       >
                         {item.url}
                       </button>