Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 1 addition & 23 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,23 +1 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
node_modules
23 changes: 0 additions & 23 deletions Changelog.md

This file was deleted.

674 changes: 0 additions & 674 deletions LICENSE

This file was deleted.

88 changes: 60 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,41 +1,73 @@
<h1 align="center">LinkLeaf</h1>
# React + TypeScript + Vite

<p align="center">
<img width=30% src="./assets/logo.png" >
</p
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

<p align='center'>
A similar project to Linktree that can be hosted on Github Pages
</p>
Currently, two official plugins are available:

[Demo](https://tekofx.github.io/linkleaf)
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

# How to get it ready
## React Compiler

- Fork the repository
- Enable Github Actions on your repo
- Edit the `src/data.json` file with your data and push it to your repo
- The icons are from [Font Awesome](https://fontawesome.com/icons?d=gallery). You can use whatever icon you want.
- Enable github pages in the settings of your repo. Go to Setting>Pages and set source: Deploy from branch and select `gh-pages` brach
<img src="./assets/pages.png" >

- Now your LinkLeaf should be located on `https://{GITHUB_USERNAME}.github.io/linkleaf`
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).

# Customization
## Expanding the ESLint configuration

## Change avatar
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

- Change `public/avatar.jpg` to your own avatar with .jpg extension
```js
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...

## Change background
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,

There are two options: Use a color or use an image.
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```

### Color
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

Just change the backgroundColor variable in `src/data.json` to your desired color.
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

### Image

- Remove the backgroundColor variable in `src/data.json`
- Change `public/background.jpg` to your own background with .jpg extension
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```
Loading
Loading