Une petite page d'accueil en HTML simple
Find a file
Kazhnuz 50b716e0db
All checks were successful
continuous-integration/drone/push Build is passing
feat: ajout tramweb
2024-08-30 12:14:51 +02:00
_data feat: ajout tramweb 2024-08-30 12:14:51 +02:00
_includes/layouts feat: ajout d'un lien supplementaire 2024-05-24 20:12:15 +02:00
content feat: port to eleventy 2024-05-24 17:12:23 +02:00
public feat: ajout d'un lien supplementaire 2024-05-24 20:12:15 +02:00
.drone.yml ci: préparation pour déploiement 2024-05-24 20:17:14 +02:00
.gitignore feat: port to eleventy 2024-05-24 17:12:23 +02:00
eleventy.config.drafts.js feat: port to eleventy 2024-05-24 17:12:23 +02:00
eleventy.config.images.js feat: port to eleventy 2024-05-24 17:12:23 +02:00
eleventy.config.js feat: port to eleventy 2024-05-24 17:12:23 +02:00
LICENSE Initial commit 2023-04-23 11:19:30 +02:00
netlify.toml feat: port to eleventy 2024-05-24 17:12:23 +02:00
package.json feat: port to eleventy 2024-05-24 17:12:23 +02:00
README.md docs: plus de doc 2024-05-25 09:32:30 +02:00

Embarcadère

Embarcadère est le code de Kobold Start, un petit portail que j'ai créé pour Kobold Cafe (qui me sert de page d'accueil sur mes névigateur web).

Son principe est d'être un simple "embarcadère" vers les différents sites auquel j'ai besoin d'accéder. Elle ne contient pas de fonctionnalités fancy comme afficher l'heure (mon OS fait ça), la météo (mon OS fait ça) ou lire des flux RSS (j'ai un lecteur de flux pour ça).

Le dépot contient le code tel qu'il est utilisé pour Kobold Cafe, et donc des éléments associés, mais vous pouvez le modifier pour créer votre propre portail.

Fonctionnalités

  • Une barre de recherche vers DuckDuckGo
  • Affichez une liste de site qui vous intéresse, aisément modifiable via le fichier _data/config.json
  • Différenciation entre des liens mis en avant et par catégorie + un lien "plus de site".
  • Un style simple et neutre, mais où vous pouvez
    • Modifier la couleur d'accent dans la configuration
    • Modifier le fond et le favicon
    • Afficher une mascotte pour plus de fun !
  • Utilisation d'emoji afin de rajouter un peu de vie à la liste des sites

Customisation

Le site peut être customisé par trois moyens principaux : modifier l'image de fond, le favicon modifier la mascotte (et son texte/alt) et la couleur d'accents.

  • Le fond peut être modifié en modifiant /public/img/background.jpg
  • La couleur d'accent peut être modifié en modifiant le contenu de accentColor dans le fichier _data/config.json
  • La mascotte peut être modifiée en modifiant /public/img/mascotte.png
    • Son alt-text se trouve dans le fichier _data/config.json dans mascotte.alt
    • Une description supplémentaire peut être trouvée dans le fichier _data/config.json dans mascotte.message et s'affichera au survol de la mascotte
  • Le favicon peut être modifié en modifiant /public/favicon.png

Modifié les sites

Les sites sont inclu dans les variables featuredSites ou dans des blocks dans la variable siteBlocks. Pour modifier les sites "mis en avant" (les boutons colorés), il vous suffit de modifier les sites qui sont géré de la manire suivante.

  "featuredSites":[
    {"nom":"<nom qui sera affiché sur le bouton>", "url":"<url du site>", "emoji":"<Un emoji à utiliser>"},
  ]

Pour modifier les sites dans les blocks, vous pouvez le faire de la manière suivante

  "siteBlocks":[
    {
      "nom":"<nom du block>",
      "sites":[
        {"nom":"<nom qui sera affiché sur le lien>", "url":"<url du site>", "emoji":"<Un emoji à utiliser>"},
      ]
    },
  ]

Un lien supplémentaire moreLink peut également être modifié

  "moreLink": {
    "nom": "Plus de liens sur mon shaarli !",
    "url": "https://shaarli.kazhnuz.space",
    "emoji": "🔗"
  },

Tester & compiler

Pour tester le site, il vous faut npm et npx sur votre installation, et utiliser la commande

npx @11ty/eleventy --serve

Vous pouvez build le site avec

npm build

Crédits

  • Fond d'écran venant d'Elementary OS, fait par Ashim DSilva
  • La mascotte de Kobold Café par Withelias