Improve code config samples

This commit is contained in:
Miguel Avila 2022-02-11 18:20:39 -06:00
parent 0446f8732f
commit cf8c74eb9d

109
README.md
View File

@ -85,14 +85,24 @@ To change the default name, the greetings and if you want to have an image backg
### 📐 Layouts: Bento, Lists and Buttons.
Bento has three different layouts `bento`, `lists` & `buttons`. It allows you to cutomize your experience giving you more buttons or lists depending on how are you more comfortable. To modify the laout you need to change the following line in the `config.js` file:
```js
// Layout
bentoLayout: 'bento', // 'bento', 'lists', 'buttons'
```
If you want to customize all your extra buttons and lists go to [🏷️ Buttons & Links](#-buttons--links) & [📑 Lists & Links](#-lists--links) sections.
![](assets/img/bentoLayouts.png)
### 🏷️ Buttons & Links
To edit the buttons you just need to change the follow list in the `config.js` file by choosing a link, an icon from [Feather icons](https://feathericons.com/) and a name:
To edit the buttons you just need to change the follow list in the `config.js` file by choosing a link, an icon from [Lucide icons](https://lucide.dev) and a name. If you're using the `buttons` [layout](#-layouts-bento-lists-and-buttons) you can customize `secondButtonsContainer`
```js
cards: [
firstButtonsContainer: [
{
id: '1',
name: 'Github',
@ -109,7 +119,7 @@ cards: [
id: '3',
name: 'Todoist',
icon: 'trello',
link: 'https://calendar.google.com/calendar/r',
link: 'https://todoist.com',
},
{
id: '4',
@ -120,7 +130,7 @@ cards: [
{
id: '5',
name: 'Reddit',
icon: 'bookmark',
icon: 'glasses',
link: 'https://reddit.com',
},
{
@ -134,52 +144,55 @@ cards: [
### 📑 Lists & Links
The same happens with the list links, you can change the list icon (also using feather icons) and the links:
The same happens with the list links, you can change the list icon (also using Lucide icons) and the links. If you're using the `lists` [layout](#-layouts-bento-lists-and-buttons) you can customize `secondListsContainer`, you can find it bellow `firstListsContainer`.
```js
//Icons
firstListIcon: 'music',
secondListIcon: 'coffee',
// Links
lists: {
firstList: [
{
name: 'Inspirational',
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
{
name: 'Classic',
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
{
name: 'Oldies',
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
{
name: 'Rock',
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
],
secondList: [
{
name: 'Linkedin',
link: 'https://linkedin.com/',
},
{
name: 'Figma',
link: 'https://figma.com/',
},
{
name: 'Dribbble',
link: 'https://dribbble.com',
},
{
name: 'Telegram',
link: 'https://webk.telegram.org',
},
],
},
firstlistsContainer: [
{
icon: 'music',
id: '1',
links: [
{
name: 'Inspirational',
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
{
name: 'Classic',
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
{
name: 'Oldies',
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
{
name: 'Rock',
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
],
},
{
icon: 'coffee',
id: '2',
links: [
{
name: 'Linkedin',
link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
{
name: 'Dribbble',
link: 'https://www.linkedin.com',
},
{
name: 'Trello',
link: 'https://www.trello.com',
},
{
name: 'Slack',
link: 'https://www.slack.com',
},
],
},
],
```
### ⛈️ Weather: Api Key, Icons and Unit