Vento - Fourchette Bento repensée !

(Redesigned Bento fork!)

Created at: 2021-07-31 19:36:55
Language: JavaScript
License: GPL-3.0

image

🍱Page de démarrage élégante et simple avec un flou fantaisie. Fourchette à bento !

Le nom, Vento, signifie « vent » en italien.
En changeant une seule lettre dans le nom (et seulement quelques lignes dans le code), j'ai créé quelque chose de rafraîchissant. Tout comme le vent.


Envoyez-moi des cryptos !

Visitez le dépôt d'origine - Bento


👇Indice

Fonctionnalités

  • Fichier de configuration facile .
  • Mode sombre/clair , vous pouvez les basculer et il sera enregistré dans le stockage local.
  • Le format de l' horloge et de la date peut être réglé sur 24 heures (par défaut) ou 12 heures.
  • Les salutations sont faciles à modifier.
  • Variables pour les couleurs personnalisées et les tailles de police dans le
    style.css
    code.
  • Icônes toutes les icônes proviennent de Feather Icons (certaines autres que je les ai créées avec les icônes Feather comme base)
  • Fichiers javascript modulaires pour une lecture facile.

🚀Usage

Comme page d'accueil

  1. Fourchez ce dépôt
  2. Activer le service des pages Github
    Settings > GitHub Pages > Source [master branch] > Save
  3. Définissez-le comme page d'accueil :
    • Cliquez sur le bouton de menu. et sélectionnez Options. Préférences.
    • Cliquez sur le panneau Accueil.
    • Cliquez sur le menu à côté de Page d'accueil et nouvelles fenêtres et choisissez d'afficher les URL personnalisées et ajoutez votre
      Github Pages link

Comme nouvel onglet

Vous pouvez utiliser différents modules complémentaires/extensions pour cela

🎨Personnalisation

Presque toutes les personnalisations peuvent être gérées dans le

config.js
fichier :

👋Général : nom, arrière-plan de l'image et salutations

Pour changer le nom par défaut, les salutations et si vous voulez avoir une image de fond ou ouvrir vos liens dans de nouveaux onglets, éditez les premières configurations dans le fichier

config.js
.

 // General
  name: 'John',
  imageBackground: false,
  openInNewTab: true,

  // Greetings
  greetingMorning: 'Good morning!',
  greetingAfternoon: 'Good afternoon,',
  greetingEvening: 'Good evening,',
  greetingNight: 'Go to Sleep!',

Vous pouvez changer l'arrière-plan en remplaçant le

background.jpg
fichier dans
assets
le dossier.

🏷️Liens de bouton

Pour modifier les boutons, il vous suffit de modifier la liste suivante dans le

config.js
fichier en choisissant un lien, une icône parmi les icônes Feather et un nom :

cards: [
    {
      id: '1',
      name: 'Github',
      icon: 'github',
      link: 'https://github.com/',
    },
    {
      id: '2',
      name: 'Mail',
      icon: 'mail',
      link: 'https://mail.protonmail.com/',
    },
    {
      id: '3',
      name: 'Todoist',
      icon: 'trello',
      link: 'https://calendar.google.com/calendar/r',
    },
    {
      id: '4',
      name: 'Calendar',
      icon: 'calendar',
      link: 'https://calendar.google.com/calendar/r',
    },
    {
      id: '5',
      name: 'Reddit',
      icon: 'bookmark',
      link: 'https://reddit.com',
    },
    {
      id: '6',
      name: 'Odysee',
      icon: 'youtube',
      link: 'https://odysee.com/',
    },
  ],

📑Liste des liens

La même chose se produit avec les liens de la liste, vous pouvez changer l'icône de la liste (également en utilisant des icônes en forme de plume) et les liens :

  //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',
      },
    ],
  },

⛈️Météo : clé API, icônes et unité

Pour configurer le widget Météo, vous aurez besoin d'une clé API de :

https://openweathermap.org/
. Une fois que vous avez votre clé, vous devrez définir votre latitude et votre longitude, vous pouvez utiliser :
https://www.latlong.net/
pour les obtenir.

Enfin, choisissez un jeu d'icônes :

  • Nord Utilisation du schéma de couleurs Nord et des couleurs faciles à voir
  • OneDark ( Par défaut ) Utilisation du jeu de couleurs One Dark Pro
  • Thème Dark For White réservé aux utilisateurs qui souhaitent un look minimaliste
  • Thème White For Dark réservé aux utilisateurs qui souhaitent un look minimaliste

Enfin, ajoutez-les simplement au

config.js
fichier.

  // Weather
  weatherKey: 'InsertYourAPIKeyHere123456',
  weatherIcons: 'OneDark',
  weatherUnit: 'C',
  weatherLatitude: '37.774929',
  weatherLongitude: '-122.419418',

💛Couleurs

Dans le

app.css
fichier, vous pouvez modifier les variables pour les deux thèmes (Dark et Light) :

/* Light theme  */

:root {
  --accent: #61b0f1; /* Hover color */
  --bg: #f5f5f5; /* Background color */
  --sbg: #e4e6e6; /* Cards color */
  --fg: #3a3a3a; /* Foreground color */
  --sfg: #3a3a3a; /* Sceondary Foreground color */
}

/* Dark theme  */

.darktheme {
  --accent: #61b0f1; /* Hover color */
  --bg: #19171a; /* Background color */
  --sbg: #201e21; /* Cards color */
  --fg: #d8dee9; /* Foreground color */
  --sfg: #3a3a3a; /* Secondary Foreground color */
}

🌑Thème de changement automatique

Le thème peut être automatiquement modifié par le thème actuel de l'OS ou des heures personnalisées que vous pouvez modifier dans le

config.js
fichier :

  // Autochange
  autoChangeTheme: true,

  // Autochabge by OS
  changeThemeByOS: false, 

  // Autochange by hour options (24hrs format, string must be in: hh:mm)
  changeThemeByHour: true, // If it's true, it will use the values below:
  hourDarkThemeActive: '18:30', // Turn on the dark theme after this hour
  hourDarkThemeInactive: '07:00', // Turn off the dark theme after this hour and before the above hour