Links - Your Personal Landing Page 🔗

A modern, minimalist landing page that serves as your digital business card. Inspired by Linktree, but enhanced with custom features and a sleek design. Perfect for creators, developers, and professionals who want to share their online presence elegantly.

Tech Stack

• Frontend: React + Vite (Typescript)
• Styling: Tailwind CSS for Style
• Components: DaisyUI for Style components
• Backend: Supabase for analytics (page views and likes)
• Comments: Giscus (powered by GitHub Discussions)
• CI/CD: GitHub Actions for automated deployment
• Versioning: Semantic Release for automated detection versioning
• Hosting: Vercel

Getting Started

Prerequisites

• Node.js
• Yarn package manager
• Supabase account (for analytics features)

Development Setup

1. Clone the repository:

   git clone https://github.com/UmmItC/links.git
   cd links

2. Install dependencies:

   yarn install

3. Setup Supabase (for analytics):

   • Create a new project on Supabase
   • Create the required tables for analytics:
   Click to expand SQL setup code

   See example.env.sql for the complete database setup code needed for analytics features.

   This SQL file includes:

   • Table creation for page views
   • RPC function for safely incrementing view counts
   • Row Level Security (RLS) policies configuration
   • Optional commented code for likes functionality
   • Create a .env file in the project root with your Supabase credentials:

   ❯ cp -v .env.example .env
   
   VITE_SUPABASE_URL=your-supabase-project-url
   VITE_SUPABASE_ANON_KEY=your-supabase-anon-key

4. Setup Giscus (for comments):

   • Ensure GitHub Discussions is enabled for your repository.
   • Create a new discussion category in your repository settings (e.g., "General" or "Announcements" – whichever you are using in your Giscus component).
   • Update the repoId and categoryId in src/components/Giscus.tsx with the values corresponding to your repository and chosen category. You can get these from the Giscus website.

5. Start the development server:

   yarn run dev

6. View your site at http://localhost:5173

Production Build

Create a production-ready build:

yarn run build

Preview the production build:

yarn run preview

The static files will be generated in the dist/ directory.

Deployment Options

Vercel

This project is configured for deployment on Vercel. To deploy:

1. Push your code to GitHub
2. Import your repository on Vercel
3. Build environment, leave it as is and allow Vercel to choose automatically.
4. Add your environment variables in the Vercel project settings:
   • VITE_SUPABASE_URL: Your Supabase project URL
   • VITE_SUPABASE_ANON_KEY: Your Supabase anonymous key

Vercel will automatically:

• Build your project
• Generate the commit hash for version tracking
• Deploy to production

Environment Variables

For Vercel deployment, you need to add your Supabase credentials in the Vercel project settings:

1. Go to your Vercel project > Settings > Environment Variables
2. Add the following environment variables:
   • VITE_SUPABASE_URL: Your Supabase project URL
   • VITE_SUPABASE_ANON_KEY: Your Supabase anonymous key

Development Guidelines

Commit Convention

We follow the Conventional Commits specification:

feat: add new feature
fix: resolve an issue
docs: update documentation
style: formatting changes
refactor: code restructuring
test: add/update tests
chore: maintenance tasks

Branch Strategy

• master: Production-ready code (do not use this branch, since it's the Production branch)
• dev: Development and integration
• Feature branches: feature/your-feature-name

License

This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details.

Contributing

There are many ways to contribute, such as recommending features, reporting bugs, fixing documentation typos, and more.

If you would like to open a Pull Request (or Merge Request), please review this document first before making any commits or fixes: CONTRIBUTING.md.

Thank you for your interest in contributing!

Image issue

One thing that concerns me is that I am using a background image as the wallpaper for the website, but the file is too large. To address this, we provide a script to convert any image file into WebP format. The tool uses the cwebp command-line interface to run.

cd public
./img2webp.sh --input <name_of_image_file> --output <name_of_image_file.webp>