Open source link page with custom filters to keep all your links in one place.

• Alpha theme
• Dracula theme (created using Deploy button above)

Linksforall is a all in one open-source links page with optionally categories filter to better link sort with infinite possibilities.

This project was created on NextJS with Typescript and Tailwind CSS. Icons from Phosphoricons lib

1. Begin installing all dependencies:

npm run install
# or
yarn

2. Run dev command to load nextjs

npm run dev

3. Open local URL

http://localhost:3000

All content are located in:

./src/lib/links.json
./src/lib/categories.json
./src/lib/user.json

Links are array with the following structure:

[
  {
    "label": "Open-source link page",
    "categoryId": "projects",
    "url": "https://github.com/itbruno/linksforall"
  }
]

Categories are optional to filter links, keep the array empty if you don't use.

[
  {
    "label": "Projects",
    "id": "projects"
  }
]

The user file is all personal content from page, feel free to create/update new fields and use in your page.

[
  "fullname": "Bruno Rodrigues",
  "website": "https://itbruno.com.br",
  "role": "UI Designer & Front-end dev",
  "bio": "UI Designer and Front-end developer, based on Brazil and working at Nuvemshop",
  "image": "https://avatars3.githubusercontent.com/u/3206543?s=400&u=10401f6bec19f1675f77a45ee9b40bfb1a293367&v=4",

  "socialLinks": {
    "twitter": "https://twitter.com/_brunoweb",
    "linkedin": "https://linkedin.com/in/itbruno",
    "github": "https://github.com/itbruno",
    "medium": "https://medium.com/@itbruno",
    "facebook": "",
    "youtube": "",
    "instagram": "",
    "dribbble": "https://dribbble.com/itbruno"
  }
]

Here is the best part, you can use the current themes or create your own. Use your creativity and/or tech skill to generate awesome themes.

We have 2 custom themes: Alpha e Dracula (based on Dracula dark theme from Zeno Rocha)

Themes are located in:

./src/themes/[THEME_NAME]

To use your theme, after created you can import in ./src/index.tsx

...
import { Alpha } from '@themes/alpha';
import { DATA } from '@lib/data';

export default function Home() {
  const { user } = DATA;
  return (
    <>
      ...
      <Alpha data={DATA} />
    </>
  );
}

We have Google Analytics 4 pre-configured in the project. And you don't need touch in code to setup, it simple: To use local, create .env.local file at root project directory with your GA4 id:

# .env.local
NEXT_PUBLIC_GA4_ID=G-AAA0001112T

Some themes are availbale with Figma