Giter VIP home page Giter VIP logo

linkin's Introduction

Linkin logo

Linkin Β· DeepScan grade codecov license Github Actions

Linkin is a customizable self-hosted link tree application.

Free and Open Source πŸ’―

Self Hosted, you own your data πŸ’½

Customize your link tree with few clicks using a feature-rich dashboard πŸ€–

SEO friendly design built using Next js πŸ•ΈοΈ

Supports one-click deploy using multiple cloud providers πŸš€


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

  • Demo username = admin
  • Demo password = linkin123

linkin gif


Deploy with Vercel

Deploy with Vercel

Deploy with Heroku

Deploy

Deploy with Railway

Deploy on Railway

Screenshot_2021-05-22 LinkIn's Link tree Page

Screenshot_2021-05-22 Linkin Dashboard

Screenshot_2021-05-22 Linkin Dashboard

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 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 Railway
    • set environment variables
      • HASHSALT - random secret key
      • PORT - 3000
      • RAILWAY - Set to 1 to run migrations and seeding in docker build stage . set 0 to avoid migrations and seeding in docker build stage
      • DATABASE_URL - Postgres database url . use this variable if you are not using railway postgres plugin
    • 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.

Running with docker

  • build the docker image using docker build . -t linkin command
  • Run the docker image docker run -d -p 3000:3000 -e DATABASE_URL='postgres://linkin:123@localhost:5432/linkin' -e HASHSALT='123' linkin. make sure you specified DATABASE_URL and HASHSALT environment varaibles.

Database connection

  • if the postgres database is behind pgbounce use pgbouncer=true parameter in DATABASE_URL ex - postgres://xx:xxx@xxxx:5432/xxxx?pgbouncer=true

Developing locally

Requirements

  • Node.js 14.x or newer
  • Postgresql

Clone and install dependencies

git clone https://github.com/RizkyRajitha/linkin.git
cd linkin
npm i

Setup local environmrnt variables in .env

example .env file

DATABASE_URL=postgres://linkin:123@localhost:5432/linkin
HASHSALT=123

Database migration

create database relations with prisma migration

you must have Postgres database setup locally

npx prisma migrate dev

Database Seeding

Addign Initial data to the database to get you started

npm run seed

Run

npm run dev

Build with

Currently supported hosting in

Community

Join our discord community for questions and updates

https://discord.gg/Jsmc5Dm9wg

linkin's People

Contributors

brownboycodes avatar davidzcode avatar dgiulian avatar dubisdev avatar rizkyrajitha avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

linkin's Issues

Add support to mailto links

Currently only links with structure "http: // ....." are supported.

HTML also allows adding "mailto: email address" links (like this), to link to email forms easily. It would be interesting to add support for them.

I can do it πŸš€

show active form based on url query parameter

update the current viewing form form in the url query parameter tab

ex - http://localhost:3000/dashboard?tab=genaralForm should display the genaralForm

query parameter can be obtained using next router https://nextjs.org/docs/api-reference/next/router

const router = useRouter();

write an useEffect function to extract the query parameter from next router and update the active from using setactiveForm method

const [activeForm, setactiveForm] = useState("genaralForm");

push the active path to the next router for all the forms

ex - router.push("/dashboard?tab=genaralForm"); in bellow click handlers

setactiveForm("genaralForm");

setactiveForm("footerForm");

setactiveForm("colorForm");

setactiveForm("fontForm");

setactiveForm("linksForm");

Editable linktree width

currently link tree max width is hard corded to 320px

max-width: 320px;

current scenario

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
    </div>{" "}

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

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

model pagedata {
.

  1. 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 ).

  2. destructure the new pageWidth variable and the pass it to the styles

    max-width: 320px;

  3. test whether everything works.

Editable avatar border colors

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),

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

footerTextColor: data.footerTextColor,

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

    model pagedata {
    .

  2. 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 ).

  3. destructure the new avatarBorderColor variable and the pass it to the styles

    background: #fff;

  4. test whether everything works.

avatarborder

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.