Discussion on: Hacktoberfest 2021 — Who's Looking for Contributors?

[Rajitha Gunathilake]

Hi everyone,

I am excited to announce that Linkin will be participating in 2021 Hacktoberfest 🎃.

LinkIn is a self-hosted link tree application that you can customize to create your own link tree page.

RizkyRajitha / linkin

Linkin is a customizable self hosted link tree platform.

Linkin ·

Linkin is a customizable self-hosted link tree application.

100% Free and Open Source 💯

Self Hosted, you own your data 💽

Customize your link tree with few clicks with a feature-rich dashboard 🤖

SEO friendly design built using Next js 🕸️

Supports 3 one-click deploy hosting providers 🚀

View Demo
Demo Admin http://linkindemo.vercel.app/admin

• Demo username = admin
• Demo password = linkin123

Deploy with Vercel

Deploy with Heroku

Deploy with Railway

Getting started

• Deploy in Vercel
  • set environment variables
    • DATABASE_URL - Postgres database url
    • HASHSALT - random secret key
    • NODE_ENV - set NODE_ENV to production
  • after successfully deploying visit youdomain/admin to view admin login
  • use default login credentials
    • username = admin
    • password = linkin123
  • after a successfull login you will be able to see above admin dashboard.

• Deploy in Heroku
  • set environment variables
    • DATABASE_URL - Postgres database url
    • HASHSALT - random secret key
  • after successfully deploying visit youdomain/admin to…

View on GitHub

Linkin is built using

1. Next.js
2. Postgres as the database.
3. Prisma as the ORM.
4. Bootstrap 5 for UI components.

following issues are open for contribution, also feel free to try out new things add issues regarding linkin.

Editable avatar border colors #31

RizkyRajitha posted on Sep 17, 2021

currently avatar border color is hard coded to #fff color .

This has to be dynamic, so that the users can customize the color .

The new form input for color should be under the Colors tab in the dashboard

rough workflow

1. add new form Input with color type (use bootstrap), github.com/RizkyRajitha/linkin/blo...

and register it with the react-form-hook register method passed avatarBorderColor . destructure avatarBorderColor variable . (refer the existing implementation) github.com/RizkyRajitha/linkin/blo...

2. add new column to the pagedata relation in prisma with name avatarBorderColor and type String? @db.VarChargithub.com/RizkyRajitha/linkin/blo... .

3. migrate the modified prisma schema prisma doc . (when migration dev you will need permission to create databases , if such problem occurs use docker postgres instance ).

4. destructure the new avatarBorderColor variable and the pass it to the styles
   github.com/RizkyRajitha/linkin/blo...

5. test whether everything works.

View on GitHub

Editable height and width in link cards #41

RizkyRajitha posted on Sep 29, 2021

currently link tree max width is hard corded to 320px

github.com/RizkyRajitha/linkin/blo...

it should be dynamically changed using the dashboard.

The new form input for width should be under the General tab in the dashboard

tentative workflow

1. add new form Input with number type github.com/RizkyRajitha/linkin/blo...

and register it with the react-form-hook register method passed pageWidth . (refer the existing implementation)

2. add new column to the pagedata relation in prisma with name pageWidth and type String? @db.VarChar

github.com/RizkyRajitha/linkin/blo... .

3. migrate the modified prisma schema prisma doc . (when migration dev you will need permission to create databases , if such problem occurs use docker postgres instance ).

4. destructure the new pageWidth variable and the pass it to the styles
   github.com/RizkyRajitha/linkin/blo...

5. test whether everything works.

View on GitHub

Cheers 🥂

Happy Hacktoberfest 🎃