12 |
13 | **Table of Contents**
14 |
15 |
16 | - [Usage](#usage)
17 | - [Quick Start](#quick-start)
18 | - [Manual Setup](#manual-setup)
19 | - [Getting Started](#getting-started)
20 | - [Images](#images)
21 | - [Update Bio](#update-bio)
22 | - [Add/Update](#update-bio)
23 | - [Enable/Disable](#update-bio)
24 | - [Featured Banner](#update-bio)
25 | - [Update Links](#update-links)
26 | - [Enable/Disable](#update-links)
27 | - [Add/Update](#update-links)
28 | - [Frontend](#frontend)
29 | - [SEO](#seo)
30 | - [Google Analytics](#google-analytics)
31 | - [Custom Domain](#custom-domain)
32 | - [Favicon](#favicon)
33 | - [Contributors](#contributors)
34 |
35 |
36 | ## Usage
37 | `nxt-lnk` template used to create your custom bio link and self-host on Vercel or Netlify using your own domain. Need little understanding of code :) ☕
38 |
39 | Usually, you don't need to worry a lot about coding if you're just updating information in `BioData.js` and `LinkData.js`. To deep dive know more [Next.js](https://nextjs.org/docs) and [React](https://reactjs.org/docs/getting-started.html) official documentaion.
40 |
41 | For customization used [styled components](https://styled-components.com/). If you want to customize styling you can [learn more here](https://styled-components.com/docs).
42 |
43 | **Template auto support dark-mode depending on system cofig.**
44 |
45 | ## Quick Start
46 | [](https://vercel.com/import/git?s=https://github.com/realvjy/nxt-lnk) [](https://app.netlify.com/start/deploy?repository=https://github.com/realvjy/nxt-lnk)
47 |
48 |
49 | ## Manual Setup
50 | Run the following command to create a new project with this template:
51 | ```bash
52 | yarn create next-app your-app-name -e https://github.com/realvjy/nxt-lnk
53 | # or
54 | npx create-next-app your-app-name -e https://github.com/realvjy/nxt-lnk
55 | ```
56 |
57 | ## Getting Started
58 |
59 | Use any editor to work on editing. I use [vscode](https://code.visualstudio.com/)
60 |
61 | First, run the development server:
62 | ```bash
63 | npm run dev
64 | # or
65 | yarn dev
66 | ```
67 |
68 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
69 |
70 | **Important files to edit or update info**
71 | `data/BioData.js` All basic info update here
72 | `data/LinksData.js` Contain all the links
73 | `Components/WebLinks.js` UI and stylesheet
74 | `Components/icons/index.js` Contain all SVG icon compo
75 |
76 | You can start editing the page by modifying `data/BioData.js` and `data/LinksData.js`. The page auto-updates as you edit the file.
77 |
78 |
79 |
80 | ## Images
81 | All images stored inside `public` folder of the project.
82 |
83 | ## Update Bio
84 | **Example from** `BioData.js` :
85 | ```jsx
86 | const bioData = [
87 | {
88 | name: 'vijay verma',
89 | username: '@realvjy',
90 | url: 'https://vjy.me',
91 | titleImg: true,
92 | avatar: '/avatar.png',
93 | nftAvatar: true,
94 | description: 'A short description/bio about you goes here',
95 | subdesc: 'This is secondary description. If you do not need, you can remove it',
96 | newProductUrl: 'https://vjy.me/lnk',
97 | newProduct: true,
98 | },
99 | ];
100 |
101 | export default bioData;
102 | ```
103 | **Avatar**
104 | Just replace `avatar.png`. 200x200px will be good.
105 |
106 | **Hex/NFT avatar view**
107 | `nftAvatar: true` enable hex shape on avatar image.
108 | `nftAvatar: false` made it in oval shape.
109 |
110 | **Title**
111 | By default `titleImg: true` and it look for `title.svg`. Replace svg with logo **logo**. Make sure to use `title.svg ` name.
112 |
113 | **Featured banner**
114 | `newProductUrl` and `newProduct` used for getting featured banner. You can replace the image `newproduct.png` with any design you like.
115 |
116 | `newProduct: true` show banner. Default is `true` make it false to hide.
117 |
118 |
119 | ## Update Links
120 | **Example from** `LinksData.js` :
121 | ```jsx
122 | const webLinks = [
123 | // All social profile
124 | {
125 | title: 'Twitter',
126 | url: 'https://twitter.com/realvjy',
127 | type: 'social',
128 | icon: '/twitter.svg',
129 | on: true
130 | },
131 | ...
132 | ...
133 |
134 | {
135 | title: 'Instagram',
136 | url: 'https://instagram.com/realvjy',
137 | type: 'social',
138 | icon: '/insta.svg',
139 | on: true
140 | }
141 | ];
142 | export default webLinks;
143 | ```
144 | **Enable/Disable Social Media**
145 | Find `type: social` and change `on:true|false`
146 |
147 | | Title | on (default) |
148 | | --------- | -------- |
149 | | `Twitter` | `true` |
150 | | `Instagram` | `true` |
151 | | `Dribbble` | `false` |
152 | | `Medium` | `false` |
153 | | `Github` | `true` |
154 | | `Youtube` | `false` |
155 | | `Behance` | `true` |
156 | | `Figma` | `true` |
157 | | `Linkedin` | `false` |
158 | | `Mastodon` | `false` |
159 | | `Hive Social` | `false` |
160 | | `Post.news` | `false` |
161 |
162 | Setting `on: true` show the social icon.
163 | The social media icons are arranged in a single row at the top of the page below description. If you want to use as list, chagne type to `type: 'other'`
164 |
165 | **Add new Social Media link**
166 | create a new block by copying this
167 | ```jsx
168 | {
169 | title: 'Social Name',
170 | url: 'https://link.com/whateverurl',
171 | type: 'social',
172 | icon: '/newiconname.svg',
173 | on: true
174 | }
175 | ```
176 | Update all info and make sure to add a `newiconname.svg` file in [public](#images) folder.
177 | Then you have to add new section to frontend `components/WebLinks.js`
178 |
179 | ## Frontend
180 | All frontend customization done inside `components/WebLinks.js`. If you wante to update and add new section just look this file and update according to your need.
181 |
182 | **Update section**
183 |
184 | Look for Section codes. Like if you want to change `install` type to `featured` Update the `type: 'featured'` in `LinkData.js` then update all `install` related code in `WebLinks.js` to `featured`
185 |
186 | ```js
187 | // Collect all links filter by type - social, project, nft and other etc=
188 | // get data for install section
189 | const install = allLinks.filter((el) => {
190 | return el.type === "install" && el.on
191 | });
192 |
193 | ...
194 | ...
195 |
196 | {/* Featured Section */ }
197 | 
224 |
225 |
226 | ## Custom Domain
227 | By default vercel give you a subdomain with your project name like - [nxtlnk.vercel.app](https:nxtlnk.vercel.app). But you can add own domain.
228 |
229 | Vercel/Netlify give you option to add any domain to the deployed project like [vjy.me/lnk](https://vjy.me/lnk) or [nxtlnk.xyz](https://nxtlnk.xyz). All you have to do is follow official [Vercel documentaion](https://vercel.com/docs/concepts/projects/domains/add-a-domain) or [Netlify Documentaion](https://www.netlify.com/blog/2021/12/20/how-to-add-custom-domains-to-netlify-sites/)
230 |
231 | ## Favicon
232 | Create a `favicon.ico` file and place inside `public` folder. I use [favicon.io](https://favicon.io/favicon-converter/)
233 |
234 | ## Contributors
235 | Created by [realvjy](https://twitter.com/realvjy). You are always welcome to share your feedback on twitter or any social media platform.
236 |
237 | If you want to contribute. Just create a pull request.
238 |
--------------------------------------------------------------------------------
/components/Layout.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 | import ReactDOM from 'react-dom';
3 |
4 |
5 |
6 | export default function Layout({ children }) {
7 | return (
8 | 
179 |
180 |