This project is built upon LittleLink. It uses assets from LittleLink and scraps out all unused CSS and SVGs thus reducing the bundle size. Customizing Links is as easy as editing src/data.json file.
Customizing LittleLink involves a lot of manual work. This project was developed to easily customize LittleLink without modifying its source.
$ git clone --recurse-submodules https://github.com/venkivijay/Links
-
Edit
src/data.json
file as per your need.Explanation
- name
- Rendered as
<h1>
below avatar
- Rendered as
- description
- Rendered as
<p>
below name
- Rendered as
Should be array of link objects
- button
- This string is concatenated with
button-
and used as css class for buttons - If not provided,
button-default
css class will be used - Refer LittleLink css
src/assets/littlelink/css/brands.css
- This string is concatenated with
- icon
- This string should represent the svg icon name present under
src/assets/littlelink/icons
- It will be used to purge unused css, svg and to render svg icons in buttons.
- If not provided, icon will be ignored in button but displayText must be provided.
- This string should represent the svg icon name present under
- displayText
- Text to be displayed in button next to icon
- If not provided, capitalized icon value will be used
- url
- Hyperlink for button
- name
{
"bio": {
"name": "Your name",
"description": "Any text"
},
"links": [
{
"url": "https://venkivijay.com",
"displayText": "Portfolio"
},
{
"button": "github",
"icon": "github",
"url": "https://github.com/venkivijay"
}
]
}
This will initially run utils/generateSVGSprite.js
to generate SVG Sprites as vue component and stores it under src/components/IconSprite.vue
. After this dev server will be started.
If icon value in
src/data.json
has been updated, then either runnpm run sprite
or restart dev server to regenerate IconSprite.vue
$ npm run dev
$ npm run build
$ npm run serve
Generated dist/
is static and can be deployed anywhere. As of now, deployment is handled using Netlify.
LittleLink repo is a submodule to this project and lives under src/assets/littlelink
. If you need to pull in latest changes from LittleLink repo, then run
$ git submodule update --remote --merge
LittleLink is a lightweight DIY alternative to services like Linktree and many.link. LittleLink was built using Skeleton, a dead simple, responsive boilerplate—we just stripped out some additional code you wouldn't need and added in branded styles for popular services. 😊
LittleLink has more than 20 company button styles you can use and we'll be throwing more in soon. You'll also find a light and dark theme ready to go. Not a fan of the colors? Update skeleton-light.css
or skeleton-dark.css
to the HEX values of your choosing.
Using Skeleton let us build something that loads quickly & doesn't have any of the unnecessary bloat you would get from using a large framework for a page that requires nothing more than simplicity. LittleLink scored a 99/100 in performance when tested with Google Lighthouse.