Star this project if you enjoy using it ⭐️
This open source project is an alternative to the popular Linktree. Quicklinks is a one-stop website template for people to have quick access to your other socials and important links. Made with Nextjs and containerized with Docker. Google analytics integration is available.
Option 1: Clone this repository using the command below:
gh repo clone ShauryaS/quicklinks
Option 2: Download this repository as a zip file.
Option 3: Fork this repository and either clone the forked repository or download the forked repository as a zip.
Once you get the code on your machine, execute git checkout quicklinks-next to ensure you are viewing the Quicklinks code written in Nextjs.
-
Open the Terminal and navigate to the project's root directory.
-
Execute command:
npm run devto view the Quicklinks page in your browser at localhost:3000.
To run the dev env using docker, ensure Docker Desktop is running on your dev machine and execute command: npm run docker-dev. View the Quicklinks page in your browser at localhost:3000.
Example terminal view for running dev Docker container:
npm run docker-dev
The Docker dev env has fast refresh enabled.
To shut down the Docker dev container, execute command: npm run docker-stop.
Example terminal view for stopping dev Docker container:
npm run docker-stop
-
Open the Terminal and navigate to the project's root directory.
-
Build the code by running command:
npm run build. -
Execute the code by running command:
npm startto view the Quicklinks page in your browser at localhost:3000.
To run the dev env using docker, ensure Docker Desktop is running on your dev machine and execute command: npm run docker-prod. View the Quicklinks page in your browser at localhost:3000.
Example terminal view for running prod Docker container:
npm run docker-prod
The Docker prod env DOES NOT have fast refresh enabled.
To shut down the Docker prod container, execute command: npm run docker-stop.
Example terminal view for stopping dev Docker container:
npm run docker-stop
To customize your Quicklinks page, edit the file quicklinksinfo.json. Use the current file as a template/guidline to customize your own Quicklinks page.
{
"name": "Your Name",
"image": "/images/default-profile.png",
"personal_site": "",
"quicklinks_data": [
{
"name": "LinkedIn",
"link": "https://www.linkedin.com/",
"image": "https://cdn.jsdelivr.net/npm/simple-icons@v6/icons/linkedin.svg"
},
{
"name": "Instagram",
"link": "https://www.instagram.com/",
"image": "https://cdn.jsdelivr.net/npm/simple-icons@v6/icons/instagram.svg"
},
{
"name": "Github",
"link": "https://github.com/",
"image": "/icons/github.svg"
},
{
"name": "Medium",
"link": "https://medium.com/",
"image": "/icons/medium.svg"
}
],
"theme": "dark"
}
"name": {your name},
"image": /images/{your image name},
"personal_site": {url to personal/portfolio site or any website},
Fill the value of the name key with your name, the value of the image key with the path pointing to your image, and the value of personal_site key with the url to a personal/portfolio website or any website of your choice. Place all images at the images folder.
"quicklinks_data": [
{
"name": {link name},
"link": {link url},
"image": {path or url to link logo/icon}
},
...
]
Quicklinks data is an array of objects representing a link. Fill the value of the name key with the name of the link, the value of the link key with the url of the link, and the value of the image key with the path or url pointing to the icon for the link.
All icons for each link must be an SVG format. Place all SVG icons for each link at the icons folder.
"theme": {theme name}
Fill the value of the theme key in the json with the name of the theme that should be applied to Quicklinks. The list of themes can be found in themes.jsx. To determine the string value referring to the theme, check the selectTheme function at themeselector.jsx.
-
Add new themes at themes.jsx and use previous themes as a template to create/add your own.
-
After adding the theme, update the selectTheme function in themeselector.jsx to return the new theme depending on a specific string value.
Linking Quicklinks to Google Analytics is pretty straightforward. Once you create a GA4 Data Stream on the Google Analytics website, find the Measurement ID. There are two ways to link to Google Analytics depending on whether a Docker container is used.
Replace all instances of ${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} in the code with the GA4 Measurement ID.
In Dockerfile and Dockerfile.dev, replace instances of G-XXXXXXXXXX with the GA4 Measurement ID.
Coming soon.
There are two main ways of contributing to this project. (Hopefully you have starred the project by now ⭐️)
BECOME A CONTRIBUTOR
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Code up your feature or contribution.
- Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to your Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
You can read more details about adding a feature in our CONTRIBUTING GUIDELINES.
RAISE AN ISSUE OR REQUEST A FEATURE
- Raise an issue by opening a bug ticket.
- Request a new feature through a feature request ticket.
Distributed under the Apache License 2.0. See LICENSE for more information.