⬡ LinkVault

A minimal, dark-themed link dashboard that pulls its content straight from a Google Sheet. No backend, no database — just one HTML file and a spreadsheet.

Group your links into categories in a sheet, publish it, drop the CSV link into the code, and you've got a self-updating link hub. Edit the sheet anytime and the page reflects it on next load.

---

✨ Features

• Groups links into cards by category
• Auto-fetches favicons for each link
• Responsive grid (3 → 2 → 1 columns)
• Zero build step — just open the HTML file or host it anywhere
• Data lives in Google Sheets, so anyone on your team can update it without touching code

---

🗂️ 1. Set up your Google Sheet

Create a Google Sheet with this row format:

Column A	Column B	Column C	...
Group Name	URL | Label	URL | Label	...

Example:

Dev Tools	https://github.com | GitHub	https://vercel.com | Vercel
Design	https://figma.com | Figma	https://coolors.co | Coolors

• Column A of each row = the group/category name (e.g. "Dev Tools", "Design", "Reading List")
• Every other column in that row = one link, formatted as URL | Label
  • Example: https://github.com | GitHub
  • The label is what shows up as clickable text; the URL is where it goes
• Add as many rows (groups) and columns (links per group) as you want

💡 Tip: If a label or URL contains a comma, wrap that whole cell in quotes — Google Sheets does this automatically when you type a comma into a cell.

---

🌐 2. Publish the sheet to the web

This is the key step that lets your HTML page fetch the data as CSV.

1. Open your Google Sheet
2. Go to File → Share → Publish to web
3. In the dialog:
   • Under the first dropdown, select the specific sheet/tab you want to publish (not "Entire Document" unless you only have one tab)
   • In the second dropdown, choose Comma-separated values (.csv)
4. Click Publish, then confirm by clicking OK on the warning popup
5. Copy the generated URL — it will look something like:

   https://docs.google.com/spreadsheets/d/e/2PACX-1vS.../pub?output=csv
   

⚠️ Important: "Publish to web" makes this specific sheet's data publicly viewable to anyone with the link — it does not require a Google login to view. Only publish sheets that don't contain private or sensitive information.

---

🔧 3. Wire up the URL in the code

Open the HTML file and find this line near the top of the <script> section:

const CSV_URL = '//your link of the google excel link';

Replace it with the CSV URL you copied:

const CSV_URL = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vS.../pub?output=csv';

Save the file.

---

🚀 4. Run it

• Locally: just double-click the HTML file to open it in your browser
• Hosted: drop it into any static host — GitHub Pages, Netlify, Vercel, or a plain web server all work fine since it's a single self-contained file

---

🔄 Updating your links later

Just edit the Google Sheet directly — add a row for a new group, or add a new URL | Label cell to an existing row. Since the sheet is published live, the page will pick up changes the next time it's loaded (no code changes needed).

---

🎨 Customizing

• Colors: edit the CSS variables at the top of the <style> block (--accent, --accent2, --bg, etc.)
• Group accent colors: edit the ACCENTS array in the script to change the cycling dot colors per group
• Fonts: currently uses Syne (headings/UI) and Space Mono (monospace labels) from Google Fonts

---

📋 Notes

• If the page shows a "Could not load sheet" error, double-check that:
  • The sheet is actually published (not just shared with specific people)
  • You selected CSV as the output format, not "Web page"
  • The CSV_URL in the code matches exactly what Google gave you
• Favicons are fetched via Google's public favicon service, so no extra setup is needed there

---

📄 License

Free to use, modify, and share.