New structure (#4)

* Remove old structure

* Add base nextjs structure with typescript

* Remove unused files on public

* Configure some paths in tsconfig.json

* Add and configure prettier

* Add and configure tailwind

* Add some json files with content

* Init base structure to alpha theme

* Add interfaces/types to data(user, links, categories)

* Create header component from Alpha theme

* Add categories component

* Update styles from categories

* Add links component

* Change categories style

* Fix some colors and spacing

* Update component name to keep better readable

* Add method to trigger links by category

* Add some behavior to links

* Update mock

* Add public files

* Add social links to header

* Update corners from categories bg

* Update readme

* Update readme

* Update README.md

* Add Dracula theme

* Fix url

* Update readme.md

* Update readme

* Update package.json

* Update readme

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"]
+}

.gitignore

@@ -8,16 +8,29 @@
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "trailingComma": "none",
+  "singleQuote": true,
+  "printWidth": 80
+}

README.md

@@ -0,0 +1,159 @@
+# LinksforAll
+
+Open source link page with custom filters to keep all your links in one place.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fitbruno%2Flinksforall)
+
+![linksforall](https://user-images.githubusercontent.com/3206543/211458118-2a11815a-dc47-46d6-b466-f088de3bfecf.jpg)
+
+## Description
+
+**Linksforall** is a all in one open-source links page with optionally categories filter to better link sort with infinite possibilities.
+
+## Get started
+
+This project was created on [NextJS](https://nextjs.org/) with Typescript and [Tailwind CSS](https://tailwindcss.com/).
+Icons from [Phosphoricons](https://phosphoricons.com/) lib
+
+1. Begin installing all dependencies:
+
+```shell
+npm run install
+# or
+yarn
+```
+
+2. Run dev command to load nextjs
+
+```shell
+npm run dev
+```
+
+3. Open local URL
+
+```
+http://localhost:3000
+```
+
+## Base structure
+
+### Content location
+
+All content are located in:
+
+```shell
+./src/lib/links.json
+./src/lib/categories.json
+./src/lib/user.json
+```
+
+#### Links
+
+Links are array with the following structure:
+
+| name       | type   | description                   |
+| ---------- | ------ | ----------------------------- |
+| label      | string | label visible on page         |
+| categoryId | string | **optional** id from category |
+| url        | string | url from link                 |
+
+```json
+[
+  {
+    "label": "Open-source link page",
+    "categoryId": "projects",
+    "url": "https://github.com/itbruno/linksforall"
+  }
+]
+```
+
+#### Categories (optional)
+
+Categories are optional to filter links, keep the array empty if you don't use.
+
+| name  | type   | description           |
+| ----- | ------ | --------------------- |
+| label | string | label visible on page |
+| id    | string | category identifier   |
+
+```json
+[
+  {
+    "label": "Projects",
+    "id": "projects"
+  }
+]
+```
+
+#### User
+
+The user file is all personal content from page, feel free to create/update new fields and use in your page.
+
+| name        | type   | description                    |
+| ----------- | ------ | ------------------------------ |
+| fullname    | string | Page name                      |
+| website     | string | **optional** website url       |
+| role        | string | Your role                      |
+| bio         | string | short description about you    |
+| image       | string | profile image                  |
+| socialLinks | object | object with social media links |
+
+```json
+[
+  "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"
+  }
+]
+```
+
+## Themes
+
+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](https://draculatheme.com/contribute) dark theme from [Zeno Rocha](https://github.com/zenorocha))
+
+Themes are located in:
+
+```shell
+./src/themes/[THEME_NAME]
+```
+
+To use your theme, after created you can import in `./src/index.tsx`
+
+```ts
+...
+import { Alpha } from '@themes/alpha';
+import { DATA } from '@lib/data';
+
+export default function Home() {
+  const { user } = DATA;
+  return (
+    <>
+      ...
+      <Alpha data={DATA} />
+    </>
+  );
+}
+```
+
+## Design
+
+Some themes are availbale with [Figma](https://tinu.be/uilinks)
+
+## Current version
+
+![GitHub tag (latest SemVer)](https://img.shields.io/github/package-json/v/itbruno/linksforall)

next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    domains: ['avatars3.githubusercontent.com']
+  }
+};
+
+module.exports = nextConfig;