{"id":15016548,"url":"https://github.com/shanerobinson/linkist","last_synced_at":"2025-04-12T09:30:42.343Z","repository":{"id":40811353,"uuid":"282351340","full_name":"shanerobinson/linkist","owner":"shanerobinson","description":"Simple, highly configurable alternative to Linktr.ee and LinkIn.bio built with 11ty and TailwindCSS","archived":false,"fork":false,"pushed_at":"2024-09-12T19:30:16.000Z","size":2497,"stargazers_count":28,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-31T11:51:34.653Z","etag":null,"topics":["11ty","cssnano","eleventy","linked-list","linkinbio-alternative","links","linktree-alternative","postcss","purgecss","tailwindcss"],"latest_commit_sha":null,"homepage":"https://linkist.netlify.app","language":"Nunjucks","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shanerobinson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-25T01:57:21.000Z","updated_at":"2024-09-29T07:12:38.000Z","dependencies_parsed_at":"2024-06-22T23:26:16.892Z","dependency_job_id":null,"html_url":"https://github.com/shanerobinson/linkist","commit_stats":null,"previous_names":[],"tags_count":7,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shanerobinson%2Flinkist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shanerobinson%2Flinkist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shanerobinson%2Flinkist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shanerobinson%2Flinkist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shanerobinson","download_url":"https://codeload.github.com/shanerobinson/linkist/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223510333,"owners_count":17157306,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty","cssnano","eleventy","linked-list","linkinbio-alternative","links","linktree-alternative","postcss","purgecss","tailwindcss"],"created_at":"2024-09-24T19:49:03.764Z","updated_at":"2024-11-07T12:03:31.154Z","avatar_url":"https://github.com/shanerobinson.png","language":"Nunjucks","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Linkist\n\n### Updated to TailwindCSS v2.0.2\n\n---\n\nA simple, highly configurable alternative to [Linktr.ee](https://linktr.ee/) and [Linkin.bio](https://later.com/linkinbio/) using only [11ty](https://www.11ty.dev/) and [TailwindCSS](https://tailwindcss.com/).  \n_(no webpack, parcel, gulp, etc.)_\n\n\u003e _**NOTE:** This is my first publicly shared and promoted repo. I'm learning while doing and I'm providing the kind of instructions that would be helpful to me while I am/was learning! It's also a great exercise in thinking about the structure, instructions, usage, and how the repo works. I've actually made a LOT of changes to the app while documenting this README._\n\n[Jump down here for screenshots of the default install.](#iphone-screenshots)\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/1be8bfac-2689-4733-ac69-6f292b1bda46/deploy-status)](https://app.netlify.com/sites/linkist/deploys)\n\n![Lighthouse Performance](lighthouse/lighthouse_performance.svg) ![Lighthouse Accessibility](lighthouse/lighthouse_accessibility.svg) ![Lighthouse Best Practices](lighthouse/lighthouse_best-practices.svg) ![Lighthouse SEO](lighthouse/lighthouse_seo.svg)\n\n---\n\n## Table of Contents\n\n- [:boom: Features](#boom-features)\n  - [Live Demo!](#live-demo)\n- [:wrench: Install and Deploy](#wrench-install-and-deploy)\n  - [Standard Install](#standard-install)\n  - [Deploy to Netlify](#deploy-to-netlify)\n  - [Manage your content with Forestry.io](#manage-your-content-with-forestryio)\n- [:unlock: Site Settings](#unlock-site-settings)\n- [:link: Managing Links](#link-managing-links)\n- [:mega: Managing Social Icons](#mega-managing-social-icons)\n- [:small_blue_diamond: Customizing Colors](#small_blue_diamond-customizing-colors)\n  - [Default Colors](#default-colors)\n  - [Page level color overrides](#page-level-color-overrides)\n- [:bar_chart: Google Analytics or Fathom Stats](#bar_chart-google-analytics-or-fathom-stats)\n- [:page_with_curl: Adding Pages to the Nav Bar](#page_with_curl-adding-pages-to-the-nav-bar)\n- [:iphone: Screenshots](#iphone-screenshots)\n- [:page_facing_up: License](#page_facing_up-license)\n\n---\n\n## :boom: Features\n\n- Very simple and basic **11ty** and **TailwindCSS** setup\n- No Webpack, Snowpack, Parcel, Gulp, etc. to deal with\n- [FontAwesome](https://fontawesome.com/) SVG social icons\n  - Includes settings for Dribbble, Facebook, GitHub, Instagram, LinkedIn!, Pinterest, Twitter, YouTube, and Email\n- Uses [PurgeCSS](https://github.com/FullHuman/purgecss) and [CSSnano](https://cssnano.co/) resulting in a ~6kb minified CSS file, \u003c2kb gzipped\n- `src/_data/settings.json` :\n  - Manage your Name and META data\n  - Manage your Hero Image and Caption\n  - Manage your Social SVG links/icons\n  - Manage Color overrides for all colors, including SVGs\n- `src/_data/links.json` :\n  - Manage your link's URL and display text\n- One click deploy to [Netlify](https://www.netlify.com/)\n- Pre-configured for use at [Forestry.io](https://forestry.io/) _(if you want to manage Settings and Links in a browser)_\n\n### Live Demo!\n\n**[View the Live Demo of this repo.](https://linkist.netlify.app)**\n\n---\n\n## :wrench: Install and Deploy\n\nInstall is standard and easy if you're familiar with [Node.js](https://nodejs.org/).  \nIf you want to host for free on Netlify, follow the _**Deploy to Netlify**_ instructions below.\n\n### Standard Install\n\n_(assumes you understand and use the terminal to clone and install Node.js apps)_\n\n- Duplicate this repository by clicking \u003ckbd\u003eUse this template\u003c/kbd\u003e above\n- Clone the repository locally\n- Run `npm install` to install dependencies\n\n**Running `dev`, `test`, and `build`:**\n\n- Running `npm run dev` will run in parallel the following:\n  - Create the `dist` folder used for production.\n  - Process TailwindCSS via PostCSS and watch for changes.\n  - Fire up 11ty and use it to `--serve` the site in development mode.\n  - You'll need to open a browser and go to \u003chttp://localhost:8080\u003e to view the default site and it will automatically reload with any saved changes.\n  - **You should see the default app view [shown below](#iphone-screenshots)**\n  - To stop the live-server use \u003ckbd\u003eCONTROL c\u003c/kbd\u003e\n- Running `npm run test` will run the following sequentially:\n  - Fire up 11ty to process all files as needed.\n  - Process and build the `/dist/assets/css/tailwind.css` file in `NODE_ENV=production` mode to use PurgeCSS to remove unused CSS elements and CSSnano to minify the resulting CSS.\n  - Fire up [live-server](https://www.npmjs.com/package/live-server) and automatically open your browser to \u003chttp://127.0.0.1:8080/\u003e so you can click around to make sure everything will work when live on the hosting server.\n    - _DO NOT make changed while in `test` mode. They will not be automatically updated because neither 11ty nor PostCSS are watching for changes._\n  - To stop the live-server use \u003ckbd\u003eCONTROL c\u003c/kbd\u003e\n- Running `npm run build` will build the site in full **Production** mode as it will sit on the hosting server.\n\n### Deploy to Netlify\n\nTo automatically deploy this Template to [Netlify for free hosting](https://www.netlify.com/pricing/), simply click the \u003ckbd\u003eDeploy to netlify\u003c/kbd\u003e button below.\n\n\u003ca href=\"https://app.netlify.com/start/deploy?repository=https://github.com/shanerobinson/linkist\"\u003e\u003cimg src=\"https://www.netlify.com/img/deploy/button.svg\" alt=\"Deploy to Netlify\"\u003e\u003c/a\u003e\n\n- First you'll need a [free Netlify account](https://app.netlify.com/signup).\n- And, obviously, a [free GitHub account](https://github.com).\n- Clicking the button will copy this repo to your GitHub account.\n- It will then connect it to your Netlify account.\n- In less than 1-2 minutes, this Template will be up and running live at a unique Netlify domain.\n- Go to your GitHub account and find this repo:\n  - Clone your new repository locally.\n  - Run `npm install` to install dependencies.\n  - Follow the instructions above for running `dev`, `test`, and `build`.\n  - Any changes you make to your repo, locally and then synced to GitHub, or directly on GitHub will be picked up by Netlify and it will re-deploy your site with the new changes.\n  - Follow the instruction at Netlify for setting up your own custom domain...still all free!\n\n### Manage your content with Forestry.io\n\n[Forestry.io](https://forestry.io/) provides an amazing CMS to manage your static site content...[free for personal projects](https://forestry.io/pricing/)!\n\nInstall as outlined above and then login or create a free account at Forestry and [follow their instructions for setting up your new site](https://forestry.io/docs/quickstart/setup-site/).\n\n---\n\n## :unlock: Site Settings\n\nManage all the site settings, Name, Bio, META, stats ID, Image, Social links, and colors in the `src/_data/settings.json` file.  \n_Hopefully it's pretty obvious. :smiley:_\n\n---\n\n## :link: Managing Links\n\nManage all your links in the `src/_data/links.json` file.  \n_Hopefully it's pretty obvious. :smiley:_\n\nAdd as many, or as few, as you like. I've provided a few that I feel are relevant as of the publish date of this repo.\n\n---\n\n## :mega: Managing Social Icons\n\nWe use free [FontAwesome](https://fontawesome.com/) SVGs for the social links at the bottom. According to their license, we provide an attribution link. Please do not remove the link unless you have a Pro FontAwesome account.\n\nManage all your social links in the `src/_data/settings.json` file.  \n_Hopefully it's pretty obvious. :smiley:_\n\nI decided to require the entire URL _(rather than just the profile name)_ in case people wanted to provide links to specific posts, videos, etc.\n\nYou can, of course, add any additional platforms by updating the `src/_includes/components/nav.njk` file. If you want to manage your custom SVGs' colors, you'll have to provide the raw SVG code and make sure to add the `class` tag as in the existing platform codes.\n\n---\n\n## :small_blue_diamond: Customizing Colors\n\nThis assumes you know/use/understand [TailwindCSS](https://tailwindcss.com/).\n\nYou can override the default colors shown below in the `src/_data/settings.json` file.\n\nTailwind includes a [generous palette of great-looking, well-balanced colors](https://tailwindcss.com/docs/customizing-colors/#default-color-palette) that are perfect for prototyping or for kicking off a brand new project.\n\nIf you use the Tailwind classes, make sure to use the proper `bg-[color]-[###]` or `text-[color]-[###]` or `border-[color]-[###]` depending on if it's a **Background**, **Text**, or **Border** color.\n\n### Default Colors\n\nHere are the colors I used in this project.\n\n![default-colors](screenshot-default-colors.jpg \"Default Colors\")\n\n### Page level color overrides\n\nYou can also override some colors at the Page level in the frontmatter.\n\n- Check the [src/about.md](src/about.md) for an example of NO overrides.\n- Check the [src/colors.md](src/colors.md) file for an example of ALL the Page color overrides.\n\n_(NOTE: You won't see the `/colors` page in the Nav Bar but you can get to it manually by adding `/colors` to the end of your published URL...or even the [Live Demo](#live-demo). You can delete the [colors.md](src/colors.md) file if you want. It was helpful for creating the Default Colors table.)_\n\n---\n\n## :bar_chart: Google Analytics or Fathom Stats\n\nPersonally I don't use or care about stats, but I know some do. I've included conditional code in the `src/_includes/layouts/base.njk` that supports both a Google Analytics tracking code ID and a standard installation [Fathom site ID](https://usefathom.com/support/tracking).\n\nEnter your GA or Fathom IDs _(only)_ in the `/_data/settings.json` file if you want to track site stats.\n\nIf you use a different stats provider, you'll have to manually update the `src/_includes/layouts/base.njk` and you can remove the Fathom and GA stats blocks.\n\n---\n\n## :page_with_curl: Adding Pages to the Nav Bar\n\nYou can add Pages if you want. The easiest way would be to duplicate the [src/about.md](src/about.md) page and modify it. If you want it to show up in the Nav Bar, be sure to adjust its `title:` and `order:` in the frontmatter.\n\nYour new Page will then automatically show up in both the desktop and mobile Navs.\n\n---\n\n## :iphone: Screenshots\n\nHere's what you should see when you correctly install and run the app locally:\n\n| Mobile                                            | Desktop                                            |\n| ------------------------------------------------- | -------------------------------------------------- |\n| ![screenshot](screenshot-mobile.png \"screenshot\") | ![screenshot](screenshot-desktop.jpg \"screenshot\") |\n\n---\n\n## :page_facing_up: License\n\nThis project is under the [MIT](LICENSE) license.\nPlease adhere to the [code of conduct](.github/CODE_OF_CONDUCT.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshanerobinson%2Flinkist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshanerobinson%2Flinkist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshanerobinson%2Flinkist/lists"}