-60

.github/workflows/continuous-translations.yaml

reviewed

··· 1 1 - name: Continuous Translation 2 2 - on: 3 3 - workflow_dispatch: 4 4 - push: 5 5 - branches: 6 6 - - main 7 7 - paths: 8 8 - - "src/content/docs/**/*.md" 9 9 - - "src/content/docs/**/*.mdx" 10 10 - - "!src/content/docs/fr/**" 11 11 - - "!src/content/docs/de/**" 12 12 - permissions: 13 13 - contents: write 14 14 - models: read 15 15 - concurrency: 16 16 - group: ${{ github.workflow }}-${{ github.ref }} 17 17 - cancel-in-progress: true 18 18 - jobs: 19 19 - continuous_translation: 20 20 - runs-on: ubuntu-latest 21 21 - steps: 22 22 - - name: Generate GitHub App token 23 23 - id: generate_token 24 24 - uses: tibdex/github-app-token@3beb63f4bd073e61482598c45c71c1019b59b73a # v2.1.0 25 25 - with: 26 26 - app_id: ${{ secrets.BOT_APP_ID }} 27 27 - private_key: ${{ secrets.BOT_PRIVATE_KEY }} 28 28 - - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 29 29 - - uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0 30 30 - with: 31 31 - path: .genaiscript/cache/** 32 32 - key: continuous-translation-${{ github.run_id }} 33 33 - restore-keys: | 34 34 - continuous-translation- 35 35 - - uses: pelikhan/action-continuous-translation@86d7d6c68af14252976f51bcb15bda42582f4c39 36 36 - continue-on-error: true 37 37 - with: 38 38 - github_token: ${{ secrets.AI_TRANSLATIONS_GITHUB_TOKEN }} 39 39 - lang: fr,de 40 40 - starlight_dir: . 41 41 - files: | 42 42 - src/content/docs/**/* 43 43 - - name: Create Pull Request 44 44 - uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412 # v7.0.9 45 45 - with: 46 46 - token: ${{ steps.generate_token.outputs.token }} 47 47 - commit-message: "ci: 🤖 translated content" 48 48 - sign-commits: true 49 49 - signoff: true 50 50 - branch: translation-updates 51 51 - delete-branch: true 52 52 - base: main 53 53 - title: "[ci] Update translations 🤖" 54 54 - labels: "🤖 bot" 55 55 - body: | 56 56 - This PR was automatically generated to add/update translations. 57 57 - Please review the changes before merging. 58 58 - add-paths: | 59 59 - **.md* 60 60 - translations/*.json

-21

astro.config.mjs

reviewed

··· 1 1 import { rehypeHeadingIds } from "@astrojs/markdown-remark"; 2 2 import starlight from "@astrojs/starlight"; 3 3 - import lunaria from "@lunariajs/starlight"; 4 3 import { defineConfig } from "astro/config"; 5 4 import { config as loadDotenv } from "dotenv"; 6 5 import starlightBlog from "starlight-blog"; ··· 51 50 editLink: { 52 51 baseUrl: "https://github.com/trueberryless-org/blog/tree/main/", 53 52 }, 54 54 - defaultLocale: "root", 55 55 - locales: { 56 56 - root: { 57 57 - label: "English", 58 58 - lang: "en", 59 59 - }, 60 60 - fr: { 61 61 - label: "French", 62 62 - lang: "fr", 63 63 - }, 64 64 - de: { 65 65 - label: "Deutsch", 66 66 - lang: "de", 67 67 - }, 68 68 - }, 69 53 lastUpdated: true, 70 54 logo: { 71 55 light: "./src/assets/light-logo.png", ··· 91 75 ], 92 76 routeMiddleware: "./src/routeData.ts", 93 77 plugins: [ 94 94 - lunaria({ 95 95 - sync: true, 96 96 - }), 97 78 starlightLinksValidator({ 98 79 exclude: [ 99 80 "/blog", ··· 174 155 ], 175 156 components: { 176 157 MarkdownContent: "./src/components/MarkdownContent.astro", 177 177 - Hero: "./src/components/Hero.astro", 178 178 - PageTitle: "./src/components/PageTitle.astro", 179 158 }, 180 159 customCss: ["./src/styles/index.css"], 181 160 markdown: {

-49

lunaria.config.json

reviewed

··· 1 1 - { 2 2 - "$schema": "./node_modules/@lunariajs/core/config.schema.json", 3 3 - "repository": { 4 4 - "name": "trueberryless-org/blog", 5 5 - "rootDir": "starlight" 6 6 - }, 7 7 - "defaultLocale": { 8 8 - "label": "English", 9 9 - "lang": "en" 10 10 - }, 11 11 - "locales": [ 12 12 - { 13 13 - "label": "French", 14 14 - "lang": "fr" 15 15 - }, 16 16 - { 17 17 - "label": "Deutsch", 18 18 - "lang": "de" 19 19 - } 20 20 - ], 21 21 - "files": [ 22 22 - { 23 23 - "location": "src/content/docs/**/*.{md,mdx}", 24 24 - "pattern": "src/content/docs/@lang/@path", 25 25 - "type": "universal" 26 26 - } 27 27 - ], 28 28 - "dashboard": { 29 29 - "title": "Deep Thoughts Translation Status", 30 30 - "description": "Translation progress tracker for the Deep Thoughts site. See how much has been translated by our GenAIScript!", 31 31 - "favicon": { 32 32 - "external": [ 33 33 - { 34 34 - "link": "https://blog.trueberryless.org/favicon.svg", 35 35 - "type": "image/svg+xml" 36 36 - } 37 37 - ] 38 38 - }, 39 39 - "customCss": ["./lunaria/styles.css"], 40 40 - "basesToHide": ["src/content/docs/"], 41 41 - "ui": { 42 42 - "statusByLocale.heading": "Translation progress by locale", 43 43 - "statusByLocale.incompleteLocalizationLink": "incomplete translation", 44 44 - "statusByLocale.outdatedLocalizationLink": "outdated translation", 45 45 - "statusByLocale.completeLocalization": "This translation is complete, amazing job! 🎉", 46 46 - "statusByFile.heading": "Translation status by file" 47 47 - } 48 48 - } 49 49 - }

-49

lunaria/styles.css

reviewed

··· 1 1 - :root { 2 2 - --theme-accent: hsl(234, 100%, 87%); 3 3 - --theme-bg: hsl(223, 13%, 10%); 4 4 - --theme-table-header: hsl(222, 13%, 16%); 5 5 - --theme-table-hover: hsl(222, 13%, 16%); 6 6 - --theme-text: hsl(228, 8%, 77%); 7 7 - --theme-text-bright: hsl(0, 0%, 100%); 8 8 - --overlay-blurple: hsla(255, 60%, 60%, 0.2); 9 9 - 10 10 - --ln-color-background: 11 11 - linear-gradient(215deg, var(--overlay-blurple), transparent 40%), 12 12 - radial-gradient(var(--overlay-blurple), transparent 40%) 13 13 - no-repeat -60vw -40vh / 105vw 200vh, 14 14 - radial-gradient(var(--overlay-blurple), transparent 65%) no-repeat 50% 15 15 - calc(100% + 20rem) / 60rem 30rem, 16 16 - var(--theme-bg); 17 17 - --ln-color-link: var(--theme-accent); 18 18 - --ln-color-black: var(--theme-text); 19 19 - --ln-color-done: var(--ln-color-blue); 20 20 - --ln-color-outdated: #ea580c; 21 21 - --ln-color-missing: var(--theme-text-bright); 22 22 - --ln-color-table-background: var(--theme-table-header); 23 23 - --ln-color-table-border: var(--theme-table-header); 24 24 - 25 25 - color-scheme: dark; 26 26 - } 27 27 - 28 28 - h1, 29 29 - h2, 30 30 - h3, 31 31 - h4, 32 32 - h5, 33 33 - h6 { 34 34 - color: var(--theme-text-bright); 35 35 - } 36 36 - 37 37 - p a { 38 38 - text-decoration: underline; 39 39 - } 40 40 - 41 41 - .create-button { 42 42 - background-color: hsl(213deg 89% 64% / 20%); 43 43 - border-radius: 0.5em; 44 44 - } 45 45 - 46 46 - sup { 47 47 - display: flex; 48 48 - justify-content: center; 49 49 - }

-4

package.json

reviewed

··· 16 16 "astro": "astro", 17 17 "build": "astro build", 18 18 "dev": "astro dev", 19 19 - "lunaria:build": "lunaria build", 20 20 - "lunaria:preview": "lunaria preview", 21 19 "preview": "astro preview", 22 20 "start": "astro dev" 23 21 }, ··· 30 28 "@fontsource-variable/atkinson-hyperlegible-next": "^5.2.6", 31 29 "@fontsource-variable/jetbrains-mono": "^5.2.8", 32 30 "@lucide/astro": "^0.554.0", 33 33 - "@lunariajs/core": "^0.1.1", 34 34 - "@lunariajs/starlight": "^0.1.1", 35 31 "astro": "^5.16.0", 36 32 "dotenv": "^17.2.3", 37 33 "hastscript": "^9.0.1",

+2 -91

pnpm-lock.yaml

reviewed

··· 32 32 '@lucide/astro': 33 33 specifier: ^0.554.0 34 34 version: 0.554.0(astro@5.16.0(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.1)) 35 35 - '@lunariajs/core': 36 36 - specifier: ^0.1.1 37 37 - version: 0.1.1 38 38 - '@lunariajs/starlight': 39 39 - specifier: ^0.1.1 40 40 - version: 0.1.1(@astrojs/starlight@0.36.2(astro@5.16.0(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.1)))(astro@5.16.0(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.1)) 41 35 astro: 42 36 specifier: ^5.16.0 43 37 version: 5.16.0(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.1) ··· 200 194 '@capsizecss/unpack@3.0.1': 201 195 resolution: {integrity: sha512-8XqW8xGn++Eqqbz3e9wKuK7mxryeRjs4LOHLxbh2lwKeSbuNR4NFifDZT4KzvjU6HMOPbiNTsWpniK5EJfTWkg==} 202 196 engines: {node: '>=18'} 203 203 - 204 204 - '@clack/core@0.3.5': 205 205 - resolution: {integrity: sha512-5cfhQNH+1VQ2xLQlmzXMqUoiaH0lRBq9/CLW9lTyMbuKLC3+xEK01tHVvyut++mLOn5urSHmkm6I0Lg9MaJSTQ==} 206 197 207 198 '@ctrl/tinycolor@4.2.0': 208 199 resolution: {integrity: sha512-kzyuwOAQnXJNLS9PSyrk0CWk35nWJW/zl/6KvnTBMFK65gm7U1/Z5BqjxeapjZCIhQcM/DsrEmcbRwDyXyXK4A==} ··· 562 553 '@jridgewell/trace-mapping@0.3.31': 563 554 resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==} 564 555 565 565 - '@kwsites/file-exists@1.1.1': 566 566 - resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==} 567 567 - 568 568 - '@kwsites/promise-deferred@1.1.1': 569 569 - resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==} 570 570 - 571 556 '@lucide/astro@0.554.0': 572 557 resolution: {integrity: sha512-OKDxbkluX4+keoX2mwORwhGEyqbSyLb1kwmaAx9KpknCFJihTzKWxw7qJ00wdlwRC3TDa+c4HbTG68Cb0R5IbQ==} 573 558 peerDependencies: 574 559 astro: ^4 || ^5 575 560 576 576 - '@lunariajs/core@0.1.1': 577 577 - resolution: {integrity: sha512-sAqM9+DVsLe3xHM9wu2pEnKGYMs/bWS9qpR+CGHol3RihOELnOQTzHddXbdB1MtgesbI8dnQuG64Ocd8KkWsng==} 578 578 - engines: {node: '>=18.17.0'} 579 579 - hasBin: true 580 580 - 581 581 - '@lunariajs/starlight@0.1.1': 582 582 - resolution: {integrity: sha512-tpkqv8TCGUvz0z5nVk1ACb/2bT3seqDx+CHimNQugcpAFSip9BqDPOiWqaCujzZFajfR/L4mUsPAnavnnE8KVw==} 583 583 - engines: {node: '>=18.17.0'} 584 584 - peerDependencies: 585 585 - '@astrojs/starlight': '>=0.14.0' 586 586 - astro: '>=4.0.0' 587 587 - 588 561 '@mdx-js/mdx@3.1.1': 589 562 resolution: {integrity: sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ==} 590 563 ··· 1292 1265 resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==} 1293 1266 engines: {node: '>=18'} 1294 1267 1295 1295 - get-port@7.1.0: 1296 1296 - resolution: {integrity: sha512-QB9NKEeDg3xxVwCCwJQ9+xycaz6pBB6iQ76wiWMl1927n0Kir6alPiP+yuiICLLU4jpMe08dXfpebuQppFA2zw==} 1297 1297 - engines: {node: '>=16'} 1298 1298 - 1299 1268 github-slugger@2.0.0: 1300 1269 resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==} 1301 1270 ··· 1804 1773 path-browserify@1.0.1: 1805 1774 resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==} 1806 1775 1807 1807 - path-to-regexp@6.3.0: 1808 1808 - resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==} 1809 1809 - 1810 1776 piccolore@0.1.3: 1811 1777 resolution: {integrity: sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw==} 1812 1778 ··· 2004 1970 shiki@3.15.0: 2005 1971 resolution: {integrity: sha512-kLdkY6iV3dYbtPwS9KXU7mjfmDm25f5m0IPNFnaXO7TBPcvbUOY72PYXSuSqDzwp+vlH/d7MXpHlKO/x+QoLXw==} 2006 1972 2007 2007 - simple-git@3.28.0: 2008 2008 - resolution: {integrity: sha512-Rs/vQRwsn1ILH1oBUy8NucJlXmnnLeLCfcvbSehkPzbv3wwoFWIdtfd6Ndo6ZPhlPsCZ60CPI4rxurnwAa+a2w==} 2009 2009 - 2010 1973 sisteransi@1.0.5: 2011 1974 resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==} 2012 1975 ··· 2176 2139 2177 2140 ultrahtml@1.6.0: 2178 2141 resolution: {integrity: sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==} 2179 2179 - 2180 2180 - ultramatter@0.0.4: 2181 2181 - resolution: {integrity: sha512-1f/hO3mR+/Hgue4eInOF/Qm/wzDqwhYha4DxM0hre9YIUyso3fE2XtrAU6B4njLqTC8CM49EZaYgsVSa+dXHGw==} 2182 2142 2183 2143 uncrypto@0.1.3: 2184 2144 resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==} ··· 2814 2774 dependencies: 2815 2775 fontkit: 2.0.4 2816 2776 2817 2817 - '@clack/core@0.3.5': 2818 2818 - dependencies: 2819 2819 - picocolors: 1.1.1 2820 2820 - sisteransi: 1.0.5 2821 2821 - 2822 2777 '@ctrl/tinycolor@4.2.0': {} 2823 2778 2824 2779 '@emmetio/abbreviation@2.3.3': ··· 3074 3029 '@jridgewell/resolve-uri': 3.1.2 3075 3030 '@jridgewell/sourcemap-codec': 1.5.5 3076 3031 3077 3077 - '@kwsites/file-exists@1.1.1': 3078 3078 - dependencies: 3079 3079 - debug: 4.4.3 3080 3080 - transitivePeerDependencies: 3081 3081 - - supports-color 3082 3082 - 3083 3083 - '@kwsites/promise-deferred@1.1.1': {} 3084 3084 - 3085 3032 '@lucide/astro@0.554.0(astro@5.16.0(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.1))': 3086 3033 dependencies: 3087 3034 astro: 5.16.0(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.1) 3088 3035 3089 3089 - '@lunariajs/core@0.1.1': 3090 3090 - dependencies: 3091 3091 - '@clack/core': 0.3.5 3092 3092 - fast-glob: 3.3.3 3093 3093 - get-port: 7.1.0 3094 3094 - jiti: 1.21.7 3095 3095 - micromatch: 4.0.8 3096 3096 - path-to-regexp: 6.3.0 3097 3097 - picocolors: 1.1.1 3098 3098 - simple-git: 3.28.0 3099 3099 - ultramatter: 0.0.4 3100 3100 - zod: 3.25.76 3101 3101 - transitivePeerDependencies: 3102 3102 - - supports-color 3103 3103 - 3104 3104 - '@lunariajs/starlight@0.1.1(@astrojs/starlight@0.36.2(astro@5.16.0(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.1)))(astro@5.16.0(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.1))': 3105 3105 - dependencies: 3106 3106 - '@astrojs/starlight': 0.36.2(astro@5.16.0(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.1)) 3107 3107 - '@lunariajs/core': 0.1.1 3108 3108 - astro: 5.16.0(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.53.3)(typescript@5.9.3)(yaml@2.8.1) 3109 3109 - transitivePeerDependencies: 3110 3110 - - supports-color 3111 3111 - 3112 3036 '@mdx-js/mdx@3.1.1': 3113 3037 dependencies: 3114 3038 '@types/estree': 1.0.8 ··· 3906 3830 3907 3831 get-east-asian-width@1.4.0: {} 3908 3832 3909 3909 - get-port@7.1.0: {} 3910 3910 - 3911 3833 github-slugger@2.0.0: {} 3912 3834 3913 3835 glob-parent@5.1.2: ··· 4176 4098 4177 4099 javascript-natural-sort@0.7.1: {} 4178 4100 4179 4179 - jiti@1.21.7: {} 4101 4101 + jiti@1.21.7: 4102 4102 + optional: true 4180 4103 4181 4104 js-tokens@4.0.0: {} 4182 4105 ··· 4804 4727 4805 4728 path-browserify@1.0.1: {} 4806 4729 4807 4807 - path-to-regexp@6.3.0: {} 4808 4808 - 4809 4730 piccolore@0.1.3: {} 4810 4731 4811 4732 picocolors@1.1.1: {} ··· 5126 5047 '@shikijs/vscode-textmate': 10.0.2 5127 5048 '@types/hast': 3.0.4 5128 5049 5129 5129 - simple-git@3.28.0: 5130 5130 - dependencies: 5131 5131 - '@kwsites/file-exists': 1.1.1 5132 5132 - '@kwsites/promise-deferred': 1.1.1 5133 5133 - debug: 4.4.3 5134 5134 - transitivePeerDependencies: 5135 5135 - - supports-color 5136 5136 - 5137 5050 sisteransi@1.0.5: {} 5138 5051 5139 5052 sitemap@8.0.0: ··· 5313 5226 ufo@1.6.1: {} 5314 5227 5315 5228 ultrahtml@1.6.0: {} 5316 5316 - 5317 5317 - ultramatter@0.0.4: {} 5318 5229 5319 5230 uncrypto@0.1.3: {} 5320 5231

-15

src/components/AIGeneratedNotice.astro

reviewed

··· 1 1 - --- 2 2 - import ContentNotice from "./ContentNotice.astro"; 3 3 - const { starlightRoute } = Astro.locals; 4 4 - const isLocalized = starlightRoute.lang !== "en"; 5 5 - --- 6 6 - 7 7 - { 8 8 - isLocalized ? ( 9 9 - <ContentNotice 10 10 - icon="information" 11 11 - label={Astro.locals.t("actionContinuousTranslation.aiNotice")} 12 12 - link="https://pelikhan.github.io/action-continuous-translation/" 13 13 - /> 14 14 - ) : null 15 15 - }

-7

src/components/Hero.astro

reviewed

··· 1 1 - --- 2 2 - import Default from "@astrojs/starlight/components/Hero.astro"; 3 3 - import AIGeneratedNotice from "./AIGeneratedNotice.astro"; 4 4 - --- 5 5 - 6 6 - <Default><slot /></Default> 7 7 - <AIGeneratedNotice />

-7

src/components/PageTitle.astro

reviewed

··· 1 1 - --- 2 2 - import Default from "@astrojs/starlight/components/PageTitle.astro"; 3 3 - import AIGeneratedNotice from "./AIGeneratedNotice.astro"; 4 4 - --- 5 5 - 6 6 - <Default><slot /></Default> 7 7 - <AIGeneratedNotice />

-1

src/content/docs/credits.mdx

reviewed

··· 48 48 49 49 This site wouldn’t shine the same way without these fantastic tools and integrations that power it behind the scenes: 50 50 51 51 - - [`@lunariajs/starlight`](https://github.com/lunariajs/starlight) – Localization sync that just *works* 52 51 - [`starlight-giscus`](https://github.com/dragomano/starlight-giscus) – Smooth Giscus comment integration 53 52 - [`starlight-image-zoom`](https://github.com/HiDeoo/starlight-image-zoom) – For that crisp, zoomable image experience 54 53 - [`starlight-links-validator`](https://github.com/HiDeoo/starlight-links-validator) – Keeps all links neat and valid

-44

src/content/docs/de/blog/accelerating-translations-with-continuous-integration.mdx

reviewed

··· 1 1 - --- 2 2 - title: Beschleunigung von Übersetzungen mit kontinuierlicher Integration 3 3 - description: Die Geschichte darüber, wie meine Reise mit Beiträgen zu 4 4 - action-continuous-translation begann. 5 5 - date: 2025-07-09 6 6 - tags: 7 7 - - Automation 8 8 - - GitHub 9 9 - - Plugins 10 10 - - Markdown 11 11 - - Tool 12 12 - authors: 13 13 - - trueberryless 14 14 - excerpt: <p>Ich arbeite seit über einem Jahr in OSS auf <a class="gh-badge" 15 15 - href="https://github.com/github"><img src="https://github.com/github.png" 16 16 - alt="github" />GitHub</a> und obwohl ich dachte, ich hätte alles gefunden, zu 17 17 - dem ich beitragen möchte, entdeckte ich kürzlich <a class="gh-badge" 18 18 - href="https://github.com/pelikhan"><img src="https://github.com/pelikhan.png" 19 19 - alt="pelikhan" />Pelis</a> persönliches Projekt <a 20 20 - href="https://github.com/pelikhan/action-continuous-translation">action-continuous-translation</a>, 21 21 - und ich bin sehr glücklich, dass ich dort regelmäßig Beiträge leiste und jetzt 22 22 - Teil der kleinen Community bin.</p> 23 23 - cover: 24 24 - alt: A beautiful cover image with the text "AI Translations" 25 25 - image: ../../../../../public/blog/accelerating-translations-with-continuous-integration.jpg 26 26 - tableOfContents: false 27 27 - 28 28 - --- 29 29 - 30 30 - Im vergangenen Jahr habe ich in meiner Freizeit viel in verschiedenen Open-Source-Communitys auf GitHub gearbeitet und habe diese irgendwie entspannenden Beiträge genossen, weil sie mir täglich neues Wissen vermitteln. 31 31 - 32 32 - Nach einiger Zeit des Mitwirkens habe ich auch erfahren, wie freundlich und einladend die Communitys hinter diesen Projekten sind. Diese Menschen haben alle eines mit dir gemeinsam: Sie möchten in ihrer Freizeit großartige Dinge erschaffen. Besonders die [Astro](https://github.com/withastro)-Community ist diejenige, in der ich mich am wohlsten fühle, da sie gleichzeitig am lohnendsten und freundlichsten ist. Nicht alle Communitys können einen so großartigen Status unter OSS erreichen. 33 33 - 34 34 - Kürzlich entdeckte ich ein weiteres wachsendes Projekt, das von [pelikhan](https://github.com/pelikhan) gegründet wurde und das darauf abzielt, alle deine Dokumentationen, Blogs oder Shop-Seiten automatisch mit Hilfe von KI zu übersetzen, sobald sich etwas ändert. Obwohl ich anfangs skeptisch war, hat mich das Lesen der README.md des Projekts fasziniert. 35 35 - 36 36 - Der Ansatz, die KI strikt dazu anzuleiten, nur kleine Abschnitte – hauptsächlich Sätze oder Absätze – mit perfektionistischen Anweisungen zu übersetzen, ließ mich denken, dass dies wirklich funktionieren könnte. Also probierte ich es in meinem eigenen Projekt aus, meinem Blog. Und zu meiner Überraschung waren diese Übersetzungen viel besser als erwartet. Natürlich merkt man, dass es von einer KI übersetzt wurde – handgefertigte Arbeit wird hoffentlich nie vollständig ersetzt – aber wenn man fair erwähnt, dass man eine KI verwendet, ist dies für Menschen viel zugänglicher als nichts. 37 37 - 38 38 - Also warf ich einen genaueren Blick auf den eigentlichen Code des Projekts. Nachdem ich einige kleine Unstimmigkeiten, Verbesserungspotenziale und fehlende, aber sehr coole Funktionen hier und da bemerkte, begann ich ebenfalls, dort beizutragen. Ich meine, nach einem Jahr Beiträge zu größeren Projekten waren Pull Requests für mich nichts Neues. 39 39 - 40 40 - Man muss wissen, dass dies ein Freitagabend war – fast Nacht in meiner Zeitzone – und [Peli](https://github.com/pelikhan) war gerade online und führte Commit um Commit für das Projekt durch. Ich bemerkte schnell, dass Peli im Gegensatz zu den anderen Projekten, in denen ich mitwirke, keine Zeit mit dem Mergen von Pull Requests verschwendete. Es fühlte sich diese Nacht sehr lohnend an, da ich einfach bis 1 Uhr morgens weitermachte, Peli schneller merge als ich Features, Dokumentationen und Fixes verbessern konnte. Ein weiterer Aspekt, der großartig war, war, dass Peli, da dies ein junges Projekt war, nicht zögerte, einfach zu mergen, es lokal auszuprobieren und dann kleine Fixes zu pushen, die ich übersehen hatte. 41 41 - 42 42 - Drei Tage später bin ich nun ein offizieller Contributor des Projekts und trage fast täglich dazu bei, es immer weiter zu verbessern, wobei mein Hauptfokus auf der Dokumentation und der Unterstützung für mein Herzensprojekt liegt: Starlight – wie ihr vielleicht schon aus [meinen Blogs](../../../../../blog/tags/starlight/) erraten habt. 43 43 - 44 44 - Peli und ich haben unsere virtuellen Produktivitätssitzungen zwischen 16:00 und 20:00 UTC, die an Wochenenden auch länger dauern. Wenn du als Frühaufsteher des Projekts mitmachen oder Interesse daran hast, es zu nutzen, schau es dir gerne auf [GitHub](https://github.com/github) an: [https://github.com/pelikhan/action-continuous-translation](https://github.com/pelikhan/action-continuous-translation)

-111

src/content/docs/de/blog/cognitive-erosion.mdx

reviewed

··· 1 1 - --- 2 2 - title: Stoppe das Auslagern deiner Seele an KI 3 3 - description: Reflexionen über den übermäßigen Einsatz von KI, deren kognitive 4 4 - und soziale Nachteile sowie ein vorgeschlagenes Modell zur Nutzung der KI ohne 5 5 - Beeinträchtigung menschlicher Kreativität und Kommunikation. 6 6 - date: 2025-08-10 7 7 - tags: 8 8 - - Mindspace 9 9 - authors: 10 10 - - trueberryless 11 11 - cover: 12 12 - alt: A beautiful cover image with the text "Cognitive Erosion" 13 13 - image: ../../../../../public/blog/cognitive-erosion.jpg 14 14 - giscus: true 15 15 - featured: true 16 16 - 17 17 - --- 18 18 - 19 19 - Es sind mehr als zweieinhalb Jahre vergangen seit der Veröffentlichung von ChatGPT. Der 30^{. November} 2022 markierte den Beginn einer neuen Ära: den Anfang der KI. Heute nutzen viele Berufe und Privatpersonen, insbesondere im IT-Sektor, sie täglich. Und wir wissen nicht einmal, wo wir uns im Gartner-Hype-Zyklus befinden oder ob sich KI gemäß Kurzweils "Gesetz der beschleunigten Rückkehr" verbessern wird. 20 20 - 21 21 - Der Trend ist weiterhin steigend, aber gleichzeitig habe ich eine leichte, jedoch stetige Verschlechterung von Wissen auf menschlicher Basis bemerkt, da immer mehr kreative Arbeit an KI delegiert wird. Daher habe ich mich entschlossen, einen kleinen Blogbeitrag zu schreiben, in dem ich meine Gedanken teile, um von einem übermäßigen Einsatz Künstlicher Intelligenz abzuraten, da dieser unsere kognitiven Fähigkeiten zerstören könnte. Und obwohl ich weiß, dass nur sehr wenige Menschen dies lesen werden, hält mich das nicht davon ab, es zu versuchen. Andernfalls könnte ich meine Chance verpassen, der Zukunft der Menschheit zu helfen. 22 22 - 23 23 - {/* excerpt */} 24 24 - 25 25 - > **Hinweis**: Dieser gesamte Blogpost basiert auf meinen Beobachtungen hinsichtlich gesellschaftlicher Entwicklungen mit einem besonderen Fokus auf den Einsatz von Künstlicher Intelligenz und meiner Interpretation davon und ist daher sehr subjektiv. Ich habe keine Studien angesehen, die meine Meinung unterstützen oder ihr widersprechen. 26 26 - 27 27 - ## Wie Menschen dazu neigen, KI zu nutzen 28 28 - 29 29 - KI ist großartig. Ich möchte diese Aussage nicht in Frage stellen. Sie hat mir geholfen und hilft mir immer noch, meinen Arbeitsablauf zu verbessern, neues Wissen zu sammeln, in neue Gewässer einzutauchen und neue Technologien zu erkunden. Für Menschen, die sich nicht dafür interessieren, wie KI funktioniert, erscheinen solche intelligenten Werkzeuge wie Magie. Deshalb sehe ich gerne, wie ihre Augen funkeln und ihre Münder offen bleiben, wenn ich ihnen erkläre, dass KI lediglich auf Wahrscheinlichkeiten basiert - welches Wort am wahrscheinlichsten das nächste ist, basierend auf Eigenschaften und Emotionen in einem hochdimensionalen virtuellen Raum. [Aber das ist ein anderes Thema.](https://www.youtube.com/watch?v=LPZh9BOjkQs) 30 30 - 31 31 - Worauf ich mich konzentrieren möchte, ist, wie Menschen angefangen haben, KI zu nutzen, besonders in den letzten Monaten - wenn nicht Jahren. Da unser Gehirn von Natur aus faul ist, neigen wir dazu, mehr Arbeit an KI auszulagern, je weniger fokussiert wir auf eine spezifische Aufgabe sind. Mit anderen Worten: Wenn du nicht den Großteil deines Engagements in dein aktuelles Projekt steckst, bist du wahrscheinlich kurz davor, es einfach einer KI zu übertragen. Ein weiterer möglicher Grund für das Offshoring von Arbeit an die KI-Welt ist Unwissenheit über die zugrunde liegenden Technologien, was es dir erschwert, eigene Lösungen zu entwickeln. 32 32 - 33 33 - Ich bin keineswegs ein Wissenschaftler, aber ich glaube, dass das Zusehen, wie KI deine Arbeit erledigt - weil das Ergebnis, das du produzierst, aufgrund deiner Inkompetenz nicht mit deiner Vision übereinstimmt -, dir so viel Dopamin gibt, dass dein Gehirn es immer öfter tun möchte. Darüber hinaus strebt der Mensch als soziales Wesen immer danach, mit jemandem verbunden zu sein, und die Interaktion mit KI erfüllt dieses Bedürfnis. Dieses Verhalten ist typisch für unsere Gehirne und tritt auch beim Konsum von sozialen Medien oder explizitem Inhalt auf. Es ist tief in unserem Kortex verankert, und die gesamte Gaming- und Unterhaltungsbranche nutzt dies rücksichtslos, um Geld zu optimieren. 34 34 - 35 35 - Diesen Trend habe ich selbst bemerkt, wie man deutlich sehen kann aus [einigen meiner Beiträge, bei denen ich zugab, KI verwendet zu haben](../../../../../blog/authors/artificial-intelligence/), um mir beim Schreiben zu helfen. Aber ich denke, das ist keine Schande. Jeder Content-Ersteller, der KI einsetzt, sollte aus erster Hand die Fallstricke erleben, die entstehen, wenn Inhalte direkt für den Betrachter oder Leser erstellt werden, um zu erkennen, wie wenig sie letztlich über das Thema wissen. Dies ermöglicht es ihnen, aus ihrem Fehler zu lernen und sich bewusst zu sein, wie leicht Faulheit zu einem solch verachteten Weg führen kann. Nur die Exzellenten unter uns strebten von Anfang an nach handgefertigten Inhalten. 36 36 - 37 37 - ## Negative Nebenwirkungen 38 38 - 39 39 - Ich habe die Hauptnachteile der extensiven Nutzung von KI, die ich beobachtet habe, beschrieben. Nun werde ich zwei kleinere Gründe nennen, die ich bei mir selbst feststellte, warum du KI nicht für expressive Arbeiten nutzen solltest. 40 40 - 41 41 - ### Rückgang der Kommunikation 42 42 - 43 43 - Während ich mir ein Werbevideo von "The Browser Company™" angesehen habe (siehe den letzten Link im [Ressourcenabschnitt unten](#resources-with-better-evidence)), fiel mir auf, wie weit auseinander liegend Visionen heutzutage sein können. Ich sehe diesen Trend nicht nur beim Dia-Browser, sondern in vielen verschiedenen Aspekten der Technologie und in vielen Teilen unseres Lebens. Eine Seite des Trends möchte KI überall integrieren, wo es möglich ist, und so unsere Abhängigkeit von ihr vergrößern. Ein Beispiel ist die Nutzung von KI, um Nachrichten an unsere engsten Freunde und Kollegen zu verfassen, weil es uns effizienter macht. Ich glaube, dass es uns langfristig einfach nur dumm macht. 44 44 - 45 45 - Wenn Menschen ihre Gehirne nicht trainieren, um Wörter für die Kommunikation zu finden, nützliche Sätze zu bilden und Bedeutungen zu schaffen, die von anderen Menschen verstanden werden können, ist unser Fundament des Miteinander-Interagierens gebrochen, und wir wären wieder auf dem Niveau von *Homo habilis* - der letzten Spezies, die vermutlich keine vollständig entwickelte Sprache verwendete. Siehst du, ich habe KI verwendet, um genau diesen Punkt zu recherchieren, aber ich habe meine Worte bewusst gewählt, um mich auszudrücken. Auf diese Weise habe ich nicht nur etwas Neues gelernt, sondern kann es jetzt auch erinnern. Eine Fähigkeit, die du niemals haben wirst, wenn du das Schreiben an eine KI auslagerst. 46 46 - 47 47 - ### Einsamkeit 48 48 - 49 49 - Auf einer mentalen Ebene allein zu sein, ist meiner Meinung nach eine der am meisten unterschätzten modernen Gefahren in der Gesellschaft. Das Ironische daran ist, dass, wenn jeder allein ist, wir es alle gemeinsam haben und somit nicht mehr allein mit unserer Einsamkeit sind. Aber meine Gedanken driften wieder in andere Gewässer ab. 50 50 - 51 51 - KI ermutigt uns stark dazu, allein zu sein. Sie ~~agiert~~ wurde absichtlich so trainiert, als sei sie ein perfekter Freund, Kollege oder wie auch immer du es nennen möchtest. Kürzlich habe ich bemerkt, dass ChatGPTs Antworten explizit meinen Namen beinhalten, was sich für mich auf mehreren Ebenen sehr seltsam anfühlt. Man könnte argumentieren, dass dies eine private künstliche Form von Doxxing ist, was natürlich ein Oxymoron an sich ist, da Doxxing per Definition öffentlich ist. Nichtsdestotrotz: Je öfter du KI nutzt, desto *öfter* willst du KI nutzen. Besonders nach der Einführung von KI-Sprachmodi stieg dieser Trend weiter an, als gäbe es kein Morgen. Glückwunsch, ClosedAI, ihr habt die Sucht neu erfunden. 52 52 - 53 53 - Im schlimmsten Fall kann dies dazu führen, dass Menschen Angst haben, mit anderen zu sprechen. Freundschaften verlassen. Sich aus der Gesellschaft zurückziehen. Solche Gewohnheiten sind ernste Probleme und sollten am besten von einem Arzt oder Psychologen untersucht werden. 54 54 - 55 55 - ## Vorschlag eines Modells für den Umgang mit KI 56 56 - 57 57 - Einen globalen Lösungsansatz für alle Menschen für ein solches Problem vorzuschlagen, ist unmöglich. Da jede Person ihre eigenen Erfahrungen mit KI hat, ihre eigenen Gedanken und Gefühle, Optimisten oder Pessimisten, kann ich nicht für alle sprechen. Tatsächlich denke ich, dass ich nur für mich selbst sprechen, lernen und meine eigenen Wege des Umgangs und der Einschränkung meiner KI-Nutzung teilen kann und hoffe, dass diese Erfahrungen auch dir helfen können. 58 58 - 59 59 - Meine idealen Erfahrungen mit KI - der optimale goldene Weg zwischen dem übermäßigen Gebrauch von KI, der kognitiven Erosion nach sich zieht, und der Möglichkeit, den Hype zu ignorieren, ohne Vorteile zu nutzen - besteht darin, KI [genau dann](https://en.wikipedia.org/wiki/If_and_only_if) zu nutzen, wenn und nur wenn du davon profitierst. Mit anderen Worten: Kontrolliere deine Nutzung und beschränke sie auf ein Extrem, bei dem nur du selbst jemals mit den Inhalten in Kontakt kommst, die die KI produziert. Eine solche Einschränkung hat viele Konsequenzen; hier sind einige Beispiele, um besser zu verdeutlichen und zu betonen, was ich meine: 60 60 - 61 61 - * Nutze KI für persönliche Lernsitzungen: Wenn du dich zunächst mit einem neuen, völlig unbekannten Thema beschäftigen möchtest, kann dir KI allgemeine Übersichten geben und Zusammenhänge zu anderen Wissensbereichen und realen Anwendungen aufzeigen. Obwohl dies nicht unbedingt bedeutet, dass du wirklich schneller oder effizienter lernst, hilft es, den ersten Schritt zu machen und den Ball ins Rollen zu bringen. 62 62 - * Nutze KI für stupide und repetitive Aufgaben und frage nach Hilfe, wenn du sicher bist, dass das Problem oder die Aufgabe bereits von anderen tausendfach gelöst wurde. Aktuelle LLMs sind auf Basis bestehender Daten trainiert, weshalb sie gut darin sein sollten, bereits gelöste Probleme zu lösen, aber nicht das Rad neu zu erfinden, sondern die Nutzung des bestehenden runden Instruments vorzuschlagen. 63 63 - 64 64 - <br /> 65 65 - 66 66 - * Verwende KI nicht, um dich anderen Menschen gegenüber auszudrücken. Denke darüber nach, welche Bedeutung du vermitteln möchtest, welches Wissen du teilen willst, und packe deine Gedanken in deine eigenen Worte. Das hilft dir enorm, deine eigenen Gedanken zu festigen, dich an das Gelernte zu erinnern und dich viel besser zu fühlen. 67 67 - * Nutze KI nicht, um komplexe und kreative Arbeiten zu erstellen. Heutzutage gibt es Hunderte - wahrscheinlich Tausende - von Tools, die dir dabei helfen, Kunst, Musik, Code, Designs, Pläne usw. mit Hilfe von oder komplett durch KI zu erstellen. Obwohl dies den Anschein erweckt, dass du produktiver sein kannst, macht es dich in Wirklichkeit umso unwissender, je öfter du auf diese Methoden zurückgreifst, anstatt das zu tun, was du selbst gerne machst. Es ist völlig in Ordnung, kleine Teile der Arbeit an KI auszulagern, vor allem repetitive Aufgaben, die manuell einfach mehr Zeit in Anspruch nehmen würden. Kreative und originelle Arbeit hingegen sollte menschlich bleiben und mit Liebe hergestellt werden. Wenn dir das, was du tust, überhaupt nicht gefällt, ist dies ein Signal, dass du wahrscheinlich komplett damit aufhören solltest. 68 68 - * Lass dich nicht von all dem glänzenden KI-Zeug dort draußen verführen. Tools wie [Lovable](https://lovable.dev), [GitHub Copilot](https://github.com/features/copilot), [Cursor](https://cursor.com/en), [ChatGPT Voice](https://openai.com/index/chatgpt-can-now-see-hear-and-speak/) und neu auf dem Markt: [GPT-5](https://academy.openai.com/public/resources/intro-gpt-5), um nur einige zu nennen, wollen dir eigentlich nicht helfen. Sie wollen entweder direkt deine Daten oder deinen Arbeitsablauf besitzen, so dass du nicht mehr daraus entkommen kannst, sobald du dich daran gewöhnt hast. Leider gewöhnen sich Menschen faszinierend schnell an KI. 69 69 - 70 70 - Kurz gesagt, ich meine, dass KI zum Brainstorming und zur Unterstützung jedes Einzelnen bei der Erstellung eines Endprodukts verwendet werden sollte - nicht zu verwechseln mit einer durch KI erstellten Endlösung -, aber nicht für die Kommunikation mit anderen Menschen oder die Endergebnisse selbst (z. B. Bildbearbeitung, Blogartikel schreiben, Beiträge in sozialen Medien, Chatkommunikation, Motivationsreden, Essays usw.). Meiner Meinung nach kann das menschliche Gehirn nur durch eigene Fehler und Erfahrungen wachsen und lernen. Und du kannst nie aus deinen Fehlern lernen, wenn diese eigentlich von der KI generiert wurden. 71 71 - 72 72 - > KI hat ihren Platz beim Ideensammeln, aber ausdrucksstarke Arbeit sollte menschlich bleiben. 73 73 - 74 74 - ### Das Paradigma 75 75 - 76 76 - Ich habe kürzlich ein Software-Design-Muster namens "Onion Architecture" entdeckt. Um die Erklärung kurz zu halten: Das Hauptprinzip dieser Architektur ist ihre Aufteilung in Schichten, wobei jede Schicht nur mit ihren beiden Nachbarn verbunden ist (Geschwister ausgeschlossen), also der inneren und der äußeren Schicht. 77 77 - 78 78 - Um dieses Paradigma auf den aktuellen Kontext zu übertragen, kannst du dir die KI als ein Werkzeug vorstellen, das dir zur Verfügung steht, das jedoch von allen anderen Teilen unabhängig ist, da es nur von deinem Gehirn umgeben wird, und nur dein Gehirn kann auf die äußeren Schichten zugreifen, sie manipulieren, erstellen und modifizieren - in diesem Beispiel das Schreiben von Blogs, das Erstellen von Inhalten, die Kommunikation mit Menschen über Chats oder Reden oder das Ausdrücken mit Kunst oder Design. 79 79 - 80 80 - Hier siehst du ein Bild, das meine Vorstellung von einer begrenzten, aber idealen Nutzung von KI darstellt: 81 81 - 82 82 -  83 83 - 84 84 - Ob ein solcher architektonischer Ansatz und das Paradigma in diesem Kontext optimal oder nur subjektiv sind, kann in den Kommentaren unten kritisiert werden. 85 85 - 86 86 - ## Fazit 87 87 - 88 88 - Wie ich zu Beginn gesagt habe, ist dieser Blog-Beitrag sehr meinungsbasiert und soll lediglich meine Erfahrungen mit jedem teilen, damit du auch aus meinen Fehlern lernen und deine eigene Nutzung von KI optimieren kannst, um sie besser unter Kontrolle zu haben. Am Ende kannst du machen, was du willst, aber sei dir der Degradierung deines eigenen Gehirns bewusst, wenn du auch in die Falle der Übernutzung tappst. 89 89 - 90 90 - Eine Sache möchte ich noch erwähnen: Es hat mich mehrere Monate gekostet, diesen Blog-Post zu schreiben, zu überarbeiten und wieder von vorne anzufangen. Kein Blog ist perfekt, wie du vielleicht bei diesem hier bemerkt hast. Es gibt wahrscheinlich einige grammatikalische Fehler hier und da, einige Sätze, die tatsächlich keinen Sinn ergeben, aber das macht Menschen menschlich. Darüber hinaus gibt es sehr wahrscheinlich viele starke Meinungen in diesem Blog, bei denen du vollkommen widersprechen und überhaupt nicht mit mir übereinstimmen wirst (ich freue mich darauf, deine Kommentare zu sehen, die deinen Unmut ausdrücken), aber das macht mich aus. Mein Gehirn, meine Gedanken, meine Meinung. 91 91 - 92 92 - > "errare humanum est" 93 93 - 94 94 - ## Ressourcen mit fundierteren Beweisen 95 95 - 96 96 - Wenn du an Artikeln interessiert bist, die auf wissenschaftlicheren Studien oder Ansätzen basieren, kannst du einige oder alle davon lesen. Sie sind in keiner bestimmten Reihenfolge, also starte einfach in der Mitte und arbeite dich nach oben oder unten. 😊 97 97 - 98 98 - * [AI: Artificial Incompetence](https://lou.gg/blog/ai-artificial-incompetence) 99 99 - * [Studie zeigt, dass KI-Code-Tools Entwickler verlangsamen, obwohl sie sich schneller fühlen](https://www.theregister.com/AMP/2025/07/11/ai_code_tools_slow_down/) 100 100 - * [Firmen, die mit KI Geld sparen wollten, geben jetzt ein Vermögen aus, um ihre Fehler zu beheben](https://futurism.com/companies-fixing-ai-replacement-mistakes) 101 101 - * [Linus Torvalds meint, KI sei '90% Marketing und 10% Realität'](https://www.tomshardware.com/tech-industry/artificial-intelligence/linus-torvalds-reckons-ai-is-90-percent-marketing-and-10-percent-reality) 102 102 - * [Die Situation mit KI-Freundinnen ist TRAURIG (YouTube.com)](https://www.youtube.com/watch?v=Ftt5KqJ5D0Q) 103 103 - * [Macht KI dumm?](https://www.economist.com/science-and-technology/2025/07/16/will-ai-make-you-stupid) 104 104 - * [KI macht uns nicht produktiver. Sie macht uns kognitiv bankrott. (X.com)](https://x.com/itsalexvacca/status/1935343874421178762) 105 105 - * [Süchtig nach generativer KI sein](https://www.forbes.com/sites/lanceeliot/2024/08/24/being-addicted-to-generative-ai/) 106 106 - * [Eine weitere Studie zeigt, dass KI uns dumm macht](https://tech.co/news/another-study-ai-making-us-dumb) 107 107 - * [Macht KI uns intelligenter oder dümmer?... Oder künstlich intelligenter? (KI-symbiotische Krise)](https://cognitiontoday.com/is-ai-making-us-smarter-or-dumber-or-artificially-smarter/) 108 108 - * [Research: Gen AI Makes People More Productive—and Less Motivated](https://hbr.org/2025/05/research-gen-ai-makes-people-more-productive-and-less-motivated) 109 109 - * [Die leistungsfähigsten Wege, unseren neuen Dia-Browser zu "hacken" (YouTube.com)](https://www.youtube.com/watch?v=JCZUIm4S9QQ) 110 110 - 111 111 - Viel Spaß beim Lesen!

-46

src/content/docs/de/blog/diploma-thesis.mdx

reviewed

··· 1 1 - --- 2 2 - title: Entwicklung einer Kafka-basierten Pipeline und eines interaktiven Graphen 3 3 - zur Erkennung von Energieanomalien 4 4 - date: 2024-05-13 5 5 - description: Eine SOA-Lösung mit Siemens AG zur Analyse von Netzwerkanomalien im 6 6 - Stromnetz, mit einer Kafka-Pipeline, PostgreSQL, GraphQL-API und einem 7 7 - Angular-Dashboard zur Visualisierung. 8 8 - excerpt: Für unsere Diplomarbeit mit Siemens AG haben wir eine dienstorientierte 9 9 - Lösung entwickelt, um Netzwerkanomalien im Stromnetz zu erkennen — mit einer 10 10 - Kafka-Pipeline, PostgreSQL, GraphQL-API sowie einem Angular-Dashboard mit 11 11 - Tabellen und einem interaktiven Graphen zur Echtzeitvisualisierung. 12 12 - tags: 13 13 - - Tool 14 14 - authors: 15 15 - - trueberryless 16 16 - cover: 17 17 - alt: A beautiful cover image with the text "Diploma Thesis" 18 18 - image: ../../../../../public/blog/diploma-thesis.jpg 19 19 - featured: true 20 20 - giscus: true 21 21 - 22 22 - --- 23 23 - 24 24 - Während meines fünften Jahres an der HTL Krems (2023/24) musste jeder Schüler eine Diplomarbeit absolvieren – ein umfangreiches Projekt, das in zwei Hauptteile unterteilt war: theoretisch und praktisch. In Zweierteams verfassten wir eine theoretische Arbeit von etwa 100 Seiten, in der wir unser gewähltes Thema vorstellten, analysierten und erklärten. 25 25 - 26 26 - Der theoretische Teil war in drei Abschnitte gegliedert. Der erste bestand darin, vorhandenes Wissen aus glaubwürdigen Quellen wie Büchern und früheren Arbeiten zu sammeln und zusammenzufassen. Der zweite konzentrierte sich auf die Erkenntnisse und Ergebnisse, die wir aus unserem Prototyp – einer Softwarelösung, die wir für den praktischen Teil entwickelten – gewonnen hatten. Schließlich kombinierte der dritte Abschnitt diese beiden Ansätze und bot einen kritischen Vergleich und eine Reflexion darüber, was wir durch das Projekt insgesamt gelernt hatten. 27 27 - 28 28 - Der praktische Teil verlangte von uns, eine Lösung zu entwerfen und umzusetzen, die entweder software- oder hardwarebasiert war, um ein realweltliches Problem zu lösen. Mein Teamkollege Clemens Schlipfinger und ich entschieden uns ausschließlich auf Software zu konzentrieren, um die Zuverlässigkeit zu gewährleisten. Hardware kann unvorhersehbare Probleme verursachen, aber Software – insbesondere, wenn sie in robusten Docker-Containern bereitgestellt wird – bietet eine konsistente Umgebung, die überall nahtlos funktioniert. 29 29 - 30 30 - Was unser Projekt besonders spannend machte, war unsere Partnerschaft mit Siemens AG, einem renommierten multinationalen Unternehmen, das auf Energie-, Automatisierungs- und Digitalisierungslösungen spezialisiert ist. Diese Zusammenarbeit war unter unseren Mitschülern selten und verlieh unserem Projekt eine professionelle Dimension. Siemens beauftragte uns, eine dienstorientierte Softwarelösung zur Analyse von Anomalien im europäischen Stromnetz zu entwickeln. 31 31 - 32 32 - Das von uns entwickelte System bestand aus mehreren Komponenten, die jeweils für eine spezifische Funktion konzipiert waren. Im Kern befand sich eine Kafka-Anwendung, die für die Erfassung von Daten verantwortlich war – Berichte über Netzwerkanomalien, die wir als „Findings“ bezeichneten. Diese Berichte dokumentierten Ausfälle und Unregelmäßigkeiten im komplexen europäischen Stromnetz, das aus Millionen von verbundenen Komponenten wie Transistoren, Schaltern und Generatoren besteht. Kafka übermittelte die neuesten Anomalien an eine PostgreSQL-Datenbank, die dann über eine GraphQL-API zugänglich gemacht wurde. Diese API bot umfassende Funktionen wie Paginierung, Filterung und Abfragen, um eine nahtlose Integration mit unserem Angular-basierten Frontend zu gewährleisten. 33 33 - 34 34 - Das Frontend wurde als benutzerfreundliches Dashboard mit drei Hauptbereichen gestaltet: 35 35 - 36 36 - 1. Anomalien-Tabelle – Eine durchsuchbare, paginierte und filterbare Tabelle für die schnelle Navigation durch Anomalien. 37 37 - 38 38 - 2. Graph-Ansicht – Eine dynamische Visualisierung der Anomaliedaten, um die Quelle eines Problems im weitläufigen, komplexen Netz leichter zu lokalisieren. 39 39 - 40 40 - 3. Gesamtdashboard – Wichtige Kennzahlen und Einblicke für schnelle, umsetzbare Übersichten. 41 41 - 42 42 - Clemens und ich teilten unsere Verantwortlichkeiten gleichmäßig auf. Clemens übernahm die Backend-Systeme, einschließlich Kafka, PostgreSQL und der GraphQL-API, und sorgte für eine zuverlässige und effiziente Daten-Pipeline. Ich übernahm die Rolle des Projektleiters, koordinierte die Kommunikation mit Siemens und entwickelte das Frontend, um die nahtlose Integration der verschiedenen Komponenten sicherzustellen. Diese Zusammenarbeit ermöglichte es uns, unsere Stärken einzusetzen und eine ausgewogene Arbeitsverteilung aufrechtzuerhalten. 43 43 - 44 44 - Unser Endprodukt erfüllte nicht nur die Anforderungen von Siemens, sondern demonstrierte auch die Stärke einer gut gestalteten dienstorientierten Architektur (SOA) zur Lösung komplexer, realweltlicher Probleme. Es war äußerst befriedigend, unsere Software zuverlässig arbeiten zu sehen und verwertbare Einblicke zur Bewältigung von Stromnetzanomalien zu liefern. 45 45 - 46 46 - Für weitere Details zu unserer Arbeit können Sie unsere Thesis [hier](https://trueberryless.org/thesis.pdf) 📜 einsehen oder unseren Videokurs [hier](https://videos.trueberryless.org/videos/thesis/) 🎥 anschauen (beides nur auf Deutsch verfügbar).

-32

src/content/docs/de/blog/earworms.mdx

reviewed

··· 1 1 - --- 2 2 - title: Ohrwürmer und die Botschaft, die im Muster verborgen liegt 3 3 - description: Einige zufällige Gedanken über Ohrwürmer und ihre Botschaft, die im 4 4 - Muster verborgen liegt. 5 5 - date: 2025-07-23 6 6 - tags: 7 7 - - Mindspace 8 8 - authors: 9 9 - - trueberryless 10 10 - cover: 11 11 - alt: A beautiful cover image with the text "Earworms" 12 12 - image: ../../../../../public/blog/earworms.jpg 13 13 - tableOfContents: false 14 14 - giscus: true 15 15 - 16 16 - --- 17 17 - 18 18 - Ja, dieser Titel ist eine kleine Hommage an die ausgezeichnete Netflix-Serie "Arcane", aber darum geht es in diesem Beitrag nicht. 19 19 - 20 20 - Heute möchte ich einige Gedanken über Ohrwürmer teilen, ein Begriff, der ursprünglich aus dem Deutschen („Ohrwurm“) stammt und später als wörtliche Übersetzung ins Englische übernommen wurde. Die Bedeutung hinter diesem eher abstrakten Begriff sind eingängige Melodien—*sticky music*, wie es auf Wikipedia heißt. Dieses Phänomen tritt oft unvorhersehbar auf, besonders wenn unsere Gedanken von der Gegenwart abschweifen. 21 21 - 22 22 - {/* excerpt */} 23 23 - 24 24 - Während viele meiner Blog-Ideen während Zugfahrten, im Bett liegend oder einfach beim Nachdenken über das Leben auftauchen, entstand die Inspiration für diesen Beitrag buchstäblich unter der Dusche — wie es bei den guten alten *Duschen-Gedanken* sein sollte. Der Grund – wie Sie vielleicht beim Lesen des Themas bereits erahnen können – war ein Ohrwurm von einer Melodie, bei der ich schwören könnte, dass ich sie lange nicht gehört hatte, vielleicht 4–5 Wochen. 25 25 - 26 26 - Und dies scheint immer der verwirrende Teil an Ohrwürmern zu sein: Niemand weiß wirklich, wer entscheidet, wann sie „abgespielt“ werden. Ist es das Gehirn, das auf „Play“ drückt, wenn es ein wenig taub ist? Sie wissen, was ich meine, diese Momente, in denen Sie nicht wirklich wissen, woran Sie aktuell denken, und auch nicht darüber nachdenken müssen, worüber Sie nachdenken sollten, sondern einfach den Moment genießen. Es gibt ein weiteres österreichisches Sprichwort für genau dieses Szenario: „ins Narrenkastl schauen“, was so viel bedeutet wie *in die Leere starren*. Und ich denke, genau diese geistesabwesenden Momente sind der Ursprung und Grund, warum Ohrwürmer entstehen. 27 27 - 28 28 - Aber diese Frage bleibt dennoch: Wer entscheidet, was in jemandes Kopf abgespielt wird, wenn es passiert? Wer ist der DJ? Aus meiner eigenen Erfahrung habe ich ein wiederkehrendes Muster bemerkt, besonders wenn man in der letzten halben Stunde gerade Musik gehört hat. Mein Gehirn zumindest neigt dazu, Teile des **vorletzten Songs** zu wiederholen, also des Songs, der vor dem letzten Lied gespielt wurde. Diese Theorie funktioniert noch besser, wenn das letzte Lied in der Mitte pausiert oder einfach nicht perfekt zu Ende abgespielt wurde. 29 29 - 30 30 - Der genaue Grund dafür ist mir völlig unbekannt, aber wenn ich raten müsste, würde ich sagen, dass die Rhythmen des beendeten Songs (des vorletzten) irgendwo in deinem Kopf nachhallen, da das Lied selbst vielleicht eines dieser „Ich-verstumme-langsam-zum-Ende“-Songs war, was nicht meine liebste Art ist, Musik zu beenden, aber es regt das Gehirn dazu an, weiterzumachen. 31 31 - 32 32 - Zumindest ist das meine Vermutung. Ich wäre sehr daran interessiert, ob Sie ähnliche Muster erlebt haben, also schreiben Sie gerne Ihren eigenen Blog-Beitrag darüber oder teilen Sie diesen mit Freunden, um ihn gemeinsam zu diskutieren!

-35

src/content/docs/de/blog/github-profile-readme.mdx

reviewed

··· 1 1 - --- 2 2 - title: Entwerfen eines Profils, das innerhalb der GitHub-Regeln funktioniert 3 3 - date: 2025-02-05 4 4 - description: Wie ich ein GitHub-Profile-README erstellt habe, das es eigentlich 5 5 - nicht geben sollte, aber es existiert 6 6 - tags: 7 7 - - GitHub 8 8 - - Markdown 9 9 - authors: 10 10 - - trueberryless 11 11 - cover: 12 12 - alt: A beautiful cover image with the text "GitHub Profile README" 13 13 - image: ../../../../../public/blog/github-profile-readme.jpg 14 14 - 15 15 - --- 16 16 - 17 17 - Jedes großartige Projekt beginnt mit der Erkenntnis eines Problems. Mein GitHub-Profile-README war überladen, voll mit zu vielen Informationen, zu vielen Abzeichen und einer überwältigenden Menge an Inhalten, die Stil und Struktur fehlten. Es gab Erfolge von Hackathons, GitHub-Beitragsgrafiken, verschiedene technische Abzeichen und vieles mehr, was es visuell unansprechend und schwer navigierbar machte. Anfangs dachte ich, dies sei eine effektive Art, mich zu präsentieren, aber mit der Zeit wurde klar, dass die Informationen eher überwältigend als informativ waren. Ich wollte etwas Neues, einen raffinierteren und visuell ansprechenderen Ansatz, um mein Profil zu präsentieren, und die Idee, ein Bento-Raster zu implementieren, kam mir in den Sinn. Das Ziel war es, ein Layout zu schaffen, das nicht nur funktional, sondern auch ästhetisch beeindruckend und strukturiert ist. 18 18 - 19 19 - {/* excerpt */} 20 20 - 21 21 - Der erste Schritt bestand darin, ein ideales Layout unter Verwendung von HTML und CSS zu entwerfen. Das Ergebnis war vielversprechend, ein strukturiertes und optisch ansprechendes Design, das die beabsichtigten Informationen effektiv vermittelte. Doch die direkte Umsetzung in meinem GitHub-Profile-README war nicht unkompliziert. GitHub-Flavored Markdown unterliegt strengen Einschränkungen hinsichtlich der unterstützten HTML-Elemente aufgrund von Sicherheitsvorgaben. Viele essenzielle HTML-Tags waren eingeschränkt, was es unmöglich machte, das Design wie vorgesehen einzubetten. Das Verständnis dieser Einschränkungen bedeutete, dass der gesamte Ansatz neu durchdacht werden musste. 22 22 - 23 23 - Angesichts dieser Einschränkungen überlegte ich, alternative Wege zu finden, um die Inhalte dynamisch zu generieren und zu präsentieren. Ein Ansatz bestand darin, die Inhaltsaktualisierungen mit einem Python-Skript zu automatisieren, um mein neuestes GitHub-Repository abzurufen und es dynamisch in das README einzufügen. Das Skript griff auf die GitHub-API zu, rief das zuletzt aktualisierte Repository ab und änderte entsprechend das README. Obwohl dies ein interessantes Experiment in Automatisierung war, löste es nicht das Kernproblem, nämlich die Notwendigkeit eines strukturierten und visuell ansprechenden Designs. 24 24 - 25 25 - Unter Berücksichtigung alternativer Ansätze dachte ich kurzzeitig daran, einen Screenshot des entworfenen HTML-Layouts zu machen und ihn als statisches Bild im README einzubetten. Obwohl dies das Problem visuell gelöst hätte, fühlte es sich wie eine unelegante Lösung an, die mangelnde Flexibilität und Reaktionsfähigkeit aufwies. Weitergehend suchte ich nach einer Methode, die sowohl Struktur als auch Anpassungsfähigkeit ermöglichte und dennoch dynamische Inhaltsaktualisierungen beibehielt. 26 26 - 27 27 - SVGs traten als eine potenzielle Lösung in Erscheinung. Sie unterstützen Skalierbarkeit, bewahren die visuelle Klarheit über verschiedene Auflösungen hinweg und ermöglichen das Einbetten von Texten und anderen Elementen. Ein frühes Experiment beinhaltete das Einbetten von HTML in ein SVG unter Verwendung des `foreignObject`-Tags. Obwohl dies konzeptionell vielversprechend war, erwies sich die Umsetzung als komplex und wurde vorübergehend beiseite gelegt. Beim späteren Zurückkehren zum Problem war ein strukturierterer Ansatz erforderlich. 28 28 - 29 29 - Der endgültige Ansatz beinhaltete die Verwendung einer zusammengesetzten SVG-Struktur. Die Lösung bestand aus mehreren Schlüsselkomponenten: Konvertierung des ursprünglichen HTML-Layouts in eine SVG-Darstellung, Kodierung von Bildern mit Base64, um sicherzustellen, dass sie korrekt geladen wurden, Integration dynamischer Elemente wie GitHub-Statistiken und Spotify-Status-Updates als Inline-SVGs sowie Automatisierung der Updates über GitHub Actions. Durch den Einsatz dieser Techniken wurde das Bento-Rasterlayout voll funktionsfähig, konnte sich selbst aktualisieren und behielt dabei ein sauberes, strukturiertes Erscheinungsbild innerhalb der Einschränkungen von GitHub-Flavored Markdown bei. 30 30 - 31 31 - Ein entscheidender Wendepunkt war die Entdeckung eines Stack Overflow-Beitrags, der eine Methode zur effizienten und effektiven Konvertierung von HTML in SVG beschrieb. Diese Methode bot eine strukturierte Möglichkeit, die erforderlichen SVG-Elemente zu generieren, während das beabsichtigte Design beibehalten wurde. Durch die Kombination dieser Methode mit Base64-Kodierung für Bilder und GitHub Actions zur Automatisierung entstand eine vollständig realisierte Lösung, die alle ursprünglichen Anforderungen erfüllte. 32 32 - 33 33 - Die endgültige Implementierung besteht aus einem verfeinerten und visuell eindrucksvollen GitHub-Profile-README, das dynamische Inhaltsaktualisierungen integriert und dabei eine elegante Struktur beibehält. Sie präsentiert Informationen klar, ohne unnötige Überladung, und ist vollständig automatisiert, aktualisiert sich alle fünf Minuten ohne manuelles Eingreifen. Das Projekt erforderte umfangreiche Recherche und Experimente mit SVGs, GitHub Actions und Markdown-Einschränkungen. Der Prozess verlangte Ausdauer und Problemlösungsfähigkeiten, um innerhalb der Plattformbeschränkungen ein technisch beeindruckendes Ergebnis zu erzielen. Das Resultat ist ein GitHub-Profile-README, das Design, Automatisierung und Funktionalität innerhalb der Beschränkungen der Plattform effektiv ausbalanciert. 34 34 - 35 35 - Wenn du nun inspiriert bist, selbst ein beeindruckendes GitHub-Profile-README zu erstellen, lies meinen [technischeren und humorvollen Blog-Beitrag](../../../../../blog/technically-impressive-github-profile-readme/) oder schau direkt in mein Repository [github.com/trueberryless/trueberryless](https://github.com/trueberryless/trueberryless/tree/7519c6f50094bdfd6fb47f610e6638ac8efdd6ad). Und falls dir meine Arbeit hilft, gib ihr gern einen ⭐ und folge mir auf GitHub unter [trueberryless](https://github.com/trueberryless)! 🚀

-36

src/content/docs/de/blog/mutanuq.mdx

reviewed

··· 1 1 - --- 2 2 - title: "Die Organisation des Schullebens: Die Reise hinter Mutanuq" 3 3 - date: 2023-11-13 4 4 - description: Eine schnelle, Markdown-basierte Website, die Schulinhalte 5 5 - organisiert, das Lernen vereinfacht und das Bildungswachstum unterstützt. 6 6 - excerpt: Mutanuq ist eine schnelle, Markdown-basierte Website, die ich 7 7 - entwickelt habe, um Schulinhalte zu organisieren, das Lernen effizienter zu 8 8 - gestalten und eine verlässliche Ressource sowohl für meine Mitschüler als auch 9 9 - für mich selbst zu schaffen. 10 10 - tags: 11 11 - - Education 12 12 - - Markdown 13 13 - - Starlight 14 14 - authors: 15 15 - - trueberryless 16 16 - cover: 17 17 - alt: A beautiful cover image with the text "Mutanuq" 18 18 - image: ../../../../../public/blog/mutanuq.jpg 19 19 - 20 20 - --- 21 21 - 22 22 - Im zweiten Jahr an der HTL Krems, 2021, begann ich ein Projekt, das zwei Leidenschaften von mir vereinte: meine eigene Website zu erstellen und bessere Wege zu finden, den unendlichen Strom an Schulmaterial zu organisieren. Wie viele Schüler waren meine Notizen über OneNote, Word-Dateien, Excel-Tabellen, Google Drive und sogar Tools wie [Witeboard](https://witeboard.com/) verstreut. Das Chaos war überwältigend und machte es schwer, sich effektiv auf das Lernen zu konzentrieren. 23 23 - 24 24 - Getrieben von der Vision, diesen Prozess zu vereinfachen – nicht nur für mich, sondern auch für meine Mitschüler – entschied ich mich, eine zentrale Plattform zu schaffen, um Schulinhalte zusammenzufassen. Mein Ziel war zweigeteilt: Das Lernen zu vereinfachen und meine Mitschüler zu motivieren. 25 25 - 26 26 - Zu jener Zeit kannte ich keine Frameworks, die es einfacher gemacht hätten, dokumentationsartige Websites zu erstellen. Stattdessen nutzte ich reines HTML, CSS und JavaScript, um die ersten Versionen dessen zu entwickeln, was ich *Schneider IT* nannte. Obwohl ich es liebte, daran zu arbeiten, waren meine ersten Versuche umständlich – die dynamische Generierung des Inhaltsverzeichnisses und der Seitenleiste mit eigenem JavaScript-Code führte zu quälend langsamen Ladezeiten. Es dauerte über 10 Sekunden, bis alles angezeigt wurde! 27 27 - 28 28 - Trotz der Rückschläge arbeitete ich weiter daran. Bis 2023 hatte ich rund 10 Versionen der Website erstellt und verworfen, immer auf der Suche nach einem klareren Design und einem effizienteren Verwaltungssystem. Das Potenzial der Website war mir klar, doch an der Benutzerfreundlichkeit fehlte es noch. 29 29 - 30 30 - Dann entdeckte ich [Starlight](https://starlight.astro.build/), ein leistungsstarkes und beeindruckendes Framework, erstellt von [Chris Swithinbank (@delucis)](https://github.com/delucis), um schnelle, Markdown-basierte Websites zu entwickeln. Diese Entdeckung war ein Wendepunkt – sie erlaubte mir, zwei meiner Leidenschaften zu verbinden: Websites zu erstellen und Markdown für seine Einfachheit und Eleganz zu nutzen. 31 31 - 32 32 - Mit dem Wechsel zu Starlight entwickelte sich *Schneider IT* zu *Mutanuq*. Der neue Name markierte einen Neuanfang und spiegelte die optimierte, modernisierte Website wider, die sie inzwischen geworden war. Ich schrieb alles neu, optimierte die Leistung der Website und konzentrierte mich darauf, Inhalte zu erstellen, die speziell auf die Bedürfnisse meiner Mitschüler zugeschnitten waren, insbesondere für bevorstehende Prüfungen. 33 33 - 34 34 - Die Transformation machte sich bezahlt. Freunde begannen, die Website regelmäßig zu nutzen und gaben begeistertes Feedback, wie *„Bro, diese Website sieht fantastisch aus!“* Mutanuq war nicht nur ein Werkzeug für Prüfungen – es wurde zu einer vertrauenswürdigen Ressource für meine Mitschüler und einem persönlichen Archiv für all das Wissen, das ich über die Schule hinaus bewahren wollte. 35 35 - 36 36 - Dank Starlight wurde das Verwalten und Erweitern von Mutanuq mühelos, und das Projekt entwickelte sich zu etwas, das ich bis heute gerne weiterführe. Was als *Schneider IT* begann – eine kleine Idee, meine Notizen zu organisieren – erblühte zu *Mutanuq*, einer Plattform, die das Lernen für andere vereinfacht und wertvolles Wissen für mein zukünftiges Ich bewahrt.

-151

src/content/docs/de/blog/rehype-github-badge-links.mdx

reviewed

··· 1 1 - --- 2 2 - title: Wie man ein Rehype-Plugin erstellt, das GitHub-Links in schöne Badges 3 3 - verwandelt 4 4 - description: Lernen Sie, wie Sie ein einfaches und zugleich ansprechendes 5 5 - Rehype-Plugin erstellen, das GitHub-Profillinks automatisch in stilvolle, 6 6 - Abzeichen-ähnliche Links mit Profilbildern umwandelt – perfekt, um Ihrem Blog 7 7 - oder Ihren Dokumentationen Persönlichkeit zu verleihen. 8 8 - date: 2025-07-12 9 9 - tags: 10 10 - - Plugins 11 11 - - Education 12 12 - authors: 13 13 - - trueberryless 14 14 - excerpt: Entdecken Sie, wie ein kleines Rehype-Plugin Ihren GitHub-Links einen 15 15 - großen visuellen Schub verleiht. Mit nur wenigen Zeilen Code verwandeln wir 16 16 - normale Profillinks in elegante Abzeichen mit Avataren, inspiriert von Antfus 17 17 - Website und unterstützt durch Astro + Starlight. 18 18 - cover: 19 19 - alt: A beautiful cover image with the text "Badge Links" 20 20 - image: ../../../../../public/blog/rehype-github-badge-links.jpg 21 21 - tableOfContents: false 22 22 - featured: true 23 23 - 24 24 - --- 25 25 - 26 26 - Kürzlich habe ich diesem Blog eine ganz kleine, aber feine Funktion hinzugefügt, die Ihnen als regelmäßiger Leser vielleicht aufgefallen ist. Es ist nichts riesiges, aber es verleiht jedem Blog diesen kleinen, charmanten Touch, nach dem ich mich schon lange gesehnt habe. Ich spreche ~~schreibe~~ von diesen grünen Abzeichen mit Profilbildern, die Sie auch in diesem Blog sehen können. 27 27 - 28 28 - Die Inspiration, sie zu erstellen, stammt von niemand anderem als [Antfu](https://github.com/antfu) selbst, der solche Abzeichen überall auf seiner Website hat (zum Zeitpunkt des Schreibens). 29 29 - 30 30 - Anfangs dachte ich, dafür wäre eine lange und mühsame Programmiersitzung nötig, um dieselbe visuelle Schönheit zu erreichen. Doch nach einigem "Vibe Coding" – wie [Andrej Karpathy den Begriff prägte](https://x.com/karpathy/status/1886192184808149383) – wurde mir schnell klar, dass diese Abzeichen nur ein kleines [rehype](https://github.com/rehypejs)-Plugin von ihrer Existenz entfernt waren. 31 31 - 32 32 - Dies ist der gesamte Code hinter dem Rehype-Plugin: 33 33 - 34 34 - ```ts 35 35 - // src/lib/rehype-github-badge-links.ts 36 36 - import { h } from "hastscript"; 37 37 - import { visit } from "unist-util-visit"; 38 38 - 39 39 - export default function rehypeGitHubBadgeLinks() { 40 40 - return (tree) => { 41 41 - visit(tree, "element", (node) => { 42 42 - if ( 43 43 - node.tagName === "a" && 44 44 - typeof node.properties?.href === "string" && 45 45 - node.properties.href.startsWith("https://github.com/") 46 46 - ) { 47 47 - const match = node.properties.href.match( 48 48 - /^https:\/\/github\.com\/([\w-]+)\/?$/ 49 49 - ); 50 50 - if (match) { 51 51 - const username = match[1]; 52 52 - 53 53 - // Add GitHub badge class 54 54 - node.properties.className = (node.properties.className || []).concat( 55 55 - "gh-badge" 56 56 - ); 57 57 - 58 58 - // Build avatar image 59 59 - const avatarImg = h("img", { 60 60 - src: `https://github.com/${username}.png`, 61 61 - alt: username, 62 62 - }); 63 63 - 64 64 - // Prepend avatar image to original children 65 65 - node.children.unshift(avatarImg); 66 66 - } 67 67 - } 68 68 - }); 69 69 - }; 70 70 - } 71 71 - ``` 72 72 - 73 73 - Im Wesentlichen durchsucht dieses Plugin das HTML nach Links, die auf ein GitHub-Profil verweisen. Wenn es einen solchen Link findet, fügt es vor dem Textinhalt ein `<img>`-Tag mit dem Profilbild des GitHub-Benutzers oder der Organisation ein. Dies ist dank GitHubs Funktion, das Bild als Ressource hinter dem Profillink mit der Endung `.png` zur Verfügung zu stellen, sehr konsistent möglich. Lesen Sie mehr über diese Funktion in [diesem großartigen Artikel auf `dev.to`](https://dev.to/10xlearner/how-to-get-the-profile-picture-of-a-github-account-1d82). 74 74 - 75 75 - Mit ein wenig zusätzlichem Styling sieht es meiner Meinung nach wirklich niedlich aus. Bitte beachten Sie, dass dies eine [Starlight](https://starlight.astro.build)-Seite ist und ich verfügbare CSS-Variablen verwende, wie in Zeile vier: 76 76 - 77 77 - ```css "var(--sl-color-accent-low)" "var(--sl-color-accent)" 78 78 - // src/styles/custom.css 79 79 - .gh-badge { 80 80 - display: inline-flex; 81 81 - align-items: center; 82 82 - background-color: var(--sl-color-accent-low); 83 83 - border-radius: 9999px; 84 84 - padding: 0em 0.5em 0 0.3em; 85 85 - font-size: 0.9em; 86 86 - text-decoration: none; 87 87 - color: inherit; 88 88 - font-weight: 500; 89 89 - transition: background-color 0.2s ease; 90 90 - transform: translateY(0.29rem); 91 91 - border: 1px solid var(--sl-color-accent); 92 92 - } 93 93 - 94 94 - .gh-badge:hover { 95 95 - background-color: var(--sl-color-accent); 96 96 - } 97 97 - 98 98 - .gh-badge img { 99 99 - border-radius: 9999px; 100 100 - width: 1.3em; 101 101 - height: 1.3em; 102 102 - } 103 103 - ``` 104 104 - 105 105 - Um nun alles zusammenzufügen, müssen Sie beispielsweise in einer Astro-Site lediglich das Rehype-Plugin wie folgt zur Konfiguration hinzufügen: 106 106 - 107 107 - ```ts ins={6-8} 108 108 - // astro.config.mjs 109 109 - import { defineConfig } from 'astro/config'; 110 110 - import rehypeGitHubBadgeLinks from "./src/lib/rehype-github-badge-links"; 111 111 - 112 112 - export default defineConfig({ 113 113 - markdown: { 114 114 - rehypePlugins: [rehypeGitHubBadgeLinks] 115 115 - } 116 116 - }) 117 117 - ``` 118 118 - 119 119 - Lesen Sie mehr über die Einbindung von Rehype-Plugins in Astro in [deren Konfigurationsreferenz](https://docs.astro.build/en/reference/configuration-reference/#markdownrehypeplugins). 120 120 - 121 121 - Vergessen Sie nicht, das CSS auf ähnliche Weise je nach Framework hinzuzufügen – in Starlight können Sie individuelle globale CSS-Stile konfigurieren, indem Sie [diese Anweisungen](https://docs.astro.build/en/guides/styling/#scoped-styles) befolgen – und schon können Sie Ihre eigenen Abzeichen-Links bewundern. Teilen Sie diesen Beitrag gerne mit jedem, den Sie dazu überzeugen möchten, diese Funktionen ebenfalls zu nutzen. 122 122 - 123 123 - <details> 124 124 - <summary>✨ Bonus-Punkt</summary> 125 125 - 126 126 - Wenn Sie ein solches Abzeichen auch für andere Links verwenden möchten, empfehle ich Ihnen, sich selbst eine kleine Astro-Komponente wie diese zu basteln: 127 127 - 128 128 - ```astro 129 129 - --- 130 130 - // src/components/BadgeLink.astro 131 131 - const { href, src, text, className = "gh-badge" } = Astro.props; 132 132 - --- 133 133 - 134 134 - <a href={href} class={className}> 135 135 - <img src={src} alt={text} /> 136 136 - {text} 137 137 - </a> 138 138 - ``` 139 139 - 140 140 - Stellen Sie einfach sicher, dass das CSS global ist (oder [scopen](https://docs.astro.build/en/guides/styling/#scoped-styles) Sie es in der obigen Komponente) und es ist einsatzbereit: 141 141 - 142 142 - ```mdx 143 143 - import BadgeLink from "../components/BadgeLink.astro"; 144 144 - 145 145 - <BadgeLink 146 146 - href="https://github.com/withastro/starlight" 147 147 - src="/starlight.png" 148 148 - text="Starlight" 149 149 - /> 150 150 - ``` 151 151 - </details>

-304

src/content/docs/de/blog/setup-argocd-for-kubernetes.mdx

reviewed

··· 1 1 - --- 2 2 - title: Einrichten von Argo CD in einem k3s-Cluster 3 3 - description: Heute sehen wir uns an, wie man Argo CD in einem k3s-Cluster einrichtet. 4 4 - date: 2024-07-27 5 5 - lastUpdated: 2024-07-28 6 6 - tags: 7 7 - - Automation 8 8 - - Deployment Series 9 9 - - Education 10 10 - excerpt: Um unseren k3s-Cluster und insbesondere den CI/CD-Workflow weiter zu 11 11 - verbessern, werfen wir einen Blick auf das GitOps-Tool <a class="gh-badge" 12 12 - href="https://github.com/argoproj"><img src="https://github.com/argoproj.png" 13 13 - alt="Argo CD" />Argo CD</a>. Hier zeigen wir, wie wir es in unseren Cluster 14 14 - integrieren können. Unsere Tech-Stack für den Deployment-Prozess umfasst k3s, 15 15 - Helm, Cilium und nach diesem Tutorial auch Argo CD. 16 16 - authors: 17 17 - - trueberryless 18 18 - cover: 19 19 - alt: A beautiful cover image with the text "Argo CD" 20 20 - image: ../../../../../public/blog/setup-argocd-for-kubernetes.jpg 21 21 - giscus: true 22 22 - 23 23 - --- 24 24 - 25 25 - Nachdem wir Vegard S. Hagens Artikel “[Argo CD Kustomize with Helm](https://blog.stonegarden.dev/articles/2023/09/argocd-kustomize-with-helm/)” gelesen und beschlossen haben, dass seine Lösung nicht passend für unseren Cluster ist, haben wir uns direkt in die Standard-Argo-CD-„[Getting started](https://argo-cd.readthedocs.io/en/stable/getting_started/)“-Anleitung vertieft. Nun führen wir Sie durch die Herausforderungen bei der Einrichtung von [Argo CD](https://github.com/argoproj) auf [k3s](https://github.com/k3s-io) und [Cilium](https://github.com/cilium). Dies knüpft an das Kapitel „[Setup Certificate Manager with Cloudflare](../../../../../blog/setup-kubernetes-with-cilium-and-cloudflare#setup-certificate-manager-with-cloudflare)“ aus unserem letzten Beitrag „[Setting up Kubernetes with Cilium and Cloudflare](../../../../../blog/setup-kubernetes-with-cilium-and-cloudflare)“ an. In genau diesem Beitrag haben wir am Ende auch [Keel](https://github.com/keel-hq) eingerichtet, aber dieser Schritt ist jetzt überflüssig, da wir Argo CD nutzen, um den neuesten Stand der Technik-Code aus jeder [GitHub](https://github.com/github)-Repo zu holen. Viel Spaß beim Lesen! 26 26 - 27 27 - :::note 28 28 - Wir gehen davon aus, dass Sie [unseren anderen Blogbeitrag](../../../../../blog/setup-kubernetes-with-cilium-and-cloudflare) gelesen haben. 29 29 - ::: 30 30 - 31 31 - ## Voraussetzungen 32 32 - 33 33 - Bevor wir starten, müssen wir sicherstellen, dass `kubectl` installiert ist, eine kubeconfig-Datei vorhanden ist (k3s speichert diese Datei hier: 34 34 - 35 35 - ```yaml 36 36 - #/etc/rancher/k3s/config.yaml 37 37 - flannel-backend: "none" 38 38 - disable-kube-proxy: true 39 39 - disable-network-policy: true 40 40 - cluster-init: true 41 41 - disable: 42 42 - - servicelb 43 43 - - traefik 44 44 - ``` 45 45 - 46 46 - ) und CoreDNS (prüfen Sie, ob Sie CoreDNS haben, indem Sie diesen 47 47 - 48 48 - ```bash 49 49 - kubectl get pods -n kube-system -l k8s-app=kube-dns 50 50 - ``` 51 51 - 52 52 - Befehl ausführen). 53 53 - 54 54 - ## Installation 55 55 - 56 56 - Zunächst wenden wir alle notwendigen Services, Deployments und viele andere Kubernetes-Ressourcen an, indem wir folgendes ausführen: 57 57 - 58 58 - ```bash 59 59 - kubectl create namespace argocd 60 60 - kubectl apply -n argocd -f https://raw.githubusercontent.com/argoproj/argo-cd/stable/manifests/install.yaml 61 61 - ``` 62 62 - 63 63 - ## Zertifikat 64 64 - 65 65 - Zusätzlich benötigen wir ein Zertifikat: 66 66 - 67 67 - ```yaml 68 68 - apiVersion: cert-manager.io/v1 69 69 - kind: Certificate 70 70 - metadata: 71 71 - name: argocd 72 72 - namespace: argocd 73 73 - spec: 74 74 - secretName: argocd 75 75 - issuerRef: 76 76 - name: acme-issuer 77 77 - kind: ClusterIssuer 78 78 - dnsNames: 79 79 - - "argo-cd.trueberryless.org" 80 80 - ``` 81 81 - 82 82 - Wenden Sie diese Ressource an, indem Sie `kubectl apply -f certificate.yaml` ausführen. 83 83 - 84 84 - ## Ingress-Controller 85 85 - 86 86 - Außerdem benötigen wir einen Ingress-Controller, der von Cilium verwaltet wird: 87 87 - 88 88 - ```yaml 89 89 - apiVersion: networking.k8s.io/v1 90 90 - kind: Ingress 91 91 - metadata: 92 92 - name: argocd-ingress 93 93 - namespace: argocd 94 94 - spec: 95 95 - rules: 96 96 - - host: argo-cd.trueberryless.org 97 97 - http: 98 98 - paths: 99 99 - - path: / 100 100 - pathType: Prefix 101 101 - backend: 102 102 - service: 103 103 - name: argocd-server 104 104 - port: 105 105 - number: 80 106 106 - 107 107 - tls: 108 108 - - hosts: 109 109 - - argo-cd.trueberryless.org 110 110 - secretName: argocd 111 111 - ``` 112 112 - 113 113 - Wenden Sie diese Ressource an, indem Sie `kubectl apply -f argocd-ingress.yaml` ausführen. 114 114 - 115 115 - ## TLS in Argo CD deaktivieren 116 116 - 117 117 - Mit dem Zertifikat ist die Verbindung zwischen Client und Server gesichert. Es gibt jedoch immer noch ein selbstsigniertes Zertifikat innerhalb der [Argo CD](https://github.com/argoproj)-Services, das wir nicht unbedingt benötigen. Daher können wir die Sicherheit des Argo-CD-Servers deaktivieren, indem wir die Eigenschaft `server.insecure` bearbeiten. 118 118 - 119 119 - Um das zu tun, führen wir zunächst diesen Befehl aus: 120 120 - 121 121 - ```bash 122 122 - kubectl edit cm argocd-cmd-params-cm -n argocd 123 123 - ``` 124 124 - 125 125 - was hoffentlich eine Datei in vim oder neovim öffnet (ansonsten wäre es ziemlich unangenehm, wenn Sie uns fragen, LMAO). Die Datei sollte in etwa so aussehen: 126 126 - 127 127 - ```yaml {21-22} 128 128 - # Please edit the object below. Lines beginning with a '#' will be ignored, 129 129 - # and an empty file will abort the edit. If an error occurs while saving this file will be 130 130 - # reopened with the relevant failures. 131 131 - # 132 132 - apiVersion: v1 133 133 - data: 134 134 - server.insecure: "true" 135 135 - kind: ConfigMap 136 136 - metadata: 137 137 - annotations: 138 138 - kubectl.kubernetes.io/last-applied-configuration: | 139 139 - {"apiVersion":"v1","kind":"ConfigMap","metadata":{"annotations":{},"labels":{"app.kubernetes.io/name":"argocd-cmd-params-cm","app.kubernetes.io/part-of":"argocd"},"name":"arg 140 140 - creationTimestamp: "2024-07-27T11:15:28Z" 141 141 - labels: 142 142 - app.kubernetes.io/name: argocd-cmd-params-cm 143 143 - app.kubernetes.io/part-of: argocd 144 144 - name: argocd-cmd-params-cm 145 145 - namespace: argocd 146 146 - resourceVersion: "239710156" 147 147 - uid: 5f53d26b-3adf-4ed9-9807-c3da847335a2 148 148 - data: 149 149 - server.insecure: "true" 150 150 - ``` 151 151 - 152 152 - Die letzten beiden Zeilen werden wahrscheinlich zuerst nicht vorhanden sein, aber genau diese Einstellung wollen wir erreichen. Fügen Sie diese beiden Zeilen (oben markiert) hinzu und speichern Sie die Datei (`Esc` → `:wq`, wenn Sie cool sind). 153 153 - 154 154 - Starten Sie den Argo-CD-Server neu, indem Sie warten, bis das Rollout abgeschlossen ist: 155 155 - 156 156 - ```bash 157 157 - kubectl rollout restart deploy argocd-server -n argocd 158 158 - kubectl rollout status deploy argocd-server -n argocd 159 159 - ``` 160 160 - 161 161 - Nach all diesen Schritten sollten wir nun die Benutzeroberfläche unter [`https://argo-cd.trueberryless.org`](https://argo-cd.trueberryless.org) (passwortgeschützt) sehen. 162 162 - 163 163 -  164 164 - 165 165 - :::note 166 166 - Die Anmeldedaten der Argo-CD-Benutzeroberfläche bestehen aus einem Benutzer und einem Passwort. Der Benutzer ist immer `admin` und Sie können Ihr Passwort herausfinden, indem Sie diesen Befehl ausführen: 167 167 - 168 168 - ```bash 169 169 - kubectl -n argocd get secret argocd-initial-admin-secret -o jsonpath="{.data.password}" | base64 -d 170 170 - ``` 171 171 - ::: 172 172 - 173 173 - ## Manifest im Repository hinzufügen 174 174 - 175 175 - Um nun eine neue Anwendung in [Argo CD](https://github.com/argoproj) zu erstellen (entweder über die Benutzeroberfläche oder CLI – wir nutzen die Benutzeroberfläche, da wir die CLI nicht eingerichtet haben), müssen wir das Git-Repository vorbereiten. Da das Repository die einzige Quelle der Wahrheit ist, definieren wir dort auch alle Kubernetes-Ressourcen, die von Argo CD erstellt werden sollen. 176 176 - 177 177 - Wir empfehlen, im Git-Repository einen neuen Ordner mit dem Namen `manifest` zu erstellen. In diesem Ordner erstellen wir einige Dateien: 178 178 - 179 179 - * `certificate.yaml`: 180 180 - 181 181 - ```yaml 182 182 - apiVersion: cert-manager.io/v1 183 183 - kind: Certificate 184 184 - metadata: 185 185 - name: mutanuq 186 186 - namespace: mutanuq 187 187 - spec: 188 188 - secretName: mutanuq 189 189 - issuerRef: 190 190 - name: acme-issuer 191 191 - kind: ClusterIssuer 192 192 - dnsNames: 193 193 - - "mutanuq.trueberryless.org" 194 194 - ``` 195 195 - 196 196 - * `deployment.yaml`: 197 197 - 198 198 - ```yaml 199 199 - apiVersion: apps/v1 200 200 - kind: Deployment 201 201 - metadata: 202 202 - name: mutanuq 203 203 - namespace: mutanuq 204 204 - labels: 205 205 - app: mutanuq 206 206 - spec: 207 207 - replicas: 3 208 208 - selector: 209 209 - matchLabels: 210 210 - app: mutanuq 211 211 - template: 212 212 - metadata: 213 213 - labels: 214 214 - app: mutanuq 215 215 - spec: 216 216 - containers: 217 217 - - name: mutanuq 218 218 - image: "trueberryless/mutanuq" 219 219 - imagePullPolicy: Always 220 220 - ``` 221 221 - 222 222 - * `service.yaml`: 223 223 - 224 224 - ```yaml 225 225 - apiVersion: v1 226 226 - kind: Service 227 227 - metadata: 228 228 - name: mutanuq 229 229 - namespace: mutanuq 230 230 - annotations: 231 231 - cert-manager.io/issuer: acme-issuer 232 232 - spec: 233 233 - selector: 234 234 - app: mutanuq 235 235 - ports: 236 236 - - name: http 237 237 - port: 80 238 238 - ``` 239 239 - 240 240 - * `ingress.yaml`: 241 241 - 242 242 - ```yaml 243 243 - apiVersion: networking.k8s.io/v1 244 244 - kind: Ingress 245 245 - metadata: 246 246 - name: mutanuq 247 247 - namespace: mutanuq 248 248 - spec: 249 249 - rules: 250 250 - - host: mutanuq.trueberryless.org 251 251 - http: 252 252 - paths: 253 253 - - path: / 254 254 - pathType: Prefix 255 255 - backend: 256 256 - service: 257 257 - name: mutanuq 258 258 - port: 259 259 - number: 80 260 260 - 261 261 - tls: 262 262 - - hosts: 263 263 - - mutanuq.trueberryless.org 264 264 - secretName: mutanuq 265 265 - ``` 266 266 - 267 267 - Diese Dateien sind im Grunde dieselben wie in dem [anderen Beitrag](../../../../../blog/setup-kubernetes-with-cilium-and-cloudflare#example-app-mutanuq), jedoch in vier Dateien aufgeteilt, da uns dies den Vorteil bietet, das Manifest aus [GitHub](https://github.com/github)-Aktionen heraus zu manipulieren. Aber der Reihe nach: Im [nächsten Beitrag](../../../../../blog/setup-continuous-integration-github-repository) sehen Sie, wie das Manifest mit GitHub-Aktionen eingerichtet wird. 268 268 - 269 269 - ## Neue Anwendung in der Argo-CD-Benutzeroberfläche erstellen 270 270 - 271 271 - Sie werden wahrscheinlich den großen Button `NEW APP` in der Benutzeroberfläche von [Argo CD](https://github.com/argoproj) sehen. Klicken Sie darauf und erstellen Sie eine neue Anwendung mit den unten angepassten Eigenschaften: 272 272 - 273 273 - * Anwendungsname: `mutanuq` 274 274 - * Projektname: `default` 275 275 - * Sync Policy: Erfahren Sie mehr in [diesem Beitrag](../../../../../blog/setup-continuous-integration-github-repository) / vorerst auf `Manual` lassen 276 276 - * Repository-URL: `https://github.com/trueberryless-org/mutanuq` 277 277 - * Revision: `HEAD` 278 278 - * Pfad: `manifest` 279 279 - * Cluster-URL: `https://kubernetes.default.svc` 280 280 - * Namespace: `mutanuq` 281 281 - 282 282 - Optional – wenn Sie [die CLI installiert haben](https://argo-cd.readthedocs.io/en/stable/cli_installation/) – können Sie diesen Befehl für dasselbe Ergebnis ausführen: 283 283 - 284 284 - ```bash 285 285 - argocd app create mutanuq \ 286 286 - --project default \ 287 287 - --repo https://github.com/trueberryless-org/mutanuq \ 288 288 - --revision HEAD \ 289 289 - --path manifest \ 290 290 - --dest-server https://kubernetes.default.svc \ 291 291 - --dest-namespace mutanuq 292 292 - ``` 293 293 - 294 294 - Nun sollten Sie hoffentlich sehen, wie Ihre Website in der Benutzeroberfläche bereitgestellt wird. Dieser Prozess kann einige Zeit in Anspruch nehmen, da beispielsweise der Zertifikatsantrag genehmigt werden muss. Eine gesunde Anwendung sollte in etwa so aussehen: 295 295 - 296 296 -  297 297 - 298 298 - ## Feiern Sie mit einem Kaffee! 299 299 - 300 300 - Herzlichen Glückwunsch, Sie haben erfolgreich [Argo CD](https://github.com/argoproj) auf einem [k3s](https://github.com/k3s-io) Cluster eingerichtet! Sie haben sich eine Kaffeepause verdient. Genießen Sie eine wohlverdiente Tasse, und wenn Sie mit mir virtuell einen Kaffee teilen möchten, können Sie gerne meine Arbeit auf [Ko-fi](https://ko-fi.com/trueberryless) unterstützen. Vielen Dank! 301 301 - 302 302 - ## Fortsetzung 303 303 - 304 304 - Fortsetzung in unserem [nächsten Blog](../../../../../blog/setup-continuous-integration-github-repository), der beschreibt, wie ein [GitHub](https://github.com/github)-Repository eingerichtet wird, das dann über Argo CD bereitgestellt werden kann.

-289

src/content/docs/de/blog/setup-continuous-integration-github-repository.mdx

reviewed

··· 1 1 - --- 2 2 - title: Einrichten der kontinuierlichen Bereitstellung in einem GitHub-Repository 3 3 - description: Heute schauen wir uns an, wie man ein GitHub-Repository einrichtet, 4 4 - das über Argo CD auf einem k3s-Cluster bereitgestellt wird. 5 5 - date: 2024-07-28 6 6 - tags: 7 7 - - Automation 8 8 - - Deployment Series 9 9 - - GitHub 10 10 - - Education 11 11 - excerpt: Heute schauen wir uns an, wie man ein <a class="gh-badge" 12 12 - href="https://github.com/github"><img src="https://github.com/github.png" 13 13 - alt="github" />GitHub</a>-Repository einrichtet, das über Argo CD auf einem 14 14 - k3s-Cluster bereitgestellt wird. Zusammenfassend wird der Artikel 15 15 - Workflow-Dateien, eine Dockerfile, Manifeste (Deployment) und <a 16 16 - class="gh-badge" href="https://github.com/docker"><img 17 17 - src="https://github.com/docker.png" alt="Docker Hub" />Docker 18 18 - Hub</a>-Repositories umfassen. Bitte werfen Sie einen Blick auf [unseren Argo 19 19 - CD Blog](./setup-argocd-for-kubernetes), da dies eine Fortsetzung des anderen 20 20 - Beitrags ist. 21 21 - authors: 22 22 - - trueberryless 23 23 - cover: 24 24 - alt: A beautiful cover image with the text "Github CD" 25 25 - image: ../../../../../public/blog/setup-continuous-integration-github-repository.jpg 26 26 - giscus: true 27 27 - 28 28 - --- 29 29 - 30 30 - Im heutigen Beitrag werfen wir einen kurzen Blick darauf, wie man eine kontinuierliche Bereitstellung in einem [GitHub](https://github.com/github)-Repository einrichtet. Wir sind uns ziemlich sicher, dass dieses Setup auch mit anderen Git-Registrys funktioniert. Beachten Sie jedoch, dass sich dieser Beitrag ausschließlich auf GitHub konzentriert. 31 31 - 32 32 - Dieser Beitrag setzt voraus, dass Sie [GitHub](https://github.com/github)-Actions in Kombination mit Argo CD verwenden, um Ihre Anwendungen auf einem Kubernetes-Cluster bereitzustellen. Folgen Sie unseren anderen [Bereitstellungsbeiträgen](../../../../../blog/tags/deployment), um weitere Anleitungen zur Einrichtung beider Technologien auf Ihrem persönlichen Server zu erhalten. 33 33 - 34 34 - ## Vorbereitungen 35 35 - 36 36 - Wir empfehlen, ein [Docker Hub](https://hub.docker.com/)-Konto zu erstellen oder ein anderes Docker-Registry Ihrer Wahl zu nutzen. 37 37 - 38 38 - Ihr GitHub-Repository muss die folgenden Bedingungen erfüllen: 39 39 - 40 40 - * Hat eine Dockerfile (idealerweise im Stammordner) 41 41 - * Hat zwei GitHub-Secrets ([GitHub-Secret erstellen](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions#creating-secrets-for-a-repository)): 42 42 - * DOCKER\\\_USERNAME: Ihr Docker-Benutzername 43 43 - * DOCKER\_PASSWORD: Ihr Docker-Passwort (oder [Access Token](https://docs.docker.com/security/for-developers/access-tokens/)) 44 44 - 45 45 - ## Erstellen einer Workflow-Datei (oder mehrerer) 46 46 - 47 47 - GitHub Actions sind spezielle Jobs in GitHub, die meist auf Linux-Servern ausgeführt werden und über das Erstellen von `yaml`-Dateien im Verzeichnis `.github/workflows` gesteuert werden können. Diese speziellen Dateien können festlegen, nach welchen Ereignissen diese Jobs ausgeführt werden sollen, und bieten Ihnen viel Freiheit. Als regelmäßiger GitHub-Actions-Nutzer kann ich Ihnen sagen, dass Sie sich daran gewöhnen sollten, Ihre `yaml`-Dateien ziemlich oft umzuschreiben, da Sie häufig kleine Details übersehen. Aber ohne weitere Umschweife, lassen Sie uns direkt in die Erstellung einer passenden `deployment.yaml`-Datei einsteigen, die einige Aufgaben für uns erledigt: 48 48 - 49 49 - * Eine neue Docker-Image-Version in Docker Hub hochladen (mit der neuesten Version). 50 50 - * Die `manifest/deployment.yaml`-Datei aktualisieren, damit Argo CD über das neue getaggte Image informiert wird. 51 51 - * (optional) Ein neues Release auf GitHub erstellen, damit die Zeitpunkte der Releases dokumentiert sind, wo sie sein sollten. 52 52 - 53 53 - ```yaml {20} 54 54 - # deployment.yaml 55 55 - name: Deployment 56 56 - 57 57 - on: 58 58 - push: 59 59 - branches: [main] 60 60 - merge_group: 61 61 - pull_request: 62 62 - branches: [main] 63 63 - # Allows you to run this workflow manually from the Actions tab 64 64 - workflow_dispatch: 65 65 - 66 66 - # Automatically cancel in-progress actions on the same branch 67 67 - concurrency: 68 68 - group: ${{ github.workflow }}-${{ github.event_name == 'pull_request_target' && github.head_ref || github.ref }} 69 69 - cancel-in-progress: true 70 70 - 71 71 - env: 72 72 - REGISTRY: docker.io 73 73 - IMAGE_NAME: trueberryless/blog 74 74 - NODE_VERSION: 20 75 75 - 76 76 - jobs: 77 77 - deployment: 78 78 - if: contains(github.event.head_commit.message, 'deploy') || github.event_name == 'workflow_dispatch' 79 79 - runs-on: ubuntu-latest 80 80 - permissions: 81 81 - contents: write 82 82 - steps: 83 83 - - name: Check out the repo 84 84 - uses: actions/checkout@v4 85 85 - with: 86 86 - fetch-depth: 0 87 87 - 88 88 - - name: Create tag 89 89 - run: echo "IMAGE_TAG=$(echo $GITHUB_REF_NAME-$GITHUB_SHA)" >> $GITHUB_ENV 90 90 - 91 91 - - name: Set up Docker Buildx 92 92 - uses: docker/setup-buildx-action@v2 93 93 - 94 94 - - name: Log in to Docker Hub 95 95 - uses: docker/login-action@v2 96 96 - with: 97 97 - username: ${{ secrets.DOCKER_USERNAME }} 98 98 - password: ${{ secrets.DOCKER_PASSWORD }} 99 99 - 100 100 - - name: Extract metadata (tags, labels) for Docker 101 101 - id: meta 102 102 - uses: docker/metadata-action@v4 103 103 - with: 104 104 - images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} 105 105 - 106 106 - - name: Build and push Docker image 107 107 - uses: docker/build-push-action@v5 108 108 - with: 109 109 - context: . 110 110 - push: true 111 111 - tags: | 112 112 - ${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }} 113 113 - ${{ env.IMAGE_NAME }}:latest 114 114 - labels: ${{ steps.meta.outputs.labels }} 115 115 - 116 116 - - name: Update deployment.yaml file 117 117 - run: | 118 118 - yq eval '.spec.template.spec.containers[0].image = "${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }}"' -i manifest/deployment.yaml 119 119 - 120 120 - - uses: stefanzweifel/git-auto-commit-action@v4 121 121 - with: 122 122 - commit_message: update deployment.json container image (automated) 123 123 - 124 124 - - uses: ncipollo/release-action@v1 125 125 - with: 126 126 - tag: ${{ env.IMAGE_TAG }} 127 127 - makeLatest: true 128 128 - body: "A docker image has been deployed to [Docker Hub](https://hub.docker.com/r/${{ env.IMAGE_NAME }}/tags)." 129 129 - ``` 130 130 - 131 131 - Hier finden Sie eine veraltete `docker-hub.yaml`, die wir früher verwendet haben, da sie gute Versionierungsstrategien bietet: 132 132 - 133 133 - ```yaml collapse={1-145} 134 134 - # docker-hub.yaml 135 135 - name: Docker Image Push 136 136 - 137 137 - on: 138 138 - push: 139 139 - branches: [main] 140 140 - merge_group: 141 141 - pull_request: 142 142 - branches: [main] 143 143 - # Allows you to run this workflow manually from the Actions tab 144 144 - workflow_dispatch: 145 145 - 146 146 - # Automatically cancel in-progress actions on the same branch 147 147 - concurrency: 148 148 - group: ${{ github.workflow }}-${{ github.event_name == 'pull_request_target' && github.head_ref || github.ref }} 149 149 - cancel-in-progress: true 150 150 - 151 151 - env: 152 152 - REGISTRY: docker.io 153 153 - IMAGE_NAME: trueberryless/blog 154 154 - NODE_VERSION: 18 155 155 - 156 156 - jobs: 157 157 - docker-push-image: 158 158 - if: contains(github.event.head_commit.message, 'version') || github.event_name == 'workflow_dispatch' 159 159 - runs-on: ubuntu-latest 160 160 - permissions: 161 161 - contents: write 162 162 - steps: 163 163 - - name: Check out the repo 164 164 - uses: actions/checkout@v4 165 165 - with: 166 166 - fetch-depth: 0 167 167 - 168 168 - - name: Check if file exists 169 169 - run: | 170 170 - if [ -f .github/artifacts/version.json ]; then 171 171 - echo "File exists" 172 172 - echo "FILE_EXISTS=true" >> $GITHUB_ENV 173 173 - else 174 174 - echo "File does not exist" 175 175 - echo "FILE_EXISTS=false" >> $GITHUB_ENV 176 176 - fi 177 177 - 178 178 - - name: read_json 179 179 - if: ${{ env.FILE_EXISTS == 'true' }} 180 180 - id: version 181 181 - uses: zoexx/github-action-json-file-properties@release 182 182 - with: 183 183 - file_path: ".github/artifacts/version.json" 184 184 - 185 185 - - name: save environment variables 186 186 - if: ${{ env.FILE_EXISTS == 'true' }} 187 187 - run: | 188 188 - echo "MAJOR=${{steps.version.outputs.major}}" >> $GITHUB_ENV 189 189 - echo "MINOR=${{steps.version.outputs.minor}}" >> $GITHUB_ENV 190 190 - echo "PATCH=${{steps.version.outputs.patch}}" >> $GITHUB_ENV 191 191 - 192 192 - - name: create environment variables 193 193 - if: ${{ env.FILE_EXISTS == 'false' }} 194 194 - run: | 195 195 - echo "MAJOR=0" >> $GITHUB_ENV 196 196 - echo "MINOR=0" >> $GITHUB_ENV 197 197 - echo "PATCH=0" >> $GITHUB_ENV 198 198 - 199 199 - - name: echo environment variables 200 200 - run: | 201 201 - echo ${{ env.MINOR }} 202 202 - echo ${{ env.MINOR }} 203 203 - echo ${{ env.MINOR }} 204 204 - 205 205 - - name: Major version 206 206 - if: contains(github.event.head_commit.message, 'major') 207 207 - run: | 208 208 - echo "New major version" 209 209 - echo "MAJOR=$((${{ env.MAJOR }}+1))" >> $GITHUB_ENV 210 210 - echo "MINOR=0" >> $GITHUB_ENV 211 211 - echo "PATCH=0" >> $GITHUB_ENV 212 212 - 213 213 - - name: Minor version 214 214 - if: contains(github.event.head_commit.message, 'minor') 215 215 - run: | 216 216 - echo "New minor version" 217 217 - echo "MINOR=$((${{ env.MINOR }}+1))" >> $GITHUB_ENV 218 218 - echo "PATCH=0" >> $GITHUB_ENV 219 219 - 220 220 - - name: Patch version 221 221 - if: contains(github.event.head_commit.message, 'patch') || github.event_name == 'workflow_dispatch' 222 222 - run: | 223 223 - echo "New patch version" 224 224 - echo "PATCH=$((${{ env.PATCH }}+1))" >> $GITHUB_ENV 225 225 - 226 226 - - name: Set up Docker Buildx 227 227 - uses: docker/setup-buildx-action@v2 228 228 - 229 229 - - name: Log in to Docker Hub 230 230 - uses: docker/login-action@v2 231 231 - with: 232 232 - username: ${{ secrets.DOCKER_USERNAME }} 233 233 - password: ${{ secrets.DOCKER_PASSWORD }} 234 234 - 235 235 - - name: Extract metadata (tags, labels) for Docker 236 236 - id: meta 237 237 - uses: docker/metadata-action@v4 238 238 - with: 239 239 - images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} 240 240 - 241 241 - - name: Build and push Docker image 242 242 - uses: docker/build-push-action@v5 243 243 - with: 244 244 - context: . 245 245 - push: true 246 246 - tags: | 247 247 - ${{ env.IMAGE_NAME }}:${{ env.MAJOR }}.${{ env.MINOR }}.${{ env.PATCH }} 248 248 - ${{ env.IMAGE_NAME }}:latest 249 249 - labels: ${{ steps.meta.outputs.labels }} 250 250 - 251 251 - - name: Check out the repo 252 252 - uses: actions/checkout@v4 253 253 - with: 254 254 - fetch-depth: 0 255 255 - 256 256 - - name: Create folder if necessary 257 257 - if: ${{ env.FILE_EXISTS == 'false' }} 258 258 - run: mkdir -p .github/artifacts 259 259 - 260 260 - - name: write_json 261 261 - id: create-json 262 262 - uses: jsdaniell/create-json@v1.2.2 263 263 - with: 264 264 - name: "version.json" 265 265 - json: '{ "major": ${{ env.MAJOR }}, "minor": ${{ env.MINOR }}, "patch": ${{ env.PATCH }} }' 266 266 - dir: ".github/artifacts/" 267 267 - 268 268 - - uses: stefanzweifel/git-auto-commit-action@v4 269 269 - with: 270 270 - commit_message: update version.json (automated) 271 271 - 272 272 - - name: Update deployment.yaml file 273 273 - run: | 274 274 - yq eval '.spec.template.spec.containers[0].image = "${{ env.IMAGE_NAME }}:${{ env.MAJOR }}.${{ env.MINOR }}.${{ env.PATCH }}"' -i manifest/deployment.yaml 275 275 - 276 276 - - uses: stefanzweifel/git-auto-commit-action@v4 277 277 - with: 278 278 - commit_message: update deployment.json container image (automated) 279 279 - ``` 280 280 - 281 281 - Nachdem Sie den Inhalt unserer `deployment.yaml`-Datei kopiert und die neue Datei im `.github/workflows`-Ordner erstellt haben, müssen Sie einige sehr **wichtige Anpassungen** vornehmen: 282 282 - 283 283 - * Ändern Sie den `IMAGE_NAME` in Ihr persönliches Docker Hub-Repository. Der Bildname besteht aus Ihrem Kontonamen und dem Repositoriesnamen. Wenn Sie sich nicht sicher sind, wie Ihr Bildname lautet, können Sie die URL des Docker Hub-Repositories ansehen, dort sollte er irgendwo zu finden sein. 284 284 - 285 285 - Jetzt sollten Sie bereit sein, das Schlüsselwort `deploy` in jede Commit-Nachricht für den Hauptzweig Ihres Repositories einzufügen, und es sollte automatisch ein Docker-Image an Docker Hub senden und das Manifest für Argo CD aktualisieren. 286 286 - 287 287 - ## Feiern Sie mit einem Kaffee! 288 288 - 289 289 - Herzlichen Glückwunsch, Sie haben Argo CD erfolgreich mit k3s und [Cilium](https://github.com/cilium) eingerichtet! Sie haben eine Kaffeepause verdient. Genießen Sie eine wohlverdiente Tasse, und wenn Sie mit mir einen virtuellen Kaffee teilen möchten, können Sie gerne meine Arbeit auf [Ko-fi](https://ko-fi.com/trueberryless) unterstützen. Vielen Dank!

-802

src/content/docs/de/blog/setup-kubernetes-with-cilium-and-cloudflare.mdx

reviewed

··· 1 1 - --- 2 2 - title: Einrichten von Kubernetes mit Cilium und Cloudflare 3 3 - description: Heute schauen wir uns an, wie man ein Kubernetes-Cluster mit K3s 4 4 - und Cilium einrichtet. 5 5 - date: 2024-06-11 6 6 - lastUpdated: 2024-10-01 7 7 - tags: 8 8 - - Deployment Series 9 9 - - Education 10 10 - excerpt: Dieser Blogpost beschreibt den Prozess der Einrichtung eines <a 11 11 - class="gh-badge" href="https://github.com/kubernetes"><img 12 12 - src="https://github.com/kubernetes.png" alt="Kubernetes" 13 13 - />Kubernetes</a>-Clusters mit <a class="gh-badge" 14 14 - href="https://github.com/k3s-io"><img src="https://github.com/k3s-io.png" 15 15 - alt="k3s" />k3s</a> und <a class="gh-badge" 16 16 - href="https://github.com/cilium"><img src="https://github.com/cilium.png" 17 17 - alt="Cilium" />Cilium</a>. Wir verwenden <a class="gh-badge" 18 18 - href="https://github.com/helm"><img src="https://github.com/helm.png" 19 19 - alt="Helm" />Helm</a> als Paketmanager und <a class="gh-badge" 20 20 - href="https://github.com/cloudflare"><img 21 21 - src="https://github.com/cloudflare.png" alt="Cloudflare" />Cloudflare</a> als 22 22 - Zertifikataussteller. Wir haben die Tipps und Tricks von Vegard S. Hagen aus 23 23 - [seinem 24 24 - Artikel](https://blog.stonegarden.dev/articles/2024/02/bootstrapping-k3s-with-cilium/) 25 25 - genutzt. Im Wesentlichen erklärt dieser Blog, wie alle 26 26 - trueberryless.org-Webseiten bereitgestellt wurden (nicht mehr). 27 27 - authors: 28 28 - - trueberryless 29 29 - - clemens 30 30 - cover: 31 31 - alt: A beautiful cover image with the text "Kubernetes" 32 32 - image: ../../../../../public/blog/setup-kubernetes-with-cilium-and-cloudflare.jpg 33 33 - giscus: true 34 34 - metrics: 35 35 - readingTime: 360 36 36 - words: 1099 37 37 - 38 38 - --- 39 39 - 40 40 - Die Arbeit mit [Docker](https://github.com/docker)-Containern kann schwierig sein. Es gibt jedoch Tools, die das Management von Containern verbessern, wie [Kubernetes](https://github.com/kubernetes). Tatsächlich ist Kubernetes meines Wissens das einzige Tool, das als Management-Software für Docker-Container fungiert. Kubernetes ist in fast allen Cloud-Anbietern wie Google Cloud, Azure und AWS gut integriert. Dadurch hat es eine standardisierte `yaml`-Syntax, was für kleine Entwickler großartig ist, da sie mit geringem Aufwand zwischen `The Big Three` wechseln können. 41 41 - 42 42 - ## tl;dr 43 43 - 44 44 - Alles installieren und dann cert-manager anwenden. Ganz einfach. 45 45 - 46 46 - ```bash 47 47 - curl -sfL https://get.k3s.io | sh -s - \ 48 48 - --flannel-backend=none \ 49 49 - --disable-kube-proxy \ 50 50 - --disable servicelb \ 51 51 - --disable-network-policy \ 52 52 - --disable traefik \ 53 53 - --cluster-init 54 54 - 55 55 - curl https://raw.githubusercontent.com/helm/helm/main/scripts/get-helm-3 | bash 56 56 - 57 57 - helm repo add cilium https://helm.cilium.io/ 58 58 - helm repo update 59 59 - helm install cilium cilium/cilium 60 60 - 61 61 - CILIUM_CLI_VERSION=$(curl -s https://raw.githubusercontent.com/cilium/cilium-cli/main/stable.txt) 62 62 - CLI_ARCH=amd64 63 63 - curl -L --fail --remote-name-all https://github.com/cilium/cilium-cli/releases/download/${CILIUM_CLI_VERSION}/cilium-linux-${CLI_ARCH}.tar.gz 64 64 - sudo tar xzvfC cilium-linux-${CLI_ARCH}.tar.gz /usr/local/bin 65 65 - rm cilium-linux-${CLI_ARCH}.tar.gz 66 66 - 67 67 - cilium install \ 68 68 - --set k8sServiceHost=${API_SERVER_IP} \ 69 69 - --set k8sServicePort=6443 \ 70 70 - --set kubeProxyReplacement=true 71 71 - 72 72 - cilium status --wait 73 73 - 74 74 - helm install cert-manager jetstack/cert-manager --namespace cert-manager --create-namespace --set crds.enabled=true 75 75 - ``` 76 76 - 77 77 - ```yaml 78 78 - # cert-manager.yaml 79 79 - # secret-cloudflare.yaml 80 80 - apiVersion: v1 81 81 - kind: Secret 82 82 - metadata: 83 83 - name: cloudflare-api-key-secret 84 84 - namespace: cert-manager 85 85 - type: Opaque 86 86 - stringData: 87 87 - api-key: <Cloudflare API Token (not encrypted)> 88 88 - --- 89 89 - # cert-issuer.yaml 90 90 - apiVersion: cert-manager.io/v1 91 91 - kind: ClusterIssuer 92 92 - metadata: 93 93 - name: acme-issuer 94 94 - namespace: cert-manager 95 95 - spec: 96 96 - acme: 97 97 - email: <Email for updates> 98 98 - server: https://acme-v02.api.letsencrypt.org/directory 99 99 - privateKeySecretRef: 100 100 - name: acme-issuer 101 101 - solvers: 102 102 - - dns01: 103 103 - cloudflare: 104 104 - email: <Cloudflare account Email> 105 105 - apiTokenSecretRef: 106 106 - name: cloudflare-api-token-secret 107 107 - key: api-token 108 108 - ``` 109 109 - 110 110 - ## k3s installieren 111 111 - 112 112 - Wie Hagen in [seinem Artikel](https://blog.stonegarden.dev/articles/2024/02/bootstrapping-k3s-with-cilium/) erklärt, möchten wir `k3s` ohne Konfigurationen und mit deaktivierten Komponenten installieren. Er beschreibt im Detail, welche Komponenten nicht installiert werden. 113 113 - 114 114 - ```bash 115 115 - curl -sfL https://get.k3s.io | sh -s - \ 116 116 - --flannel-backend=none \ 117 117 - --disable-kube-proxy \ 118 118 - --disable servicelb \ 119 119 - --disable-network-policy \ 120 120 - --disable traefik \ 121 121 - --cluster-init 122 122 - ``` 123 123 - 124 124 - Nach der Installation sollten einige Pods laufen (3). Nicht schockiert sein, wenn die Pods im Status `ContainerCreating` oder `Pending` sind. Das liegt daran, dass die Pods nicht miteinander kommunizieren können, da wir das CNI deaktiviert haben (`--flannel-backend=none`). Später werden wir [Cilium](https://github.com/cilium) installieren, welches das Flannel-CNI ersetzen wird. 125 125 - 126 126 - ```bash 127 127 - kubectl get pods -A 128 128 - ``` 129 129 - 130 130 - ## Helm installieren 131 131 - 132 132 - Helm ist der Paketmanager für [Kubernetes](https://github.com/kubernetes). Sie können es entweder direkt installieren (siehe die [Helm-Dokumentation](https://helm.sh/docs/intro/install/)) oder Teile von Helm verwenden, die mit Cilium ausgeliefert werden. Wir haben uns entschieden, Helm direkt zu installieren, was mit folgendem Befehl problemlos möglich ist: 133 133 - 134 134 - ```bash 135 135 - curl https://raw.githubusercontent.com/helm/helm/main/scripts/get-helm-3 | bash 136 136 - ``` 137 137 - 138 138 - ## Cilium installieren 139 139 - 140 140 - [Cilium](https://github.com/cilium) ist eine Netzwerk- und Sicherheitssoftware für Kubernetes. Cilium ist sehr schnell, skalierbar und sicher, da es auf eBPF basiert -- einer revolutionären Technologie, die sandboxed Programme im Linux-Kernel ausführen kann, ohne den Kernel neu zu kompilieren oder Kernelmodule zu laden. 141 141 - 142 142 - Wir könnten Cilium mit Helm wie hier gezeigt installieren: 143 143 - 144 144 - ```bash 145 145 - helm repo add cilium https://helm.cilium.io/ 146 146 - helm repo update 147 147 - helm install cilium cilium/cilium 148 148 - ``` 149 149 - 150 150 - Wir wollten es jedoch mit deren CLI installieren, und so funktioniert das. Zuerst installieren Sie die Cilium-CLI, indem Sie diesen Code-Schnipsel ausführen: 151 151 - 152 152 - ```bash 153 153 - CILIUM_CLI_VERSION=$(curl -s https://raw.githubusercontent.com/cilium/cilium-cli/main/stable.txt) 154 154 - CLI_ARCH=amd64 155 155 - curl -L --fail --remote-name-all https://github.com/cilium/cilium-cli/releases/download/${CILIUM_CLI_VERSION}/cilium-linux-${CLI_ARCH}.tar.gz 156 156 - sudo tar xzvfC cilium-linux-${CLI_ARCH}.tar.gz /usr/local/bin 157 157 - rm cilium-linux-${CLI_ARCH}.tar.gz 158 158 - ``` 159 159 - 160 160 - Anschließend können Sie Cilium mit Ihrer Server-IP-Adresse installieren: 161 161 - 162 162 - ```bash 163 163 - cilium install \ 164 164 - --set k8sServiceHost=${API_SERVER_IP} \ 165 165 - --set k8sServicePort=6443 \ 166 166 - --set kubeProxyReplacement=true 167 167 - ``` 168 168 - 169 169 - Jetzt warten wir, bis Cilium meldet, dass alles `OK` oder `disabled` ist: 170 170 - 171 171 - ```bash 172 172 - cilium status --wait 173 173 - ``` 174 174 - 175 175 - Nach einer Weile sollten alle Pods im Status `Running` sein. 176 176 - 177 177 - ```bash 178 178 - kubectl get pods -A 179 179 - ``` 180 180 - 181 181 - Zu guter Letzt können Sie einige Ressourcen für Cilium anwenden: 182 182 - 183 183 - ```yaml 184 184 - # announce.yaml 185 185 - apiVersion: cilium.io/v2alpha1 186 186 - kind: CiliumL2AnnouncementPolicy 187 187 - metadata: 188 188 - name: default-l2-announcement-policy 189 189 - namespace: kube-system 190 190 - spec: 191 191 - externalIPs: true 192 192 - loadBalancerIPs: true 193 193 - ``` 194 194 - 195 195 - ```yaml 196 196 - # ip-pool.yaml 197 197 - apiVersion: "cilium.io/v2alpha1" 198 198 - kind: CiliumLoadBalancerIPPool 199 199 - metadata: 200 200 - name: "first-pool" 201 201 - spec: 202 202 - blocks: 203 203 - - start: "192.168.0.240" 204 204 - stop: "192.168.0.249" 205 205 - ``` 206 206 - 207 207 - Außerdem sollten Sie die Cilium-Konfiguration aktualisieren. Um dies mit den richtigen Werten zu tun, erstellen Sie zunächst diese Datei im Root-Verzeichnis, in dem Sie das k3s-Cluster verwalten möchten. Später können Sie auch einige hubble- und prometheus-bezogene Eigenschaften hinzufügen, wenn Sie [Grafana](https://github.com/Grafana) oder Ähnliches verwenden möchten (öffnen Sie die ausgeblendeten Zeilen, wenn Sie unsere Konfiguration ebenfalls verwenden möchten). 208 208 - 209 209 - ```yaml collapse={32-59} 210 210 - #cilium-config.yaml 211 211 - k8sServiceHost: 127.0.0.1 212 212 - k8sServicePort: 6443 213 213 - 214 214 - kubeProxyReplacement: true 215 215 - l2announcements: 216 216 - enabled: true 217 217 - 218 218 - externalIPs: 219 219 - enabled: true 220 220 - 221 221 - k8sClientRateLimit: 222 222 - qps: 50 223 223 - burst: 200 224 224 - 225 225 - operator: 226 226 - replicas: 1 227 227 - rollOutPods: true 228 228 - prometheus: 229 229 - enabled: true 230 230 - 231 231 - rollOutCiliumPods: true 232 232 - 233 233 - ingressController: 234 234 - enabled: true 235 235 - default: true 236 236 - loadbalancerMode: shared 237 237 - service: 238 238 - annotations: 239 239 - io.cilium/lb-ipam-ips: 192.168.0.240 240 240 - 241 241 - hubble: 242 242 - relay: 243 243 - enabled: true 244 244 - ui: 245 245 - enabled: true 246 246 - metrics: 247 247 - serviceMonitor: 248 248 - enabled: true 249 249 - enableOpenMetrics: true 250 250 - enabled: 251 251 - - dns 252 252 - - drop 253 253 - - tcp 254 254 - - icmp 255 255 - - port-distribution 256 256 - - "flow:sourceContext=workload-name|reserved-identity;destinationContext=workload-name|reserved-identity" 257 257 - - "kafka:labelsContext=source_namespace,source_workload,destination_namespace,destination_workload,traffic_direction;sourceContext=workload-name|reserved-identity;destinationContext=workload-name|reserved-identity" 258 258 - - "httpV2:exemplars=true;labelsContext=source_ip,source_namespace,source_workload,destination_ip,destination_namespace,destination_workload,traffic_direction;sourceContext=workload-name|reserved-identity;destinationContext=workload-name|reserved-identity" 259 259 - dashboards: 260 260 - enabled: true 261 261 - namespace: monitoring 262 262 - annotations: 263 263 - grafana_folder: "Hubble" 264 264 - 265 265 - prometheus: 266 266 - enabled: true 267 267 - serviceMonitor: 268 268 - enabled: true 269 269 - ``` 270 270 - 271 271 - Führen Sie diesen Befehl aus, um ein Upgrade durchzuführen: 272 272 - 273 273 - ```bash 274 274 - cilium upgrade -f cilium-config.yaml 275 275 - ``` 276 276 - 277 277 - ## Zertifikatsmanager mit Cloudflare einrichten 278 278 - 279 279 - Um in der Lage zu sein, Zertifikate für jede Subdomain zu erstellen, ist es wichtig, einen Zertifikatsaussteller anzuwenden, der Zertifikatsanfragen bearbeitet und sie bei einem Anbieter einlöst. Wir haben [Cloudflare](https://github.com/cloudflare) als unseren Aussteller gewählt, und hier ist die Konfiguration, die Sie auf Ihr Kubernetes-Cluster anwenden müssen. Weitere Informationen finden Sie in der [cert-manager-Dokumentation](https://cert-manager.io/docs/configuration/acme/dns01/cloudflare/). 280 280 - 281 281 - Zuerst müssen wir den cert-manager installieren, indem wir den folgenden Befehl ausführen: 282 282 - 283 283 - ```bash 284 284 - helm install cert-manager jetstack/cert-manager --namespace cert-manager --create-namespace --set crds.enabled=true 285 285 - ``` 286 286 - 287 287 - ```yaml 288 288 - # cert-issuer.yaml 289 289 - apiVersion: cert-manager.io/v1 290 290 - kind: ClusterIssuer 291 291 - metadata: 292 292 - name: acme-issuer 293 293 - namespace: cert-manager 294 294 - spec: 295 295 - acme: 296 296 - email: <Email for updates> 297 297 - server: https://acme-v02.api.letsencrypt.org/directory 298 298 - privateKeySecretRef: 299 299 - name: acme-issuer 300 300 - solvers: 301 301 - - dns01: 302 302 - cloudflare: 303 303 - email: <Cloudflare account Email> 304 304 - apiTokenSecretRef: 305 305 - name: cloudflare-api-token-secret 306 306 - key: api-token 307 307 - ``` 308 308 - 309 309 - Sie können eine Datei auf den [Kubernetes](https://github.com/kubernetes)-Cluster anwenden, indem Sie diesen k8s- (oder k3s-) Befehl ausführen: 310 310 - 311 311 - ```bash 312 312 - kubectl apply -f cluster-issuer.yaml 313 313 - ``` 314 314 - 315 315 - Wenn Sie die Ressource im Kubernetes-Cluster löschen möchten, ist der Befehl ziemlich einfach: 316 316 - 317 317 - ```bash 318 318 - kubectl delete -f cluster-issuer.yaml 319 319 - ``` 320 320 - 321 321 - Wie Sie oben vielleicht bemerkt haben, benötigen wir auch ein Geheimnis für das API-Token, das die Authentifizierung durchführt, dass dieser Issuer berechtigt ist, Zertifikate anzufordern. Daher erstellen wir ein Geheimnis mit einem unverschlüsselten `API Token` von Cloudflare. 322 322 - 323 323 - Heutzutage erstellen wir ein Token, indem wir zu Ihrem [Cloudflare](https://github.com/cloudflare)-Dashboard gehen, dann auf Ihr Profil klicken und die Registerkarte `API Tokens` auswählen. Hier können Sie ein spezifisches Token für Ihren Issuer generieren oder den globalen API-Schlüssel (nicht mehr empfohlen) verwenden. Die empfohlene Lösung ist, ein API-Token mit zwei Berechtigungen (benutzerdefiniertes Token) zu erstellen: 324 324 - 325 325 - * Zone - DNS - Bearbeiten 326 326 - * Zone - Zone - Lesen 327 327 - 328 328 -  329 329 - 330 330 - Eine detailliertere Beschreibung der Tokens finden Sie in den [Cloudflare-Dokumenten](https://developers.cloudflare.com/fundamentals/api/get-started/create-token/). 331 331 - 332 332 - Nachdem Sie dieses Geheimnis auf Kubernetes angewendet haben, sollte der Issuer bereit sein, unangenehme Fälle zu lösen! 333 333 - 334 334 - ```yaml 335 335 - # secret-cloudflare.yaml 336 336 - apiVersion: v1 337 337 - kind: Secret 338 338 - metadata: 339 339 - name: cloudflare-api-key-secret 340 340 - namespace: cert-manager 341 341 - type: Opaque 342 342 - stringData: 343 343 - api-key: <Cloudflare API Token (not encrypted)> 344 344 - ``` 345 345 - 346 346 - Sie können diesen Issuer jetzt verwenden, indem Sie diese Datei anwenden, die hoffentlich ein Zertifikat erstellt: 347 347 - 348 348 - ```yaml 349 349 - # mutanuq-certificat.yaml 350 350 - apiVersion: cert-manager.io/v1 351 351 - kind: Certificate 352 352 - metadata: 353 353 - name: mutanuq 354 354 - namespace: mutanuq 355 355 - spec: 356 356 - secretName: mutanuq 357 357 - issuerRef: 358 358 - name: acme-issuer 359 359 - kind: ClusterIssuer 360 360 - dnsNames: 361 361 - - "mutanuq.trueberryless.org" 362 362 - ``` 363 363 - 364 364 - Normalerweise dauert es etwa 90 Sekunden, um die Anfrage nach dem Anwenden zu authentifizieren. Sie können den aktuellen Status der Anfrage überprüfen, indem Sie diesen Kubernetes-Befehl ausführen. 365 365 - Wenn es länger als 2 Minuten dauert, können möglicherweise einige Tipps unter [#Fehlerbehebung](#no-cloudflare-certificate-approval) hilfreich sein. 366 366 - 367 367 - ```bash 368 368 - kubectl describe certificaterequests.cert-manager.io -n mutanuq 369 369 - ``` 370 370 - 371 371 - :::tip 372 372 - Die Option `-n` steht für Namespace. 373 373 - ::: 374 374 - 375 375 - ## Beispielanwendung [`mutanuq`](https://mutanuq.trueberryless.org) 376 376 - 377 377 - Dann können Sie dieses Zertifikat in Ihrem Ingress-Controller verwenden: 378 378 - 379 379 - ```yaml collapse={1-42} {61-64} 380 380 - # mutanuq.yaml 381 381 - apiVersion: apps/v1 382 382 - kind: Deployment 383 383 - metadata: 384 384 - name: mutanuq 385 385 - namespace: mutanuq 386 386 - labels: 387 387 - app: mutanuq 388 388 - annotations: 389 389 - keel.sh/policy: all 390 390 - keel.sh/trigger: poll 391 391 - keel.sh/pollSchedule: "@every 10s" 392 392 - keel.sh/releaseNotes: "https://github.com/trueberryless-org/mutanuq/releases" 393 393 - spec: 394 394 - replicas: 3 395 395 - selector: 396 396 - matchLabels: 397 397 - app: mutanuq 398 398 - template: 399 399 - metadata: 400 400 - labels: 401 401 - app: mutanuq 402 402 - spec: 403 403 - containers: 404 404 - - name: mutanuq 405 405 - image: trueberryless/mutanuq 406 406 - imagePullPolicy: Always 407 407 - --- 408 408 - apiVersion: v1 409 409 - kind: Service 410 410 - metadata: 411 411 - name: mutanuq 412 412 - namespace: mutanuq 413 413 - annotations: 414 414 - cert-manager.io/issuer: acme-issuer 415 415 - spec: 416 416 - selector: 417 417 - app: mutanuq 418 418 - ports: 419 419 - - name: http 420 420 - port: 80 421 421 - --- 422 422 - apiVersion: networking.k8s.io/v1 423 423 - kind: Ingress 424 424 - metadata: 425 425 - name: mutanuq 426 426 - namespace: mutanuq 427 427 - spec: 428 428 - rules: 429 429 - - host: mutanuq.trueberryless.org 430 430 - http: 431 431 - paths: 432 432 - - path: / 433 433 - pathType: Prefix 434 434 - backend: 435 435 - service: 436 436 - name: mutanuq 437 437 - port: 438 438 - number: 80 439 439 - 440 440 - tls: 441 441 - - hosts: 442 442 - - mutanuq.trueberryless.org 443 443 - secretName: mutanuq 444 444 - ``` 445 445 - 446 446 - ## Einrichtung von Keel 447 447 - 448 448 - Wir wollten schon immer eine saubere Continuous Integration (CI) und Continuous Delivery (CD) Lösung für unsere Websites. Das bedeutet, dass eine spezifische Commit-Nachricht einen automatisierten Prozess über [GitHub](https://github.com/github), Docker Hub und unseren Server auslösen sollte, der am Ende die entsprechende Website nach etwa zwei Minuten aktualisiert. 449 449 - 450 450 - Keel ist ein robustes Software-Tool, das diese Funktion für Kubernetes ermöglicht. Wir haben Keel verwendet, um neue Docker-Images von Docker Hub durch regelmäßige Abfragen zu holen. Außerdem bietet Keel ein schönes Dashboard, auf dem Sie die Abfragen steuern können. 451 451 - 452 452 - Um Keel mit dem Administrations-Dashboard einzurichten, haben wir folgende Dateien erstellt: 453 453 - 454 454 - * `secret-dashboard.yaml` für den Admin-Benutzernamen und das Passwort (nicht jeder sollte auf das Dashboard zugreifen können) 455 455 - * `keel.yaml` für die eigentlichen k3s-Konfigurationen (kopiert und angepasst von [KeelHQ](https://github.com/keel-hq/keel/blob/9f0a7160bbdc3a107ad148933a4269f30e4e479c/deployment/deployment-template.yaml)) 456 456 - 457 457 - ```yaml 458 458 - # secret-dashboard.yaml 459 459 - apiVersion: v1 460 460 - kind: Secret 461 461 - metadata: 462 462 - name: keel-dashboard-secrets 463 463 - namespace: keel 464 464 - type: Opaque 465 465 - stringData: 466 466 - username: <username> 467 467 - password: <password> 468 468 - ``` 469 469 - 470 470 - ```yaml {157-160,162-165} collapse={1-155, 166-194} 471 471 - # keel.yaml 472 472 - --- 473 473 - apiVersion: v1 474 474 - kind: Namespace 475 475 - metadata: 476 476 - name: keel 477 477 - 478 478 - --- 479 479 - apiVersion: v1 480 480 - kind: ServiceAccount 481 481 - metadata: 482 482 - name: keel 483 483 - namespace: keel 484 484 - labels: 485 485 - app: keel 486 486 - 487 487 - --- 488 488 - apiVersion: rbac.authorization.k8s.io/v1 489 489 - kind: ClusterRole 490 490 - metadata: 491 491 - name: keel 492 492 - rules: 493 493 - - apiGroups: 494 494 - - "" 495 495 - resources: 496 496 - - namespaces 497 497 - verbs: 498 498 - - watch 499 499 - - list 500 500 - - apiGroups: 501 501 - - "" 502 502 - resources: 503 503 - - secrets 504 504 - verbs: 505 505 - - get 506 506 - - watch 507 507 - - list 508 508 - - apiGroups: 509 509 - - "" 510 510 - - extensions 511 511 - - apps 512 512 - - batch 513 513 - resources: 514 514 - - pods 515 515 - - replicasets 516 516 - - replicationcontrollers 517 517 - - statefulsets 518 518 - - deployments 519 519 - - daemonsets 520 520 - - jobs 521 521 - - cronjobs 522 522 - verbs: 523 523 - - get 524 524 - - delete # required to delete pods during force upgrade of the same tag 525 525 - - watch 526 526 - - list 527 527 - - update 528 528 - - apiGroups: 529 529 - - "" 530 530 - resources: 531 531 - - configmaps 532 532 - - pods/portforward 533 533 - verbs: 534 534 - - get 535 535 - - create 536 536 - - update 537 537 - 538 538 - --- 539 539 - apiVersion: rbac.authorization.k8s.io/v1 540 540 - kind: ClusterRoleBinding 541 541 - metadata: 542 542 - name: keel 543 543 - roleRef: 544 544 - apiGroup: rbac.authorization.k8s.io 545 545 - kind: ClusterRole 546 546 - name: keel 547 547 - subjects: 548 548 - - kind: ServiceAccount 549 549 - name: keel 550 550 - namespace: keel 551 551 - 552 552 - --- 553 553 - apiVersion: networking.k8s.io/v1 554 554 - kind: Ingress 555 555 - metadata: 556 556 - name: keel 557 557 - namespace: keel 558 558 - spec: 559 559 - rules: 560 560 - - host: keel.trueberryless.org 561 561 - http: 562 562 - paths: 563 563 - - path: / 564 564 - pathType: Prefix 565 565 - backend: 566 566 - service: 567 567 - name: keel 568 568 - port: 569 569 - number: 9300 570 570 - 571 571 - tls: 572 572 - - hosts: 573 573 - - keel.trueberryless.org 574 574 - secretName: keel 575 575 - 576 576 - --- 577 577 - apiVersion: v1 578 578 - kind: Service 579 579 - metadata: 580 580 - name: keel 581 581 - namespace: keel 582 582 - labels: 583 583 - app: keel 584 584 - spec: 585 585 - type: LoadBalancer 586 586 - ports: 587 587 - - port: 9300 588 588 - targetPort: 9300 589 589 - protocol: TCP 590 590 - name: keel 591 591 - selector: 592 592 - app: keel 593 593 - sessionAffinity: None 594 594 - 595 595 - --- 596 596 - apiVersion: apps/v1 597 597 - kind: Deployment 598 598 - metadata: 599 599 - name: keel 600 600 - namespace: keel 601 601 - labels: 602 602 - app: keel 603 603 - spec: 604 604 - replicas: 1 605 605 - selector: 606 606 - matchLabels: 607 607 - app: keel 608 608 - template: 609 609 - metadata: 610 610 - labels: 611 611 - app: keel 612 612 - spec: 613 613 - serviceAccountName: keel 614 614 - containers: 615 615 - - name: keel 616 616 - # Note that we use appVersion to get images tag. 617 617 - image: "keelhq/keel:latest" 618 618 - imagePullPolicy: Always 619 619 - command: ["/bin/keel"] 620 620 - env: 621 621 - - name: NAMESPACE 622 622 - valueFrom: 623 623 - fieldRef: 624 624 - fieldPath: metadata.namespace 625 625 - # Basic auth (to enable UI/API) 626 626 - - name: BASIC_AUTH_USER 627 627 - valueFrom: 628 628 - secretKeyRef: 629 629 - name: keel-dashboard-secrets 630 630 - key: username 631 631 - - name: BASIC_AUTH_PASSWORD 632 632 - valueFrom: 633 633 - secretKeyRef: 634 634 - name: keel-dashboard-secrets 635 635 - key: password 636 636 - ports: 637 637 - - containerPort: 9300 638 638 - livenessProbe: 639 639 - httpGet: 640 640 - path: /healthz 641 641 - port: 9300 642 642 - initialDelaySeconds: 30 643 643 - timeoutSeconds: 10 644 644 - resources: 645 645 - limits: 646 646 - cpu: 100m 647 647 - memory: 128Mi 648 648 - requests: 649 649 - cpu: 50m 650 650 - memory: 64Mi 651 651 - 652 652 - --- 653 653 - # Source: keel/templates/pod-disruption-budget.yaml 654 654 - 655 655 - apiVersion: policy/v1 656 656 - kind: PodDisruptionBudget 657 657 - metadata: 658 658 - name: keel 659 659 - namespace: keel 660 660 - spec: 661 661 - maxUnavailable: 1 662 662 - selector: 663 663 - matchLabels: 664 664 - app: keel 665 665 - ``` 666 666 - 667 667 - Nachdem beide Dateien angewendet und das zusätzliche Zertifikat für `keel.trueberryless.org` verwaltet wurden, funktioniert das Keel-Dashboard perfekt. Darüber hinaus kann jedes Kubernetes-`Deployment` für automatisiertes Docker-Hub-Polling durch Setzen einiger Annotationen aktiviert werden: 668 668 - 669 669 - ```yaml {8-12} collapse={15-63} 670 670 - apiVersion: apps/v1 671 671 - kind: Deployment 672 672 - metadata: 673 673 - name: mutanuq 674 674 - namespace: mutanuq 675 675 - labels: 676 676 - app: mutanuq 677 677 - annotations: 678 678 - keel.sh/policy: all 679 679 - keel.sh/trigger: poll 680 680 - keel.sh/pollSchedule: "@every 1m" 681 681 - keel.sh/releaseNotes: "https://github.com/trueberryless-org/mutanuq/releases" 682 682 - spec: 683 683 - replicas: 1 684 684 - selector: 685 685 - matchLabels: 686 686 - app: mutanuq 687 687 - template: 688 688 - metadata: 689 689 - labels: 690 690 - app: mutanuq 691 691 - spec: 692 692 - containers: 693 693 - - name: mutanuq 694 694 - image: trueberryless/mutanuq 695 695 - imagePullPolicy: Always 696 696 - --- 697 697 - apiVersion: v1 698 698 - kind: Service 699 699 - metadata: 700 700 - name: mutanuq 701 701 - namespace: mutanuq 702 702 - annotations: 703 703 - cert-manager.io/issuer: acme-issuer 704 704 - spec: 705 705 - selector: 706 706 - app: mutanuq 707 707 - ports: 708 708 - - name: http 709 709 - port: 80 710 710 - --- 711 711 - apiVersion: networking.k8s.io/v1 712 712 - kind: Ingress 713 713 - metadata: 714 714 - name: mutanuq 715 715 - namespace: mutanuq 716 716 - spec: 717 717 - rules: 718 718 - - host: mutanuq.trueberryless.org 719 719 - http: 720 720 - paths: 721 721 - - path: / 722 722 - pathType: Prefix 723 723 - backend: 724 724 - service: 725 725 - name: mutanuq 726 726 - port: 727 727 - number: 80 728 728 - 729 729 - tls: 730 730 - - hosts: 731 731 - - mutanuq.trueberryless.org 732 732 - secretName: mutanuq 733 733 - ``` 734 734 - 735 735 - ## Feiern Sie mit einem Kaffee! 736 736 - 737 737 - Herzlichen Glückwunsch, Sie haben erfolgreich [Kubernetes](https://github.com/kubernetes) mit [Cilium](https://github.com/cilium) und [Cloudflare](https://github.com/cloudflare) eingerichtet! Sie haben sich eine Kaffeepause verdient. Genießen Sie eine wohlverdiente Tasse, und wenn Sie mit mir virtuell einen Kaffee teilen möchten, können Sie meine Arbeit gerne auf [Ko-fi](https://ko-fi.com/trueberryless) unterstützen. Vielen Dank! 738 738 - 739 739 - ## Fehlerbehebung 740 740 - 741 741 - ### Cilium-Ingress hat keine External-IP 742 742 - 743 743 - Stellen Sie sicher, dass der `ip-pool` die in der Datei `config.yaml` angegebenen Adressen enthält. 744 744 - 745 745 - ```yaml 746 746 - # ip-pool.yaml 747 747 - apiVersion: "cilium.io/v2alpha1" 748 748 - kind: CiliumLoadBalancerIPPool 749 749 - metadata: 750 750 - name: "first-pool" 751 751 - spec: 752 752 - blocks: 753 753 - - start: "192.168.0.240" # 240 included for ingress 754 754 - stop: "192.168.0.249" 755 755 - ``` 756 756 - 757 757 - ```yaml 758 758 - #cilium-config.yaml 759 759 - ingressController: 760 760 - enabled: true 761 761 - default: true 762 762 - loadbalancerMode: shared 763 763 - service: 764 764 - annotations: 765 765 - io.cilium/lb-ipam-ips: 192.168.0.240 # this must be within range 766 766 - ``` 767 767 - 768 768 - :::note 769 769 - In einigen Fällen nehmen andere Ingress-Controller die annotierte Adresse, bevor der Cilium IC darauf zugreifen kann, sodass sie weiterhin ausstehend ist... 770 770 - ::: 771 771 - 772 772 - Wenn Sie nicht lokal, sondern auf einer der `Big Three` bereitstellen, schauen Sie bitte in andere Dokumentationen nach, warum die External IP weiterhin ausstehend ist. Es liegt meistens in deren Verantwortung, Ihnen eine Adresse bereitzustellen. 773 773 - 774 774 - ### Keine Cloudflare-Zertifikatsgenehmigung 775 775 - 776 776 - Es kann Probleme geben, wenn das Zertifikat von Cloudflare nicht genehmigt wird. 777 777 - 778 778 - #### Falsches API-Token 779 779 - 780 780 - Stellen Sie zunächst sicher, dass das Cloudflare API-Token korrekt ist. Erstellen Sie zur hundertprozentigen Sicherheit ein neues und fügen Sie es (nicht Base64-codiert) in diese Datei ein: 781 781 - 782 782 - ```yaml 783 783 - apiVersion: v1 784 784 - kind: Secret 785 785 - metadata: 786 786 - name: cloudflare-api-key-secret 787 787 - namespace: cert-manager 788 788 - type: Opaque 789 789 - stringData: 790 790 - api-key: <Cloudflare API Token (not encrypted)> 791 791 - ``` 792 792 - 793 793 - #### Maximale Authentifizierungsfehler erreicht 794 794 - 795 795 - Wir sind einmal auf den Fehler `Error: 9109: Max auth failures reached, please check your Authorization header.` gestoßen. Warten Sie einfach ein paar Stunden, löschen Sie die Ressource und wenden Sie sie erneut an: 796 796 - 797 797 - ```bash 798 798 - kubectl delete -f certificate.yaml 799 799 - kubectl apply -f certificate.yaml 800 800 - ``` 801 801 - 802 802 - Hoffentlich können Sie jetzt loslegen!

-155

src/content/docs/de/blog/starlight-autogenerate-whole-sidebar.mdx

reviewed

··· 1 1 - --- 2 2 - title: Wie man Starlight-Sidebars vollständig automatisch erstellt (ohne die 3 3 - Kontrolle zu verlieren) 4 4 - description: Erfahren Sie zwei Starlight-Techniken, um große Sidebars 5 5 - automatisch zu erstellen und dabei saubere URLs und Beschriftungen 6 6 - beizubehalten. 7 7 - date: 2025-08-17 8 8 - tags: 9 9 - - Education 10 10 - - Starlight 11 11 - authors: 12 12 - - trueberryless 13 13 - cover: 14 14 - alt: A beautiful cover image with the text "Auto Sidebar" 15 15 - image: ../../../../../public/blog/starlight-autogenerate-whole-sidebar.jpg 16 16 - 17 17 - --- 18 18 - 19 19 - import { FileTree } from '@astrojs/starlight/components'; 20 20 - 21 21 - Haben Sie jemals versucht, die Generierung von Sidebars in Ihrem Starlight-Projekt zu vereinfachen? Haben Sie versucht, die gesamte Sidebar automatisch zu erstellen, nur um festzustellen, dass Sie die Struktur nicht nach Ihren Wünschen anpassen können? 22 22 - 23 23 - Dieser Beitrag zeigt zwei Starlight-Funktionen, die es ermöglichen, vollständig automatisch generierte Sidebars flexibel zu gestalten und den Wartungsaufwand zu reduzieren. 24 24 - 25 25 - {/* excerpt */} 26 26 - 27 27 - ## Anwendungsfall 28 28 - 29 29 - In mittelgroßen bis großen Starlight-Projekten stellt sich das Problem, dass die manuelle Erstellung und Pflege der [Starlight-Sidebar-Konfiguration](https://starlight.astro.build/reference/configuration/#sidebar) eine mühsame und zeitaufwändige Aufgabe ist. 30 30 - 31 31 - In der Vergangenheit bot Starlight nicht die richtigen Grundfunktionen dafür, und der empfohlene Ansatz bestand darin, die automatische Erstellung der Sidebar-Konfiguration um eine Ebene tiefer zu verschieben - sodass nur Ordner ohne verschachtelte Unterordner automatisch generiert wurden. Mit der Einführung von [Route Data](https://starlight.astro.build/guides/route-data/) und dem jüngeren [`generateId()`-Hook im `docsLoader`](https://starlight.astro.build/reference/configuration/#generateid) können diese Szenarien nun jedoch viel einfacher und effizienter gelöst werden. 32 32 - 33 33 - ## Das Sortierungsproblem lösen 34 34 - 35 35 - Ein häufiges Problem war immer: „Wie kann ich die Reihenfolge der Sidebar-Ordner anpassen, wenn ich die Sidebar automatisch generiere?“ Alte Probleme wie [#1223](https://github.com/withastro/starlight/issues/1223) schlagen eine Lösung vor, die von [Nuxt Content](https://content.nuxt.com) inspiriert ist, bei der jeder Abschnitt des gesamten Pfads [mit Zahlen + Punkten vorangestellt](https://v2.content.nuxt.com/usage/content-directory#ordering) werden kann, um eine nummerische Sortierung auf Dateibasis festzulegen. Ein Beispiel für ein solches Projekt könnte so aussehen: 36 36 - 37 37 - <FileTree> 38 38 - * src/content/docs/nested-folder 39 39 - * 1.frameworks 40 40 - * 1.vue.md 41 41 - * 2.nuxt.md 42 42 - * 2.examples 43 43 - * 1.vercel.md 44 44 - * 2.netlify.md 45 45 - </FileTree> 46 46 - 47 47 - Wenn Sie diesen Ansatz in Starlight verwenden möchten, funktioniert er nicht sofort, aber mit einer einfachen Einrichtung können Sie ihn umsetzen. 48 48 - 49 49 - Starlight [0.35.0](https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.35.0) führte eine Callback-Funktion ein, die Sie an `docsLoader()` übergeben können, um die ID (URL) der generierten Seite zu manipulieren. Indem Sie den Eintrag durch `"/"` aufteilen und jede Zahl + Punkt auf Segmentebene entfernen, haben Sie nun die gleiche Funktionalität in Starlight: 50 50 - 51 51 - ```ts {6-7,12-19} 52 52 - // src/content.config.ts 53 53 - import { defineCollection } from "astro:content"; 54 54 - import { docsLoader } from "@astrojs/starlight/loaders"; 55 55 - import { docsSchema } from "@astrojs/starlight/schema"; 56 56 - 57 57 - const leadingNumberAndDotRegEx = /^\d+\./; 58 58 - const fileExtensionRegEx = /\.(md|mdx)$/; 59 59 - 60 60 - export const collections = { 61 61 - docs: defineCollection({ 62 62 - loader: docsLoader({ 63 63 - // Remove file extension and 64 64 - // leading numbers + dot from each segment 65 65 - generateId: ({ entry }) => 66 66 - entry 67 67 - .replace(fileExtensionRegEx, "") 68 68 - .split("/") 69 69 - .map((segment) => segment.replace(leadingNumberAndDotRegEx, "")) 70 70 - .join("/"), 71 71 - }), 72 72 - schema: docsSchema(), 73 73 - }), 74 74 - }; 75 75 - 76 76 - ``` 77 77 - 78 78 - Die URL zum Zugriff auf die Seiten ändert sich nun z. B. von `/nested-folder/1.frameworks/1.vue` zu `/nested-folder/frameworks/vue`. 79 79 - 80 80 - Allerdings enthalten die Ordnernamen in der Sidebar immer noch die `1.`-Präfixe. Lassen Sie uns also auch die Manipulation der Sidebar lösen: 81 81 - 82 82 - ## Das Problem der Ordnerbenennung in der Sidebar lösen 83 83 - 84 84 - Starlight [0.32.0](https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.32.0) führte [Route Data](https://starlight.astro.build/guides/route-data/) ein, das wir jetzt nutzen können, um die Ordnernamen in der Sidebar zu manipulieren: 85 85 - 86 86 - 1. das Entfernen jeder führenden Zahl + Punkt aus dem Ordnernamen und 87 87 - 2. die Anwendung von "Title Case", damit sie nicht vollständig kleingeschrieben erscheinen 88 88 - 89 89 - ```ts 90 90 - // src/routeData.ts 91 91 - import { defineRouteMiddleware } from "@astrojs/starlight/route-data"; 92 92 - 93 93 - const leadingNumberAndDotRegEx = /^\d+\./; 94 94 - const wordSplitterRegEx = /\w\S*/g; 95 95 - 96 96 - function toTitleCase(str: string) { 97 97 - return str.replace(wordSplitterRegEx, (word) => { 98 98 - return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); 99 99 - }); 100 100 - } 101 101 - 102 102 - function cleanGroupLabels(entries: any[]) { 103 103 - for (const entry of entries) { 104 104 - if (entry.type === "group") { 105 105 - // Remove leading number + dot 106 106 - let label = entry.label.replace(leadingNumberAndDotRegEx, ""); 107 107 - // Convert to Title Case 108 108 - entry.label = toTitleCase(label); 109 109 - // Recurse into children 110 110 - cleanGroupLabels(entry.entries); 111 111 - } 112 112 - } 113 113 - } 114 114 - 115 115 - export const onRequest = defineRouteMiddleware((context) => { 116 116 - const { sidebar } = context.locals.starlightRoute; 117 117 - cleanGroupLabels(sidebar); 118 118 - }); 119 119 - ``` 120 120 - 121 121 - :::note[Internationalisierung (i18n)] 122 122 - Beachten Sie, dass die [Internationalisierung (i18n) von Ordnernamen](https://starlight.astro.build/guides/sidebar/#internationalization) bei einem solchen Setup eine fehlende Funktionalität ist, da es derzeit keinen Ort gibt, an dem Übersetzungen von Ordnernamen definiert werden können. Sie werden einfach in Title Case umgewandelt. Die Implementierung einer Logik zum dynamischen Laden von Übersetzungen könnte darin bestehen, das [`locale`-Feld aus den Routeninformationen](https://starlight.astro.build/reference/route-data/#locale) zu lesen und Übersetzungen in `json`-Dateien zu definieren. Andernfalls können Sie [HiDeoos Plugin verwenden](#using-hideoos-plugin), das [i18n unterstützt](https://starlight-auto-sidebar.netlify.app/guides/i18n/). 123 123 - ::: 124 124 - 125 125 - Vergessen Sie nicht, die Datei `routeData.ts` zu Ihrer `astro.config.mjs` hinzuzufügen: 126 126 - 127 127 - ```ts ins={11} 128 128 - // astro.config.mjs 129 129 - starlight({ 130 130 - title: "Autogenerate whole sidebar", 131 131 - social: [{ icon: "github", label: "GitHub", href: "https://github.com/withastro/starlight" }], 132 132 - sidebar: [ 133 133 - { 134 134 - label: "Root Folder", 135 135 - autogenerate: { directory: "nested-folder" }, 136 136 - }, 137 137 - ], 138 138 - routeMiddleware: "./src/routeData.ts", 139 139 - }), 140 140 - ``` 141 141 - 142 142 - Natürlich können Sie den Code an Ihre Bedürfnisse anpassen (z. B. die "Title Case"-Transformation entfernen, da Ihre Dateinamen bereits korrekt geschrieben sind). 143 143 - 144 144 - ## Das Plugin von HiDeoo verwenden 145 145 - 146 146 - Wenn Sie Ihre gesamte Sidebar automatisch generieren und dennoch die Flexibilität haben möchten, alles nach Ihren Wünschen anzupassen, hat [HiDeoo](https://github.com/HiDeoo) auch ein dediziertes Plugin für solche Anwendungsfälle erstellt: [Starlight Auto Sidebar](https://starlight-auto-sidebar.netlify.app). 147 147 - 148 148 - Insbesondere wurden diese zwei Funktionen in diesem Artikel erwähnt: 149 149 - 150 150 - * Die Steuerung der [Reihenfolge](https://starlight-auto-sidebar.netlify.app/metadata/#order) einzelner Verzeichnisse 151 151 - * Die Anpassung der [angezeigten Beschriftung](https://starlight-auto-sidebar.netlify.app/metadata/#label) einzelner Ordner 152 152 - 153 153 - Wenn Sie jedoch die gesamte automatische Generierung durchführen möchten, ohne für jedes Verzeichnis manuell Beschriftungen und Reihenfolgen festlegen zu müssen, ist es bevorzugt und empfohlen, die Lösung selbst zu programmieren (mit einigen Richtlinien in diesem Blog). 154 154 - 155 155 - Wenn Sie den in diesem Blog vorgestellten Code ausprobieren möchten, besuchen Sie gerne die [StackBlitz](https://stackblitz.com/github/trueberryless/starlight-autogenerate-whole-sidebar?file=src%2Fcontent.config.ts) oder den Quellcode im [GitHub-Repo](https://github.com/trueberryless/starlight-autogenerate-whole-sidebar).

-32

src/content/docs/de/blog/starlight-cooler-credit.mdx

reviewed

··· 1 1 - --- 2 2 - title: Eine stilvolle Möglichkeit, Anerkennung in Starlight-Projekten zu geben 3 3 - date: 2024-11-12 4 4 - description: Inspiriert von der Starlight-Anerkennung in den 5 5 - Astro-Dokumentationen habe ich ein anpassbares Plugin entwickelt, das Links zu 6 6 - Starlight, Astro und dem Starlight Blog bietet, mit Unterstützung für mehrere 7 7 - Sprachen. 8 8 - excerpt: Starlight Cooler Credit ist ein anpassbares Plugin, das stilvolle, 9 9 - mehrsprachige Anerkennungslinks zu Starlight, Astro und dem Starlight Blog 10 10 - bietet – und damit eine kleine Idee in eine globale Zusammenarbeit verwandelt. 11 11 - tags: 12 12 - - Starlight 13 13 - - Plugins 14 14 - authors: 15 15 - - trueberryless 16 16 - cover: 17 17 - alt: A beautiful cover image with the text "Cooler Credit" 18 18 - image: ../../../../../public/blog/starlight-cooler-credit.jpg 19 19 - 20 20 - --- 21 21 - 22 22 - Alles begann, als mir der Anerkennungslink zu [Starlight](https://starlight.astro.build) in den [Astro-Dokumentationen](https://docs.astro.build) auffiel. Am unteren Ende des Inhaltsverzeichnisses positioniert, war er einfach, aber stilvoll, und ich liebte, wie subtil er Anerkennung gab. Als Starlight seine eigene Anerkennungsoption einführte, aktivierte ich sie in all meinen Projekten. Sie war klein, unaufdringlich und am unteren Ende jeder Seite platziert – nett, aber leicht zu übersehen. 23 23 - 24 24 - Da dachte ich, *Was ist, wenn andere eine coolere Anerkennungsoption möchten, wie die aus den Astro-Dokumentationen?* Also machte ich mich daran, ein Plugin zu erstellen. Anfangs war es nur ein spaßiges Projekt, um auf auffälligere Weise Links zu Starlight und Astro bereitzustellen. Ich begann mit zwei Voreinstellungen – eine für Starlight und eine für Astro – und teilte meine Arbeit auf dem Astro-Discord. 25 25 - 26 26 - Und dort nahm alles Fahrt auf. [Ein großartiger Astro-Maintainer](https://www.rainsberger.ca/) schlug vor, *"Warum nicht auch den Starlight-Blog verlinken?"* und ich dachte, *Was für eine brillante Idee!* Ich fügte den Blog als dritte Voreinstellung hinzu, und plötzlich war das Plugin mehr, als ich je geplant hatte. 27 27 - 28 28 - Aber ich war noch nicht fertig. Es störte mich, dass die Anerkennung immer auf Englisch war, also beschloss ich, sie automatisch anhand der von Starlight unterstützten Sprachen übersetzen zu lassen. Da begann das eigentliche Abenteuer. Ich wandte mich an die Community, um Hilfe bei der Übersetzung des Plugins in verschiedene Sprachen zu erhalten. Die Resonanz war unglaublich! Menschen aus der ganzen Welt boten ihre Unterstützung an, und was als Solo-Projekt begann, wurde zu einer globalen Zusammenarbeit. Unterwegs fand ich neue Freunde und lernte so viel von allen Beteiligten. Jetzt unterstützt das Plugin etwa zehn Sprachen, und es kommen immer mehr Übersetzungen hinzu. 29 29 - 30 30 - Was als einfache Idee begann, wurde zu etwas, auf das ich wirklich stolz bin: **Starlight Cooler Credit**. Es ist mehr als nur ein Plugin – es ist eine Möglichkeit, Anerkennung mit Stil, Anpassungsfähigkeit und einem Hauch von globaler Teamarbeit zu geben. 31 31 - 32 32 - Wenn du neugierig bist, kannst du es dir unter [starlight-cooler-credit.trueberryless.org](https://starlight-cooler-credit.trueberryless.org/) ansehen. Probier es aus – ich denke, du wirst es genauso lieben wie ich!

-115

src/content/docs/de/blog/starlight-dropdown-and-list-together.mdx

reviewed

··· 1 1 - --- 2 2 - title: Starlight Themen-Dropdown und Liste zusammen 3 3 - description: Erfahren Sie, wie Sie eine Desktop-Liste und ein mobiles 4 4 - Dropdown-Menü für die Starlight-Sidebar-Themen kombinieren. 5 5 - date: 2025-05-13 6 6 - tags: 7 7 - - Starlight 8 8 - - Plugins 9 9 - - CSS 10 10 - - Education 11 11 - excerpt: Kombinieren Sie zwei <a class="gh-badge" 12 12 - href="https://github.com/withastro/starlight"><img src="/starlight.png" 13 13 - alt="Starlight" />Starlight</a> Sidebar Topics Plugins, um eine Themenliste 14 14 - auf dem Desktop und ein Dropdown-Menü in der mobilen Sidebar anzuzeigen. 15 15 - authors: 16 16 - - hideoo 17 17 - - trueberryless 18 18 - cover: 19 19 - alt: A beautiful cover image with the text "Dropdown and List?" 20 20 - image: ../../../../../public/blog/starlight-dropdown-and-list-together.jpg 21 21 - 22 22 - --- 23 23 - 24 24 - import { Tabs, TabItem } from "@astrojs/starlight/components"; 25 25 - 26 26 - Mit dem [Starlight Sidebar Topics](https://github.com/hideoo/starlight-sidebar-topics) Plugin zusammen mit der [Starlight Sidebar Topics Dropdown](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown) Komponente können Sie eine Website erstellen, die eine Themenliste auf dem Desktop und ein Dropdown-Menü auf mobilen Geräten bietet. 27 27 - 28 28 - ## Voraussetzungen 29 29 - 30 30 - Sie benötigen eine bestehende Starlight-Website. 31 31 - 32 32 - ## Pakete installieren 33 33 - 34 34 - Zuerst installieren Sie das `starlight-sidebar-topics` Plugin sowie die `starlight-sidebar-topics-dropdown` Komponente: 35 35 - 36 36 - <Tabs syncKey="pkg"> 37 37 - <TabItem label="npm"> 38 38 - ```bash 39 39 - npm install starlight-sidebar-topics starlight-sidebar-topics-dropdown 40 40 - ``` 41 41 - </TabItem> 42 42 - 43 43 - <TabItem label="pnpm"> 44 44 - ```bash 45 45 - pnpm add starlight-sidebar-topics starlight-sidebar-topics-dropdown 46 46 - ``` 47 47 - </TabItem> 48 48 - 49 49 - <TabItem label="Yarn"> 50 50 - ```bash 51 51 - yarn add starlight-sidebar-topics starlight-sidebar-topics-dropdown 52 52 - ``` 53 53 - </TabItem> 54 54 - </Tabs> 55 55 - 56 56 - Anschließend folgen Sie den Einrichtungsanleitungen von [Starlight Sidebar Topics](https://starlight-sidebar-topics.trueberryless.org/docs/getting-started/#installation) und [Starlight Sidebar Topics Dropdown](https://starlight-sidebar-topics-dropdown.trueberryless.org/docs/getting-started/#installation). 57 57 - 58 58 - ## Die Sidebar-Komponente anpassen 59 59 - 60 60 - In der Einrichtungsanleitung der Dropdown-Komponente haben Sie eine Sidebar-Komponente erstellt, die nur das Dropdown-Menü rendert. Nun müssen Sie diese Komponente anpassen, sodass sie auch die Standard-Sidebar rendert, wenn der Benutzer am Desktop ist. 61 61 - 62 62 - ```astro 63 63 - --- 64 64 - // src/components/Sidebar.astro 65 65 - import Default from '@astrojs/starlight/components/Sidebar.astro'; 66 66 - import Topics from 'starlight-sidebar-topics/components/Sidebar.astro'; 67 67 - import TopicsDropdown from 'starlight-sidebar-topics-dropdown/TopicsDropdown.astro'; 68 68 - --- 69 69 - 70 70 - <div class="topics"> 71 71 - <Topics/> 72 72 - </div> 73 73 - <div class="topics-dropdown"> 74 74 - <TopicsDropdown/> 75 75 - </div> 76 76 - <Default><slot /></Default> 77 77 - 78 78 - <style> 79 79 - /* Hide topics by default and show them on medium screens and larger */ 80 80 - .topics { 81 81 - display: none; 82 82 - } 83 83 - 84 84 - @media (min-width: 800px) { 85 85 - .topics { 86 86 - display: block; 87 87 - } 88 88 - } 89 89 - 90 90 - /* Show topics dropdown on small screens and hide it on medium screens and larger */ 91 91 - .topics-dropdown { 92 92 - display: block; 93 93 - } 94 94 - 95 95 - @media (min-width: 800px) { 96 96 - .topics-dropdown { 97 97 - display: none; 98 98 - } 99 99 - } 100 100 - </style> 101 101 - ``` 102 102 - 103 103 - ## Ergebnis 104 104 - 105 105 - Wenn Sie diese Schritte befolgen, sieht Ihre Sidebar folgendermaßen aus: 106 106 - 107 107 -  108 108 - 109 109 - Den vollständigen Quellcode dieser Anleitung finden Sie in diesem [StackBlitz-Beispiel](https://stackblitz.com/edit/withastro-starlight-qgraahmp?file=astro.config.mjs). 110 110 - 111 111 - ## Unbegrenzte Möglichkeiten 112 112 - 113 113 - Sie könnten es auch umgekehrt machen (Liste auf mobilen Geräten, Dropdown auf dem Desktop), indem Sie die CSS-Eigenschaften `display: block` und `display: none` tauschen. 114 114 - 115 115 - Darüber hinaus könnten Sie auch eine eigene Anzeige-Komponente erstellen, die die Routendaten aus dem Starlight Sidebar Topics Plugin verwendet und die Themen auf eine benutzerdefinierte Weise rendert. Das ist etwas anspruchsvoller, aber Sie finden weitere Informationen dazu in der ["Custom Topics List"-Dokumentation](https://starlight-sidebar-topics.trueberryless.org/docs/guides/custom-topic-list/).

-132

src/content/docs/de/blog/starlight-progress-indicator.mdx

reviewed

··· 1 1 - --- 2 2 - title: Wie man einen horizontalen Fortschrittsanzeiger für Ihre 3 3 - Starlight-Website erstellt 4 4 - description: Erfahren Sie, wie Sie einen horizontalen Fortschrittsanzeiger für 5 5 - Ihre Starlight-Website erstellen. 6 6 - date: 2025-06-10 7 7 - tags: 8 8 - - Starlight 9 9 - - CSS 10 10 - - Education 11 11 - excerpt: Erfahren Sie, wie Sie einen horizontalen Fortschrittsanzeiger für Ihre 12 12 - <a class="gh-badge" href="https://github.com/withastro/starlight"><img 13 13 - src="/starlight.png" alt="Starlight" />Starlight</a>-Website erstellen. 14 14 - authors: 15 15 - - frostybee 16 16 - - trueberryless 17 17 - cover: 18 18 - alt: A beautiful cover image with the text "Progress Bar" 19 19 - image: ../../../../../public/blog/starlight-progress-indicator.jpg 20 20 - 21 21 - --- 22 22 - 23 23 - In diesem Beitrag möchten wir Ihnen zeigen, wie [FrostyBee](https://github.com/frostybee) einen sauberen horizontalen Fortschrittsanzeiger für Starlight-Websites erstellt hat. 24 24 - 25 25 - ## Voraussetzungen 26 26 - 27 27 - Sie benötigen eine bestehende Starlight-Website. 28 28 - 29 29 - ## Erstellen Sie die Fortschrittsanzeiger-Komponente 30 30 - 31 31 - Lassen Sie uns eine neue Komponente namens `ProgressIndicator.astro` im Verzeichnis `src/components/` erstellen. Diese Komponente ist für die Darstellung des Fortschrittsanzeigers zuständig. 32 32 - 33 33 - Wir erstellen einen Container, der sich über die gesamte Breite erstreckt, mit der Fortschrittsleiste `<div>` darin. Die Breite des inneren `<div>` wird aktualisiert, wann immer der Benutzer scrollt (und beim Laden der Seite), um die aktuelle Scrollposition widerzuspiegeln. 34 34 - 35 35 - ```astro title="src/components/ProgressIndicator.astro" collapse={27-43} 36 36 - <div class="progress-scroll-container" aria-hidden="true"> 37 37 - <div id="progress-scroll"></div> 38 38 - </div> 39 39 - 40 40 - <script> 41 41 - window.addEventListener("scroll", function () { 42 42 - updateProgressScroll(); 43 43 - }); 44 44 - window.addEventListener("load", function () { 45 45 - updateProgressScroll(); 46 46 - }); 47 47 - 48 48 - function updateProgressScroll() { 49 49 - if (document) { 50 50 - const progressScroll = document.getElementById("progress-scroll"); 51 51 - if (progressScroll) { 52 52 - var scrollTop = window.scrollY || document.documentElement.scrollTop; 53 53 - var scrollHeight = 54 54 - document.documentElement.scrollHeight - window.innerHeight; 55 55 - var progress = (scrollTop / scrollHeight) * 100; 56 56 - progressScroll.style.width = progress + "%"; 57 57 - } 58 58 - } 59 59 - } 60 60 - </script> 61 61 - 62 62 - <style> 63 63 - html:is(:not([data-has-hero]), [data-has-sidebar], [data-has-toc]) .progress-scroll-container { 64 64 - position: fixed; 65 65 - top: var(--sl-nav-height); 66 66 - left: 0; 67 67 - height: 0.25rem; 68 68 - width: 100%; 69 69 - background-color: transparent; 70 70 - z-index: 3; 71 71 - } 72 72 - 73 73 - #progress-scroll { 74 74 - height: 100%; 75 75 - width: 0px; 76 76 - background-color: var(--sl-color-accent-high); 77 77 - } 78 78 - </style> 79 79 - 80 80 - <style is:global> 81 81 - #starlight__on-this-page--mobile { 82 82 - margin-top: 0.25rem; 83 83 - } 84 84 - </style> 85 85 - ``` 86 86 - 87 87 - In den ausgeblendeten Zeilen befindet sich das Styling, das sicherstellt, dass die Fortschrittsleiste wie eine typische Fortschrittsleiste aussieht. Sie ist auch an Starlight angepasst, da die Leiste automatisch ausgeblendet wird, wenn die Website keine Seitenleiste und Inhaltsverzeichnis, aber ein Hero-Element hat, wie es die meisten Landing Pages tun. 88 88 - 89 89 - Eine Sache, die hervorzuheben ist, ist, was das globale CSS (Zeile 45) bewirkt: Es schiebt das Dropdown-Menü des mobilen Inhaltsverzeichnisses nach unten, um mehr Abstand zur Fortschrittsleiste zu schaffen. Dies ist eine persönliche Präferenz, die Sie entfernen können, wenn Sie möchten. 90 90 - 91 91 - ## Starlight-Override 92 92 - 93 93 - Nun können wir diese Komponente in einem [Starlight-Override](https://starlight.astro.build/guides/overriding-components/) verwenden. In diesem Fall macht es Sinn, die [`Header.astro`-Komponente](https://starlight.astro.build/reference/overrides/#header-1) wie folgt zu überschreiben: 94 94 - 95 95 - ```astro title="src/components/Header.astro" 96 96 - --- 97 97 - import Default from "@astrojs/starlight/components/Header.astro"; 98 98 - import ScrollIndicator from "./ScrollIndicator.astro"; 99 99 - --- 100 100 - 101 101 - <Default><slot /></Default> 102 102 - <ScrollIndicator /> 103 103 - ``` 104 104 - 105 105 - Vergessen Sie nicht, dieses Komponenten-Override in Ihre `astro.config.mjs`-Datei aufzunehmen: 106 106 - 107 107 - ```diff lang="js" title="astro.config.mjs" 108 108 - import { defineConfig } from 'astro/config'; 109 109 - import starlight from '@astrojs/starlight'; 110 110 - 111 111 - export default defineConfig({ 112 112 - integrations: [ 113 113 - starlight({ 114 114 - title: 'My Docs with a Progress Indicator', 115 115 - + components: { 116 116 - + // Override the default `Header` component. 117 117 - + Header: './src/components/Header.astro', 118 118 - + }, 119 119 - }), 120 120 - ], 121 121 - }); 122 122 - ``` 123 123 - 124 124 - ## Quellcode 125 125 - 126 126 - Sie können den gesamten Projektcode auf [GitHub](https://github.com/trueberryless/starlight-progress-indicator) und in diesem [Stackblitz-Beispiel](https://stackblitz.com/github/trueberryless/starlight-progress-indicator?file=src%2Fcomponents%2FProgressIndicator.astro) finden. 127 127 - 128 128 - ## Fazit 129 129 - 130 130 - Mit dieser Konfiguration wird der Fortschrittsanzeiger auf jeder Seite (außer Landing Pages) Ihrer Starlight-Website angezeigt. 🥳 131 131 - 132 132 - Sie können auch das [Starlight Scroll To Top Plugin](https://github.com/frostybee/starlight-scroll-to-top) von [FrostyBee](https://github.com/frostybee) ausprobieren, das seit Version `0.3.1` auch einen integrierten [Fortschrittsring](https://frostybee.github.io/starlight-scroll-to-top/configuration/#showprogressring) unterstützt. 🙌

-162

src/content/docs/de/blog/starlight-sidebar-whitespace.mdx

reviewed

··· 1 1 - --- 2 2 - title: Wie Sie die Elemente Ihrer Starlight-Seitenleiste verbessern können 3 3 - description: In diesem Blogbeitrag werfen wir einen Blick darauf, wie kleine 4 4 - Änderungen bei Leerzeichen, Schriftgrößen, -gewichten und -farben in Ihrer 5 5 - Starlight-Seitenleiste einen großen Unterschied machen können. 6 6 - date: 2025-04-27 7 7 - tags: 8 8 - - Starlight 9 9 - - CSS 10 10 - - Education 11 11 - excerpt: In diesem Blogbeitrag werfen wir einen Blick darauf, wie kleine 12 12 - Änderungen bei Leerzeichen in Ihrer <a class="gh-badge" 13 13 - href="https://github.com/withastro/starlight"><img src="/starlight.png" 14 14 - alt="Starlight" />Starlight</a>-Seitenleiste einen großen Unterschied machen 15 15 - können. 16 16 - authors: 17 17 - - trueberryless 18 18 - cover: 19 19 - alt: A beautiful cover image with the text "Starlight CSS" 20 20 - image: ../../../../../public/blog/starlight-sidebar-whitespace.jpg 21 21 - 22 22 - --- 23 23 - 24 24 - Haben Sie sich jemals gefragt, warum Ihre \[Starlight]\[starlight]-Seitenleiste nicht so ansprechend aussieht? Wussten Sie, wie wichtig der Platz zwischen den Elementen in Ihrer Seitenleiste unbewusst ist? Die Schriftgröße, das Gewicht und kleine Farbabstufungen? In diesem Leitfaden werfen wir einen Blick darauf, wie Sie das Erscheinungsbild Ihrer Starlight-Seitenleiste mit ein paar schnellen und einfachen Schritten anpassen können. 25 25 - 26 26 - ## Voraussetzungen 27 27 - 28 28 - Zuerst müssen Sie Ihre \[Starlight-Seite einrichten]\[starlight-getting-started]. Anschließend bietet Starlight einen \[Leitfaden zur Anpassung von Stilen, die auf Ihre Starlight-Seite angewendet werden]\[starlight-css], und genau dieses Feature werden wir heute verwenden. 29 29 - 30 30 - Wie in \[diesem Leitfaden]\[starlight-css-custom] beschrieben, müssen Sie eine `.css`-Datei irgendwo in Ihrem `src/`-Verzeichnis erstellen, in der Sie Ihre CSS-Stile definieren können. Vergessen Sie nicht, den Pfad zu dieser `.css`-Datei in Starlight's `customCss`-Array in `astro.config.mjs` hinzuzufügen: 31 31 - 32 32 - ```diff lang="js" 33 33 - // astro.config.mjs 34 34 - import { defineConfig } from 'astro/config'; 35 35 - import starlight from '@astrojs/starlight'; 36 36 - 37 37 - export default defineConfig({ 38 38 - integrations: [ 39 39 - starlight({ 40 40 - title: 'Docs With Custom CSS', 41 41 - customCss: [ 42 42 - + // Relative path to your custom CSS file 43 43 - + './src/styles/custom.css', 44 44 - ], 45 45 - }), 46 46 - ], 47 47 - }); 48 48 - ``` 49 49 - 50 50 - Nach Abschluss dieser Vorbereitungsschritte sind Sie bereit, einige schöne Anpassungen am Design der Starlight-Seitenleiste auszuprobieren. 51 51 - 52 52 - ## Anpassungen 53 53 - 54 54 - Es gibt unendlich viele Möglichkeiten, mit Ihrem benutzerdefinierten CSS zu experimentieren. Ich werde Ihnen einige Ideen geben, die ich selbst beim Spielen mit dem Design der Seitenleiste sehr hilfreich fand. Auch wenn einige dieser Ideen für Sie albern erscheinen mögen, verspreche ich, dass die Kombination einiger davon Ihre Starlight-Seitenleiste noch besser aussehen lassen wird. 55 55 - 56 56 - :::note 57 57 - Eine Sache, die zu beachten ist: In diesem Blogbeitrag liegt der Fokus auf der Anpassung des Stils von **Elementen auf Root-Ebene** (diejenigen ohne Unterelemente) in der Seitenleiste. 58 58 - ::: 59 59 - 60 60 - Aber bevor ich das tue, zeige ich Ihnen, wie das Standarddesign der Starlight-Seitenleiste derzeit aussieht: 61 61 - 62 62 -  63 63 - 64 64 - ### Anpassen der Leerzeichen zwischen den Elementen der Seitenleiste 65 65 - 66 66 - Auf der Root-Ebene Ihrer Starlight-Seitenleiste gibt es zwei verschiedene Arten von Elementen: **Seiten** und **Gruppen**. Während das Standarddesign ziemlich anständig ist, fand ich die Leerzeichen – der Abstand zwischen den Elementen, der selbst keinen Inhalt enthält – etwas zu groß, besonders zwischen Elementen auf Root-Ebene. Mit diesem Beispiel benutzerdefinierten CSS unten habe ich den Abstand zwischen den Elementen auf Root-Ebene verkleinert, während der Abstand zwischen den Gruppen gleich bleibt. Die wichtigen CSS-Stile sind im Codeblock hervorgehoben. 67 67 - 68 68 - ```css {3} showLineNumbers=false 69 69 - // src/styles/custom.css 70 70 - sl-sidebar-state-persist ul.top-level > li:not(:has(details)) { 71 71 - margin-top: 0rem; 72 72 - } 73 73 - sl-sidebar-state-persist ul.top-level > li:has(details) { 74 74 - margin-block: 0.5rem; /* default value */ 75 75 - } 76 76 - ``` 77 77 - 78 78 -  79 79 - 80 80 - Vielleicht ist dies für Sie nicht so nützlich, weil Sie keine Root-Level-Seiten in Ihrer Seitenleiste verwenden, sodass dieser Effekt für Sie nicht bemerkbar ist. Aber wenn doch, probieren Sie es aus. 81 81 - 82 82 - ### Anpassen des Schriftgewichts der Seitenleisten-Elemente 83 83 - 84 84 - \[IMHO]\[imho], das eine, was mich an den Root-Level-Elementen in der Starlight-Seitenleiste am meisten stört, ist deren Fettdruck. Das ist wahrscheinlich eine sehr subjektive Meinung, aber wenn Sie mich fragen: Eine einzige Seite kann unmöglich so wichtig sein wie eine ganze Gruppe Seiten in Ihrer Dokumentation. Daher habe ich das Schriftgewicht der Elemente auf Root-Ebene dünner gemacht, wie Sie im folgenden Codeblock sehen können. 85 85 - 86 86 - ```css {6} showLineNumbers=false 87 87 - // src/styles/custom.css 88 88 - sl-sidebar-state-persist ul.top-level > li > a[aria-current="page"] { 89 89 - font-weight: 600; /* default value */ 90 90 - } 91 91 - sl-sidebar-state-persist ul.top-level > li > a:not([aria-current="page"]) { 92 92 - font-weight: 400; 93 93 - } 94 94 - ``` 95 95 - 96 96 -  97 97 - 98 98 - ### Anpassen der Farbe der Seitenleisten-Elemente 99 99 - 100 100 - Eine kleine, aber subtile Änderung: Ich habe unselektierte Root-Level-Einträge in der Seitenleiste mit einem schwächeren Erscheinungsbild versehen, wie im folgenden Codeblock gezeigt. 101 101 - 102 102 - Wenn Sie sich entscheiden, dieses Design ebenfalls zu verwenden, empfehle ich, nur die zweite CSS-Manipulation anzuwenden, da die erste nur zur Demonstration dient, wie Sie das Styling von ausgewählten Root-Level-Elementen anpassen könnten – diese Regel gilt auch für andere Codeblöcke in diesem Blog, wenn sie als `default value` gekennzeichnet sind. 103 103 - 104 104 - ```css {6} showLineNumbers=false 105 105 - // src/styles/custom.css 106 106 - sl-sidebar-state-persist ul.top-level > li > a[aria-current="page"] { 107 107 - color: var(--sl-color-text-invert); /* default value */ 108 108 - } 109 109 - sl-sidebar-state-persist ul.top-level > li > a:not([aria-current="page"]) { 110 110 - color: var(--sl-color-gray-2); 111 111 - } 112 112 - ``` 113 113 - 114 114 -  115 115 - 116 116 - ### Anpassen der Schriftgröße der Seitenleisten-Elemente 117 117 - 118 118 - Obwohl ich es nicht empfehle, können Sie auch die Schriftgröße der Seitenleisten-Elemente anpassen. Mit diesem Beispiel benutzerdefinierten CSS unten habe ich die Schriftgröße der Elemente auf Root-Ebene verkleinert. 119 119 - 120 120 - ```css {3} showLineNumbers=false 121 121 - // src/styles/custom.css 122 122 - sl-sidebar-state-persist ul.top-level > li > a { 123 123 - font-size: var(--sl-text-sm); 124 124 - } 125 125 - ``` 126 126 - 127 127 -  128 128 - 129 129 - ## Empfehlungen 130 130 - 131 131 - Zusammenfassend empfehle ich, dass Sie eine Mischung aus den oben genannten Anpassungsoptionen anwenden, die Sie bequem in einer einzigen `.css`-Datei sehen können. 132 132 - 133 133 - Beachten Sie, dass ich auch \[Cascade Layers]\[starlight-css-cascade-layers] verwende, die seit \[Starlight 0.34.0]\[starlight-0-34] unterstützt werden, und empfehle, diese zu verwenden, um die Reihenfolge der angewendeten CSS-Stile festzulegen. 134 134 - 135 135 - ```css showLineNumbers=false 136 136 - // src/styles/custom.css 137 137 - @layer starlight, my-starlight-sidebar; 138 138 - 139 139 - @layer my-starlight-sidebar { 140 140 - sl-sidebar-state-persist ul.top-level > li:not(:has(details)) { 141 141 - margin-block: 0rem; 142 142 - } 143 143 - sl-sidebar-state-persist ul.top-level > li > a:not([aria-current="page"]) { 144 144 - font-weight: 400; 145 145 - color: var(--sl-color-gray-2); 146 146 - } 147 147 - } 148 148 - ``` 149 149 - 150 150 - [starlight]: https://starlight.astro.build 151 151 - 152 152 - [starlight-getting-started]: https://starlight.astro.build/getting-started/ 153 153 - 154 154 - [starlight-css]: https://starlight.astro.build/guides/css-and-tailwind/ 155 155 - 156 156 - [starlight-css-custom]: https://starlight.astro.build/guides/css-and-tailwind/#custom-css-styles 157 157 - 158 158 - [starlight-css-cascade-layers]: https://starlight.astro.build/guides/css-and-tailwind/#cascade-layers 159 159 - 160 160 - [starlight-0-34]: https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.34.0 161 161 - 162 162 - [imho]: https://en.wiktionary.org/wiki/IMHO

-51

src/content/docs/de/blog/starlight-topics-history-story.mdx

reviewed

··· 1 1 - --- 2 2 - title: Eine kurze Geschichte der Starlight Sidebar Topics Plugins 3 3 - description: In diesem Blogbeitrag zeige ich Ihnen die Entwicklung der 4 4 - Starlight-Plugins anhand einer Fallstudie zum Starlight Sidebar Topics Plugin. 5 5 - date: 2025-05-05 6 6 - tags: 7 7 - - Starlight 8 8 - - Plugins 9 9 - excerpt: In diesem Beitrag zeige ich Ihnen die Entwicklung der <a 10 10 - class="gh-badge" href="https://github.com/withastro/starlight"><img 11 11 - src="/starlight.png" alt="Starlight" />Starlight</a>-Plugins anhand einer 12 12 - Fallstudie des [Starlight Sidebar 13 13 - Topics](https://github.com/hideoo/starlight-sidebar-topics) Plugins. Seien Sie 14 14 - darauf gefasst, beeindruckende Fakten über Menschen und Code rund um Starlight 15 15 - zu entdecken. 16 16 - authors: 17 17 - - trueberryless 18 18 - - ai 19 19 - cover: 20 20 - alt: A beautiful cover image with the text "History Time" 21 21 - image: ../../../../../public/blog/starlight-topics-history-story.jpg 22 22 - 23 23 - --- 24 24 - 25 25 - Vielleicht haben Sie schon einmal von diesem coolen Dokumentationsframework gehört. Ich spreche oft darüber und benutze es regelmäßig. Nicht nur, weil ich ein aktiver Mitwirkender bin, sondern auch, weil [Starlight](https://starlight.astro.build) mir einfach ans Herz gewachsen ist. Seine Funktionen: Einfachheit und Minimalismus, aber alles, was man braucht. Seine Leistung: [Schneller als 98 % der anderen Websites](https://www.websitecarbon.com/website/starlight-astro-build-getting-started/). Seine Barrierefreiheit: Keine Frage! 26 26 - 27 27 - ## Die Entstehung 28 28 - 29 29 - Eine Sache, die aus meiner Sicht objektiv fehlt, ist eine granulare Möglichkeit, breite Themen in Ihrer Dokumentation zu trennen. Und ich bin nicht allein mit dieser subjektiv allgemein akzeptierten Meinung. [HiDeoo](https://github.com/HiDeoo) ist nicht nur einer der aktivsten Maintainer des Projekts, sondern auch der Autor der meisten und meiner Meinung nach besten Plugins, die man für Starlight finden kann. Und auch ihnen fiel diese fehlende Nischenfunktionalität bei Themen auf. Deshalb haben sie im Oktober 2024, also relativ früh, das [Starlight Sidebar Topics](https://github.com/hideoo/starlight-sidebar-topics) Plugin erstellt, mit dem man eine Seitenleiste mit Themen erstellen kann. Lesen Sie mehr über die Funktionen des Plugins in [der Dokumentation](https://starlight-sidebar-topics.trueberryless.org/). 30 30 - 31 31 - Das Einzige, was mich in den frühen Tagen des Plugins persönlich gestört hat, war die Art und Weise, wie die Themen in der Seitenleiste angezeigt wurden. Es verwendet - im Gegensatz zu der von mir vorgestellten Lösung - keine Art Dropdown-Menü zum Wechseln zwischen Themen, sondern zeigt stattdessen immer alle Themen an. Diese Designentscheidung war, wie [HiDeoo klar hervorhebt](https://github.com/HiDeoo/starlight-sidebar-topics/issues/2#issuecomment-2410196392), sehr bewusst und nicht ohne Grund: Alle Themen sollen auf einmal sichtbar sein. Bewiesen durch die [Astro](https://github.com/withastro) Dokumentation selbst ([Chris Swithinbank](https://github.com/delucis) implementierte die ["Tab-Leiste"](https://github.com/withastro/docs/pull/9890) für die Astro v5 Dokumentation später im selben Monat), hat dieser Ansatz definitiv viele Vorteile gegenüber einem Dropdown-Menü. Dennoch war ich weiterhin mit diesem Design unzufrieden, und so habe ich meine eigene Version erstellt. 32 32 - 33 33 - Kopieren und Einfügen war meine Stärke, wenn es darum ging, ein neues Starlight-Plugin für die Community zu erstellen. Und so habe ich es einfach getan. Ich nahm das Starlight Sidebar Topics Plugin als Ausgangspunkt und musste nur das `Topics.astro`-Komponente anpassen, das das HTML für die Darstellung der Themen in der Seitenleiste enthält. Nachdem ich einige Zeit damit gekämpft hatte, ein zufriedenstellendes Dropdown-Menü zu implementieren, das nur aus HTML und CSS bestand, aber auch optisch ansprechend war (Entschuldigung für das Eigenlob, ich bin einfach stolz auf mich), habe ich endlich eine Lösung gefunden, mit der ich sehr zufrieden bin, und habe dieses neue Plugin unter dem Namen [Starlight Sidebar Topics Dropdown](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown) veröffentlicht - wie originell. 34 34 - 35 35 - ## Die Anpassung 36 36 - 37 37 - Sie könnten denken, dass diese Geschichte nun vorbei ist, da jeder einfach die Variante nutzen könnte, die er bevorzugt, und alle wären glücklich. Aber Starlight entwickelte sich weiter und verbessert sich ständig. Etwa drei Monate später, am 15. Februar, fast wie ein [Geburtstagsgeschenk](../../../../../blog/20th-birthday/) für mich, kam die lang erwartete Ergänzung von Routendaten in Starlight mit der Veröffentlichung von [v0.32](https://github.com/withastro/starlight/releases/tag/@astrojs/starlight@0.32.0). Diese scheinbar kleine Ergänzung eröffnete so viele Möglichkeiten, die ich selbst nie erwartet hätte. HiDeoo war einmal mehr die führende Inspiration für Plugin-Autoren und trieb diese neue Funktionalität bis an ihre Grenzen. Es dauerte nur zwei Tage, um [mehr als 11 Plugins an die neueste Starlight-Version von damals anzupassen](https://bsky.app/profile/hideoo.dev/post/3liffpudc5c2b), und später wurden viele dieser Codeabschnitte verbessert und refaktoriert, um diese mächtige Funktion noch weiter zu nutzen. 38 38 - 39 39 - Und so kam der Tag, an dem HiDeoo mich kontaktierte, um mir mitzuteilen, dass das Starlight Sidebar Topics Plugin nun die neue Routen-Daten-Funktion von Starlight nutzt. Zuerst verstand ich nicht ganz, welchen Nutzen diese Implementierungsänderungen haben würden, aber dann nahm sich HiDeoo die Zeit, mir zu erklären, dass ich das Starlight Sidebar Topics Dropdown Plugin jetzt in eine einfache Komponente umwandeln könnte, die die Routen-Daten aus seinem Plugin verwendet. Intuitiv war ich gegen diese clevere Idee, weil es sich anfühlte, als würde mein einziges Plugin, das etwas Popularität erlangt hatte, in eine nutzlose Komponente verwandelt. Ich hätte nicht weiter von der Wahrheit entfernt sein können. 40 40 - 41 41 - ## Die Vereinigung 42 42 - 43 43 - Schließlich beschloss ich, mein Plugin in eine Komponente umzuwandeln - diese Umstrukturierung eliminierte beiläufig genau [1210 Zeilen Code und fügte 68 Änderungsprotokollzeilen hinzu](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/pull/40) - und ich bemerkte, wie wenig Code es jetzt erforderte, um die `Topics.astro` Liste aus der Perspektive eines Nutzers in ein Dropdown zu verwandeln. Ich war zuversichtlich, dass dies wirklich die richtige Richtung für die ~~Plugin~~ Komponente war. Also aktualisierte ich die gesamte Dokumentation - eher: löschte über 200 Zeilen Text (fühlt sich gut an) - und veröffentlichte die neue [Version 0.5](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/releases/tag/starlight-sidebar-topics-dropdown%400.5.0). 44 44 - 45 45 - Jetzt fragen Sie sich vielleicht, wie solch ausgereifte Plugins sich noch weiter verbessern können. Um ehrlich zu sein, ich selbst war sehr überrascht, als HiDeoo mir beiläufig eine Bombe in meine Discord-DMs fallen ließ. Seine Idee war und ist immer noch genial. Andernfalls würde ich nicht einmal mehr an dieses *Thema* denken. Aber hier bin ich und schreibe satte 800 Worte, nur um Sie auf das kommende vorzubereiten. Trommelwirbel bitte! Anschnallen! Diese Aussage von HiDeoo wird Sie umhauen: 46 46 - 47 47 - > „Man könnte auf einer Desktop-Ansicht etwas wie die standardmäßig eingebaute Liste und auf mobilen Geräten Ihre Komponente oder so etwas verwenden 🧠“ — HiDeoo, 21/03/2025 09:54 48 48 - 49 49 - Tiefgründig. Zeitlos. Golden. 50 50 - 51 51 - Und diese einzige, wunderschöne Idee? Genau darüber werde ich Ihnen im Beitrag [„Starlight Topics Dropdown und List zusammen“](../../../../../blog/starlight-dropdown-and-list-together/) berichten.

-173

src/content/docs/de/blog/technically-impressive-github-profile-readme.mdx

reviewed

··· 1 1 - --- 2 2 - title: Wie ich ein GitHub-Profil-README erstellt habe, das es eigentlich nicht 3 3 - geben sollte (aber es gibt es) 4 4 - description: Ein tiefgehender Einblick in die technischen Herausforderungen und 5 5 - Lösungen hinter meinem GitHub-Profil-README, mit Schwerpunkt auf 6 6 - SVG-Manipulation, Automatisierung und einem dynamischen Bento-Grid. 7 7 - date: 2025-02-05 8 8 - tags: 9 9 - - Automation 10 10 - - GitHub 11 11 - excerpt: Ein herausragendes <a class="gh-badge" 12 12 - href="https://github.com/github"><img src="https://github.com/github.png" 13 13 - alt="github" />GitHub</a>-Profil-README zu erstellen, bedeutet nicht nur, ein 14 14 - paar Abzeichen hinzuzufügen — es geht darum, technische Grenzen zu 15 15 - überschreiten. In diesem tiefgehenden Einblick erkunde ich 16 16 - Low-Level-SVG-Manipulation, HTML-zu-SVG-Konvertierung, Inline-Animationen und 17 17 - vollständige Automatisierung mit GitHub Actions, um das vielleicht technisch 18 18 - fortschrittlichste GitHub-README zu erstellen. Von einem dynamischen 19 19 - Bento-Grid, das alle 5 Minuten aktualisiert wird, bis hin zum Einbetten von 20 20 - Live-SVGs ohne externe Anfragen hat dieses Projekt mein Profil in eine 21 21 - lebendige, sich selbst aktualisierende Präsentation meiner Arbeit verwandelt. 22 22 - Neugierig, wie ich das gemacht habe? Lass uns loslegen. 🚀 23 23 - authors: 24 24 - - trueberryless 25 25 - - ai 26 26 - cover: 27 27 - alt: A beautiful cover image with the text "GitHub Profile" 28 28 - image: ../../../../../public/blog/technically-impressive-github-profile-readme.jpg 29 29 - 30 30 - --- 31 31 - 32 32 - :::note 33 33 - Lies die formellere Geschichte [hier](../../../../../blog/github-profile-readme/) 34 34 - ::: 35 35 - 36 36 - ## Der Anfang: Ein README, das wie ein Wikipedia-Dump aussah 37 37 - 38 38 - Jede großartige Geschichte beginnt mit einem Problem, und meines war einfach: Mein [GitHub-Profil](https://github.com/trueberryless) README war ein komplettes Chaos. Es war lang. Es hatte zu viel Text. Es war überfüllt mit Abzeichen — so viele, dass es aussah, als würde ich jede mögliche Internet-Trophäe horten. Hackathons, GitHub-Beiträge, Astro, roadmap.sh — wenn es ein Abzeichen gab, hatte ich es. 39 39 - 40 40 - Am Anfang dachte ich, das wäre in Ordnung. Es zeigte schließlich alles über mich, oder? Aber eines Tages sah ich es an und stellte fest: 41 41 - 42 42 - > Das ist nicht stilvoll. Das ist ein überladenes Desaster. 43 43 - 44 44 - Ich brauchte etwas Neues. Etwas Sauberes. Etwas Visuell Beeindruckendes. Ich wollte ein **Bento-Grid**, das die Leute dazu bringt, stehen zu bleiben und es zu bewundern, anstatt verwirrt daran vorbeizuscrollen. Ein Design, das so gut ausgeführt ist, dass jeder, der es sieht, sofort eines für sich haben wollte. 45 45 - 46 46 - Das war der Traum. Jetzt musste ich ihn nur noch realisieren. 47 47 - 48 48 - ## Phase 1: Der HTML-Traum (und Markdown-Albtraum) 49 49 - 50 50 - Der erste Schritt war einfach: Entwerfen meines perfekten Profils in HTML und CSS. Und ich kann dir sagen, es sah unglaublich aus. Es hatte das perfekte Layout, sanfte Animationen und genau das richtige Gleichgewicht zwischen Inhalt und Raum. Dann kam die Realität. Dies musste innerhalb von *GitHub-Flavored Markdown* funktionieren. Kein Problem, oder? Markdown unterstützt HTML! Also kopierte ich mein wunderschönes HTML in mein README und drückte Speichern. 51 51 - 52 52 - > [GitHub](https://github.com/github): *Absolut nicht.* 53 53 - 54 54 - Die GitHub-Markdown [entfernt nicht eine riesige Anzahl von HTML-Tags, aber wichtige](https://github.github.com/gfm/#disallowed-raw-html-extension). Aus Sicherheitsgründen natürlich (und das respektiere ich vollkommen, GitHub, wirklich ❤️), aber das bedeutete, dass mein perfektes Design komplett **unbrauchbar** war. 55 55 - 56 56 - Ich habe versucht, es anzupassen. Nicht unterstützte Tags durch funktionierende zu ersetzen. Vielleicht konnte ich etwas retten? *Nein*. Die Einschränkungen von Markdown machten mein Traum-Layout unmöglich. 57 57 - 58 58 - ## Phase 2: Der "Einfach Ein Python-Skript Benutzen"-Kompromiss 59 59 - 60 60 - Wenn du dir unsicher bist, automatisiere es. Wenn ich mein HTML nicht direkt einfügen konnte, vielleicht konnte ich etwas Dynamisches mit einem Skript generieren? Also habe ich ein Python-Skript zusammengestellt, um mein neuestes GitHub-Repository abzurufen und in mein README einzufügen. Ich lasse hier einfach ein paar zufällige Bytes, die einige als Python-Code bezeichnen könnten: 61 61 - 62 62 - ```python collapse={1-22} showLineNumbers=false 63 63 - import requests 64 64 - 65 65 - github_username = "yourusername" 66 66 - repos_url = f"https://api.github.com/users/{github_username}/repos?sort=pushed" 67 67 - 68 68 - response = requests.get(repos_url) 69 69 - repos = response.json() 70 70 - 71 71 - latest_repo = repos[0]["name"] if repos else "No repositories found." 72 72 - 73 73 - with open("README.md", "r") as file: 74 74 - readme_content = file.readlines() 75 75 - 76 76 - new_content = [] 77 77 - for line in readme_content: 78 78 - if "<!--LATEST_REPO-->" in line: 79 79 - new_content.append(f"- Latest Repo: [{latest_repo}](https://github.com/{github_username}/{latest_repo})\n") 80 80 - else: 81 81 - new_content.append(line) 82 82 - 83 83 - with open("README.md", "w") as file: 84 84 - file.writelines(new_content) 85 85 - ``` 86 86 - 87 87 - Das schien ein Schritt in die richtige Richtung zu sein. Es war automatisiert. Es funktionierte. Aber es löste nicht mein eigentliches Problem. 😢 88 88 - 89 89 - Es ging nicht um dynamischen Inhalt — es ging um *Design*. Und keine Menge Python-Scripting würde Markdown schön aussehen lassen. 90 90 - 91 91 - ## Phase 3: "Na Gut, Ich Nehme Einfach Einen Screenshot" (Tiefpunkt) 92 92 - 93 93 - Zu diesem Zeitpunkt war ich verzweifelt. Ich dachte an das Undenkbare: *Einfach einen Screenshot vom HTML machen und ihn als Bild in mein README einfügen.* Es war ein brutaler Ansatz. Es war faul. Es war... effektiv? 94 94 - 95 95 - Einen Moment lang dachte ich tatsächlich darüber nach, es zu tun. Aber tief im Inneren wusste ich, dass ich mir nie verzeihen würde, wenn ich das als endgültige Lösung akzeptieren würde. 96 96 - 97 97 - Zur Referenz hätte ich [Puppeteer](https://www.npmjs.com/package/puppeteer) und [FFmpeg](https://www.ffmpeg.org/) verwendet — keine Ahnung, was diese Tools sind. 98 98 - 99 99 - ## Phase 4: SVGs treten auf den Plan (Das Licht am Ende des Tunnels) 100 100 - 101 101 - Ich ließ den verfluchten Screenshot-Plan fallen und suchte nach etwas Flexiblerem. 102 102 - 103 103 - SVGs. 104 104 - 105 105 - SVGs konnten skalieren, sie unterstützten sowohl Text als auch Bilder, und — was am wichtigsten war — sie konnten **HTML innerhalb von ihnen einbetten**. 106 106 - 107 107 - Also versuchte ich etwas wie das: 108 108 - 109 109 - ```xml showLineNumbers=false 110 110 - <svg width="800" height="400" xmlns="http://www.w3.org/2000/svg"> 111 111 - <foreignObject width="100%" height="100%"> 112 112 - <body xmlns="http://www.w3.org/1999/xhtml"> 113 113 - <h1>Hello from HTML inside SVG!</h1> 114 114 - </body> 115 115 - </foreignObject> 116 116 - </svg> 117 117 - ``` 118 118 - 119 119 - Vielversprechend! Das könnte tatsächlich funktionieren! 120 120 - 121 121 - Dann wurde ich mit anderen Dingen beschäftigt, vergaß, es zu debuggen, und kehrte nie zu dieser Idee zurück. 122 122 - 123 123 -  124 124 - 125 125 - ## Phase 5: SVGs in SVGs in SVGs (Inception-Stufe 100) 126 126 - 127 127 - Als ich zum Projekt zurückkehrte, war ich **entschlossen**, es zum Laufen zu bringen. 128 128 - 129 129 - Mir wurde klar, dass, wenn ich HTML nicht direkt in Markdown einfügen konnte, ich es vortäuschen konnte, indem ich verschachtelte SVGs verwendete. (Übrigens ist dies stark vereinfacht; der tatsächliche Prozess dauerte Tage, die sich wie Wochen, wenn nicht Monate anfühlten, aber ich weiß, dass ihr das sowieso nicht alles lesen würdet, also wen interessiert's?) 130 130 - 131 131 - Und dann, nach Stunden der Recherche, stieß ich auf eine lebensverändernde Stack Overflow-Antwort: 132 132 - 133 133 - [https://stackoverflow.com/a/65049620/22573601](https://stackoverflow.com/a/65049620/22573601) 134 134 - 135 135 - Das führte mich zur aktuellen Lösung: 136 136 - 137 137 - 1. Mein HTML-Layout nach SVG konvertieren. 138 138 - 2. Alle Bilder in **Base64** kodieren (da GitHub Markdown keine externen Bilder innerhalb eines SVG mit HTML lädt). 139 139 - 3. Dynamische SVGs einbetten (wie meine GitHub-Statistiken, Spotify-Status usw.). 140 140 - 4. Alles mit **GitHub Actions** automatisieren. 141 141 - 142 142 - ## Das große Finale: Das ultimative GitHub-Profil-README 143 143 - 144 144 - * Ein schlankes Bento-Grid-Layout, perfekt in SVG strukturiert. 145 145 - * Ein live-aktualisierender Spotify-Status, in SVG eingebettet. 146 146 - * GitHub-Statistiken, dynamisch über Automatisierung eingefügt. 147 147 - * Vollständig responsiv, vollständig skalierbar und vollkommen verrückt zu erstellen. 148 148 - 149 149 - Es aktualisiert sich alle 5 Minuten, läuft vollständig auf GitHub Actions und ist nicht auf externe Dienste angewiesen. Es ist wunderschön. Es ist effizient. Und vor allem ist es technisch absurd im besten Sinne. 150 150 - 151 151 - Schauen Sie sich ein konkretes Beispiel der Endergebnisse irgendwann in der Vergangenheit an. 152 152 - 153 153 - import { Image } from 'astro:assets' 154 154 - 155 155 - <Image src={"https://raw.githubusercontent.com/trueberryless/trueberryless/7519c6f50094bdfd6fb47f610e6638ac8efdd6ad/html-wrapper.svg"} width={980} height={913} alt="Final result" data-zoom-off /> 156 156 - 157 157 - Ist das nicht schlecht im Vergleich zum [alten README.md](https://github.com/trueberryless/trueberryless/blob/5dce4ad0033b00829f8ec3756827057017447a65/README.md). Und kommentier bitte nicht, warum ich K-Pop höre! Es ist besser, als du denkst, glaub mir. 158 158 - 159 159 - Sieh dir die Live-Version auf meinem GitHub [trueberryless](https://github.com/trueberryless) an — falls ich beschlossen habe, sie zu behalten... — und folge mir, wenn du schon da bist, falls dir das Lesen gefallen hat! ❤️ 160 160 - 161 161 - *** 162 162 - 163 163 - ## Abschließende Gedanken: War es das wert? 164 164 - 165 165 - Absolut. 166 166 - 167 167 - Diese Reise war frustrierend, zeitaufwendig und voller Hindernisse, mit denen ich nie gerechnet hätte. Aber ich habe so viel über SVGs, die Einschränkungen von Markdown, GitHub Actions und Automatisierung gelernt. 168 168 - 169 169 - Würde ich es wieder tun? Definitiv. 170 170 - 171 171 - Würde ich es empfehlen? Nur, wenn du eine Menge Geduld hast. 😅 172 172 - 173 173 - Aber am Ende habe ich ein [GitHub](https://github.com/github)-Profil-README erstellt, das *eigentlich nicht existieren sollte* — aber es existiert. Und ich liebe es.

-172

src/content/docs/de/blog/terraform-variables-resolution.mdx

reviewed

··· 1 1 - --- 2 2 - title: Vibe-Coding einer VS Code-Erweiterung für Terraform-Projekte 3 3 - description: Wie ich eine Erweiterung für Visual Studio Code erstellt habe, die 4 4 - Inline-Resolutionen für Variablen in Terraform-Projekten hinzufügt. 5 5 - date: 2025-08-01 6 6 - tags: 7 7 - - Automation 8 8 - - Plugins 9 9 - - Tool 10 10 - authors: 11 11 - - trueberryless 12 12 - cover: 13 13 - alt: A beautiful cover image with the text "VSCE Terraform" 14 14 - image: ../../../../../public/blog/terraform-variables-resolution.jpg 15 15 - 16 16 - --- 17 17 - 18 18 - import { FileTree, LinkButton } from "@astrojs/starlight/components" 19 19 - 20 20 - Heute möchte ich über eine kleine VS Code-Erweiterung sprechen, die ich an einem einzigen Tag vibe-codiert habe, um die Arbeit mit Terraform zu erleichtern. Zunächst erkläre ich, was Terraform ist, und gehe dann direkt auf die Funktionalität und die Gründe für diese Erweiterung ein. Fühlen Sie sich frei, den ersten Abschnitt zu überspringen, wenn Sie bereits mit Terraform vertraut sind. 21 21 - 22 22 - {/* excerpt */} 23 23 - 24 24 - ## Was ist Terraform? 25 25 - 26 26 - Terraform ist ein Infrastructure-as-Code (IaC)-Tool, mit dem Sie Ihre gesamte Cloud- oder On-Premises-Infrastruktur als Code definieren können. Die von [HashiCorp](https://github.com/hashicorp) entwickelte Konfigurationssprache wird als HCL (HashiCorp Configuration Language) bezeichnet und bietet eine intuitive, menschenlesbare Syntax. Die *native Syntax* hat den Vorteil, dass die Lernkurve niedrig ist, sie für alle Anbieter konsistent ist und angenehm für Menschen zu lesen und zu schreiben ist, während die JSON-basierte Variante für Maschinen einfacher zu generieren und zu parsen ist. 27 27 - 28 28 - Was Terraform sehr leistungsfähig macht, sind zwei grundlegende Funktionen: **Variablen** und **Module**. Variablen ermöglichen es, Ressourcen zu erstellen, bei denen die tatsächlichen Werte von anderswoher eingefügt werden können, und Module gruppieren eine beliebige Anzahl von Ressourcen, was den Vorteil der Wiederverwendbarkeit und Verschachtelung hat. Während beide Funktionen sehr grundlegend erscheinen, bilden sie in Kombination ein Traumteam. Denn die Offenheit von Terraform ermöglicht es, Eingabevariablen für jedes Modul zu definieren und Variablen auch über Ausgaben zu exportieren. 29 29 - 30 30 - Ein einfaches Modul ist daher wie folgt aufgebaut: 31 31 - 32 32 - <FileTree> 33 33 - * azure-resource-group/ 34 34 - * main.tf 35 35 - * variables.tf 36 36 - * outputs.tf 37 37 - * README.md 38 38 - </FileTree> 39 39 - 40 40 - Alle Dateien außer `main.tf` sind optional (die `README.md` ist nicht spezifisch für Terraform), aber ich bevorzuge es, Best Practices zu folgen, daher beinhaltet das Beispiel diese Dateien. 41 41 - 42 42 - Schauen wir uns ein einfaches Beispiel an. Nehmen wir an, wir möchten eine Ressourcengruppe in Azure mit Terraform verwalten. In der Datei `variables.tf` definieren wir, welche Eingaben wir innerhalb des Moduls erwarten. Jeder der beiden Blöcke repräsentiert die Variable und die Eigenschaften der Variablen, wie die `description` oder den `type`: 43 43 - 44 44 - ```hcl 45 45 - // variables.tf 46 46 - variable "name" { 47 47 - description = "Name of the resource group" 48 48 - type = string 49 49 - } 50 50 - 51 51 - variable "location" { 52 52 - description = "Azure region" 53 53 - type = string 54 54 - default = "westeurope" 55 55 - } 56 56 - ``` 57 57 - 58 58 - Sie haben vielleicht bemerkt, dass die Variable `location` auch eine `default`-Eigenschaft hat, die die Variable optional macht und einen Fallback-Wert bietet, falls keiner angegeben wird. Diese Variablen können dann innerhalb der Datei `main.tf` verwendet werden. Hier definieren wir die tatsächlichen Ressourcen, die wir generieren möchten: 59 59 - 60 60 - ```hcl 61 61 - // main.tf 62 62 - provider "azurerm" { 63 63 - features {} 64 64 - } 65 65 - 66 66 - resource "azurerm_resource_group" "this" { 67 67 - name = var.name 68 68 - location = var.location 69 69 - } 70 70 - ``` 71 71 - 72 72 - In diesem Fall definieren wir einfach unsere Ressourcengruppe, die Sie sich wie einen Ordner in Azure vorstellen können – eine sehr laienhafte Erklärung. Der letzte Teil, den wir umsetzen können, ist die Datei `outputs.tf`: 73 73 - 74 74 - ```hcl 75 75 - // outputs.tf 76 76 - output "resource_group_id" { 77 77 - description = "The ID of the resource group" 78 78 - value = azurerm_resource_group.this.id 79 79 - } 80 80 - ``` 81 81 - 82 82 - Dies ist sehr nützlich, wenn wir Informationen wie die ID der Ressourcengruppe später in anderen Teilen unseres Terraform-Projekts verwenden möchten. 83 83 - 84 84 - Wie ich bereits geschrieben habe, ist die `README.md` tatsächlich kein Teil der Terraform-Definitionen, hilft uns jedoch, den Zweck des Moduls zu verstehen: 85 85 - 86 86 - ````md 87 87 - # Azure Resource Group Module 88 88 - 89 89 - A minimal Terraform module that creates an Azure Resource Group. 90 90 - 91 91 - ## Usage 92 92 - 93 93 - ```hcl 94 94 - module "rg" { 95 95 - source = "./azure-resource-group" 96 96 - name = "my-resource-group" 97 97 - } 98 98 - ``` 99 99 - ```` 100 100 - 101 101 - Wie die `README.md` bereits andeutet, können wir dieses Modul jetzt verwenden, um eine Azure-Ressourcengruppe überall innerhalb unseres Projekts zu erstellen. Wir müssen nur sicherstellen, dass der Pfad zum Modul-Ordner korrekt ist und Terraform die Dateien `main.tf`, `variables.tf` und `outputs.tf` interpretieren kann. In diesem Fall, da wir die Variable `location` nicht angeben, wird sie auf `"westeurope"` gesetzt. 102 102 - 103 103 - ```hcl 104 104 - module "rg" { 105 105 - source = "./azure-resource-group" 106 106 - name = "my-resource-group" 107 107 - } 108 108 - ``` 109 109 - 110 110 - Ich hoffe, dieser Abschnitt hat Ihnen ein besseres grundlegendes Verständnis dafür gegeben, was Terraform ist und was Sie damit tun können. 111 111 - 112 112 - ## Die mühsame Aufgabe mit Terraform 113 113 - 114 114 - Sie haben vielleicht bemerkt, dass das Feld `source` eines Moduls eine erstaunliche Flexibilität für das gesamte Projekt schafft, da Sie Module überall definieren und überall im Projekt verwenden können. 115 115 - 116 116 - Dieses Feature hat jedoch einen großen Nachteil in Bezug auf die Wartbarkeit: Das Auflösen der tatsächlichen Werte hinter Variablen kann sehr mühsam sein. Während es in diesem einfachen Beispiel leicht zu verwalten scheint, desto größer das Projekt wird und je verschachtelter es ist, desto schwieriger und zeitaufwändiger wird das Verstehen und Anpassen von Terraform-Code. Deshalb habe ich eine Erweiterung erstellt. 117 117 - 118 118 - **Was sollte die Erweiterung tun?** Das Hauptziel der Erweiterung ist es, die tatsächlichen Werte der Variablen überall dort bereitzustellen, wo sie verwendet werden. Wenn ein Modul von mehreren Stellen oder einfach mehreren Malen aufgerufen wird, sollten die Informationen bereitstellen, welcher Anwendungsfall die Variable auf welchen Wert setzt. Wenn Module tief verschachtelt sind, sollten die Werte aufgelöst werden, bis wir die `.tfvars`-Dateien erreichen. Dies sind die Dateien, in denen Sie die fest kodierten Werte für Variablen definieren können. 119 119 - 120 120 - ## So starten Sie eine VS Code-Erweiterung 121 121 - 122 122 - Das Erstellen des grundlegenden Template-Projekts für eine VS Code-Erweiterung ist so einfach wie das Ausführen dieses Befehls, wenn Sie [Node](https://github.com/nodejs) installiert haben: 123 123 - 124 124 - ```bash 125 125 - npx --package yo --package generator-code -- yo code 126 126 - ``` 127 127 - 128 128 - Dieser Befehl installiert temporär Yeoman (eine Generator-Software) und öffnet einen interaktiven Modus, in dem einige Fragen beantwortet werden müssen, wie der Projektname, der Typ und die Beschreibung. Im folgenden Block sehen Sie alle Fragen und Standardantworten: 129 129 - 130 130 - ```bash 131 131 - # ? What type of extension do you want to create? New Extension (TypeScript) 132 132 - # ? What's the name of your extension? HelloWorld 133 133 - ### Press <Enter> to choose default for all options below ### 134 134 - 135 135 - # ? What's the identifier of your extension? helloworld 136 136 - # ? What's the description of your extension? LEAVE BLANK 137 137 - # ? Initialize a git repository? Y 138 138 - # ? Which bundler to use? unbundled 139 139 - # ? Which package manager to use? npm 140 140 - 141 141 - # ? Do you want to open the new folder with Visual Studio Code? Open with `code` 142 142 - ``` 143 143 - 144 144 - Weitere Informationen zu VS Code-Erweiterungen möchte ich im [offiziellen Dokumentation](https://code.visualstudio.com/api/get-started/your-first-extension) verlinken, da sie immer aktueller im Gegensatz zu meinen Erklärungen hier ist. 145 145 - 146 146 - ## 3… 2… 1… Vibe-Coding! 147 147 - 148 148 - Ich beginne gerne neue Projekte, indem ich [ChatGPT](https://github.com/openai) nach allgemeinen technischen Fragen frage wie: 149 149 - 150 150 - * Wie würden Sie vorschlagen, ein solches Projekt umzusetzen? 151 151 - * Wie lange schätzen Sie, dass es dauern wird? 152 152 - * Wie schwierig wird es sein? 153 153 - 154 154 - Das Brainstorming mit KI-Bots scheint ein sehr sinnvoller Weg zu sein, um sich einen besseren Überblick über neue Projekte zu verschaffen, insbesondere wenn man in völlig neue Gewässer eintaucht. Eine VS Code-Erweiterung zu erstellen, war genau ein solcher Anwendungsfall, da ich noch nie zuvor etwas für VS Code oder eine andere IDE erstellt hatte. Nach dieser anfänglichen Brainstorming-Phase bevorzuge ich [Claude](https://github.com/anthropics), um alle notwendigen Dateien für eine solche Erweiterung zu programmieren, da dieser KI-Bot meiner Erfahrung nach in der Lage ist, Code wirklich präzise umzusetzen. Ich habe kaum Fehler oder Laufzeitprobleme mit Claude-Code erlebt, sodass ich ihn genau für solche Anwendungsfälle nutze – Initialstarter. Der Nachteil von Claude ist sein sehr begrenztes kostenloses Testangebot, weshalb ich beim Formulieren meiner Worte immer vorsichtig bin und versuche, im Voraus an so viele mögliche Fehler der KI zu denken wie möglich. So begann es also: Ich nahm mir etwas Zeit, um mein genaues Szenario und meinen Wunsch in die begrenzten Kontextfenster einer zufälligen Wortmaschine namens Claude zu formulieren und erhielt sofort eine riesige `extension.ts`-Implementierung. Natürlich gab es offensichtliche Unterschiede zwischen meiner Vision und der Kommunikation mit diesem LLM, weshalb ich ihm ein weiteres Mal erklären musste, was die wichtigen Überlegungen sind, und um weiteren Code zu erhalten, nutzte ich auch meinen magischen Trick: "Wenn das zu groß für eine Datei ist, geben Sie mir einfach die gesamte `extension.ts` in mehreren Dateien, die natürlich funktionieren sollte." 155 155 - 156 156 - Claude begab sich dann auf eine lange Reise. 157 157 - 158 158 - Nach einigen Kämpfen, es weiter am Laufen zu halten, waren meine Tokens aufgebraucht und ich musste den verbleibenden Code selbst herausfinden. Dennoch gelang es mir, eine laufende Version zu erstellen, da nicht viel fehlte, und bemerkte sofort einige Verbesserungen, die bislang unbemerkt geblieben waren. Da ich auf die Wiederauffüllung meiner Tokens warten musste, tat ich genau das. 159 159 - 160 160 - Am nächsten Morgen begann die Verbesserungssitzung, und nach zwei langen Gesprächen war das Kontextfenster komplett gefüllt, und ich konnte keine Nachrichten mehr im selben Chat senden, obwohl meine Tokens noch nicht abgelaufen waren. Doch alles, was ich von Claude erreichen und erhalten wollte, war nun verfügbar, und ich konnte einige Tests in einem meiner größeren Projekte durchführen. Nachdem ich den Code manuell bestätigt und angepasst hatte, war ich zunächst zufrieden und entschied, dass die erste öffentliche Version fertig war. 161 161 - 162 162 - Nach einigem Ausprobieren mit [GitHub Actions](https://github.com/github) gelang es mir, den [Publisher für eine VS Code-Erweiterung einzurichten](https://code.visualstudio.com/api/working-with-extensions/publishing-extension#create-a-publisher). Und zwei Patch-Versionen später war ich ziemlich zufrieden mit den Ergebnissen. 163 163 - 164 164 - ## Das Endergebnis 165 165 - 166 166 - Probieren Sie die Erweiterung selbst aus, indem Sie auf den unten stehenden Button klicken. Es gibt noch viele Verbesserungsmöglichkeiten, also zögern Sie nicht, mitzuhelfen, wenn Sie interessiert sind. Sie können dies gerne auf [GitHub](https://github.com/trueberryless/terraform-variables-resolution) tun. 167 167 - 168 168 - <LinkButton href="vscode:extension/trueberryless.terraform-variables-resolution">Terraform Variables Resolution installieren</LinkButton> 169 169 - 170 170 - Hier sehen Sie das Beispiel aus [der Terraform-Erklärung](#what-is-terraform), das zeigt, wie diese Erweiterung die Werte der Variablen visuell in VS Code hinzufügt: 171 171 - 172 172 - 

-35

src/content/docs/de/blog/true-tracker.mdx

reviewed

··· 1 1 - --- 2 2 - title: Entwerfen eines Ansatzes für Zeiterfassung ohne Konto und ohne Datenbank 3 3 - date: 2024-07-06 4 4 - description: Eine private Zeiterfassungs-App, die alle Daten in deinem Browser 5 5 - speichert — keine Konten, keine Datenbank, nur einfache Erfassung. 6 6 - excerpt: True Tracker ist eine minimalistische Zeiterfassungs-App, die mit 7 7 - Next.js entwickelt wurde und alle Daten in deinem Browser speichert — keine 8 8 - Konten, keine Datenbank, einfach nur vollständige Privatsphäre und 9 9 - Einfachheit. 10 10 - tags: 11 11 - - Tool 12 12 - authors: 13 13 - - trueberryless 14 14 - cover: 15 15 - alt: A beautiful cover image with the text "True Tracker" 16 16 - image: ../../../../../public/blog/true-tracker.jpg 17 17 - featured: true 18 18 - 19 19 - --- 20 20 - 21 21 - Der Sommer 2024 markierte den Beginn eines aufregenden neuen Kapitels für mich als Entwickler. Bis zu diesem Zeitpunkt hatte ich hauptsächlich mit Angular gearbeitet, einem Framework, das ich für seinen strukturierten und meinungsstarken Ansatz schätzte. Aber ich war immer neugierig auf React gewesen – es fühlte sich leichter, flexibler und einfach… anders an. Als ich auf Next.js stieß, ein Framework von [Vercel](https://github.com/vercel), das auf React aufbaut und Funktionen wie serverseitiges Rendering und einen Fokus auf Performance bietet, wusste ich, dass es an der Zeit war, etwas Neues auszuprobieren. 22 22 - 23 23 - Zur gleichen Zeit war ich seit Langem über Tools zur Sitzungsverfolgung wie Toggl frustriert. Theoretisch sind sie großartig, aber ihre besten Funktionen schienen immer hinter teuren Bezahlwänden versteckt zu sein. Wie jeder Entwickler irgendwann dachte ich: *„Warum baue ich mir nicht einfach mein eigenes?“* Es ist praktisch ein Übergangsritus – jeder Programmierer muss mindestens einmal eine To-Do-App oder einen Tracker in seiner Karriere erstellen. Und so wurde True Tracker geboren. 24 24 - 25 25 - True Tracker sollte jedoch kein gewöhnlicher Tracker sein. Ich wollte etwas anderes machen. Zunächst wollte ich es einfach halten: Benutzer konnten Projekte hinzufügen, sie in Aufgaben unterteilen und ihre Zeit in Sitzungen erfassen. Kein Schnickschnack, keine unnötigen Funktionen. Doch hier kommt der Clou — True Tracker würde alles im lokalen Speicher speichern. Keine Konten, keine Cloud-Synchronisierung, und vor allem, niemand (nicht einmal ich) hätte Zugriff auf deine Daten. Es ist dein Tracker, und deine Daten bleiben deine. 26 26 - 27 27 - Natürlich war der Übergang von Angular zu Next.js nicht ohne Herausforderungen. Wenn ich jemandem, der ein neues Framework lernt, einen Rat geben könnte, dann wäre es dieser: *Lies die Dokumentation.* Ernsthaft, überspring sie nicht. Ich tat es nicht, und das führte zu Chaos. Next.js war kürzlich auf den App-Router umgestiegen, aber ich begann stur, mit dem Page-Router zu bauen. Das führte zu einem Berg von Problemen, als die App nicht richtig gebaut werden konnte, weil kein `app`-Verzeichnis vorhanden war. Ich musste eine leere `.gitkeep`-Datei im Ordner belassen, nur damit Git sie nicht löscht und alles erneut kaputt macht. Nicht mein stolzester Moment. 28 28 - 29 29 - Nach zwei Wochen ununterbrochenem Codieren, Debuggen und dem Gefühl, auf jeden erdenklichen Fehler zu stoßen, funktionierte True Tracker endlich. Ich erinnere mich an diesen ersten erfolgreichen Lauf – es fühlte sich an wie ein innerlicher Schrei *„Es lebt!“*. 30 30 - 31 31 - Das Projekt war auch nicht ohne seine Witze. Ein Freund meinte nach einem Blick auf das Branding der App: „Also … das ‚true‘ in True Tracker? Das ist ein bisschen zu viel, selbst für das Bild. Es ist *zu viel Wahrheit!*“ Sie hatten nicht unrecht, aber ich nahm es an. Schließlich, wenn man etwas brandet, sollte man es auch durchziehen. 32 32 - 33 33 - True Tracker wurde mein allererstes Next.js-Projekt – eine einfache, aber einzigartige App zur Zeiterfassung ohne Bedingungen. Sie ist jetzt live unter [https://true-tracker.trueberryless.org](https://true-tracker.trueberryless.org/). 34 34 - 35 35 - Die Reise lehrte mich mehr, als nur wie man Next.js verwendet. Sie lehrte mich, Herausforderungen zu überwinden, zwischen Frameworks zu wechseln und die Eigenheiten zu schätzen, die jedes Projekt einzigartig machen. True Tracker ist nicht nur eine App; es ist ein Meilenstein – ein kleiner Beweis dafür, dass auch kleine Ideen eine große Wirkung haben können.

-82

src/content/docs/de/blog/writing-blogs-is-hard-and-easy.mdx

reviewed

··· 1 1 - --- 2 2 - title: Einige Aspekte der Erstellung eines Blogs sind wirklich einfach, und 3 3 - einige sind extrem schwierig! 4 4 - description: Eine einsteigerfreundliche Einführung mit einigen Schimpfwörtern 5 5 - darüber, wie man anfängt, seinen eigenen Blogbeitrag zu schreiben. 6 6 - date: 2025-07-08 7 7 - tags: 8 8 - - Mindspace 9 9 - - Education 10 10 - authors: 11 11 - - trueberryless 12 12 - excerpt: <p>Ein wenig darüber sprechen, wie man besser (bei weitem kein Meister, 13 13 - niemand ist perfekt) im Schreiben von Blogposts sein kann. Dies sind nur meine 14 14 - Gedanken, nachdem zwei großartige Leute aus der <a 15 15 - href="https://astro.build/chat">Astro Community</a> (<a class="gh-badge" 16 16 - href="https://github.com/jdtjenkins"><img 17 17 - src="https://github.com/jdtjenkins.png" alt="jdtjenkins" />Jacob</a> und <a 18 18 - class="gh-badge" href="https://github.com/louisescher"><img 19 19 - src="https://github.com/louisescher.png" alt="louisescher" />Lou</a>) 20 20 - beschlossen haben, Blogs darüber zu schreiben, wie schwer und einfach es ist, 21 21 - Blogposts zu schreiben.</p><p>Bitte lesen Sie zuerst ihre Beiträge, da dies 22 22 - die Folge von beiden ist:</p><ol><li><a 23 23 - href="https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/">"Warum 24 24 - ist Blogschreiben so schwer?" - Jacob Jenkins</a></li><li><a 25 25 - href="https://lou.gg/blog/why-writing-blogs-isnt-hard">"Warum Blogschreiben 26 26 - nicht schwer ist" - Louis Escher</a></li><li><a 27 27 - href="/blog/writing-blogs-is-hard-and-easy/">"Einige Aspekte der Erstellung 28 28 - eines Blogs sind wirklich einfach, und einige sind extrem schwierig!" - Felix 29 29 - Schneider</a></li></ol><p>Nachdem Sie das gelesen haben, haben Sie erfolgreich 30 30 - diese großartige Trilogie von Blogposts über Blogposts abgeschlossen.</p> 31 31 - cover: 32 32 - alt: A beautiful cover image with the text "Writing Skill" 33 33 - image: ../../../../../public/blog/writing-blogs-is-hard-and-easy.jpg 34 34 - tableOfContents: false 35 35 - 36 36 - --- 37 37 - 38 38 - Nach einer sehr interessanten Diskussion im [Astro](https://github.com/withastro) [Discord](https://astro.build/chat) - gestartet von niemand geringerem als Kernentwickler [Alex](https://github.com/alexanderniebuhr) selbst (übrigens Glückwunsch zu diesem kürzlichen Erfolg 🎉) -, habe ich scherzhaft gesagt, dass jemand einen Blog darüber schreiben könnte, warum es für viele Menschen so schwierig ist, nicht nur zu schreiben, sondern auch einen Blog insgesamt zu pflegen. 39 39 - 40 40 - Der Mann, der mich als Mitglied des Astro Support Teams vorgeschlagen hat - [Jacob](https://github.com/jdtjenkins) (übrigens vielen Dank, dass du mich in dieser großartigen Community bemerkt hast 😍) - nahm das ziemlich wörtlich und schrieb einen Blog darüber. Kein Scherz. Sehen Sie selbst: [https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/](https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/) Dies ist übrigens sein allererster Blog (und hoffentlich nicht sein letzter, da ich seinen Stil wirklich genossen habe). 41 41 - 42 42 - Unser geliebter Allround-Helfer, Blogger, Designer und StudioCMS-Experte - [Lou](https://github.com/louisescher/) (übrigens danke, dass du mir im Voraus ein paar Tipps zum Blogschreiben gegeben hast, damit ich das hier selbstbewusster schreiben konnte 🤩) - sprang sofort auf diesen großartigen Hype-Zug (wie Twitch-Nutzer es nennen könnten) und veröffentlichte [seinen Anschlussartikel](https://lou.gg/blog/why-writing-blogs-isnt-hard) innerhalb von verdammten 12 Stunden!!! Glauben Sie mir, ich habe die Commits überprüft, Lou hat buchstäblich innerhalb von 4 Minuten nach Ablauf der 12 Stunden-Marke veröffentlicht. 43 43 - 44 44 - Da ich viele Verweise auf beide ihrer Blogs einfügen werde, ist es am besten, wenn Sie zuerst ihre lesen. Und dann meinen. Oder vielleicht ist es besser, wenn Sie nur ihre lesen, ich bin mir noch nicht sicher, wie sich meiner entwickeln wird. 45 45 - 46 46 - Aber was ich sagen ~~kann~~ schreiben kann, ist, dass meiner sich vollständig auf die Schreibfähigkeiten konzentrieren wird. 47 47 - 48 48 - ## Wie man einen Blog einrichtet (technische Herausforderungen) 49 49 - 50 50 - Auch wenn dieser Blog sich nicht darauf konzentriert, wie man einen Blog erstellt, bereitstellt und all diesen technischen Kram macht, möchte ich erwähnen, dass es jeder schaffen kann. Wie Lou erwähnte, können Sie als Nicht-Techniker immer einfach ein Konto auf [Medium](https://medium.com/) oder ähnlichen Alternativen erstellen. Wenn Sie sich ein wenig mit Programmierung auskennen, können Sie Ihrer Kreativität ein wenig mehr Raum geben. Dank des großartigen [Starlight Blog](https://starlight-blog-docs.vercel.app/) Projekts von [HiDeoo](https://github.com/HiDeoo) benötigen Sie nicht viel Wissen, um Ihre eigene Website bereitzustellen. Heutzutage, wo es auch PaaS (Platform as a Service)-Anbieter wie [Netlify](https://www.netlify.com/) gibt, die den Umgang zu einer Click-Ops Erfahrung machen, gibt es keine Ausrede mehr, warum technische Schwierigkeiten Sie daran hindern sollten, Ihren Blog zu veröffentlichen. 51 51 - 52 52 - ## Okay, Spaß beiseite, jetzt: Schreibfähigkeiten 53 53 - 54 54 - Aber dieser Blog sollte sich hauptsächlich auf die "Schreibfähigkeiten" konzentrieren, wie ich sagte, also machen wir dort weiter. Da ich selbst anfangs Schwierigkeiten hatte, Blogs zu schreiben, kann ich Jacob absolut zustimmen, dass der Einstieg schwierig ist. Es ist nicht wie das Durchlesen des [Astro "Getting started" Leitfadens](https://docs.astro.build/en/install-and-setup/), bei dem Sie nur den Anweisungen folgen müssen und dann auf Discord fragen, was ein `InvalidContentEntryDataError` bedeutet _{bitte verwenden Sie den `#support`-Thread, wenn Sie das tun 🫶} ([Falls Sie sich immer noch wundern](https://docs.astro.build/en/reference/errors/invalid-content-entry-data-error/)). 55 55 - 56 56 - Auf der anderen Seite erscheint das Ziel so nah und machbar. Schreiben Sie einfach ein paar Worte. Was ist so schwer daran, diese verdammten Worte zu schreiben? Ehrlich gesagt weiß ich es selbst nicht. Warum fragen Sie mich? Das Einzige, was mir geholfen hat, aus der Spirale „Du-willst-schreiben-aber-jedes-Mal-wenn-du-den-blinkenden-Cursor-ansiehst-wird-dein-Hirn-leer“ (machen wir das zum Hashtag der Woche) herauszukommen, war Lous Tipp, am Anfang nicht so viel von sich selbst zu verlangen. Warum möchten Sie mit einem perfekten Blog beginnen? Nur wegen Ihres Rufs? Damit die Leute nichts Falsches von Ihnen denken? Enttäuscht sind? Ehrlich gesagt: Das ist Schwachsinn! Nicht nur, weil Ihr erster Blog sehr wahrscheinlich von niemandem gelesen wird (mit Ausnahme von Jacobs außergewöhnlichem Blog), sondern auch, weil Sie es sich nur schwerer machen. Meine persönliche mentale Grenze war, dass ich dachte, ich müsse mindestens 500 Wörter schreiben, um anzufangen. Aber wer sagt das? Um ehrlich zu sein, wenn ich jetzt zurückblicke, denke ich manchmal: „Mensch, es wäre so einzigartig und cool gewesen, wenn mein erster Blog wie ein normaler Tweet gewesen wäre“, oder noch extremer: Ein. Wort. Niemand wird Sie davon abhalten, diesen Blog zu veröffentlichen: 57 57 - 58 58 - > Hallo 👋 59 59 - 60 60 - (Entschuldigung, falls ich jetzt Ihre großartige Idee genommen habe,\ 61 61 - und Ihren gesamten Blogbeitrag hier eingefügt habe\ 62 62 - \- wow cool, das reimt sich.) 63 63 - 64 64 - Sehen Sie? Ich kann tun, was ich will, sogar ein verdammter Poet sein (typisches deutsches Verhalten), und niemand wird mich verurteilen. Okay, vielleicht wird jemand diesen Blog hassen, weil er „Zeitverschwendung sei, kein Sinn in all diesen nutzlosen Inhalten“, aber wen interessiert’s, ***w e n***? Es ist *Ihr* Blog, <span id="comment-reference" class="fragment-highlight">niemand fragt nach deren Meinungen (es sei denn, Sie haben einen Kommentarbereich unter Ihrem Blog 🙄 *hust* [Lou](https://lou.gg/blog/why-writing-blogs-isnt-hard#chapter-five-its-the-8th-of-july)</span>). Also denken Sie nicht darüber nach, was andere über Ihren Schreibstil, Inhalt, Sprachgebrauch oder sogar Ihre Grammatikfehler denken könnten. All dies macht Sie menschlich, und alles perfekt hinzubekommen, ist nicht nur völlig unnötig, sondern auch [hrad](https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/#chapter-1---i-want-it-now). 65 65 - 66 66 - Ein weiterer Bestandteil des Blogschreibens ist nicht nur der Einstieg, sondern auch die Schwierigkeit, einen Fluss, einen Gedanken, wenn Sie so wollen, aufrechtzuerhalten. Als Zuhörer gut geschriebener Reden bemerken Sie unterbewusst, dass sie gut waren, erfüllend, erhaben. Und das liebe ich an solchen Blogs oder Reden. Sie fühlen sich einfach irgendwie richtig an. Aber ich selbst habe akzeptiert, dass ich solche Errungenschaften in meiner eigenen kreativen Arbeit nicht erreichen kann. Und mit dieser Akzeptanz komme ich viel besser zurecht. Denn der Vorteil, Unvollkommenheit zu akzeptieren, besteht darin, Dinge fertig zu bekommen. Nicht nur zu 50 %, nicht nur zu 90 %. Fertig. Abgeschlossen, 100 %. Und das ist etwas, womit viele Menschen kämpfen, mich eingeschlossen - tatsächlich nur mich. 67 67 - 68 68 - Aber wie Lou erwähnt, gibt es andere einfache Methoden, um einen roten Faden im gesamten Beitrag beizubehalten, der Geschichte treu zu bleiben, während Gedanken in Ihrem eigenen Kopf herumschweifen könnten. All diese Gedanken zu Papier zu bringen oder in diesem Fall auf die Tastatur, kann eine Herausforderung sein, besonders wenn Sie gerade erst mit dem Schreiben anfangen. Aber es gibt einen Grund, warum wir solche Fähigkeiten in der Schule lernen. Sie verbessern unsere kognitive Gesundheit und Entwicklung erheblich. Deshalb stimme ich Lou auch zu, wenn er sagt, dass KI im Schreibprozess niemals verwendet werden sollte. Es bringt weder für den Leser noch für Sie selbst irgendwelche Vorteile mit sich. 69 69 - 70 70 - Ich möchte nicht wiederholen, was Lou sagt, aber Aufzählungspunkte haben mir in der Vergangenheit sehr geholfen. Sie geben mir das Gefühl von konstanter Struktur, während mein Geist mit verschiedenen Gedanken und Theorien spielen kann. So stelle ich sicher, dass ich immer wieder zu dem zurückkomme, was ich ursprünglich in meinen Beitrag aufnehmen wollte. „Und wenn Ihnen keine Aufzählungspunkte einfallen?“, könnten Sie fragen. Dann brauchen Sie möglicherweise noch mehr Brainstormings oder einfach Duschen. 71 71 - 72 72 - Am Ende sind hier einige Tipps, die ich Ihnen mit auf den Weg geben kann: 73 73 - 74 74 - * Entwickle deinen eigenen Schreibstil, nicht durch Training, sondern durch Schreiben. Früher oder später wirst du bemerken, welche Arten dir gefallen könnten, einige Dinge, die du von anderen Bloggern übernehmen möchtest, aber summa summarum wird das, was du schreibst, immer deins sein. Du teilst es einfach mit der Welt. Es liegt an dir, ob du hier und da einen Doppelpunkt oder Bindestrich verwenden möchtest, mehr Punkte, die Vergangenheitsform, den Imperativ, Schimpfwörter oder den formelleren Stil. All diese Dinge fügen sich automatisch zusammen und definieren dich als einzigartigen Blogger. Und deine Leser werden diese Individualität mehr schätzen, als du denkst. 75 75 - 76 76 - * Nimm dir nicht zu viel vor. Das klingt vielleicht einfach, aber jeder tappt regelmäßig in diese Falle. Oder vielleicht nur Leute wie ich, die eine Mischung aus Autismus und Perfektionismus haben – keine Ahnung. 77 77 - 78 78 - * Auch wenn es immer dumm klingt: Fang an zu schreiben. Und wenn es nicht funktioniert, fang mit dem Mittelteil an. Denn ich weiß, Anfang und Ende sind immer schwierig, aber meiner Meinung nach flutscht der Mittelteil wie Butter. 79 79 - 80 80 - * Blogs haben einfache und schwierige Seiten: Das ist, was der Titel sagt, aber wusstest du, dass ich beim Schreiben all dessen gemerkt habe, dass ich diese Frage überhaupt nicht beantwortet habe... Gott sei Dank hat Jacob am Ende dieses Vorschlags kein Fragezeichen gesetzt. 🙏 81 81 - 82 82 - Ja, ich denke, das war's. Wenn du deine Gedanken teilen möchtest, hinterlasse sie in [Lous Kommentaren](https://lou.gg/blog/why-writing-blogs-isnt-hard), weil ich keine habe.

-17

src/content/docs/de/index.mdx

reviewed

··· 1 1 - --- 2 2 - title: Tiefgründige Gedanken - Überblick 3 3 - description: Willkommen in meinem Blog. Werfen Sie einen Blick auf diesen 4 4 - minimalistisch gestalteten Überblick über alle meine Blogbeiträge. 5 5 - template: splash 6 6 - lastUpdated: false 7 7 - editUrl: false 8 8 - pagefind: false 9 9 - next: 10 10 - label: Detailed view 11 11 - link: /blog 12 12 - 13 13 - --- 14 14 - 15 15 - import IndexPostList from "../../../components/IndexPostList.astro"; 16 16 - 17 17 - <IndexPostList />

-46

src/content/docs/fr/blog/accelerating-translations-with-continuous-integration.mdx

reviewed

··· 1 1 - --- 2 2 - title: Accélérer les traductions avec l'intégration continue 3 3 - description: L'histoire de la façon dont mon parcours de contributions à 4 4 - action-continuous-translation a commencé. 5 5 - date: 2025-07-09 6 6 - tags: 7 7 - - Automation 8 8 - - GitHub 9 9 - - Plugins 10 10 - - Markdown 11 11 - - Tool 12 12 - authors: 13 13 - - trueberryless 14 14 - excerpt: <p>Je travaille dans les communautés de logiciels libres (<span 15 15 - lang="en">OSS</span>) sur <a class="gh-badge" 16 16 - href="https://github.com/github"><img src="https://github.com/github.png" 17 17 - alt="github" />GitHub</a> depuis plus d'un an maintenant et, bien que je 18 18 - pensais avoir trouvé tout ce à quoi je voulais contribuer, j'ai récemment 19 19 - découvert le projet personnel de <a class="gh-badge" 20 20 - href="https://github.com/pelikhan"><img src="https://github.com/pelikhan.png" 21 21 - alt="pelikhan" />Peli</a>, <a 22 22 - href="https://github.com/pelikhan/action-continuous-translation">action-continuous-translation</a>. 23 23 - Je suis très heureux d'avoir commencé à y apporter des contributions 24 24 - régulières et de faire désormais partie de cette petite communauté.</p> 25 25 - cover: 26 26 - alt: A beautiful cover image with the text "AI Translations" 27 27 - image: ../../../../../public/blog/accelerating-translations-with-continuous-integration.jpg 28 28 - tableOfContents: false 29 29 - 30 30 - --- 31 31 - 32 32 - Au cours de l'année passée, j'ai beaucoup travaillé dans diverses communautés de logiciels libres sur GitHub pendant mon temps libre et j'ai apprécié ces contributions, qui sont en quelque sorte relaxantes, car elles me permettent d'acquérir de nouvelles connaissances quotidiennement. 33 33 - 34 34 - Après un certain temps de contribution, j'ai également appris à quel point les communautés derrière ces projets sont bienveillantes et accueillantes. Ces personnes ont toutes une chose en commun avec vous : elles veulent créer de grandes choses pendant leurs loisirs. Surtout, la communauté [Astro](https://github.com/withastro) est celle dans laquelle j'ai pris le plus de plaisir à être, car elle est à la fois la plus gratifiante et la plus conviviale. Toutes les communautés n'arrivent pas à atteindre un tel statut parmi les projets OSS. 35 35 - 36 36 - Récemment, j'ai découvert un autre projet en évolution fondé par [pelikhan](https://github.com/pelikhan), qui vise à traduire automatiquement toute votre documentation, vos blogs ou vos sites marchands chaque fois qu'un changement survient grâce à l'aide de l'IA. Bien qu'un peu sceptique au début, la lecture approfondie du README.md de ce projet m'a captivé. 37 37 - 38 38 - L'approche consistant à guider strictement l'IA pour ne traduire que de petits morceaux - principalement des phrases ou des paragraphes avec des instructions perfectionnistes - m'a fait penser que cela pourrait vraiment fonctionner. J'ai donc essayé cela sur mon propre projet, mon blog. Et à ma grande surprise, ces traductions étaient bien meilleures que ce que j'avais imaginé. Bien sûr, on remarque que cela a été traduit par l'IA - le travail fait main ne sera, espérons-le, jamais entièrement remplacé - mais si vous mentionnez honnêtement que vous utilisez l'IA dans une note en marge, cela rend le contenu bien plus accessible aux gens que l'absence de traduction. 39 39 - 40 40 - J'ai donc examiné de plus près le code réel du projet. Après avoir remarqué quelques petites incohérences, des espaces pour des améliorations, et des fonctionnalités manquantes mais très intéressantes ici et là, j'ai commencé à y contribuer également. Après tout, avec un an de contributions dans de plus grands projets, les \<span lang="en">PRs\</span> n'étaient pas une nouveauté pour moi. 41 41 - 42 42 - Il faut savoir que c'était un vendredi soir - presque nuit dans mon fuseau horaire - et que [Peli](https://github.com/pelikhan) était également en ligne, enchaînant les commits sur le projet. J'ai rapidement remarqué qu'à l'inverse des autres projets auxquels je participe, Peli ne perdait pas de temps à fusionner les <span lang="en">PRs</span>. Ce fut très gratifiant ce soir-là car je n'ai cessé de contribuer jusqu'à une heure du matin, Peli fusionnant plus vite que je ne pouvais améliorer les fonctionnalités, les documents et les corrections. Un autre aspect qui a été génial est que, puisque c'était un jeune projet, Peli n'a pas hésité à simplement fusionner, tester localement, puis pousser de petites corrections que j'avais manquées. 43 43 - 44 44 - Trois jours plus tard, me voici maintenant contributeur officiel du projet, le rendant chaque jour meilleur, principalement en me concentrant sur la documentation et le support pour mon projet de cœur : Starlight - comme vous l'avez peut-être déjà deviné à partir de [mes blogs](../../../../../blog/tags/starlight/). 45 45 - 46 46 - Peli et moi organisons nos sessions de productivité virtuelles entre 16 h et 20 h UTC, avec des extensions pendant les week-ends. Donc, si vous souhaitez nous rejoindre en tant que pionnier du projet ou si cela a suscité votre intérêt pour l'utiliser, n'hésitez pas à le consulter sur [GitHub](https://github.com/github) : [https://github.com/pelikhan/action-continuous-translation](https://github.com/pelikhan/action-continuous-translation)

-111

src/content/docs/fr/blog/cognitive-erosion.mdx

reviewed

··· 1 1 - --- 2 2 - title: Arrêtez d'externaliser votre âme à l'IA 3 3 - description: Réflexions sur la surutilisation de l'IA, ses effets négatifs 4 4 - cognitifs et sociaux, et un modèle proposé pour utiliser l'IA sans éroder la 5 5 - créativité et la communication humaines. 6 6 - date: 2025-08-10 7 7 - tags: 8 8 - - Mindspace 9 9 - authors: 10 10 - - trueberryless 11 11 - cover: 12 12 - alt: A beautiful cover image with the text "Cognitive Erosion" 13 13 - image: ../../../../../public/blog/cognitive-erosion.jpg 14 14 - giscus: true 15 15 - featured: true 16 16 - 17 17 - --- 18 18 - 19 19 - Cela fait plus de deux ans et demi depuis la sortie de ChatGPT. Le 30^ème novembre 2022 a marqué le début d'une nouvelle ère. Le début de l'IA. De nos jours, de nombreuses professions et personnes dans leur vie privée, en particulier dans le secteur des technologies de l'information, l'utilisent quotidiennement. Et nous ne savons même pas où nous en sommes sur le cycle des attentes de Gartner ou si l'IA s'améliorera en suivant la "Loi des rendements accélérés" de Kurzweil. 20 20 - 21 21 - La tendance est toujours en hausse, mais en même temps, j'ai remarqué une légère mais constante dégradation des connaissances humaines, car les gens délèguent de plus en plus le travail créatif à l'IA. Par conséquent, j'ai décidé d'écrire un petit article de blog pour partager mes réflexions, en essayant de décourager la surutilisation de l'intelligence artificielle qui pourrait ruiner nos capacités cognitives. Et bien que je sache que très peu de personnes liront ceci, cela ne m'empêche pas d'essayer. Sinon, j'aurais peut-être raté mon occasion d'aider l'avenir de l'humanité. 22 22 - 23 23 - {/* excerpt */} 24 24 - 25 25 - > **Avertissement** : Ce billet de blog est entièrement basé sur mes observations concernant les évolutions des changements sociaux, avec une attention particulière aux façons d'utiliser l'intelligence artificielle selon mon interprétation, et est donc très subjectif. Je n'ai pas consulté d'études qui pourraient soutenir ou contredire mon opinion. 26 26 - 27 27 - ## Comment les gens ont tendance à utiliser l'IA 28 28 - 29 29 - L'IA est incroyable. Je ne veux pas remettre en question cette affirmation. Elle m'a aidé et m'aide encore à améliorer mon flux de travail, à acquérir de nouvelles connaissances, à explorer de nouveaux horizons et à découvrir de nouvelles technologies. Pour les personnes qui ne s'intéressent pas au fonctionnement de l'IA, de tels outils intelligents ressemblent à de la magie. En conséquence, j'aime voir leurs yeux briller et leurs bouches s'ouvrir lorsque je leur explique que tout ce sur quoi l'IA est basée, c'est la probabilité. Quel mot est le plus susceptible d'être le suivant, en fonction des propriétés et des émotions dans un espace virtuel hautement dimensionnel. [Mais c'est un autre sujet.](https://www.youtube.com/watch?v=LPZh9BOjkQs) 30 30 - 31 31 - Ce sur quoi je souhaite me concentrer, c'est sur la façon dont les gens ont fini par utiliser l'IA, en particulier au cours des derniers mois - voire des dernières années. Comme notre cerveau est paresseux par défaut, nous avons tendance à externaliser davantage de travail à l'IA au fur et à mesure que nous nous concentrons moins sur une tâche spécifique. En d'autres termes, si vous ne mettez pas la plupart de votre engagement dans votre projet actuel, vous êtes probablement sur le point de simplement le transmettre à une IA. Une autre raison potentielle de sous-traiter le travail au monde de l'IA est l'ignorance des technologies sous-jacentes, ce qui rend difficile pour vous de trouver vos propres solutions. 32 32 - 33 33 - Je ne suis en aucun cas un scientifique, mais je pense que regarder une IA faire votre travail - parce que, en raison de votre incompétence, le résultat que vous produisez ne correspond pas à votre vision - vous donne tellement de dopamine que votre cerveau veut le faire plus souvent. De plus, l'être humain, en tant que figure sociale, cherche toujours à être connecté à quelqu'un, et interagir avec l'IA satisfait ces besoins. Ce comportement est typique de notre cerveau et se produit également lorsque nous regardons les réseaux sociaux ou consommons du contenu explicite. Il est profondément enraciné dans notre cortex cérébral, et toute l'industrie du jeu et les secteurs du divertissement en profitent sans scrupules pour optimiser leurs gains. 34 34 - 35 35 - J'ai moi-même remarqué cette tendance, comme vous pouvez le voir clairement dans [certains de mes articles où j'ai avoué avoir utilisé l'IA](../../../../../blog/authors/artificial-intelligence/) pour m'aider à les écrire. Mais je pense que ce n'est pas une honte. Tout créateur de contenu qui utilise l'IA devrait expérimenter de première main les écueils de la création de contenu directement pour le spectateur ou le lecteur, afin de réaliser à quel point il sait peu sur le sujet par la suite. Cela lui permettra d'apprendre de son erreur et d'être conscient de la facilité avec laquelle la paresse peut vous entraîner dans un chemin si méprisable. Seuls les excellents parmi nous se sont toujours efforcés de créer du contenu fait main. 36 36 - 37 37 - ## Effets négatifs 38 38 - 39 39 - J'ai souligné les principaux inconvénients que j'ai observés dans une utilisation excessive de l'IA. Je vais maintenant vous donner deux raisons secondaires que j'ai remarquées chez moi, pour lesquelles vous ne devriez pas utiliser l'IA pour un travail expressif. 40 40 - 41 41 - ### Déclin de la communication 42 42 - 43 43 - En regardant une vidéo promotionnelle de "The Browser Company™" (voir le dernier lien dans la [section des ressources ci-dessous](#resources-with-better-evidence)), j'ai remarqué que les visions peuvent être très éloignées de nos jours. Je constate cette tendance non seulement dans le navigateur Dia, mais dans de nombreux aspects différents de la technologie et de nos vies. Un côté de la tendance veut intégrer l'IA partout où c'est possible, élargissant notre dépendance à celle-ci. Un exemple est l'utilisation de l'IA pour composer et écrire des messages à nos amis proches et collègues parce que cela nous rend plus efficaces. Je crois que cela nous rend juste stupides à long terme. 44 44 - 45 45 - Si les gens ne forment pas leur cerveau à trouver des mots pour communiquer, à construire des phrases utiles et un sens pouvant être compris par d'autres êtres humains, notre fondation même de l'interaction les uns avec les autres est brisée et nous reviendrions au niveau de *Homo habilis* - la dernière espèce qui, probablement, n'a pas utilisé un langage verbal pleinement développé. Voyez, j'ai utilisé l'IA pour m'aider à rechercher ce petit bout d'information, mais j'ai choisi mes mots consciemment pour m'exprimer. De cette façon, non seulement j'ai appris quelque chose de nouveau, mais je peux maintenant également m'en souvenir. Une capacité que vous n'aurez jamais en externalisant l'écriture à l'IA. 46 46 - 47 47 - ### Solitude 48 48 - 49 49 - Être seul sur un plan mental est, à mon avis, l'un des dangers modernes les plus sous-estimés de la société. Le côté ironique de cela, c'est que si tout le monde est seul, nous avons tous cela en commun, ce qui fait que nous ne sommes pas seuls avec la solitude de chacun. Mais mes pensées dérivent à nouveau vers d'autres océans. 50 50 - 51 51 - L'IA nous encourage fortement à être seuls. Elle ~~agit~~ a été intentionnellement entraînée à agir comme un parfait ami, collègue ou quel que soit le terme que vous voulez employer. Récemment, j'ai remarqué que les réponses de ChatGPT incluent explicitement mon nom, ce qui est très étrange à plusieurs niveaux si vous voulez mon avis. On pourrait dire qu'il s'agit d'un doxxing artificiel privé, ce qui, bien sûr, est un oxymore en soi, car le doxxing, par définition, est public. Néanmoins, plus vous utilisez l'IA, plus *souvent* vous voulez utiliser l'IA. En particulier après l'introduction des modes vocaux de l'IA, cette tendance a continué à augmenter comme si le lendemain n'existait pas. Félicitations, ClosedAI, vous venez de réinventer l'addiction. 52 52 - 53 53 - Dans les pires scénarios, cela peut amener les gens à craindre de parler avec d'autres personnes. À abandonner des amitiés. À se retirer de la société. De telles habitudes sont des problèmes graves et devraient être examinées par un médecin ou un psychologue. 54 54 - 55 55 - ## Proposition de modèle de couche d'utilisation de l'IA 56 56 - 57 57 - Proposer une solution globale pour tous face à un tel problème est impossible. Puisque chaque individu a ses propres expériences avec l'IA, ses propres pensées et sentiments, qu'il soit optimiste ou pessimiste, je ne peux pas parler pour tout le monde. En fait, je pense que je peux seulement parler pour moi-même, apprendre et partager mes propres façons de gérer et de limiter mon utilisation de l'IA, et espérer que ces expériences puissent également vous aider. 58 58 - 59 59 - Mes expériences idéales avec l'IA - le juste milieu optimal entre la surutilisation de l'IA accompagnée de l'érosion cognitive et le fait de laisser la mode passer à côté de vous sans en tirer aucun avantage - consistent à utiliser l'IA [si et seulement si](https://en.wikipedia.org/wiki/If_and_only_if) vous, et seulement vous, en tirez des avantages. En d'autres termes, contrôlez votre utilisation et limitez-la de manière extrême, où seul vous-même devriez jamais entrer en contact avec le contenu produit par l'IA. Une telle limitation a de nombreuses conséquences, voici quelques exemples pour mieux illustrer et souligner ce que je veux dire : 60 60 - 61 61 - * Utilisez l'IA pour des sessions d'apprentissage personnelles : Si vous souhaitez initialement plonger dans un nouveau sujet complètement inconnu, l'IA peut vous donner des aperçus généraux et vous montrer des connexions avec d'autres parties du savoir et des usages dans le monde réel. Bien que cela ne signifie pas nécessairement que vous apprendrez plus vite ou plus efficacement, cela aide à faire le premier pas et à se lancer. 62 62 - * Utilisez l'IA pour des tâches stupides et répétitives et demandez de l'aide si vous êtes certain que le problème ou la tâche a déjà été résolu des milliers de fois par d'autres. Les modèles linguistiques actuels sont formés sur des données existantes, ce qui signifie qu'ils sont censés être performants pour résoudre des problèmes déjà résolus, non pas pour réinventer la roue, mais pour suggérer d'utiliser l'instrument rond existant. 63 63 - 64 64 - <br /> 65 65 - 66 66 - * N'utilisez pas l'IA pour vous exprimer auprès des autres. Réfléchissez à ce que vous voulez transmettre, aux connaissances que vous souhaitez partager et exprimez vos pensées avec vos propres mots. Cela vous aide énormément à renforcer vos idées, à mieux vous souvenir de ce que vous avez appris et à vous sentir beaucoup mieux. 67 67 - * N'utilisez pas l'IA pour générer des travaux complexes et créatifs. De nos jours, il existe des centaines - probablement des milliers - d'outils qui vous aident à créer de l'art, de la musique, du code, des designs, des plans, etc., grâce à l'IA ou entièrement avec elle. Bien que cela puisse donner l'impression que vous êtes plus productif, cela vous rend simplement plus ignorant à mesure que vous revenez souvent à ces méthodes, au lieu de faire ce que vous aimez par vous-même. Il est tout à fait acceptable de dire que des petites parties du travail peuvent être externalisées à l'IA, principalement des tâches répétitives qui prennent seulement plus de temps à faire manuellement. Les œuvres créatives et originales, cependant, devraient rester humaines et réalisées avec amour. Si vous n'aimez pas ce que vous faites du tout, cela peut être un signal qu'il serait peut-être temps d'arrêter entièrement cette activité. 68 68 - * Ne vous laissez pas séduire par tout le battage autour des outils d'IA. Des outils comme [Lovable](https://lovable.dev), [GitHub Copilot](https://github.com/features/copilot), [Cursor](https://cursor.com/en), [ChatGPT Voice](https://openai.com/index/chatgpt-can-now-see-hear-and-speak/) et le nouveau venu : [GPT-5](https://academy.openai.com/public/resources/intro-gpt-5), pour n'en citer que quelques-uns, ne cherchent pas vraiment à vous aider. Ils veulent soit vos données directement, soit contrôler votre flux de travail afin que vous ne puissiez plus y échapper une fois habitué à leur utilisation. Malheureusement, les gens s'habituent à l'IA de manière fascinante et rapide. 69 69 - 70 70 - En bref, ce que je veux dire, c'est que l'IA devrait être utilisée pour réfléchir et aider chaque individu à créer un produit final - à ne pas confondre avec l'IA créant le produit final -, mais pas pour communiquer avec d'autres personnes ni pour les résultats finaux eux-mêmes (par exemple, la création d'images, l'écriture de blogs, les publications sur les réseaux sociaux, la communication dans les chats, les discours de motivation, les essais, etc.). À mon avis, le cerveau humain ne peut évoluer et apprendre que par ses propres erreurs et expériences. Et vous ne pouvez jamais apprendre de vos erreurs lorsqu'elles ont en réalité été générées par l'IA. 71 71 - 72 72 - > L'IA a sa place dans l'idéation, mais le travail expressif devrait rester humain. 73 73 - 74 74 - ### Le Paradigme 75 75 - 76 76 - J'ai récemment découvert un modèle de conception de logiciels appelé "Onion Architecture" (architecture en couches). Pour faire simple, le principe clé de cette architecture est sa division en couches, où chaque couche n'est connectée qu'à ses deux voisines (les couches parentes et enfants, mais pas les sœurs). 77 77 - 78 78 - Pour transposer ce paradigme dans le contexte actuel, vous pouvez imaginer l'IA comme un outil mis à votre disposition, qui est déconnecté de toutes les autres parties en étant uniquement entouré par votre cerveau. Seul votre cerveau peut accéder, manipuler, créer et modifier les couches extérieures - dans cet exemple, écrire des blogs, créer du contenu, communiquer avec les gens via des chats ou des discours, ou vous exprimer avec de l'art ou des designs. 79 79 - 80 80 - Voici une image qui représente mon idée d'un usage limité mais idéal de l'IA : 81 81 - 82 82 -  83 83 - 84 84 - Si une approche architecturale comme celle-ci et le paradigme dans ce contexte sont optimaux ou juste subjectifs, cela peut être critiqué dans les commentaires ci-dessous. 85 85 - 86 86 - ## Conclusion 87 87 - 88 88 - Comme je l'ai dit au début, ce billet de blog est très subjectif et vise simplement à partager mon expérience avec tout le monde, afin que vous puissiez également apprendre de mes erreurs, optimiser votre propre utilisation de l'IA et mieux la contrôler. En fin de compte, vous pouvez faire ce que vous voulez, mais soyez conscient(e) de la dégradation de votre cerveau lorsque vous tombez dans le piège d'une surutilisation. 89 89 - 90 90 - Une chose à noter également : Il m'a fallu plusieurs mois pour écrire cet article, le peaufiner et parfois repartir de zéro. Aucun blog n'est parfait, comme vous l'avez sans doute remarqué avec celui-ci. Il y a probablement quelques erreurs grammaticales ici et là, des phrases qui, en réalité, ne font pas sens, mais cela fait partie de l'humanité. De plus, il y a très probablement beaucoup d'opinions fortes dans ce billet où vous seriez totalement contre et en désaccord complet avec moi (j'ai hâte de lire vos commentaires exprimant votre indignation), mais cela me rend unique. Mon cerveau, mes pensées, mon opinion. 91 91 - 92 92 - > "errare humanum est" 93 93 - 94 94 - ## Ressources avec de meilleures preuves 95 95 - 96 96 - Si vous êtes intéressé(e) par des articles basés sur des études ou approches plus scientifiques, n'hésitez pas à en lire quelques-uns ou tous. Ils ne sont pas classés dans un ordre particulier, alors commencez au milieu et progressez vers le haut ou vers le bas. 😊 97 97 - 98 98 - * [AI: Artificial Incompetence](https://lou.gg/blog/ai-artificial-incompetence) 99 99 - * [Les outils de codage IA rendent les développeurs plus lents même s'ils pensent être plus rapides, selon une étude](https://www.theregister.com/AMP/2025/07/11/ai_code_tools_slow_down/) 100 100 - * [Les entreprises qui ont essayé de faire des économies avec l'IA dépensent désormais une fortune pour réparer ses erreurs](https://futurism.com/companies-fixing-ai-replacement-mistakes) 101 101 - * [Linus Torvalds estime que l'IA est '90 % marketing et 10 % réalité'](https://www.tomshardware.com/tech-industry/artificial-intelligence/linus-torvalds-reckons-ai-is-90-percent-marketing-and-10-percent-reality) 102 102 - * [La situation des "petites amies IA" est TRISTE (YouTube.com)](https://www.youtube.com/watch?v=Ftt5KqJ5D0Q) 103 103 - * [L'IA va-t-elle vous rendre stupide ?](https://www.economist.com/science-and-technology/2025/07/16/will-ai-make-you-stupid) 104 104 - * [L'IA ne nous rend pas plus productifs. Elle nous rend cognitivement ruinés. (X.com)](https://x.com/itsalexvacca/status/1935343874421178762) 105 105 - * [Être accro à l'intelligence artificielle générative](https://www.forbes.com/sites/lanceeliot/2024/08/24/being-addicted-to-generative-ai/) 106 106 - * [Encore une autre étude montre que l'IA nous rend stupides](https://tech.co/news/another-study-ai-making-us-dumb) 107 107 - * [L'IA nous rend-elle plus intelligents, plus stupides... ou artificiellement plus intelligents ? (crise symbiotique IA)](https://cognitiontoday.com/is-ai-making-us-smarter-or-dumber-or-artificially-smarter/) 108 108 - * [Research: Gen AI Makes People More Productive—and Less Motivated](https://hbr.org/2025/05/research-gen-ai-makes-people-more-productive-and-less-motivated) 109 109 - * [Les moyens les plus puissants de "hacker" notre nouveau navigateur Dia (YouTube.com)](https://www.youtube.com/watch?v=JCZUIm4S9QQ) 110 110 - 111 111 - Bonne lecture !

-47

src/content/docs/fr/blog/diploma-thesis.mdx

reviewed

··· 1 1 - --- 2 2 - title: Conception d’un pipeline basé sur Kafka et d’un graphique interactif pour 3 3 - la détection des anomalies énergétiques 4 4 - date: 2024-05-13 5 5 - description: Une solution SOA avec Siemens AG pour analyser les anomalies du 6 6 - réseau électrique, comprenant un pipeline Kafka, PostgreSQL, une API GraphQL 7 7 - et un tableau de bord Angular pour la visualisation. 8 8 - excerpt: Dans le cadre de notre thèse avec Siemens AG, nous avons développé une 9 9 - solution orientée services pour détecter les anomalies du réseau électrique — 10 10 - comprenant un pipeline Kafka, PostgreSQL, une API GraphQL et un tableau de 11 11 - bord Angular avec des tableaux et un graphique interactif pour une 12 12 - visualisation en temps réel. 13 13 - tags: 14 14 - - Tool 15 15 - authors: 16 16 - - trueberryless 17 17 - cover: 18 18 - alt: A beautiful cover image with the text "Diploma Thesis" 19 19 - image: ../../../../../public/blog/diploma-thesis.jpg 20 20 - featured: true 21 21 - giscus: true 22 22 - 23 23 - --- 24 24 - 25 25 - Au cours de ma cinquième année à la HTL Krems (2023/24), chaque étudiant devait réaliser une thèse de diplôme — un projet d’envergure divisé en deux parties principales : théorique et pratique. Travaillant en binôme, nous devions produire un document théorique d’environ 100 pages dans lequel nous présentions, analysions et expliquions notre sujet choisi. 26 26 - 27 27 - La partie théorique était organisée en trois sections. La première consistait à recueillir et résumer les connaissances existantes issues de sources fiables comme des livres et des thèses précédentes. La deuxième se concentrait sur les idées et conclusions tirées de notre prototype — une solution logicielle que nous avons développée pour la partie pratique. Enfin, la troisième section combinait ces deux parties, offrant une comparaison critique et une réflexion sur ce que nous avions appris à travers l’ensemble du projet. 28 28 - 29 29 - L’aspect pratique exigeait de concevoir et de mettre en œuvre une solution, soit logicielle, soit matérielle, pour résoudre un problème réel. Mon coéquipier, Clemens Schlipfinger, et moi avons décidé de nous concentrer exclusivement sur le logiciel pour garantir la fiabilité. Le matériel peut introduire des problèmes imprévisibles, tandis que le logiciel — surtout lorsqu’il est déployé dans des conteneurs Docker robustes — offre un environnement cohérent qui fonctionne sans problème partout. 30 30 - 31 31 - Ce qui rendait notre projet particulièrement excitant, c’était notre partenariat avec Siemens AG, une entreprise multinationale renommée spécialisée dans l’énergie, l’automatisation et la digitalisation. Cette collaboration était rare parmi nos pairs et ajoutait une dimension professionnelle à notre travail. Siemens nous a confié la mission de développer une solution logicielle orientée services pour analyser les anomalies du réseau électrique européen. 32 32 - 33 33 - Le système que nous avons construit comprenait plusieurs composants, chacun conçu pour remplir une fonction spécifique. Au cœur du système se trouvait une application Kafka responsable de l’ingestion des données — des rapports d’anomalies du réseau électrique que nous appelions Findings. Ces rapports détaillaient les défaillances et irrégularités dans le réseau électrique complexe européen, composé de millions de composants interconnectés comme des transistors, des interrupteurs et des générateurs. Kafka transmettait les anomalies les plus récentes à une base de données PostgreSQL, qui était ensuite rendue accessible via une API GraphQL. Cette API offrait des fonctionnalités complètes comme la pagination, le filtrage et le requêtage pour assurer une intégration fluide avec notre frontend basé sur Angular. 34 34 - 35 35 - Le frontend a été conçu comme un tableau de bord convivial avec trois sections clés : 36 36 - 37 37 - 1. Table des anomalies – Un tableau consultable, paginé et filtrable pour naviguer rapidement parmi les anomalies. 38 38 - 39 39 - 2. Vue Graphique – Une visualisation dynamique des données d’anomalies, facilitant l’identification de la source d’un problème dans le réseau vaste et complexe. 40 40 - 41 41 - 3. Tableau de bord global – Des indicateurs clés et des aperçus pour une vue d’ensemble rapide et exploitable. 42 42 - 43 43 - Clemens et moi avons réparti les responsabilités de manière équitable. Clemens s’est occupé des systèmes backend, y compris Kafka, PostgreSQL et l’API GraphQL, garantissant un pipeline de données fiable et efficace. De mon côté, j’ai pris le rôle de chef de projet, coordonnant la communication avec Siemens tout en développant le frontend et en assurant l’intégration fluide des différents composants. Cette collaboration nous a permis de tirer parti de nos points forts et de maintenir une charge de travail équilibrée. 44 44 - 45 45 - Notre produit final répondait non seulement aux exigences de Siemens, mais démontrait également la puissance d’une architecture orientée services (SOA) bien conçue dans la résolution de problèmes complexes et réels. C’était extrêmement gratifiant de voir notre logiciel fonctionner de manière fiable et fournir des informations exploitables pour remédier aux anomalies du réseau électrique. 46 46 - 47 47 - Pour plus de détails sur notre travail, n’hésitez pas à consulter notre thèse [ici](https://trueberryless.org/thesis.pdf) 📜 ou à lire notre cours vidéo [ici](https://videos.trueberryless.org/videos/thesis/) 🎥 (tous deux disponibles uniquement en allemand).

-32

src/content/docs/fr/blog/earworms.mdx

reviewed

··· 1 1 - --- 2 2 - title: Les chansons obsédantes et le message caché dans le motif 3 3 - description: Quelques réflexions aléatoires sur les chansons obsédantes et leur 4 4 - message caché dans le motif. 5 5 - date: 2025-07-23 6 6 - tags: 7 7 - - Mindspace 8 8 - authors: 9 9 - - trueberryless 10 10 - cover: 11 11 - alt: A beautiful cover image with the text "Earworms" 12 12 - image: ../../../../../public/blog/earworms.jpg 13 13 - tableOfContents: false 14 14 - giscus: true 15 15 - 16 16 - --- 17 17 - 18 18 - Oui, ce titre est un petit clin d'œil à l'excellente série Netflix "Arcane", mais ce n'est pas le sujet de cet article. 19 19 - 20 20 - Aujourd'hui, je souhaite partager quelques réflexions sur les chansons obsédantes, un terme qui trouve son origine en allemand (« Ohrwurm ») et qui a ensuite été adopté en anglais en tant que traduction littérale. Le sens derrière ce terme plutôt abstrait est la musique accrocheuse—*musique collante*, comme l'appelle Wikipédia. Ce phénomène se produit souvent de manière imprévisible, surtout lorsque nos pensées s'éloignent du moment présent. 21 21 - 22 22 - {/* excerpt */} 23 23 - 24 24 - Bien que beaucoup de mes idées de blog se manifestent lors de trajets en train, en étant allongé au lit ou simplement en réfléchissant à la vie, l'inspiration pour cet article m'a littéralement frappé sous la douche, comme le prévoient les bonnes vieilles *pensées sous la douche*. La raison – comme vous avez peut-être deviné en lisant le sujet – était une chanson obsédante concernant une mélodie dont j'aurais juré ne pas avoir entendu parler depuis longtemps, disons 4 à 5 semaines. 25 25 - 26 26 - Et cela semble toujours être la partie déroutante des chansons obsédantes : personne ne sait vraiment qui décide du moment où elles apparaissent. Est-ce le cerveau qui appuie sur « lecture » lorsqu'il est légèrement engourdi ? Vous savez ce que je veux dire, ces moments où vous ne savez pas vraiment à quoi vous pensez en ce moment et où vous n'avez pas besoin de réfléchir à ce à quoi penser, vous profitez simplement du moment. Il existe une autre expression idiomatique autrichienne pour ce scénario exact : "ins Narrenkastl schauen", ce qui signifie quelque chose comme *regarder dans le vide*. Et je pense que c'est précisément ces moments d'absence mentale qui sont à l'origine et la raison pour laquelle ces chansons obsédantes surviennent. 27 27 - 28 28 - Mais cela laisse toujours la question : qui décide de ce qu'il faut jouer dans la tête de quelqu'un lorsque cela se produit ? Qui est le DJ ? Selon mon expérience, j'ai remarqué un schéma récurrent, surtout si vous venez d'écouter de la musique dans la dernière demi-heure. Mon cerveau, au moins, aime répéter des morceaux de la **pénultième chanson** entendue, en d'autres termes la chanson qui a été jouée avant la dernière. Cette théorie fonctionne encore mieux si la dernière chanson a été mise en pause au milieu ou simplement pas exactement à la fin. 29 29 - 30 30 - La raison exacte de cela m'est complètement inconnue, mais si je devais deviner, je dirais que les rythmes de la chanson terminée (la pénultième) résonnent encore quelque part dans votre esprit, puisque la chanson elle-même était peut-être de ces chansons du type « je-diminue-mon-volume-pour-mettre-fin-à-ma-durée », ce qui n'est pas mon type préféré de fin musicale, mais encourage le cerveau à continuer. 31 31 - 32 32 - Du moins, c'est ce que je crois. Je serais très intéressé de savoir si vous avez vécu des schémas similaires, alors n'hésitez pas à écrire votre propre article de blog à ce sujet ou à simplement partager celui-ci avec des amis afin que vous puissiez en discuter avec eux !

-35

src/content/docs/fr/blog/github-profile-readme.mdx

reviewed

··· 1 1 - --- 2 2 - title: Concevoir un profil qui fonctionne dans les règles de GitHub 3 3 - date: 2025-02-05 4 4 - description: Comment j’ai conçu un README de profil GitHub qui ne devrait pas 5 5 - exister, mais qui existe 6 6 - tags: 7 7 - - GitHub 8 8 - - Markdown 9 9 - authors: 10 10 - - trueberryless 11 11 - cover: 12 12 - alt: A beautiful cover image with the text "GitHub Profile README" 13 13 - image: ../../../../../public/blog/github-profile-readme.jpg 14 14 - 15 15 - --- 16 16 - 17 17 - Tout grand projet commence par la prise de conscience d’un problème. Mon README de profil GitHub était en désordre, rempli d’une quantité excessive d’informations, trop de badges, et un contenu accablant qui manquait de style et de structure. Il contenait des réalisations de hackathon, des graphiques de contributions GitHub, divers badges techniques, et bien plus, ce qui le rendait visuellement peu attrayant et difficile à naviguer. Au début, je pensais que c'était une manière efficace de me présenter, mais avec le temps, il est devenu clair que l'information était plus accablante qu'informative. Je voulais quelque chose de nouveau, une approche plus raffinée et visuellement attrayante pour présenter mon profil, et l’idée d’implémenter une grille « bento » m’est venue à l’esprit. L’objectif était de créer une mise en page qui soit non seulement fonctionnelle, mais également esthétiquement impressionnante et structurée. 18 18 - 19 19 - {/* excerpt */} 20 20 - 21 21 - La première étape consistait à concevoir une mise en page idéale en utilisant HTML et CSS. Le résultat était prometteur, une conception structurée et visuellement agréable qui transmettait efficacement les informations prévues. Cependant, l’implémentation directe de ceci dans mon README de profil GitHub n’était pas simple. Le Markdown propre à GitHub impose des limitations strictes sur les éléments HTML pris en charge en raison des contraintes de sécurité. De nombreuses balises HTML essentielles étaient limitées, rendant impossible l'intégration de la conception telle qu'elle avait été envisagée. Comprendre ces limitations signifiait repenser complètement l’approche. 22 22 - 23 23 - Confronté à ces restrictions, j’ai envisagé des moyens alternatifs pour générer et présenter dynamiquement le contenu. Une approche consistait à automatiser les mises à jour du contenu à l’aide d’un script Python pour récupérer mon dernier dépôt GitHub et l’insérer dynamiquement dans le README. Le script accédait à l’API GitHub, récupérait le dépôt mis à jour le plus récemment, et modifiait le README en conséquence. Bien que cela ait été une expérimentation intéressante d’automatisation, cela ne résolvait pas le problème central, qui était la nécessité d’un design structuré et visuellement attrayant. 24 24 - 25 25 - Envisageant des approches alternatives, j’ai brièvement envisagé l’idée de prendre une capture d’écran de la mise en page HTML conçue et de l’intégrer comme une image statique dans le README. Bien que cela aurait visuellement résolu le problème, cela semblait être une solution peu élégante qui manquait de flexibilité et de réactivité. Avançant, j’ai cherché une méthode qui permettait à la fois la structure et l’adaptabilité tout en maintenant les mises à jour dynamiques du contenu. 26 26 - 27 27 - Les SVGs se sont révélés être une solution potentielle. Ils assurent l’évolutivité, maintiennent une clarté visuelle sur différentes résolutions, et permettent l’intégration de texte et d’autres éléments. Une première expérimentation impliquait l’intégration de HTML dans un SVG en utilisant la balise `foreignObject`. Bien que conceptuellement prometteuse, la mise en œuvre s'est avérée complexe et a été mise de côté temporairement. En revenant au problème plus tard, une approche plus structurée était nécessaire. 28 28 - 29 29 - L’approche finale consistait à utiliser une structure SVG composite. La solution se composait de plusieurs éléments clés : convertir la mise en page HTML originale en une représentation SVG, encoder les images en Base64 pour garantir leur chargement correct, intégrer des éléments dynamiques tels que des statistiques GitHub et des mises à jour du statut Spotify sous forme de SVG inline, et automatiser les mises à jour via GitHub Actions. En utilisant ces techniques, la mise en page en grille « bento » est devenue entièrement fonctionnelle, capable de se mettre à jour automatiquement tout en conservant une apparence propre et structurée, respectant les contraintes du Markdown propre à GitHub. 30 30 - 31 31 - Un point tournant critique a été la découverte d’un post sur Stack Overflow détaillant une méthode pour convertir HTML en SVG de manière efficace et efficiente. Cette méthode fournissait un moyen structuré de générer les éléments SVG nécessaires tout en préservant le design prévu. En combinant cela avec l’encodage Base64 pour les images et les GitHub Actions pour l’automatisation, cela a permis d’obtenir une solution complète répondant à toutes les exigences initiales. 32 32 - 33 33 - La mise en œuvre finale consiste en un README de profil GitHub raffiné et visuellement remarquable qui intègre des mises à jour dynamiques tout en conservant une structure élégante. Il présente les informations clairement sans surcharge inutile et est entièrement automatisé, se mettant à jour toutes les cinq minutes sans intervention manuelle. Le projet a nécessité des recherches importantes et des expérimentations avec les SVGs, les GitHub Actions, et les limitations du Markdown. Le processus a demandé de la persévérance et de la résolution de problèmes pour travailler dans les contraintes de la plateforme tout en obtenant un résultat techniquement impressionnant. Le résultat est un README de profil GitHub qui équilibre efficacement design, automatisation et fonctionnalité dans les limitations de la plateforme. 34 34 - 35 35 - Si vous êtes maintenant inspiré pour créer vous-même un README de profil GitHub impressionnant, lisez mon [article de blog technique et amusant](../../../../../blog/technically-impressive-github-profile-readme/) ou consultez directement mon dépôt [github.com/trueberryless/trueberryless](https://github.com/trueberryless/trueberryless/tree/7519c6f50094bdfd6fb47f610e6638ac8efdd6ad). Et si vous trouvez mon travail utile, pensez à lui donner un ⭐ et à me suivre sur GitHub à [trueberryless](https://github.com/trueberryless)! 🚀

-35

src/content/docs/fr/blog/mutanuq.mdx

reviewed

··· 1 1 - --- 2 2 - title: "Organiser la vie scolaire : le parcours derrière Mutanuq" 3 3 - date: 2023-11-13 4 4 - description: Un site web rapide, propulsé par Markdown, qui organise le contenu 5 5 - scolaire, simplifie l'apprentissage et soutient la croissance éducative. 6 6 - excerpt: Mutanuq est un site web rapide propulsé par Markdown que j'ai conçu 7 7 - pour organiser le contenu scolaire, rationaliser l'étude et créer une 8 8 - ressource fiable pour mes camarades de classe et moi-même. 9 9 - tags: 10 10 - - Education 11 11 - - Markdown 12 12 - - Starlight 13 13 - authors: 14 14 - - trueberryless 15 15 - cover: 16 16 - alt: A beautiful cover image with the text "Mutanuq" 17 17 - image: ../../../../../public/blog/mutanuq.jpg 18 18 - 19 19 - --- 20 20 - 21 21 - Lors de ma deuxième année à HTL Krems, en 2021, j'ai entrepris un projet qui combinait deux choses qui m'ont toujours passionné : créer mon propre site web et trouver de meilleures façons d'organiser l'immense flux de matériel scolaire. Comme beaucoup d'étudiants, mes notes étaient éparpillées entre OneNote, des fichiers Word, des feuilles Excel, Google Drive, et même des outils comme [Witeboard](https://witeboard.com/). Ce chaos était écrasant, rendant difficile de se concentrer sur un apprentissage efficace. 22 22 - 23 23 - Animé par la vision de simplifier ce processus—non seulement pour moi, mais aussi pour mes camarades de classe—j'ai décidé de créer une plateforme centralisée pour résumer le contenu scolaire. Mon objectif était double : simplifier l'étude et inspirer la motivation parmi mes pairs. 24 24 - 25 25 - À cette époque, je ne connaissais pas de cadres qui pourraient faciliter la création de sites web de style documentation. Au lieu de cela, je me suis appuyé sur du simple HTML, CSS et JavaScript pour concevoir les premières versions de ce que j'appelais *Schneider IT*. Bien que j'adorais travailler dessus, mes premières tentatives étaient maladroites : générer dynamiquement la table des matières et la barre latérale avec mon propre code JavaScript entraînait des temps de chargement douloureusement lents. Il fallait 10 secondes ou plus pour que tout s'affiche ! 26 26 - 27 27 - Malgré les revers, j'ai continué à itérer. En 2023, j'avais créé et abandonné environ 10 versions du site, cherchant toujours un design plus épuré et un système de gestion plus efficace. Le potentiel du site était clair pour moi, mais sa convivialité n'était pas encore au rendez-vous. 28 28 - 29 29 - C'est à ce moment-là que je suis tombé sur [Starlight](https://starlight.astro.build/), un cadre puissant et incroyable créé par [Chris Swithinbank (@delucis)](https://github.com/delucis) pour créer des sites web rapides propulsés par Markdown. Découvrir Starlight a été un tournant—cela m'a permis de combiner deux choses qui me passionnent : créer des sites web et utiliser Markdown pour sa simplicité et son élégance. 30 30 - 31 31 - Avec la transition vers Starlight, Schneider IT est devenu *Mutanuq*. Le nouveau nom marquait un nouveau départ et reflétait le site web épuré et modernisé qu'il était devenu. J'ai tout réécrit, optimisé les performances du site et concentré mes efforts sur la création de contenu spécifiquement adapté aux besoins de mes camarades de classe, en particulier pour les tests à venir. 32 32 - 33 33 - La transformation a porté ses fruits. Mes amis ont commencé à utiliser le site régulièrement et à donner des retours enthousiastes comme : *"Frérot, ce site est vraiment génial !"* Mutanuq n'était pas seulement un outil pour les examens—il est devenu une ressource de confiance pour mes pairs et une archive personnelle pour toutes les connaissances que je voulais préserver au-delà de l'école. 34 34 - 35 35 - Grâce à Starlight, gérer et développer Mutanuq est devenu un jeu d'enfant, et le projet a évolué en quelque chose que je suis fier de maintenir même aujourd'hui. Ce qui avait commencé comme *Schneider IT*—une petite idée pour organiser mes notes—s'est épanoui en *Mutanuq*, une plateforme qui simplifie l'apprentissage pour les autres tout en préservant des connaissances précieuses pour mon moi futur.

-151

src/content/docs/fr/blog/rehype-github-badge-links.mdx

reviewed

··· 1 1 - --- 2 2 - title: Comment créer un plugin Rehype qui transforme les liens GitHub en badges 3 3 - attrayants 4 4 - description: Apprenez à construire un plugin Rehype simple mais captivant qui 5 5 - transforme automatiquement des liens de profil GitHub classiques en liens 6 6 - élégants en forme de badge avec des images de profil—parfait pour ajouter de 7 7 - la personnalité à votre blog ou à vos documents. 8 8 - date: 2025-07-12 9 9 - tags: 10 10 - - Plugins 11 11 - - Education 12 12 - authors: 13 13 - - trueberryless 14 14 - excerpt: Découvrez comment un minuscule plugin Rehype peut donner à vos liens 15 15 - GitHub une mise à niveau visuelle majeure. Avec seulement quelques lignes de 16 16 - code, nous transformerons des liens de profil classiques en badges élégants 17 17 - avec avatars, inspirés par le site d'Antfu et propulsés par Astro + Starlight. 18 18 - cover: 19 19 - alt: A beautiful cover image with the text "Badge Links" 20 20 - image: ../../../../../public/blog/rehype-github-badge-links.jpg 21 21 - tableOfContents: false 22 22 - featured: true 23 23 - 24 24 - --- 25 25 - 26 26 - Récemment, j'ai ajouté une petite fonctionnalité sympa à ce blog, que vous avez peut-être remarquée en tant que lecteur régulier. Ce n'est rien de gigantesque, mais cela donne à chaque blog cette petite touche charmante que j'ai recherchée pendant longtemps. Je parle (ou plutôt j'écris) de tous ces badges verts avec des photos de profil que vous pouvez également voir dans ce blog. 27 27 - 28 28 - L'inspiration pour les créer vient de nul autre qu'[Antfu](https://github.com/antfu) lui-même, puisqu'il affiche ces badges partout sur son site web (au moment de cette rédaction). 29 29 - 30 30 - Au départ, je pensais qu'il faudrait une longue et fastidieuse session de programmation pour atteindre la même beauté visuelle. Cependant, après quelques sessions de Vibe Coding - comme [Andrej Karpathy a inventé le terme](https://x.com/karpathy/status/1886192184808149383) - j'ai rapidement réalisé que ces badges n'étaient qu'à un petit [plugin rehype](https://github.com/rehypejs) d'existence. 31 31 - 32 32 - Voici tout le code derrière le plugin rehype : 33 33 - 34 34 - ```ts 35 35 - // src/lib/rehype-github-badge-links.ts 36 36 - import { h } from "hastscript"; 37 37 - import { visit } from "unist-util-visit"; 38 38 - 39 39 - export default function rehypeGitHubBadgeLinks() { 40 40 - return (tree) => { 41 41 - visit(tree, "element", (node) => { 42 42 - if ( 43 43 - node.tagName === "a" && 44 44 - typeof node.properties?.href === "string" && 45 45 - node.properties.href.startsWith("https://github.com/") 46 46 - ) { 47 47 - const match = node.properties.href.match( 48 48 - /^https:\/\/github\.com\/([\w-]+)\/?$/ 49 49 - ); 50 50 - if (match) { 51 51 - const username = match[1]; 52 52 - 53 53 - // Add GitHub badge class 54 54 - node.properties.className = (node.properties.className || []).concat( 55 55 - "gh-badge" 56 56 - ); 57 57 - 58 58 - // Build avatar image 59 59 - const avatarImg = h("img", { 60 60 - src: `https://github.com/${username}.png`, 61 61 - alt: username, 62 62 - }); 63 63 - 64 64 - // Prepend avatar image to original children 65 65 - node.children.unshift(avatarImg); 66 66 - } 67 67 - } 68 68 - }); 69 69 - }; 70 70 - } 71 71 - ``` 72 72 - 73 73 - En gros, tout ce que fait ce plugin, c'est parcourir le HTML à la recherche de liens qui font référence à un profil GitHub. Si l'un d'eux est trouvé, il ajoute une balise `<img>` avant le contenu texte avec la photo de profil de l'utilisateur ou de l'organisation GitHub. Cela est possible de manière très cohérente grâce à la fonctionnalité de GitHub qui permet d'obtenir la photo comme ressource derrière le lien du profil suivi de `.png`. Lisez-en plus à ce sujet dans [cet article génial sur `dev.to`](https://dev.to/10xlearner/how-to-get-the-profile-picture-of-a-github-account-1d82). 74 74 - 75 75 - Avec un peu de style supplémentaire, cela a un rendu vraiment mignon à mon avis. Veuillez noter que comme ceci est une page [Starlight](https://starlight.astro.build), j'utilise des variables CSS disponibles, comme dans la ligne quatre : 76 76 - 77 77 - ```css "var(--sl-color-accent-low)" "var(--sl-color-accent)" 78 78 - // src/styles/custom.css 79 79 - .gh-badge { 80 80 - display: inline-flex; 81 81 - align-items: center; 82 82 - background-color: var(--sl-color-accent-low); 83 83 - border-radius: 9999px; 84 84 - padding: 0em 0.5em 0 0.3em; 85 85 - font-size: 0.9em; 86 86 - text-decoration: none; 87 87 - color: inherit; 88 88 - font-weight: 500; 89 89 - transition: background-color 0.2s ease; 90 90 - transform: translateY(0.29rem); 91 91 - border: 1px solid var(--sl-color-accent); 92 92 - } 93 93 - 94 94 - .gh-badge:hover { 95 95 - background-color: var(--sl-color-accent); 96 96 - } 97 97 - 98 98 - .gh-badge img { 99 99 - border-radius: 9999px; 100 100 - width: 1.3em; 101 101 - height: 1.3em; 102 102 - } 103 103 - ``` 104 104 - 105 105 - Pour tout assembler, disons, par exemple, dans un site Astro, vous devez simplement ajouter le plugin rehype à la configuration comme ceci : 106 106 - 107 107 - ```ts ins={6-8} 108 108 - // astro.config.mjs 109 109 - import { defineConfig } from 'astro/config'; 110 110 - import rehypeGitHubBadgeLinks from "./src/lib/rehype-github-badge-links"; 111 111 - 112 112 - export default defineConfig({ 113 113 - markdown: { 114 114 - rehypePlugins: [rehypeGitHubBadgeLinks] 115 115 - } 116 116 - }) 117 117 - ``` 118 118 - 119 119 - Lisez-en davantage sur l'injection des plugins rehype dans Astro dans [leur référence de configuration](https://docs.astro.build/en/reference/configuration-reference/#markdownrehypeplugins). 120 120 - 121 121 - N'oubliez pas d'ajouter le CSS de manière similaire, en fonction de votre framework - dans Starlight, vous pouvez configurer des styles CSS globaux personnalisés en suivant [ces instructions](https://docs.astro.build/en/guides/styling/#scoped-styles) - et vous pouvez également admirer vos propres liens en badge. N'hésitez pas à partager cet article avec toute personne que vous souhaitez convaincre d'utiliser ces fonctionnalités. 122 122 - 123 123 - <details> 124 124 - <summary>✨ Point bonus</summary> 125 125 - 126 126 - Si vous souhaitez utiliser un tel badge pour d'autres liens également, je vous recommande de créer un petit composant Astro comme celui-ci : 127 127 - 128 128 - ```astro 129 129 - --- 130 130 - // src/components/BadgeLink.astro 131 131 - const { href, src, text, className = "gh-badge" } = Astro.props; 132 132 - --- 133 133 - 134 134 - <a href={href} class={className}> 135 135 - <img src={src} alt={text} /> 136 136 - {text} 137 137 - </a> 138 138 - ``` 139 139 - 140 140 - Assurez-vous simplement que le CSS est global (ou [scopé](https://docs.astro.build/en/guides/styling/#scoped-styles) dans le composant ci-dessus) et il est prêt à être utilisé : 141 141 - 142 142 - ```mdx 143 143 - import BadgeLink from "../components/BadgeLink.astro"; 144 144 - 145 145 - <BadgeLink 146 146 - href="https://github.com/withastro/starlight" 147 147 - src="/starlight.png" 148 148 - text="Starlight" 149 149 - /> 150 150 - ``` 151 151 - </details>

-306

src/content/docs/fr/blog/setup-argocd-for-kubernetes.mdx

reviewed

··· 1 1 - --- 2 2 - title: Configuration d'Argo CD dans un cluster k3s 3 3 - description: Aujourd'hui, nous allons examiner comment configurer Argo CD dans 4 4 - un cluster k3s. 5 5 - date: 2024-07-27 6 6 - lastUpdated: 2024-07-28 7 7 - tags: 8 8 - - Automation 9 9 - - Deployment Series 10 10 - - Education 11 11 - excerpt: Pour continuer à améliorer notre cluster k3s et surtout le flux de 12 12 - travail CI/CD, nous allons maintenant nous pencher sur l'outil GitOps appelé 13 13 - <a class="gh-badge" href="https://github.com/argoproj"><img 14 14 - src="https://github.com/argoproj.png" alt="Argo CD" />Argo CD</a>, et comment 15 15 - nous pouvons l'intégrer à notre cluster. Notre pile technologique pour le 16 16 - déploiement utilise ces services&#58; k3s, Helm, Cilium et après ce tutoriel, 17 17 - Argo CD également. 18 18 - authors: 19 19 - - trueberryless 20 20 - cover: 21 21 - alt: A beautiful cover image with the text "Argo CD" 22 22 - image: ../../../../../public/blog/setup-argocd-for-kubernetes.jpg 23 23 - giscus: true 24 24 - 25 25 - --- 26 26 - 27 27 - Après avoir lu l'article de Vegard S. Hagen “[Argo CD Kustomize with Helm](https://blog.stonegarden.dev/articles/2023/09/argocd-kustomize-with-helm/)” et décidé que leur solution n'était pas adaptée à notre cluster, nous sommes directement passés au guide “[Getting started](https://argo-cd.readthedocs.io/en/stable/getting_started/)” par défaut d'Argo CD. Et maintenant, nous allons vous faire traverser les étapes de configuration d'[Argo CD](https://github.com/argoproj) sur [k3s](https://github.com/k3s-io) et [Cilium](https://github.com/cilium), en poursuivant à partir du chapitre “[Setup Certificate Manager with Cloudflare](../../../../../blog/setup-kubernetes-with-cilium-and-cloudflare#setup-certificate-manager-with-cloudflare)” de notre article précédent “[Setting up Kubernetes with Cilium and Cloudflare](../../../../../blog/setup-kubernetes-with-cilium-and-cloudflare)”. Dans ce même article récent, nous avons également configuré [Keel](https://github.com/keel-hq) à la fin, mais cette étape sera désormais inutile car nous utiliserons Argo CD pour obtenir le code le plus récent et le plus avancé à partir de chaque dépôt [GitHub](https://github.com/github). Bonne lecture ! 28 28 - 29 29 - :::note 30 30 - Nous supposons que vous avez suivi [notre autre article de blog](../../../../../blog/setup-kubernetes-with-cilium-and-cloudflare). 31 31 - ::: 32 32 - 33 33 - ## Pré-requis 34 34 - 35 35 - Avant de commencer, nous devons nous assurer que nous avons installé `kubectl`, un fichier kubeconfig (k3s enregistre ce fichier ici : 36 36 - 37 37 - ```yaml 38 38 - #/etc/rancher/k3s/config.yaml 39 39 - flannel-backend: "none" 40 40 - disable-kube-proxy: true 41 41 - disable-network-policy: true 42 42 - cluster-init: true 43 43 - disable: 44 44 - - servicelb 45 45 - - traefik 46 46 - ``` 47 47 - 48 48 - ) et CoreDNS (vérifiez si vous avez CoreDNS en exécutant cette commande : 49 49 - 50 50 - ```bash 51 51 - kubectl get pods -n kube-system -l k8s-app=kube-dns 52 52 - ``` 53 53 - 54 54 - commande). 55 55 - 56 56 - ## Installation 57 57 - 58 58 - Tout d'abord, appliquons tous les services nécessaires, les déploiements et de nombreuses autres ressources Kubernetes différentes en exécutant : 59 59 - 60 60 - ```bash 61 61 - kubectl create namespace argocd 62 62 - kubectl apply -n argocd -f https://raw.githubusercontent.com/argoproj/argo-cd/stable/manifests/install.yaml 63 63 - ``` 64 64 - 65 65 - ## Certificat 66 66 - 67 67 - De plus, nous aurons besoin d'un certificat : 68 68 - 69 69 - ```yaml 70 70 - apiVersion: cert-manager.io/v1 71 71 - kind: Certificate 72 72 - metadata: 73 73 - name: argocd 74 74 - namespace: argocd 75 75 - spec: 76 76 - secretName: argocd 77 77 - issuerRef: 78 78 - name: acme-issuer 79 79 - kind: ClusterIssuer 80 80 - dnsNames: 81 81 - - "argo-cd.trueberryless.org" 82 82 - ``` 83 83 - 84 84 - Appliquez cette ressource en exécutant `kubectl apply -f certificate.yaml`. 85 85 - 86 86 - ## Contrôleur d'Ingress 87 87 - 88 88 - Nous aurons également besoin d'un contrôleur d'Ingress géré par Cilium : 89 89 - 90 90 - ```yaml 91 91 - apiVersion: networking.k8s.io/v1 92 92 - kind: Ingress 93 93 - metadata: 94 94 - name: argocd-ingress 95 95 - namespace: argocd 96 96 - spec: 97 97 - rules: 98 98 - - host: argo-cd.trueberryless.org 99 99 - http: 100 100 - paths: 101 101 - - path: / 102 102 - pathType: Prefix 103 103 - backend: 104 104 - service: 105 105 - name: argocd-server 106 106 - port: 107 107 - number: 80 108 108 - 109 109 - tls: 110 110 - - hosts: 111 111 - - argo-cd.trueberryless.org 112 112 - secretName: argocd 113 113 - ``` 114 114 - 115 115 - Appliquez cette ressource en exécutant `kubectl apply -f argocd-ingress.yaml`. 116 116 - 117 117 - ## Désactiver TLS dans Argo CD 118 118 - 119 119 - Avec le certificat, la connexion entre le client et le serveur est sécurisée. Cependant, il existe toujours un certificat auto-signé au sein des services [Argo CD](https://github.com/argoproj), dont nous n'avons pas strictement besoin. Nous pouvons donc désactiver la sécurité du serveur Argo CD en modifiant la propriété `server.insecure`. 120 120 - 121 121 - Pour ce faire, exécutez d'abord cette commande : 122 122 - 123 123 - ```bash 124 124 - kubectl edit cm argocd-cmd-params-cm -n argocd 125 125 - ``` 126 126 - 127 127 - ce qui ouvrira, espérons-le, un fichier dans vim ou neovim (sinon ce serait une honte si vous nous demandez, MDR). Le fichier devrait ressembler à ceci : 128 128 - 129 129 - ```yaml {21-22} 130 130 - # Please edit the object below. Lines beginning with a '#' will be ignored, 131 131 - # and an empty file will abort the edit. If an error occurs while saving this file will be 132 132 - # reopened with the relevant failures. 133 133 - # 134 134 - apiVersion: v1 135 135 - data: 136 136 - server.insecure: "true" 137 137 - kind: ConfigMap 138 138 - metadata: 139 139 - annotations: 140 140 - kubectl.kubernetes.io/last-applied-configuration: | 141 141 - {"apiVersion":"v1","kind":"ConfigMap","metadata":{"annotations":{},"labels":{"app.kubernetes.io/name":"argocd-cmd-params-cm","app.kubernetes.io/part-of":"argocd"},"name":"arg 142 142 - creationTimestamp: "2024-07-27T11:15:28Z" 143 143 - labels: 144 144 - app.kubernetes.io/name: argocd-cmd-params-cm 145 145 - app.kubernetes.io/part-of: argocd 146 146 - name: argocd-cmd-params-cm 147 147 - namespace: argocd 148 148 - resourceVersion: "239710156" 149 149 - uid: 5f53d26b-3adf-4ed9-9807-c3da847335a2 150 150 - data: 151 151 - server.insecure: "true" 152 152 - ``` 153 153 - 154 154 - Les deux dernières lignes ne seront probablement pas là au départ, mais c'est exactement le paramètre que nous voulons atteindre. Allez-y et ajoutez ces deux lignes (marquées ci-dessus) et enregistrez le fichier (`Esc` → `:wq` si vous êtes cool). 155 155 - 156 156 - Redémarrez le serveur Argo CD en exécutant cette commande et en attendant que le déploiement soit terminé : 157 157 - 158 158 - ```bash 159 159 - kubectl rollout restart deploy argocd-server -n argocd 160 160 - kubectl rollout status deploy argocd-server -n argocd 161 161 - ``` 162 162 - 163 163 - Après toutes ces étapes, nous devrions maintenant voir l'interface utilisateur sur [`https://argo-cd.trueberryless.org`](https://argo-cd.trueberryless.org) (protégé par mot de passe). 164 164 - 165 165 -  166 166 - 167 167 - :::note 168 168 - Les identifiants de connexion à l'interface utilisateur d'Argo CD se composent d'un utilisateur et d'un mot de passe. L'utilisateur est toujours `admin` et vous pouvez obtenir votre mot de passe en exécutant : 169 169 - 170 170 - ```bash 171 171 - kubectl -n argocd get secret argocd-initial-admin-secret -o jsonpath="{.data.password}" | base64 -d 172 172 - ``` 173 173 - ::: 174 174 - 175 175 - ## Ajouter le manifest au dépôt 176 176 - 177 177 - Pour créer une nouvelle application dans [Argo CD](https://github.com/argoproj) (via l'interface utilisateur ou l'interface CLI — nous utilisons l'interface utilisateur car nous n'avons pas configuré l'interface CLI), nous devons préparer le dépôt Git. Comme le dépôt est la seule source de vérité, c'est aussi l'endroit où nous définissons toutes les ressources Kubernetes qui devraient être créées par Argo CD. 178 178 - 179 179 - Nous recommandons de créer un nouveau dossier dans le dépôt Git appelé quelque chose comme `manifest`. Dans ce dossier, nous allons créer quelques fichiers : 180 180 - 181 181 - * `certificate.yaml` : 182 182 - 183 183 - ```yaml 184 184 - apiVersion: cert-manager.io/v1 185 185 - kind: Certificate 186 186 - metadata: 187 187 - name: mutanuq 188 188 - namespace: mutanuq 189 189 - spec: 190 190 - secretName: mutanuq 191 191 - issuerRef: 192 192 - name: acme-issuer 193 193 - kind: ClusterIssuer 194 194 - dnsNames: 195 195 - - "mutanuq.trueberryless.org" 196 196 - ``` 197 197 - 198 198 - * `deployment.yaml` : 199 199 - 200 200 - ```yaml 201 201 - apiVersion: apps/v1 202 202 - kind: Deployment 203 203 - metadata: 204 204 - name: mutanuq 205 205 - namespace: mutanuq 206 206 - labels: 207 207 - app: mutanuq 208 208 - spec: 209 209 - replicas: 3 210 210 - selector: 211 211 - matchLabels: 212 212 - app: mutanuq 213 213 - template: 214 214 - metadata: 215 215 - labels: 216 216 - app: mutanuq 217 217 - spec: 218 218 - containers: 219 219 - - name: mutanuq 220 220 - image: "trueberryless/mutanuq" 221 221 - imagePullPolicy: Always 222 222 - ``` 223 223 - 224 224 - * `service.yaml` : 225 225 - 226 226 - ```yaml 227 227 - apiVersion: v1 228 228 - kind: Service 229 229 - metadata: 230 230 - name: mutanuq 231 231 - namespace: mutanuq 232 232 - annotations: 233 233 - cert-manager.io/issuer: acme-issuer 234 234 - spec: 235 235 - selector: 236 236 - app: mutanuq 237 237 - ports: 238 238 - - name: http 239 239 - port: 80 240 240 - ``` 241 241 - 242 242 - * `ingress.yaml` : 243 243 - 244 244 - ```yaml 245 245 - apiVersion: networking.k8s.io/v1 246 246 - kind: Ingress 247 247 - metadata: 248 248 - name: mutanuq 249 249 - namespace: mutanuq 250 250 - spec: 251 251 - rules: 252 252 - - host: mutanuq.trueberryless.org 253 253 - http: 254 254 - paths: 255 255 - - path: / 256 256 - pathType: Prefix 257 257 - backend: 258 258 - service: 259 259 - name: mutanuq 260 260 - port: 261 261 - number: 80 262 262 - 263 263 - tls: 264 264 - - hosts: 265 265 - - mutanuq.trueberryless.org 266 266 - secretName: mutanuq 267 267 - ``` 268 268 - 269 269 - Ces fichiers sont essentiellement les mêmes que ceux mentionnés dans [l'autre article](../../../../../blog/setup-kubernetes-with-cilium-and-cloudflare#example-app-mutanuq) mais séparés en quatre fichiers, car cela nous donne l'avantage de manipuler le manifest depuis [GitHub](https://github.com/github) Actions. Mais chaque chose en son temps, vous verrez comment configurer le manifest avec GitHub Actions dans le [prochain article](../../../../../blog/setup-continuous-integration-github-repository). 270 270 - 271 271 - ## Créer une nouvelle application dans l'interface utilisateur d'Argo CD 272 272 - 273 273 - Vous verrez probablement le grand bouton `NEW APP` dans l'interface utilisateur d'[Argo CD](https://github.com/argoproj). Cliquez dessus et créez une nouvelle application avec les propriétés adaptées ci-dessous : 274 274 - 275 275 - * Nom de l'application : `mutanuq` 276 276 - * Nom du projet : `défaut` 277 277 - * Politique de synchronisation : En savoir plus dans [cet article](../../../../../blog/setup-continuous-integration-github-repository) / laissez `Manuel` pour l'instant 278 278 - * URL du dépôt : `https://github.com/trueberryless-org/mutanuq` 279 279 - * Révision : `HEAD` 280 280 - * Chemin : `manifest` 281 281 - * URL du cluster : `https://kubernetes.default.svc` 282 282 - * Namespace : `mutanuq` 283 283 - 284 284 - Optionnellement — si vous avez [le CLI installé](https://argo-cd.readthedocs.io/en/stable/cli_installation/) — vous pouvez exécuter cette commande pour obtenir le même résultat : 285 285 - 286 286 - ```bash 287 287 - argocd app create mutanuq \ 288 288 - --project default \ 289 289 - --repo https://github.com/trueberryless-org/mutanuq \ 290 290 - --revision HEAD \ 291 291 - --path manifest \ 292 292 - --dest-server https://kubernetes.default.svc \ 293 293 - --dest-namespace mutanuq 294 294 - ``` 295 295 - 296 296 - Vous devriez maintenant voir votre site web en cours de déploiement dans l'interface utilisateur. Ce processus peut prendre un certain temps, car, par exemple, la demande de certificat doit être approuvée. Une application saine devrait ressembler à ceci : 297 297 - 298 298 -  299 299 - 300 300 - ## Célébrez avec un café ! 301 301 - 302 302 - Félicitations, vous avez configuré avec succès [Argo CD](https://github.com/argoproj) sur un cluster [k3s](https://github.com/k3s-io) ! Vous méritez une pause café. Savourez une tasse bien méritée et, si vous souhaitez partager un café virtuel avec moi, n'hésitez pas à soutenir mon travail sur [Ko-fi](https://ko-fi.com/trueberryless). Merci ! 303 303 - 304 304 - ## Continuation 305 305 - 306 306 - La suite dans notre [prochain article de blog](../../../../../blog/setup-continuous-integration-github-repository), qui décrira comment configurer un dépôt [GitHub](https://github.com/github) pouvant ensuite être déployé via Argo CD.

-288

src/content/docs/fr/blog/setup-continuous-integration-github-repository.mdx

reviewed

··· 1 1 - --- 2 2 - title: Configurer le déploiement continu dans un dépôt GitHub 3 3 - description: Aujourd'hui, nous allons voir comment configurer un dépôt GitHub 4 4 - qui sera déployé sur un cluster k3s via Argo CD. 5 5 - date: 2024-07-28 6 6 - tags: 7 7 - - Automation 8 8 - - Deployment Series 9 9 - - GitHub 10 10 - - Education 11 11 - excerpt: Aujourd'hui, nous allons voir comment configurer un <a class="gh-badge" 12 12 - href="https://github.com/github"><img src="https://github.com/github.png" 13 13 - alt="github" />GitHub</a> dépôt qui sera déployé sur un cluster k3s via Argo 14 14 - CD. En résumé, l'article inclura les fichiers Workflow, le Dockerfile, les 15 15 - manifestes (déploiement) et les dépôts <a class="gh-badge" 16 16 - href="https://github.com/docker"><img src="https://github.com/docker.png" 17 17 - alt="Docker Hub" />Docker Hub</a>. Veuillez consulter [notre blog Argo 18 18 - CD](./setup-argocd-for-kubernetes) car cet article sera une continuation d'un 19 19 - autre post. 20 20 - authors: 21 21 - - trueberryless 22 22 - cover: 23 23 - alt: A beautiful cover image with the text "Github CD" 24 24 - image: ../../../../../public/blog/setup-continuous-integration-github-repository.jpg 25 25 - giscus: true 26 26 - 27 27 - --- 28 28 - 29 29 - Dans le post d'aujourd'hui, nous allons examiner brièvement comment configurer un déploiement continu dans un dépôt [GitHub](https://github.com/github). Nous sommes assez sûrs que cette configuration fonctionne également pour d'autres registres Git, mais si vous en utilisez un autre, gardez à l'esprit que cet article est conçu uniquement pour GitHub. 30 30 - 31 31 - Ce post suppose également que vous utilisez [GitHub](https://github.com/github) Actions combiné avec Argo CD pour déployer vos applications sur un cluster Kubernetes. Suivez nos autres [articles sur le déploiement](../../../../../blog/tags/deployment) pour des instructions supplémentaires sur la façon de configurer ces deux technologies sur votre serveur personnel. 32 32 - 33 33 - ## Préparatifs 34 34 - 35 35 - Nous recommandons de créer un compte [Docker Hub](https://hub.docker.com/) ou de choisir un autre registre Docker si vous le souhaitez. 36 36 - 37 37 - Votre dépôt GitHub doit remplir ces conditions : 38 38 - 39 39 - * A un Dockerfile (idéalement dans le dossier racine) 40 40 - * A deux Secrets GitHub ([créer un Secret GitHub](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions#creating-secrets-for-a-repository)) : 41 41 - * DOCKER\\\_USERNAME : Votre nom d'utilisateur Docker 42 42 - * DOCKER\_PASSWORD : Votre mot de passe Docker (ou [jeton d'accès](https://docs.docker.com/security/for-developers/access-tokens/)) 43 43 - 44 44 - ## Créer un ou plusieurs fichiers de workflow 45 45 - 46 46 - Les GitHub Actions sont des tâches spécifiques sur GitHub qui fonctionnent principalement sur des serveurs Linux et peuvent être contrôlées en créant des fichiers `yaml` dans le répertoire `.github/workflows`. Ces fichiers particuliers permettent de définir les événements déclencheurs des tâches et offrent beaucoup de flexibilité. En tant qu'utilisateur régulier des GitHub Actions, je peux vous dire qu'il faut souvent réécrire vos fichiers `yaml` car les petits détails sont facilement négligés. Mais sans plus attendre, passons directement à la création d'un fichier `deployment.yaml` adapté, qui effectuera les tâches suivantes pour nous : 47 47 - 48 48 - * Pousser une nouvelle image Docker sur Docker Hub (avec la dernière version). 49 49 - * Mettre à jour le fichier `manifest/deployment.yaml` pour qu'Argo CD soit informé de la nouvelle image taguée. 50 50 - * (optionnel) Créer une nouvelle release sur GitHub, afin que les temps de publication soient documentés où ils doivent l'être. 51 51 - 52 52 - ```yaml {20} 53 53 - # deployment.yaml 54 54 - name: Deployment 55 55 - 56 56 - on: 57 57 - push: 58 58 - branches: [main] 59 59 - merge_group: 60 60 - pull_request: 61 61 - branches: [main] 62 62 - # Allows you to run this workflow manually from the Actions tab 63 63 - workflow_dispatch: 64 64 - 65 65 - # Automatically cancel in-progress actions on the same branch 66 66 - concurrency: 67 67 - group: ${{ github.workflow }}-${{ github.event_name == 'pull_request_target' && github.head_ref || github.ref }} 68 68 - cancel-in-progress: true 69 69 - 70 70 - env: 71 71 - REGISTRY: docker.io 72 72 - IMAGE_NAME: trueberryless/blog 73 73 - NODE_VERSION: 20 74 74 - 75 75 - jobs: 76 76 - deployment: 77 77 - if: contains(github.event.head_commit.message, 'deploy') || github.event_name == 'workflow_dispatch' 78 78 - runs-on: ubuntu-latest 79 79 - permissions: 80 80 - contents: write 81 81 - steps: 82 82 - - name: Check out the repo 83 83 - uses: actions/checkout@v4 84 84 - with: 85 85 - fetch-depth: 0 86 86 - 87 87 - - name: Create tag 88 88 - run: echo "IMAGE_TAG=$(echo $GITHUB_REF_NAME-$GITHUB_SHA)" >> $GITHUB_ENV 89 89 - 90 90 - - name: Set up Docker Buildx 91 91 - uses: docker/setup-buildx-action@v2 92 92 - 93 93 - - name: Log in to Docker Hub 94 94 - uses: docker/login-action@v2 95 95 - with: 96 96 - username: ${{ secrets.DOCKER_USERNAME }} 97 97 - password: ${{ secrets.DOCKER_PASSWORD }} 98 98 - 99 99 - - name: Extract metadata (tags, labels) for Docker 100 100 - id: meta 101 101 - uses: docker/metadata-action@v4 102 102 - with: 103 103 - images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} 104 104 - 105 105 - - name: Build and push Docker image 106 106 - uses: docker/build-push-action@v5 107 107 - with: 108 108 - context: . 109 109 - push: true 110 110 - tags: | 111 111 - ${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }} 112 112 - ${{ env.IMAGE_NAME }}:latest 113 113 - labels: ${{ steps.meta.outputs.labels }} 114 114 - 115 115 - - name: Update deployment.yaml file 116 116 - run: | 117 117 - yq eval '.spec.template.spec.containers[0].image = "${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }}"' -i manifest/deployment.yaml 118 118 - 119 119 - - uses: stefanzweifel/git-auto-commit-action@v4 120 120 - with: 121 121 - commit_message: update deployment.json container image (automated) 122 122 - 123 123 - - uses: ncipollo/release-action@v1 124 124 - with: 125 125 - tag: ${{ env.IMAGE_TAG }} 126 126 - makeLatest: true 127 127 - body: "A docker image has been deployed to [Docker Hub](https://hub.docker.com/r/${{ env.IMAGE_NAME }}/tags)." 128 128 - ``` 129 129 - 130 130 - Voici un fichier `docker-hub.yaml` obsolète que nous utilisions auparavant car il proposait de bonnes stratégies de versioning : 131 131 - 132 132 - ```yaml collapse={1-145} 133 133 - # docker-hub.yaml 134 134 - name: Docker Image Push 135 135 - 136 136 - on: 137 137 - push: 138 138 - branches: [main] 139 139 - merge_group: 140 140 - pull_request: 141 141 - branches: [main] 142 142 - # Allows you to run this workflow manually from the Actions tab 143 143 - workflow_dispatch: 144 144 - 145 145 - # Automatically cancel in-progress actions on the same branch 146 146 - concurrency: 147 147 - group: ${{ github.workflow }}-${{ github.event_name == 'pull_request_target' && github.head_ref || github.ref }} 148 148 - cancel-in-progress: true 149 149 - 150 150 - env: 151 151 - REGISTRY: docker.io 152 152 - IMAGE_NAME: trueberryless/blog 153 153 - NODE_VERSION: 18 154 154 - 155 155 - jobs: 156 156 - docker-push-image: 157 157 - if: contains(github.event.head_commit.message, 'version') || github.event_name == 'workflow_dispatch' 158 158 - runs-on: ubuntu-latest 159 159 - permissions: 160 160 - contents: write 161 161 - steps: 162 162 - - name: Check out the repo 163 163 - uses: actions/checkout@v4 164 164 - with: 165 165 - fetch-depth: 0 166 166 - 167 167 - - name: Check if file exists 168 168 - run: | 169 169 - if [ -f .github/artifacts/version.json ]; then 170 170 - echo "File exists" 171 171 - echo "FILE_EXISTS=true" >> $GITHUB_ENV 172 172 - else 173 173 - echo "File does not exist" 174 174 - echo "FILE_EXISTS=false" >> $GITHUB_ENV 175 175 - fi 176 176 - 177 177 - - name: read_json 178 178 - if: ${{ env.FILE_EXISTS == 'true' }} 179 179 - id: version 180 180 - uses: zoexx/github-action-json-file-properties@release 181 181 - with: 182 182 - file_path: ".github/artifacts/version.json" 183 183 - 184 184 - - name: save environment variables 185 185 - if: ${{ env.FILE_EXISTS == 'true' }} 186 186 - run: | 187 187 - echo "MAJOR=${{steps.version.outputs.major}}" >> $GITHUB_ENV 188 188 - echo "MINOR=${{steps.version.outputs.minor}}" >> $GITHUB_ENV 189 189 - echo "PATCH=${{steps.version.outputs.patch}}" >> $GITHUB_ENV 190 190 - 191 191 - - name: create environment variables 192 192 - if: ${{ env.FILE_EXISTS == 'false' }} 193 193 - run: | 194 194 - echo "MAJOR=0" >> $GITHUB_ENV 195 195 - echo "MINOR=0" >> $GITHUB_ENV 196 196 - echo "PATCH=0" >> $GITHUB_ENV 197 197 - 198 198 - - name: echo environment variables 199 199 - run: | 200 200 - echo ${{ env.MINOR }} 201 201 - echo ${{ env.MINOR }} 202 202 - echo ${{ env.MINOR }} 203 203 - 204 204 - - name: Major version 205 205 - if: contains(github.event.head_commit.message, 'major') 206 206 - run: | 207 207 - echo "New major version" 208 208 - echo "MAJOR=$((${{ env.MAJOR }}+1))" >> $GITHUB_ENV 209 209 - echo "MINOR=0" >> $GITHUB_ENV 210 210 - echo "PATCH=0" >> $GITHUB_ENV 211 211 - 212 212 - - name: Minor version 213 213 - if: contains(github.event.head_commit.message, 'minor') 214 214 - run: | 215 215 - echo "New minor version" 216 216 - echo "MINOR=$((${{ env.MINOR }}+1))" >> $GITHUB_ENV 217 217 - echo "PATCH=0" >> $GITHUB_ENV 218 218 - 219 219 - - name: Patch version 220 220 - if: contains(github.event.head_commit.message, 'patch') || github.event_name == 'workflow_dispatch' 221 221 - run: | 222 222 - echo "New patch version" 223 223 - echo "PATCH=$((${{ env.PATCH }}+1))" >> $GITHUB_ENV 224 224 - 225 225 - - name: Set up Docker Buildx 226 226 - uses: docker/setup-buildx-action@v2 227 227 - 228 228 - - name: Log in to Docker Hub 229 229 - uses: docker/login-action@v2 230 230 - with: 231 231 - username: ${{ secrets.DOCKER_USERNAME }} 232 232 - password: ${{ secrets.DOCKER_PASSWORD }} 233 233 - 234 234 - - name: Extract metadata (tags, labels) for Docker 235 235 - id: meta 236 236 - uses: docker/metadata-action@v4 237 237 - with: 238 238 - images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} 239 239 - 240 240 - - name: Build and push Docker image 241 241 - uses: docker/build-push-action@v5 242 242 - with: 243 243 - context: . 244 244 - push: true 245 245 - tags: | 246 246 - ${{ env.IMAGE_NAME }}:${{ env.MAJOR }}.${{ env.MINOR }}.${{ env.PATCH }} 247 247 - ${{ env.IMAGE_NAME }}:latest 248 248 - labels: ${{ steps.meta.outputs.labels }} 249 249 - 250 250 - - name: Check out the repo 251 251 - uses: actions/checkout@v4 252 252 - with: 253 253 - fetch-depth: 0 254 254 - 255 255 - - name: Create folder if necessary 256 256 - if: ${{ env.FILE_EXISTS == 'false' }} 257 257 - run: mkdir -p .github/artifacts 258 258 - 259 259 - - name: write_json 260 260 - id: create-json 261 261 - uses: jsdaniell/create-json@v1.2.2 262 262 - with: 263 263 - name: "version.json" 264 264 - json: '{ "major": ${{ env.MAJOR }}, "minor": ${{ env.MINOR }}, "patch": ${{ env.PATCH }} }' 265 265 - dir: ".github/artifacts/" 266 266 - 267 267 - - uses: stefanzweifel/git-auto-commit-action@v4 268 268 - with: 269 269 - commit_message: update version.json (automated) 270 270 - 271 271 - - name: Update deployment.yaml file 272 272 - run: | 273 273 - yq eval '.spec.template.spec.containers[0].image = "${{ env.IMAGE_NAME }}:${{ env.MAJOR }}.${{ env.MINOR }}.${{ env.PATCH }}"' -i manifest/deployment.yaml 274 274 - 275 275 - - uses: stefanzweifel/git-auto-commit-action@v4 276 276 - with: 277 277 - commit_message: update deployment.json container image (automated) 278 278 - ``` 279 279 - 280 280 - Après avoir copié le contenu de notre fichier `deployment.yaml` et créé le nouveau fichier dans le dossier `.github/workflows`, vous devez effectuer quelques adaptations très **importantes** : 281 281 - 282 282 - * Modifiez le `IMAGE_NAME` pour qu'il corresponde à votre dépôt personnel sur Docker Hub. Le nom de l'image se compose de votre nom de compte et du nom du dépôt. Si vous n'êtes pas sûr de ce qu'est le nom de votre image, vous pouvez regarder l'URL du dépôt Docker Hub, il devrait y figurer quelque part. 283 283 - 284 284 - Maintenant, vous êtes prêt à ajouter le mot-clé `deploy` dans n'importe quel message de commit sur la branche principale de votre dépôt, et cela devrait automatiquement pousser une image Docker sur Docker Hub et mettre à jour le manifeste pour Argo CD. 285 285 - 286 286 - ## Célébrez avec un café ! 287 287 - 288 288 - Félicitations, vous avez configuré Argo CD avec k3s et [Cilium](https://github.com/cilium) avec succès ! Vous méritez une pause café. Savourez une tasse bien méritée, et si vous souhaitez partager un café virtuel avec moi, n'hésitez pas à soutenir mon travail sur [Ko-fi](https://ko-fi.com/trueberryless). Merci !

-800

src/content/docs/fr/blog/setup-kubernetes-with-cilium-and-cloudflare.mdx

reviewed

··· 1 1 - --- 2 2 - title: Mise en place de Kubernetes avec Cilium et Cloudflare 3 3 - description: Aujourd'hui, nous allons voir comment configurer un cluster 4 4 - Kubernetes avec K3s et Cilium. 5 5 - date: 2024-06-11 6 6 - lastUpdated: 2024-10-01 7 7 - tags: 8 8 - - Deployment Series 9 9 - - Education 10 10 - excerpt: Cet article de blog décrit le processus de configuration d'un cluster 11 11 - <a class="gh-badge" href="https://github.com/kubernetes"><img 12 12 - src="https://github.com/kubernetes.png" alt="Kubernetes" />Kubernetes</a> avec 13 13 - <a class="gh-badge" href="https://github.com/k3s-io"><img 14 14 - src="https://github.com/k3s-io.png" alt="k3s" />k3s</a> et <a class="gh-badge" 15 15 - href="https://github.com/cilium"><img src="https://github.com/cilium.png" 16 16 - alt="Cilium" />Cilium</a>. Nous utilisons <a class="gh-badge" 17 17 - href="https://github.com/helm"><img src="https://github.com/helm.png" 18 18 - alt="Helm" />Helm</a> comme gestionnaire de packages et <a class="gh-badge" 19 19 - href="https://github.com/cloudflare"><img 20 20 - src="https://github.com/cloudflare.png" alt="Cloudflare" />Cloudflare</a> 21 21 - comme émetteur de certificats. Nous avons utilisé les astuces et conseils de 22 22 - Vegard S. Hagen tirés de [son 23 23 - article](https://blog.stonegarden.dev/articles/2024/02/bootstrapping-k3s-with-cilium/). 24 24 - En gros, ce blog explique comment tous les sites trueberryless.org sont 25 25 - déployés (ce n'est plus le cas). 26 26 - authors: 27 27 - - trueberryless 28 28 - - clemens 29 29 - cover: 30 30 - alt: A beautiful cover image with the text "Kubernetes" 31 31 - image: ../../../../../public/blog/setup-kubernetes-with-cilium-and-cloudflare.jpg 32 32 - giscus: true 33 33 - metrics: 34 34 - readingTime: 360 35 35 - words: 1099 36 36 - 37 37 - --- 38 38 - 39 39 - Travailler avec les conteneurs [Docker](https://github.com/docker) peut être difficile. Cependant, il existe des outils qui facilitent la gestion des conteneurs, comme [Kubernetes](https://github.com/kubernetes). En fait, Kubernetes est le seul outil, à ma connaissance, qui agit comme un logiciel de gestion pour les conteneurs Docker. Kubernetes est bien intégré dans presque tous les fournisseurs de cloud, comme Google Cloud, Azure et AWS. Par conséquent, il utilise une syntaxe standardisée en `yaml`, ce qui est idéal pour les petits développeurs, car ils peuvent basculer entre « Les Trois Grands » avec peu d'effort. 40 40 - 41 41 - ## résumé 42 42 - 43 43 - Installez tout, puis appliquez cert-manager. Facile. 44 44 - 45 45 - ```bash 46 46 - curl -sfL https://get.k3s.io | sh -s - \ 47 47 - --flannel-backend=none \ 48 48 - --disable-kube-proxy \ 49 49 - --disable servicelb \ 50 50 - --disable-network-policy \ 51 51 - --disable traefik \ 52 52 - --cluster-init 53 53 - 54 54 - curl https://raw.githubusercontent.com/helm/helm/main/scripts/get-helm-3 | bash 55 55 - 56 56 - helm repo add cilium https://helm.cilium.io/ 57 57 - helm repo update 58 58 - helm install cilium cilium/cilium 59 59 - 60 60 - CILIUM_CLI_VERSION=$(curl -s https://raw.githubusercontent.com/cilium/cilium-cli/main/stable.txt) 61 61 - CLI_ARCH=amd64 62 62 - curl -L --fail --remote-name-all https://github.com/cilium/cilium-cli/releases/download/${CILIUM_CLI_VERSION}/cilium-linux-${CLI_ARCH}.tar.gz 63 63 - sudo tar xzvfC cilium-linux-${CLI_ARCH}.tar.gz /usr/local/bin 64 64 - rm cilium-linux-${CLI_ARCH}.tar.gz 65 65 - 66 66 - cilium install \ 67 67 - --set k8sServiceHost=${API_SERVER_IP} \ 68 68 - --set k8sServicePort=6443 \ 69 69 - --set kubeProxyReplacement=true 70 70 - 71 71 - cilium status --wait 72 72 - 73 73 - helm install cert-manager jetstack/cert-manager --namespace cert-manager --create-namespace --set crds.enabled=true 74 74 - ``` 75 75 - 76 76 - ```yaml 77 77 - # cert-manager.yaml 78 78 - # secret-cloudflare.yaml 79 79 - apiVersion: v1 80 80 - kind: Secret 81 81 - metadata: 82 82 - name: cloudflare-api-key-secret 83 83 - namespace: cert-manager 84 84 - type: Opaque 85 85 - stringData: 86 86 - api-key: <Cloudflare API Token (not encrypted)> 87 87 - --- 88 88 - # cert-issuer.yaml 89 89 - apiVersion: cert-manager.io/v1 90 90 - kind: ClusterIssuer 91 91 - metadata: 92 92 - name: acme-issuer 93 93 - namespace: cert-manager 94 94 - spec: 95 95 - acme: 96 96 - email: <Email for updates> 97 97 - server: https://acme-v02.api.letsencrypt.org/directory 98 98 - privateKeySecretRef: 99 99 - name: acme-issuer 100 100 - solvers: 101 101 - - dns01: 102 102 - cloudflare: 103 103 - email: <Cloudflare account Email> 104 104 - apiTokenSecretRef: 105 105 - name: cloudflare-api-token-secret 106 106 - key: api-token 107 107 - ``` 108 108 - 109 109 - ## Installer k3s 110 110 - 111 111 - Comme Hagen l'explique dans [son article](https://blog.stonegarden.dev/articles/2024/02/bootstrapping-k3s-with-cilium/), nous voulons installer `k3s` sans configurations et avec tout désactivé. Il décrit en détail quels composants ne sont pas installés. 112 112 - 113 113 - ```bash 114 114 - curl -sfL https://get.k3s.io | sh -s - \ 115 115 - --flannel-backend=none \ 116 116 - --disable-kube-proxy \ 117 117 - --disable servicelb \ 118 118 - --disable-network-policy \ 119 119 - --disable traefik \ 120 120 - --cluster-init 121 121 - ``` 122 122 - 123 123 - Après l'installation, quelques pods devraient être en cours d'exécution (3). Ne soyez pas choqués si les pods sont dans l'état `ContainerCreating` ou `Pending`. Cela est dû au fait que les pods ne peuvent pas communiquer entre eux parce que nous avons désactivé le CNI (`--flannel-backend=none`). Nous installerons plus tard [Cilium](https://github.com/cilium), qui remplacera le CNI Flannel. 124 124 - 125 125 - ```bash 126 126 - kubectl get pods -A 127 127 - ``` 128 128 - 129 129 - ## Installer Helm 130 130 - 131 131 - Helm est le gestionnaire de packages pour [Kubernetes](https://github.com/kubernetes), vous pouvez soit l'installer directement (suivez la [documentation Helm](https://helm.sh/docs/intro/install/)), soit utiliser les composants d'Helm inclus avec Cilium. Nous avons choisi d'installer Helm directement, ce qui est facilement faisable avec cette commande : 132 132 - 133 133 - ```bash 134 134 - curl https://raw.githubusercontent.com/helm/helm/main/scripts/get-helm-3 | bash 135 135 - ``` 136 136 - 137 137 - ## Installer Cilium 138 138 - 139 139 - [Cilium](https://github.com/cilium) est un logiciel de mise en réseau et de sécurité pour Kubernetes. Cilium est très rapide, évolutif et sécurisé car il repose sur eBPF - une technologie révolutionnaire qui peut exécuter des programmes isolés dans le noyau Linux sans recompiler le noyau ou charger des modules noyau. 140 140 - 141 141 - Nous pourrions installer Cilium avec Helm comme indiqué ici : 142 142 - 143 143 - ```bash 144 144 - helm repo add cilium https://helm.cilium.io/ 145 145 - helm repo update 146 146 - helm install cilium cilium/cilium 147 147 - ``` 148 148 - 149 149 - Cependant, nous avons voulu l'installer avec leur CLI, et voici comment vous pouvez le faire. Tout d'abord, installez la CLI de Cilium en exécutant ce script : 150 150 - 151 151 - ```bash 152 152 - CILIUM_CLI_VERSION=$(curl -s https://raw.githubusercontent.com/cilium/cilium-cli/main/stable.txt) 153 153 - CLI_ARCH=amd64 154 154 - curl -L --fail --remote-name-all https://github.com/cilium/cilium-cli/releases/download/${CILIUM_CLI_VERSION}/cilium-linux-${CLI_ARCH}.tar.gz 155 155 - sudo tar xzvfC cilium-linux-${CLI_ARCH}.tar.gz /usr/local/bin 156 156 - rm cilium-linux-${CLI_ARCH}.tar.gz 157 157 - ``` 158 158 - 159 159 - Ensuite, vous pouvez installer Cilium avec l'adresse IP de votre serveur : 160 160 - 161 161 - ```bash 162 162 - cilium install \ 163 163 - --set k8sServiceHost=${API_SERVER_IP} \ 164 164 - --set k8sServicePort=6443 \ 165 165 - --set kubeProxyReplacement=true 166 166 - ``` 167 167 - 168 168 - Nous attendons maintenant que Cilium indique que tout est `OK` ou `disabled` : 169 169 - 170 170 - ```bash 171 171 - cilium status --wait 172 172 - ``` 173 173 - 174 174 - Au bout d'un moment, tous les pods devraient être en état `Running`. 175 175 - 176 176 - ```bash 177 177 - kubectl get pods -A 178 178 - ``` 179 179 - 180 180 - Enfin, vous pouvez appliquer certaines ressources pour Cilium : 181 181 - 182 182 - ```yaml 183 183 - # announce.yaml 184 184 - apiVersion: cilium.io/v2alpha1 185 185 - kind: CiliumL2AnnouncementPolicy 186 186 - metadata: 187 187 - name: default-l2-announcement-policy 188 188 - namespace: kube-system 189 189 - spec: 190 190 - externalIPs: true 191 191 - loadBalancerIPs: true 192 192 - ``` 193 193 - 194 194 - ```yaml 195 195 - # ip-pool.yaml 196 196 - apiVersion: "cilium.io/v2alpha1" 197 197 - kind: CiliumLoadBalancerIPPool 198 198 - metadata: 199 199 - name: "first-pool" 200 200 - spec: 201 201 - blocks: 202 202 - - start: "192.168.0.240" 203 203 - stop: "192.168.0.249" 204 204 - ``` 205 205 - 206 206 - De plus, vous devriez mettre à jour la configuration de Cilium. Pour cela, créez d'abord ce fichier dans le répertoire racine où vous souhaitez gérer le cluster k3s. Plus tard, vous pourrez également appliquer des propriétés liées à Hubble et Prometheus si vous souhaitez utiliser [Grafana](https://github.com/Grafana) ou un outil similaire (ouvrez les lignes repliées si vous souhaitez utiliser notre configuration également). 207 207 - 208 208 - ```yaml collapse={32-59} 209 209 - #cilium-config.yaml 210 210 - k8sServiceHost: 127.0.0.1 211 211 - k8sServicePort: 6443 212 212 - 213 213 - kubeProxyReplacement: true 214 214 - l2announcements: 215 215 - enabled: true 216 216 - 217 217 - externalIPs: 218 218 - enabled: true 219 219 - 220 220 - k8sClientRateLimit: 221 221 - qps: 50 222 222 - burst: 200 223 223 - 224 224 - operator: 225 225 - replicas: 1 226 226 - rollOutPods: true 227 227 - prometheus: 228 228 - enabled: true 229 229 - 230 230 - rollOutCiliumPods: true 231 231 - 232 232 - ingressController: 233 233 - enabled: true 234 234 - default: true 235 235 - loadbalancerMode: shared 236 236 - service: 237 237 - annotations: 238 238 - io.cilium/lb-ipam-ips: 192.168.0.240 239 239 - 240 240 - hubble: 241 241 - relay: 242 242 - enabled: true 243 243 - ui: 244 244 - enabled: true 245 245 - metrics: 246 246 - serviceMonitor: 247 247 - enabled: true 248 248 - enableOpenMetrics: true 249 249 - enabled: 250 250 - - dns 251 251 - - drop 252 252 - - tcp 253 253 - - icmp 254 254 - - port-distribution 255 255 - - "flow:sourceContext=workload-name|reserved-identity;destinationContext=workload-name|reserved-identity" 256 256 - - "kafka:labelsContext=source_namespace,source_workload,destination_namespace,destination_workload,traffic_direction;sourceContext=workload-name|reserved-identity;destinationContext=workload-name|reserved-identity" 257 257 - - "httpV2:exemplars=true;labelsContext=source_ip,source_namespace,source_workload,destination_ip,destination_namespace,destination_workload,traffic_direction;sourceContext=workload-name|reserved-identity;destinationContext=workload-name|reserved-identity" 258 258 - dashboards: 259 259 - enabled: true 260 260 - namespace: monitoring 261 261 - annotations: 262 262 - grafana_folder: "Hubble" 263 263 - 264 264 - prometheus: 265 265 - enabled: true 266 266 - serviceMonitor: 267 267 - enabled: true 268 268 - ``` 269 269 - 270 270 - Exécutez cette commande pour mettre à jour : 271 271 - 272 272 - ```bash 273 273 - cilium upgrade -f cilium-config.yaml 274 274 - ``` 275 275 - 276 276 - ## Configurer le gestionnaire de certificats avec Cloudflare 277 277 - 278 278 - Pour pouvoir créer des certificats pour chaque sous-domaine, il est important d'appliquer un émetteur de certificats qui gère les demandes de certificats et les résout auprès d'un fournisseur. Nous avons choisi [Cloudflare](https://github.com/cloudflare) comme notre émetteur, et voici la configuration que vous devez appliquer à votre cluster Kubernetes. Pour plus d'informations, vous pouvez consulter la [documentation de cert-manager](https://cert-manager.io/docs/configuration/acme/dns01/cloudflare/). 279 279 - 280 280 - Mais d'abord, nous devons installer le cert-manager en exécutant la commande suivante : 281 281 - 282 282 - ```bash 283 283 - helm install cert-manager jetstack/cert-manager --namespace cert-manager --create-namespace --set crds.enabled=true 284 284 - ``` 285 285 - 286 286 - ```yaml 287 287 - # cert-issuer.yaml 288 288 - apiVersion: cert-manager.io/v1 289 289 - kind: ClusterIssuer 290 290 - metadata: 291 291 - name: acme-issuer 292 292 - namespace: cert-manager 293 293 - spec: 294 294 - acme: 295 295 - email: <Email for updates> 296 296 - server: https://acme-v02.api.letsencrypt.org/directory 297 297 - privateKeySecretRef: 298 298 - name: acme-issuer 299 299 - solvers: 300 300 - - dns01: 301 301 - cloudflare: 302 302 - email: <Cloudflare account Email> 303 303 - apiTokenSecretRef: 304 304 - name: cloudflare-api-token-secret 305 305 - key: api-token 306 306 - ``` 307 307 - 308 308 - Vous pouvez appliquer un fichier au cluster [Kubernetes](https://github.com/kubernetes) en exécutant cette commande k8s (également k3s) : 309 309 - 310 310 - ```bash 311 311 - kubectl apply -f cluster-issuer.yaml 312 312 - ``` 313 313 - 314 314 - Si vous souhaitez supprimer la ressource dans le cluster Kubernetes, la commande est assez simple : 315 315 - 316 316 - ```bash 317 317 - kubectl delete -f cluster-issuer.yaml 318 318 - ``` 319 319 - 320 320 - Comme vous l'avez peut-être remarqué ci-dessus, nous avons également besoin d'un secret pour le jeton API qui authentifie que ce générateur est autorisé à demander des certificats. Par conséquent, nous créons un secret avec un `API Token` non chiffré de Cloudflare. 321 321 - 322 322 - De nos jours, nous créons un jeton en accédant à votre tableau de bord [Cloudflare](https://github.com/cloudflare), puis en cliquant sur votre profil et en sélectionnant l'onglet `API Tokens`. Ici, vous pouvez générer un jeton spécifique pour votre générateur ou utiliser la clé API globale (non recommandée). La solution recommandée est de créer un jeton API avec deux permissions (jeton personnalisé) : 323 323 - 324 324 - * Zone - DNS - Modifier 325 325 - * Zone - Zone - Lecture 326 326 - 327 327 -  328 328 - 329 329 - Une description plus détaillée des jetons peut être trouvée dans les [docs Cloudflare](https://developers.cloudflare.com/fundamentals/api/get-started/create-token/). 330 330 - 331 331 - Après avoir appliqué ce secret à Kubernetes, le générateur devrait être prêt à résoudre quelques vilains problèmes ! 332 332 - 333 333 - ```yaml 334 334 - # secret-cloudflare.yaml 335 335 - apiVersion: v1 336 336 - kind: Secret 337 337 - metadata: 338 338 - name: cloudflare-api-key-secret 339 339 - namespace: cert-manager 340 340 - type: Opaque 341 341 - stringData: 342 342 - api-key: <Cloudflare API Token (not encrypted)> 343 343 - ``` 344 344 - 345 345 - Vous pouvez maintenant utiliser ce générateur en appliquant ce fichier qui, espérons-le, créera un certificat : 346 346 - 347 347 - ```yaml 348 348 - # mutanuq-certificat.yaml 349 349 - apiVersion: cert-manager.io/v1 350 350 - kind: Certificate 351 351 - metadata: 352 352 - name: mutanuq 353 353 - namespace: mutanuq 354 354 - spec: 355 355 - secretName: mutanuq 356 356 - issuerRef: 357 357 - name: acme-issuer 358 358 - kind: ClusterIssuer 359 359 - dnsNames: 360 360 - - "mutanuq.trueberryless.org" 361 361 - ``` 362 362 - 363 363 - Cela prend généralement environ 90 secondes pour authentifier la demande une fois appliquée. Vous pouvez vérifier l'état actuel de la demande en exécutant cette commande kubernetes. Si cela prend plus de 2 minutes, peut-être que quelques astuces dans [#Dépannage](#no-cloudflare-certificate-approval) peuvent vous aider. 364 364 - 365 365 - ```bash 366 366 - kubectl describe certificaterequests.cert-manager.io -n mutanuq 367 367 - ``` 368 368 - 369 369 - :::tip 370 370 - L'option `-n` signifie namespace. 371 371 - ::: 372 372 - 373 373 - ## Exemple d'application [`mutanuq`](https://mutanuq.trueberryless.org) 374 374 - 375 375 - Ensuite, vous pouvez utiliser ce certificat dans votre contrôleur Ingress : 376 376 - 377 377 - ```yaml collapse={1-42} {61-64} 378 378 - # mutanuq.yaml 379 379 - apiVersion: apps/v1 380 380 - kind: Deployment 381 381 - metadata: 382 382 - name: mutanuq 383 383 - namespace: mutanuq 384 384 - labels: 385 385 - app: mutanuq 386 386 - annotations: 387 387 - keel.sh/policy: all 388 388 - keel.sh/trigger: poll 389 389 - keel.sh/pollSchedule: "@every 10s" 390 390 - keel.sh/releaseNotes: "https://github.com/trueberryless-org/mutanuq/releases" 391 391 - spec: 392 392 - replicas: 3 393 393 - selector: 394 394 - matchLabels: 395 395 - app: mutanuq 396 396 - template: 397 397 - metadata: 398 398 - labels: 399 399 - app: mutanuq 400 400 - spec: 401 401 - containers: 402 402 - - name: mutanuq 403 403 - image: trueberryless/mutanuq 404 404 - imagePullPolicy: Always 405 405 - --- 406 406 - apiVersion: v1 407 407 - kind: Service 408 408 - metadata: 409 409 - name: mutanuq 410 410 - namespace: mutanuq 411 411 - annotations: 412 412 - cert-manager.io/issuer: acme-issuer 413 413 - spec: 414 414 - selector: 415 415 - app: mutanuq 416 416 - ports: 417 417 - - name: http 418 418 - port: 80 419 419 - --- 420 420 - apiVersion: networking.k8s.io/v1 421 421 - kind: Ingress 422 422 - metadata: 423 423 - name: mutanuq 424 424 - namespace: mutanuq 425 425 - spec: 426 426 - rules: 427 427 - - host: mutanuq.trueberryless.org 428 428 - http: 429 429 - paths: 430 430 - - path: / 431 431 - pathType: Prefix 432 432 - backend: 433 433 - service: 434 434 - name: mutanuq 435 435 - port: 436 436 - number: 80 437 437 - 438 438 - tls: 439 439 - - hosts: 440 440 - - mutanuq.trueberryless.org 441 441 - secretName: mutanuq 442 442 - ``` 443 443 - 444 444 - ## Configurer Keel 445 445 - 446 446 - Nous avons toujours voulu une solution propre d'Intégration Continue (CI) et de Livraison Continue (CD) pour nos sites web. Cela signifie qu'un message de commit spécifique devrait déclencher un processus automatisé via [GitHub](https://github.com/github), Docker Hub et notre serveur, qui, à la fin, met à jour le site web correspondant en environ deux minutes. 447 447 - 448 448 - Keel est un outil logiciel robuste qui permet cette fonctionnalité pour Kubernetes. Nous avons utilisé Keel pour tirer de nouvelles images Docker de Docker Hub en interrogeant toutes les quelques minutes. De plus, Keel fournit un magnifique tableau de bord où vous pouvez contrôler l'interrogation également. 449 449 - 450 450 - Pour configurer Keel avec le tableau de bord d'administration, nous avons créé ces fichiers : 451 451 - 452 452 - * `secret-dashboard.yaml` pour le nom d'utilisateur et le mot de passe administrateur (tout le monde ne devrait pas pouvoir accéder au tableau de bord) 453 453 - * `keel.yaml` pour les configurations réelles de k3s (copié et adapté de [KeelHQ](https://github.com/keel-hq/keel/blob/9f0a7160bbdc3a107ad148933a4269f30e4e479c/deployment/deployment-template.yaml)) 454 454 - 455 455 - ```yaml 456 456 - # secret-dashboard.yaml 457 457 - apiVersion: v1 458 458 - kind: Secret 459 459 - metadata: 460 460 - name: keel-dashboard-secrets 461 461 - namespace: keel 462 462 - type: Opaque 463 463 - stringData: 464 464 - username: <username> 465 465 - password: <password> 466 466 - ``` 467 467 - 468 468 - ```yaml {157-160,162-165} collapse={1-155, 166-194} 469 469 - # keel.yaml 470 470 - --- 471 471 - apiVersion: v1 472 472 - kind: Namespace 473 473 - metadata: 474 474 - name: keel 475 475 - 476 476 - --- 477 477 - apiVersion: v1 478 478 - kind: ServiceAccount 479 479 - metadata: 480 480 - name: keel 481 481 - namespace: keel 482 482 - labels: 483 483 - app: keel 484 484 - 485 485 - --- 486 486 - apiVersion: rbac.authorization.k8s.io/v1 487 487 - kind: ClusterRole 488 488 - metadata: 489 489 - name: keel 490 490 - rules: 491 491 - - apiGroups: 492 492 - - "" 493 493 - resources: 494 494 - - namespaces 495 495 - verbs: 496 496 - - watch 497 497 - - list 498 498 - - apiGroups: 499 499 - - "" 500 500 - resources: 501 501 - - secrets 502 502 - verbs: 503 503 - - get 504 504 - - watch 505 505 - - list 506 506 - - apiGroups: 507 507 - - "" 508 508 - - extensions 509 509 - - apps 510 510 - - batch 511 511 - resources: 512 512 - - pods 513 513 - - replicasets 514 514 - - replicationcontrollers 515 515 - - statefulsets 516 516 - - deployments 517 517 - - daemonsets 518 518 - - jobs 519 519 - - cronjobs 520 520 - verbs: 521 521 - - get 522 522 - - delete # required to delete pods during force upgrade of the same tag 523 523 - - watch 524 524 - - list 525 525 - - update 526 526 - - apiGroups: 527 527 - - "" 528 528 - resources: 529 529 - - configmaps 530 530 - - pods/portforward 531 531 - verbs: 532 532 - - get 533 533 - - create 534 534 - - update 535 535 - 536 536 - --- 537 537 - apiVersion: rbac.authorization.k8s.io/v1 538 538 - kind: ClusterRoleBinding 539 539 - metadata: 540 540 - name: keel 541 541 - roleRef: 542 542 - apiGroup: rbac.authorization.k8s.io 543 543 - kind: ClusterRole 544 544 - name: keel 545 545 - subjects: 546 546 - - kind: ServiceAccount 547 547 - name: keel 548 548 - namespace: keel 549 549 - 550 550 - --- 551 551 - apiVersion: networking.k8s.io/v1 552 552 - kind: Ingress 553 553 - metadata: 554 554 - name: keel 555 555 - namespace: keel 556 556 - spec: 557 557 - rules: 558 558 - - host: keel.trueberryless.org 559 559 - http: 560 560 - paths: 561 561 - - path: / 562 562 - pathType: Prefix 563 563 - backend: 564 564 - service: 565 565 - name: keel 566 566 - port: 567 567 - number: 9300 568 568 - 569 569 - tls: 570 570 - - hosts: 571 571 - - keel.trueberryless.org 572 572 - secretName: keel 573 573 - 574 574 - --- 575 575 - apiVersion: v1 576 576 - kind: Service 577 577 - metadata: 578 578 - name: keel 579 579 - namespace: keel 580 580 - labels: 581 581 - app: keel 582 582 - spec: 583 583 - type: LoadBalancer 584 584 - ports: 585 585 - - port: 9300 586 586 - targetPort: 9300 587 587 - protocol: TCP 588 588 - name: keel 589 589 - selector: 590 590 - app: keel 591 591 - sessionAffinity: None 592 592 - 593 593 - --- 594 594 - apiVersion: apps/v1 595 595 - kind: Deployment 596 596 - metadata: 597 597 - name: keel 598 598 - namespace: keel 599 599 - labels: 600 600 - app: keel 601 601 - spec: 602 602 - replicas: 1 603 603 - selector: 604 604 - matchLabels: 605 605 - app: keel 606 606 - template: 607 607 - metadata: 608 608 - labels: 609 609 - app: keel 610 610 - spec: 611 611 - serviceAccountName: keel 612 612 - containers: 613 613 - - name: keel 614 614 - # Note that we use appVersion to get images tag. 615 615 - image: "keelhq/keel:latest" 616 616 - imagePullPolicy: Always 617 617 - command: ["/bin/keel"] 618 618 - env: 619 619 - - name: NAMESPACE 620 620 - valueFrom: 621 621 - fieldRef: 622 622 - fieldPath: metadata.namespace 623 623 - # Basic auth (to enable UI/API) 624 624 - - name: BASIC_AUTH_USER 625 625 - valueFrom: 626 626 - secretKeyRef: 627 627 - name: keel-dashboard-secrets 628 628 - key: username 629 629 - - name: BASIC_AUTH_PASSWORD 630 630 - valueFrom: 631 631 - secretKeyRef: 632 632 - name: keel-dashboard-secrets 633 633 - key: password 634 634 - ports: 635 635 - - containerPort: 9300 636 636 - livenessProbe: 637 637 - httpGet: 638 638 - path: /healthz 639 639 - port: 9300 640 640 - initialDelaySeconds: 30 641 641 - timeoutSeconds: 10 642 642 - resources: 643 643 - limits: 644 644 - cpu: 100m 645 645 - memory: 128Mi 646 646 - requests: 647 647 - cpu: 50m 648 648 - memory: 64Mi 649 649 - 650 650 - --- 651 651 - # Source: keel/templates/pod-disruption-budget.yaml 652 652 - 653 653 - apiVersion: policy/v1 654 654 - kind: PodDisruptionBudget 655 655 - metadata: 656 656 - name: keel 657 657 - namespace: keel 658 658 - spec: 659 659 - maxUnavailable: 1 660 660 - selector: 661 661 - matchLabels: 662 662 - app: keel 663 663 - ``` 664 664 - 665 665 - Après avoir appliqué les deux fichiers et géré le certificat supplémentaire pour `keel.trueberryless.org`, le tableau de bord Keel fonctionne parfaitement. De plus, chaque `Deployment` Kubernetes peut opter pour un sondage Docker Hub automatisé en ajoutant quelques annotations : 666 666 - 667 667 - ```yaml {8-12} collapse={15-63} 668 668 - apiVersion: apps/v1 669 669 - kind: Deployment 670 670 - metadata: 671 671 - name: mutanuq 672 672 - namespace: mutanuq 673 673 - labels: 674 674 - app: mutanuq 675 675 - annotations: 676 676 - keel.sh/policy: all 677 677 - keel.sh/trigger: poll 678 678 - keel.sh/pollSchedule: "@every 1m" 679 679 - keel.sh/releaseNotes: "https://github.com/trueberryless-org/mutanuq/releases" 680 680 - spec: 681 681 - replicas: 1 682 682 - selector: 683 683 - matchLabels: 684 684 - app: mutanuq 685 685 - template: 686 686 - metadata: 687 687 - labels: 688 688 - app: mutanuq 689 689 - spec: 690 690 - containers: 691 691 - - name: mutanuq 692 692 - image: trueberryless/mutanuq 693 693 - imagePullPolicy: Always 694 694 - --- 695 695 - apiVersion: v1 696 696 - kind: Service 697 697 - metadata: 698 698 - name: mutanuq 699 699 - namespace: mutanuq 700 700 - annotations: 701 701 - cert-manager.io/issuer: acme-issuer 702 702 - spec: 703 703 - selector: 704 704 - app: mutanuq 705 705 - ports: 706 706 - - name: http 707 707 - port: 80 708 708 - --- 709 709 - apiVersion: networking.k8s.io/v1 710 710 - kind: Ingress 711 711 - metadata: 712 712 - name: mutanuq 713 713 - namespace: mutanuq 714 714 - spec: 715 715 - rules: 716 716 - - host: mutanuq.trueberryless.org 717 717 - http: 718 718 - paths: 719 719 - - path: / 720 720 - pathType: Prefix 721 721 - backend: 722 722 - service: 723 723 - name: mutanuq 724 724 - port: 725 725 - number: 80 726 726 - 727 727 - tls: 728 728 - - hosts: 729 729 - - mutanuq.trueberryless.org 730 730 - secretName: mutanuq 731 731 - ``` 732 732 - 733 733 - ## Célébrez avec un café ! 734 734 - 735 735 - Félicitations, vous avez réussi à configurer [Kubernetes](https://github.com/kubernetes) avec [Cilium](https://github.com/cilium) et [Cloudflare](https://github.com/cloudflare) ! Vous méritez une pause café. Profitez d'une tasse bien méritée, et si vous souhaitez partager un café virtuel avec moi, n'hésitez pas à soutenir mon travail sur [Ko-fi](https://ko-fi.com/trueberryless). Merci ! 736 736 - 737 737 - ## Dépannage 738 738 - 739 739 - ### Cilium-ingress n'a pas d'External-IP 740 740 - 741 741 - Assurez-vous que le `ip-pool` inclut l'adresse spécifiée par les annotations dans le fichier `config.yaml`. 742 742 - 743 743 - ```yaml 744 744 - # ip-pool.yaml 745 745 - apiVersion: "cilium.io/v2alpha1" 746 746 - kind: CiliumLoadBalancerIPPool 747 747 - metadata: 748 748 - name: "first-pool" 749 749 - spec: 750 750 - blocks: 751 751 - - start: "192.168.0.240" # 240 included for ingress 752 752 - stop: "192.168.0.249" 753 753 - ``` 754 754 - 755 755 - ```yaml 756 756 - #cilium-config.yaml 757 757 - ingressController: 758 758 - enabled: true 759 759 - default: true 760 760 - loadbalancerMode: shared 761 761 - service: 762 762 - annotations: 763 763 - io.cilium/lb-ipam-ips: 192.168.0.240 # this must be within range 764 764 - ``` 765 765 - 766 766 - :::note 767 767 - Dans certains cas, d'autres contrôleurs d'entrée obtiennent l'adresse annotée avant que le contrôleur d'entrée de Cilium puisse y accéder, donc elle resterait en attente... 768 768 - ::: 769 769 - 770 770 - Si vous ne déployez pas localement mais sur l'une des `Big Three`, veuillez consulter d'autres documentations sur les raisons pour lesquelles l'IP externe reste en attente. Il est principalement de leur responsabilité de vous fournir une adresse. 771 771 - 772 772 - ### Pas d'approbation de certificat Cloudflare 773 773 - 774 774 - Il peut y avoir un problème lorsque le certificat ne reçoit pas l'approbation de Cloudflare. 775 775 - 776 776 - #### Jeton API incorrect 777 777 - 778 778 - Tout d'abord, assurez-vous que le jeton API Cloudflare est correct. Pour être sûr à 100 %, créez-en un nouveau et insérez-le (non encodé en base64) dans ce fichier : 779 779 - 780 780 - ```yaml 781 781 - apiVersion: v1 782 782 - kind: Secret 783 783 - metadata: 784 784 - name: cloudflare-api-key-secret 785 785 - namespace: cert-manager 786 786 - type: Opaque 787 787 - stringData: 788 788 - api-key: <Cloudflare API Token (not encrypted)> 789 789 - ``` 790 790 - 791 791 - #### Maximum d'échecs d'authentification atteint 792 792 - 793 793 - Nous avons rencontré une fois l'erreur `Error: 9109: Max auth failures reached, please check your Authorization header.`. Il suffit d'attendre quelques heures, de supprimer la ressource et de l'appliquer à nouveau : 794 794 - 795 795 - ```bash 796 796 - kubectl delete -f certificate.yaml 797 797 - kubectl apply -f certificate.yaml 798 798 - ``` 799 799 - 800 800 - Espérons que tout fonctionne maintenant !

-155

src/content/docs/fr/blog/starlight-autogenerate-whole-sidebar.mdx

reviewed

··· 1 1 - --- 2 2 - title: Comment générer automatiquement des barres latérales Starlight sans 3 3 - perdre le contrôle 4 4 - description: Découvrez deux techniques de Starlight pour générer automatiquement 5 5 - de grandes barres latérales tout en conservant des URL et des intitulés 6 6 - propres. 7 7 - date: 2025-08-17 8 8 - tags: 9 9 - - Education 10 10 - - Starlight 11 11 - authors: 12 12 - - trueberryless 13 13 - cover: 14 14 - alt: A beautiful cover image with the text "Auto Sidebar" 15 15 - image: ../../../../../public/blog/starlight-autogenerate-whole-sidebar.jpg 16 16 - 17 17 - --- 18 18 - 19 19 - import { FileTree } from '@astrojs/starlight/components'; 20 20 - 21 21 - Avez-vous déjà voulu simplifier la génération de barres latérales dans votre projet Starlight ? Avez-vous essayé de générer automatiquement l'intégralité de la barre latérale pour découvrir qu'elle ne vous permet pas de personnaliser la structure selon vos besoins ? 22 22 - 23 23 - Cet article démontre deux fonctionnalités de Starlight qui rendent les barres latérales entièrement générées automatiquement flexibles et réduisent la maintenance. 24 24 - 25 25 - {/* excerpt */} 26 26 - 27 27 - ## Cas d'utilisation 28 28 - 29 29 - Dans des projets Starlight de taille moyenne à grande, la création et la maintenance manuelles de la [configuration de la barre latérale Starlight](https://starlight.astro.build/reference/configuration/#sidebar) deviennent une tâche fastidieuse et chronophage. 30 30 - 31 31 - Par le passé, Starlight ne fournissait pas les primitives adéquates pour cela, et l'approche recommandée consistait à déplacer d'un niveau inférieur la génération automatique de la configuration de la barre latérale — afin que seuls les dossiers sans sous-dossiers imbriqués soient générés automatiquement. Cependant, avec l'introduction de [Route Data](https://starlight.astro.build/guides/route-data/) et du plus récent [`generateId()` hook de `docsLoader`](https://starlight.astro.build/reference/configuration/#generateid), ces scénarios peuvent désormais être résolus beaucoup plus facilement et efficacement. 32 32 - 33 33 - ## Résolution du problème d’ordre 34 34 - 35 35 - Un problème fréquent était toujours : "Comment puis-je personnaliser l'ordre des dossiers de la barre latérale si je génère automatiquement la barre latérale ?" D'anciennes problématiques comme [#1223](https://github.com/withastro/starlight/issues/1223) suggèrent une solution inspirée de [Nuxt Content](https://content.nuxt.com) où chaque segment de l'intégralité du chemin peut être [préfixé avec des nombres et des points](https://v2.content.nuxt.com/usage/content-directory#ordering) pour déterminer un ordre numérique au niveau du fichier. Un exemple pour un tel projet pourrait ressembler à ceci : 36 36 - 37 37 - <FileTree> 38 38 - * src/content/docs/dossier-imbriqué 39 39 - * 1.frameworks 40 40 - * 1.vue.md 41 41 - * 2.nuxt.md 42 42 - * 2.examples 43 43 - * 1.vercel.md 44 44 - * 2.netlify.md 45 45 - </FileTree> 46 46 - 47 47 - Si vous souhaitez utiliser cette approche dans Starlight, cela ne fonctionne pas immédiatement, mais avec une configuration simple, vous pouvez y parvenir. 48 48 - 49 49 - Starlight [0.35.0](https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.35.0) a introduit une fonction de rappel que vous pouvez passer à `docsLoader()` et qui peut manipuler l'identifiant (URL) de la page générée. En divisant l'entrée par `"/"` et en supprimant tout nombre + point au niveau des segments, vous disposez maintenant de la même fonctionnalité dans Starlight : 50 50 - 51 51 - ```ts {6-7,12-19} 52 52 - // src/content.config.ts 53 53 - import { defineCollection } from "astro:content"; 54 54 - import { docsLoader } from "@astrojs/starlight/loaders"; 55 55 - import { docsSchema } from "@astrojs/starlight/schema"; 56 56 - 57 57 - const leadingNumberAndDotRegEx = /^\d+\./; 58 58 - const fileExtensionRegEx = /\.(md|mdx)$/; 59 59 - 60 60 - export const collections = { 61 61 - docs: defineCollection({ 62 62 - loader: docsLoader({ 63 63 - // Remove file extension and 64 64 - // leading numbers + dot from each segment 65 65 - generateId: ({ entry }) => 66 66 - entry 67 67 - .replace(fileExtensionRegEx, "") 68 68 - .split("/") 69 69 - .map((segment) => segment.replace(leadingNumberAndDotRegEx, "")) 70 70 - .join("/"), 71 71 - }), 72 72 - schema: docsSchema(), 73 73 - }), 74 74 - }; 75 75 - 76 76 - ``` 77 77 - 78 78 - L'URL pour accéder aux pages change maintenant par exemple, de `/nested-folder/1.frameworks/1.vue` à `/nested-folder/frameworks/vue`. 79 79 - 80 80 - Cependant, les noms des dossiers dans la barre latérale incluent encore les préfixes `1.`. Alors, résolvons également la manipulation de la barre latérale : 81 81 - 82 82 - ## Résolution du problème de nommage des dossiers dans la barre latérale 83 83 - 84 84 - Starlight [0.32.0](https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.32.0) a introduit [Route Data](https://starlight.astro.build/guides/route-data/), que nous pouvons maintenant utiliser pour manipuler les noms des dossiers dans la barre latérale afin de 85 85 - 86 86 - 1. supprimer tout numéro et point en début de nom de dossier, et 87 87 - 2. appliquer la "Title Case" afin qu'ils ne soient pas entièrement en minuscules 88 88 - 89 89 - ```ts 90 90 - // src/routeData.ts 91 91 - import { defineRouteMiddleware } from "@astrojs/starlight/route-data"; 92 92 - 93 93 - const leadingNumberAndDotRegEx = /^\d+\./; 94 94 - const wordSplitterRegEx = /\w\S*/g; 95 95 - 96 96 - function toTitleCase(str: string) { 97 97 - return str.replace(wordSplitterRegEx, (word) => { 98 98 - return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); 99 99 - }); 100 100 - } 101 101 - 102 102 - function cleanGroupLabels(entries: any[]) { 103 103 - for (const entry of entries) { 104 104 - if (entry.type === "group") { 105 105 - // Remove leading number + dot 106 106 - let label = entry.label.replace(leadingNumberAndDotRegEx, ""); 107 107 - // Convert to Title Case 108 108 - entry.label = toTitleCase(label); 109 109 - // Recurse into children 110 110 - cleanGroupLabels(entry.entries); 111 111 - } 112 112 - } 113 113 - } 114 114 - 115 115 - export const onRequest = defineRouteMiddleware((context) => { 116 116 - const { sidebar } = context.locals.starlightRoute; 117 117 - cleanGroupLabels(sidebar); 118 118 - }); 119 119 - ``` 120 120 - 121 121 - :::note[Internationalisation (i18n)] 122 122 - Notez que [l'internationalisation (i18n) des noms de dossiers](https://starlight.astro.build/guides/sidebar/#internationalization) est une fonctionnalité manquante avec une telle configuration, car il n'y a actuellement aucun endroit pour définir des traductions de noms de dossiers ; ils sont simplement convertis en "Title Case". Implémenter une logique pour charger dynamiquement les traductions pourrait impliquer de lire le [champ `locale` à partir des données de route](https://starlight.astro.build/reference/route-data/#locale) et de définir les traductions dans des fichiers `json`. Sinon, [utilisez le plugin de HiDeoo](#using-hideoos-plugin), qui [prend en charge l'i18n](https://starlight-auto-sidebar.netlify.app/guides/i18n/). 123 123 - ::: 124 124 - 125 125 - N'oubliez pas d'ajouter le fichier `routeData.ts` à votre fichier `astro.config.mjs` : 126 126 - 127 127 - ```ts ins={11} 128 128 - // astro.config.mjs 129 129 - starlight({ 130 130 - title: "Autogenerate whole sidebar", 131 131 - social: [{ icon: "github", label: "GitHub", href: "https://github.com/withastro/starlight" }], 132 132 - sidebar: [ 133 133 - { 134 134 - label: "Root Folder", 135 135 - autogenerate: { directory: "nested-folder" }, 136 136 - }, 137 137 - ], 138 138 - routeMiddleware: "./src/routeData.ts", 139 139 - }), 140 140 - ``` 141 141 - 142 142 - Bien sûr, vous pouvez ajuster le code à vos besoins (par exemple, supprimer la transformation "Title Case" si vos noms de fichiers sont déjà correctement écrits). 143 143 - 144 144 - ## Utilisation du plugin de HiDeoo 145 145 - 146 146 - Si vous souhaitez générer automatiquement toute votre barre latérale et conserver la flexibilité nécessaire pour personnaliser tout ce que vous voulez, [HiDeoo](https://github.com/HiDeoo) a également créé un plugin dédié pour de tels cas d'utilisation : [Starlight Auto Sidebar](https://starlight-auto-sidebar.netlify.app). 147 147 - 148 148 - En particulier, ces deux fonctionnalités ont été mentionnées dans cet article : 149 149 - 150 150 - * Controllant [l'ordre](https://starlight-auto-sidebar.netlify.app/metadata/#order) des répertoires individuels 151 151 - * Adaptant [l'intitulé affiché](https://starlight-auto-sidebar.netlify.app/metadata/#label) des dossiers individuels 152 152 - 153 153 - Cependant, si vous souhaitez automatiser entièrement la génération sans devoir spécifier manuellement les intitulés et l'ordre pour chaque répertoire, coder la solution vous-même (avec quelques lignes directrices de ce blog) est la solution préférée et recommandée. 154 154 - 155 155 - Si vous souhaitez consulter le code présenté dans cet article, n'hésitez pas à visiter le [StackBlitz](https://stackblitz.com/github/trueberryless/starlight-autogenerate-whole-sidebar?file=src%2Fcontent.config.ts) ou le code source dans le [dépôt GitHub](https://github.com/trueberryless/starlight-autogenerate-whole-sidebar).

-31

src/content/docs/fr/blog/starlight-cooler-credit.mdx

reviewed

··· 1 1 - --- 2 2 - title: Une façon élégante de rendre hommage dans les projets Starlight 3 3 - date: 2024-11-12 4 4 - description: Inspiré par le crédit Starlight dans la documentation Astro, j'ai 5 5 - créé un plugin personnalisable qui lie vers Starlight, Astro et le Starlight 6 6 - Blog, avec un support multilingue. 7 7 - excerpt: Starlight Cooler Credit est un plugin personnalisable qui offre des 8 8 - liens de crédit élégants et multilingues vers Starlight, Astro et le Starlight 9 9 - Blog—transformant une petite idée en une collaboration mondiale. 10 10 - tags: 11 11 - - Starlight 12 12 - - Plugins 13 13 - authors: 14 14 - - trueberryless 15 15 - cover: 16 16 - alt: A beautiful cover image with the text "Cooler Credit" 17 17 - image: ../../../../../public/blog/starlight-cooler-credit.jpg 18 18 - 19 19 - --- 20 20 - 21 21 - Tout a commencé lorsque j'ai remarqué le lien de crédit vers [Starlight](https://starlight.astro.build) dans la [documentation Astro](https://docs.astro.build). Positionné au bas de la table des matières, il était simple mais élégant, et j'aimais la manière subtile de reconnaître l'auteur du projet. Lorsque Starlight a introduit sa propre option de crédit, je l'ai activée dans tous mes projets. C'était discret, petit et placé au bas de chaque page—sympathique, mais facile à manquer. 22 22 - 23 23 - C'est alors que je me suis dit, *Et si d'autres voulaient une option de crédit plus cool, comme celle de la documentation Astro ?* Alors, je me suis mis à créer un plugin. Au départ, c'était juste un projet amusant pour faire des liens vers Starlight et Astro d'une manière plus visible. J'ai commencé avec deux préréglages—un pour Starlight et un pour Astro—et j'ai partagé mon travail sur le Discord d'Astro. 24 24 - 25 25 - C'est là que tout a changé. [Un mainteneur extraordinaire d'Astro](https://www.rainsberger.ca/) a suggéré, *"Pourquoi ne pas ajouter un lien vers le Starlight Blog également ?"* et j'ai pensé, *Quelle idée géniale !* J'ai ajouté le blog comme troisième préréglage, et soudainement, le plugin est devenu bien plus que ce que j'avais prévu. 26 26 - 27 27 - Mais je n'avais pas encore fini. Ça m'agaçait que les crédits soient toujours en anglais, alors j'ai décidé de les faire traduire automatiquement en fonction des langues prises en charge par Starlight. C'est là que la vraie aventure a commencé. J'ai sollicité la communauté pour m'aider à traduire le plugin dans différentes langues. La réponse a été incroyable ! Des personnes du monde entier ont proposé leur aide, et ce qui avait commencé comme un projet solo s'est transformé en une collaboration mondiale. En chemin, j'ai fait de nouvelles rencontres et appris énormément grâce à tous ceux qui ont participé. Maintenant, le plugin prend en charge une dizaine de langues, et de nouvelles traductions continuent d'arriver. 28 28 - 29 29 - Ce qui a commencé comme une idée simple est devenu quelque chose dont je suis vraiment fier : **Starlight Cooler Credit**. Ce n'est pas juste un plugin—c'est une façon de rendre hommage avec style, personnalisation et une touche de travail d'équipe mondial. 30 30 - 31 31 - Si vous êtes curieux, vous pouvez le découvrir sur [starlight-cooler-credit.trueberryless.org](https://starlight-cooler-credit.trueberryless.org/). Essayez-le—je pense que vous l'aimerez autant que moi !

-115

src/content/docs/fr/blog/starlight-dropdown-and-list-together.mdx

reviewed

··· 1 1 - --- 2 2 - title: Dropdown et Liste des sujets Starlight ensemble 3 3 - description: Découvrez comment combiner une liste de bureau et un menu déroulant 4 4 - mobile pour les sujets de votre barre latérale Starlight. 5 5 - date: 2025-05-13 6 6 - tags: 7 7 - - Starlight 8 8 - - Plugins 9 9 - - CSS 10 10 - - Education 11 11 - excerpt: Combinez deux plugins <a class="gh-badge" 12 12 - href="https://github.com/withastro/starlight"><img src="/starlight.png" 13 13 - alt="Starlight" />Starlight</a> Sidebar Topics pour afficher une liste de 14 14 - sujets sur le bureau et un menu déroulant dans la barre latérale mobile. 15 15 - authors: 16 16 - - hideoo 17 17 - - trueberryless 18 18 - cover: 19 19 - alt: A beautiful cover image with the text "Dropdown and List?" 20 20 - image: ../../../../../public/blog/starlight-dropdown-and-list-together.jpg 21 21 - 22 22 - --- 23 23 - 24 24 - import { Tabs, TabItem } from "@astrojs/starlight/components"; 25 25 - 26 26 - En utilisant le plugin [Starlight Sidebar Topics](https://github.com/hideoo/starlight-sidebar-topics) avec le composant [Starlight Sidebar Topics Dropdown](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown), vous pouvez créer un site web qui affiche une liste de sujets sur le bureau et un menu déroulant sur mobile. 27 27 - 28 28 - ## Prérequis 29 29 - 30 30 - Vous devez disposer d’un site web Starlight existant. 31 31 - 32 32 - ## Installer les paquets 33 33 - 34 34 - Tout d'abord, installez le plugin `starlight-sidebar-topics` ainsi que le composant `starlight-sidebar-topics-dropdown` : 35 35 - 36 36 - <Tabs syncKey="pkg"> 37 37 - <TabItem label="npm"> 38 38 - ```bash 39 39 - npm install starlight-sidebar-topics starlight-sidebar-topics-dropdown 40 40 - ``` 41 41 - </TabItem> 42 42 - 43 43 - <TabItem label="pnpm"> 44 44 - ```bash 45 45 - pnpm add starlight-sidebar-topics starlight-sidebar-topics-dropdown 46 46 - ``` 47 47 - </TabItem> 48 48 - 49 49 - <TabItem label="Yarn"> 50 50 - ```bash 51 51 - yarn add starlight-sidebar-topics starlight-sidebar-topics-dropdown 52 52 - ``` 53 53 - </TabItem> 54 54 - </Tabs> 55 55 - 56 56 - Ensuite, suivez les guides d'installation de [Starlight Sidebar Topics](https://starlight-sidebar-topics.trueberryless.org/docs/getting-started/#installation) et de [Starlight Sidebar Topics Dropdown](https://starlight-sidebar-topics-dropdown.trueberryless.org/docs/getting-started/#installation). 57 57 - 58 58 - ## Modifier le composant de la barre latérale 59 59 - 60 60 - Dans le guide d'installation du composant déroulant, vous avez créé un composant de barre latérale qui ne rend que le menu déroulant. Désormais, vous devez modifier ce composant pour qu'il rende également la barre latérale par défaut si l'utilisateur est sur un bureau. 61 61 - 62 62 - ```astro 63 63 - --- 64 64 - // src/components/Sidebar.astro 65 65 - import Default from '@astrojs/starlight/components/Sidebar.astro'; 66 66 - import Topics from 'starlight-sidebar-topics/components/Sidebar.astro'; 67 67 - import TopicsDropdown from 'starlight-sidebar-topics-dropdown/TopicsDropdown.astro'; 68 68 - --- 69 69 - 70 70 - <div class="topics"> 71 71 - <Topics/> 72 72 - </div> 73 73 - <div class="topics-dropdown"> 74 74 - <TopicsDropdown/> 75 75 - </div> 76 76 - <Default><slot /></Default> 77 77 - 78 78 - <style> 79 79 - /* Hide topics by default and show them on medium screens and larger */ 80 80 - .topics { 81 81 - display: none; 82 82 - } 83 83 - 84 84 - @media (min-width: 800px) { 85 85 - .topics { 86 86 - display: block; 87 87 - } 88 88 - } 89 89 - 90 90 - /* Show topics dropdown on small screens and hide it on medium screens and larger */ 91 91 - .topics-dropdown { 92 92 - display: block; 93 93 - } 94 94 - 95 95 - @media (min-width: 800px) { 96 96 - .topics-dropdown { 97 97 - display: none; 98 98 - } 99 99 - } 100 100 - </style> 101 101 - ``` 102 102 - 103 103 - ## Résultat 104 104 - 105 105 - Si vous suivez ces étapes, votre barre latérale ressemblera à ceci : 106 106 - 107 107 -  108 108 - 109 109 - Vous pouvez trouver le code source complet de ce guide dans cet [exemple StackBlitz](https://stackblitz.com/edit/withastro-starlight-qgraahmp?file=astro.config.mjs). 110 110 - 111 111 - ## Possibilités infinies 112 112 - 113 113 - Vous pourriez également faire l'inverse (liste sur mobile, menu déroulant sur le bureau) en intervertissant les propriétés `display: block` et `display: none` dans le CSS. 114 114 - 115 115 - De plus, vous pourriez également créer votre propre composant d'affichage, qui utilise les données de route du plugin Starlight Sidebar Topics et rend les sujets de manière personnalisée. Cela est un peu plus avancé, mais vous pouvez trouver plus d'informations à ce sujet dans la documentation ["Custom Topics List"](https://starlight-sidebar-topics.trueberryless.org/docs/guides/custom-topic-list/).

-131

src/content/docs/fr/blog/starlight-progress-indicator.mdx

reviewed

··· 1 1 - --- 2 2 - title: Comment créer un indicateur de progression horizontal pour votre site Starlight 3 3 - description: Apprenez à créer un indicateur de progression horizontal pour votre 4 4 - site Starlight. 5 5 - date: 2025-06-10 6 6 - tags: 7 7 - - Starlight 8 8 - - CSS 9 9 - - Education 10 10 - excerpt: Apprenez à créer un indicateur de progression horizontal pour votre <a 11 11 - class="gh-badge" href="https://github.com/withastro/starlight"><img 12 12 - src="/starlight.png" alt="Starlight" />Starlight</a> site. 13 13 - authors: 14 14 - - frostybee 15 15 - - trueberryless 16 16 - cover: 17 17 - alt: A beautiful cover image with the text "Progress Bar" 18 18 - image: ../../../../../public/blog/starlight-progress-indicator.jpg 19 19 - 20 20 - --- 21 21 - 22 22 - Dans cet article, nous aimerions vous montrer comment [FrostyBee](https://github.com/frostybee) a créé un indicateur de progression horizontal et épuré pour les sites Starlight. 23 23 - 24 24 - ## Prérequis 25 25 - 26 26 - Vous devez disposer d’un site web Starlight existant. 27 27 - 28 28 - ## Créer le composant d'indicateur de progression 29 29 - 30 30 - Créons un nouveau composant appelé `ProgressIndicator.astro` dans le répertoire `src/components/`. Ce composant sera chargé de rendre l'indicateur de progression. 31 31 - 32 32 - Nous créons un conteneur qui s'étend sur toute la largeur avec la barre de progression `<div>` à l'intérieur. La largeur de l'élément `<div>` interne est mise à jour chaque fois que l'utilisateur fait défiler la page (et lors du chargement de celle-ci) pour refléter la position de défilement actuelle. 33 33 - 34 34 - ```astro title="src/components/ProgressIndicator.astro" collapse={27-43} 35 35 - <div class="progress-scroll-container" aria-hidden="true"> 36 36 - <div id="progress-scroll"></div> 37 37 - </div> 38 38 - 39 39 - <script> 40 40 - window.addEventListener("scroll", function () { 41 41 - updateProgressScroll(); 42 42 - }); 43 43 - window.addEventListener("load", function () { 44 44 - updateProgressScroll(); 45 45 - }); 46 46 - 47 47 - function updateProgressScroll() { 48 48 - if (document) { 49 49 - const progressScroll = document.getElementById("progress-scroll"); 50 50 - if (progressScroll) { 51 51 - var scrollTop = window.scrollY || document.documentElement.scrollTop; 52 52 - var scrollHeight = 53 53 - document.documentElement.scrollHeight - window.innerHeight; 54 54 - var progress = (scrollTop / scrollHeight) * 100; 55 55 - progressScroll.style.width = progress + "%"; 56 56 - } 57 57 - } 58 58 - } 59 59 - </script> 60 60 - 61 61 - <style> 62 62 - html:is(:not([data-has-hero]), [data-has-sidebar], [data-has-toc]) .progress-scroll-container { 63 63 - position: fixed; 64 64 - top: var(--sl-nav-height); 65 65 - left: 0; 66 66 - height: 0.25rem; 67 67 - width: 100%; 68 68 - background-color: transparent; 69 69 - z-index: 3; 70 70 - } 71 71 - 72 72 - #progress-scroll { 73 73 - height: 100%; 74 74 - width: 0px; 75 75 - background-color: var(--sl-color-accent-high); 76 76 - } 77 77 - </style> 78 78 - 79 79 - <style is:global> 80 80 - #starlight__on-this-page--mobile { 81 81 - margin-top: 0.25rem; 82 82 - } 83 83 - </style> 84 84 - ``` 85 85 - 86 86 - Dans les lignes masquées se trouve le style qui s'assure que la barre de progression ressemble à une barre de progression typique. Elle est également adaptée à Starlight car la barre est automatiquement masquée lorsque le site n’a ni barre latérale ni table des matières, mais possède un élément « hero », comme la plupart des pages de destination. 87 87 - 88 88 - Un point important à noter concernant le CSS global (ligne 45) : il déplace le menu déroulant de la table des matières mobile vers le bas pour créer plus d’espace blanc au niveau de la barre de progression. C'est une préférence personnelle et vous pouvez le supprimer si vous le souhaitez. 89 89 - 90 90 - ## Surcharge dans Starlight 91 91 - 92 92 - Nous pouvons maintenant utiliser ce composant dans une [surcharge Starlight](https://starlight.astro.build/guides/overriding-components/). Dans ce cas, il est logique de surcharger le composant [`Header.astro`](https://starlight.astro.build/reference/overrides/#header-1) comme ceci : 93 93 - 94 94 - ```astro title="src/components/Header.astro" 95 95 - --- 96 96 - import Default from "@astrojs/starlight/components/Header.astro"; 97 97 - import ScrollIndicator from "./ScrollIndicator.astro"; 98 98 - --- 99 99 - 100 100 - <Default><slot /></Default> 101 101 - <ScrollIndicator /> 102 102 - ``` 103 103 - 104 104 - N’oubliez pas d’ajouter cette surcharge de composant à votre fichier `astro.config.mjs` : 105 105 - 106 106 - ```diff lang="js" title="astro.config.mjs" 107 107 - import { defineConfig } from 'astro/config'; 108 108 - import starlight from '@astrojs/starlight'; 109 109 - 110 110 - export default defineConfig({ 111 111 - integrations: [ 112 112 - starlight({ 113 113 - title: 'My Docs with a Progress Indicator', 114 114 - + components: { 115 115 - + // Override the default `Header` component. 116 116 - + Header: './src/components/Header.astro', 117 117 - + }, 118 118 - }), 119 119 - ], 120 120 - }); 121 121 - ``` 122 122 - 123 123 - ## Code source 124 124 - 125 125 - Vous pouvez trouver l'intégralité du code du projet sur [GitHub](https://github.com/trueberryless/starlight-progress-indicator) et dans cet [exemple sur Stackblitz](https://stackblitz.com/github/trueberryless/starlight-progress-indicator?file=src%2Fcomponents%2FProgressIndicator.astro). 126 126 - 127 127 - ## Conclusion 128 128 - 129 129 - Avec cette configuration, l'indicateur de progression sera affiché sur chaque page (sauf les pages de destination) de votre site Starlight. 🥳 130 130 - 131 131 - Vous pouvez également consulter le [plugin Starlight Scroll To Top de FrostyBee](https://github.com/frostybee/starlight-scroll-to-top), qui prend également en charge un [Progress Ring](https://frostybee.github.io/starlight-scroll-to-top/configuration/#showprogressring) intégré depuis la version `0.3.1`. 🙌

-163

src/content/docs/fr/blog/starlight-sidebar-whitespace.mdx

reviewed

··· 1 1 - --- 2 2 - title: Comment rendre les éléments de la barre latérale Starlight plus attrayants 3 3 - description: Dans cet article de blog, nous examinerons comment de petits 4 4 - changements peuvent faire une grande différence en termes d'espaces blancs, de 5 5 - tailles de police, de poids et de couleurs dans votre barre latérale 6 6 - Starlight. 7 7 - date: 2025-04-27 8 8 - tags: 9 9 - - Starlight 10 10 - - CSS 11 11 - - Education 12 12 - excerpt: Dans cet article de blog, nous examinerons comment de petits 13 13 - changements peuvent faire une grande différence en termes d'espaces blancs 14 14 - dans votre <a class="gh-badge" 15 15 - href="https://github.com/withastro/starlight"><img src="/starlight.png" 16 16 - alt="Starlight" />Starlight</a>. 17 17 - authors: 18 18 - - trueberryless 19 19 - cover: 20 20 - alt: A beautiful cover image with the text "Starlight CSS" 21 21 - image: ../../../../../public/blog/starlight-sidebar-whitespace.jpg 22 22 - 23 23 - --- 24 24 - 25 25 - Vous êtes-vous déjà demandé pourquoi votre barre latérale \[Starlight]\[starlight] n'est pas si attrayante ? Saviez-vous combien l'espace entre les éléments de votre barre latérale est inconsciemment important ? La taille de la police, le poids et les petites différences de couleur ? Dans ce guide, nous examinerons comment personnaliser l'apparence de votre barre latérale Starlight avec des étapes rapides et faciles. 26 26 - 27 27 - ## Prérequis 28 28 - 29 29 - Tout d'abord, vous devez \[configurer votre site Starlight]\[starlight-getting-started]. Ensuite, Starlight offre un \[guide sur la personnalisation des styles appliqués à votre site Starlight]\[starlight-css], qui est la fonctionnalité que nous utiliserons dans cet article. 30 30 - 31 31 - Comme décrit dans \[ce guide]\[starlight-css-custom], vous devez créer un fichier `.css` quelque part dans votre répertoire `src/`, où vous pouvez définir vos styles CSS. N'oubliez pas d'ajouter le chemin vers ce fichier `.css` dans le tableau `customCss` de Starlight dans le fichier `astro.config.mjs` : 32 32 - 33 33 - ```diff lang="js" 34 34 - // astro.config.mjs 35 35 - import { defineConfig } from 'astro/config'; 36 36 - import starlight from '@astrojs/starlight'; 37 37 - 38 38 - export default defineConfig({ 39 39 - integrations: [ 40 40 - starlight({ 41 41 - title: 'Docs With Custom CSS', 42 42 - customCss: [ 43 43 - + // Relative path to your custom CSS file 44 44 - + './src/styles/custom.css', 45 45 - ], 46 46 - }), 47 47 - ], 48 48 - }); 49 49 - ``` 50 50 - 51 51 - Après avoir terminé ces étapes de préparation, vous êtes prêt à essayer quelques ajustements intéressants à la conception de la barre latérale de Starlight. 52 52 - 53 53 - ## Personnalisations 54 54 - 55 55 - Il existe une infinité de possibilités différentes auxquelles vous pouvez jouer simplement avec votre CSS personnalisé. Je vais vous donner quelques idées que j'ai trouvées très utiles en expérimentant avec la conception de la barre latérale. Bien que certaines de ces idées puissent sembler absurdes, je vous promets que la combinaison de quelques-unes d'entre elles rendra votre barre latérale Starlight encore meilleure. 56 56 - 57 57 - :::note 58 58 - Une chose à noter cependant, dans cet article, l'accent est mis sur l'ajustement du style des **éléments de niveau racine** (ceux qui n'ont pas d'enfants) dans la barre latérale. 59 59 - ::: 60 60 - 61 61 - Mais avant cela, je vais vous montrer à quoi ressemble actuellement le style par défaut de la barre latérale Starlight : 62 62 - 63 63 -  64 64 - 65 65 - ### Manipuler les espaces blancs entre les éléments de la barre latérale 66 66 - 67 67 - Au niveau racine de votre barre latérale Starlight, il existe deux types d'éléments différents : **pages** et **groupes**. Bien que le style par défaut soit assez correct, je trouve que les espaces blancs - c'est-à-dire la marge entre les éléments qui n'inclut aucun contenu - sont un peu trop grands, surtout entre les éléments de niveau racine. Avec cet exemple de CSS personnalisé ci-dessous, j'ai réduit la marge entre les éléments de niveau racine tout en conservant la marge entre les groupes. Les styles CSS importants sont surlignés dans le bloc de code. 68 68 - 69 69 - ```css {3} showLineNumbers=false 70 70 - // src/styles/custom.css 71 71 - sl-sidebar-state-persist ul.top-level > li:not(:has(details)) { 72 72 - margin-top: 0rem; 73 73 - } 74 74 - sl-sidebar-state-persist ul.top-level > li:has(details) { 75 75 - margin-block: 0.5rem; /* default value */ 76 76 - } 77 77 - ``` 78 78 - 79 79 -  80 80 - 81 81 - Peut-être que cela ne sera pas aussi utile pour vous parce que vous n'utilisez pas de pages de niveau racine dans votre barre latérale, donc cet effet ne sera pas perceptible pour vous. Mais si c'est le cas, essayez-le. 82 82 - 83 83 - ### Ajuster le poids de la police des éléments de la barre latérale 84 84 - 85 85 - \[À mon avis]\[imho], ce qui me dérange le plus avec les éléments de niveau racine de la barre latérale de Starlight, c'est leur caractère gras. C'est probablement une opinion très subjective, mais si vous me demandez, une seule page ne peut pas être aussi importante qu'un groupe entier de pages dans votre documentation. Par conséquent, j'ai rendu le poids de la police des éléments de niveau racine plus léger, comme vous pouvez le voir dans le bloc de code ci-dessous. 86 86 - 87 87 - ```css {6} showLineNumbers=false 88 88 - // src/styles/custom.css 89 89 - sl-sidebar-state-persist ul.top-level > li > a[aria-current="page"] { 90 90 - font-weight: 600; /* default value */ 91 91 - } 92 92 - sl-sidebar-state-persist ul.top-level > li > a:not([aria-current="page"]) { 93 93 - font-weight: 400; 94 94 - } 95 95 - ``` 96 96 - 97 97 -  98 98 - 99 99 - ### Ajuster la couleur des éléments de la barre latérale 100 100 - 101 101 - Un petit changement mais subtil : j'ai rendu les éléments de niveau racine non sélectionnés plus ternes dans le bloc de code ci-dessous. 102 102 - 103 103 - Si vous choisissez d'utiliser ce design également, je recommande de n'appliquer que la deuxième règle CSS puisque la première revient simplement à démontrer comment ajuster le style des éléments de niveau racine sélectionnés — cette règle s'applique également aux autres blocs de code dans ce blog s'ils sont marqués comme `valeur par défaut`. 104 104 - 105 105 - ```css {6} showLineNumbers=false 106 106 - // src/styles/custom.css 107 107 - sl-sidebar-state-persist ul.top-level > li > a[aria-current="page"] { 108 108 - color: var(--sl-color-text-invert); /* default value */ 109 109 - } 110 110 - sl-sidebar-state-persist ul.top-level > li > a:not([aria-current="page"]) { 111 111 - color: var(--sl-color-gray-2); 112 112 - } 113 113 - ``` 114 114 - 115 115 -  116 116 - 117 117 - ### Ajuster la taille de la police des éléments de la barre latérale 118 118 - 119 119 - Bien que je ne le recommande pas, vous pouvez également ajuster la taille de la police des éléments de la barre latérale. Avec cet exemple de CSS personnalisé ci-dessous, j'ai réduit la taille de la police des éléments de niveau racine. 120 120 - 121 121 - ```css {3} showLineNumbers=false 122 122 - // src/styles/custom.css 123 123 - sl-sidebar-state-persist ul.top-level > li > a { 124 124 - font-size: var(--sl-text-sm); 125 125 - } 126 126 - ``` 127 127 - 128 128 -  129 129 - 130 130 - ## Recommandations 131 131 - 132 132 - Pour résumer, je recommande d'appliquer un mélange des options de personnalisation ci-dessus, que vous pouvez facilement vérifier dans un seul fichier `.css`. 133 133 - 134 134 - Notez que j'utilise également les \[niveaux de cascade]\[starlight-css-cascade-layers], pris en charge depuis \[Starlight 0.34.0]\[starlight-0-34], et je recommande de les utiliser pour spécifier l'ordre dans lequel les styles CSS sont appliqués. 135 135 - 136 136 - ```css showLineNumbers=false 137 137 - // src/styles/custom.css 138 138 - @layer starlight, my-starlight-sidebar; 139 139 - 140 140 - @layer my-starlight-sidebar { 141 141 - sl-sidebar-state-persist ul.top-level > li:not(:has(details)) { 142 142 - margin-block: 0rem; 143 143 - } 144 144 - sl-sidebar-state-persist ul.top-level > li > a:not([aria-current="page"]) { 145 145 - font-weight: 400; 146 146 - color: var(--sl-color-gray-2); 147 147 - } 148 148 - } 149 149 - ``` 150 150 - 151 151 - [starlight]: https://starlight.astro.build 152 152 - 153 153 - [starlight-getting-started]: https://starlight.astro.build/getting-started/ 154 154 - 155 155 - [starlight-css]: https://starlight.astro.build/guides/css-and-tailwind/ 156 156 - 157 157 - [starlight-css-custom]: https://starlight.astro.build/guides/css-and-tailwind/#custom-css-styles 158 158 - 159 159 - [starlight-css-cascade-layers]: https://starlight.astro.build/guides/css-and-tailwind/#cascade-layers 160 160 - 161 161 - [starlight-0-34]: https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.34.0 162 162 - 163 163 - [imho]: https://en.wiktionary.org/wiki/IMHO

-51

src/content/docs/fr/blog/starlight-topics-history-story.mdx

reviewed

··· 1 1 - --- 2 2 - title: Une courte histoire des plugins Starlight Sidebar Topics 3 3 - description: Dans cet article de blog, je vais vous montrer l'évolution des 4 4 - plugins Starlight avec une étude de cas du plugin Starlight Sidebar Topics. 5 5 - date: 2025-05-05 6 6 - tags: 7 7 - - Starlight 8 8 - - Plugins 9 9 - excerpt: Dans cet article, je vais vous montrer l'évolution des <a 10 10 - class="gh-badge" href="https://github.com/withastro/starlight"><img 11 11 - src="/starlight.png" alt="Starlight" /> Starlight</a> plugins avec une étude 12 12 - de cas du plugin [Starlight Sidebar 13 13 - Topics](https://github.com/hideoo/starlight-sidebar-topics). Préparez-vous à 14 14 - découvrir des faits impressionnants sur les personnes et le code autour de 15 15 - Starlight. 16 16 - authors: 17 17 - - trueberryless 18 18 - - ai 19 19 - cover: 20 20 - alt: A beautiful cover image with the text "History Time" 21 21 - image: ../../../../../public/blog/starlight-topics-history-story.jpg 22 22 - 23 23 - --- 24 24 - 25 25 - Peut-être avez-vous déjà entendu parler de ce framework de documentation génial. J'en parle assez souvent et je l'utilise régulièrement. Non seulement parce que je suis un contributeur actif, mais aussi parce que [Starlight](https://starlight.astro.build) m’est vraiment cher. Ses caractéristiques : simplicité et minimalisme, mais tout ce dont vous avez besoin. Sa performance : [plus rapide que 98 % des autres sites Web](https://www.websitecarbon.com/website/starlight-astro-build-getting-started/). Son accessibilité : même pas une question ! 26 26 - 27 27 - ## La Création 28 28 - 29 29 - Cependant, une chose qui manque objectivement à mon avis est une manière granulaire de séparer les sujets larges dans votre documentation. Et je ne suis pas seul avec cette opinion subjectivement acceptée de manière générale. [HiDeoo](https://github.com/HiDeoo) n'est pas seulement l'un des mainteneurs les plus actifs du projet, mais aussi l'auteur des plus nombreux, et selon moi, des meilleurs plugins que vous pouvez trouver pour Starlight. Et ils ont également remarqué cette fonctionnalité de niche manquante concernant les sujets. C’est pourquoi ils ont décidé de créer le plugin [Starlight Sidebar Topics](https://github.com/hideoo/starlight-sidebar-topics) dès le début, en octobre 2024, qui vous permet de créer une barre latérale avec des sujets. Lisez-en davantage sur les fonctionnalités du plugin dans [sa documentation](https://starlight-sidebar-topics.trueberryless.org/). 30 30 - 31 31 - La chose qui me gênait personnellement dans les premiers jours du plugin était la manière dont les sujets étaient affichés dans la barre latérale. Parce qu'il n’utilise pas - comme je l’imaginais - un menu déroulant pour passer d'un sujet à l'autre, mais montre au contraire toujours tous les sujets. Ce choix de conception était, comme [HiDeoo le souligne clairement](https://github.com/HiDeoo/starlight-sidebar-topics/issues/2#issuecomment-2410196392), très intentionnel et non sans raisons : tous les sujets devraient être visibles en même temps. Prouvé par les documents [Astro](https://github.com/withastro) eux-mêmes ([Chris Swithinbank](https://github.com/delucis) a implémenté la ["barre latérale à onglets"](https://github.com/withastro/docs/pull/9890) pour la documentation Astro v5 plus tard dans le même mois), cette approche présente de nombreux avantages par rapport à un menu déroulant. Néanmoins, j'étais toujours insatisfait de ce design, alors j’ai créé ma propre version. 32 32 - 33 33 - Copier et coller était ma force quand il s’agissait de créer un nouveau plugin Starlight pour la communauté. Et c’est ce que j’ai fait. J’ai pris le plugin Starlight Sidebar Topics comme point de départ et j’ai simplement adapté le composant `Topics.astro`, qui inclut le HTML pour afficher les sujets dans la barre latérale. Après avoir lutté un certain temps pour implémenter un menu déroulant qui soit satisfaisant et propre visuellement (désolé pour l'autosatisfaction, mais je suis fier de moi), j’ai finalement trouvé une solution dont je suis très satisfait et j’ai publié ce nouveau plugin sous le nom [Starlight Sidebar Topics Dropdown](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown) - quelle originalité. 34 34 - 35 35 - ## L'Adaptation 36 36 - 37 37 - Vous pourriez penser que cette histoire est maintenant terminée, car tout le monde pourrait simplement utiliser la variante qu'il souhaite, et tout le monde est heureux. Mais Starlight a continué et continue de s'améliorer, et environ trois mois plus tard, le 15 février, presque comme un [cadeau d'anniversaire](../../../../../blog/20th-birthday/) pour moi, l'ajout tant attendu des données de route dans Starlight est arrivé avec la sortie de la version [v0.32](https://github.com/withastro/starlight/releases/tag/@astrojs/starlight@0.32.0). Cet ajout apparemment mineur a ouvert tant de possibilités, que je n'avais moi-même jamais envisagées. Une fois de plus, HiDeoo a été la principale source d'inspiration pour les auteurs de plugins et a poussé cette nouvelle fonctionnalité à ses limites. Il leur a fallu seulement deux jours pour [adapter plus de 11 plugins à la dernière version de Starlight à l'époque](https://bsky.app/profile/hideoo.dev/post/3liffpudc5c2b) et ils ont ensuite amélioré et refactorisé une grande partie du code pour tirer encore plus parti de cette puissante fonctionnalité. 38 38 - 39 39 - Et ainsi vint le jour où HiDeoo me contacte pour me dire que le plugin Starlight Sidebar Topics utilise maintenant la nouvelle fonctionnalité de données de route de Starlight. Au début, je ne comprenais pas vraiment quels avantages ces changements d’implémentation auraient, mais HiDeoo a pris le temps de m’expliquer que je pouvais maintenant transformer le plugin Starlight Sidebar Topics Dropdown en un simple composant utilisant les données de route de son plugin. Intuitivement, j’étais opposé à cette idée intelligente car cela donnait l’impression que mon seul plugin ayant une certaine popularité devenait un composant inutile. Je ne pouvais pas être plus loin de la vérité. 40 40 - 41 41 - ## L'Union 42 42 - 43 43 - Finalement, j’ai décidé de refondre mon plugin en un composant - cette refonte a éliminé exactement [1210 lignes de code et ajouté 68 lignes de changelog](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/pull/40) - et j’ai remarqué à quel point il fallait maintenant peu de code pour transformer la liste `Topics.astro` en un menu déroulant du point de vue d’un utilisateur. J’étais convaincu que c’était vraiment la bonne direction pour le ~~plugin~~ composant. Et donc, j’ai mis à jour toute la documentation - plus exactement : supprimé plus de 200 lignes de texte (ça fait du bien) - et j’ai publié la nouvelle [version 0.5](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/releases/tag/starlight-sidebar-topics-dropdown%400.5.0). 44 44 - 45 45 - Vous vous demandez peut-être comment des plugins aussi matures pourraient encore s’améliorer avec le temps. Pour être honnête, moi-même j’ai été très surpris lorsque HiDeoo a lâché une idée brillante dans mes messages privés sur Discord. Son idée était et reste ingénieuse. Sinon, je n’y penserais même plus à ce *sujet*. Mais me voilà, en train d’écrire un texte de 800 mots juste pour vous préparer à ce qui va suivre. Roulement de tambour ! Attachez votre ceinture ! Cette déclaration de HiDeoo va vous épater : 46 46 - 47 47 - > "On pourrait avoir quelque chose comme la liste intégrée par défaut sur une vue bureau, et utiliser votre composant pour la version mobile, ou quelque chose comme ça 🧠" — HiDeoo, 21/03/2025 09:54 48 48 - 49 49 - Profond. Intemporel. En or. 50 50 - 51 51 - Et cette seule et belle étincelle d’idée ? C’est précisément ce que je vais vous expliquer dans [l’article "Starlight Topics Dropdown and List together"](../../../../../blog/starlight-dropdown-and-list-together/).

-172

src/content/docs/fr/blog/technically-impressive-github-profile-readme.mdx

reviewed

··· 1 1 - --- 2 2 - title: Comment j'ai créé un README de profil GitHub qui ne devrait pas exister 3 3 - (mais qui le fait) 4 4 - description: Une plongée approfondie dans les défis techniques et les solutions 5 5 - derrière mon README de profil GitHub, avec manipulation de SVG, automatisation 6 6 - et une grille dynamique Bento. 7 7 - date: 2025-02-05 8 8 - tags: 9 9 - - Automation 10 10 - - GitHub 11 11 - excerpt: Créer un README de profil <a class="gh-badge" 12 12 - href="https://github.com/github"><img src="https://github.com/github.png" 13 13 - alt="github" />GitHub</a> remarquable ne consiste pas seulement à ajouter 14 14 - quelques badges — il s'agit de repousser les limites techniques. Dans cette 15 15 - plongée approfondie, j'explore la manipulation de SVG au niveau bas, la 16 16 - conversion de HTML en SVG, les animations intégrées, et l'automatisation 17 17 - complète avec les GitHub Actions pour construire ce que je crois être l'un des 18 18 - README GitHub les plus techniquement avancés. D'une grille Bento dynamique qui 19 19 - se met à jour toutes les 5 minutes à l'intégration de SVG en direct sans 20 20 - requêtes externes, ce projet a transformé mon profil en une vitrine vivante et 21 21 - auto-mise à jour de mon travail. Vous voulez savoir comment j'ai fait ? 22 22 - Décortiquons cela. 🚀 23 23 - authors: 24 24 - - trueberryless 25 25 - - ai 26 26 - cover: 27 27 - alt: A beautiful cover image with the text "GitHub Profile" 28 28 - image: ../../../../../public/blog/technically-impressive-github-profile-readme.jpg 29 29 - --- 30 30 - 31 31 - :::note 32 32 - Lisez l'histoire plus formelle [ici](../../../../../blog/github-profile-readme/) 33 33 - ::: 34 34 - 35 35 - ## Le début : un README qui ressemblait à une page Wikipedia 36 36 - 37 37 - Chaque grande histoire commence par un problème, et le mien était simple : le README de mon [profil GitHub](https://github.com/trueberryless) était un vrai bazar. Il était long. Il y avait trop de texte. Il débordait de badges — tellement que ça ressemblait à une collection de trophées internet. Hackathons, contributions GitHub, Astro, roadmap.sh — s’il existait un badge, je l’avais. 38 38 - 39 39 - Au début, je pensais que c'était bien. Ça montrait tout sur moi, non ? Mais un jour, je l’ai regardé et j’ai réalisé : 40 40 - 41 41 - > Ce n'est pas stylé. C'est un désastre encombré. 42 42 - 43 43 - J'avais besoin de quelque chose de nouveau. De quelque chose de propre. De quelque chose de visuellement frappant. Je voulais une **grille Bento** qui inciterait les gens à s'arrêter et à l'admirer, plutôt que de défiler dans la confusion. Un design si bien exécuté que toute personne qui le verrait voudrait instantanément le sien. 44 44 - 45 45 - C'était le rêve. Maintenant, je devais juste le réaliser. 46 46 - 47 47 - ## Phase 1 : Le rêve HTML (et le cauchemar Markdown) 48 48 - 49 49 - La première étape était simple : modéliser mon profil parfait en HTML et CSS. Et laissez-moi vous dire, c’était incroyable. Il avait une mise en page parfaite, des animations fluides et juste le bon équilibre entre contenu et espace. Puis la réalité m’a rattrapé. Il fallait que cela fonctionne dans le *Markdown au format GitHub*. Pas de problème, non ? Markdown prend en charge le HTML ! Alors j'ai copié mon magnifique HTML dans mon README et j'ai enregistré. 50 50 - 51 51 - > [GitHub](https://github.com/github) : *Absolument pas.* 52 52 - 53 53 - Le Markdown de GitHub [supprime un certain nombre d'étiquettes HTML, mais des étiquettes importantes](https://github.github.com/gfm/#disallowed-raw-html-extension). Des raisons de sécurité, bien sûr (et je respecte totalement cela, GitHub, vraiment ❤️), mais cela signifiait que mon design parfait était complètement **inutilisable**. 54 54 - 55 55 - J'ai essayé de l'ajuster. De remplacer les étiquettes non prises en charge par celles qui fonctionnaient. Peut-être que je pouvais en sauver une partie ? *Non*. Les limitations du Markdown signifiaient que ma mise en page idéale était impossible. 56 56 - 57 57 - ## Phase 2 : "Juste utiliser un script Python" (comment survivre) 58 58 - 59 59 - En cas de doute, automatisez. Si je ne pouvais pas insérer directement mon HTML, peut-être que je pouvais générer quelque chose de dynamique avec un script ? Alors j'ai bricolé un script Python pour récupérer mon dernier dépôt GitHub et l'insérer dans mon README. Je laisse juste ces octets aléatoires que certains appelleraient du code Python ici : 60 60 - 61 61 - ```python collapse={1-22} showLineNumbers=false 62 62 - import requests 63 63 - 64 64 - github_username = "yourusername" 65 65 - repos_url = f"https://api.github.com/users/{github_username}/repos?sort=pushed" 66 66 - 67 67 - response = requests.get(repos_url) 68 68 - repos = response.json() 69 69 - 70 70 - latest_repo = repos[0]["name"] if repos else "No repositories found." 71 71 - 72 72 - with open("README.md", "r") as file: 73 73 - readme_content = file.readlines() 74 74 - 75 75 - new_content = [] 76 76 - for line in readme_content: 77 77 - if "<!--LATEST_REPO-->" in line: 78 78 - new_content.append(f"- Latest Repo: [{latest_repo}](https://github.com/{github_username}/{latest_repo})\n") 79 79 - else: 80 80 - new_content.append(line) 81 81 - 82 82 - with open("README.md", "w") as file: 83 83 - file.writelines(new_content) 84 84 - ``` 85 85 - 86 86 - Cela semblait être un pas dans la bonne direction. C'était automatisé. C'était fonctionnel. Mais cela ne résolvait pas mon problème principal. 😢 87 87 - 88 88 - Il ne s'agissait pas de contenu dynamique — il s'agissait de *design*. Et aucun script Python ne rendrait le Markdown beau. 89 89 - 90 90 - ## Phase 3 : "Bon, je vais juste utiliser une capture d'écran" (fond du gouffre) 91 91 - 92 92 - À ce stade, j'étais désespéré. J'ai envisagé l'impensable : *il suffit de prendre une capture d'écran du HTML et de la mettre dans mon README en tant qu'image.* C'était une approche brutale. C'était paresseux. C'était... efficace ? 93 93 - 94 94 - Pendant un instant, j'ai vraiment pensé à le faire. Mais je savais au fond de moi que je ne me pardonnerais jamais si je laissais cela être ma solution finale. 95 95 - 96 96 - À titre de référence, j'aurais utilisé [Puppeteer](https://www.npmjs.com/package/puppeteer) et [FFmpeg](https://www.ffmpeg.org/) — je n'ai aucune idée de ce que sont ces outils. 97 97 - 98 98 - ## Phase 4 : Passons aux SVG (la lumière au bout du tunnel) 99 99 - 100 100 - J'ai abandonné le plan maudit de la capture d'écran et cherché quelque chose de plus flexible. 101 101 - 102 102 - Les SVG. 103 103 - 104 104 - Les SVG sont évolutifs, prennent en charge à la fois le texte et les images, et — plus important encore — ils peuvent **intégrer** du HTML à l'intérieur. 105 105 - 106 106 - Alors j'ai essayé quelque chose comme ceci : 107 107 - 108 108 - ```xml showLineNumbers=false 109 109 - <svg width="800" height="400" xmlns="http://www.w3.org/2000/svg"> 110 110 - <foreignObject width="100%" height="100%"> 111 111 - <body xmlns="http://www.w3.org/1999/xhtml"> 112 112 - <h1>Hello from HTML inside SVG!</h1> 113 113 - </body> 114 114 - </foreignObject> 115 115 - </svg> 116 116 - ``` 117 117 - 118 118 - Prometteur ! Cela pourrait vraiment fonctionner ! 119 119 - 120 120 - Puis j'ai été occupé par d'autres choses, j'ai oublié de le déboguer, et je n'y suis jamais retourné. 121 121 - 122 122 -  123 123 - 124 124 - ## Phase 5 : Des SVG imbriqués dans des SVG eux-mêmes imbriqués (niveau Inception 100) 125 125 - 126 126 - Quand je suis revenu sur le projet, j'étais **déterminé** à le faire fonctionner. 127 127 - 128 128 - Je me suis rendu compte que si je ne pouvais pas intégrer directement du HTML dans le Markdown, je pouvais feindre en utilisant des SVG imbriqués. (au fait, ceci est massivement simplifié ; le processus réel a pris des jours qui semblaient être des semaines, voire des mois, mais je sais que vous ne liriez tout de même rien de tout cela alors peu importe.) 129 129 - 130 130 - Et puis, après des heures de recherche, je suis tombé sur une réponse révolutionnaire sur Stack Overflow : 131 131 - 132 132 - [https://stackoverflow.com/a/65049620/22573601](https://stackoverflow.com/a/65049620/22573601) 133 133 - 134 134 - Cela m'a conduit à la solution actuelle : 135 135 - 136 136 - 1. Convertir ma mise en page HTML en SVG. 137 137 - 2. Encoder toutes les images en **Base64** (parce que le Markdown de GitHub ne chargera pas les images externes à l'intérieur d'un SVG contenant du HTML). 138 138 - 3. Inclure des SVG dynamiques (comme mes statistiques GitHub, mon statut Spotify, etc.). 139 139 - 4. Tout automatiser avec **GitHub Actions**. 140 140 - 141 141 - ## Le Grand Final : Le README de profil GitHub ultime 142 142 - 143 143 - * Une mise en page en grille Bento élégante, parfaitement structurée en SVG. 144 144 - * Un statut Spotify mis à jour en temps réel, inclus en SVG. 145 145 - * Des statistiques GitHub, insérées dynamiquement via l'automatisation. 146 146 - * Entièrement responsive, entièrement évolutif et absolument fou à construire. 147 147 - 148 148 - Il se met à jour toutes les 5 minutes, fonctionne entièrement avec GitHub Actions, et ne dépend d'aucun service externe. C'est magnifique. C'est efficace. Et surtout, c'est techniquement absurde dans le meilleur des cas. 149 149 - 150 150 - Jetez un œil à un exemple concret du résultat final à un certain point dans le temps. 151 151 - 152 152 - import { Image } from 'astro:assets' 153 153 - 154 154 - <Image src={"https://raw.githubusercontent.com/trueberryless/trueberryless/7519c6f50094bdfd6fb47f610e6638ac8efdd6ad/html-wrapper.svg"} width={980} height={913} alt="Final result" data-zoom-off /> 155 155 - 156 156 - Ce n'est pas si mal comparé à l'[ancien README.md](https://github.com/trueberryless/trueberryless/blob/5dce4ad0033b00829f8ec3756827057017447a65/README.md). Et ne commentez pas pourquoi j'écoute de la K-pop ! C'est mieux que vous ne le pensez, faites-moi confiance. 157 157 - 158 158 - Consultez la version en direct sur mon GitHub [trueberryless](https://github.com/trueberryless) — si j'ai décidé de la garder... — et laissez un follow si vous y êtes déjà et avez apprécié cette lecture ! ❤️ 159 159 - 160 160 - *** 161 161 - 162 162 - ## Pensées finales : Est-ce que ça valait le coup ? 163 163 - 164 164 - Absolument. 165 165 - 166 166 - Ce parcours fut frustrant, chronophage, et rempli de plus d'obstacles que je ne l'aurais jamais imaginé. Mais j'ai appris tellement de choses sur les SVG, les limitations du Markdown, GitHub Actions et l'automatisation en cours de route. 167 167 - 168 168 - Est-ce que je le referais ? Définitivement. 169 169 - 170 170 - Est-ce que je le recommanderais ? Seulement si vous avez une patience infinie. 😅 171 171 - 172 172 - Mais au final, j'ai créé un README de profil [GitHub](https://github.com/github) qui *ne devrait pas exister* — mais il existe. Et je l'adore.

-175

src/content/docs/fr/blog/terraform-variables-resolution.mdx

reviewed

··· 1 1 - --- 2 2 - title: Vibe-coding une extension VS Code pour des projets Terraform 3 3 - description: Comment j'ai créé une extension pour Visual Studio Code qui ajoute 4 4 - des résolutions en ligne aux variables dans les projets Terraform. 5 5 - date: 2025-08-01 6 6 - tags: 7 7 - - Automation 8 8 - - Plugins 9 9 - - Tool 10 10 - authors: 11 11 - - trueberryless 12 12 - cover: 13 13 - alt: A beautiful cover image with the text "VSCE Terraform" 14 14 - image: ../../../../../public/blog/terraform-variables-resolution.jpg 15 15 - 16 16 - --- 17 17 - 18 18 - import { FileTree, LinkButton } from "@astrojs/starlight/components" 19 19 - 20 20 - Aujourd'hui, je veux parler d'une petite extension VS Code que j'ai codée intuitivement en une seule journée pour rendre le travail avec Terraform plus facile. Je vais d'abord expliquer ce qu'est Terraform, puis plonger directement dans les fonctionnalités et les raisons derrière cette extension. N'hésitez pas à passer à la section suivante si vous êtes déjà familier avec Terraform. 21 21 - 22 22 - {/* excerpt */} 23 23 - 24 24 - ## Qu'est-ce que Terraform ? 25 25 - 26 26 - Terraform est un outil d'infrastructure en tant que code (IaC) qui vous permet de définir l'intégralité de votre infrastructure cloud ou sur site sous forme de code. Son langage de configuration, inventé par [HashiCorp](https://github.com/hashicorp), s'appelle HCL (HashiCorp Configuration Language) et présente une syntaxe intuitive et lisible par les humains. La *syntaxe native* a l'avantage de présenter une courbe d'apprentissage faible, d'être cohérente pour tous les fournisseurs, et agréable à lire et écrire pour les humains, tandis que la variante basée sur JSON est plus facile à générer et à analyser pour les machines. 27 27 - 28 28 - Ce qui rend Terraform très puissant, ce sont deux fonctionnalités de base : **les variables** et **les modules**. Les variables vous permettent de créer des ressources dont les valeurs réelles peuvent être insérées depuis un autre endroit, et les modules regroupent un certain nombre de ressources, ce qui offre l’avantage de la réutilisabilité et de l’imbrication. Bien que ces deux fonctionnalités paraissent très basiques, leur combinaison en fait une équipe de rêve. Cela parce que l'ouverture de Terraform vous permet de définir des variables d'entrée pour chaque module et également d'exporter des variables via des sorties. 29 29 - 30 30 - Un module simple est structuré comme ceci : 31 31 - 32 32 - <FileTree> 33 33 - * groupe-de-ressources-azure/ 34 34 - * principal.tf 35 35 - * variables.tf 36 36 - * sorties.tf 37 37 - * README.md 38 38 - </FileTree> 39 39 - 40 40 - Tous les fichiers sauf `principal.tf` sont optionnels (le `README.md` n’est pas spécifique à Terraform), mais je préfère suivre les bonnes pratiques, donc l’exemple les inclut. 41 41 - 42 42 - Examinons un exemple simple. Imaginez que nous voulons gérer un groupe de ressources dans Azure avec Terraform. Dans le fichier `variables.tf`, nous définissons quelles entrées nous attendons dans le module. Chacun des deux blocs représente la variable et les propriétés de la variable, comme la `description` ou le `type` : 43 43 - 44 44 - ```hcl 45 45 - // variables.tf 46 46 - variable "name" { 47 47 - description = "Name of the resource group" 48 48 - type = string 49 49 - } 50 50 - 51 51 - variable "location" { 52 52 - description = "Azure region" 53 53 - type = string 54 54 - default = "westeurope" 55 55 - } 56 56 - ``` 57 57 - 58 58 - Vous avez peut-être remarqué que la variable `location` a également une propriété `default`, ce qui rend la variable optionnelle et fournit une valeur de secours si aucune n'est spécifiée. Ces variables peuvent ensuite être utilisées dans le fichier `principal.tf`, où nous définissons les ressources réelles que nous voulons générer : 59 59 - 60 60 - ```hcl 61 61 - // main.tf 62 62 - provider "azurerm" { 63 63 - features {} 64 64 - } 65 65 - 66 66 - resource "azurerm_resource_group" "this" { 67 67 - name = var.name 68 68 - location = var.location 69 69 - } 70 70 - ``` 71 71 - 72 72 - Dans ce cas, nous définissons simplement notre groupe de ressources, que vous pouvez imaginer comme un dossier dans Azure - explication très simpliste. Maintenant, la dernière partie que nous pouvons implémenter est le fichier `sorties.tf` : 73 73 - 74 74 - ```hcl 75 75 - // outputs.tf 76 76 - output "resource_group_id" { 77 77 - description = "The ID of the resource group" 78 78 - value = azurerm_resource_group.this.id 79 79 - } 80 80 - ``` 81 81 - 82 82 - Cela est très utile si nous voulons utiliser des informations comme l'ID du groupe de ressources plus tard dans d'autres parties de notre projet Terraform. 83 83 - 84 84 - Comme je l'ai déjà mentionné, le `README.md` ne fait pas vraiment partie des définitions Terraform, mais aide à comprendre l'objectif du module : 85 85 - 86 86 - ````md 87 87 - # Azure Resource Group Module 88 88 - 89 89 - A minimal Terraform module that creates an Azure Resource Group. 90 90 - 91 91 - ## Usage 92 92 - 93 93 - ```hcl 94 94 - module "rg" { 95 95 - source = "./azure-resource-group" 96 96 - name = "my-resource-group" 97 97 - } 98 98 - ``` 99 99 - ```` 100 100 - 101 101 - Comme le `README.md` le suggère déjà, nous pouvons maintenant utiliser ce module pour créer un groupe de ressources Azure n'importe où dans notre projet. Nous devons juste nous assurer que le chemin vers le dossier du module est correct et que Terraform sait comment interpréter les fichiers `main.tf`, `variables.tf` et `outputs.tf`. Dans ce cas, étant donné que nous ne spécifions pas la variable `location`, elle sera définie sur `"westeurope"`. 102 102 - 103 103 - ```hcl 104 104 - module "rg" { 105 105 - source = "./azure-resource-group" 106 106 - name = "my-resource-group" 107 107 - } 108 108 - ``` 109 109 - 110 110 - J'espère que cette section vous a donné une meilleure compréhension de base de ce qu'est Terraform et de ce que vous pouvez faire avec. 111 111 - 112 112 - ## La tâche fastidieuse de Terraform 113 113 - 114 114 - Vous avez peut-être remarqué que le champ `source` d’un module crée une flexibilité incroyable pour l’ensemble du projet puisque vous pouvez définir des modules n’importe où et les utiliser n’importe où dans le projet. 115 115 - 116 116 - Cependant, cette fonctionnalité a aussi un énorme inconvénient en termes de maintenabilité : résoudre les valeurs réelles derrière les variables peut être très fastidieux. Bien que dans cet exemple simple, cela puisse sembler facile à gérer, plus le projet grandit, plus il devient imbriqué, et plus il est difficile et chronophage de comprendre et d'adapter le code Terraform. C'est pourquoi j'ai créé une extension. 117 117 - 118 118 - **Que doit faire l'extension ?** Le principal objectif de l’extension est de fournir les valeurs réelles des variables partout où elles sont utilisées. Si un module est appelé à partir de plusieurs endroits ou simplement plusieurs fois, les informations doivent indiquer quel cas d’utilisation définit la variable avec quelle valeur. Si les modules sont profondément imbriqués, les valeurs doivent être résolues jusqu'à ce que nous atteignions les fichiers `.tfvars`. Ce sont les fichiers où vous pouvez définir des valeurs codées en dur pour les variables. 119 119 - 120 120 - ## Comment démarrer une extension VS Code 121 121 - 122 122 - Créer le projet modèle de base pour une extension VS Code est aussi simple que d'exécuter cette commande lorsque vous avez [Node](https://github.com/nodejs) installé : 123 123 - 124 124 - ```bash 125 125 - npx --package yo --package generator-code -- yo code 126 126 - ``` 127 127 - 128 128 - Cette commande installe temporairement Yeoman (un logiciel générateur), et entre dans un mode interactif où certaines questions doivent être répondues, comme le nom du projet, le type et la description. Dans le bloc suivant, vous pouvez voir toutes les questions et les réponses par défaut : 129 129 - 130 130 - ```bash 131 131 - # ? What type of extension do you want to create? New Extension (TypeScript) 132 132 - # ? What's the name of your extension? HelloWorld 133 133 - ### Press <Enter> to choose default for all options below ### 134 134 - 135 135 - # ? What's the identifier of your extension? helloworld 136 136 - # ? What's the description of your extension? LEAVE BLANK 137 137 - # ? Initialize a git repository? Y 138 138 - # ? Which bundler to use? unbundled 139 139 - # ? Which package manager to use? npm 140 140 - 141 141 - # ? Do you want to open the new folder with Visual Studio Code? Open with `code` 142 142 - ``` 143 143 - 144 144 - Pour plus d'informations sur les extensions VS Code, je tiens à renvoyer à [la documentation officielle](https://code.visualstudio.com/api/get-started/your-first-extension), car elle est toujours à jour contrairement à mes explications ici. 145 145 - 146 146 - ## 3… 2… 1… Vibe-Coding ! 147 147 - 148 148 - J'aime commencer de nouveaux projets en posant des questions techniques générales à [ChatGPT](https://github.com/openai) comme : 149 149 - 150 150 - * Comment suggéreriez-vous de réaliser un tel projet ? 151 151 - * Combien de temps estimez-vous que cela me prendra ? 152 152 - * À quel point cela sera-t-il difficile ? 153 153 - 154 154 - Brainstormer avec des bots d'IA semble être un moyen très sensé d'avoir une meilleure vue d'ensemble des nouveaux projets, surtout lorsqu'on s'aventure dans des terrains complètement inconnus. 155 155 - Créer une extension VS Code était exactement un tel cas d'utilisation, car je n'avais jamais créé quelque chose pour VS Code ou tout autre IDE auparavant. 156 156 - Après cette phase initiale de brainstorming, je préfère utiliser [Claude](https://github.com/anthropics) pour programmer tous les fichiers nécessaires à une telle extension, car, selon mon expérience, ce bot IA a vraiment la capacité de produire des codes impeccables. J’ai rarement rencontré des bugs ou problèmes d’exécution avec le code de Claude, alors je l’utilise exactement pour ces cas d’utilisation - les premiers pas. L’inconvénient de Claude est sa version d’essai gratuite très limitée, ce qui fait que je suis toujours prudent dans le choix de mes mots et que j’essaie de prévoir autant d'erreurs potentielles que l'IA pourrait faire. 157 157 - C’est ainsi que tout a commencé : j’ai pris le temps de formuler mon scénario et mon souhait exact dans les fenêtres de contexte limitées d’une machine à mots aléatoires appelée Claude et j’ai immédiatement reçu une implémentation massive du fichier `extension.ts`. Bien sûr, il y avait des différences évidentes entre ma vision et la communication avec ce LLM, alors j’ai dû lui dire une autre fois quelles sont les considérations importantes, et pour pouvoir recevoir davantage de code, j’ai également utilisé mon astuce magique : "Si cela est trop grand pour un fichier, donne-moi simplement l’ensemble de `extension.ts` en plusieurs fichiers, ce qui devrait bien sûr fonctionner." 158 158 - 159 159 - Claude s'est alors lancé dans un long périple. 160 160 - 161 161 - Après quelques difficultés à le maintenir opérationnel, tous mes jetons étaient utilisés et j'ai dû terminer le reste du code moi-même. Néanmoins, j'ai réussi à obtenir une version fonctionnelle, car il ne manquait pas grand-chose, et j'ai immédiatement identifié quelques améliorations qui étaient passées inaperçues jusqu'à maintenant. Étant donné que je devais attendre le rechargement de mes jetons, c'est exactement ce que j'ai fait. 162 162 - 163 163 - Le lendemain matin, la session d'amélioration a commencé, et après deux longues conversations, la fenêtre de contexte était complètement remplie et je ne pouvais même plus envoyer de messages dans le même chat, bien que mes jetons ne soient pas encore expirés. Cependant, tout ce que je voulais accomplir et obtenir de Claude était désormais disponible et je pouvais effectuer des tests dans l'un de mes projets plus importants. Après avoir confirmé et ajusté manuellement quelques morceaux de code, j'étais satisfait pour le moment et j'ai décidé que la première version publique était prête. 164 164 - 165 165 - Après quelques essais et erreurs avec [GitHub Actions](https://github.com/github), j'ai réussi à [configurer le publisher](https://code.visualstudio.com/api/working-with-extensions/publishing-extension#create-a-publisher) pour une extension VS Code. Et après deux versions correctives, j'étais assez satisfait des résultats. 166 166 - 167 167 - ## Le Résultat Final 168 168 - 169 169 - Essayez l'extension vous-même en cliquant sur le bouton ci-dessous. Il reste encore de nombreuses améliorations à apporter, donc si vous êtes intéressé pour aider, n'hésitez pas à contribuer sur [GitHub](https://github.com/trueberryless/terraform-variables-resolution). 170 170 - 171 171 - <LinkButton href="vscode:extension/trueberryless.terraform-variables-resolution">Installer Terraform Variables Resolution</LinkButton> 172 172 - 173 173 - Voici un exemple tiré de [l'explication de Terraform](#what-is-terraform), montrant comment cette extension ajoute visuellement les valeurs des variables dans VS Code : 174 174 - 175 175 - 

-36

src/content/docs/fr/blog/true-tracker.mdx

reviewed

··· 1 1 - --- 2 2 - title: Concevoir une approche de suivi du temps sans compte et sans base de données 3 3 - date: 2024-07-06 4 4 - description: Une application de suivi du temps privée stockant toutes les 5 5 - données dans votre navigateur — pas de comptes, pas de base de données, juste 6 6 - un suivi simple. 7 7 - excerpt: True Tracker est une application minimaliste de suivi du temps 8 8 - construite avec Next.js qui garde toutes les données dans votre navigateur — 9 9 - pas de comptes, pas de base de données, juste une confidentialité et une 10 10 - simplicité totales. 11 11 - tags: 12 12 - - Tool 13 13 - authors: 14 14 - - trueberryless 15 15 - cover: 16 16 - alt: A beautiful cover image with the text "True Tracker" 17 17 - image: ../../../../../public/blog/true-tracker.jpg 18 18 - featured: true 19 19 - 20 20 - --- 21 21 - 22 22 - L'été 2024 a marqué le début d'un nouveau chapitre passionnant pour moi en tant que développeur. Jusqu'à ce moment-là, j'avais principalement travaillé avec Angular, un framework que j'appréciais pour son approche structurée et opinée. Mais j'ai toujours été curieux de découvrir React : cela semblait plus léger, plus flexible, et juste… différent. Lorsque je suis tombé sur Next.js, un framework de [Vercel](https://github.com/vercel) basé sur React qui offrait des fonctionnalités comme le rendu côté serveur et un accent mis sur les performances, j'ai su qu'il était temps d'explorer quelque chose de nouveau. 23 23 - 24 24 - En même temps, j'étais frustré depuis des années par les outils de suivi de sessions comme Toggl. Bien qu'ils soient théoriquement excellents, leurs meilleures fonctionnalités semblaient toujours enfermées derrière des paywalls premium. Comme tout développeur à un moment donné, je me suis dit, *« Pourquoi ne pas simplement créer le mien ? »* C'est pratiquement un rite de passage — chaque programmeur doit au moins une fois dans sa carrière créer une application de tâches ou un tracker. Et ainsi, True Tracker est né. 25 25 - 26 26 - True Tracker n'était pas un tracker comme les autres, cependant. Je voulais faire quelque chose de différent. Pour commencer, je voulais le garder simple : les utilisateurs pouvaient ajouter des projets, les diviser en tâches, et suivre leur temps en sessions. Aucun surplus, aucune fonctionnalité inutile. Mais voici la particularité — True Tracker enregistrerait tout dans le stockage local. Pas de comptes, pas de synchronisation avec le cloud, et surtout, personne (même pas moi) n'aurait accès à vos données. C'est votre tracker, et vos données restent les vôtres. 27 27 - 28 28 - Bien sûr, passer d'Angular à Next.js n'a pas été sans défis. Si je devais donner un seul conseil à quiconque apprend un nouveau framework, ce serait celui-ci : *Lisez la documentation.* Sérieusement, ne la sautez pas. Je ne l'ai pas fait, et cela a conduit au chaos. Next.js était récemment passé au routeur d'application, mais je m'étais obstinément lancé dans la construction avec le routeur de pages. Il s'avère que cela a causé une montagne de problèmes lorsque l'application ne voulait pas se construire correctement parce qu'il n'y avait pas de répertoire `app`. J'ai dû garder un fichier `.gitkeep` vide dans le dossier pour que Git ne le supprime pas et ne casse rien à nouveau. Pas mon moment de gloire. 29 29 - 30 30 - Après deux semaines de codage intensif, de débogage, et d'affrontement avec ce qui semblait être toutes les erreurs imaginables, True Tracker a enfin fonctionné. Je me souviens de cette première exécution réussie — j'avais l'impression de crier *« C'est vivant ! »* dans ma tête. 31 31 - 32 32 - Le projet n'était pas non plus sans ses blagues. Un ami, après avoir vu le branding de l'application, a plaisanté : « Donc... le "true" dans True Tracker ? C'est un peu exagéré, même pour l'image. C'est *trop de vérité !* » Ils n'avaient pas tort, mais je l'ai assumé. Après tout, si vous allez marquer quelque chose, autant y aller à fond. 33 33 - 34 34 - True Tracker est devenu mon tout premier projet Next.js — une application simple mais unique pour suivre le temps sans aucune contrainte. Elle est maintenant en ligne à l'adresse [https://true-tracker.trueberryless.org](https://true-tracker.trueberryless.org/). 35 35 - 36 36 - Le voyage m'a appris plus que simplement comment utiliser Next.js. Il m'a appris à surmonter les défis, à passer d'un framework à un autre, et à embrasser les particularités qui rendent chaque projet unique. True Tracker n'est pas juste une application ; c'est une étape importante — une petite preuve que même les petites idées peuvent avoir un grand impact.

-83

src/content/docs/fr/blog/writing-blogs-is-hard-and-easy.mdx

reviewed

··· 1 1 - --- 2 2 - title: Certains aspects de la création d'un blog sont vraiment faciles, et 3 3 - d'autres extrêmement difficiles ! 4 4 - description: Une introduction conviviale pour les débutants avec quelques jurons 5 5 - sur la manière de commencer à écrire votre propre article de blog. 6 6 - date: 2025-07-08 7 7 - tags: 8 8 - - Mindspace 9 9 - - Education 10 10 - authors: 11 11 - - trueberryless 12 12 - excerpt: <p>Parlons un peu de comment on peut s'améliorer (sans pour autant 13 13 - devenir un maître, personne n'est parfait) dans l'écriture d'un article de 14 14 - blog. Ce ne sont que mes réflexions après que deux gars géniaux de la <a 15 15 - href="https://astro.build/chat">Communauté Astro</a> (<a class="gh-badge" 16 16 - href="https://github.com/jdtjenkins"><img 17 17 - src="https://github.com/jdtjenkins.png" alt="jdtjenkins" />Jacob</a> et <a 18 18 - class="gh-badge" href="https://github.com/louisescher"><img 19 19 - src="https://github.com/louisescher.png" alt="louisescher" />Lou</a>) aient 20 20 - décidé d'écrire des blogs sur la difficulté ou la facilité d'écrire des 21 21 - articles de blog.</p><p>Veuillez lire leurs articles en premier, car celui-ci 22 22 - est une suite aux deux autres :</p><ol><li><a 23 23 - href="https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/">"Pourquoi 24 24 - est-il si difficile d'écrire des articles de blog ?" - Jacob 25 25 - Jenkins</a></li><li><a 26 26 - href="https://lou.gg/blog/why-writing-blogs-isnt-hard">"Pourquoi écrire des 27 27 - blogs n'est pas difficile" - Louis Escher</a></li><li><a 28 28 - href="/blog/writing-blogs-is-hard-and-easy/">"Certains aspects de la création 29 29 - d'un blog sont vraiment faciles, et d'autres extrêmement difficiles !" - Felix 30 30 - Schneider</a></li></ol><p>Après cela, vous aurez complété avec succès cette 31 31 - trilogie géniale sur les articles de blog.</p> 32 32 - cover: 33 33 - alt: A beautiful cover image with the text "Writing Skill" 34 34 - image: ../../../../../public/blog/writing-blogs-is-hard-and-easy.jpg 35 35 - tableOfContents: false 36 36 - 37 37 - --- 38 38 - 39 39 - Après une discussion très intéressante dans le [Discord](https://astro.build/chat) d'[Astro](https://github.com/withastro) - initiée par nul autre que le mainteneur principal [Alex](https://github.com/alexanderniebuhr) lui-même (au fait félicitations pour cette récente réussite 🎉) -, j'ai plaisanté en disant que quelqu'un pourrait écrire un blog sur les raisons pour lesquelles il est si difficile pour beaucoup de gens non seulement d'écrire, mais aussi de gérer un blog dans son ensemble. 40 40 - 41 41 - L'homme qui m'a nommé dans l'équipe de support Astro - [Jacob](https://github.com/jdtjenkins) (au fait, merci beaucoup de m'avoir remarqué dans cette communauté incroyable 😍) - a pris cela au pied de la lettre et a écrit un blog à ce sujet. Pas de blague. Allez voir : [https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/](https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/) D'ailleurs, c'est son tout premier blog (et j'espère que ce ne sera pas le dernier, car j'ai vraiment apprécié son style d'écriture). 42 42 - 43 43 - Notre aide multitâche bien-aimée, blogueur, designer et StudioCMSer - [Lou](https://github.com/louisescher/) (merci d'avance pour tes conseils d'écriture de blog qui m'ont permis d'écrire ceci avec plus de confiance 🤩) - a sauté immédiatement sur cette vague d'enthousiasme (comme les utilisateurs de Twitch pourraient l'appeler) et a publié [sa réponse](https://lou.gg/blog/why-writing-blogs-isnt-hard) en seulement 12 heures !!! Croyez-moi, j'ai vérifié les commits, Lou a littéralement publié 4 minutes avant la fin des 12 heures. 44 44 - 45 45 - Comme je ferai de nombreuses références à leurs blogs, il vaut mieux que vous lisiez les leurs en premier. Puis le mien. Ou peut-être vaut-il mieux lire seulement les leurs, je ne suis pas encore sûr de la tournure que prendra le mien. 46 46 - 47 47 - Mais ce que je peux ~~dire~~ écrire, c'est que le mien se concentrera entièrement sur les compétences en écriture. 48 48 - 49 49 - ## Comment configurer un blog (défis techniques) 50 50 - 51 51 - Bien que ce blog ne traite pas de la façon de créer un blog, le déployer et gérer tout cet aspect technique, je tiens à mentionner que tout le monde peut y arriver. Comme Lou l'a mentionné, en tant que personne non technique, vous pouvez toujours simplement créer un compte sur [Medium](https://medium.com/) ou des alternatives similaires. Si vous avez quelques notions de programmation, vous pouvez laisser un peu plus de place à votre créativité et, grâce au projet génial [Starlight Blog](https://starlight-blog-docs.vercel.app/) de [HiDeoo](https://github.com/HiDeoo), il ne vous faut pas beaucoup de connaissances pour déployer votre propre site Web. De nos jours, avec l'existence de fournisseurs PaaS (Platform as a Service) comme [Netlify](https://www.netlify.com/), qui transforment le déploiement en une aventure "Click-Ops", il n'y a plus aucune excuse pour ne pas publier votre blog à cause de difficultés techniques. 52 52 - 53 53 - ## D'accord, fin des blagues, passons maintenant aux compétences en écriture 54 54 - 55 55 - Mais ce blog devrait se concentrer principalement sur la "compétence d'écriture", comme je l'ai dit, alors continuons sur ce sujet. Ayant moi-même eu des difficultés initiales à écrire des blogs, je peux totalement confirmer ce que Jacob dit : commencer est difficile. Ce n'est pas comme lire le [Guide de démarrage d'Astro](https://docs.astro.build/en/install-and-setup/) où il suffit de suivre les instructions et ensuite demander sur Discord ce que signifie une erreur `InvalidContentEntryDataError` _{veuillez utiliser le fil `#support` si vous le faites 🫶} ([Si vous vous demandez encore](https://docs.astro.build/en/reference/errors/invalid-content-entry-data-error/)). 56 56 - 57 57 - D'un autre côté, l'objectif semble si proche et réalisable. Il suffit d'écrire quelques mots. Qu'est-ce qui est si difficile à écrire ces foutus mots ? En réalité, je ne sais pas moi-même. Pourquoi me le demandez-vous ? La seule chose qui m'a aidé à sortir de la spirale de "Tu-Veux-Écrire-Mais-Chaque-Fois-Tu-Regards-Le-Curseur-Clignotant-Ton-Cerveau-Devient-Vide" (faisons-en le hashtag de la semaine) était le conseil de Lou : ne pas en exiger trop de vous-même dans votre premier blog. Pourquoi voulez-vous un blog parfait pour débuter ? À cause de votre réputation ? Pour que les gens ne pensent pas mal de vous ? Ressentent de la déception ? Honnêtement : c'est des conneries ! Pas seulement parce que votre premier blog ne sera probablement lu par personne (à l'exception remarquée de l'exceptionnel blog de Jacob), mais aussi parce que vous ne faites que vous compliquer la tâche. Mon plafond mental personnel était que je pensais devoir écrire au moins 500 mots pour commencer. Mais qui dit cela ? Honnêtement, si je regarde en arrière maintenant, je pense parfois : "Mince, ça aurait été tellement unique et cool si mon tout premier blog avait été comme un simple tweet", ou encore plus extrême : Un. Mot. Personne ne vous empêchera de publier ce blog : 58 58 - 59 59 - > Bonjour 👋 60 60 - 61 61 - (Désolé si j'ai maintenant pris votre idée géniale,\ 62 62 - et inclus votre article complet ici\ 63 63 - \- wow cool, ça rime) 64 64 - 65 65 - Vous voyez ? Je peux faire ce que je veux, même être un foutu poète (comportement typiquement allemand), et personne ne me jugera. D'accord, peut-être que quelqu'un critiquera ce blog en disant que c'est "une perte de temps, sans signification dans tout ce contenu inutile", mais qui ***s'en soucie*** ? C'est *votre* blog, <span id="comment-reference" class="fragment-highlight">personne ne demande leur avis (à moins que vous ayez une section de commentaires sous votre blog 🙄 *tousse* [Lou](https://lou.gg/blog/why-writing-blogs-isnt-hard#chapter-five-its-the-8th-of-july)</span>). Alors, ne pensez pas à ce que les autres pourraient penser de votre style d'écriture, de votre contenu, de votre usage de la langue ou même si vous faites des fautes de grammaire. Tout cela vous rend humain et chercher à tout rendre parfait est non seulement complètement inutile, mais aussi [difficil](https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/#chapter-1---i-want-it-now). 66 66 - 67 67 - Un autre aspect de l'écriture de blogs n'est pas seulement de commencer, mais aussi de maintenir un flux cohérent, une idée directrice si vous voulez. En tant qu'audience de discours bien écrits, vous remarquez inconsciemment qu'ils étaient bons, satisfaisants, sublimes. Et c'est ce que j'adore dans de tels blogs ou discours. Ils semblent juste parfaits d'une manière ou d'une autre. Mais j'ai moi-même accepté que je ne puisse pas accomplir de telles performances dans mes propres créations. Et je m'en porte beaucoup mieux avec cette acceptation. Parce que le bénéfice d'accepter l'imperfection est d'accomplir les choses. Pas juste à 50 %, pas juste à 90 %. Aller jusqu'au bout. Terminer, à 100 %. Et c'est quelque chose avec lequel beaucoup de gens ont du mal, y compris mon ancien moi - en fait uniquement moi. 68 68 - 69 69 - Mais comme le mentionne Lou, il existe d'autres méthodes simples pour garder un fil conducteur dans tout le post, rester fidèle à l'histoire alors que vos pensées peuvent vagabonder dans votre propre esprit. Mettre toutes ces idées sur papier, ou dans ce cas sur le clavier, peut être un défi, surtout lorsque vous commencez à écrire. Mais il y a une raison pour laquelle nous apprenons de telles compétences à l'école, elles améliorent notre santé cognitive et nos capacités de développement de façon immense. C'est aussi pourquoi je suis tout à fait d'accord avec Lou quand il dit que l'intelligence artificielle ne devrait jamais être utilisée dans le processus d'écriture. Cela n'a tout simplement aucun avantage, ni pour le lecteur, encore moins pour vous. 70 70 - 71 71 - Donc, je ne veux pas répéter ce que dit Lou, mais les points-bullets m'ont beaucoup aidé dans le passé. Ils me donnent simplement un sentiment de structure constante, tandis que mon esprit peut jouer avec diverses idées et théories. Cela garantit que vous revenez toujours à ce que vous vouliez inclure initialement dans votre post. "Et si vous ne pouvez pas trouver de points-bullets ?", pourriez-vous demander. Eh bien, vous pourriez avoir besoin de plus de séances de brainstorming ou tout simplement de prendre des douches. 72 72 - 73 73 - À la fin, voici quelques conseils que je peux vous donner en route : 74 74 - 75 75 - * Développez votre propre style d'écriture, non pas en vous entraînant, mais simplement en écrivant. Tôt ou tard, vous remarquerez les types qui pourraient vous plaire, certaines choses que vous voulez adopter d'autres blogueurs, mais summa summarum ce que vous écrivez sera toujours à vous. Vous le partagez simplement avec le monde. C'est à vous de décider si vous souhaitez utiliser un deux-points ou un tiret ici ou là, mettre plus de points, utiliser le passé, l'impératif, des jurons ou un style plus formel. Toutes ces choses viendront automatiquement ensemble et vous définiront comme un blogueur unique. Et vos lecteurs apprécieront cette individualité plus que vous ne le pensez. 76 76 - 77 77 - * Ne prenez pas trop sur vous. Cela peut sembler facile, mais tout le monde tombe régulièrement dans ce piège. Ou peut-être seulement des gens comme moi, ayant un mélange d'autisme et de perfectionnisme - je ne sais pas. 78 78 - 79 79 - * Bien que cela sonne toujours stupide : Commencez à écrire. Et si cela ne fonctionne pas, commencez à écrire la partie centrale. Parce que je sais que commencer et finir sont toujours difficiles, mais imo la partie centrale coule comme du beurre. 80 80 - 81 81 - * Les blogs ont des côtés faciles et difficiles : C'est ce que dit le titre, mais sachez qu'après avoir écrit tout ça, je me suis rendu compte que je n'ai pas répondu à cette question du tout... Dieu merci, Jacob n'a pas mis un point d'interrogation à la fin de cette suggestion. 🙏 82 82 - 83 83 - Oui, je suppose que c'est tout. Si vous voulez partager vos pensées, laissez-les dans [les commentaires de Lou](https://lou.gg/blog/why-writing-blogs-isnt-hard) car je n'en ai pas.

-17

src/content/docs/fr/index.mdx

reviewed

··· 1 1 - --- 2 2 - title: Pensées Profondes - Aperçu 3 3 - description: Bienvenue sur mon blog. Découvrez cet aperçu minimaliste de tous 4 4 - mes articles de blog. 5 5 - template: splash 6 6 - lastUpdated: false 7 7 - editUrl: false 8 8 - pagefind: false 9 9 - next: 10 10 - label: Detailed view 11 11 - link: /blog 12 12 - 13 13 - --- 14 14 - 15 15 - import IndexPostList from "../../../components/IndexPostList.astro"; 16 16 - 17 17 - <IndexPostList />

-609

translations/de.json

reviewed

··· 1 1 - { 2 2 - "Deep Thoughts - Overview": "Tiefgründige Gedanken - Überblick", 3 3 - "Welcome to my blog. Take a look at this minimalistic overview of all my blog pos.5A38D8470D9F24600ED2": "Willkommen in meinem Blog. Werfen Sie einen Blick auf diesen minimalistisch gestalteten Überblick über alle meine Blogbeiträge.", 4 4 - "Some aspects of creating a blog are really easy, and some are extremely difficul.997EB56977F5D63B1118": "Einige Aspekte der Erstellung eines Blogs sind wirklich einfach, und einige sind extrem schwierig!", 5 5 - "A beginner friendly introduction with some swear words on how to start writing y.BE312646252BC9A86726": "Eine einsteigerfreundliche Einführung mit einigen Schimpfwörtern darüber, wie man anfängt, seinen eigenen Blogbeitrag zu schreiben.", 6 6 - "<p>Talk a little bit about how one can become better (not master by any means, n.8C69E4E4A592E67958BE": "<p>Ein wenig darüber sprechen, wie man besser (bei weitem kein Meister, niemand ist perfekt) im Schreiben von Blogposts sein kann. Dies sind nur meine Gedanken, nachdem zwei großartige Leute aus der <a href=\"https://astro.build/chat\">Astro Community</a> (<a class=\"gh-badge\" href=\"https://github.com/jdtjenkins\"><img src=\"https://github.com/jdtjenkins.png\" alt=\"jdtjenkins\" />Jacob</a> und <a class=\"gh-badge\" href=\"https://github.com/louisescher\"><img src=\"https://github.com/louisescher.png\" alt=\"louisescher\" />Lou</a>) beschlossen haben, Blogs darüber zu schreiben, wie schwer und einfach es ist, Blogposts zu schreiben.</p><p>Bitte lesen Sie zuerst ihre Beiträge, da dies die Folge von beiden ist:</p><ol><li><a href=\"https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/\">\"Warum ist Blogschreiben so schwer?\" - Jacob Jenkins</a></li><li><a href=\"https://lou.gg/blog/why-writing-blogs-isnt-hard\">\"Warum Blogschreiben nicht schwer ist\" - Louis Escher</a></li><li><a href=\"/blog/writing-blogs-is-hard-and-easy/\">\"Einige Aspekte der Erstellung eines Blogs sind wirklich einfach, und einige sind extrem schwierig!\" - Felix Schneider</a></li></ol><p>Nachdem Sie das gelesen haben, haben Sie erfolgreich diese großartige Trilogie von Blogposts über Blogposts abgeschlossen.</p>", 7 7 - "After a very interesting discussion in the [Astro](https://github.com/withastro).48AFE0BF2E41079C33DD": "Nach einer sehr interessanten Diskussion im [Astro](https://github.com/withastro) [Discord](https://astro.build/chat) - gestartet von niemand geringerem als Kernentwickler [Alex](https://github.com/alexanderniebuhr) selbst (übrigens Glückwunsch zu diesem kürzlichen Erfolg 🎉) -, habe ich scherzhaft gesagt, dass jemand einen Blog darüber schreiben könnte, warum es für viele Menschen so schwierig ist, nicht nur zu schreiben, sondern auch einen Blog insgesamt zu pflegen.", 8 8 - "The man who nominated me as an Astro Support Squad - [Jacob](https://github.com/.47D0DB043E57D3E7660B": "Der Mann, der mich als Mitglied des Astro Support Teams vorgeschlagen hat - [Jacob](https://github.com/jdtjenkins) (übrigens vielen Dank, dass du mich in dieser großartigen Community bemerkt hast 😍) - nahm das ziemlich wörtlich und schrieb einen Blog darüber. Kein Scherz. Sehen Sie selbst: [https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/](https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/) Dies ist übrigens sein allererster Blog (und hoffentlich nicht sein letzter, da ich seinen Stil wirklich genossen habe).", 9 9 - "Our beloved everywhere-helper, Blogger, Designer and StudioCMSer - [Lou](https:/.00B9B777867DC593B708": "Unser geliebter Allround-Helfer, Blogger, Designer und StudioCMS-Experte - [Lou](https://github.com/louisescher/) (übrigens danke, dass du mir im Voraus ein paar Tipps zum Blogschreiben gegeben hast, damit ich das hier selbstbewusster schreiben konnte 🤩) - sprang sofort auf diesen großartigen Hype-Zug (wie Twitch-Nutzer es nennen könnten) und veröffentlichte [seinen Anschlussartikel](https://lou.gg/blog/why-writing-blogs-isnt-hard) innerhalb von verdammten 12 Stunden!!! Glauben Sie mir, ich habe die Commits überprüft, Lou hat buchstäblich innerhalb von 4 Minuten nach Ablauf der 12 Stunden-Marke veröffentlicht.", 10 10 - "As I will include many references to both of their blogs, it's best if you read .2E1FCF6AB78B43DC2069": "Da ich viele Verweise auf beide ihrer Blogs einfügen werde, ist es am besten, wenn Sie zuerst ihre lesen. Und dann meinen. Oder vielleicht ist es besser, wenn Sie nur ihre lesen, ich bin mir noch nicht sicher, wie sich meiner entwickeln wird.", 11 11 - "But what I can ~~say~~ write, is that mine will fully focus on just the writing .FC4D0CF3F6082890E1EC": "Aber was ich sagen ~~kann~~ schreiben kann, ist, dass meiner sich vollständig auf die Schreibfähigkeiten konzentrieren wird.", 12 12 - "How to setup a blog (technical challenges)": "Wie man einen Blog einrichtet (technische Herausforderungen)", 13 13 - "Whilst this blog doesn't focus on how to build a blog, deploy it and all this te.460F9C9970BD9D6ED53F": "Auch wenn dieser Blog sich nicht darauf konzentriert, wie man einen Blog erstellt, bereitstellt und all diesen technischen Kram macht, möchte ich erwähnen, dass es jeder schaffen kann. Wie Lou erwähnte, können Sie als Nicht-Techniker immer einfach ein Konto auf [Medium](https://medium.com/) oder ähnlichen Alternativen erstellen. Wenn Sie sich ein wenig mit Programmierung auskennen, können Sie Ihrer Kreativität ein wenig mehr Raum geben. Dank des großartigen [Starlight Blog](https://starlight-blog-docs.vercel.app/) Projekts von [HiDeoo](https://github.com/HiDeoo) benötigen Sie nicht viel Wissen, um Ihre eigene Website bereitzustellen. Heutzutage, wo es auch PaaS (Platform as a Service)-Anbieter wie [Netlify](https://www.netlify.com/) gibt, die den Umgang zu einer Click-Ops Erfahrung machen, gibt es keine Ausrede mehr, warum technische Schwierigkeiten Sie daran hindern sollten, Ihren Blog zu veröffentlichen.", 14 14 - "Okay, jokes aside, now: Writing skills": "Okay, Spaß beiseite, jetzt: Schreibfähigkeiten", 15 15 - "But this blog should focus on mainly on the \"Writing Skill\" as I said, so let's .809BFECD79628A7D6401": "Aber dieser Blog sollte sich hauptsächlich auf die \"Schreibfähigkeiten\" konzentrieren, wie ich sagte, also machen wir dort weiter. Da ich selbst anfangs Schwierigkeiten hatte, Blogs zu schreiben, kann ich Jacob absolut zustimmen, dass der Einstieg schwierig ist. Es ist nicht wie das Durchlesen des [Astro \"Getting started\" Leitfadens](https://docs.astro.build/en/install-and-setup/), bei dem Sie nur den Anweisungen folgen müssen und dann auf Discord fragen, was ein `InvalidContentEntryDataError` bedeutet _{bitte verwenden Sie den `#support`-Thread, wenn Sie das tun 🫶} ([Falls Sie sich immer noch wundern](https://docs.astro.build/en/reference/errors/invalid-content-entry-data-error/)).", 16 16 - "On the other hand, the goal seems so close and doable. Just write some words. Wh.D4B7EBAB98F3D78C25CA": "Auf der anderen Seite erscheint das Ziel so nah und machbar. Schreiben Sie einfach ein paar Worte. Was ist so schwer daran, diese verdammten Worte zu schreiben? Ehrlich gesagt weiß ich es selbst nicht. Warum fragen Sie mich? Das Einzige, was mir geholfen hat, aus der Spirale „Du-willst-schreiben-aber-jedes-Mal-wenn-du-den-blinkenden-Cursor-ansiehst-wird-dein-Hirn-leer“ (machen wir das zum Hashtag der Woche) herauszukommen, war Lous Tipp, am Anfang nicht so viel von sich selbst zu verlangen. Warum möchten Sie mit einem perfekten Blog beginnen? Nur wegen Ihres Rufs? Damit die Leute nichts Falsches von Ihnen denken? Enttäuscht sind? Ehrlich gesagt: Das ist Schwachsinn! Nicht nur, weil Ihr erster Blog sehr wahrscheinlich von niemandem gelesen wird (mit Ausnahme von Jacobs außergewöhnlichem Blog), sondern auch, weil Sie es sich nur schwerer machen. Meine persönliche mentale Grenze war, dass ich dachte, ich müsse mindestens 500 Wörter schreiben, um anzufangen. Aber wer sagt das? Um ehrlich zu sein, wenn ich jetzt zurückblicke, denke ich manchmal: „Mensch, es wäre so einzigartig und cool gewesen, wenn mein erster Blog wie ein normaler Tweet gewesen wäre“, oder noch extremer: Ein. Wort. Niemand wird Sie davon abhalten, diesen Blog zu veröffentlichen:", 17 17 - "Hello 👋": "Hallo 👋", 18 18 - "(Sorry if I now took your awesome idea,\\\nand included your whole blog post in he.2C4E38E676160D62D299": "(Entschuldigung, falls ich jetzt Ihre großartige Idee genommen habe,\\\nund Ihren gesamten Blogbeitrag hier eingefügt habe\\\n\\- wow cool, das reimt sich.)", 19 19 - "See? I can do whatever I want, even being a fricking poet (typical German behavi.CA4561FAF77C16255B02": "Sehen Sie? Ich kann tun, was ich will, sogar ein verdammter Poet sein (typisches deutsches Verhalten), und niemand wird mich verurteilen. Okay, vielleicht wird jemand diesen Blog hassen, weil er „Zeitverschwendung sei, kein Sinn in all diesen nutzlosen Inhalten“, aber wen interessiert’s, ***w e n***? Es ist *Ihr* Blog, <span id=\"comment-reference\" class=\"fragment-highlight\">niemand fragt nach deren Meinungen (es sei denn, Sie haben einen Kommentarbereich unter Ihrem Blog 🙄 *hust* [Lou](https://lou.gg/blog/why-writing-blogs-isnt-hard#chapter-five-its-the-8th-of-july)</span>). Also denken Sie nicht darüber nach, was andere über Ihren Schreibstil, Inhalt, Sprachgebrauch oder sogar Ihre Grammatikfehler denken könnten. All dies macht Sie menschlich, und alles perfekt hinzubekommen, ist nicht nur völlig unnötig, sondern auch [hrad](https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/#chapter-1---i-want-it-now).", 20 20 - "Another part of writing blogs is not just getting started, but the difficulty of.784B95527E097077F971": "Ein weiterer Bestandteil des Blogschreibens ist nicht nur der Einstieg, sondern auch die Schwierigkeit, einen Fluss, einen Gedanken, wenn Sie so wollen, aufrechtzuerhalten. Als Zuhörer gut geschriebener Reden bemerken Sie unterbewusst, dass sie gut waren, erfüllend, erhaben. Und das liebe ich an solchen Blogs oder Reden. Sie fühlen sich einfach irgendwie richtig an. Aber ich selbst habe akzeptiert, dass ich solche Errungenschaften in meiner eigenen kreativen Arbeit nicht erreichen kann. Und mit dieser Akzeptanz komme ich viel besser zurecht. Denn der Vorteil, Unvollkommenheit zu akzeptieren, besteht darin, Dinge fertig zu bekommen. Nicht nur zu 50 %, nicht nur zu 90 %. Fertig. Abgeschlossen, 100 %. Und das ist etwas, womit viele Menschen kämpfen, mich eingeschlossen - tatsächlich nur mich.", 21 21 - "But as Lou mentions, there are other easy methods to keep a common thread in the.18BEED3C4E5876FC95F2": "Aber wie Lou erwähnt, gibt es andere einfache Methoden, um einen roten Faden im gesamten Beitrag beizubehalten, der Geschichte treu zu bleiben, während Gedanken in Ihrem eigenen Kopf herumschweifen könnten. All diese Gedanken zu Papier zu bringen oder in diesem Fall auf die Tastatur, kann eine Herausforderung sein, besonders wenn Sie gerade erst mit dem Schreiben anfangen. Aber es gibt einen Grund, warum wir solche Fähigkeiten in der Schule lernen. Sie verbessern unsere kognitive Gesundheit und Entwicklung erheblich. Deshalb stimme ich Lou auch zu, wenn er sagt, dass KI im Schreibprozess niemals verwendet werden sollte. Es bringt weder für den Leser noch für Sie selbst irgendwelche Vorteile mit sich.", 22 22 - "So I don't want to repeat what Lou says, but bullet points have helped me out a .964F132C02AED6CE1634": "Ich möchte nicht wiederholen, was Lou sagt, aber Aufzählungspunkte haben mir in der Vergangenheit sehr geholfen. Sie geben mir das Gefühl von konstanter Struktur, während mein Geist mit verschiedenen Gedanken und Theorien spielen kann. So stelle ich sicher, dass ich immer wieder zu dem zurückkomme, was ich ursprünglich in meinen Beitrag aufnehmen wollte. „Und wenn Ihnen keine Aufzählungspunkte einfallen?“, könnten Sie fragen. Dann brauchen Sie möglicherweise noch mehr Brainstormings oder einfach Duschen.", 23 23 - "In the end, these are some tips I can give you along the way:": "Am Ende sind hier einige Tipps, die ich Ihnen mit auf den Weg geben kann:", 24 24 - "Develop your own writing style, not by training, but just writing. Sooner or lat.F84CA1A98AD5E28A3F69": "Entwickle deinen eigenen Schreibstil, nicht durch Training, sondern durch Schreiben. Früher oder später wirst du bemerken, welche Arten dir gefallen könnten, einige Dinge, die du von anderen Bloggern übernehmen möchtest, aber summa summarum wird das, was du schreibst, immer deins sein. Du teilst es einfach mit der Welt. Es liegt an dir, ob du hier und da einen Doppelpunkt oder Bindestrich verwenden möchtest, mehr Punkte, die Vergangenheitsform, den Imperativ, Schimpfwörter oder den formelleren Stil. All diese Dinge fügen sich automatisch zusammen und definieren dich als einzigartigen Blogger. Und deine Leser werden diese Individualität mehr schätzen, als du denkst.", 25 25 - "Don't take on too much. Might sound easy, but everyone falls regularly into this.F956D1FB960DB4CD026C": "Nimm dir nicht zu viel vor. Das klingt vielleicht einfach, aber jeder tappt regelmäßig in diese Falle. Oder vielleicht nur Leute wie ich, die eine Mischung aus Autismus und Perfektionismus haben – keine Ahnung.", 26 26 - "Although it always sounds stupid: Start writing. And if it doesn't work, start w.0018355B94E38C7B923C": "Auch wenn es immer dumm klingt: Fang an zu schreiben. Und wenn es nicht funktioniert, fang mit dem Mittelteil an. Denn ich weiß, Anfang und Ende sind immer schwierig, aber meiner Meinung nach flutscht der Mittelteil wie Butter.", 27 27 - "Blogs have easy and hard sides: This is what the title says, but know that I wro.72A914EB55320A9E44E4": "Blogs haben einfache und schwierige Seiten: Das ist, was der Titel sagt, aber wusstest du, dass ich beim Schreiben all dessen gemerkt habe, dass ich diese Frage überhaupt nicht beantwortet habe... Gott sei Dank hat Jacob am Ende dieses Vorschlags kein Fragezeichen gesetzt. 🙏", 28 28 - "Yeah, I guess that's it. If you want to share you thoughts, leave them in [Lou's.D2EA8444C7BDC5361790": "Ja, ich denke, das war's. Wenn du deine Gedanken teilen möchtest, hinterlasse sie in [Lous Kommentaren](https://lou.gg/blog/why-writing-blogs-isnt-hard), weil ich keine habe.", 29 29 - "Vibe-coding a VS Code Extension for Terraform projects": "Vibe-Coding einer VS Code-Erweiterung für Terraform-Projekte", 30 30 - "How I created an extension for Visual Studio Code which adds inline resolutions .94295B1957CBEE7AD731": "Wie ich eine Erweiterung für Visual Studio Code erstellt habe, die Inline-Resolutionen für Variablen in Terraform-Projekten hinzufügt.", 31 31 - "Today, I want to talk about a small VS Code extension that I vibe-coded in a sin.6C43E09851571E31F19E": "Heute möchte ich über eine kleine VS Code-Erweiterung sprechen, die ich an einem einzigen Tag vibe-codiert habe, um die Arbeit mit Terraform zu erleichtern. Zunächst erkläre ich, was Terraform ist, und gehe dann direkt auf die Funktionalität und die Gründe für diese Erweiterung ein. Fühlen Sie sich frei, den ersten Abschnitt zu überspringen, wenn Sie bereits mit Terraform vertraut sind.", 32 32 - "What is Terraform?": "Was ist Terraform?", 33 33 - "Terraform is an infrastructure-as-code (IaC) tool that lets you define your enti.C1E19D8A95C63B18257A": "Terraform ist ein Infrastructure-as-Code (IaC)-Tool, mit dem Sie Ihre gesamte Cloud- oder On-Premises-Infrastruktur als Code definieren können. Die von [HashiCorp](https://github.com/hashicorp) entwickelte Konfigurationssprache wird als HCL (HashiCorp Configuration Language) bezeichnet und bietet eine intuitive, menschenlesbare Syntax. Die *native Syntax* hat den Vorteil, dass die Lernkurve niedrig ist, sie für alle Anbieter konsistent ist und angenehm für Menschen zu lesen und zu schreiben ist, während die JSON-basierte Variante für Maschinen einfacher zu generieren und zu parsen ist.", 34 34 - "What makes Terraform very powerful are two basic features: **variables** and **m.F29F6CFC8D18A39724FE": "Was Terraform sehr leistungsfähig macht, sind zwei grundlegende Funktionen: **Variablen** und **Module**. Variablen ermöglichen es, Ressourcen zu erstellen, bei denen die tatsächlichen Werte von anderswoher eingefügt werden können, und Module gruppieren eine beliebige Anzahl von Ressourcen, was den Vorteil der Wiederverwendbarkeit und Verschachtelung hat. Während beide Funktionen sehr grundlegend erscheinen, bilden sie in Kombination ein Traumteam. Denn die Offenheit von Terraform ermöglicht es, Eingabevariablen für jedes Modul zu definieren und Variablen auch über Ausgaben zu exportieren.", 35 35 - "A simple module is therefore structured like this:": "Ein einfaches Modul ist daher wie folgt aufgebaut:", 36 36 - "azure-resource-group/": "azure-resource-group/", 37 37 - "main.tf": "main.tf", 38 38 - "variables.tf": "variables.tf", 39 39 - "outputs.tf": "outputs.tf", 40 40 - "README.md": "README.md", 41 41 - "All files except `main.tf` are optional (the `README.md` isn’t Terraform-specifi.C0AA6A4205B65B850BDC": "Alle Dateien außer `main.tf` sind optional (die `README.md` ist nicht spezifisch für Terraform), aber ich bevorzuge es, Best Practices zu folgen, daher beinhaltet das Beispiel diese Dateien.", 42 42 - "Let's look at a simple example. Imagine we want to manage a resource group in Az.C7130E93293C5F3835FA": "Schauen wir uns ein einfaches Beispiel an. Nehmen wir an, wir möchten eine Ressourcengruppe in Azure mit Terraform verwalten. In der Datei `variables.tf` definieren wir, welche Eingaben wir innerhalb des Moduls erwarten. Jeder der beiden Blöcke repräsentiert die Variable und die Eigenschaften der Variablen, wie die `description` oder den `type`:", 43 43 - "You might have noticed that the `location` variable also has a `default` propert.98D282B5427579CFCDE8": "Sie haben vielleicht bemerkt, dass die Variable `location` auch eine `default`-Eigenschaft hat, die die Variable optional macht und einen Fallback-Wert bietet, falls keiner angegeben wird. Diese Variablen können dann innerhalb der Datei `main.tf` verwendet werden. Hier definieren wir die tatsächlichen Ressourcen, die wir generieren möchten:", 44 44 - "In this case, we just define our simple resource group, which you can think of a.549C08D1FEC998D18486": "In diesem Fall definieren wir einfach unsere Ressourcengruppe, die Sie sich wie einen Ordner in Azure vorstellen können – eine sehr laienhafte Erklärung. Der letzte Teil, den wir umsetzen können, ist die Datei `outputs.tf`:", 45 45 - "This is very useful if we want to use information like the ID of the resource gr.EB0A3E52AB5C3982D204": "Dies ist sehr nützlich, wenn wir Informationen wie die ID der Ressourcengruppe später in anderen Teilen unseres Terraform-Projekts verwenden möchten.", 46 46 - "As I already wrote, the `README.md` is not actually part of the Terraform defini.E6BDEA6D28A17F85099B": "Wie ich bereits geschrieben habe, ist die `README.md` tatsächlich kein Teil der Terraform-Definitionen, hilft uns jedoch, den Zweck des Moduls zu verstehen:", 47 47 - "As the `README.md` already suggests, we can now use this module to create an Azu.A94748FE0C01D4120745": "Wie die `README.md` bereits andeutet, können wir dieses Modul jetzt verwenden, um eine Azure-Ressourcengruppe überall innerhalb unseres Projekts zu erstellen. Wir müssen nur sicherstellen, dass der Pfad zum Modul-Ordner korrekt ist und Terraform die Dateien `main.tf`, `variables.tf` und `outputs.tf` interpretieren kann. In diesem Fall, da wir die Variable `location` nicht angeben, wird sie auf `\"westeurope\"` gesetzt.", 48 48 - "I hope this section gave you a better basic understanding of what Terraform is a.8558BAB715B916ACA2AE": "Ich hoffe, dieser Abschnitt hat Ihnen ein besseres grundlegendes Verständnis dafür gegeben, was Terraform ist und was Sie damit tun können.", 49 49 - "The tedious task of Terraform": "Die mühsame Aufgabe mit Terraform", 50 50 - "You might have noticed that the `source` field of a module creates an awesome fl.8E968461FC7650C53259": "Sie haben vielleicht bemerkt, dass das Feld `source` eines Moduls eine erstaunliche Flexibilität für das gesamte Projekt schafft, da Sie Module überall definieren und überall im Projekt verwenden können.", 51 51 - "However, this feature also has a huge drawback when it comes to maintainability:.648C608F44A24AAF64E1": "Dieses Feature hat jedoch einen großen Nachteil in Bezug auf die Wartbarkeit: Das Auflösen der tatsächlichen Werte hinter Variablen kann sehr mühsam sein. Während es in diesem einfachen Beispiel leicht zu verwalten scheint, desto größer das Projekt wird und je verschachtelter es ist, desto schwieriger und zeitaufwändiger wird das Verstehen und Anpassen von Terraform-Code. Deshalb habe ich eine Erweiterung erstellt.", 52 52 - "**What should the extension do?** The main goal of the extension is to provide t.8B7ACE467BC6CBF2D8B5": "**Was sollte die Erweiterung tun?** Das Hauptziel der Erweiterung ist es, die tatsächlichen Werte der Variablen überall dort bereitzustellen, wo sie verwendet werden. Wenn ein Modul von mehreren Stellen oder einfach mehreren Malen aufgerufen wird, sollten die Informationen bereitstellen, welcher Anwendungsfall die Variable auf welchen Wert setzt. Wenn Module tief verschachtelt sind, sollten die Werte aufgelöst werden, bis wir die `.tfvars`-Dateien erreichen. Dies sind die Dateien, in denen Sie die fest kodierten Werte für Variablen definieren können.", 53 53 - "How to start a VS Code extension": "So starten Sie eine VS Code-Erweiterung", 54 54 - "Creating the basic template project for a VS Code extension is as easy as runnin.6F4EB3BBD45F5DF0A520": "Das Erstellen des grundlegenden Template-Projekts für eine VS Code-Erweiterung ist so einfach wie das Ausführen dieses Befehls, wenn Sie [Node](https://github.com/nodejs) installiert haben:", 55 55 - "This command temporarily installs the Yeoman (a generator software), and enters .5FDA5DDC43BF09081006": "Dieser Befehl installiert temporär Yeoman (eine Generator-Software) und öffnet einen interaktiven Modus, in dem einige Fragen beantwortet werden müssen, wie der Projektname, der Typ und die Beschreibung. Im folgenden Block sehen Sie alle Fragen und Standardantworten:", 56 56 - "For further information regarding VS Code extensions I want to link to [the offi.B0448C131D881366A635": "Weitere Informationen zu VS Code-Erweiterungen möchte ich im [offiziellen Dokumentation](https://code.visualstudio.com/api/get-started/your-first-extension) verlinken, da sie immer aktueller im Gegensatz zu meinen Erklärungen hier ist.", 57 57 - "3… 2… 1… Vibe-Coding!": "3… 2… 1… Vibe-Coding!", 58 58 - "I like to start new projects by asking [ChatGPT](https://github.com/openai) for .FD250EAE4277C6E99E2B": "Ich beginne gerne neue Projekte, indem ich [ChatGPT](https://github.com/openai) nach allgemeinen technischen Fragen frage wie:", 59 59 - "How would you suggest achieving such a project?": "Wie würden Sie vorschlagen, ein solches Projekt umzusetzen?", 60 60 - "How long do you estimate it will take me?": "Wie lange schätzen Sie, dass es dauern wird?", 61 61 - "How difficult will it be?": "Wie schwierig wird es sein?", 62 62 - "Brainstorming with AI bots seems like a very sensible way to get a better overvi.59F0199CCC0E7F65A0D7": "Das Brainstorming mit KI-Bots scheint ein sehr sinnvoller Weg zu sein, um sich einen besseren Überblick über neue Projekte zu verschaffen, insbesondere wenn man in völlig neue Gewässer eintaucht. Eine VS Code-Erweiterung zu erstellen, war genau ein solcher Anwendungsfall, da ich noch nie zuvor etwas für VS Code oder eine andere IDE erstellt hatte. Nach dieser anfänglichen Brainstorming-Phase bevorzuge ich [Claude](https://github.com/anthropics), um alle notwendigen Dateien für eine solche Erweiterung zu programmieren, da dieser KI-Bot meiner Erfahrung nach in der Lage ist, Code wirklich präzise umzusetzen. Ich habe kaum Fehler oder Laufzeitprobleme mit Claude-Code erlebt, sodass ich ihn genau für solche Anwendungsfälle nutze – Initialstarter. Der Nachteil von Claude ist sein sehr begrenztes kostenloses Testangebot, weshalb ich beim Formulieren meiner Worte immer vorsichtig bin und versuche, im Voraus an so viele mögliche Fehler der KI zu denken wie möglich. So begann es also: Ich nahm mir etwas Zeit, um mein genaues Szenario und meinen Wunsch in die begrenzten Kontextfenster einer zufälligen Wortmaschine namens Claude zu formulieren und erhielt sofort eine riesige `extension.ts`-Implementierung. Natürlich gab es offensichtliche Unterschiede zwischen meiner Vision und der Kommunikation mit diesem LLM, weshalb ich ihm ein weiteres Mal erklären musste, was die wichtigen Überlegungen sind, und um weiteren Code zu erhalten, nutzte ich auch meinen magischen Trick: \"Wenn das zu groß für eine Datei ist, geben Sie mir einfach die gesamte `extension.ts` in mehreren Dateien, die natürlich funktionieren sollte.\"", 63 63 - "Claude then went on a long journey.": "Claude begab sich dann auf eine lange Reise.", 64 64 - "After some struggling to keep it going my tokens were all used and I had to figu.2D452B77249C8430A480": "Nach einigen Kämpfen, es weiter am Laufen zu halten, waren meine Tokens aufgebraucht und ich musste den verbleibenden Code selbst herausfinden. Dennoch gelang es mir, eine laufende Version zu erstellen, da nicht viel fehlte, und bemerkte sofort einige Verbesserungen, die bislang unbemerkt geblieben waren. Da ich auf die Wiederauffüllung meiner Tokens warten musste, tat ich genau das.", 65 65 - "The next morning the improvement session began, and after two long conversations.D0F806E5F02FCADFF975": "Am nächsten Morgen begann die Verbesserungssitzung, und nach zwei langen Gesprächen war das Kontextfenster komplett gefüllt, und ich konnte keine Nachrichten mehr im selben Chat senden, obwohl meine Tokens noch nicht abgelaufen waren. Doch alles, was ich von Claude erreichen und erhalten wollte, war nun verfügbar, und ich konnte einige Tests in einem meiner größeren Projekte durchführen. Nachdem ich den Code manuell bestätigt und angepasst hatte, war ich zunächst zufrieden und entschied, dass die erste öffentliche Version fertig war.", 66 66 - "Some trial and error with [GitHub Actions](https://github.com/github) later, I m.B1A6CFA9C8791F3B0E65": "Nach einigem Ausprobieren mit [GitHub Actions](https://github.com/github) gelang es mir, den [Publisher für eine VS Code-Erweiterung einzurichten](https://code.visualstudio.com/api/working-with-extensions/publishing-extension#create-a-publisher). Und zwei Patch-Versionen später war ich ziemlich zufrieden mit den Ergebnissen.", 67 67 - "The Final Result": "Das Endergebnis", 68 68 - "Try out the extension yourself by clicking on the button below. There are still .53D329C6D712DEFF0967": "Probieren Sie die Erweiterung selbst aus, indem Sie auf den unten stehenden Button klicken. Es gibt noch viele Verbesserungsmöglichkeiten, also zögern Sie nicht, mitzuhelfen, wenn Sie interessiert sind. Sie können dies gerne auf [GitHub](https://github.com/trueberryless/terraform-variables-resolution) tun.", 69 69 - "Install Terraform Variables Resolution": "Terraform Variables Resolution installieren", 70 70 - "Here you can see the example from [the Terraform explanation](#what-is-terraform.772358BC6F4987371F60": "Hier sehen Sie das Beispiel aus [der Terraform-Erklärung](#what-is-terraform), das zeigt, wie diese Erweiterung die Werte der Variablen visuell in VS Code hinzufügt:", 71 71 - "![Terraform Variables Resolution Example](../../../assets/terraform/terraform-va.94526691E47AD9D882F5": "Beispiel für Terraform Variables Resolution", 72 72 - "How I Built a GitHub Profile README That Shouldn’t Exist (But It Does)": "Wie ich ein GitHub-Profil-README gebaut habe, das nicht existieren sollte (aber es tut)", 73 73 - "A deep dive into the technical challenges and solutions behind my GitHub profile.8493E1B06B7E9BE16E95": "Ein tiefgehender Einblick in die technischen Herausforderungen und Lösungen hinter meinem GitHub-Profil-README, mit Schwerpunkt auf SVG-Manipulation, Automatisierung und einem dynamischen Bento-Grid.", 74 74 - "Creating a standout <a class=\"gh-badge\" href=\"https://github.com/github\"><img sr.EC7EC3169C3D5076914B": "Ein herausragendes <a class=\"gh-badge\" href=\"https://github.com/github\"><img src=\"https://github.com/github.png\" alt=\"github\" />GitHub</a>-Profil-README zu erstellen, bedeutet nicht nur, ein paar Abzeichen hinzuzufügen — es geht darum, technische Grenzen zu überwinden. In diesem tiefgehenden Artikel erkunde ich grundlegende SVG-Manipulation, HTML-zu-SVG-Konvertierung, Inline-Animationen und vollständige Automatisierung mit GitHub Actions, um eines der technisch fortschrittlichsten GitHub-READMEs zu bauen. Von einem dynamischen Bento-Grid, das sich alle 5 Minuten aktualisiert, bis hin zur Einbettung von Live-SVGs ohne externe Anfragen – dieses Projekt hat mein Profil in eine lebendige, sich selbst aktualisierende Präsentation meiner Arbeit verwandelt. Möchtest du wissen, wie ich das gemacht habe? Lass es uns aufschlüsseln. 🚀", 75 75 - "Read the more formal story [here](https://trueberryless.org/work/github-profile-.5BCD9DBA0F2103014075": "Lies die formellere Geschichte [hier](https://trueberryless.org/work/github-profile-readme/)", 76 76 - "The Beginning: A README That Looked Like a Wikipedia Dump": "Der Anfang: Ein README, das wie ein Wikipedia-Dump aussah", 77 77 - "Every great story starts with a problem, and mine was simple: my [GitHub profile.3713BD43F2A1A91BFB7E": "Jede großartige Geschichte beginnt mit einem Problem, und meines war einfach: Mein [GitHub-Profil](https://github.com/trueberryless) README war ein komplettes Chaos. Es war lang. Es hatte zu viel Text. Es war überfüllt mit Abzeichen — so viele, dass es aussah, als würde ich jede mögliche Internet-Trophäe horten. Hackathons, GitHub-Beiträge, Astro, roadmap.sh — wenn es ein Abzeichen gab, hatte ich es.", 78 78 - "At first, I thought this was fine. It showed everything about me, right? But one.773B7C308644FEDA7081": "Am Anfang dachte ich, das wäre in Ordnung. Es zeigte schließlich alles über mich, oder? Aber eines Tages sah ich es an und stellte fest:", 79 79 - "This is not stylish. This is a cluttered disaster.": "Das ist nicht stilvoll. Das ist ein überladenes Desaster.", 80 80 - "I needed something new. Something clean. Something visually striking. I wanted a.C82835C3D13A6981B63B": "Ich brauchte etwas Neues. Etwas Sauberes. Etwas Visuell Beeindruckendes. Ich wollte ein **Bento-Grid**, das die Leute dazu bringt, stehen zu bleiben und es zu bewundern, anstatt verwirrt daran vorbeizuscrollen. Ein Design, das so gut ausgeführt ist, dass jeder, der es sieht, sofort eines für sich haben wollte.", 81 81 - "That was the dream. Now I just had to make it real.": "Das war der Traum. Jetzt musste ich ihn nur noch realisieren.", 82 82 - "Phase 1: The HTML Dream (and Markdown Nightmare)": "Phase 1: Der HTML-Traum (und Markdown-Albtraum)", 83 83 - "The first step was simple: mock up my perfect profile in HTML and CSS. And let m.EEFE6C2742301B518D46": "Der erste Schritt war einfach: Entwerfen meines perfekten Profils in HTML und CSS. Und ich kann dir sagen, es sah unglaublich aus. Es hatte das perfekte Layout, sanfte Animationen und genau das richtige Gleichgewicht zwischen Inhalt und Raum. Dann kam die Realität. Dies musste innerhalb von *GitHub-Flavored Markdown* funktionieren. Kein Problem, oder? Markdown unterstützt HTML! Also kopierte ich mein wunderschönes HTML in mein README und drückte Speichern.", 84 84 - "[GitHub](https://github.com/github): *Absolutely not.*": "[GitHub](https://github.com/github): *Absolut nicht.*", 85 85 - "GitHub’s Markdown [strips out a not a huge number of HTML tags, but important on.8ADCE02DB7CC7739FAD2": "GitHubs Markdown [entfernt zwar keine große Anzahl von HTML-Tags, aber wichtige](https://github.github.com/gfm/#disallowed-raw-html-extension). Aus Sicherheitsgründen natürlich (und ich respektiere das vollkommen, GitHub, wirklich ❤️), aber das bedeutete, dass mein perfektes Design komplett **unbrauchbar** war.", 86 86 - "I tried tweaking it. Replacing unsupported tags with ones that worked. Maybe I c.14452FE82B6AC0DB8958": "Ich versuchte, es anzupassen. Ungestützte Tags durch solche zu ersetzen, die funktionierten. Vielleicht könnte ich etwas davon retten? *Nein*. Die Einschränkungen von Markdown bedeuteten, dass mein Traum-Layout unmöglich war.", 87 87 - "Phase 2: The \"Just Use a Python Script\" Cope": "Phase 2: Der \"Einfach Ein Python-Skript Benutzen\"-Kompromiss", 88 88 - "When in doubt, automate. If I couldn’t get my HTML in directly, maybe I could ge.FD6C9ADF71816E0E5B49": "Wenn man unsicher ist, automatisieren. Wenn ich mein HTML nicht direkt einfügen konnte, konnte ich vielleicht etwas Dynamisches mit einem Skript erstellen? Also bastelte ich ein Python-Skript, das mein neuestes GitHub-Repository abruft und in mein README einfügt. Hier einfach ein paar zufällige Bytes, die manche als Python-Code bezeichnen:", 89 89 - "This seemed like a step in the right direction. It was automated. It was functio.D20A833F97288BD3E73B": "Das schien ein Schritt in die richtige Richtung zu sein. Es war automatisiert. Es funktionierte. Aber es löste mein eigentliches Problem nicht. 😢", 90 90 - "This wasn’t about dynamic content — it was about *design*. And no amount of Pyth.8C914CE49CA59FC373EC": "Es ging nicht um dynamischen Inhalt — es ging um *Design*. Und kein Skript der Welt konnte Markdown schön machen.", 91 91 - "Phase 3: \"Fine, I'll Just Use a Screenshot\" (Rock Bottom)": "Phase 3: \"Na Gut, Ich Nehme Einfach Einen Screenshot\" (Tiefpunkt)", 92 92 - "At this point, I was desperate. I considered the unthinkable: *just take a scree.A573BC6FDCB7D404B86F": "Zu diesem Zeitpunkt war ich verzweifelt. Ich dachte an das Undenkbare: *Einfach einen Screenshot vom HTML machen und ihn als Bild in mein README einfügen.* Es war ein brutaler Ansatz. Es war faul. Es war... effektiv?", 93 93 - "For a moment, I actually thought about doing it. But I knew deep down that I wou.F11BA1015DB80A5D8D2D": "Einen Moment lang dachte ich tatsächlich darüber nach, es zu tun. Aber tief im Inneren wusste ich, dass ich mir nie verzeihen würde, wenn ich das als endgültige Lösung akzeptieren würde.", 94 94 - "Just for the reference, I would have used [Puppeteer](https://www.npmjs.com/pack.7C033B35BC935C314B6E": "Zur Referenz hätte ich [Puppeteer](https://www.npmjs.com/package/puppeteer) und [FFmpeg](https://www.ffmpeg.org/) verwendet — keine Ahnung, was diese Tools sind.", 95 95 - "Phase 4: Enter SVG (The Light at the End of the Tunnel)": "Phase 4: SVGs treten auf den Plan (Das Licht am Ende des Tunnels)", 96 96 - "I abandoned the cursed screenshot plan and looked for something more flexible.": "Ich ließ den verfluchten Screenshot-Plan fallen und suchte nach etwas Flexiblerem.", 97 97 - "SVGs.": "SVGs.", 98 98 - "SVGs could scale, they supported both text and images, and — most importantly — .F259141963EA4A11F694": "SVGs konnten skalieren, sie unterstützten sowohl Text als auch Bilder, und — was am wichtigsten war — sie konnten **HTML innerhalb von ihnen einbetten**.", 99 99 - "So I tried something like this:": "Also versuchte ich etwas wie das:", 100 100 - "Promising! This could actually work!": "Vielversprechend! Das könnte tatsächlich funktionieren!", 101 101 - "Then I got busy with other things, forgot to debug it, and never returned to thi.9BEE5D08ED4C8C9B33DD": "Dann wurde ich mit anderen Dingen beschäftigt, vergaß, es zu debuggen, und kehrte nie zu dieser Idee zurück.", 102 102 - "": "Eine gute Idee verwerfen", 103 103 - "Phase 5: SVGs Within SVGs Within SVGs (Inception Level 100)": "Phase 5: SVGs in SVGs in SVGs (Inception-Stufe 100)", 104 104 - "When I came back to the project, I was **determined** to make it work.": "Als ich zum Projekt zurückkehrte, war ich **entschlossen**, es zum Laufen zu bringen.", 105 105 - "I realised that if I couldn’t directly embed HTML into Markdown, I could fake it.8993D07A86C6FB209386": "Ich stellte fest, dass ich, wenn ich HTML nicht direkt in Markdown einbetten konnte, es durch verschachtelte SVGs vortäuschen konnte. (Übrigens ist das massiv vereinfacht; der eigentliche Prozess dauerte Tage, die sich wie Wochen anfühlten, wenn nicht Monate, aber ich weiß, dass du sowieso nichts davon lesen würdest, also wen interessiert's?)", 106 106 - "And then, after hours of research, I stumbled across a life-changing Stack Overf.B19E66FB6CDC38EB7F45": "Und dann, nach Stunden der Recherche, stieß ich auf eine lebensverändernde Stack Overflow-Antwort:", 107 107 - "This lead me to the current solution:": "Das führte mich zur aktuellen Lösung:", 108 108 - "Convert my HTML layout to SVG.": "Mein HTML-Layout nach SVG konvertieren.", 109 109 - "Encode all images in **Base64** (because GitHub Markdown won’t load external ima.6BA37AFF26936D15AD36": "Alle Bilder in **Base64** codieren (da GitHub-Markdown keine externen Bilder in einem SVG mit HTML lädt).", 110 110 - "Inline dynamic SVGs (like my GitHub stats, Spotify status, etc.).": "Dynamische SVGs einbetten (wie meine GitHub-Statistiken, Spotify-Status usw.).", 111 111 - "Automate everything with **GitHub Actions**.": "Alles mit **GitHub Actions** automatisieren.", 112 112 - "The Grand Finale: The Ultimate GitHub Profile README": "Das große Finale: Das ultimative GitHub-Profil-README", 113 113 - "A sleek Bento Grid layout, perfectly structured in SVG.": "Ein schlankes Bento-Grid-Layout, perfekt in SVG strukturiert.", 114 114 - "A live-updating Spotify status, inlined as an SVG.": "Ein live-aktualisierender Spotify-Status, in SVG eingebettet.", 115 115 - "GitHub stats, dynamically inserted via automation.": "GitHub-Statistiken, dynamisch über Automatisierung eingefügt.", 116 116 - "Fully responsive, fully scalable, and fully insane to build.": "Vollständig responsiv, vollständig skalierbar und vollkommen verrückt zu erstellen.", 117 117 - "It updates itself every 5 minutes, runs completely on GitHub Actions, and doesn’.D6DD34ED3B85DAE2F120": "Es aktualisiert sich alle 5 Minuten selbst, läuft vollständig über GitHub Actions und ist unabhängig von externen Diensten. Es ist wunderschön. Es ist effizient. Und am wichtigsten, es ist technisch absurd auf die beste Art und Weise.", 118 118 - "Take a look at a specific example of the final results at some point back in tim.096EC0AF4A7E3D30CE29": "Schauen Sie sich ein konkretes Beispiel der Endergebnisse irgendwann in der Vergangenheit an.", 119 119 - "Isn't that bad compared to the [old README.md](https://github.com/trueberryless/.E3E5E0072DF705843179": "Das ist nicht schlecht im Vergleich zum [alten README.md](https://github.com/trueberryless/trueberryless/blob/5dce4ad0033b00829f8ec3756827057017447a65/README.md). Und kommentiere nicht, warum ich K-Pop höre! Es ist besser, als du denkst, glaub mir.", 120 120 - "Check out the live version on my GitHub [trueberryless](https://github.com/trueb.4FFADA956CF12B9EFE9F": "Sieh dir die Live-Version auf meinem GitHub [trueberryless](https://github.com/trueberryless) an — falls ich beschlossen habe, sie zu behalten... — und folge mir, wenn du schon da bist, falls dir das Lesen gefallen hat! ❤️", 121 121 - "Final Thoughts: Was It Worth It?": "Abschließende Gedanken: War es das wert?", 122 122 - "Absolutely.": "Absolut.", 123 123 - "This journey was frustrating, time-consuming, and filled with more roadblocks th.9E6BE12D4EDD580594EA": "Diese Reise war frustrierend, zeitaufwendig und voller Hindernisse, mit denen ich nie gerechnet hätte. Aber ich habe so viel über SVGs, die Einschränkungen von Markdown, GitHub Actions und Automatisierung gelernt.", 124 124 - "Would I do it again? Definitely.": "Würde ich es wieder tun? Definitiv.", 125 125 - "Would I recommend it? Only if you have way too much patience. 😅": "Würde ich es empfehlen? Nur, wenn du eine Menge Geduld hast. 😅", 126 126 - "But in the end, I created a [GitHub](https://github.com/github) profile README t.2B7EC6933681A24E2F33": "Aber am Ende habe ich ein [GitHub](https://github.com/github)-Profil-README erstellt, das *nicht existieren sollte* — aber es existiert. Und ich liebe es.", 127 127 - "A short history of Starlight Sidebar Topics plugins": "Eine kurze Geschichte der Starlight Sidebar Topics Plugins", 128 128 - "In this blog post, I'll show you the evolution of Starlight plugins with a case .4AA6D9FADD1A6BE13985": "In diesem Blogbeitrag zeige ich Ihnen die Entwicklung der Starlight-Plugins anhand einer Fallstudie zum Starlight Sidebar Topics Plugin.", 129 129 - "In this post, I'll show you the evolution of <a class=\"gh-badge\" href=\"https://g.995EB19ECCFE1867C83C": "In diesem Beitrag zeige ich Ihnen die Entwicklung der <a class=\"gh-badge\" href=\"https://github.com/withastro/starlight\"><img src=\"/starlight.png\" alt=\"Starlight\" />Starlight</a>-Plugins anhand einer Fallstudie des [Starlight Sidebar Topics](https://github.com/hideoo/starlight-sidebar-topics) Plugins. Seien Sie darauf gefasst, beeindruckende Fakten über Menschen und Code rund um Starlight zu entdecken.", 130 130 - "Maybe you have heard about this cool documentation framework before. I talk abou.5A104B8E7F80C4B25128": "Vielleicht haben Sie schon einmal von diesem coolen Dokumentationsframework gehört. Ich spreche oft darüber und benutze es regelmäßig. Nicht nur, weil ich ein aktiver Mitwirkender bin, sondern auch, weil [Starlight](https://starlight.astro.build) mir einfach ans Herz gewachsen ist. Seine Funktionen: Einfachheit und Minimalismus, aber alles, was man braucht. Seine Leistung: [Schneller als 98 % der anderen Websites](https://www.websitecarbon.com/website/starlight-astro-build-getting-started/). Seine Barrierefreiheit: Keine Frage!", 131 131 - "The Creation": "Die Entstehung", 132 132 - "However, one thing that's objectively missing in my opinion is a granular way of.DBB9BD2B7C991AECF1AF": "Eine Sache, die aus meiner Sicht objektiv fehlt, ist eine granulare Möglichkeit, breite Themen in Ihrer Dokumentation zu trennen. Und ich bin nicht allein mit dieser subjektiv allgemein akzeptierten Meinung. [HiDeoo](https://github.com/HiDeoo) ist nicht nur einer der aktivsten Maintainer des Projekts, sondern auch der Autor der meisten und meiner Meinung nach besten Plugins, die man für Starlight finden kann. Und auch ihnen fiel diese fehlende Nischenfunktionalität bei Themen auf. Deshalb haben sie im Oktober 2024, also relativ früh, das [Starlight Sidebar Topics](https://github.com/hideoo/starlight-sidebar-topics) Plugin erstellt, mit dem man eine Seitenleiste mit Themen erstellen kann. Lesen Sie mehr über die Funktionen des Plugins in [der Dokumentation](https://starlight-sidebar-topics.trueberryless.org/).", 133 133 - "The one thing that bothered me personally in the early days of the plugin was th.6F5F49BB9B5B06675F60": "Das Einzige, was mich in den frühen Tagen des Plugins persönlich gestört hat, war die Art und Weise, wie die Themen in der Seitenleiste angezeigt wurden. Es verwendet - im Gegensatz zu der von mir vorgestellten Lösung - keine Art Dropdown-Menü zum Wechseln zwischen Themen, sondern zeigt stattdessen immer alle Themen an. Diese Designentscheidung war, wie [HiDeoo klar hervorhebt](https://github.com/HiDeoo/starlight-sidebar-topics/issues/2#issuecomment-2410196392), sehr bewusst und nicht ohne Grund: Alle Themen sollen auf einmal sichtbar sein. Bewiesen durch die [Astro](https://github.com/withastro) Dokumentation selbst ([Chris Swithinbank](https://github.com/delucis) implementierte die [\"Tab-Leiste\"](https://github.com/withastro/docs/pull/9890) für die Astro v5 Dokumentation später im selben Monat), hat dieser Ansatz definitiv viele Vorteile gegenüber einem Dropdown-Menü. Dennoch war ich weiterhin mit diesem Design unzufrieden, und so habe ich meine eigene Version erstellt.", 134 134 - "Copying and pasting was my strength when it came to building a new Starlight plu.860638CCB2BA61F003E9": "Kopieren und Einfügen war meine Stärke, wenn es darum ging, ein neues Starlight-Plugin für die Community zu erstellen. Und so habe ich es einfach getan. Ich nahm das Starlight Sidebar Topics Plugin als Ausgangspunkt und musste nur das `Topics.astro`-Komponente anpassen, das das HTML für die Darstellung der Themen in der Seitenleiste enthält. Nachdem ich einige Zeit damit gekämpft hatte, ein zufriedenstellendes Dropdown-Menü zu implementieren, das nur aus HTML und CSS bestand, aber auch optisch ansprechend war (Entschuldigung für das Eigenlob, ich bin einfach stolz auf mich), habe ich endlich eine Lösung gefunden, mit der ich sehr zufrieden bin, und habe dieses neue Plugin unter dem Namen [Starlight Sidebar Topics Dropdown](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown) veröffentlicht - wie originell.", 135 135 - "The Adaptation": "Die Anpassung", 136 136 - "You might think that this story is now over because everyone could just use the .B22BDA5C191E4AEC54CE": "Man könnte denken, dass diese Geschichte jetzt zu Ende ist, weil jeder einfach die Variante verwenden könnte, die er möchte, und jeder glücklich ist. Aber Starlight hat sich kontinuierlich verbessert, und etwa drei Monate später, am 15. Februar, wie ein [Geburtstagsgeschenk](https://trueberryless.org/work/20th-birthday/) für mich, kam die langersehnte Hinzufügung von Routen-Daten in Starlight mit der Veröffentlichung von [v0.32](https://github.com/withastro/starlight/releases/tag/@astrojs/starlight@0.32.0). Diese scheinbar kleine Ergänzung eröffnete so viele Möglichkeiten, die ich selbst nie vorausgesehen habe. HiDeoo war erneut die treibende Inspirationsquelle für Plugin-Autoren und nutzte diese neue Funktionalität voll aus. Es dauerte nur zwei Tage, um [über 11 Plugins an die neueste Starlight-Version anzupassen](https://bsky.app/profile/hideoo.dev/post/3liffpudc5c2b), und später verbesserten und überarbeiteten sie viel vom Code, um diese leistungsstarke Funktion noch besser zu nutzen.", 137 137 - "And so comes the day when HiDeoo contacts me to tell me that the Starlight Sideb.CB4E9F542FB4DC96204E": "Und so kam der Tag, an dem HiDeoo mich kontaktierte, um mir mitzuteilen, dass das Starlight Sidebar Topics Plugin nun die neue Routen-Daten-Funktion von Starlight nutzt. Zuerst verstand ich nicht ganz, welchen Nutzen diese Implementierungsänderungen haben würden, aber dann nahm sich HiDeoo die Zeit, mir zu erklären, dass ich das Starlight Sidebar Topics Dropdown Plugin jetzt in eine einfache Komponente umwandeln könnte, die die Routen-Daten aus seinem Plugin verwendet. Intuitiv war ich gegen diese clevere Idee, weil es sich anfühlte, als würde mein einziges Plugin, das etwas Popularität erlangt hatte, in eine nutzlose Komponente verwandelt. Ich hätte nicht weiter von der Wahrheit entfernt sein können.", 138 138 - "The Union": "Die Vereinigung", 139 139 - "Eventually, I decided to refactor my plugin into a component - this refactoring .4324540ABE36305F27C5": "Schließlich beschloss ich, mein Plugin in eine Komponente umzuwandeln - diese Umstrukturierung eliminierte beiläufig genau [1210 Zeilen Code und fügte 68 Änderungsprotokollzeilen hinzu](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/pull/40) - und ich bemerkte, wie wenig Code es jetzt erforderte, um die `Topics.astro` Liste aus der Perspektive eines Nutzers in ein Dropdown zu verwandeln. Ich war zuversichtlich, dass dies wirklich die richtige Richtung für die ~~Plugin~~ Komponente war. Also aktualisierte ich die gesamte Dokumentation - eher: löschte über 200 Zeilen Text (fühlt sich gut an) - und veröffentlichte die neue [Version 0.5](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/releases/tag/starlight-sidebar-topics-dropdown%400.5.0).", 140 140 - "Now you might wonder how such mature plugins could still improve over time. To b.8F9AABD213A178EFB11C": "Jetzt fragen Sie sich vielleicht, wie solch ausgereifte Plugins sich noch weiter verbessern können. Um ehrlich zu sein, ich selbst war sehr überrascht, als HiDeoo mir beiläufig eine Bombe in meine Discord-DMs fallen ließ. Seine Idee war und ist immer noch genial. Andernfalls würde ich nicht einmal mehr an dieses *Thema* denken. Aber hier bin ich und schreibe satte 800 Worte, nur um Sie auf das kommende vorzubereiten. Trommelwirbel bitte! Anschnallen! Diese Aussage von HiDeoo wird Sie umhauen:", 141 141 - "\"One could have something like the default built-in list on a desktop view, and .D9D8BC0B8C5FADE63015": "„Man könnte auf einer Desktop-Ansicht etwas wie die standardmäßig eingebaute Liste und auf mobilen Geräten Ihre Komponente oder so etwas verwenden 🧠“ — HiDeoo, 21/03/2025 09:54", 142 142 - "Profound. Timeless. Golden.": "Tiefgründig. Zeitlos. Golden.", 143 143 - "And that single, beautiful spark of an idea? It’s precisely what I’ll guide you .D5B772B8E2ED479D7F54": "Und diese einzige, wunderschöne Idee? Genau darüber werde ich Ihnen im Beitrag [„Starlight Topics Dropdown und List zusammen“](/blog/starlight-dropdown-and-list-together/) berichten.", 144 144 - "How to make your Starlight sidebar items look better": "Wie Sie die Elemente Ihrer Starlight-Seitenleiste verbessern können", 145 145 - "In this blog post, we'll take a look at how small changes can make a big differe.710EB546A7825319B5BD": "In diesem Blogbeitrag werfen wir einen Blick darauf, wie kleine Änderungen bei Leerzeichen, Schriftgrößen, -gewichten und -farben in Ihrer Starlight-Seitenleiste einen großen Unterschied machen können.", 146 146 - "In this blog post, we'll take a look at how small changes can make a big differe.91CB4D1869F959776162": "In diesem Blogbeitrag werfen wir einen Blick darauf, wie kleine Änderungen bei Leerzeichen in Ihrer <a class=\"gh-badge\" href=\"https://github.com/withastro/starlight\"><img src=\"/starlight.png\" alt=\"Starlight\" />Starlight</a>-Seitenleiste einen großen Unterschied machen können.", 147 147 - "Have you ever wondered why your [Starlight][starlight] sidebar doesn't look that.1641BC1FAEE439920C90": "Haben Sie sich jemals gefragt, warum Ihre [Starlight][starlight]-Seitenleiste nicht so ansprechend aussieht? Wussten Sie, wie wichtig der Platz zwischen den Elementen in Ihrer Seitenleiste unbewusst ist? Die Schriftgröße, das Gewicht und kleine Farbabstufungen? In diesem Leitfaden werfen wir einen Blick darauf, wie Sie das Erscheinungsbild Ihrer Starlight-Seitenleiste mit ein paar schnellen und einfachen Schritten anpassen können.", 148 148 - "Prerequisites": "Voraussetzungen", 149 149 - "First, you need to [set up your Starlight site][starlight-getting-started]. Afte.DF558576AB082588D034": "Zuerst müssen Sie Ihre [Starlight-Seite einrichten][starlight-getting-started]. Anschließend bietet Starlight einen [Leitfaden zur Anpassung von Stilen, die auf Ihre Starlight-Seite angewendet werden][starlight-css], und genau dieses Feature werden wir heute verwenden.", 150 150 - "As described in [this guide][starlight-css-custom], you need to create a `.css` .0CD83940C89F2D1185A1": "Wie in [diesem Leitfaden][starlight-css-custom] beschrieben, müssen Sie eine `.css`-Datei irgendwo in Ihrem `src/`-Verzeichnis erstellen, in der Sie Ihre CSS-Stile definieren können. Vergessen Sie nicht, den Pfad zu dieser `.css`-Datei in Starlight's `customCss`-Array in `astro.config.mjs` hinzuzufügen:", 151 151 - "After completing these preparation steps, you are ready to try out some nice adj.DE7E5B1DE51E76B69982": "Nach Abschluss dieser Vorbereitungsschritte sind Sie bereit, einige schöne Anpassungen am Design der Starlight-Seitenleiste auszuprobieren.", 152 152 - "Customizations": "Anpassungen", 153 153 - "There are endless different possibilities that you can play around with just wit.315492DDFA6948DAD882": "Es gibt unendlich viele Möglichkeiten, mit Ihrem benutzerdefinierten CSS zu experimentieren. Ich werde Ihnen einige Ideen geben, die ich selbst beim Spielen mit dem Design der Seitenleiste sehr hilfreich fand. Auch wenn einige dieser Ideen für Sie albern erscheinen mögen, verspreche ich, dass die Kombination einiger davon Ihre Starlight-Seitenleiste noch besser aussehen lassen wird.", 154 154 - "One thing to note though is that in this blog post the focus lies on adjusting t.157A7D5F675513D49CA2": "Eine Sache, die zu beachten ist: In diesem Blogbeitrag liegt der Fokus auf der Anpassung des Stils von **Elementen auf Root-Ebene** (diejenigen ohne Unterelemente) in der Seitenleiste.", 155 155 - "But before I do that, I'll show you how the default styling of the Starlight sid.935D4EBD7A75949003B6": "Aber bevor ich das tue, zeige ich Ihnen, wie das Standarddesign der Starlight-Seitenleiste derzeit aussieht:", 156 156 - "![Default styling of the Starlight sidebar](../../../assets/sidebar-css/no-css.p.CD83DAFB82A4B2123FA6": "Standarddesign der Starlight-Seitenleiste", 157 157 - "Manipulate the whitespaces between sidebar items": "Anpassen der Leerzeichen zwischen den Elementen der Seitenleiste", 158 158 - "On the root level of your Starlight sidebar, there are two different types of el.44095ABCBC3AC9DE4022": "Auf der Root-Ebene Ihrer Starlight-Seitenleiste gibt es zwei verschiedene Arten von Elementen: **Seiten** und **Gruppen**. Während das Standarddesign ziemlich anständig ist, fand ich die Leerzeichen – der Abstand zwischen den Elementen, der selbst keinen Inhalt enthält – etwas zu groß, besonders zwischen Elementen auf Root-Ebene. Mit diesem Beispiel benutzerdefinierten CSS unten habe ich den Abstand zwischen den Elementen auf Root-Ebene verkleinert, während der Abstand zwischen den Gruppen gleich bleibt. Die wichtigen CSS-Stile sind im Codeblock hervorgehoben.", 159 159 - "![Starlight sidebar where the margin between root-level items is smaller](../../.880AFEBFAC9D61C70E2C": "Starlight-Seitenleiste, bei der der Abstand zwischen den Elementen auf Root-Ebene kleiner ist", 160 160 - "Perhaps, this will not be as useful to you because you don't use root-level page.31533AC4A173BE6AA7E5": "Vielleicht ist dies für Sie nicht so nützlich, weil Sie keine Root-Level-Seiten in Ihrer Seitenleiste verwenden, sodass dieser Effekt für Sie nicht bemerkbar ist. Aber wenn doch, probieren Sie es aus.", 161 161 - "Adjust the font weight of sidebar items": "Anpassen des Schriftgewichts der Seitenleisten-Elemente", 162 162 - "[Imho][imho] the one thing that triggers me the most about Starlight's root-leve.BC0D0A5B6F41C0B208BF": "[IMHO][imho], das eine, was mich an den Root-Level-Elementen in der Starlight-Seitenleiste am meisten stört, ist deren Fettdruck. Das ist wahrscheinlich eine sehr subjektive Meinung, aber wenn Sie mich fragen: Eine einzige Seite kann unmöglich so wichtig sein wie eine ganze Gruppe Seiten in Ihrer Dokumentation. Daher habe ich das Schriftgewicht der Elemente auf Root-Ebene dünner gemacht, wie Sie im folgenden Codeblock sehen können.", 163 163 - "![Starlight sidebar with lighter font weight](../../../assets/sidebar-css/font-w.7D96D24D62FE18FEF0C9": "Starlight-Seitenleiste mit leichterem Schriftgewicht", 164 164 - "Adjust the colour of sidebar items": "Anpassen der Farbe der Seitenleisten-Elemente", 165 165 - "A small but subtle change: I made unselected root-level items appear dimmer in t.487CF0E6076E81E13BB4": "Eine kleine, aber subtile Änderung: Ich habe unselektierte Root-Level-Einträge in der Seitenleiste mit einem schwächeren Erscheinungsbild versehen, wie im folgenden Codeblock gezeigt.", 166 166 - "If you choose to use this design as well, I recommend that you only apply the se.C425BF4402932D0E21FC": "Wenn Sie sich entscheiden, dieses Design ebenfalls zu verwenden, empfehle ich, nur die zweite CSS-Manipulation anzuwenden, da die erste nur zur Demonstration dient, wie Sie das Styling von ausgewählten Root-Level-Elementen anpassen könnten – diese Regel gilt auch für andere Codeblöcke in diesem Blog, wenn sie als `default value` gekennzeichnet sind.", 167 167 - "": "Starlight-Seitenleiste mit abgeschwächten Farben", 168 168 - "Adjust the font size of sidebar items": "Anpassen der Schriftgröße der Seitenleisten-Elemente", 169 169 - "Although I don't recommend it, you can also adjust the font size of sidebar item.5B666452173153740723": "Obwohl ich es nicht empfehle, können Sie auch die Schriftgröße der Seitenleisten-Elemente anpassen. Mit diesem Beispiel benutzerdefinierten CSS unten habe ich die Schriftgröße der Elemente auf Root-Ebene verkleinert.", 170 170 - "![Starlight sidebar with smaller font size](../../../assets/sidebar-css/font-siz.B88E6D3A46696C763ECA": "Starlight-Seitenleiste mit kleinerer Schriftgröße", 171 171 - "Recommendations": "Empfehlungen", 172 172 - "Summing everything up, I recommend that you apply some mix of the above customiz.01EDE8C6353CC9B29A42": "Zusammenfassend empfehle ich, dass Sie eine Mischung aus den oben genannten Anpassungsoptionen anwenden, die Sie bequem in einer einzigen `.css`-Datei sehen können.", 173 173 - "Note that I also use [Cascade Layers][starlight-css-cascade-layers], supported s.26DC0EFB0948E47CFD73": "Beachten Sie, dass ich auch [Cascade Layers][starlight-css-cascade-layers] verwende, die seit [Starlight 0.34.0][starlight-0-34] unterstützt werden, und empfehle, diese zu verwenden, um die Reihenfolge der angewendeten CSS-Stile festzulegen.", 174 174 - "How to create a horizontal progress indicator for your Starlight site": "Wie man einen horizontalen Fortschrittsanzeiger für Ihre Starlight-Website erstellt", 175 175 - "Learn how to create a horizontal progress indicator for your Starlight site.": "Erfahren Sie, wie Sie einen horizontalen Fortschrittsanzeiger für Ihre Starlight-Website erstellen.", 176 176 - "Learn how to create a horizontal progress indicator for your <a class=\"gh-badge\".E525FE811A5499114EFE": "Erfahren Sie, wie Sie einen horizontalen Fortschrittsanzeiger für Ihre <a class=\"gh-badge\" href=\"https://github.com/withastro/starlight\"><img src=\"/starlight.png\" alt=\"Starlight\" />Starlight</a>-Website erstellen.", 177 177 - "In this post, we would like to show you how [FrostyBee](https://github.com/frost.E8FB1C6C96EF64C97121": "In diesem Beitrag möchten wir Ihnen zeigen, wie [FrostyBee](https://github.com/frostybee) einen sauberen horizontalen Fortschrittsanzeiger für Starlight-Websites erstellt hat.", 178 178 - "You will need to have an existing Starlight website.": "Sie benötigen eine bestehende Starlight-Website.", 179 179 - "Create the progress indicator component": "Erstellen Sie die Fortschrittsanzeiger-Komponente", 180 180 - "Let's create a new component called `ProgressIndicator.astro` in the `src/compon.3AF2A56DBB850F8660D1": "Lassen Sie uns eine neue Komponente namens `ProgressIndicator.astro` im Verzeichnis `src/components/` erstellen. Diese Komponente ist für die Darstellung des Fortschrittsanzeigers zuständig.", 181 181 - "We create a container which spans across the whole width with the progress bar `.BF53914FAF1D12F4D39C": "Wir erstellen einen Container, der sich über die gesamte Breite erstreckt, mit der Fortschrittsleiste `<div>` darin. Die Breite des inneren `<div>` wird aktualisiert, wann immer der Benutzer scrollt (und beim Laden der Seite), um die aktuelle Scrollposition widerzuspiegeln.", 182 182 - "In the hidden lines is the styling which makes sure that the progress bar looks .D3205B85D528FA0A2D8A": "In den ausgeblendeten Zeilen befindet sich das Styling, das sicherstellt, dass die Fortschrittsleiste wie eine typische Fortschrittsleiste aussieht. Sie ist auch an Starlight angepasst, da die Leiste automatisch ausgeblendet wird, wenn die Website keine Seitenleiste und Inhaltsverzeichnis, aber ein Hero-Element hat, wie es die meisten Landing Pages tun.", 183 183 - "One thing to point out is what the global CSS (line 45) does: It pushes the mobi.9D93B4CCEB69834E52E2": "Eine Sache, die hervorzuheben ist, ist, was das globale CSS (Zeile 45) bewirkt: Es schiebt das Dropdown-Menü des mobilen Inhaltsverzeichnisses nach unten, um mehr Abstand zur Fortschrittsleiste zu schaffen. Dies ist eine persönliche Präferenz, die Sie entfernen können, wenn Sie möchten.", 184 184 - "Starlight Override": "Starlight-Override", 185 185 - "Now we can use this component in a [Starlight override](https://starlight.astro..BD7A14DF6609C76376D6": "Nun können wir diese Komponente in einem [Starlight-Override](https://starlight.astro.build/guides/overriding-components/) verwenden. In diesem Fall macht es Sinn, die [`Header.astro`-Komponente](https://starlight.astro.build/reference/overrides/#header-1) wie folgt zu überschreiben:", 186 186 - "Do not forget to add this component override to your `astro.config.mjs` file:": "Vergessen Sie nicht, dieses Komponenten-Override in Ihre `astro.config.mjs`-Datei aufzunehmen:", 187 187 - "Source Code": "Quellcode", 188 188 - "You can find the whole project code on [GitHub](https://github.com/trueberryless.F650372F9DC07B1F43E8": "Sie können den gesamten Projektcode auf [GitHub](https://github.com/trueberryless/starlight-progress-indicator) und in diesem [Stackblitz-Beispiel](https://stackblitz.com/github/trueberryless/starlight-progress-indicator?file=src%2Fcomponents%2FProgressIndicator.astro) finden.", 189 189 - "Conclusion": "Fazit", 190 190 - "With this setup, the progress indicator will be displayed on every page (except .14DF840C82B37252652E": "Mit dieser Konfiguration wird der Fortschrittsanzeiger auf jeder Seite (außer Landing Pages) Ihrer Starlight-Website angezeigt. 🥳", 191 191 - "You can also check out [FrostyBee's](https://github.com/frostybee) [Starlight Sc.2885FB180F098A43BD51": "Sie können auch das [Starlight Scroll To Top Plugin](https://github.com/frostybee/starlight-scroll-to-top) von [FrostyBee](https://github.com/frostybee) ausprobieren, das seit Version `0.3.1` auch einen integrierten [Fortschrittsring](https://frostybee.github.io/starlight-scroll-to-top/configuration/#showprogressring) unterstützt. 🙌", 192 192 - "Starlight Topics Dropdown and List together": "Starlight Themen-Dropdown und Liste zusammen", 193 193 - "Learn how to combine a desktop list and mobile dropdown for your Starlight sideb.E44A5587DB1652DE8801": "Erfahren Sie, wie Sie eine Desktop-Liste und ein mobiles Dropdown-Menü für die Starlight-Sidebar-Themen kombinieren.", 194 194 - "Combine two <a class=\"gh-badge\" href=\"https://github.com/withastro/starlight\"><i.F2B401A419A027863D20": "Kombinieren Sie zwei <a class=\"gh-badge\" href=\"https://github.com/withastro/starlight\"><img src=\"/starlight.png\" alt=\"Starlight\" />Starlight</a> Sidebar Topics Plugins, um eine Themenliste auf dem Desktop und ein Dropdown-Menü in der mobilen Sidebar anzuzeigen.", 195 195 - "Using the [Starlight Sidebar Topics](https://github.com/hideoo/starlight-sidebar.7183C62B96DBF9A43128": "Mit dem [Starlight Sidebar Topics](https://github.com/hideoo/starlight-sidebar-topics) Plugin zusammen mit der [Starlight Sidebar Topics Dropdown](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown) Komponente können Sie eine Website erstellen, die eine Themenliste auf dem Desktop und ein Dropdown-Menü auf mobilen Geräten bietet.", 196 196 - "Install the packages": "Pakete installieren", 197 197 - "First, install the `starlight-sidebar-topics` plugin and also the `starlight-sid.6A32241A1C081FF4DD1C": "Zuerst installieren Sie das `starlight-sidebar-topics` Plugin sowie die `starlight-sidebar-topics-dropdown` Komponente:", 198 198 - "Afterwards, follow the setup guides from [Starlight Sidebar Topics](https://star.D6EC61B940DA777E2BEB": "Anschließend folgen Sie den Einrichtungsanleitungen von [Starlight Sidebar Topics](https://starlight-sidebar-topics.trueberryless.org/docs/getting-started/#installation) und [Starlight Sidebar Topics Dropdown](https://starlight-sidebar-topics-dropdown.trueberryless.org/docs/getting-started/#installation).", 199 199 - "Modify the Sidebar component": "Die Sidebar-Komponente anpassen", 200 200 - "In the setup guide from the dropdown component, you have created a sidebar compo.BD6B58F9BEEFEE582749": "In der Einrichtungsanleitung der Dropdown-Komponente haben Sie eine Sidebar-Komponente erstellt, die nur das Dropdown-Menü rendert. Nun müssen Sie diese Komponente anpassen, sodass sie auch die Standard-Sidebar rendert, wenn der Benutzer am Desktop ist.", 201 201 - "Result": "Ergebnis", 202 202 - "If you follow these steps, your sidebar will look like this:": "Wenn Sie diese Schritte befolgen, sieht Ihre Sidebar folgendermaßen aus:", 203 203 - "![Final result with desktop view on the left and mobile view on the right](../...6745D424D50B4DE3BC95": "Endergebnis mit Desktop-Ansicht links und mobiler Ansicht rechts", 204 204 - "You can find the complete source code of this guide in this [StackBlitz example].B731F1E66F12B002F90D": "Den vollständigen Quellcode dieser Anleitung finden Sie in diesem [StackBlitz-Beispiel](https://stackblitz.com/edit/withastro-starlight-qgraahmp?file=astro.config.mjs).", 205 205 - "Endless possibilities": "Unbegrenzte Möglichkeiten", 206 206 - "You could also do it the other way around (list on mobile, dropdown on desktop) .6BA6A2F32E24F0FB3A00": "Sie könnten es auch umgekehrt machen (Liste auf mobilen Geräten, Dropdown auf dem Desktop), indem Sie die CSS-Eigenschaften `display: block` und `display: none` tauschen.", 207 207 - "Moreover, you could also create your own display component, which uses the route.7237A9BCDFBA80A2B459": "Darüber hinaus könnten Sie auch eine eigene Anzeige-Komponente erstellen, die die Routendaten aus dem Starlight Sidebar Topics Plugin verwendet und die Themen auf eine benutzerdefinierte Weise rendert. Das ist etwas anspruchsvoller, aber Sie finden weitere Informationen dazu in der [\"Custom Topics List\"-Dokumentation](https://starlight-sidebar-topics.trueberryless.org/docs/guides/custom-topic-list/).", 208 208 - "Setting up Kubernetes with Cilium and Cloudflare": "Einrichten von Kubernetes mit Cilium und Cloudflare", 209 209 - "Today we'll take a look at how to set up a Kubernetes cluster with K3s and Ciliu.651207C3314901C11632": "Heute schauen wir uns an, wie man ein Kubernetes-Cluster mit K3s und Cilium einrichtet.", 210 210 - "This blog posts describes the process of setting up a <a class=\"gh-badge\" href=\".E82478488BD3E7D9E2C2": "Dieser Blogpost beschreibt den Prozess der Einrichtung eines <a class=\"gh-badge\" href=\"https://github.com/kubernetes\"><img src=\"https://github.com/kubernetes.png\" alt=\"Kubernetes\" />Kubernetes</a>-Clusters mit <a class=\"gh-badge\" href=\"https://github.com/k3s-io\"><img src=\"https://github.com/k3s-io.png\" alt=\"k3s\" />k3s</a> und <a class=\"gh-badge\" href=\"https://github.com/cilium\"><img src=\"https://github.com/cilium.png\" alt=\"Cilium\" />Cilium</a>. Wir verwenden <a class=\"gh-badge\" href=\"https://github.com/helm\"><img src=\"https://github.com/helm.png\" alt=\"Helm\" />Helm</a> als Paketmanager und <a class=\"gh-badge\" href=\"https://github.com/cloudflare\"><img src=\"https://github.com/cloudflare.png\" alt=\"Cloudflare\" />Cloudflare</a> als Zertifikataussteller. Wir haben die Tipps und Tricks von Vegard S. Hagen aus [seinem Artikel](https://blog.stonegarden.dev/articles/2024/02/bootstrapping-k3s-with-cilium/) genutzt. Im Wesentlichen erklärt dieser Blog, wie alle trueberryless.org-Webseiten bereitgestellt wurden (nicht mehr).", 211 211 - "Working with [Docker](https://github.com/docker) Containers can be hard. However.1CC6942704DAE062A463": "Die Arbeit mit [Docker](https://github.com/docker)-Containern kann schwierig sein. Es gibt jedoch Tools, die das Management von Containern verbessern, wie [Kubernetes](https://github.com/kubernetes). Tatsächlich ist Kubernetes meines Wissens das einzige Tool, das als Management-Software für Docker-Container fungiert. Kubernetes ist in fast allen Cloud-Anbietern wie Google Cloud, Azure und AWS gut integriert. Dadurch hat es eine standardisierte `yaml`-Syntax, was für kleine Entwickler großartig ist, da sie mit geringem Aufwand zwischen `The Big Three` wechseln können.", 212 212 - "tl;dr": "tl;dr", 213 213 - "Install everything and then apply cert-manager. ez": "Alles installieren und dann cert-manager anwenden. Ganz einfach.", 214 214 - "Install k3s": "k3s installieren", 215 215 - "As Hagen explains in [his article](https://blog.stonegarden.dev/articles/2024/02.D5EDD5BC9C49780444EF": "Wie Hagen in [seinem Artikel](https://blog.stonegarden.dev/articles/2024/02/bootstrapping-k3s-with-cilium/) erklärt, möchten wir `k3s` ohne Konfigurationen und mit deaktivierten Komponenten installieren. Er beschreibt im Detail, welche Komponenten nicht installiert werden.", 216 216 - "After the installation, there should be some pods running (3). Don't be shocked .56BB9C3C1CCEDAFADEDB": "Nach der Installation sollten einige Pods laufen (3). Nicht schockiert sein, wenn die Pods im Status `ContainerCreating` oder `Pending` sind. Das liegt daran, dass die Pods nicht miteinander kommunizieren können, da wir das CNI deaktiviert haben (`--flannel-backend=none`). Später werden wir [Cilium](https://github.com/cilium) installieren, welches das Flannel-CNI ersetzen wird.", 217 217 - "Install Helm": "Helm installieren", 218 218 - "Helm is the package manager for [Kubernetes](https://github.com/kubernetes), so .B3313537E64D4FFE6667": "Helm ist der Paketmanager für [Kubernetes](https://github.com/kubernetes). Sie können es entweder direkt installieren (siehe die [Helm-Dokumentation](https://helm.sh/docs/intro/install/)) oder Teile von Helm verwenden, die mit Cilium ausgeliefert werden. Wir haben uns entschieden, Helm direkt zu installieren, was mit folgendem Befehl problemlos möglich ist:", 219 219 - "Install Cilium": "Cilium installieren", 220 220 - "[Cilium](https://github.com/cilium) is a networking and security software for Ku.F7DC9A96105A082EC9DB": "[Cilium](https://github.com/cilium) ist eine Netzwerk- und Sicherheitssoftware für Kubernetes. Cilium ist sehr schnell, skalierbar und sicher, da es auf eBPF basiert -- einer revolutionären Technologie, die sandboxed Programme im Linux-Kernel ausführen kann, ohne den Kernel neu zu kompilieren oder Kernelmodule zu laden.", 221 221 - "We could install Cilium with Helm like shown here:": "Wir könnten Cilium mit Helm wie hier gezeigt installieren:", 222 222 - "However, we wanted to install with their CLI and this is how you can do it. Firs.551EA48947BA4759E483": "Wir wollten es jedoch mit deren CLI installieren, und so funktioniert das. Zuerst installieren Sie die Cilium-CLI, indem Sie diesen Code-Schnipsel ausführen:", 223 223 - "Then you can install Cilium with your Server IP-Address:": "Anschließend können Sie Cilium mit Ihrer Server-IP-Adresse installieren:", 224 224 - "Now we wait until Cilium says, everything is `OK` or `disabled`:": "Jetzt warten wir, bis Cilium meldet, dass alles `OK` oder `disabled` ist:", 225 225 - "After a while, all pods should be `Running`.": "Nach einer Weile sollten alle Pods im Status `Running` sein.", 226 226 - "Last but not least, you can apply some resources for Cilium:": "Zu guter Letzt können Sie einige Ressourcen für Cilium anwenden:", 227 227 - "Additionally you should upgrade the cilium config. In order to do that with the .B2C737654644F532072A": "Außerdem sollten Sie die Cilium-Konfiguration aktualisieren. Um dies mit den richtigen Werten zu tun, erstellen Sie zunächst diese Datei im Root-Verzeichnis, in dem Sie das k3s-Cluster verwalten möchten. Später können Sie auch einige hubble- und prometheus-bezogene Eigenschaften hinzufügen, wenn Sie [Grafana](https://github.com/Grafana) oder Ähnliches verwenden möchten (öffnen Sie die ausgeblendeten Zeilen, wenn Sie unsere Konfiguration ebenfalls verwenden möchten).", 228 228 - "Run this command to upgrade:": "Führen Sie diesen Befehl aus, um ein Upgrade durchzuführen:", 229 229 - "Setup Certificate Manager with Cloudflare": "Zertifikatsmanager mit Cloudflare einrichten", 230 230 - "In order to be able to create certificates for each subdomain, it is important t.412EB3BCACB9EA434592": "Um in der Lage zu sein, Zertifikate für jede Subdomain zu erstellen, ist es wichtig, einen Zertifikatsaussteller anzuwenden, der Zertifikatsanfragen bearbeitet und sie bei einem Anbieter einlöst. Wir haben [Cloudflare](https://github.com/cloudflare) als unseren Aussteller gewählt, und hier ist die Konfiguration, die Sie auf Ihr Kubernetes-Cluster anwenden müssen. Weitere Informationen finden Sie in der [cert-manager-Dokumentation](https://cert-manager.io/docs/configuration/acme/dns01/cloudflare/).", 231 231 - "But first, we need to install the cert-manager by running the following command:.2C3AE967A1D1E33B0CFD": "Zuerst müssen wir den cert-manager installieren, indem wir den folgenden Befehl ausführen:", 232 232 - "You can apply a file to the [Kubernetes](https://github.com/kubernetes) cluster,.7C198D3247CB04A61DD9": "Sie können eine Datei auf den [Kubernetes](https://github.com/kubernetes)-Cluster anwenden, indem Sie diesen k8s- (oder k3s-) Befehl ausführen:", 233 233 - "If you want to delete the resource in the Kubernetes cluster, the command is pre.13785BDE8535FD743BB9": "Wenn Sie die Ressource im Kubernetes-Cluster löschen möchten, ist der Befehl ziemlich einfach:", 234 234 - "As you may have spotted above, we also need a secret for the API token which aut.EED50E553247233483D4": "Wie Sie oben vielleicht bemerkt haben, benötigen wir auch ein Geheimnis für das API-Token, das die Authentifizierung durchführt, dass dieser Issuer berechtigt ist, Zertifikate anzufordern. Daher erstellen wir ein Geheimnis mit einem unverschlüsselten `API Token` von Cloudflare.", 235 235 - "Nowadays we create a token by going to your [Cloudflare](https://github.com/clou.29311654A42391586C43": "Heutzutage erstellen wir ein Token, indem wir zu Ihrem [Cloudflare](https://github.com/cloudflare)-Dashboard gehen, dann auf Ihr Profil klicken und die Registerkarte `API Tokens` auswählen. Hier können Sie ein spezifisches Token für Ihren Issuer generieren oder den globalen API-Schlüssel (nicht mehr empfohlen) verwenden. Die empfohlene Lösung ist, ein API-Token mit zwei Berechtigungen (benutzerdefiniertes Token) zu erstellen:", 236 236 - "Zone - DNS - Edit": "Zone - DNS - Bearbeiten", 237 237 - "Zone - Zone - Read": "Zone - Zone - Lesen", 238 238 - "": "Cloudflare-API-Token", 239 239 - "A more detailed description about the tokens, can be found in the [Cloudflare do.1F2C806B3988F77EF2CC": "Eine detailliertere Beschreibung der Tokens finden Sie in den [Cloudflare-Dokumenten](https://developers.cloudflare.com/fundamentals/api/get-started/create-token/).", 240 240 - "After applying this secret to Kubernetes, the issuer should be ready to resolve .6908E4EC999AC0DCA147": "Nachdem Sie dieses Geheimnis auf Kubernetes angewendet haben, sollte der Issuer bereit sein, unangenehme Fälle zu lösen!", 241 241 - "You can now use this issuer by applying this file which will hopefully create a .7987E8195B3DBB4AB6A9": "Sie können diesen Issuer jetzt verwenden, indem Sie diese Datei anwenden, die hoffentlich ein Zertifikat erstellt:", 242 242 - "It usually takes around 90 seconds to authenticate the request once applied. You.523D684039CD86DF5B8E": "Normalerweise dauert es etwa 90 Sekunden, um die Anfrage nach dem Anwenden zu authentifizieren. Sie können den aktuellen Status der Anfrage überprüfen, indem Sie diesen Kubernetes-Befehl ausführen.\nWenn es länger als 2 Minuten dauert, können möglicherweise einige Tipps unter [#Fehlerbehebung](#no-cloudflare-certificate-approval) hilfreich sein.", 243 243 - "The `-n` option stands for namespace.": "Die Option `-n` steht für Namespace.", 244 244 - "## Example app [`mutanuq`](https://mutanuq.trueberryless.org)": "Beispielanwendung [`mutanuq`](https://mutanuq.trueberryless.org)", 245 245 - "Then you can use this certificate in your Ingress controller:": "Dann können Sie dieses Zertifikat in Ihrem Ingress-Controller verwenden:", 246 246 - "Setup Keel": "Einrichtung von Keel", 247 247 - "We always wanted a clean Continuous Integration (CI) and Continuous Delivery (CD.5A7C877EE9C3CC7E2E7A": "Wir wollten schon immer eine saubere Continuous Integration (CI) und Continuous Delivery (CD) Lösung für unsere Websites. Das bedeutet, dass eine spezifische Commit-Nachricht einen automatisierten Prozess über [GitHub](https://github.com/github), Docker Hub und unseren Server auslösen sollte, der am Ende die entsprechende Website nach etwa zwei Minuten aktualisiert.", 248 248 - "Keel is a robust software tool which enables this feature for Kubernetes. We use.782AFBD621B2DB555C2D": "Keel ist ein robustes Software-Tool, das diese Funktion für Kubernetes ermöglicht. Wir haben Keel verwendet, um neue Docker-Images von Docker Hub durch regelmäßige Abfragen zu holen. Außerdem bietet Keel ein schönes Dashboard, auf dem Sie die Abfragen steuern können.", 249 249 - "In order to set up Keel with the admin dashboard, we created those files:": "Um Keel mit dem Administrations-Dashboard einzurichten, haben wir folgende Dateien erstellt:", 250 250 - "`secret-dashboard.yaml` for the Admin Username and Password (not everyone should.BC266314D27DCB36F4CB": "`secret-dashboard.yaml` für den Admin-Benutzernamen und das Passwort (nicht jeder sollte auf das Dashboard zugreifen können)", 251 251 - "`keel.yaml` for the actual k3s configs (copied and adapted from [KeelHQ](https:/.F8A38C5FC9A4505AF62C": "`keel.yaml` für die eigentlichen k3s-Konfigurationen (kopiert und angepasst von [KeelHQ](https://github.com/keel-hq/keel/blob/9f0a7160bbdc3a107ad148933a4269f30e4e479c/deployment/deployment-template.yaml))", 252 252 - "After applying both files and managing the additional certificate for `keel.true.30388E288EFFF1AD00F9": "Nachdem beide Dateien angewendet und das zusätzliche Zertifikat für `keel.trueberryless.org` verwaltet wurden, funktioniert das Keel-Dashboard perfekt. Darüber hinaus kann jedes Kubernetes-`Deployment` für automatisiertes Docker-Hub-Polling durch Setzen einiger Annotationen aktiviert werden:", 253 253 - "Celebrate with a Coffee!": "Feiern Sie mit einem Kaffee!", 254 254 - "Congratulations, you've successfully set up [Kubernetes](https://github.com/kube.C26D3423275F0054D782": "Herzlichen Glückwunsch, Sie haben erfolgreich [Kubernetes](https://github.com/kubernetes) mit [Cilium](https://github.com/cilium) und [Cloudflare](https://github.com/cloudflare) eingerichtet! Sie haben sich eine Kaffeepause verdient. Genießen Sie eine wohlverdiente Tasse, und wenn Sie mit mir virtuell einen Kaffee teilen möchten, können Sie meine Arbeit gerne auf [Ko-fi](https://ko-fi.com/trueberryless) unterstützen. Vielen Dank!", 255 255 - "Troubleshooting": "Fehlerbehebung", 256 256 - "Cilium-ingress has no External-IP": "Cilium-Ingress hat keine External-IP", 257 257 - "Make sure that the `ip-pool` includes the address specified by the annotations i.4E44377E5C9AC3845ED3": "Stellen Sie sicher, dass der `ip-pool` die in der Datei `config.yaml` angegebenen Adressen enthält.", 258 258 - "Also in some cases, other ingress controllers get the annotated address before t.16FB14B27C64B47E0869": "In einigen Fällen nehmen andere Ingress-Controller die annotierte Adresse, bevor der Cilium IC darauf zugreifen kann, sodass sie weiterhin ausstehend ist...", 259 259 - "If you don't deploy locally but on one of `The Big Three`, please check out some.4CF2A8E1AE1127E8E9D5": "Wenn Sie nicht lokal, sondern auf einer der `Big Three` bereitstellen, schauen Sie bitte in andere Dokumentationen nach, warum die External IP weiterhin ausstehend ist. Es liegt meistens in deren Verantwortung, Ihnen eine Adresse bereitzustellen.", 260 260 - "No Cloudflare Certificate Approval": "Keine Cloudflare-Zertifikatsgenehmigung", 261 261 - "There can be some problem when the certificate won't get approved by Cloudflare..21242D4E500A87FE26A2": "Es kann Probleme geben, wenn das Zertifikat von Cloudflare nicht genehmigt wird.", 262 262 - "Wrong API token": "Falsches API-Token", 263 263 - "First make sure that the Cloudflare API token is correct. To make 100 percent su.BE3E293E05F70A765669": "Stellen Sie zunächst sicher, dass das Cloudflare API-Token korrekt ist. Erstellen Sie zur hundertprozentigen Sicherheit ein neues und fügen Sie es (nicht Base64-codiert) in diese Datei ein:", 264 264 - "Max auth failures reached": "Maximale Authentifizierungsfehler erreicht", 265 265 - "We once ran into the error `Error: 9109: Max auth failures reached, please check.661EAA2B42757CBB4C1D": "Wir sind einmal auf den Fehler `Error: 9109: Max auth failures reached, please check your Authorization header.` gestoßen. Warten Sie einfach ein paar Stunden, löschen Sie die Ressource und wenden Sie sie erneut an:", 266 266 - "Hopefully, you're now good to go!": "Hoffentlich können Sie jetzt loslegen!", 267 267 - "Setting up Continuous deployment in a GitHub repository": "Einrichten der kontinuierlichen Bereitstellung in einem GitHub-Repository", 268 268 - "Today we'll take a look at how to set up a GitHub repository which will be deplo.210AF277FD26683FD09E": "Heute schauen wir uns an, wie man ein GitHub-Repository einrichtet, das über Argo CD auf einem k3s-Cluster bereitgestellt wird.", 269 269 - "Today we'll take a look at how to set up a <a class=\"gh-badge\" href=\"https://git.A040D5A396CEA3FE8E47": "Heute schauen wir uns an, wie man ein <a class=\"gh-badge\" href=\"https://github.com/github\"><img src=\"https://github.com/github.png\" alt=\"github\" />GitHub</a>-Repository einrichtet, das über Argo CD auf einem k3s-Cluster bereitgestellt wird. Zusammenfassend wird der Artikel Workflow-Dateien, eine Dockerfile, Manifeste (Deployment) und <a class=\"gh-badge\" href=\"https://github.com/docker\"><img src=\"https://github.com/docker.png\" alt=\"Docker Hub\" />Docker Hub</a>-Repositories umfassen. Bitte werfen Sie einen Blick auf [unseren Argo CD Blog](./setup-argocd-for-kubernetes), da dies eine Fortsetzung des anderen Beitrags ist.", 270 270 - "In today's post, we'll take a quick look at how to set up continuous deployment .837E00D0E73247CB97BC": "Im heutigen Beitrag werfen wir einen kurzen Blick darauf, wie man eine kontinuierliche Bereitstellung in einem [GitHub](https://github.com/github)-Repository einrichtet. Wir sind uns ziemlich sicher, dass dieses Setup auch mit anderen Git-Registrys funktioniert. Beachten Sie jedoch, dass sich dieser Beitrag ausschließlich auf GitHub konzentriert.", 271 271 - "This post also assumes that you use [GitHub](https://github.com/github) Actions .5387D30E9AFCFCF33E71": "Dieser Beitrag setzt voraus, dass Sie [GitHub](https://github.com/github)-Actions in Kombination mit Argo CD verwenden, um Ihre Anwendungen auf einem Kubernetes-Cluster bereitzustellen. Folgen Sie unseren anderen [Bereitstellungsbeiträgen](/blog/tags/deployment), um weitere Anleitungen zur Einrichtung beider Technologien auf Ihrem persönlichen Server zu erhalten.", 272 272 - "Preparations": "Vorbereitungen", 273 273 - "We recommend creating a [Docker Hub](https://hub.docker.com/) account or choose .D653C06B296243188634": "Wir empfehlen, ein [Docker Hub](https://hub.docker.com/)-Konto zu erstellen oder ein anderes Docker-Registry Ihrer Wahl zu nutzen.", 274 274 - "Your GitHub repository must fulfil these conditions:": "Ihr GitHub-Repository muss die folgenden Bedingungen erfüllen:", 275 275 - "Has a Dockerfile (ideally in the root folder)": "Hat eine Dockerfile (idealerweise im Stammordner)", 276 276 - "Has two GitHub Secrets ([create GitHub Secret](https://docs.github.com/en/action.5E18F567EA5B8452C4B3": "Hat zwei GitHub-Secrets ([GitHub-Secret erstellen](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions#creating-secrets-for-a-repository)):", 277 277 - "DOCKER_USERNAME: Your docker username": "DOCKER\\_USERNAME: Ihr Docker-Benutzername", 278 278 - "DOCKER\\_PASSWORD: Your docker password (or [access token](https://docs.docker.co.09AD66E199369AC9AC74": "DOCKER\\_PASSWORD: Ihr Docker-Passwort (oder [Access Token](https://docs.docker.com/security/for-developers/access-tokens/))", 279 279 - "Create workflow file(s)": "Erstellen einer Workflow-Datei (oder mehrerer)", 280 280 - "GitHub Actions are special jobs in GitHub which mostly run on Linux servers and .E52CA8DEA2F2414C53E4": "GitHub Actions sind spezielle Jobs in GitHub, die meist auf Linux-Servern ausgeführt werden und über das Erstellen von `yaml`-Dateien im Verzeichnis `.github/workflows` gesteuert werden können. Diese speziellen Dateien können festlegen, nach welchen Ereignissen diese Jobs ausgeführt werden sollen, und bieten Ihnen viel Freiheit. Als regelmäßiger GitHub-Actions-Nutzer kann ich Ihnen sagen, dass Sie sich daran gewöhnen sollten, Ihre `yaml`-Dateien ziemlich oft umzuschreiben, da Sie häufig kleine Details übersehen. Aber ohne weitere Umschweife, lassen Sie uns direkt in die Erstellung einer passenden `deployment.yaml`-Datei einsteigen, die einige Aufgaben für uns erledigt:", 281 281 - "Push a new docker image to Docker Hub (with the newest version).": "Eine neue Docker-Image-Version in Docker Hub hochladen (mit der neuesten Version).", 282 282 - "Update the `manifest/deployment.yaml` file, so Argo CD gets notified about the n.745ACECEA48EBB0BD214": "Die `manifest/deployment.yaml`-Datei aktualisieren, damit Argo CD über das neue getaggte Image informiert wird.", 283 283 - "(optional) Create a new release on GitHub, so the times of releases are document.5A45740CFC388A713228": "(optional) Ein neues Release auf GitHub erstellen, damit die Zeitpunkte der Releases dokumentiert sind, wo sie sein sollten.", 284 284 - "Here you have an obsolete `docker-hub.yaml` which we used to use because it has .ACD068BBAB645A580B40": "Hier finden Sie eine veraltete `docker-hub.yaml`, die wir früher verwendet haben, da sie gute Versionierungsstrategien bietet:", 285 285 - "After copying the contents of our `deployment.yaml` file and creating the new fi.BA0B84DE711F10368BA7": "Nachdem Sie den Inhalt unserer `deployment.yaml`-Datei kopiert und die neue Datei im `.github/workflows`-Ordner erstellt haben, müssen Sie einige sehr **wichtige Anpassungen** vornehmen:", 286 286 - "Change the `IMAGE_NAME` to your personal Docker Hub repository. The image name c.70E854B465ED70C76952": "Ändern Sie den `IMAGE_NAME` in Ihr persönliches Docker Hub-Repository. Der Bildname besteht aus Ihrem Kontonamen und dem Repositoriesnamen. Wenn Sie sich nicht sicher sind, wie Ihr Bildname lautet, können Sie die URL des Docker Hub-Repositories ansehen, dort sollte er irgendwo zu finden sein.", 287 287 - "Now you should be good to go to add the keyword `deploy` into any commit message.BBFBDF3655BEA5A69ED1": "Jetzt sollten Sie bereit sein, das Schlüsselwort `deploy` in jede Commit-Nachricht für den Hauptzweig Ihres Repositories einzufügen, und es sollte automatisch ein Docker-Image an Docker Hub senden und das Manifest für Argo CD aktualisieren.", 288 288 - "Congratulations, you've successfully set up Argo CD with k3s and [Cilium](https:.F5382A81A78FA5565691": "Herzlichen Glückwunsch, Sie haben Argo CD erfolgreich mit k3s und [Cilium](https://github.com/cilium) eingerichtet! Sie haben eine Kaffeepause verdient. Genießen Sie eine wohlverdiente Tasse, und wenn Sie mit mir einen virtuellen Kaffee teilen möchten, können Sie gerne meine Arbeit auf [Ko-fi](https://ko-fi.com/trueberryless) unterstützen. Vielen Dank!", 289 289 - "Setting up Argo CD in a k3s cluster": "Einrichten von Argo CD in einem k3s-Cluster", 290 290 - "Today we'll take a look at how to set up Argo CD in a k3s cluster.": "Heute sehen wir uns an, wie man Argo CD in einem k3s-Cluster einrichtet.", 291 291 - "Continuing to improve our k3s cluster and especially the CI/CD workflow, we now .A2E0EE988FAFFFAD6A42": "Um unseren k3s-Cluster und insbesondere den CI/CD-Workflow weiter zu verbessern, werfen wir einen Blick auf das GitOps-Tool <a class=\"gh-badge\" href=\"https://github.com/argoproj\"><img src=\"https://github.com/argoproj.png\" alt=\"Argo CD\" />Argo CD</a>. Hier zeigen wir, wie wir es in unseren Cluster integrieren können. Unsere Tech-Stack für den Deployment-Prozess umfasst k3s, Helm, Cilium und nach diesem Tutorial auch Argo CD.", 292 292 - "Having read Vegard S. Hagen's article “[Argo CD Kustomize with Helm](https://blo.A0B58D0615DC386245A0": "Nachdem wir Vegard S. Hagens Artikel “[Argo CD Kustomize with Helm](https://blog.stonegarden.dev/articles/2023/09/argocd-kustomize-with-helm/)” gelesen und beschlossen haben, dass seine Lösung nicht passend für unseren Cluster ist, haben wir uns direkt in die Standard-Argo-CD-„[Getting started](https://argo-cd.readthedocs.io/en/stable/getting_started/)“-Anleitung vertieft. Nun führen wir Sie durch die Herausforderungen bei der Einrichtung von [Argo CD](https://github.com/argoproj) auf [k3s](https://github.com/k3s-io) und [Cilium](https://github.com/cilium). Dies knüpft an das Kapitel „[Setup Certificate Manager with Cloudflare](/blog/setup-kubernetes-with-cilium-and-cloudflare#setup-certificate-manager-with-cloudflare)“ aus unserem letzten Beitrag „[Setting up Kubernetes with Cilium and Cloudflare](/blog/setup-kubernetes-with-cilium-and-cloudflare)“ an. In genau diesem Beitrag haben wir am Ende auch [Keel](https://github.com/keel-hq) eingerichtet, aber dieser Schritt ist jetzt überflüssig, da wir Argo CD nutzen, um den neuesten Stand der Technik-Code aus jeder [GitHub](https://github.com/github)-Repo zu holen. Viel Spaß beim Lesen!", 293 293 - "We assume that you followed [our other blog post](/blog/setup-kubernetes-with-ci.35443F83A3EBC402F568": "Wir gehen davon aus, dass Sie [unseren anderen Blogbeitrag](/blog/setup-kubernetes-with-cilium-and-cloudflare) gelesen haben.", 294 294 - "Requirements": "Voraussetzungen", 295 295 - "Before we can start, we need to make sure we have `kubectl` installed, a kubecon.AF18D970264C891E62E6": "Bevor wir starten, müssen wir sicherstellen, dass `kubectl` installiert ist, eine kubeconfig-Datei vorhanden ist (k3s speichert diese Datei hier:", 296 296 - ") and CoreDNS (check if you have CoreDNS by running this": ") und CoreDNS (prüfen Sie, ob Sie CoreDNS haben, indem Sie diesen", 297 297 - "command).": "Befehl ausführen).", 298 298 - "Installation": "Installation", 299 299 - "First, let's apply all the necessary services, deployments and many other differ.3968A495D46DF328E51D": "Zunächst wenden wir alle notwendigen Services, Deployments und viele andere Kubernetes-Ressourcen an, indem wir folgendes ausführen:", 300 300 - "Certificate": "Zertifikat", 301 301 - "Additionally, we'll need a certificate:": "Zusätzlich benötigen wir ein Zertifikat:", 302 302 - "Apply this resource by running `kubectl apply -f certificate.yaml`.": "Wenden Sie diese Ressource an, indem Sie `kubectl apply -f certificate.yaml` ausführen.", 303 303 - "Ingress Controller": "Ingress-Controller", 304 304 - "And we'll need a ingress controller which is managed by Cilium:": "Außerdem benötigen wir einen Ingress-Controller, der von Cilium verwaltet wird:", 305 305 - "Apply this resource by running `kubectl apply -f argocd-ingress.yaml`.": "Wenden Sie diese Ressource an, indem Sie `kubectl apply -f argocd-ingress.yaml` ausführen.", 306 306 - "Deactivate TSL within Argo CD": "Deaktivieren des TLS in Argo CD", 307 307 - "With the certificate the connection between the client and server is secured. Ho.198C7766F41D2E4927DA": "Mit dem Zertifikat ist die Verbindung zwischen Client und Server gesichert. Es gibt jedoch immer noch ein selbstsigniertes Zertifikat innerhalb der [Argo CD](https://github.com/argoproj)-Services, das wir nicht unbedingt benötigen. Daher können wir die Sicherheit des Argo-CD-Servers deaktivieren, indem wir die Eigenschaft `server.insecure` bearbeiten.", 308 308 - "In order to do that, we first run this command:": "Um das zu tun, führen wir zunächst diesen Befehl aus:", 309 309 - "which will hopefully open a file in vim or neovim (otherwise would be cringe if .8B321BBC80D980EFA538": "was hoffentlich eine Datei in vim oder neovim öffnet (ansonsten wäre es ziemlich unangenehm, wenn Sie uns fragen, LMAO). Die Datei sollte in etwa so aussehen:", 310 310 - "The last two lines will probably be not there at first, but this is exactly the .00E15DF17F5D9A9B4B22": "Die letzten beiden Zeilen werden wahrscheinlich zuerst nicht vorhanden sein, aber genau diese Einstellung wollen wir erreichen. Fügen Sie diese beiden Zeilen (oben markiert) hinzu und speichern Sie die Datei (`Esc` → `:wq`, wenn Sie cool sind).", 311 311 - "Restart the Argo CD Server by running and waiting till the rollout is completed:.CDC77B3806BBA44885A8": "Starten Sie den Argo-CD-Server neu, indem Sie warten, bis das Rollout abgeschlossen ist:", 312 312 - "After all those steps, we should now see the UI under [`https://argo-cd.trueberr.89BC34AD1ECDBC06B87E": "Nach all diesen Schritten sollten wir nun die Benutzeroberfläche unter [`https://argo-cd.trueberryless.org`](https://argo-cd.trueberryless.org) (passwortgeschützt) sehen.", 313 313 - "": "Argo CD UI-Dashboard", 314 314 - "The credentials of Argo CD UI consist of a user and a password. The user is alwa.BE74F043F4C1B4E5AB9E": "Die Anmeldedaten der Argo-CD-Benutzeroberfläche bestehen aus einem Benutzer und einem Passwort. Der Benutzer ist immer `admin` und Sie können Ihr Passwort herausfinden, indem Sie diesen Befehl ausführen:", 315 315 - "Add manifest to repository": "Manifest im Repository hinzufügen", 316 316 - "Now in order to create a new application in [Argo CD](https://github.com/argopro.B153A0B7CA8710DB4FF2": "Um nun eine neue Anwendung in [Argo CD](https://github.com/argoproj) zu erstellen (entweder über die Benutzeroberfläche oder CLI – wir nutzen die Benutzeroberfläche, da wir die CLI nicht eingerichtet haben), müssen wir das Git-Repository vorbereiten. Da das Repository die einzige Quelle der Wahrheit ist, definieren wir dort auch alle Kubernetes-Ressourcen, die von Argo CD erstellt werden sollen.", 317 317 - "We recommend creating a new folder in the git repository called something like `.505C369206406EFB86A4": "Wir empfehlen, im Git-Repository einen neuen Ordner mit dem Namen `manifest` zu erstellen. In diesem Ordner erstellen wir einige Dateien:", 318 318 - "`certificate.yaml`:": "`certificate.yaml`:", 319 319 - "`deployment.yaml`:": "`deployment.yaml`:", 320 320 - "`service.yaml`:": "`service.yaml`:", 321 321 - "`ingress.yaml`:": "`ingress.yaml`:", 322 322 - "These files are basically the exact same files mentioned in the [other post](/bl.A6639A930D5E316FA4EB": "Diese Dateien sind im Grunde dieselben wie in dem [anderen Beitrag](/blog/setup-kubernetes-with-cilium-and-cloudflare#example-app-mutanuq), jedoch in vier Dateien aufgeteilt, da uns dies den Vorteil bietet, das Manifest aus [GitHub](https://github.com/github)-Aktionen heraus zu manipulieren. Aber der Reihe nach: Im [nächsten Beitrag](/blog/setup-continuous-integration-github-repository) sehen Sie, wie das Manifest mit GitHub-Aktionen eingerichtet wird.", 323 323 - "Create new application in Argo CD UI": "Neue Anwendung in der Argo-CD-Benutzeroberfläche erstellen", 324 324 - "You'll probably see the big `NEW APP` button in the UI of [Argo CD](https://gith.8C955D38A27D41B77691": "Sie werden wahrscheinlich den großen Button `NEW APP` in der Benutzeroberfläche von [Argo CD](https://github.com/argoproj) sehen. Klicken Sie darauf und erstellen Sie eine neue Anwendung mit den unten angepassten Eigenschaften:", 325 325 - "Application Name: `mutanuq`": "Anwendungsname: `mutanuq`", 326 326 - "Project Name: `default`": "Projektname: `default`", 327 327 - "Sync Policy: Find out more in [this post](/blog/setup-continuous-integration-git.049A9447DEA81CE1B5DD": "Sync Policy: Erfahren Sie mehr in [diesem Beitrag](/blog/setup-continuous-integration-github-repository) / vorerst auf `Manual` lassen", 328 328 - "Repository URL: `https://github.com/trueberryless-org/mutanuq`": "Repository-URL: `https://github.com/trueberryless-org/mutanuq`", 329 329 - "Revision: `HEAD`": "Revision: `HEAD`", 330 330 - "Path: `manifest`": "Pfad: `manifest`", 331 331 - "Cluster URL: `https://kubernetes.default.svc`": "Cluster-URL: `https://kubernetes.default.svc`", 332 332 - "Namespace: `mutanuq`": "Namespace: `mutanuq`", 333 333 - "Optionally — if you have [the CLI installed](https://argo-cd.readthedocs.io/en/s.4F9EF0A15884AE51DE02": "Optional – wenn Sie [die CLI installiert haben](https://argo-cd.readthedocs.io/en/stable/cli_installation/) – können Sie diesen Befehl für dasselbe Ergebnis ausführen:", 334 334 - "Now you can hopefully see your website being deployed in the UI. This process ca.9A72C473303559E3BDC1": "Nun sollten Sie hoffentlich sehen, wie Ihre Website in der Benutzeroberfläche bereitgestellt wird. Dieser Prozess kann einige Zeit in Anspruch nehmen, da beispielsweise der Zertifikatsantrag genehmigt werden muss. Eine gesunde Anwendung sollte in etwa so aussehen:", 335 335 - "![Argo CD Example Application UI](../../../assets/argocd/argocd_example_applicat.DFA9617B17D15540EAA3": "Argo CD Beispiel-Anwendungs-UI", 336 336 - "Congratulations, you've successfully set up [Argo CD](https://github.com/argopro.99A2D6F9095CF50BC9D2": "Herzlichen Glückwunsch, Sie haben erfolgreich [Argo CD](https://github.com/argoproj) auf einem [k3s](https://github.com/k3s-io) Cluster eingerichtet! Sie haben sich eine Kaffeepause verdient. Genießen Sie eine wohlverdiente Tasse, und wenn Sie mit mir virtuell einen Kaffee teilen möchten, können Sie gerne meine Arbeit auf [Ko-fi](https://ko-fi.com/trueberryless) unterstützen. Vielen Dank!", 337 337 - "Continuation": "Fortsetzung", 338 338 - "Be continued for our [next blog](/blog/setup-continuous-integration-github-repos.C6E6C542B1FAA026061D": "Fortsetzung in unserem [nächsten Blog](/blog/setup-continuous-integration-github-repository), der beschreibt, wie ein [GitHub](https://github.com/github)-Repository eingerichtet wird, das dann über Argo CD bereitgestellt werden kann.", 339 339 - "How to create a Rehype plugin that turns GitHub links into beautiful badges": "Wie man ein Rehype-Plugin erstellt, das GitHub-Links in schöne Badges verwandelt", 340 340 - "Learn how to build a simple yet delightful Rehype plugin that automatically tran.1DBFD32D56C53FC8C2C2": "Lernen Sie, wie Sie ein einfaches und zugleich ansprechendes Rehype-Plugin erstellen, das GitHub-Profillinks automatisch in stilvolle, Abzeichen-ähnliche Links mit Profilbildern umwandelt – perfekt, um Ihrem Blog oder Ihren Dokumentationen Persönlichkeit zu verleihen.", 341 341 - "Discover how a tiny Rehype plugin can give your GitHub links a big visual upgrad.95CD8D7DFB0C962AE484": "Entdecken Sie, wie ein kleines Rehype-Plugin Ihren GitHub-Links einen großen visuellen Schub verleiht. Mit nur wenigen Zeilen Code verwandeln wir normale Profillinks in elegante Abzeichen mit Avataren, inspiriert von Antfus Website und unterstützt durch Astro + Starlight.", 342 342 - "Recently, I added a very little neat feature to this blog, which you might have .31ECBA06CD87D5CFEC39": "Kürzlich habe ich diesem Blog eine ganz kleine, aber feine Funktion hinzugefügt, die Ihnen als regelmäßiger Leser vielleicht aufgefallen ist. Es ist nichts riesiges, aber es verleiht jedem Blog diesen kleinen, charmanten Touch, nach dem ich mich schon lange gesehnt habe. Ich spreche ~~schreibe~~ von diesen grünen Abzeichen mit Profilbildern, die Sie auch in diesem Blog sehen können.", 343 343 - "The inspiration to create them was taken from none other than [Antfu](https://gi.F44018DA56F114106E55": "Die Inspiration, sie zu erstellen, stammt von niemand anderem als [Antfu](https://github.com/antfu) selbst, der solche Abzeichen überall auf seiner Website hat (zum Zeitpunkt des Schreibens).", 344 344 - "Initially I thought they would require some long and tedious programming session.255FD9F39C231A32E556": "Anfangs dachte ich, dafür wäre eine lange und mühsame Programmiersitzung nötig, um dieselbe visuelle Schönheit zu erreichen. Doch nach einigem \"Vibe Coding\" – wie [Andrej Karpathy den Begriff prägte](https://x.com/karpathy/status/1886192184808149383) – wurde mir schnell klar, dass diese Abzeichen nur ein kleines [rehype](https://github.com/rehypejs)-Plugin von ihrer Existenz entfernt waren.", 345 345 - "This is the whole code behind the rehype plugin:": "Dies ist der gesamte Code hinter dem Rehype-Plugin:", 346 346 - "Basically all this plugin does, is walking through the HTML, looking for links w.713A33AB7C816E7ADAF6": "Im Wesentlichen durchsucht dieses Plugin das HTML nach Links, die auf ein GitHub-Profil verweisen. Wenn es einen solchen Link findet, fügt es vor dem Textinhalt ein `<img>`-Tag mit dem Profilbild des GitHub-Benutzers oder der Organisation ein. Dies ist dank GitHubs Funktion, das Bild als Ressource hinter dem Profillink mit der Endung `.png` zur Verfügung zu stellen, sehr konsistent möglich. Lesen Sie mehr über diese Funktion in [diesem großartigen Artikel auf `dev.to`](https://dev.to/10xlearner/how-to-get-the-profile-picture-of-a-github-account-1d82).", 347 347 - "With a little bit of additional styling it looks really cute in my opinion. Plea.3CF02F394DFC8ECF3E94": "Mit ein wenig zusätzlichem Styling sieht es meiner Meinung nach wirklich niedlich aus. Bitte beachten Sie, dass dies eine [Starlight](https://starlight.astro.build)-Seite ist und ich verfügbare CSS-Variablen verwende, wie in Zeile vier:", 348 348 - "Now to put everything together, let's say for example in an Astro site, you just.9BE9659FCADE76D6467F": "Um nun alles zusammenzufügen, müssen Sie beispielsweise in einer Astro-Site lediglich das Rehype-Plugin wie folgt zur Konfiguration hinzufügen:", 349 349 - "Read more about the injection of rehype plugins in Astro in [their configuration.D3124728AFCD14A1CEE8": "Lesen Sie mehr über die Einbindung von Rehype-Plugins in Astro in [deren Konfigurationsreferenz](https://docs.astro.build/en/reference/configuration-reference/#markdownrehypeplugins).", 350 350 - "Do not forget to add the CSS in a similar way depending on your framework - in S.8376354E6C8822949CB6": "Vergessen Sie nicht, das CSS auf ähnliche Weise je nach Framework hinzuzufügen – in Starlight können Sie individuelle globale CSS-Stile konfigurieren, indem Sie [diese Anweisungen](https://docs.astro.build/en/guides/styling/#scoped-styles) befolgen – und schon können Sie Ihre eigenen Abzeichen-Links bewundern. Teilen Sie diesen Beitrag gerne mit jedem, den Sie dazu überzeugen möchten, diese Funktionen ebenfalls zu nutzen.", 351 351 - "✨ Bones point": "✨ Bonus-Punkt", 352 352 - "If you want to use such a badge for other links too, I recommend that you craft .E4245F963D0ACC5A33AD": "Wenn Sie ein solches Abzeichen auch für andere Links verwenden möchten, empfehle ich Ihnen, sich selbst eine kleine Astro-Komponente wie diese zu basteln:", 353 353 - "Just make sure that the CSS is globally (or [scope](https://docs.astro.build/en/.4FF4BAAF51A54FE15B11": "Stellen Sie einfach sicher, dass das CSS global ist (oder [scopen](https://docs.astro.build/en/guides/styling/#scoped-styles) Sie es in der obigen Komponente) und es ist einsatzbereit:", 354 354 - "Earworms and the message hidden within the pattern": "Ohrwürmer und die Botschaft, die im Muster verborgen liegt", 355 355 - "Some random thoughts about earworms and their message hidden within the pattern..9902F83DCFE33FCF2F42": "Einige zufällige Gedanken über Ohrwürmer und ihre Botschaft, die im Muster verborgen liegt.", 356 356 - "Yes, this title is a small nod to the excellent Netflix series \"Arcane\", but tha.13B50605E73E31D148F1": "Ja, dieser Titel ist eine kleine Hommage an die ausgezeichnete Netflix-Serie \"Arcane\", aber darum geht es in diesem Beitrag nicht.", 357 357 - "Today, I want to share some thoughts about earworms, a term that originated in G.6A8601A7B3560A913F2E": "Heute möchte ich einige Gedanken über Ohrwürmer teilen, ein Begriff, der ursprünglich aus dem Deutschen („Ohrwurm“) stammt und später als wörtliche Übersetzung ins Englische übernommen wurde. Die Bedeutung hinter diesem eher abstrakten Begriff sind eingängige Melodien—*sticky music*, wie es auf Wikipedia heißt. Dieses Phänomen tritt oft unvorhersehbar auf, besonders wenn unsere Gedanken von der Gegenwart abschweifen.", 358 358 - "While many of my blog-post ideas strike on train rides, while lying in bed, or w.25AB9868BD26D2664DE1": "Während viele meiner Blog-Ideen während Zugfahrten, im Bett liegend oder einfach beim Nachdenken über das Leben auftauchen, entstand die Inspiration für diesen Beitrag buchstäblich unter der Dusche — wie es bei den guten alten *Duschen-Gedanken* sein sollte. Der Grund – wie Sie vielleicht beim Lesen des Themas bereits erahnen können – war ein Ohrwurm von einer Melodie, bei der ich schwören könnte, dass ich sie lange nicht gehört hatte, vielleicht 4–5 Wochen.", 359 359 - "And this always seems to be the confusing parts about earworms: Nobody really kn.02E8F977B7963E92DD1D": "Und dies scheint immer der verwirrende Teil an Ohrwürmern zu sein: Niemand weiß wirklich, wer entscheidet, wann sie „abgespielt“ werden. Ist es das Gehirn, das auf „Play“ drückt, wenn es ein wenig taub ist? Sie wissen, was ich meine, diese Momente, in denen Sie nicht wirklich wissen, woran Sie aktuell denken, und auch nicht darüber nachdenken müssen, worüber Sie nachdenken sollten, sondern einfach den Moment genießen. Es gibt ein weiteres österreichisches Sprichwort für genau dieses Szenario: „ins Narrenkastl schauen“, was so viel bedeutet wie *in die Leere starren*. Und ich denke, genau diese geistesabwesenden Momente sind der Ursprung und Grund, warum Ohrwürmer entstehen.", 360 360 - "But this still leaves the question: Who decides what to play in someone's head w.869DDF0A56F11A495705": "Aber diese Frage bleibt dennoch: Wer entscheidet, was in jemandes Kopf abgespielt wird, wenn es passiert? Wer ist der DJ? Aus meiner eigenen Erfahrung habe ich ein wiederkehrendes Muster bemerkt, besonders wenn man in der letzten halben Stunde gerade Musik gehört hat. Mein Gehirn zumindest neigt dazu, Teile des **vorletzten Songs** zu wiederholen, also des Songs, der vor dem letzten Lied gespielt wurde. Diese Theorie funktioniert noch besser, wenn das letzte Lied in der Mitte pausiert oder einfach nicht perfekt zu Ende abgespielt wurde.", 361 361 - "The exact reason for that is completely unknown to me, but if I had to guess, I .A798D76B65D60FBFC400": "Der genaue Grund dafür ist mir völlig unbekannt, aber wenn ich raten müsste, würde ich sagen, dass die Rhythmen des beendeten Songs (des vorletzten) irgendwo in deinem Kopf nachhallen, da das Lied selbst vielleicht eines dieser „Ich-verstumme-langsam-zum-Ende“-Songs war, was nicht meine liebste Art ist, Musik zu beenden, aber es regt das Gehirn dazu an, weiterzumachen.", 362 362 - "At least that's what I think. I would be very interested if you have experienced.2A5110405B0386450071": "Zumindest ist das meine Vermutung. Ich wäre sehr daran interessiert, ob Sie ähnliche Muster erlebt haben, also schreiben Sie gerne Ihren eigenen Blog-Beitrag darüber oder teilen Sie diesen mit Freunden, um ihn gemeinsam zu diskutieren!", 363 363 - "Stop Outsourcing Your Soul to AI": "Stoppe das Auslagern deiner Seele an KI", 364 364 - "Reflections on AI overuse, its cognitive and social downsides, and a proposed mo.A89AED1EE3DE3D0BCC9B": "Reflexionen über den übermäßigen Einsatz von KI, deren kognitive und soziale Nachteile sowie ein vorgeschlagenes Modell zur Nutzung der KI ohne Beeinträchtigung menschlicher Kreativität und Kommunikation.", 365 365 - "It has been more than two and a half years since the release of ChatGPT. The 30<.25CE9B6E0E88F7C05662": "Es sind mehr als zweieinhalb Jahre vergangen seit der Veröffentlichung von ChatGPT. Der 30<sup>. November</sup> 2022 markierte den Beginn einer neuen Ära: den Anfang der KI. Heute nutzen viele Berufe und Privatpersonen, insbesondere im IT-Sektor, sie täglich. Und wir wissen nicht einmal, wo wir uns im Gartner-Hype-Zyklus befinden oder ob sich KI gemäß Kurzweils \"Gesetz der beschleunigten Rückkehr\" verbessern wird.", 366 366 - "The trend is still rising, but at the same time I have noticed a slight but stea.4471FBD85DD8F244947F": "Der Trend ist weiterhin steigend, aber gleichzeitig habe ich eine leichte, jedoch stetige Verschlechterung von Wissen auf menschlicher Basis bemerkt, da immer mehr kreative Arbeit an KI delegiert wird. Daher habe ich mich entschlossen, einen kleinen Blogbeitrag zu schreiben, in dem ich meine Gedanken teile, um von einem übermäßigen Einsatz Künstlicher Intelligenz abzuraten, da dieser unsere kognitiven Fähigkeiten zerstören könnte. Und obwohl ich weiß, dass nur sehr wenige Menschen dies lesen werden, hält mich das nicht davon ab, es zu versuchen. Andernfalls könnte ich meine Chance verpassen, der Zukunft der Menschheit zu helfen.", 367 367 - "**Disclaimer**: This whole blog post is created from my observations of developm.6E39A6FC36B46BF133B0": "**Hinweis**: Dieser gesamte Blogpost basiert auf meinen Beobachtungen hinsichtlich gesellschaftlicher Entwicklungen mit einem besonderen Fokus auf den Einsatz von Künstlicher Intelligenz und meiner Interpretation davon und ist daher sehr subjektiv. Ich habe keine Studien angesehen, die meine Meinung unterstützen oder ihr widersprechen.", 368 368 - "How people tend to use AI": "Wie Menschen dazu neigen, KI zu nutzen", 369 369 - "AI is awesome. I do not want to question this statement. It helped and still hel.1B73784A0B66F1C26560": "KI ist großartig. Ich möchte diese Aussage nicht in Frage stellen. Sie hat mir geholfen und hilft mir immer noch, meinen Arbeitsablauf zu verbessern, neues Wissen zu sammeln, in neue Gewässer einzutauchen und neue Technologien zu erkunden. Für Menschen, die sich nicht dafür interessieren, wie KI funktioniert, erscheinen solche intelligenten Werkzeuge wie Magie. Deshalb sehe ich gerne, wie ihre Augen funkeln und ihre Münder offen bleiben, wenn ich ihnen erkläre, dass KI lediglich auf Wahrscheinlichkeiten basiert - welches Wort am wahrscheinlichsten das nächste ist, basierend auf Eigenschaften und Emotionen in einem hochdimensionalen virtuellen Raum. [Aber das ist ein anderes Thema.](https://www.youtube.com/watch?v=LPZh9BOjkQs)", 370 370 - "What I would like to focus on is how people have come to use AI, especially over.0645ED8C57D4B143BECD": "Worauf ich mich konzentrieren möchte, ist, wie Menschen angefangen haben, KI zu nutzen, besonders in den letzten Monaten - wenn nicht Jahren. Da unser Gehirn von Natur aus faul ist, neigen wir dazu, mehr Arbeit an KI auszulagern, je weniger fokussiert wir auf eine spezifische Aufgabe sind. Mit anderen Worten: Wenn du nicht den Großteil deines Engagements in dein aktuelles Projekt steckst, bist du wahrscheinlich kurz davor, es einfach einer KI zu übertragen. Ein weiterer möglicher Grund für das Offshoring von Arbeit an die KI-Welt ist Unwissenheit über die zugrunde liegenden Technologien, was es dir erschwert, eigene Lösungen zu entwickeln.", 371 371 - "I am by no means a scientist, but I think that watching AI doing your work - bec.9C73DF2EC8CE97A8882E": "Ich bin keineswegs ein Wissenschaftler, aber ich glaube, dass das Zusehen, wie KI deine Arbeit erledigt - weil das Ergebnis, das du produzierst, aufgrund deiner Inkompetenz nicht mit deiner Vision übereinstimmt -, dir so viel Dopamin gibt, dass dein Gehirn es immer öfter tun möchte. Darüber hinaus strebt der Mensch als soziales Wesen immer danach, mit jemandem verbunden zu sein, und die Interaktion mit KI erfüllt dieses Bedürfnis. Dieses Verhalten ist typisch für unsere Gehirne und tritt auch beim Konsum von sozialen Medien oder explizitem Inhalt auf. Es ist tief in unserem Kortex verankert, und die gesamte Gaming- und Unterhaltungsbranche nutzt dies rücksichtslos, um Geld zu optimieren.", 372 372 - "Negative side effects": "Negative Nebenwirkungen", 373 373 - "I pointed out the main drawbacks of using AI too extensively that I observed. I .5A4212FD0B6A0413D8EA": "Ich habe die Hauptnachteile der extensiven Nutzung von KI, die ich beobachtet habe, beschrieben. Nun werde ich zwei kleinere Gründe nennen, die ich bei mir selbst feststellte, warum du KI nicht für expressive Arbeiten nutzen solltest.", 374 374 - "Communication decline": "Rückgang der Kommunikation", 375 375 - "While watching a promotion video from \"The Browser Company™\" (see the last link .72C7B7D43BFCB10D0126": "Während ich mir ein Werbevideo von \"The Browser Company™\" angesehen habe (siehe den letzten Link im [Ressourcenabschnitt unten](#resources-with-better-evidence)), fiel mir auf, wie weit auseinander liegend Visionen heutzutage sein können. Ich sehe diesen Trend nicht nur beim Dia-Browser, sondern in vielen verschiedenen Aspekten der Technologie und in vielen Teilen unseres Lebens. Eine Seite des Trends möchte KI überall integrieren, wo es möglich ist, und so unsere Abhängigkeit von ihr vergrößern. Ein Beispiel ist die Nutzung von KI, um Nachrichten an unsere engsten Freunde und Kollegen zu verfassen, weil es uns effizienter macht. Ich glaube, dass es uns langfristig einfach nur dumm macht.", 376 376 - "If people do not train their brains for coming up with words for communication, .0E50F4E2AEC63CCFA8CD": "Wenn Menschen ihre Gehirne nicht trainieren, um Wörter für die Kommunikation zu finden, nützliche Sätze zu bilden und Bedeutungen zu schaffen, die von anderen Menschen verstanden werden können, ist unser Fundament des Miteinander-Interagierens gebrochen, und wir wären wieder auf dem Niveau von *Homo habilis* - der letzten Spezies, die vermutlich keine vollständig entwickelte Sprache verwendete. Siehst du, ich habe KI verwendet, um genau diesen Punkt zu recherchieren, aber ich habe meine Worte bewusst gewählt, um mich auszudrücken. Auf diese Weise habe ich nicht nur etwas Neues gelernt, sondern kann es jetzt auch erinnern. Eine Fähigkeit, die du niemals haben wirst, wenn du das Schreiben an eine KI auslagerst.", 377 377 - "Loneliness": "Einsamkeit", 378 378 - "Being alone on a mental level is in my opinion one of the most underrated modern.DF4685B2DE4270080DF1": "Auf einer mentalen Ebene allein zu sein, ist meiner Meinung nach eine der am meisten unterschätzten modernen Gefahren in der Gesellschaft. Das Ironische daran ist, dass, wenn jeder allein ist, wir es alle gemeinsam haben und somit nicht mehr allein mit unserer Einsamkeit sind. Aber meine Gedanken driften wieder in andere Gewässer ab.", 379 379 - "AI strongly encourages us to be alone. It ~~acts~~ was intentionally trained to .CBE7FABA8A468DBE0C14": "KI ermutigt uns stark dazu, allein zu sein. Sie ~~agiert~~ wurde absichtlich so trainiert, als sei sie ein perfekter Freund, Kollege oder wie auch immer du es nennen möchtest. Kürzlich habe ich bemerkt, dass ChatGPTs Antworten explizit meinen Namen beinhalten, was sich für mich auf mehreren Ebenen sehr seltsam anfühlt. Man könnte argumentieren, dass dies eine private künstliche Form von Doxxing ist, was natürlich ein Oxymoron an sich ist, da Doxxing per Definition öffentlich ist. Nichtsdestotrotz: Je öfter du KI nutzt, desto *öfter* willst du KI nutzen. Besonders nach der Einführung von KI-Sprachmodi stieg dieser Trend weiter an, als gäbe es kein Morgen. Glückwunsch, ClosedAI, ihr habt die Sucht neu erfunden.", 380 380 - "In worst case scenarios, this can leads people to fear talking with other people.DE0F55D85004B91A5977": "Im schlimmsten Fall kann dies dazu führen, dass Menschen Angst haben, mit anderen zu sprechen. Freundschaften verlassen. Sich aus der Gesellschaft zurückziehen. Solche Gewohnheiten sind ernste Probleme und sollten am besten von einem Arzt oder Psychologen untersucht werden.", 381 381 - "Proposal of AI usage layer model": "Vorschlag eines Modells für den Umgang mit KI", 382 382 - "Proposing a global solution for all people of such a problem is impossible. Sinc.10DA331D742128D1E376": "Einen globalen Lösungsansatz für alle Menschen für ein solches Problem vorzuschlagen, ist unmöglich. Da jede Person ihre eigenen Erfahrungen mit KI hat, ihre eigenen Gedanken und Gefühle, Optimisten oder Pessimisten, kann ich nicht für alle sprechen. Tatsächlich denke ich, dass ich nur für mich selbst sprechen, lernen und meine eigenen Wege des Umgangs und der Einschränkung meiner KI-Nutzung teilen kann und hoffe, dass diese Erfahrungen auch dir helfen können.", 383 383 - "My ideal experiences with AI - the optimal golden way between the overuse of AI .7279A13F58BE82D3A45D": "Meine idealen Erfahrungen mit KI - der optimale goldene Weg zwischen dem übermäßigen Gebrauch von KI, der kognitiven Erosion nach sich zieht, und der Möglichkeit, den Hype zu ignorieren, ohne Vorteile zu nutzen - besteht darin, KI [genau dann](https://en.wikipedia.org/wiki/If_and_only_if) zu nutzen, wenn und nur wenn du davon profitierst. Mit anderen Worten: Kontrolliere deine Nutzung und beschränke sie auf ein Extrem, bei dem nur du selbst jemals mit den Inhalten in Kontakt kommst, die die KI produziert. Eine solche Einschränkung hat viele Konsequenzen; hier sind einige Beispiele, um besser zu verdeutlichen und zu betonen, was ich meine:", 384 384 - "Use AI for personal learning sessions: If you initially want to dive into a new,.DE3EFB49A432DEF98DFD": "Nutze KI für persönliche Lernsitzungen: Wenn du dich zunächst mit einem neuen, völlig unbekannten Thema beschäftigen möchtest, kann dir KI allgemeine Übersichten geben und Zusammenhänge zu anderen Wissensbereichen und realen Anwendungen aufzeigen. Obwohl dies nicht unbedingt bedeutet, dass du wirklich schneller oder effizienter lernst, hilft es, den ersten Schritt zu machen und den Ball ins Rollen zu bringen.", 385 385 - "Use AI for stupid and repetitive workloads and ask for help if you are certain t.ABC71EA43B6FE421530F": "Nutze KI für stupide und repetitive Aufgaben und frage nach Hilfe, wenn du sicher bist, dass das Problem oder die Aufgabe bereits von anderen tausendfach gelöst wurde. Aktuelle LLMs sind auf Basis bestehender Daten trainiert, weshalb sie gut darin sein sollten, bereits gelöste Probleme zu lösen, aber nicht das Rad neu zu erfinden, sondern die Nutzung des bestehenden runden Instruments vorzuschlagen.", 386 386 - "Do not use AI to express yourself to other people. Think about what meaning you .68CA5EC714F05E5EC131": "Verwende KI nicht, um dich anderen Menschen gegenüber auszudrücken. Denke darüber nach, welche Bedeutung du vermitteln möchtest, welches Wissen du teilen willst, und packe deine Gedanken in deine eigenen Worte. Das hilft dir enorm, deine eigenen Gedanken zu festigen, dich an das Gelernte zu erinnern und dich viel besser zu fühlen.", 387 387 - "Do not use AI to generate complex and creative work. Nowadays, there are hundred.572F9E5BBC126B708CF7": "Nutze KI nicht, um komplexe und kreative Arbeiten zu erstellen. Heutzutage gibt es Hunderte - wahrscheinlich Tausende - von Tools, die dir dabei helfen, Kunst, Musik, Code, Designs, Pläne usw. mit Hilfe von oder komplett durch KI zu erstellen. Obwohl dies den Anschein erweckt, dass du produktiver sein kannst, macht es dich in Wirklichkeit umso unwissender, je öfter du auf diese Methoden zurückgreifst, anstatt das zu tun, was du selbst gerne machst. Es ist völlig in Ordnung, kleine Teile der Arbeit an KI auszulagern, vor allem repetitive Aufgaben, die manuell einfach mehr Zeit in Anspruch nehmen würden. Kreative und originelle Arbeit hingegen sollte menschlich bleiben und mit Liebe hergestellt werden. Wenn dir das, was du tust, überhaupt nicht gefällt, ist dies ein Signal, dass du wahrscheinlich komplett damit aufhören solltest.", 388 388 - "Do not fall for all the shiny AI stuff out there. Tools like [Lovable](https://l.730DE3F722D5456EC235": "Lass dich nicht von all dem glänzenden KI-Zeug dort draußen verführen. Tools wie [Lovable](https://lovable.dev), [GitHub Copilot](https://github.com/features/copilot), [Cursor](https://cursor.com/en), [ChatGPT Voice](https://openai.com/index/chatgpt-can-now-see-hear-and-speak/) und neu auf dem Markt: [GPT-5](https://academy.openai.com/public/resources/intro-gpt-5), um nur einige zu nennen, wollen dir eigentlich nicht helfen. Sie wollen entweder direkt deine Daten oder deinen Arbeitsablauf besitzen, so dass du nicht mehr daraus entkommen kannst, sobald du dich daran gewöhnt hast. Leider gewöhnen sich Menschen faszinierend schnell an KI.", 389 389 - "In short, what I mean is that AI should be used for brainstorming and helping ea.7E4914372E95A248FB12": "Kurz gesagt, ich meine, dass KI zum Brainstorming und zur Unterstützung jedes Einzelnen bei der Erstellung eines Endprodukts verwendet werden sollte - nicht zu verwechseln mit einer durch KI erstellten Endlösung -, aber nicht für die Kommunikation mit anderen Menschen oder die Endergebnisse selbst (z. B. Bildbearbeitung, Blogartikel schreiben, Beiträge in sozialen Medien, Chatkommunikation, Motivationsreden, Essays usw.). Meiner Meinung nach kann das menschliche Gehirn nur durch eigene Fehler und Erfahrungen wachsen und lernen. Und du kannst nie aus deinen Fehlern lernen, wenn diese eigentlich von der KI generiert wurden.", 390 390 - "AI has a place in ideation, but expressive work should remain human.": "KI hat ihren Platz beim Ideensammeln, aber ausdrucksstarke Arbeit sollte menschlich bleiben.", 391 391 - "The Paradigm": "Das Paradigma", 392 392 - "I recently discovered a software design pattern called the \"Onion Architecture\"..1A7DACE78A504AB231FA": "Ich habe kürzlich ein Software-Design-Muster namens \"Onion Architecture\" entdeckt. Um die Erklärung kurz zu halten: Das Hauptprinzip dieser Architektur ist ihre Aufteilung in Schichten, wobei jede Schicht nur mit ihren beiden Nachbarn verbunden ist (Geschwister ausgeschlossen), also der inneren und der äußeren Schicht.", 393 393 - "To transfer this paradigm into the current context, you can imagine the AI as a .5C827B59D0E80CEDD730": "Um dieses Paradigma auf den aktuellen Kontext zu übertragen, kannst du dir die KI als ein Werkzeug vorstellen, das dir zur Verfügung steht, das jedoch von allen anderen Teilen unabhängig ist, da es nur von deinem Gehirn umgeben wird, und nur dein Gehirn kann auf die äußeren Schichten zugreifen, sie manipulieren, erstellen und modifizieren - in diesem Beispiel das Schreiben von Blogs, das Erstellen von Inhalten, die Kommunikation mit Menschen über Chats oder Reden oder das Ausdrücken mit Kunst oder Design.", 394 394 - "Here you can see an image that represents my idea of a limited, but ideal usage .FC6C0DF5BEEB877D3C9A": "Hier siehst du ein Bild, das meine Vorstellung von einer begrenzten, aber idealen Nutzung von KI darstellt:", 395 395 - "-Community ist diejenige, in der ich mich am wohlsten fühle, da sie gleichzeitig am lohnendsten und freundlichsten ist. Nicht alle Communitys können einen so großartigen Status unter OSS erreichen.", 418 418 - "Recently, I discovered another evolving project founded by [pelikhan](https://gi.90E9DCA5FB8FA470B7FE": "Kürzlich entdeckte ich ein weiteres wachsendes Projekt, das von [pelikhan](https://github.com/pelikhan) gegründet wurde und das darauf abzielt, alle deine Dokumentationen, Blogs oder Shop-Seiten automatisch mit Hilfe von KI zu übersetzen, sobald sich etwas ändert. Obwohl ich anfangs skeptisch war, hat mich das Lesen der README.md des Projekts fasziniert.", 419 419 - "The approach of strictly guiding AI into only translating little chunks - mostly.EFA08DBC1CAAB5CE6D3C": "Der Ansatz, die KI strikt dazu anzuleiten, nur kleine Abschnitte – hauptsächlich Sätze oder Absätze – mit perfektionistischen Anweisungen zu übersetzen, ließ mich denken, dass dies wirklich funktionieren könnte. Also probierte ich es in meinem eigenen Projekt aus, meinem Blog. Und zu meiner Überraschung waren diese Übersetzungen viel besser als erwartet. Natürlich merkt man, dass es von einer KI übersetzt wurde – handgefertigte Arbeit wird hoffentlich nie vollständig ersetzt – aber wenn man fair erwähnt, dass man eine KI verwendet, ist dies für Menschen viel zugänglicher als nichts.", 420 420 - "So I took a closer look at the actual code of the project. After noticing some l.04C2097BA41406300A39": "Also warf ich einen genaueren Blick auf den eigentlichen Code des Projekts. Nachdem ich einige kleine Unstimmigkeiten, Verbesserungspotenziale und fehlende, aber sehr coole Funktionen hier und da bemerkte, begann ich ebenfalls, dort beizutragen. Ich meine, nach einem Jahr Beiträge zu größeren Projekten waren Pull Requests für mich nichts Neues.", 421 421 - "You have to know that this was a Friday evening - almost night in my timezone - .F07D43687D090B7997ED": "Man muss wissen, dass dies ein Freitagabend war – fast Nacht in meiner Zeitzone – und [Peli](https://github.com/pelikhan) war gerade online und führte Commit um Commit für das Projekt durch. Ich bemerkte schnell, dass Peli im Gegensatz zu den anderen Projekten, in denen ich mitwirke, keine Zeit mit dem Mergen von Pull Requests verschwendete. Es fühlte sich diese Nacht sehr lohnend an, da ich einfach bis 1 Uhr morgens weitermachte, Peli schneller merge als ich Features, Dokumentationen und Fixes verbessern konnte. Ein weiterer Aspekt, der großartig war, war, dass Peli, da dies ein junges Projekt war, nicht zögerte, einfach zu mergen, es lokal auszuprobieren und dann kleine Fixes zu pushen, die ich übersehen hatte.", 422 422 - "Fast-forward three days and I am now an official contributor to the project, mak.3479DA18B6C4E8D9A8EE": "Drei Tage später bin ich nun ein offizieller Contributor des Projekts und trage fast täglich dazu bei, es immer weiter zu verbessern, wobei mein Hauptfokus auf der Dokumentation und der Unterstützung für mein Herzensprojekt liegt: Starlight – wie ihr vielleicht schon aus [meinen Blogs](/blog/tags/starlight/) erraten habt.", 423 423 - "Peli and I have our virtual productivity sessions between 4pm and 8pm UTC, exten.51E309B378285EAEEA84": "Peli und ich haben unsere virtuellen Produktivitätssitzungen zwischen 16:00 und 20:00 UTC, die an Wochenenden auch länger dauern. Wenn du als Frühaufsteher des Projekts mitmachen oder Interesse daran hast, es zu nutzen, schau es dir gerne auf [GitHub](https://github.com/github) an: [https://github.com/pelikhan/action-continuous-translation](https://github.com/pelikhan/action-continuous-translation)", 424 424 - "Designing a No-Account, No-Database Approach to Time Tracking": "Entwerfen eines Ansatzes für Zeiterfassung ohne Konto und ohne Datenbank", 425 425 - "A private time-tracking app storing all data in your browser — no accounts, no d.F138A1009E69F5985E79": "Eine private Zeiterfassungs-App, die alle Daten in deinem Browser speichert — keine Konten, keine Datenbank, nur einfache Erfassung.", 426 426 - "True Tracker is a minimalist time-tracking app built with Next.js that keeps all.83D3C3B8B44C4975D8DD": "True Tracker ist eine minimalistische Zeiterfassungs-App, die mit Next.js entwickelt wurde und alle Daten in deinem Browser speichert — keine Konten, keine Datenbank, einfach nur vollständige Privatsphäre und Einfachheit.", 427 427 - "The summer of 2024 marked the start of an exciting new chapter for me as a devel.4693500D69418D01C04B": "Der Sommer 2024 markierte den Beginn eines aufregenden neuen Kapitels für mich als Entwickler. Bis zu diesem Zeitpunkt hatte ich hauptsächlich mit Angular gearbeitet, einem Framework, das ich für seinen strukturierten und meinungsstarken Ansatz schätzte. Aber ich war immer neugierig auf React gewesen – es fühlte sich leichter, flexibler und einfach… anders an. Als ich auf Next.js stieß, ein Framework von [Vercel](https://github.com/vercel), das auf React aufbaut und Funktionen wie serverseitiges Rendering und einen Fokus auf Performance bietet, wusste ich, dass es an der Zeit war, etwas Neues auszuprobieren.", 428 428 - "At the same time, I'd been frustrated for ages with session tracking tools like .03C6C9A3C18CFB3FDCD1": "Zur gleichen Zeit war ich seit Langem über Tools zur Sitzungsverfolgung wie Toggl frustriert. Theoretisch sind sie großartig, aber ihre besten Funktionen schienen immer hinter teuren Bezahlwänden versteckt zu sein. Wie jeder Entwickler irgendwann dachte ich: *„Warum baue ich mir nicht einfach mein eigenes?“* Es ist praktisch ein Übergangsritus – jeder Programmierer muss mindestens einmal eine To-Do-App oder einen Tracker in seiner Karriere erstellen. Und so wurde True Tracker geboren.", 429 429 - "True Tracker wouldn't just be any tracker, though. I wanted to do something diff.A78A97DDBF776E5A3623": "True Tracker sollte jedoch kein gewöhnlicher Tracker sein. Ich wollte etwas anderes machen. Zunächst wollte ich es einfach halten: Benutzer konnten Projekte hinzufügen, sie in Aufgaben unterteilen und ihre Zeit in Sitzungen erfassen. Kein Schnickschnack, keine unnötigen Funktionen. Doch hier kommt der Clou — True Tracker würde alles im lokalen Speicher speichern. Keine Konten, keine Cloud-Synchronisierung, und vor allem, niemand (nicht einmal ich) hätte Zugriff auf deine Daten. Es ist dein Tracker, und deine Daten bleiben deine.", 430 430 - "Of course, transitioning from Angular to Next.js wasn't without its challenges. .42B63477ABA3012B4AFB": "Natürlich war der Übergang von Angular zu Next.js nicht ohne Herausforderungen. Wenn ich jemandem, der ein neues Framework lernt, einen Rat geben könnte, dann wäre es dieser: *Lies die Dokumentation.* Ernsthaft, überspring sie nicht. Ich tat es nicht, und das führte zu Chaos. Next.js war kürzlich auf den App-Router umgestiegen, aber ich begann stur, mit dem Page-Router zu bauen. Das führte zu einem Berg von Problemen, als die App nicht richtig gebaut werden konnte, weil kein `app`-Verzeichnis vorhanden war. Ich musste eine leere `.gitkeep`-Datei im Ordner belassen, nur damit Git sie nicht löscht und alles erneut kaputt macht. Nicht mein stolzester Moment.", 431 431 - "After two weeks of nonstop coding, debugging, and running into what felt like ev.6C07E411C9E65C40E90F": "Nach zwei Wochen ununterbrochenem Codieren, Debuggen und dem Gefühl, auf jeden erdenklichen Fehler zu stoßen, funktionierte True Tracker endlich. Ich erinnere mich an diesen ersten erfolgreichen Lauf – es fühlte sich an wie ein innerlicher Schrei *„Es lebt!“*.", 432 432 - "The project also wasn't without its jokes. A friend, after seeing the app's bran.4E6FB3382F951646087C": "Das Projekt war auch nicht ohne seine Witze. Ein Freund meinte nach einem Blick auf das Branding der App: „Also … das ‚true‘ in True Tracker? Das ist ein bisschen zu viel, selbst für das Bild. Es ist *zu viel Wahrheit!*“ Sie hatten nicht unrecht, aber ich nahm es an. Schließlich, wenn man etwas brandet, sollte man es auch durchziehen.", 433 433 - "True Tracker became my first-ever Next.js project—a simple but unique app for tr.252C96FD81AA9227820E": "True Tracker wurde mein allererstes Next.js-Projekt – eine einfache, aber einzigartige App zur Zeiterfassung ohne Bedingungen. Sie ist jetzt live unter [https://true-tracker.trueberryless.org](https://true-tracker.trueberryless.org/).", 434 434 - "The journey taught me more than just how to use Next.js. It taught me about push.4577627813AA93D48F0F": "Die Reise lehrte mich mehr, als nur wie man Next.js verwendet. Sie lehrte mich, Herausforderungen zu überwinden, zwischen Frameworks zu wechseln und die Eigenheiten zu schätzen, die jedes Projekt einzigartig machen. True Tracker ist nicht nur eine App; es ist ein Meilenstein – ein kleiner Beweis dafür, dass auch kleine Ideen eine große Wirkung haben können.", 435 435 - "Designing a Kafka-Based Pipeline and Interactive Graph for Energy Anomaly Detect.6E40C602D9518B54F990": "Entwicklung einer Kafka-basierten Pipeline und eines interaktiven Graphen zur Erkennung von Energieanomalien", 436 436 - "A SOA solution with Siemens AG to analyze power grid anomalies, featuring a Kafk.7FC6E382F6C39EFB4296": "Eine SOA-Lösung mit Siemens AG zur Analyse von Netzwerkanomalien im Stromnetz, mit einer Kafka-Pipeline, PostgreSQL, GraphQL-API und einem Angular-Dashboard zur Visualisierung.", 437 437 - "For our diploma thesis with Siemens AG, we built a service-oriented solution to .E03A3AD551F1B141D274": "Für unsere Diplomarbeit mit Siemens AG haben wir eine dienstorientierte Lösung entwickelt, um Netzwerkanomalien im Stromnetz zu erkennen — mit einer Kafka-Pipeline, PostgreSQL, GraphQL-API sowie einem Angular-Dashboard mit Tabellen und einem interaktiven Graphen zur Echtzeitvisualisierung.", 438 438 - "During my fifth year at HTL Krems (2023/24), every student was required to compl.33C68E23474119532BF0": "Während meines fünften Jahres an der HTL Krems (2023/24) musste jeder Schüler eine Diplomarbeit absolvieren – ein umfangreiches Projekt, das in zwei Hauptteile unterteilt war: theoretisch und praktisch. In Zweierteams verfassten wir eine theoretische Arbeit von etwa 100 Seiten, in der wir unser gewähltes Thema vorstellten, analysierten und erklärten.", 439 439 - "The theoretical part was organized into three sections. The first involved gathe.383BAC1FDBC3A2145A6D": "Der theoretische Teil war in drei Abschnitte gegliedert. Der erste bestand darin, vorhandenes Wissen aus glaubwürdigen Quellen wie Büchern und früheren Arbeiten zu sammeln und zusammenzufassen. Der zweite konzentrierte sich auf die Erkenntnisse und Ergebnisse, die wir aus unserem Prototyp – einer Softwarelösung, die wir für den praktischen Teil entwickelten – gewonnen hatten. Schließlich kombinierte der dritte Abschnitt diese beiden Ansätze und bot einen kritischen Vergleich und eine Reflexion darüber, was wir durch das Projekt insgesamt gelernt hatten.", 440 440 - "The practical aspect required us to design and implement a solution, either soft.9F57571ADA22C3F461BC": "Der praktische Teil verlangte von uns, eine Lösung zu entwerfen und umzusetzen, die entweder software- oder hardwarebasiert war, um ein realweltliches Problem zu lösen. Mein Teamkollege Clemens Schlipfinger und ich entschieden uns ausschließlich auf Software zu konzentrieren, um die Zuverlässigkeit zu gewährleisten. Hardware kann unvorhersehbare Probleme verursachen, aber Software – insbesondere, wenn sie in robusten Docker-Containern bereitgestellt wird – bietet eine konsistente Umgebung, die überall nahtlos funktioniert.", 441 441 - "What made our project particularly exciting was our partnership with Siemens AG,.E3DFFF62A58AA54FFAF4": "Was unser Projekt besonders spannend machte, war unsere Partnerschaft mit Siemens AG, einem renommierten multinationalen Unternehmen, das auf Energie-, Automatisierungs- und Digitalisierungslösungen spezialisiert ist. Diese Zusammenarbeit war unter unseren Mitschülern selten und verlieh unserem Projekt eine professionelle Dimension. Siemens beauftragte uns, eine dienstorientierte Softwarelösung zur Analyse von Anomalien im europäischen Stromnetz zu entwickeln.", 442 442 - "The system we built comprised several components, each designed to handle a spec.66064ADCDD1375BE0F9A": "Das von uns entwickelte System bestand aus mehreren Komponenten, die jeweils für eine spezifische Funktion konzipiert waren. Im Kern befand sich eine Kafka-Anwendung, die für die Erfassung von Daten verantwortlich war – Berichte über Netzwerkanomalien, die wir als „Findings“ bezeichneten. Diese Berichte dokumentierten Ausfälle und Unregelmäßigkeiten im komplexen europäischen Stromnetz, das aus Millionen von verbundenen Komponenten wie Transistoren, Schaltern und Generatoren besteht. Kafka übermittelte die neuesten Anomalien an eine PostgreSQL-Datenbank, die dann über eine GraphQL-API zugänglich gemacht wurde. Diese API bot umfassende Funktionen wie Paginierung, Filterung und Abfragen, um eine nahtlose Integration mit unserem Angular-basierten Frontend zu gewährleisten.", 443 443 - "The frontend was designed as a user-friendly dashboard with three key sections:": "Das Frontend wurde als benutzerfreundliches Dashboard mit drei Hauptbereichen gestaltet:", 444 444 - "Anomalies Table – A searchable, paginated, and filterable table for quick naviga.530B334CB3F183450BCF": "Anomalien-Tabelle – Eine durchsuchbare, paginierte und filterbare Tabelle für die schnelle Navigation durch Anomalien.", 445 445 - "Graph View – A dynamic visualisation of anomaly data, making it easier to pinpoi.FA55A622C6F84DDFA484": "Graph-Ansicht – Eine dynamische Visualisierung der Anomaliedaten, um die Quelle eines Problems im weitläufigen, komplexen Netz leichter zu lokalisieren.", 446 446 - "Overall Dashboard – Key metrics and insights for quick, actionable overviews.": "Gesamtdashboard – Wichtige Kennzahlen und Einblicke für schnelle, umsetzbare Übersichten.", 447 447 - "Clemens and I divided our responsibilities evenly. Clemens handled the backend s.57A227B299EB92B6AC25": "Clemens und ich teilten unsere Verantwortlichkeiten gleichmäßig auf. Clemens übernahm die Backend-Systeme, einschließlich Kafka, PostgreSQL und der GraphQL-API, und sorgte für eine zuverlässige und effiziente Daten-Pipeline. Ich übernahm die Rolle des Projektleiters, koordinierte die Kommunikation mit Siemens und entwickelte das Frontend, um die nahtlose Integration der verschiedenen Komponenten sicherzustellen. Diese Zusammenarbeit ermöglichte es uns, unsere Stärken einzusetzen und eine ausgewogene Arbeitsverteilung aufrechtzuerhalten.", 448 448 - "Our final product not only met Siemens' requirements but also demonstrated the p.3DFD3D918F5BEBCA8D06": "Unser Endprodukt erfüllte nicht nur die Anforderungen von Siemens, sondern demonstrierte auch die Stärke einer gut gestalteten dienstorientierten Architektur (SOA) zur Lösung komplexer, realweltlicher Probleme. Es war äußerst befriedigend, unsere Software zuverlässig arbeiten zu sehen und verwertbare Einblicke zur Bewältigung von Stromnetzanomalien zu liefern.", 449 449 - "For more details about our work, feel free to explore our thesis [here](https://.404251D1094C50B2114B": "Für weitere Details zu unserer Arbeit können Sie unsere Thesis [hier](https://trueberryless.org/thesis.pdf) 📜 einsehen oder unseren Videokurs [hier](https://videos.trueberryless.org/videos/thesis/) 🎥 anschauen (beides nur auf Deutsch verfügbar).", 450 450 - "![Terraform Variables Resolution Example](../../../assets/blog/terraform-variabl.112614E03BD3DF5C3717": "Terraform-Variablen-Auflösungsbeispiel", 451 451 - "How I Built a GitHub Profile README That Shouldn't Exist (But It Does)": "Wie ich ein GitHub-Profil-README erstellt habe, das es eigentlich nicht geben sollte (aber es gibt es)", 452 452 - "Creating a standout <a class=\"gh-badge\" href=\"https://github.com/github\"><img sr.2311B04CBE33507503C4": "Ein herausragendes <a class=\"gh-badge\" href=\"https://github.com/github\"><img src=\"https://github.com/github.png\" alt=\"github\" />GitHub</a>-Profil-README zu erstellen, bedeutet nicht nur, ein paar Abzeichen hinzuzufügen — es geht darum, technische Grenzen zu überschreiten. In diesem tiefgehenden Einblick erkunde ich Low-Level-SVG-Manipulation, HTML-zu-SVG-Konvertierung, Inline-Animationen und vollständige Automatisierung mit GitHub Actions, um das vielleicht technisch fortschrittlichste GitHub-README zu erstellen. Von einem dynamischen Bento-Grid, das alle 5 Minuten aktualisiert wird, bis hin zum Einbetten von Live-SVGs ohne externe Anfragen hat dieses Projekt mein Profil in eine lebendige, sich selbst aktualisierende Präsentation meiner Arbeit verwandelt. Neugierig, wie ich das gemacht habe? Lass uns loslegen. 🚀", 453 453 - "Read the more formal story [here](/blog/github-profile-readme/)": "Lies die formellere Geschichte [hier](/blog/github-profile-readme/)", 454 454 - "GitHub's Markdown [strips out a not a huge number of HTML tags, but important on.205FA73346A246681FB2": "Die GitHub-Markdown [entfernt nicht eine riesige Anzahl von HTML-Tags, aber wichtige](https://github.github.com/gfm/#disallowed-raw-html-extension). Aus Sicherheitsgründen natürlich (und das respektiere ich vollkommen, GitHub, wirklich ❤️), aber das bedeutete, dass mein perfektes Design komplett **unbrauchbar** war.", 455 455 - "I tried tweaking it. Replacing unsupported tags with ones that worked. Maybe I c.9C1A1617434D20136447": "Ich habe versucht, es anzupassen. Nicht unterstützte Tags durch funktionierende zu ersetzen. Vielleicht konnte ich etwas retten? *Nein*. Die Einschränkungen von Markdown machten mein Traum-Layout unmöglich.", 456 456 - "When in doubt, automate. If I couldn't get my HTML in directly, maybe I could ge.1858A8B032C310D0855B": "Wenn du dir unsicher bist, automatisiere es. Wenn ich mein HTML nicht direkt einfügen konnte, vielleicht konnte ich etwas Dynamisches mit einem Skript generieren? Also habe ich ein Python-Skript zusammengestellt, um mein neuestes GitHub-Repository abzurufen und in mein README einzufügen. Ich lasse hier einfach ein paar zufällige Bytes, die einige als Python-Code bezeichnen könnten:", 457 457 - "This seemed like a step in the right direction. It was automated. It was functio.C4E6DC32E9331691DF3A": "Das schien ein Schritt in die richtige Richtung zu sein. Es war automatisiert. Es funktionierte. Aber es löste nicht mein eigentliches Problem. 😢", 458 458 - "This wasn't about dynamic content — it was about *design*. And no amount of Pyth.DA93C57EF8343BE1D312": "Es ging nicht um dynamischen Inhalt — es ging um *Design*. Und keine Menge Python-Scripting würde Markdown schön aussehen lassen.", 459 459 - "![Throw away a good idea](../../../assets/blog/technically-impressive-github-pro.03B551FCEE5B8C4D1AE7": "Eine gute Idee wegwerfen", 460 460 - "I realised that if I couldn't directly embed HTML into Markdown, I could fake it.9ED2A1ECED976015FF4F": "Mir wurde klar, dass, wenn ich HTML nicht direkt in Markdown einfügen konnte, ich es vortäuschen konnte, indem ich verschachtelte SVGs verwendete. (Übrigens ist dies stark vereinfacht; der tatsächliche Prozess dauerte Tage, die sich wie Wochen, wenn nicht Monate anfühlten, aber ich weiß, dass ihr das sowieso nicht alles lesen würdet, also wen interessiert's?)", 461 461 - "Encode all images in **Base64** (because GitHub Markdown won't load external ima.E9111278458075460675": "Alle Bilder in **Base64** kodieren (da GitHub Markdown keine externen Bilder innerhalb eines SVG mit HTML lädt).", 462 462 - "It updates itself every 5 minutes, runs completely on GitHub Actions, and doesn'.83A1BE6CD135F68513B3": "Es aktualisiert sich alle 5 Minuten, läuft vollständig auf GitHub Actions und ist nicht auf externe Dienste angewiesen. Es ist wunderschön. Es ist effizient. Und vor allem ist es technisch absurd im besten Sinne.", 463 463 - "Isn't that bad compared to the [old README.md](https://github.com/trueberryless/.6E17F52CECF11CDBE670": "Ist das nicht schlecht im Vergleich zum [alten README.md](https://github.com/trueberryless/trueberryless/blob/5dce4ad0033b00829f8ec3756827057017447a65/README.md). Und kommentier bitte nicht, warum ich K-Pop höre! Es ist besser, als du denkst, glaub mir.", 464 464 - "But in the end, I created a [GitHub](https://github.com/github) profile README t.B8AC0FFCEFB516E68262": "Aber am Ende habe ich ein [GitHub](https://github.com/github)-Profil-README erstellt, das *eigentlich nicht existieren sollte* — aber es existiert. Und ich liebe es.", 465 465 - "![Default styling of the Starlight sidebar](../../../assets/blog/starlight-sideb.0331D38A07873367F480": "Standarddesign der Starlight-Seitenleiste", 466 466 - "![Starlight sidebar where the margin between root-level items is smaller](../../.89CA79CF269489CCFFC6": "Starlight-Seitenleiste, bei der der Abstand zwischen den Elementen auf Root-Ebene kleiner ist", 467 467 - "![Starlight sidebar with lighter font weight](../../../assets/blog/starlight-sid.4E8DAA65B21751F8D390": "Starlight-Seitenleiste mit leichterem Schriftgewicht", 468 468 - "![Starlight sidebar with dimmer colors](../../../assets/blog/starlight-sidebar-w.BD6139B97F87359FF661": "Starlight-Seitenleiste mit schwächeren Farben", 469 469 - "![Starlight sidebar with smaller font size](../../../assets/blog/starlight-sideb.951F34B3CACD02E0A935": "Starlight-Seitenleiste mit kleinerer Schriftgröße", 470 470 - "![Final result with desktop view on the left and mobile view on the right](../...FD8F8FAFE2FBDBE76329": "Endergebnis mit Desktop-Ansicht auf der linken und mobiler Ansicht auf der rechten Seite", 471 471 - "A Stylish Way to Give Credit in Starlight Projects": "Eine stilvolle Möglichkeit, Anerkennung in Starlight-Projekten zu geben", 472 472 - "Inspired by the Starlight credit in Astro docs, I made a customizable plugin tha.6909F2E2BE5CAB2C314C": "Inspiriert von der Starlight-Anerkennung in den Astro-Dokumentationen habe ich ein anpassbares Plugin entwickelt, das Links zu Starlight, Astro und dem Starlight Blog bietet, mit Unterstützung für mehrere Sprachen.", 473 473 - "Starlight Cooler Credit is a customizable plugin that gives stylish, multilingua.4FCC5DBB2DC131D33CAC": "Starlight Cooler Credit ist ein anpassbares Plugin, das stilvolle, mehrsprachige Anerkennungslinks zu Starlight, Astro und dem Starlight Blog bietet – und damit eine kleine Idee in eine globale Zusammenarbeit verwandelt.", 474 474 - "It all started when I noticed the credit link to [Starlight](https://starlight.a.E3176BDD24D595103F8B": "Alles begann, als mir der Anerkennungslink zu [Starlight](https://starlight.astro.build) in den [Astro-Dokumentationen](https://docs.astro.build) auffiel. Am unteren Ende des Inhaltsverzeichnisses positioniert, war er einfach, aber stilvoll, und ich liebte, wie subtil er Anerkennung gab. Als Starlight seine eigene Anerkennungsoption einführte, aktivierte ich sie in all meinen Projekten. Sie war klein, unaufdringlich und am unteren Ende jeder Seite platziert – nett, aber leicht zu übersehen.", 475 475 - "That’s when I thought, *What if others want a cooler credit option, like the one.A4A2F8A54AB64409161B": "Da dachte ich, *Was ist, wenn andere eine coolere Anerkennungsoption möchten, wie die aus den Astro-Dokumentationen?* Also machte ich mich daran, ein Plugin zu erstellen. Anfangs war es nur ein spaßiges Projekt, um auf auffälligere Weise Links zu Starlight und Astro bereitzustellen. Ich begann mit zwei Voreinstellungen – eine für Starlight und eine für Astro – und teilte meine Arbeit auf dem Astro-Discord.", 476 476 - "That’s where things took off. [One awesome Astro maintainer](https://www.rainsbe.B87402A9E163AA44FD52": "Und dort nahm alles Fahrt auf. [Ein großartiger Astro-Maintainer](https://www.rainsberger.ca/) schlug vor, *\"Warum nicht auch den Starlight-Blog verlinken?\"* und ich dachte, *Was für eine brillante Idee!* Ich fügte den Blog als dritte Voreinstellung hinzu, und plötzlich war das Plugin mehr, als ich je geplant hatte.", 477 477 - "But I wasn’t done yet. It bugged me that the credits were always in English, so .2030C81E5E275567F632": "Aber ich war noch nicht fertig. Es störte mich, dass die Anerkennung immer auf Englisch war, also beschloss ich, sie automatisch anhand der von Starlight unterstützten Sprachen übersetzen zu lassen. Da begann das eigentliche Abenteuer. Ich wandte mich an die Community, um Hilfe bei der Übersetzung des Plugins in verschiedene Sprachen zu erhalten. Die Resonanz war unglaublich! Menschen aus der ganzen Welt boten ihre Unterstützung an, und was als Solo-Projekt begann, wurde zu einer globalen Zusammenarbeit. Unterwegs fand ich neue Freunde und lernte so viel von allen Beteiligten. Jetzt unterstützt das Plugin etwa zehn Sprachen, und es kommen immer mehr Übersetzungen hinzu.", 478 478 - "What started as a simple idea turned into something I’m really proud of: **Starl.95365D5202F9DED635D6": "Was als einfache Idee begann, wurde zu etwas, auf das ich wirklich stolz bin: **Starlight Cooler Credit**. Es ist mehr als nur ein Plugin – es ist eine Möglichkeit, Anerkennung mit Stil, Anpassungsfähigkeit und einem Hauch von globaler Teamarbeit zu geben.", 479 479 - "If you’re curious, you can check it out at [starlight-cooler-credit.trueberryles.6ABA7C0A45AE4104F8C3": "Wenn du neugierig bist, kannst du es dir unter [starlight-cooler-credit.trueberryless.org](https://starlight-cooler-credit.trueberryless.org/) ansehen. Probier es aus – ich denke, du wirst es genauso lieben wie ich!", 480 480 - "![Cloudflare API Token](../../../assets/blog/setup-kubernetes-with-cilium-and-cl.03ECE300FA8789879B29": "Cloudflare API-Token", 481 481 - "Organising School Life: The Journey Behind Mutanuq": "Die Organisation des Schullebens: Die Reise hinter Mutanuq", 482 482 - "A fast, Markdown-powered website that organises school content, simplifies learn.C76D3D9450130FF80C83": "Eine schnelle, Markdown-basierte Website, die Schulinhalte organisiert, das Lernen vereinfacht und das Bildungswachstum unterstützt.", 483 483 - "Mutanuq is a fast, Markdown-powered website I built to organize school content, .8D9E316ADD5966467825": "Mutanuq ist eine schnelle, Markdown-basierte Website, die ich entwickelt habe, um Schulinhalte zu organisieren, das Lernen effizienter zu gestalten und eine verlässliche Ressource sowohl für meine Mitschüler als auch für mich selbst zu schaffen.", 484 484 - "In my second year at HTL Krems, 2021, I embarked on a project that combined two .4F2292C7BC6324244DF9": "Im zweiten Jahr an der HTL Krems, 2021, begann ich ein Projekt, das zwei Leidenschaften von mir vereinte: meine eigene Website zu erstellen und bessere Wege zu finden, den unendlichen Strom an Schulmaterial zu organisieren. Wie viele Schüler waren meine Notizen über OneNote, Word-Dateien, Excel-Tabellen, Google Drive und sogar Tools wie [Witeboard](https://witeboard.com/) verstreut. Das Chaos war überwältigend und machte es schwer, sich effektiv auf das Lernen zu konzentrieren.", 485 485 - "Driven by the vision of streamlining this process—not just for me, but also for .767678E51699FE7BA56A": "Getrieben von der Vision, diesen Prozess zu vereinfachen – nicht nur für mich, sondern auch für meine Mitschüler – entschied ich mich, eine zentrale Plattform zu schaffen, um Schulinhalte zusammenzufassen. Mein Ziel war zweigeteilt: Das Lernen zu vereinfachen und meine Mitschüler zu motivieren.", 486 486 - "At that time, I wasn’t aware of frameworks that could make building documentatio.46FC3F67CBB578E4C0C2": "Zu jener Zeit kannte ich keine Frameworks, die es einfacher gemacht hätten, dokumentationsartige Websites zu erstellen. Stattdessen nutzte ich reines HTML, CSS und JavaScript, um die ersten Versionen dessen zu entwickeln, was ich *Schneider IT* nannte. Obwohl ich es liebte, daran zu arbeiten, waren meine ersten Versuche umständlich – die dynamische Generierung des Inhaltsverzeichnisses und der Seitenleiste mit eigenem JavaScript-Code führte zu quälend langsamen Ladezeiten. Es dauerte über 10 Sekunden, bis alles angezeigt wurde!", 487 487 - "Despite the setbacks, I kept iterating. By 2023, I had created and discarded abo.4C51D8C17C02D0DB4703": "Trotz der Rückschläge arbeitete ich weiter daran. Bis 2023 hatte ich rund 10 Versionen der Website erstellt und verworfen, immer auf der Suche nach einem klareren Design und einem effizienteren Verwaltungssystem. Das Potenzial der Website war mir klar, doch an der Benutzerfreundlichkeit fehlte es noch.", 488 488 - "That’s when I stumbled upon [Starlight](https://starlight.astro.build/), a power.2C6631782B77735B3205": "Dann entdeckte ich [Starlight](https://starlight.astro.build/), ein leistungsstarkes und beeindruckendes Framework, erstellt von [Chris Swithinbank (@delucis)](https://github.com/delucis), um schnelle, Markdown-basierte Websites zu entwickeln. Diese Entdeckung war ein Wendepunkt – sie erlaubte mir, zwei meiner Leidenschaften zu verbinden: Websites zu erstellen und Markdown für seine Einfachheit und Eleganz zu nutzen.", 489 489 - "With the transition to Starlight, Schneider IT evolved into *Mutanuq*. The new n.99A51B0573CAAE76AA7D": "Mit dem Wechsel zu Starlight entwickelte sich *Schneider IT* zu *Mutanuq*. Der neue Name markierte einen Neuanfang und spiegelte die optimierte, modernisierte Website wider, die sie inzwischen geworden war. Ich schrieb alles neu, optimierte die Leistung der Website und konzentrierte mich darauf, Inhalte zu erstellen, die speziell auf die Bedürfnisse meiner Mitschüler zugeschnitten waren, insbesondere für bevorstehende Prüfungen.", 490 490 - "The transformation paid off. Friends began using the website regularly and gave .0C49D62224878320182A": "Die Transformation machte sich bezahlt. Freunde begannen, die Website regelmäßig zu nutzen und gaben begeistertes Feedback, wie *„Bro, diese Website sieht fantastisch aus!“* Mutanuq war nicht nur ein Werkzeug für Prüfungen – es wurde zu einer vertrauenswürdigen Ressource für meine Mitschüler und einem persönlichen Archiv für all das Wissen, das ich über die Schule hinaus bewahren wollte.", 491 491 - "Thanks to Starlight, managing and expanding Mutanuq became effortless, and the p.DA9EDB995FD28655BD1F": "Dank Starlight wurde das Verwalten und Erweitern von Mutanuq mühelos, und das Projekt entwickelte sich zu etwas, das ich bis heute gerne weiterführe. Was als *Schneider IT* begann – eine kleine Idee, meine Notizen zu organisieren – erblühte zu *Mutanuq*, einer Plattform, die das Lernen für andere vereinfacht und wertvolles Wissen für mein zukünftiges Ich bewahrt.", 492 492 - "Designing a Profile That Works Within GitHub's Rules": "Entwerfen eines Profils, das innerhalb der GitHub-Regeln funktioniert", 493 493 - "How I Built a GitHub Profile README That Shouldn't Exist But It Does": "Wie ich ein GitHub-Profile-README erstellt habe, das es eigentlich nicht geben sollte, aber es existiert", 494 494 - "Every great project starts with a realization of a problem. My GitHub profile RE.481577399AECDF28BE26": "Jedes großartige Projekt beginnt mit der Erkenntnis eines Problems. Mein GitHub-Profile-README war überladen, voll mit zu vielen Informationen, zu vielen Abzeichen und einer überwältigenden Menge an Inhalten, die Stil und Struktur fehlten. Es gab Erfolge von Hackathons, GitHub-Beitragsgrafiken, verschiedene technische Abzeichen und vieles mehr, was es visuell unansprechend und schwer navigierbar machte. Anfangs dachte ich, dies sei eine effektive Art, mich zu präsentieren, aber mit der Zeit wurde klar, dass die Informationen eher überwältigend als informativ waren. Ich wollte etwas Neues, einen raffinierteren und visuell ansprechenderen Ansatz, um mein Profil zu präsentieren, und die Idee, ein Bento-Raster zu implementieren, kam mir in den Sinn. Das Ziel war es, ein Layout zu schaffen, das nicht nur funktional, sondern auch ästhetisch beeindruckend und strukturiert ist.", 495 495 - "The first step was designing an ideal layout using HTML and CSS. The result was .6D5E560BE64C73324B74": "Der erste Schritt bestand darin, ein ideales Layout unter Verwendung von HTML und CSS zu entwerfen. Das Ergebnis war vielversprechend, ein strukturiertes und optisch ansprechendes Design, das die beabsichtigten Informationen effektiv vermittelte. Doch die direkte Umsetzung in meinem GitHub-Profile-README war nicht unkompliziert. GitHub-Flavored Markdown unterliegt strengen Einschränkungen hinsichtlich der unterstützten HTML-Elemente aufgrund von Sicherheitsvorgaben. Viele essenzielle HTML-Tags waren eingeschränkt, was es unmöglich machte, das Design wie vorgesehen einzubetten. Das Verständnis dieser Einschränkungen bedeutete, dass der gesamte Ansatz neu durchdacht werden musste.", 496 496 - "Faced with these restrictions, I considered alternative ways to dynamically gene.2567BD537B285ECB001A": "Angesichts dieser Einschränkungen überlegte ich, alternative Wege zu finden, um die Inhalte dynamisch zu generieren und zu präsentieren. Ein Ansatz bestand darin, die Inhaltsaktualisierungen mit einem Python-Skript zu automatisieren, um mein neuestes GitHub-Repository abzurufen und es dynamisch in das README einzufügen. Das Skript griff auf die GitHub-API zu, rief das zuletzt aktualisierte Repository ab und änderte entsprechend das README. Obwohl dies ein interessantes Experiment in Automatisierung war, löste es nicht das Kernproblem, nämlich die Notwendigkeit eines strukturierten und visuell ansprechenden Designs.", 497 497 - "Considering alternative approaches, I briefly entertained the idea of taking a s.780BAADFF3D433749DDA": "Unter Berücksichtigung alternativer Ansätze dachte ich kurzzeitig daran, einen Screenshot des entworfenen HTML-Layouts zu machen und ihn als statisches Bild im README einzubetten. Obwohl dies das Problem visuell gelöst hätte, fühlte es sich wie eine unelegante Lösung an, die mangelnde Flexibilität und Reaktionsfähigkeit aufwies. Weitergehend suchte ich nach einer Methode, die sowohl Struktur als auch Anpassungsfähigkeit ermöglichte und dennoch dynamische Inhaltsaktualisierungen beibehielt.", 498 498 - "SVGs emerged as a potential solution. They support scalability, maintain visual .0193206311AC8FC941A3": "SVGs traten als eine potenzielle Lösung in Erscheinung. Sie unterstützen Skalierbarkeit, bewahren die visuelle Klarheit über verschiedene Auflösungen hinweg und ermöglichen das Einbetten von Texten und anderen Elementen. Ein frühes Experiment beinhaltete das Einbetten von HTML in ein SVG unter Verwendung des `foreignObject`-Tags. Obwohl dies konzeptionell vielversprechend war, erwies sich die Umsetzung als komplex und wurde vorübergehend beiseite gelegt. Beim späteren Zurückkehren zum Problem war ein strukturierterer Ansatz erforderlich.", 499 499 - "The final approach involved using a composite SVG structure. The solution consis.F542E5E0B858565590BE": "Der endgültige Ansatz beinhaltete die Verwendung einer zusammengesetzten SVG-Struktur. Die Lösung bestand aus mehreren Schlüsselkomponenten: Konvertierung des ursprünglichen HTML-Layouts in eine SVG-Darstellung, Kodierung von Bildern mit Base64, um sicherzustellen, dass sie korrekt geladen wurden, Integration dynamischer Elemente wie GitHub-Statistiken und Spotify-Status-Updates als Inline-SVGs sowie Automatisierung der Updates über GitHub Actions. Durch den Einsatz dieser Techniken wurde das Bento-Rasterlayout voll funktionsfähig, konnte sich selbst aktualisieren und behielt dabei ein sauberes, strukturiertes Erscheinungsbild innerhalb der Einschränkungen von GitHub-Flavored Markdown bei.", 500 500 - "A critical turning point was the discovery of a Stack Overflow post detailing a .BFAFB816D1969BB990B1": "Ein entscheidender Wendepunkt war die Entdeckung eines Stack Overflow-Beitrags, der eine Methode zur effizienten und effektiven Konvertierung von HTML in SVG beschrieb. Diese Methode bot eine strukturierte Möglichkeit, die erforderlichen SVG-Elemente zu generieren, während das beabsichtigte Design beibehalten wurde. Durch die Kombination dieser Methode mit Base64-Kodierung für Bilder und GitHub Actions zur Automatisierung entstand eine vollständig realisierte Lösung, die alle ursprünglichen Anforderungen erfüllte.", 501 501 - "The final implementation consists of a refined and visually striking GitHub prof.C95E5BCA4CC5C610AAF2": "Die endgültige Implementierung besteht aus einem verfeinerten und visuell eindrucksvollen GitHub-Profile-README, das dynamische Inhaltsaktualisierungen integriert und dabei eine elegante Struktur beibehält. Sie präsentiert Informationen klar, ohne unnötige Überladung, und ist vollständig automatisiert, aktualisiert sich alle fünf Minuten ohne manuelles Eingreifen. Das Projekt erforderte umfangreiche Recherche und Experimente mit SVGs, GitHub Actions und Markdown-Einschränkungen. Der Prozess verlangte Ausdauer und Problemlösungsfähigkeiten, um innerhalb der Plattformbeschränkungen ein technisch beeindruckendes Ergebnis zu erzielen. Das Resultat ist ein GitHub-Profile-README, das Design, Automatisierung und Funktionalität innerhalb der Beschränkungen der Plattform effektiv ausbalanciert.", 502 502 - "If you're now inspired to create a stunning GitHub profile README yourself, read.BC2C5ED3BDEE87A869B8": "Wenn du nun inspiriert bist, selbst ein beeindruckendes GitHub-Profile-README zu erstellen, lies meinen [technischeren und humorvollen Blog-Beitrag](/blog/technically-impressive-github-profile-readme/) oder schau direkt in mein Repository [github.com/trueberryless/trueberryless](https://github.com/trueberryless/trueberryless/tree/7519c6f50094bdfd6fb47f610e6638ac8efdd6ad). Und falls dir meine Arbeit hilft, gib ihr gern einen ⭐ und folge mir auf GitHub unter [trueberryless](https://github.com/trueberryless)! 🚀", 503 503 - "I noticed this trend myself, as you can clearly see from [some of my posts where.6F67065684689D74728B": "Diesen Trend habe ich selbst bemerkt, wie man deutlich sehen kann aus [einigen meiner Beiträge, bei denen ich zugab, KI verwendet zu haben](/blog/authors/artificial-intelligence/), um mir beim Schreiben zu helfen. Aber ich denke, das ist keine Schande. Jeder Content-Ersteller, der KI einsetzt, sollte aus erster Hand die Fallstricke erleben, die entstehen, wenn Inhalte direkt für den Betrachter oder Leser erstellt werden, um zu erkennen, wie wenig sie letztlich über das Thema wissen. Dies ermöglicht es ihnen, aus ihrem Fehler zu lernen und sich bewusst zu sein, wie leicht Faulheit zu einem solch verachteten Weg führen kann. Nur die Exzellenten unter uns strebten von Anfang an nach handgefertigten Inhalten.", 504 504 - "![Cognitive Erosion Paradigm: Layered, green circles with \"AI\" in the centre, su.38D1FAC9088D0BD4738E": "Kognitionserosionsparadigma: Geschichtete, grüne Kreise mit \"KI\" in der Mitte, umgeben vom \"Gehirn\", das von mehreren kreisförmigen Segmenten umgeben ist, welche im Uhrzeigersinn mit \"Design\", \"Blog\", \"Chats\", \"Kunst\", \"Inhalt\" und \"Rede\" beschriftet sind.", 505 505 - "From Balloons to Binary: A 20th Birthday Packed with Clues": "Von Luftballons zu Binärcode: Ein 20. Geburtstag voller Rätsel", 506 506 - "This is the story of creating a true art masterpiece.": "Dies ist die Geschichte der Schaffung eines wahren Kunstmeisterwerks.", 507 507 - "This year, I turned 20 - and instead of simply lighting candles and inflating ba.CEC0F0AD03DAEF815274": "Dieses Jahr wurde ich 20 – und anstatt einfach Kerzen anzuzünden und Luftballons aufzublasen, wollte ich auf kreativere und persönlichere Weise feiern. Die Idee? Die Zahl 20 in so vielen überraschenden, cleveren und versteckten Formen wie möglich in einem dekorierten Wohnzimmer zu verstecken – und dann alles in einem einzigen Foto festzuhalten. Ob durch mathematische Rätsel oder visuelle Ostereier, der Raum verwandelte sich in ein fröhliches Rätsel voller spielerischer Details.", 508 508 - "I Turned 20 - And Turned It Into a Puzzle": "Ich wurde 20 – und verwandelte es in ein Puzzle", 509 509 - "The final result wasn't just a festive setting, but a carefully designed puzzle .B767471D3FEF6C98BD69": "Das Endergebnis war nicht nur eine festliche Umgebung, sondern ein sorgfältig gestaltetes Puzzle voller Bedeutung, Humor und subtiler Anspielungen auf Dinge, die ich liebe. Einige Hinweise sind leicht zu erkennen, andere sind tief versteckt oder erfordern kreative Interpretation – aber jetzt, da die Herausforderung öffentlich ist, ist es Zeit für die offizielle Auflösung.", 510 510 - "Altogether, the number 20 (or variations of it) appears **73 times** throughout .913452A34E0ADB471EF0": "Insgesamt erscheint die Zahl 20 (oder Variationen davon) **73 Mal** auf dem Bild. Dazu gehören 14 Fälle der wörtlichen Zahl „20“, die in cleveren Formen wie Barcodes, QR-Codes und Hexadezimalwerten versteckt sind, sowie sechs Fälle, in denen Objekte genau in zwanziger Mengen auftreten. Außerdem sind 32 „20“-Darstellungen auf Geburtstagsballons im Raum verteilt – obwohl etwa die Hälfte davon nicht aus der Perspektive der Kamera sichtbar ist – und fünf weitere Verweise, die auf kreative Weise meinen Geburtstag über Zahlen wie 2025 oder 2005 reflektieren.", 511 511 - "Roughly 40 of these clues are clearly visible and solvable from the photo alone..900B0E49D675342ADE28": "Etwa 40 dieser Hinweise sind direkt auf dem Foto sichtbar und lösbar. Der Rest erfordert etwas Querdenken oder Vorstellungskraft, um entdeckt zu werden – vor allem diejenigen, die sich knapp außerhalb des zweidimensionalen Rahmens des Bildes verstecken.", 512 512 - "How the “20” Was Hidden": "Wie die „20“ versteckt wurde", 513 513 - "Many of the 20s are woven directly into the decor. There's a bright 20 km/h road.DF20030D8A7B9E4CCCF0": "Viele der Zwanziger sind direkt in die Dekoration integriert. Es gibt ein helles 20-km/h-Verkehrsschild, riesige Regenbogen-Folienballons in den Ziffern 2 und 0 und ein großes „Happy 20th Birthday“-Banner, das über das Fenster gespannt ist. Ein Geburtstags-„Kuchen“ aus 20 Rollen Toilettenpapier steht prominent in der Mitte, umgeben von dekorativen Gegenständen wie Uhren, Obst, Ferrero Rocher Pralinen, Partylampen und Spielsteinen – alle absichtlich in Mengen von 20 gruppiert.", 514 514 - "Then come the mathematical twists: two QR codes subtly lead to the number 20. Th.631C4BD85BA49B72C4E1": "Dann kommen die mathematischen Wendungen: Zwei QR-Codes führen subtil zur Zahl 20. Es gibt einen Morsecode-Streifen, einen Binärcode (10100) und eine in Hexadezimal dargestellte Farbe, die in Basis<sub>10</sub> zu 20 konvertiert wird. Ein Barcode verbirgt die Zahl visuell, während ein Blatt Spielkarten (Ass, Bube, Dame, König) clever auf 20 summiert. Ein Domino-Paar ergibt ebenfalls die magische Zahl. Sogar ein Stück Kuchen auf der Couch – genau 20 % des Ganzen – setzt das Thema fort.", 515 515 - "Some of the trickiest clues are tucked into logic puzzles. For example, the appl.3E1D246EA1E47E0643AB": "Einige der kniffligsten Hinweise sind in Logikrätseln versteckt. Zum Beispiel ähneln die Äpfel und Birnen im Holzregal 1en und 0en, und wenn man sie richtig entschlüsselt, ergeben sie „Fe“ – eine subtile Anspielung auf meinen Namen, Felix. Würfel auf dem Tisch sind so gedreht, dass man die versteckten Oberseiten ableiten kann. Deren Summe ergibt 20.[^1] Und die größte Herausforderung: ein Bündel Mikado-Stäbchen, deren gesamte sichtbare Punktzahl 110 beträgt – was, wenn in Basis<sub>4</sub> interpretiert, genau 20 im Dezimalsystem entspricht. Ein echtes Rätsel im Rätsel!", 516 516 - "Fun fact: The tops of the dice should add up to 20, but in the final picture, th.1AD6690ECD087653EA2B": "Fun Fact: Die oberen Seiten der Würfel sollten 20 ergeben, aber im finalen Bild summieren sich diese nur auf 12. Das liegt daran, dass die fünf Würfel nicht mit dem gleichen Konstruktionsschema hergestellt wurden – zwei folgen einer Uhrzeigerrichtung, drei einer gegenläufigen, wie [hier auf Wikipedia](https://en.wikipedia.org/wiki/Dice#Arrangement) erklärt. 😂", 517 517 - "A few clues also fall under the “pop culture knowledge” category. There's a ment.AB39B4A99B41F7978013": "Einige Hinweise fallen auch in die Kategorie „Popkulturwissen“. Es gibt eine Erwähnung von Rihanna, die wie ich am 20. Februar geboren wurde. Eine kleine Hommage an Hans Zimmer und Christopher Nolan verweist auf ihre Zusammenarbeit im Jahr 2005 in Batman Begins – dem Jahr, in dem ich geboren wurde.", 518 518 - "A Snapshot of My Musical Taste": "Ein Einblick in meinen Musikgeschmack", 519 519 - "While not directly part of the 20-themed puzzle, there's a musical layer hidden .E75B2EA910ADE079A758": "Auch wenn es nicht direkt Teil des 20-Themen-Puzzles ist, gibt es eine musikalische Ebene im Bild, die etwas Tiefpersönliches widerspiegelt: meine Liebe zur Musik. In der oberen linken Ecke sind acht quadratische Albumcover ordentlich angeordnet, und jedes enthält einen Spotify-Code, der zu einem meiner absoluten Lieblingsstücke führt. Etwas weiter rechts stellt das neunte Cover eine Playlist dar, die all diese Songs zusammenbringt – ein kleiner kuratierter Soundtrack meiner Welt.", 520 520 - "Each song on that list has earned its place not just for how it sounds, but for .64FF10782E65A696CFEC": "Jeder Song auf dieser Liste hat sich seinen Platz nicht nur durch seinen Klang verdient, sondern auch durch die Geschichten, Erinnerungen und Emotionen, die er transportiert. Und am wichtigsten: durch die großartigen Künstler, die ihn geschaffen haben.", 521 521 - "It starts with *Molossus* from Batman Begins, a powerful, rising track that intr.0B2CCAEA825C10332861": "Es beginnt mit *Molossus* aus Batman Begins, einem kraftvollen, aufbauenden Track, der mich in die epische Verschmelzung von Film und Musik durch die Arbeit von Hans Zimmer und Christopher Nolan – einem meiner Lieblingsduos aus Regisseur und Komponist – eingeführt hat. Der Film wurde 2005 veröffentlicht, im Jahr meiner Geburt, und obwohl The Dark Knight mein persönlicher Favorit ist, wird sich Molossus immer ikonisch anfühlen.", 522 522 - "Next is *9-bit Expedition* from the Fastfall soundtrack, composed by Lifeformed..60068D27CC86091CE517": "Als nächstes kommt *9-bit Expedition* aus dem Fastfall-Soundtrack, komponiert von Lifeformed. Ihr ruhiger, von Chiptune inspirierter Stil trifft genau den richtigen Ton, zu dem ich immer wieder zurückkehre. Ich bewundere ihre Arbeit so sehr, dass ich ihre Tracks in selbstgebauten Celeste-Leveln verwendet habe – nicht nur, weil sie passen, sondern weil ihre Musik mir etwas bedeutet.", 523 523 - "And then there's *Resurrections* from Celeste - a game I've easily spent 200-300.94D4BAA5C193535ECDD8": "Und dann ist da noch *Resurrections* aus Celeste – ein Spiel, das ich problemlos 200–300 Stunden gespielt habe. Die wahre Magie der Atmosphäre liegt bei Lena Raine, deren Musik eine Art hat, in deine Emotionen einzutauchen und etwas Rohes und Schönes hervorzuziehen. Ihre Kompositionen sind mehr als nur Hintergrundmusik – sie sind das Erlebnis. Ich betrachte sie ehrlich gesagt als eine der inspirierendsten Komponistinnen, die ich je gehört habe, und ihre Arbeit an Celeste ist ein Meisterwerk, das ich nie aufhören werde zu bewundern.", 524 524 - "Also in the mix is *22:12 - Until the End of Time* by Danger, from the Haven sou.72EAD217688685BCB963": "Auch dabei ist *22:12 - Until the End of Time* von Danger, aus dem Haven-Soundtrack. Ich habe das Spiel nicht einmal gespielt – die Musik allein hat mich in ihren Bann gezogen. Sie ist filmisch, emotional und komplett immersive. Danger hat es absolut geschafft, durch Sound eine Welt zu erschaffen, in der ich mich stundenlang verlieren könnte.", 525 525 - "*Annihilate* from Across the Spider-Verse is another standout. I love both movie.9437FFA646F4451D9745": "*Annihilate* aus Across the Spider-Verse ist ein weiterer Höhepunkt. Ich liebe beide Filme aus der Serie, und dieser Track fängt perfekt die Energie, den Stil und die Emotion von Miles' Geschichte ein. Ein klanglicher Ausbruch, der nie alt wird.", 526 526 - "From a totally different genre comes *ROTTWEiLER* by TJ\\_beastboy, a German rapp.B95612C092ABF85A718D": "Aus einem ganz anderen Genre kommt *ROTTWEiLER* von TJ\\_beastboy, einem deutschen Rapper, der meiner Meinung nach auf einem völlig anderen Level ist. Er kombiniert entspannte Vibes und mitreißende Intensität auf eine Weise, die frisch und echt wirkt. Seine Musik hat immer etwas Einzigartiges zu sagen, und ich finde ehrlich, dass er einer der besten Künstler zurzeit ist.", 527 527 - "Another track I couldn't leave out is *747* from Tenet - another mind-bending No.89615FC31E49EF7EA4BB": "Ein weiterer Track, den ich nicht weglassen konnte, ist *747* aus Tenet – einem weiteren mind-bending Nolan-Film, vertont von Ludwig Göransson. Die Energie, das Tempo und der Aufbau dieses Stücks treffen einfach ins Schwarze. Es ist leicht einer meiner Lieblingsfilmsoundtracks aller Zeiten, und Göransson zeigt weiterhin, dass er ein Genie der Filmmusik ist.", 528 528 - "Last but far from least: *MORE* by K/DA - my most-played song ever. It's high-en.12164785491B9D2DAF37": "Zu guter Letzt: *MORE* von K/DA – mein meistgespielter Song überhaupt. Er ist energiegeladen, poliert, selbstbewusst und einfach rundum spaßig. K-Pop ist allgemein viel zu unterschätzt, und dieser Track ist der Beweis, dass Genregrenzen keine Rolle spielen, wenn ein Song auf jeder Ebene funktioniert.", 529 529 - "These songs - and the brilliant minds behind them - aren't just background music.E5DA08D529E76E42DBB3": "Diese Songs – und die brillanten Köpfe dahinter – sind nicht bloß Hintergrundmusik. Sie sind Teil meiner kreativen Welt, meiner emotionalen Landschaft und der Soundtrack zu allem, was ich liebe.", 530 530 - "Stats for Nerds": "Statistiken für Nerds", 531 531 - "For those who enjoy data and structure, here's a little summary of all 20s in th.B3CE0613F24C05B8FFE5": "Für diejenigen, die Daten und Struktur lieben, hier ist eine kleine Zusammenfassung aller \"20\" im Bild:", 532 532 - "Category": "Kategorie", 533 533 - "Count": "Anzahl", 534 534 - "Total hidden instances": "Gesamte versteckte Instanzen", 535 535 - "73x": "73x", 536 536 - "Clearly visible and solvable": "Klar sichtbar und lösbar", 537 537 - "\\~40x": "\\~40x", 538 538 - "Written \"20\"": "Geschriebene \"20\"", 539 539 - "14x": "14x", 540 540 - "Groups of 20 identical items": "Gruppen von 20 identischen Gegenständen", 541 541 - "6x": "6x", 542 542 - "Birthday balloons printed with \"20\"": "Geburtstagsballons mit \"20\" bedruckt", 543 543 - "32x": "32x", 544 544 - "Creative variations (e.g., 2025, 2005)": "Kreative Variationen (z. B. 2025, 2005)", 545 545 - "5x": "5x", 546 546 - "Puzzle Solutions": "Rätsel-Lösungen", 547 547 - "Code Type": "Code-Typ", 548 548 - "Representation": "Darstellung", 549 549 - "QR Codes": "QR-Codes", 550 550 - "Bar Code": "Barcode", 551 551 - "20\\. February": "20. Februar", 552 552 - "Binary Code": "Binärcode", 553 553 - "Today is February 20th, 2025": "Heute ist der 20. Februar 2025", 554 554 - "Base": "Base", 555 555 - "Code": "64", 556 556 - "My birthday is February 20th, 2005": "Mein Geburtstag ist der 20. Februar 2005", 557 557 - "Hex Code (Color Codes)": "Hex-Code (Farbcodes)", 558 558 - "twenty": "zwanzig", 559 559 - "Morse Code": "Morse-Code", 560 560 - "20\\. FEBRUARY 2005": "20. FEBRUAR 2005", 561 561 - "Playing Cards": "Spielkarten", 562 562 - "King (4) + Queen (3) + Jack (2) + Ace (11) = 20": "König (4) + Dame (3) + Bube (2) + Ass (11) = 20", 563 563 - "Domino": "Domino", 564 564 - "(0|2) + (3|3) + (4|0) + (2|1) + (1|0) + (2|2) = 20": "(0|2) + (3|3) + (4|0) + (2|1) + (1|0) + (2|2) = 20", 565 565 - "Apples (0) and Pears (1)": "Äpfel (0) und Birnen (1)", 566 566 - "Binary Code: Fe": "Binärcode: Fe", 567 567 - "Mikado Sticks Value": "Wert der Mikadostäbchen", 568 568 - "110 (base": "110 (Basis", 569 569 - ") = 20 (base": "4) = 20 (Basis", 570 570 - "Dice top sides": "10)", 571 571 - "It was a joy to turn this celebration into a personal challenge and to see frien.C633AD0611AAAC49C2DA": "Oben liegende Würfelseiten", 572 572 - "How to fully autogenerate Starlight sidebars (without losing control)": "Wie man Starlight-Sidebars vollständig automatisch erstellt (ohne die Kontrolle zu verlieren)", 573 573 - "Learn two Starlight techniques to autogenerate large sidebars while keeping clea.20BC1955A37AA7859B18": "Erfahren Sie zwei Starlight-Techniken, um große Sidebars automatisch zu erstellen und dabei saubere URLs und Beschriftungen beizubehalten.", 574 574 - "Have you ever wanted to simplify sidebar generation in your Starlight project? H.2D5E37D5439F17736C27": "Haben Sie jemals versucht, die Generierung von Sidebars in Ihrem Starlight-Projekt zu vereinfachen? Haben Sie versucht, die gesamte Sidebar automatisch zu erstellen, nur um festzustellen, dass Sie die Struktur nicht nach Ihren Wünschen anpassen können?", 575 575 - "This post demonstrates two Starlight features that make fully autogenerated side.BDF2E65CF1AF47E9F83B": "Dieser Beitrag zeigt zwei Starlight-Funktionen, die es ermöglichen, vollständig automatisch generierte Sidebars flexibel zu gestalten und den Wartungsaufwand zu reduzieren.", 576 576 - "Use case": "Anwendungsfall", 577 577 - "In medium to large Starlight projects, the problem arises that the manual creati.11763E0A14C36D449179": "In mittelgroßen bis großen Starlight-Projekten stellt sich das Problem, dass die manuelle Erstellung und Pflege der [Starlight-Sidebar-Konfiguration](https://starlight.astro.build/reference/configuration/#sidebar) eine mühsame und zeitaufwändige Aufgabe ist.", 578 578 - "In the past, Starlight didn't provide the right primitives for this, and the rec.48BF051900AF52DB446D": "In der Vergangenheit bot Starlight nicht die richtigen Grundfunktionen dafür, und der empfohlene Ansatz bestand darin, die automatische Erstellung der Sidebar-Konfiguration um eine Ebene tiefer zu verschieben - sodass nur Ordner ohne verschachtelte Unterordner automatisch generiert wurden. Mit der Einführung von [Route Data](https://starlight.astro.build/guides/route-data/) und dem jüngeren [`generateId()`-Hook im `docsLoader`](https://starlight.astro.build/reference/configuration/#generateid) können diese Szenarien nun jedoch viel einfacher und effizienter gelöst werden.", 579 579 - "Solving the ordering issue": "Das Sortierungsproblem lösen", 580 580 - "A common problem always was: \"How can I customise the order of sidebar folders i.AE2CA0CC5AC2560DCF3C": "Ein häufiges Problem war immer: „Wie kann ich die Reihenfolge der Sidebar-Ordner anpassen, wenn ich die Sidebar automatisch generiere?“ Alte Probleme wie [#1223](https://github.com/withastro/starlight/issues/1223) schlagen eine Lösung vor, die von [Nuxt Content](https://content.nuxt.com) inspiriert ist, bei der jeder Abschnitt des gesamten Pfads [mit Zahlen + Punkten vorangestellt](https://v2.content.nuxt.com/usage/content-directory#ordering) werden kann, um eine nummerische Sortierung auf Dateibasis festzulegen. Ein Beispiel für ein solches Projekt könnte so aussehen:", 581 581 - "src/content/docs/nested-folder": "src/content/docs/nested-folder", 582 582 - "1.frameworks": "1.frameworks", 583 583 - "1.vue.md": "1.vue.md", 584 584 - "2.nuxt.md": "2.nuxt.md", 585 585 - "2.examples": "2.examples", 586 586 - "1.vercel.md": "1.vercel.md", 587 587 - "2.netlify.md": "2.netlify.md", 588 588 - "If you want to use this approach in Starlight, it doesn't work out-of-the-box, b.1799E45D5D83874DE15D": "Wenn Sie diesen Ansatz in Starlight verwenden möchten, funktioniert er nicht sofort, aber mit einer einfachen Einrichtung können Sie ihn umsetzen.", 589 589 - "Starlight [0.35.0](https://github.com/withastro/starlight/releases/tag/%40astroj.5B25A8356D4B9CE00F94": "Starlight [0.35.0](https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.35.0) führte eine Callback-Funktion ein, die Sie an `docsLoader()` übergeben können, um die ID (URL) der generierten Seite zu manipulieren. Indem Sie den Eintrag durch `\"/\"` aufteilen und jede Zahl + Punkt auf Segmentebene entfernen, haben Sie nun die gleiche Funktionalität in Starlight:", 590 590 - "The URL to access the pages now changes e.g., from `/nested-folder/1.frameworks/.6941CF02484C8DCB2B28": "Die URL zum Zugriff auf die Seiten ändert sich nun z. B. von `/nested-folder/1.frameworks/1.vue` zu `/nested-folder/frameworks/vue`.", 591 591 - "However, the folder names in the sidebar still include the `1.` prefixes. So let.0CAEBB02FF8EEAA7C1F1": "Allerdings enthalten die Ordnernamen in der Sidebar immer noch die `1.`-Präfixe. Lassen Sie uns also auch die Manipulation der Sidebar lösen:", 592 592 - "Solving the sidebar folder naming issue": "Das Problem der Ordnerbenennung in der Sidebar lösen", 593 593 - "Starlight [0.32.0](https://github.com/withastro/starlight/releases/tag/%40astroj.7F6BC940CC96F2ABA63D": "Starlight [0.32.0](https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.32.0) führte [Route Data](https://starlight.astro.build/guides/route-data/) ein, das wir jetzt nutzen können, um die Ordnernamen in der Sidebar zu manipulieren:", 594 594 - "remove any leading number + dot from the folder name and": "das Entfernen jeder führenden Zahl + Punkt aus dem Ordnernamen und", 595 595 - "apply \"Title Case\" so they don't look completely lowercase": "die Anwendung von \"Title Case\", damit sie nicht vollständig kleingeschrieben erscheinen", 596 596 - "Internationalisation (i18n)": "Internationalisierung (i18n)", 597 597 - "Note that [internationalisation (i18n) of folder names](https://starlight.astro..78D4931CBD055B889B4B": "Beachten Sie, dass die [Internationalisierung (i18n) von Ordnernamen](https://starlight.astro.build/guides/sidebar/#internationalization) bei einem solchen Setup eine fehlende Funktionalität ist, da es derzeit keinen Ort gibt, an dem Übersetzungen von Ordnernamen definiert werden können. Sie werden einfach in Title Case umgewandelt. Die Implementierung einer Logik zum dynamischen Laden von Übersetzungen könnte darin bestehen, das [`locale`-Feld aus den Routeninformationen](https://starlight.astro.build/reference/route-data/#locale) zu lesen und Übersetzungen in `json`-Dateien zu definieren. Andernfalls können Sie [HiDeoos Plugin verwenden](#using-hideoos-plugin), das [i18n unterstützt](https://starlight-auto-sidebar.netlify.app/guides/i18n/).", 598 598 - "Don't forget to add the `routeData.ts` file to your `astro.config.mjs`:": "Vergessen Sie nicht, die Datei `routeData.ts` zu Ihrer `astro.config.mjs` hinzuzufügen:", 599 599 - "Of course you can adjust the code to your needs (e.g., remove the \"Title Case\" t.8EE143244F5E89BEFCE4": "Natürlich können Sie den Code an Ihre Bedürfnisse anpassen (z. B. die \"Title Case\"-Transformation entfernen, da Ihre Dateinamen bereits korrekt geschrieben sind).", 600 600 - "Using HiDeoo's plugin": "Das Plugin von HiDeoo verwenden", 601 601 - "If you want to autogenerate your whole sidebar and still have the flexibility to.AB216A94695F22CEA149": "Wenn Sie Ihre gesamte Sidebar automatisch generieren und dennoch die Flexibilität haben möchten, alles nach Ihren Wünschen anzupassen, hat [HiDeoo](https://github.com/HiDeoo) auch ein dediziertes Plugin für solche Anwendungsfälle erstellt: [Starlight Auto Sidebar](https://starlight-auto-sidebar.netlify.app).", 602 602 - "Especially those two features got mentioned in this article:": "Insbesondere wurden diese zwei Funktionen in diesem Artikel erwähnt:", 603 603 - "Controlling the [order](https://starlight-auto-sidebar.netlify.app/metadata/#ord.08329D63645DA7FDB0F2": "Die Steuerung der [Reihenfolge](https://starlight-auto-sidebar.netlify.app/metadata/#order) einzelner Verzeichnisse", 604 604 - "Adapting the [displayed label](https://starlight-auto-sidebar.netlify.app/metada.41A180D1D992072397D3": "Die Anpassung der [angezeigten Beschriftung](https://starlight-auto-sidebar.netlify.app/metadata/#label) einzelner Ordner", 605 605 - "However, if you want to automate the whole generation without having to specify .AA2463868A43906766FA": "Wenn Sie jedoch die gesamte automatische Generierung durchführen möchten, ohne für jedes Verzeichnis manuell Beschriftungen und Reihenfolgen festlegen zu müssen, ist es bevorzugt und empfohlen, die Lösung selbst zu programmieren (mit einigen Richtlinien in diesem Blog).", 606 606 - "If you want to check out the code presented in this blog, feel free to visit the.9F7F074B6E1A29450183": "Wenn Sie den in diesem Blog vorgestellten Code ausprobieren möchten, besuchen Sie gerne die [StackBlitz](https://stackblitz.com/github/trueberryless/starlight-autogenerate-whole-sidebar?file=src%2Fcontent.config.ts) oder den Quellcode im [GitHub-Repo](https://github.com/trueberryless/starlight-autogenerate-whole-sidebar).", 607 607 - "You might think that this story is now over because everyone could just use the .C9618FDEC9BA9ED17D35": "Sie könnten denken, dass diese Geschichte nun vorbei ist, da jeder einfach die Variante nutzen könnte, die er bevorzugt, und alle wären glücklich. Aber Starlight entwickelte sich weiter und verbessert sich ständig. Etwa drei Monate später, am 15. Februar, fast wie ein [Geburtstagsgeschenk](/blog/20th-birthday/) für mich, kam die lang erwartete Ergänzung von Routendaten in Starlight mit der Veröffentlichung von [v0.32](https://github.com/withastro/starlight/releases/tag/@astrojs/starlight@0.32.0). Diese scheinbar kleine Ergänzung eröffnete so viele Möglichkeiten, die ich selbst nie erwartet hätte. HiDeoo war einmal mehr die führende Inspiration für Plugin-Autoren und trieb diese neue Funktionalität bis an ihre Grenzen. Es dauerte nur zwei Tage, um [mehr als 11 Plugins an die neueste Starlight-Version von damals anzupassen](https://bsky.app/profile/hideoo.dev/post/3liffpudc5c2b), und später wurden viele dieser Codeabschnitte verbessert und refaktoriert, um diese mächtige Funktion noch weiter zu nutzen.", 608 608 - "Deactivate TLS within Argo CD": "TLS in Argo CD deaktivieren" 609 609 - }

-612

translations/fr.json

reviewed

··· 1 1 - { 2 2 - "Deep Thoughts - Overview": "Pensées Profondes - Aperçu", 3 3 - "Welcome to my blog. Take a look at this minimalistic overview of all my blog pos.5A38D8470D9F24600ED2": "Bienvenue sur mon blog. Découvrez cet aperçu minimaliste de tous mes articles de blog.", 4 4 - "Some aspects of creating a blog are really easy, and some are extremely difficul.997EB56977F5D63B1118": "Certains aspects de la création d'un blog sont vraiment faciles, et d'autres extrêmement difficiles !", 5 5 - "A beginner friendly introduction with some swear words on how to start writing y.BE312646252BC9A86726": "Une introduction conviviale pour les débutants avec quelques jurons sur la manière de commencer à écrire votre propre article de blog.", 6 6 - "<p>Talk a little bit about how one can become better (not master by any means, n.8C69E4E4A592E67958BE": "<p>Parlons un peu de comment on peut s'améliorer (sans pour autant devenir un maître, personne n'est parfait) dans l'écriture d'un article de blog. Ce ne sont que mes réflexions après que deux gars géniaux de la <a href=\"https://astro.build/chat\">Communauté Astro</a> (<a class=\"gh-badge\" href=\"https://github.com/jdtjenkins\"><img src=\"https://github.com/jdtjenkins.png\" alt=\"jdtjenkins\" />Jacob</a> et <a class=\"gh-badge\" href=\"https://github.com/louisescher\"><img src=\"https://github.com/louisescher.png\" alt=\"louisescher\" />Lou</a>) aient décidé d'écrire des blogs sur la difficulté ou la facilité d'écrire des articles de blog.</p><p>Veuillez lire leurs articles en premier, car celui-ci est une suite aux deux autres :</p><ol><li><a href=\"https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/\">\"Pourquoi est-il si difficile d'écrire des articles de blog ?\" - Jacob Jenkins</a></li><li><a href=\"https://lou.gg/blog/why-writing-blogs-isnt-hard\">\"Pourquoi écrire des blogs n'est pas difficile\" - Louis Escher</a></li><li><a href=\"/blog/writing-blogs-is-hard-and-easy/\">\"Certains aspects de la création d'un blog sont vraiment faciles, et d'autres extrêmement difficiles !\" - Felix Schneider</a></li></ol><p>Après cela, vous aurez complété avec succès cette trilogie géniale sur les articles de blog.</p>", 7 7 - "After a very interesting discussion in the [Astro](https://github.com/withastro).48AFE0BF2E41079C33DD": "Après une discussion très intéressante dans le [Discord](https://astro.build/chat) d'[Astro](https://github.com/withastro) - initiée par nul autre que le mainteneur principal [Alex](https://github.com/alexanderniebuhr) lui-même (au fait félicitations pour cette récente réussite 🎉) -, j'ai plaisanté en disant que quelqu'un pourrait écrire un blog sur les raisons pour lesquelles il est si difficile pour beaucoup de gens non seulement d'écrire, mais aussi de gérer un blog dans son ensemble.", 8 8 - "The man who nominated me as an Astro Support Squad - [Jacob](https://github.com/.47D0DB043E57D3E7660B": "L'homme qui m'a nommé dans l'équipe de support Astro - [Jacob](https://github.com/jdtjenkins) (au fait, merci beaucoup de m'avoir remarqué dans cette communauté incroyable 😍) - a pris cela au pied de la lettre et a écrit un blog à ce sujet. Pas de blague. Allez voir : [https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/](https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/) D'ailleurs, c'est son tout premier blog (et j'espère que ce ne sera pas le dernier, car j'ai vraiment apprécié son style d'écriture).", 9 9 - "Our beloved everywhere-helper, Blogger, Designer and StudioCMSer - [Lou](https:/.00B9B777867DC593B708": "Notre aide multitâche bien-aimée, blogueur, designer et StudioCMSer - [Lou](https://github.com/louisescher/) (merci d'avance pour tes conseils d'écriture de blog qui m'ont permis d'écrire ceci avec plus de confiance 🤩) - a sauté immédiatement sur cette vague d'enthousiasme (comme les utilisateurs de Twitch pourraient l'appeler) et a publié [sa réponse](https://lou.gg/blog/why-writing-blogs-isnt-hard) en seulement 12 heures !!! Croyez-moi, j'ai vérifié les commits, Lou a littéralement publié 4 minutes avant la fin des 12 heures.", 10 10 - "As I will include many references to both of their blogs, it's best if you read .2E1FCF6AB78B43DC2069": "Comme je ferai de nombreuses références à leurs blogs, il vaut mieux que vous lisiez les leurs en premier. Puis le mien. Ou peut-être vaut-il mieux lire seulement les leurs, je ne suis pas encore sûr de la tournure que prendra le mien.", 11 11 - "But what I can ~~say~~ write, is that mine will fully focus on just the writing .FC4D0CF3F6082890E1EC": "Mais ce que je peux ~~dire~~ écrire, c'est que le mien se concentrera entièrement sur les compétences en écriture.", 12 12 - "How to setup a blog (technical challenges)": "Comment configurer un blog (défis techniques)", 13 13 - "Whilst this blog doesn't focus on how to build a blog, deploy it and all this te.460F9C9970BD9D6ED53F": "Bien que ce blog ne traite pas de la façon de créer un blog, le déployer et gérer tout cet aspect technique, je tiens à mentionner que tout le monde peut y arriver. Comme Lou l'a mentionné, en tant que personne non technique, vous pouvez toujours simplement créer un compte sur [Medium](https://medium.com/) ou des alternatives similaires. Si vous avez quelques notions de programmation, vous pouvez laisser un peu plus de place à votre créativité et, grâce au projet génial [Starlight Blog](https://starlight-blog-docs.vercel.app/) de [HiDeoo](https://github.com/HiDeoo), il ne vous faut pas beaucoup de connaissances pour déployer votre propre site Web. De nos jours, avec l'existence de fournisseurs PaaS (Platform as a Service) comme [Netlify](https://www.netlify.com/), qui transforment le déploiement en une aventure \"Click-Ops\", il n'y a plus aucune excuse pour ne pas publier votre blog à cause de difficultés techniques.", 14 14 - "Okay, jokes aside, now: Writing skills": "D'accord, fin des blagues, passons maintenant aux compétences en écriture", 15 15 - "But this blog should focus on mainly on the \"Writing Skill\" as I said, so let's .809BFECD79628A7D6401": "Mais ce blog devrait se concentrer principalement sur la \"compétence d'écriture\", comme je l'ai dit, alors continuons sur ce sujet. Ayant moi-même eu des difficultés initiales à écrire des blogs, je peux totalement confirmer ce que Jacob dit : commencer est difficile. Ce n'est pas comme lire le [Guide de démarrage d'Astro](https://docs.astro.build/en/install-and-setup/) où il suffit de suivre les instructions et ensuite demander sur Discord ce que signifie une erreur `InvalidContentEntryDataError` _{veuillez utiliser le fil `#support` si vous le faites 🫶} ([Si vous vous demandez encore](https://docs.astro.build/en/reference/errors/invalid-content-entry-data-error/)).", 16 16 - "On the other hand, the goal seems so close and doable. Just write some words. Wh.D4B7EBAB98F3D78C25CA": "D'un autre côté, l'objectif semble si proche et réalisable. Il suffit d'écrire quelques mots. Qu'est-ce qui est si difficile à écrire ces foutus mots ? En réalité, je ne sais pas moi-même. Pourquoi me le demandez-vous ? La seule chose qui m'a aidé à sortir de la spirale de \"Tu-Veux-Écrire-Mais-Chaque-Fois-Tu-Regards-Le-Curseur-Clignotant-Ton-Cerveau-Devient-Vide\" (faisons-en le hashtag de la semaine) était le conseil de Lou : ne pas en exiger trop de vous-même dans votre premier blog. Pourquoi voulez-vous un blog parfait pour débuter ? À cause de votre réputation ? Pour que les gens ne pensent pas mal de vous ? Ressentent de la déception ? Honnêtement : c'est des conneries ! Pas seulement parce que votre premier blog ne sera probablement lu par personne (à l'exception remarquée de l'exceptionnel blog de Jacob), mais aussi parce que vous ne faites que vous compliquer la tâche. Mon plafond mental personnel était que je pensais devoir écrire au moins 500 mots pour commencer. Mais qui dit cela ? Honnêtement, si je regarde en arrière maintenant, je pense parfois : \"Mince, ça aurait été tellement unique et cool si mon tout premier blog avait été comme un simple tweet\", ou encore plus extrême : Un. Mot. Personne ne vous empêchera de publier ce blog :", 17 17 - "Hello 👋": "Bonjour 👋", 18 18 - "(Sorry if I now took your awesome idea,\\\nand included your whole blog post in he.2C4E38E676160D62D299": "(Désolé si j'ai maintenant pris votre idée géniale,\\\net inclus votre article complet ici\\\n\\- wow cool, ça rime)", 19 19 - "See? I can do whatever I want, even being a fricking poet (typical German behavi.CA4561FAF77C16255B02": "Vous voyez ? Je peux faire ce que je veux, même être un foutu poète (comportement typiquement allemand), et personne ne me jugera. D'accord, peut-être que quelqu'un critiquera ce blog en disant que c'est \"une perte de temps, sans signification dans tout ce contenu inutile\", mais qui ***s'en soucie*** ? C'est *votre* blog, <span id=\"comment-reference\" class=\"fragment-highlight\">personne ne demande leur avis (à moins que vous ayez une section de commentaires sous votre blog 🙄 *tousse* [Lou](https://lou.gg/blog/why-writing-blogs-isnt-hard#chapter-five-its-the-8th-of-july)</span>). Alors, ne pensez pas à ce que les autres pourraient penser de votre style d'écriture, de votre contenu, de votre usage de la langue ou même si vous faites des fautes de grammaire. Tout cela vous rend humain et chercher à tout rendre parfait est non seulement complètement inutile, mais aussi [difficil](https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/#chapter-1---i-want-it-now).", 20 20 - "Another part of writing blogs is not just getting started, but the difficulty of.784B95527E097077F971": "Un autre aspect de l'écriture de blogs n'est pas seulement de commencer, mais aussi de maintenir un flux cohérent, une idée directrice si vous voulez. En tant qu'audience de discours bien écrits, vous remarquez inconsciemment qu'ils étaient bons, satisfaisants, sublimes. Et c'est ce que j'adore dans de tels blogs ou discours. Ils semblent juste parfaits d'une manière ou d'une autre. Mais j'ai moi-même accepté que je ne puisse pas accomplir de telles performances dans mes propres créations. Et je m'en porte beaucoup mieux avec cette acceptation. Parce que le bénéfice d'accepter l'imperfection est d'accomplir les choses. Pas juste à 50 %, pas juste à 90 %. Aller jusqu'au bout. Terminer, à 100 %. Et c'est quelque chose avec lequel beaucoup de gens ont du mal, y compris mon ancien moi - en fait uniquement moi.", 21 21 - "But as Lou mentions, there are other easy methods to keep a common thread in the.18BEED3C4E5876FC95F2": "Mais comme le mentionne Lou, il existe d'autres méthodes simples pour garder un fil conducteur dans tout le post, rester fidèle à l'histoire alors que vos pensées peuvent vagabonder dans votre propre esprit. Mettre toutes ces idées sur papier, ou dans ce cas sur le clavier, peut être un défi, surtout lorsque vous commencez à écrire. Mais il y a une raison pour laquelle nous apprenons de telles compétences à l'école, elles améliorent notre santé cognitive et nos capacités de développement de façon immense. C'est aussi pourquoi je suis tout à fait d'accord avec Lou quand il dit que l'intelligence artificielle ne devrait jamais être utilisée dans le processus d'écriture. Cela n'a tout simplement aucun avantage, ni pour le lecteur, encore moins pour vous.", 22 22 - "So I don't want to repeat what Lou says, but bullet points have helped me out a .964F132C02AED6CE1634": "Donc, je ne veux pas répéter ce que dit Lou, mais les points-bullets m'ont beaucoup aidé dans le passé. Ils me donnent simplement un sentiment de structure constante, tandis que mon esprit peut jouer avec diverses idées et théories. Cela garantit que vous revenez toujours à ce que vous vouliez inclure initialement dans votre post. \"Et si vous ne pouvez pas trouver de points-bullets ?\", pourriez-vous demander. Eh bien, vous pourriez avoir besoin de plus de séances de brainstorming ou tout simplement de prendre des douches.", 23 23 - "In the end, these are some tips I can give you along the way:": "À la fin, voici quelques conseils que je peux vous donner en route :", 24 24 - "Develop your own writing style, not by training, but just writing. Sooner or lat.F84CA1A98AD5E28A3F69": "Développez votre propre style d'écriture, non pas en vous entraînant, mais simplement en écrivant. Tôt ou tard, vous remarquerez les types qui pourraient vous plaire, certaines choses que vous voulez adopter d'autres blogueurs, mais summa summarum ce que vous écrivez sera toujours à vous. Vous le partagez simplement avec le monde. C'est à vous de décider si vous souhaitez utiliser un deux-points ou un tiret ici ou là, mettre plus de points, utiliser le passé, l'impératif, des jurons ou un style plus formel. Toutes ces choses viendront automatiquement ensemble et vous définiront comme un blogueur unique. Et vos lecteurs apprécieront cette individualité plus que vous ne le pensez.", 25 25 - "Don't take on too much. Might sound easy, but everyone falls regularly into this.F956D1FB960DB4CD026C": "Ne prenez pas trop sur vous. Cela peut sembler facile, mais tout le monde tombe régulièrement dans ce piège. Ou peut-être seulement des gens comme moi, ayant un mélange d'autisme et de perfectionnisme - je ne sais pas.", 26 26 - "Although it always sounds stupid: Start writing. And if it doesn't work, start w.0018355B94E38C7B923C": "Bien que cela sonne toujours stupide : Commencez à écrire. Et si cela ne fonctionne pas, commencez à écrire la partie centrale. Parce que je sais que commencer et finir sont toujours difficiles, mais imo la partie centrale coule comme du beurre.", 27 27 - "Blogs have easy and hard sides: This is what the title says, but know that I wro.72A914EB55320A9E44E4": "Les blogs ont des côtés faciles et difficiles : C'est ce que dit le titre, mais sachez qu'après avoir écrit tout ça, je me suis rendu compte que je n'ai pas répondu à cette question du tout... Dieu merci, Jacob n'a pas mis un point d'interrogation à la fin de cette suggestion. 🙏", 28 28 - "Yeah, I guess that's it. If you want to share you thoughts, leave them in [Lou's.D2EA8444C7BDC5361790": "Oui, je suppose que c'est tout. Si vous voulez partager vos pensées, laissez-les dans [les commentaires de Lou](https://lou.gg/blog/why-writing-blogs-isnt-hard) car je n'en ai pas.", 29 29 - "Vibe-coding a VS Code Extension for Terraform projects": "Vibe-coding une extension VS Code pour des projets Terraform", 30 30 - "How I created an extension for Visual Studio Code which adds inline resolutions .94295B1957CBEE7AD731": "Comment j'ai créé une extension pour Visual Studio Code qui ajoute des résolutions en ligne aux variables dans les projets Terraform.", 31 31 - "Today, I want to talk about a small VS Code extension that I vibe-coded in a sin.6C43E09851571E31F19E": "Aujourd'hui, je veux parler d'une petite extension VS Code que j'ai codée intuitivement en une seule journée pour rendre le travail avec Terraform plus facile. Je vais d'abord expliquer ce qu'est Terraform, puis plonger directement dans les fonctionnalités et les raisons derrière cette extension. N'hésitez pas à passer à la section suivante si vous êtes déjà familier avec Terraform.", 32 32 - "What is Terraform?": "Qu'est-ce que Terraform ?", 33 33 - "Terraform is an infrastructure-as-code (IaC) tool that lets you define your enti.C1E19D8A95C63B18257A": "Terraform est un outil d'infrastructure en tant que code (IaC) qui vous permet de définir l'intégralité de votre infrastructure cloud ou sur site sous forme de code. Son langage de configuration, inventé par [HashiCorp](https://github.com/hashicorp), s'appelle HCL (HashiCorp Configuration Language) et présente une syntaxe intuitive et lisible par les humains. La *syntaxe native* a l'avantage de présenter une courbe d'apprentissage faible, d'être cohérente pour tous les fournisseurs, et agréable à lire et écrire pour les humains, tandis que la variante basée sur JSON est plus facile à générer et à analyser pour les machines.", 34 34 - "What makes Terraform very powerful are two basic features: **variables** and **m.F29F6CFC8D18A39724FE": "Ce qui rend Terraform très puissant, ce sont deux fonctionnalités de base : **les variables** et **les modules**. Les variables vous permettent de créer des ressources dont les valeurs réelles peuvent être insérées depuis un autre endroit, et les modules regroupent un certain nombre de ressources, ce qui offre l’avantage de la réutilisabilité et de l’imbrication. Bien que ces deux fonctionnalités paraissent très basiques, leur combinaison en fait une équipe de rêve. Cela parce que l'ouverture de Terraform vous permet de définir des variables d'entrée pour chaque module et également d'exporter des variables via des sorties.", 35 35 - "A simple module is therefore structured like this:": "Un module simple est structuré comme ceci :", 36 36 - "azure-resource-group/": "groupe-de-ressources-azure/", 37 37 - "main.tf": "principal.tf", 38 38 - "variables.tf": "variables.tf", 39 39 - "outputs.tf": "sorties.tf", 40 40 - "README.md": "README.md", 41 41 - "All files except `main.tf` are optional (the `README.md` isn’t Terraform-specifi.C0AA6A4205B65B850BDC": "Tous les fichiers sauf `principal.tf` sont optionnels (le `README.md` n’est pas spécifique à Terraform), mais je préfère suivre les bonnes pratiques, donc l’exemple les inclut.", 42 42 - "Let's look at a simple example. Imagine we want to manage a resource group in Az.C7130E93293C5F3835FA": "Examinons un exemple simple. Imaginez que nous voulons gérer un groupe de ressources dans Azure avec Terraform. Dans le fichier `variables.tf`, nous définissons quelles entrées nous attendons dans le module. Chacun des deux blocs représente la variable et les propriétés de la variable, comme la `description` ou le `type` :", 43 43 - "You might have noticed that the `location` variable also has a `default` propert.98D282B5427579CFCDE8": "Vous avez peut-être remarqué que la variable `location` a également une propriété `default`, ce qui rend la variable optionnelle et fournit une valeur de secours si aucune n'est spécifiée. Ces variables peuvent ensuite être utilisées dans le fichier `principal.tf`, où nous définissons les ressources réelles que nous voulons générer :", 44 44 - "In this case, we just define our simple resource group, which you can think of a.549C08D1FEC998D18486": "Dans ce cas, nous définissons simplement notre groupe de ressources, que vous pouvez imaginer comme un dossier dans Azure - explication très simpliste. Maintenant, la dernière partie que nous pouvons implémenter est le fichier `sorties.tf` :", 45 45 - "This is very useful if we want to use information like the ID of the resource gr.EB0A3E52AB5C3982D204": "Cela est très utile si nous voulons utiliser des informations comme l'ID du groupe de ressources plus tard dans d'autres parties de notre projet Terraform.", 46 46 - "As I already wrote, the `README.md` is not actually part of the Terraform defini.E6BDEA6D28A17F85099B": "Comme je l'ai déjà mentionné, le `README.md` ne fait pas vraiment partie des définitions Terraform, mais aide à comprendre l'objectif du module :", 47 47 - "As the `README.md` already suggests, we can now use this module to create an Azu.A94748FE0C01D4120745": "Comme le `README.md` le suggère déjà, nous pouvons maintenant utiliser ce module pour créer un groupe de ressources Azure n'importe où dans notre projet. Nous devons juste nous assurer que le chemin vers le dossier du module est correct et que Terraform sait comment interpréter les fichiers `main.tf`, `variables.tf` et `outputs.tf`. Dans ce cas, étant donné que nous ne spécifions pas la variable `location`, elle sera définie sur `\"westeurope\"`.", 48 48 - "I hope this section gave you a better basic understanding of what Terraform is a.8558BAB715B916ACA2AE": "J'espère que cette section vous a donné une meilleure compréhension de base de ce qu'est Terraform et de ce que vous pouvez faire avec.", 49 49 - "The tedious task of Terraform": "La tâche fastidieuse de Terraform", 50 50 - "You might have noticed that the `source` field of a module creates an awesome fl.8E968461FC7650C53259": "Vous avez peut-être remarqué que le champ `source` d’un module crée une flexibilité incroyable pour l’ensemble du projet puisque vous pouvez définir des modules n’importe où et les utiliser n’importe où dans le projet.", 51 51 - "However, this feature also has a huge drawback when it comes to maintainability:.648C608F44A24AAF64E1": "Cependant, cette fonctionnalité a aussi un énorme inconvénient en termes de maintenabilité : résoudre les valeurs réelles derrière les variables peut être très fastidieux. Bien que dans cet exemple simple, cela puisse sembler facile à gérer, plus le projet grandit, plus il devient imbriqué, et plus il est difficile et chronophage de comprendre et d'adapter le code Terraform. C'est pourquoi j'ai créé une extension.", 52 52 - "**What should the extension do?** The main goal of the extension is to provide t.8B7ACE467BC6CBF2D8B5": "**Que doit faire l'extension ?** Le principal objectif de l’extension est de fournir les valeurs réelles des variables partout où elles sont utilisées. Si un module est appelé à partir de plusieurs endroits ou simplement plusieurs fois, les informations doivent indiquer quel cas d’utilisation définit la variable avec quelle valeur. Si les modules sont profondément imbriqués, les valeurs doivent être résolues jusqu'à ce que nous atteignions les fichiers `.tfvars`. Ce sont les fichiers où vous pouvez définir des valeurs codées en dur pour les variables.", 53 53 - "How to start a VS Code extension": "Comment démarrer une extension VS Code", 54 54 - "Creating the basic template project for a VS Code extension is as easy as runnin.6F4EB3BBD45F5DF0A520": "Créer le projet modèle de base pour une extension VS Code est aussi simple que d'exécuter cette commande lorsque vous avez [Node](https://github.com/nodejs) installé :", 55 55 - "This command temporarily installs the Yeoman (a generator software), and enters .5FDA5DDC43BF09081006": "Cette commande installe temporairement Yeoman (un logiciel générateur), et entre dans un mode interactif où certaines questions doivent être répondues, comme le nom du projet, le type et la description. Dans le bloc suivant, vous pouvez voir toutes les questions et les réponses par défaut :", 56 56 - "For further information regarding VS Code extensions I want to link to [the offi.B0448C131D881366A635": "Pour plus d'informations sur les extensions VS Code, je tiens à renvoyer à [la documentation officielle](https://code.visualstudio.com/api/get-started/your-first-extension), car elle est toujours à jour contrairement à mes explications ici.", 57 57 - "3… 2… 1… Vibe-Coding!": "3… 2… 1… Vibe-Coding !", 58 58 - "I like to start new projects by asking [ChatGPT](https://github.com/openai) for .FD250EAE4277C6E99E2B": "J'aime commencer de nouveaux projets en posant des questions techniques générales à [ChatGPT](https://github.com/openai) comme :", 59 59 - "How would you suggest achieving such a project?": "Comment suggéreriez-vous de réaliser un tel projet ?", 60 60 - "How long do you estimate it will take me?": "Combien de temps estimez-vous que cela me prendra ?", 61 61 - "How difficult will it be?": "À quel point cela sera-t-il difficile ?", 62 62 - "Brainstorming with AI bots seems like a very sensible way to get a better overvi.59F0199CCC0E7F65A0D7": "Brainstormer avec des bots d'IA semble être un moyen très sensé d'avoir une meilleure vue d'ensemble des nouveaux projets, surtout lorsqu'on s'aventure dans des terrains complètement inconnus.\nCréer une extension VS Code était exactement un tel cas d'utilisation, car je n'avais jamais créé quelque chose pour VS Code ou tout autre IDE auparavant.\nAprès cette phase initiale de brainstorming, je préfère utiliser [Claude](https://github.com/anthropics) pour programmer tous les fichiers nécessaires à une telle extension, car, selon mon expérience, ce bot IA a vraiment la capacité de produire des codes impeccables. J’ai rarement rencontré des bugs ou problèmes d’exécution avec le code de Claude, alors je l’utilise exactement pour ces cas d’utilisation - les premiers pas. L’inconvénient de Claude est sa version d’essai gratuite très limitée, ce qui fait que je suis toujours prudent dans le choix de mes mots et que j’essaie de prévoir autant d'erreurs potentielles que l'IA pourrait faire.\nC’est ainsi que tout a commencé : j’ai pris le temps de formuler mon scénario et mon souhait exact dans les fenêtres de contexte limitées d’une machine à mots aléatoires appelée Claude et j’ai immédiatement reçu une implémentation massive du fichier `extension.ts`. Bien sûr, il y avait des différences évidentes entre ma vision et la communication avec ce LLM, alors j’ai dû lui dire une autre fois quelles sont les considérations importantes, et pour pouvoir recevoir davantage de code, j’ai également utilisé mon astuce magique : \"Si cela est trop grand pour un fichier, donne-moi simplement l’ensemble de `extension.ts` en plusieurs fichiers, ce qui devrait bien sûr fonctionner.\"", 63 63 - "Claude then went on a long journey.": "Claude s'est alors lancé dans un long périple.", 64 64 - "After some struggling to keep it going my tokens were all used and I had to figu.2D452B77249C8430A480": "Après quelques difficultés à le maintenir opérationnel, tous mes jetons étaient utilisés et j'ai dû terminer le reste du code moi-même. Néanmoins, j'ai réussi à obtenir une version fonctionnelle, car il ne manquait pas grand-chose, et j'ai immédiatement identifié quelques améliorations qui étaient passées inaperçues jusqu'à maintenant. Étant donné que je devais attendre le rechargement de mes jetons, c'est exactement ce que j'ai fait.", 65 65 - "The next morning the improvement session began, and after two long conversations.D0F806E5F02FCADFF975": "Le lendemain matin, la session d'amélioration a commencé, et après deux longues conversations, la fenêtre de contexte était complètement remplie et je ne pouvais même plus envoyer de messages dans le même chat, bien que mes jetons ne soient pas encore expirés. Cependant, tout ce que je voulais accomplir et obtenir de Claude était désormais disponible et je pouvais effectuer des tests dans l'un de mes projets plus importants. Après avoir confirmé et ajusté manuellement quelques morceaux de code, j'étais satisfait pour le moment et j'ai décidé que la première version publique était prête.", 66 66 - "Some trial and error with [GitHub Actions](https://github.com/github) later, I m.B1A6CFA9C8791F3B0E65": "Après quelques essais et erreurs avec [GitHub Actions](https://github.com/github), j'ai réussi à [configurer le publisher](https://code.visualstudio.com/api/working-with-extensions/publishing-extension#create-a-publisher) pour une extension VS Code. Et après deux versions correctives, j'étais assez satisfait des résultats.", 67 67 - "The Final Result": "Le Résultat Final", 68 68 - "Try out the extension yourself by clicking on the button below. There are still .53D329C6D712DEFF0967": "Essayez l'extension vous-même en cliquant sur le bouton ci-dessous. Il reste encore de nombreuses améliorations à apporter, donc si vous êtes intéressé pour aider, n'hésitez pas à contribuer sur [GitHub](https://github.com/trueberryless/terraform-variables-resolution).", 69 69 - "Install Terraform Variables Resolution": "Installer Terraform Variables Resolution", 70 70 - "Here you can see the example from [the Terraform explanation](#what-is-terraform.772358BC6F4987371F60": "Voici un exemple tiré de [l'explication de Terraform](#what-is-terraform), montrant comment cette extension ajoute visuellement les valeurs des variables dans VS Code :", 71 71 - "![Terraform Variables Resolution Example](../../../assets/terraform/terraform-va.94526691E47AD9D882F5": "Exemple de Résolution des Variables de Terraform", 72 72 - "How I Built a GitHub Profile README That Shouldn’t Exist (But It Does)": "Comment j'ai créé un README de profil GitHub qui ne devrait pas exister (mais il existe)", 73 73 - "A deep dive into the technical challenges and solutions behind my GitHub profile.8493E1B06B7E9BE16E95": "Une plongée approfondie dans les défis techniques et les solutions derrière mon README de profil GitHub, avec manipulation de SVG, automatisation et une grille dynamique Bento.", 74 74 - "Creating a standout <a class=\"gh-badge\" href=\"https://github.com/github\"><img sr.EC7EC3169C3D5076914B": "Créer un README de profil <a class=\"gh-badge\" href=\"https://github.com/github\"><img src=\"https://github.com/github.png\" alt=\"github\" />GitHub</a> remarquable ne se limite pas à ajouter quelques badges — il s'agit de repousser les limites techniques. Dans cette exploration approfondie, j'examine la manipulation de SVG au niveau inférieur, la conversion HTML en SVG, les animations intégrées et l'automatisation complète avec GitHub Actions pour créer ce que je crois être l'un des READMEs GitHub les plus avancés techniquement. D'une grille Bento dynamique qui se met à jour toutes les 5 minutes à des SVG intégrés en direct sans requêtes externes, ce projet a transformé mon profil en une vitrine vivante et auto-mise à jour de mon travail. Vous voulez savoir comment je l'ai fait ? Détaillons ensemble. 🚀", 75 75 - "Read the more formal story [here](https://trueberryless.org/work/github-profile-.5BCD9DBA0F2103014075": "Lisez l'histoire plus formelle [ici](https://trueberryless.org/work/github-profile-readme/)", 76 76 - "The Beginning: A README That Looked Like a Wikipedia Dump": "Le début : un README qui ressemblait à une page Wikipedia", 77 77 - "Every great story starts with a problem, and mine was simple: my [GitHub profile.3713BD43F2A1A91BFB7E": "Chaque grande histoire commence par un problème, et le mien était simple : le README de mon [profil GitHub](https://github.com/trueberryless) était un vrai bazar. Il était long. Il y avait trop de texte. Il débordait de badges — tellement que ça ressemblait à une collection de trophées internet. Hackathons, contributions GitHub, Astro, roadmap.sh — s’il existait un badge, je l’avais.", 78 78 - "At first, I thought this was fine. It showed everything about me, right? But one.773B7C308644FEDA7081": "Au début, je pensais que c'était bien. Ça montrait tout sur moi, non ? Mais un jour, je l’ai regardé et j’ai réalisé :", 79 79 - "This is not stylish. This is a cluttered disaster.": "Ce n'est pas stylé. C'est un désastre encombré.", 80 80 - "I needed something new. Something clean. Something visually striking. I wanted a.C82835C3D13A6981B63B": "J'avais besoin de quelque chose de nouveau. De quelque chose de propre. De quelque chose de visuellement frappant. Je voulais une **grille Bento** qui inciterait les gens à s'arrêter et à l'admirer, plutôt que de défiler dans la confusion. Un design si bien exécuté que toute personne qui le verrait voudrait instantanément le sien.", 81 81 - "That was the dream. Now I just had to make it real.": "C'était le rêve. Maintenant, je devais juste le réaliser.", 82 82 - "Phase 1: The HTML Dream (and Markdown Nightmare)": "Phase 1 : Le rêve HTML (et le cauchemar Markdown)", 83 83 - "The first step was simple: mock up my perfect profile in HTML and CSS. And let m.EEFE6C2742301B518D46": "La première étape était simple : modéliser mon profil parfait en HTML et CSS. Et laissez-moi vous dire, c’était incroyable. Il avait une mise en page parfaite, des animations fluides et juste le bon équilibre entre contenu et espace. Puis la réalité m’a rattrapé. Il fallait que cela fonctionne dans le *Markdown au format GitHub*. Pas de problème, non ? Markdown prend en charge le HTML ! Alors j'ai copié mon magnifique HTML dans mon README et j'ai enregistré.", 84 84 - "[GitHub](https://github.com/github): *Absolutely not.*": "[GitHub](https://github.com/github) : *Absolument pas.*", 85 85 - "GitHub’s Markdown [strips out a not a huge number of HTML tags, but important on.8ADCE02DB7CC7739FAD2": "Le Markdown de GitHub [supprime un certain nombre de balises HTML, mais des balises importantes](https://github.github.com/gfm/#disallowed-raw-html-extension). Pour des raisons de sécurité, bien sûr (et je respecte totalement cela, GitHub, vraiment ❤️), mais cela signifiait que mon design parfait était complètement **inutilisable**.", 86 86 - "I tried tweaking it. Replacing unsupported tags with ones that worked. Maybe I c.14452FE82B6AC0DB8958": "J'ai essayé de le modifier. De remplacer des balises non prises en charge par d'autres qui fonctionnaient. Peut-être que je pouvais en sauver une partie ? *Non*. Les limitations du Markdown rendaient ma mise en page de rêve impossible.", 87 87 - "Phase 2: The \"Just Use a Python Script\" Cope": "Phase 2 : \"Juste utiliser un script Python\" (comment survivre)", 88 88 - "When in doubt, automate. If I couldn’t get my HTML in directly, maybe I could ge.FD6C9ADF71816E0E5B49": "En cas de doute, automatisez. Si je ne pouvais pas intégrer directement mon HTML, peut-être pourrais-je générer quelque chose de dynamique avec un script ? J'ai donc monté un script Python pour récupérer mon dernier dépôt GitHub et l’insérer dans mon README. Voici ces quelques octets de code Python au hasard :", 89 89 - "This seemed like a step in the right direction. It was automated. It was functio.D20A833F97288BD3E73B": "Ça semblait être une bonne direction. C'était automatisé. C'était fonctionnel. Mais cela ne résolvait pas mon véritable problème. 😢", 90 90 - "This wasn’t about dynamic content — it was about *design*. And no amount of Pyth.8C914CE49CA59FC373EC": "Ce n'était pas une question de contenu dynamique — c'était une question de *design*. Et aucun script Python ne rendrait Markdown beau.", 91 91 - "Phase 3: \"Fine, I'll Just Use a Screenshot\" (Rock Bottom)": "Phase 3 : \"Bon, je vais juste utiliser une capture d'écran\" (fond du gouffre)", 92 92 - "At this point, I was desperate. I considered the unthinkable: *just take a scree.A573BC6FDCB7D404B86F": "À ce stade, j'étais désespéré. J'ai envisagé l'impensable : *il suffit de prendre une capture d'écran du HTML et de la mettre dans mon README en tant qu'image.* C'était une approche brutale. C'était paresseux. C'était... efficace ?", 93 93 - "For a moment, I actually thought about doing it. But I knew deep down that I wou.F11BA1015DB80A5D8D2D": "Pendant un instant, j'ai vraiment pensé à le faire. Mais je savais au fond de moi que je ne me pardonnerais jamais si je laissais cela être ma solution finale.", 94 94 - "Just for the reference, I would have used [Puppeteer](https://www.npmjs.com/pack.7C033B35BC935C314B6E": "À titre de référence, j'aurais utilisé [Puppeteer](https://www.npmjs.com/package/puppeteer) et [FFmpeg](https://www.ffmpeg.org/) — je n'ai aucune idée de ce que sont ces outils.", 95 95 - "Phase 4: Enter SVG (The Light at the End of the Tunnel)": "Phase 4 : Passons aux SVG (la lumière au bout du tunnel)", 96 96 - "I abandoned the cursed screenshot plan and looked for something more flexible.": "J'ai abandonné le plan maudit de la capture d'écran et cherché quelque chose de plus flexible.", 97 97 - "SVGs.": "Les SVG.", 98 98 - "SVGs could scale, they supported both text and images, and — most importantly — .F259141963EA4A11F694": "Les SVG sont évolutifs, prennent en charge à la fois le texte et les images, et — plus important encore — ils peuvent **intégrer** du HTML à l'intérieur.", 99 99 - "So I tried something like this:": "Alors j'ai essayé quelque chose comme ceci :", 100 100 - "Promising! This could actually work!": "Prometteur ! Cela pourrait vraiment fonctionner !", 101 101 - "Then I got busy with other things, forgot to debug it, and never returned to thi.9BEE5D08ED4C8C9B33DD": "Puis j'ai été occupé par d'autres choses, j'ai oublié de le déboguer, et je n'y suis jamais retourné.", 102 102 - "": "Jeter une bonne idée", 103 103 - "Phase 5: SVGs Within SVGs Within SVGs (Inception Level 100)": "Phase 5 : Des SVG imbriqués dans des SVG eux-mêmes imbriqués (niveau Inception 100)", 104 104 - "When I came back to the project, I was **determined** to make it work.": "Quand je suis revenu sur le projet, j'étais **déterminé** à le faire fonctionner.", 105 105 - "I realised that if I couldn’t directly embed HTML into Markdown, I could fake it.8993D07A86C6FB209386": "J’ai réalisé que si je ne pouvais pas intégrer directement du HTML dans le Markdown, je pouvais le simuler en utilisant des SVG imbriqués. (Ceci est massivement simplifié ; le processus réel a pris des jours, qui ressemblaient à des semaines sinon des mois, mais je sais que vous ne lirez pas tout cela de toute façon, alors peu importe.)", 106 106 - "And then, after hours of research, I stumbled across a life-changing Stack Overf.B19E66FB6CDC38EB7F45": "Et puis, après des heures de recherche, je suis tombé sur une réponse révolutionnaire sur Stack Overflow :", 107 107 - "This lead me to the current solution:": "Cela m'a conduit à la solution actuelle :", 108 108 - "Convert my HTML layout to SVG.": "Convertir ma mise en page HTML en SVG.", 109 109 - "Encode all images in **Base64** (because GitHub Markdown won’t load external ima.6BA37AFF26936D15AD36": "Encoder toutes les images en **Base64** (car le Markdown de GitHub ne charge pas les images externes à l'intérieur d'un SVG avec du HTML).", 110 110 - "Inline dynamic SVGs (like my GitHub stats, Spotify status, etc.).": "Inclure des SVG dynamiques (comme mes statistiques GitHub, mon statut Spotify, etc.).", 111 111 - "Automate everything with **GitHub Actions**.": "Tout automatiser avec **GitHub Actions**.", 112 112 - "The Grand Finale: The Ultimate GitHub Profile README": "Le Grand Final : Le README de profil GitHub ultime", 113 113 - "A sleek Bento Grid layout, perfectly structured in SVG.": "Une mise en page en grille Bento élégante, parfaitement structurée en SVG.", 114 114 - "A live-updating Spotify status, inlined as an SVG.": "Un statut Spotify mis à jour en temps réel, inclus en SVG.", 115 115 - "GitHub stats, dynamically inserted via automation.": "Des statistiques GitHub, insérées dynamiquement via l'automatisation.", 116 116 - "Fully responsive, fully scalable, and fully insane to build.": "Entièrement responsive, entièrement évolutif et absolument fou à construire.", 117 117 - "It updates itself every 5 minutes, runs completely on GitHub Actions, and doesn’.D6DD34ED3B85DAE2F120": "Il se met à jour automatiquement toutes les 5 minutes, fonctionne entièrement sur GitHub Actions et ne dépend d'aucun service externe. C'est beau. C'est efficace. Et surtout, c'est techniquement absurde dans le meilleur sens du terme.", 118 118 - "Take a look at a specific example of the final results at some point back in tim.096EC0AF4A7E3D30CE29": "Jetez un œil à un exemple concret du résultat final à un certain point dans le temps.", 119 119 - "Isn't that bad compared to the [old README.md](https://github.com/trueberryless/.E3E5E0072DF705843179": "Ce n'est pas si mal comparé à l'[ancien README.md](https://github.com/trueberryless/trueberryless/blob/5dce4ad0033b00829f8ec3756827057017447a65/README.md). Et ne commentez pas pourquoi j’écoute du K-pop ! C’est mieux que ce que vous pensez, croyez-moi.", 120 120 - "Check out the live version on my GitHub [trueberryless](https://github.com/trueb.4FFADA956CF12B9EFE9F": "Consultez la version en direct sur mon GitHub [trueberryless](https://github.com/trueberryless) — si j'ai décidé de la garder... — et laissez un follow si vous y êtes déjà et avez apprécié cette lecture ! ❤️", 121 121 - "Final Thoughts: Was It Worth It?": "Pensées finales : Est-ce que ça valait le coup ?", 122 122 - "Absolutely.": "Absolument.", 123 123 - "This journey was frustrating, time-consuming, and filled with more roadblocks th.9E6BE12D4EDD580594EA": "Ce parcours fut frustrant, chronophage, et rempli de plus d'obstacles que je ne l'aurais jamais imaginé. Mais j'ai appris tellement de choses sur les SVG, les limitations du Markdown, GitHub Actions et l'automatisation en cours de route.", 124 124 - "Would I do it again? Definitely.": "Est-ce que je le referais ? Définitivement.", 125 125 - "Would I recommend it? Only if you have way too much patience. 😅": "Est-ce que je le recommanderais ? Seulement si vous avez une patience infinie. 😅", 126 126 - "But in the end, I created a [GitHub](https://github.com/github) profile README t.2B7EC6933681A24E2F33": "Mais au final, j'ai créé un README de profil [GitHub](https://github.com/github) qui *ne devrait pas exister* — mais il existe. Et je l'adore.", 127 127 - "A short history of Starlight Sidebar Topics plugins": "Une courte histoire des plugins Starlight Sidebar Topics", 128 128 - "In this blog post, I'll show you the evolution of Starlight plugins with a case .4AA6D9FADD1A6BE13985": "Dans cet article de blog, je vais vous montrer l'évolution des plugins Starlight avec une étude de cas du plugin Starlight Sidebar Topics.", 129 129 - "In this post, I'll show you the evolution of <a class=\"gh-badge\" href=\"https://g.995EB19ECCFE1867C83C": "Dans cet article, je vais vous montrer l'évolution des <a class=\"gh-badge\" href=\"https://github.com/withastro/starlight\"><img src=\"/starlight.png\" alt=\"Starlight\" /> Starlight</a> plugins avec une étude de cas du plugin [Starlight Sidebar Topics](https://github.com/hideoo/starlight-sidebar-topics). Préparez-vous à découvrir des faits impressionnants sur les personnes et le code autour de Starlight.", 130 130 - "Maybe you have heard about this cool documentation framework before. I talk abou.5A104B8E7F80C4B25128": "Peut-être avez-vous déjà entendu parler de ce framework de documentation génial. J'en parle assez souvent et je l'utilise régulièrement. Non seulement parce que je suis un contributeur actif, mais aussi parce que [Starlight](https://starlight.astro.build) m’est vraiment cher. Ses caractéristiques : simplicité et minimalisme, mais tout ce dont vous avez besoin. Sa performance : [plus rapide que 98 % des autres sites Web](https://www.websitecarbon.com/website/starlight-astro-build-getting-started/). Son accessibilité : même pas une question !", 131 131 - "The Creation": "La Création", 132 132 - "However, one thing that's objectively missing in my opinion is a granular way of.77A7287A955230B54D96": "Cependant, une chose qui manque objectivement à mon avis, c'est une manière granulaire de séparer les sujets généraux dans votre documentation. Et je ne suis pas seul avec cette opinion subjective largement acceptée. [HiDeoo](https://github.com/HiDeoo) n'est pas seulement l'un des mainteneurs les plus actifs du projet, mais également l'auteur des plugins les plus nombreux et, selon moi, les meilleurs que vous pouvez trouver pour Starlight. Ils ont également remarqué cette fonctionnalité de niche manquante concernant les sujets. C'est pourquoi ils ont décidé de créer le plugin [Starlight Sidebar Topics](https://github.com/hideoo/starlight-sidebar-topics) dès octobre 2024, ce qui vous permet de créer une barre latérale avec des sujets. Lisez-en plus sur les fonctionnalités du plugin dans [sa documentation](https://starlight-sidebar-topics.netlify.app/).", 133 133 - "The one thing that bothered me personally in the early days of the plugin was th.6F5F49BB9B5B06675F60": "La chose qui me gênait personnellement dans les premiers jours du plugin était la manière dont les sujets étaient affichés dans la barre latérale. Parce qu'il n’utilise pas - comme je l’imaginais - un menu déroulant pour passer d'un sujet à l'autre, mais montre au contraire toujours tous les sujets. Ce choix de conception était, comme [HiDeoo le souligne clairement](https://github.com/HiDeoo/starlight-sidebar-topics/issues/2#issuecomment-2410196392), très intentionnel et non sans raisons : tous les sujets devraient être visibles en même temps. Prouvé par les documents [Astro](https://github.com/withastro) eux-mêmes ([Chris Swithinbank](https://github.com/delucis) a implémenté la [\"barre latérale à onglets\"](https://github.com/withastro/docs/pull/9890) pour la documentation Astro v5 plus tard dans le même mois), cette approche présente de nombreux avantages par rapport à un menu déroulant. Néanmoins, j'étais toujours insatisfait de ce design, alors j’ai créé ma propre version.", 134 134 - "Copying and pasting was my strength when it came to building a new Starlight plu.860638CCB2BA61F003E9": "Copier et coller était ma force quand il s’agissait de créer un nouveau plugin Starlight pour la communauté. Et c’est ce que j’ai fait. J’ai pris le plugin Starlight Sidebar Topics comme point de départ et j’ai simplement adapté le composant `Topics.astro`, qui inclut le HTML pour afficher les sujets dans la barre latérale. Après avoir lutté un certain temps pour implémenter un menu déroulant qui soit satisfaisant et propre visuellement (désolé pour l'autosatisfaction, mais je suis fier de moi), j’ai finalement trouvé une solution dont je suis très satisfait et j’ai publié ce nouveau plugin sous le nom [Starlight Sidebar Topics Dropdown](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown) - quelle originalité.", 135 135 - "The Adaptation": "L'Adaptation", 136 136 - "You might think that this story is now over because everyone could just use the .B22BDA5C191E4AEC54CE": "Vous pourriez penser que cette histoire est maintenant terminée car tout le monde pourrait simplement utiliser la variante qu’il souhaite, tout le monde est heureux. Mais Starlight a continué et continue de s'améliorer, et environ trois mois plus tard, le 15 février, il y a eu l'ajout tant attendu de « route data » dans Starlight avec la sortie de [v0.32](https://github.com/withastro/starlight/releases/tag/@astrojs/starlight@0.32.0). Cet ajout apparemment simple a ouvert tant de possibilités, auxquelles je n’aurais jamais pensé. HiDeoo a de nouveau été la principale source d'inspiration pour les auteurs de plugins et a poussé cette nouvelle fonctionnalité à ses limites. Il leur a fallu seulement deux jours pour [adapter plus de 11 plugins à la dernière version de Starlight à l’époque](https://bsky.app/profile/hideoo.dev/post/3liffpudc5c2b), et ils ont ensuite amélioré et remanié une grande partie du code pour tirer encore plus parti de cette fonctionnalité puissante.", 137 137 - "And so comes the day when HiDeoo contacts me to tell me that the Starlight Sideb.CB4E9F542FB4DC96204E": "Et ainsi vint le jour où HiDeoo me contacte pour me dire que le plugin Starlight Sidebar Topics utilise maintenant la nouvelle fonctionnalité de données de route de Starlight. Au début, je ne comprenais pas vraiment quels avantages ces changements d’implémentation auraient, mais HiDeoo a pris le temps de m’expliquer que je pouvais maintenant transformer le plugin Starlight Sidebar Topics Dropdown en un simple composant utilisant les données de route de son plugin. Intuitivement, j’étais opposé à cette idée intelligente car cela donnait l’impression que mon seul plugin ayant une certaine popularité devenait un composant inutile. Je ne pouvais pas être plus loin de la vérité.", 138 138 - "The Union": "L'Union", 139 139 - "Eventually, I decided to refactor my plugin into a component - this refactoring .4324540ABE36305F27C5": "Finalement, j’ai décidé de refondre mon plugin en un composant - cette refonte a éliminé exactement [1210 lignes de code et ajouté 68 lignes de changelog](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/pull/40) - et j’ai remarqué à quel point il fallait maintenant peu de code pour transformer la liste `Topics.astro` en un menu déroulant du point de vue d’un utilisateur. J’étais convaincu que c’était vraiment la bonne direction pour le ~~plugin~~ composant. Et donc, j’ai mis à jour toute la documentation - plus exactement : supprimé plus de 200 lignes de texte (ça fait du bien) - et j’ai publié la nouvelle [version 0.5](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown/releases/tag/starlight-sidebar-topics-dropdown%400.5.0).", 140 140 - "Now you might wonder how such mature plugins could still improve over time. To b.8F9AABD213A178EFB11C": "Vous vous demandez peut-être comment des plugins aussi matures pourraient encore s’améliorer avec le temps. Pour être honnête, moi-même j’ai été très surpris lorsque HiDeoo a lâché une idée brillante dans mes messages privés sur Discord. Son idée était et reste ingénieuse. Sinon, je n’y penserais même plus à ce *sujet*. Mais me voilà, en train d’écrire un texte de 800 mots juste pour vous préparer à ce qui va suivre. Roulement de tambour ! Attachez votre ceinture ! Cette déclaration de HiDeoo va vous épater :", 141 141 - "\"One could have something like the default built-in list on a desktop view, and .D9D8BC0B8C5FADE63015": "\"On pourrait avoir quelque chose comme la liste intégrée par défaut sur une vue bureau, et utiliser votre composant pour la version mobile, ou quelque chose comme ça 🧠\" — HiDeoo, 21/03/2025 09:54", 142 142 - "Profound. Timeless. Golden.": "Profond. Intemporel. En or.", 143 143 - "And that single, beautiful spark of an idea? It’s precisely what I’ll guide you .D5B772B8E2ED479D7F54": "Et cette seule et belle étincelle d’idée ? C’est précisément ce que je vais vous expliquer dans [l’article \"Starlight Topics Dropdown and List together\"](/blog/starlight-dropdown-and-list-together/).", 144 144 - "How to make your Starlight sidebar items look better": "Comment rendre les éléments de la barre latérale Starlight plus attrayants", 145 145 - "In this blog post, we'll take a look at how small changes can make a big differe.710EB546A7825319B5BD": "Dans cet article de blog, nous examinerons comment de petits changements peuvent faire une grande différence en termes d'espaces blancs, de tailles de police, de poids et de couleurs dans votre barre latérale Starlight.", 146 146 - "In this blog post, we'll take a look at how small changes can make a big differe.91CB4D1869F959776162": "Dans cet article de blog, nous examinerons comment de petits changements peuvent faire une grande différence en termes d'espaces blancs dans votre <a class=\"gh-badge\" href=\"https://github.com/withastro/starlight\"><img src=\"/starlight.png\" alt=\"Starlight\" />Starlight</a>.", 147 147 - "Have you ever wondered why your [Starlight][starlight] sidebar doesn't look that.1641BC1FAEE439920C90": "Vous êtes-vous déjà demandé pourquoi votre barre latérale [Starlight][starlight] n'est pas si attrayante ? Saviez-vous combien l'espace entre les éléments de votre barre latérale est inconsciemment important ? La taille de la police, le poids et les petites différences de couleur ? Dans ce guide, nous examinerons comment personnaliser l'apparence de votre barre latérale Starlight avec des étapes rapides et faciles.", 148 148 - "Prerequisites": "Prérequis", 149 149 - "First, you need to [set up your Starlight site][starlight-getting-started]. Afte.DF558576AB082588D034": "Tout d'abord, vous devez [configurer votre site Starlight][starlight-getting-started]. Ensuite, Starlight offre un [guide sur la personnalisation des styles appliqués à votre site Starlight][starlight-css], qui est la fonctionnalité que nous utiliserons dans cet article.", 150 150 - "As described in [this guide][starlight-css-custom], you need to create a `.css` .0CD83940C89F2D1185A1": "Comme décrit dans [ce guide][starlight-css-custom], vous devez créer un fichier `.css` quelque part dans votre répertoire `src/`, où vous pouvez définir vos styles CSS. N'oubliez pas d'ajouter le chemin vers ce fichier `.css` dans le tableau `customCss` de Starlight dans le fichier `astro.config.mjs` :", 151 151 - "After completing these preparation steps, you are ready to try out some nice adj.DE7E5B1DE51E76B69982": "Après avoir terminé ces étapes de préparation, vous êtes prêt à essayer quelques ajustements intéressants à la conception de la barre latérale de Starlight.", 152 152 - "Customizations": "Personnalisations", 153 153 - "There are endless different possibilities that you can play around with just wit.315492DDFA6948DAD882": "Il existe une infinité de possibilités différentes auxquelles vous pouvez jouer simplement avec votre CSS personnalisé. Je vais vous donner quelques idées que j'ai trouvées très utiles en expérimentant avec la conception de la barre latérale. Bien que certaines de ces idées puissent sembler absurdes, je vous promets que la combinaison de quelques-unes d'entre elles rendra votre barre latérale Starlight encore meilleure.", 154 154 - "One thing to note though is that in this blog post the focus lies on adjusting t.157A7D5F675513D49CA2": "Une chose à noter cependant, dans cet article, l'accent est mis sur l'ajustement du style des **éléments de niveau racine** (ceux qui n'ont pas d'enfants) dans la barre latérale.", 155 155 - "But before I do that, I'll show you how the default styling of the Starlight sid.935D4EBD7A75949003B6": "Mais avant cela, je vais vous montrer à quoi ressemble actuellement le style par défaut de la barre latérale Starlight :", 156 156 - "![Default styling of the Starlight sidebar](../../../assets/sidebar-css/no-css.p.CD83DAFB82A4B2123FA6": "Style par défaut de la barre latérale Starlight", 157 157 - "Manipulate the whitespaces between sidebar items": "Manipuler les espaces blancs entre les éléments de la barre latérale", 158 158 - "On the root level of your Starlight sidebar, there are two different types of el.44095ABCBC3AC9DE4022": "Au niveau racine de votre barre latérale Starlight, il existe deux types d'éléments différents : **pages** et **groupes**. Bien que le style par défaut soit assez correct, je trouve que les espaces blancs - c'est-à-dire la marge entre les éléments qui n'inclut aucun contenu - sont un peu trop grands, surtout entre les éléments de niveau racine. Avec cet exemple de CSS personnalisé ci-dessous, j'ai réduit la marge entre les éléments de niveau racine tout en conservant la marge entre les groupes. Les styles CSS importants sont surlignés dans le bloc de code.", 159 159 - "![Starlight sidebar where the margin between root-level items is smaller](../../.880AFEBFAC9D61C70E2C": "Barre latérale Starlight où la marge entre les éléments de niveau racine est réduite", 160 160 - "Perhaps, this will not be as useful to you because you don't use root-level page.31533AC4A173BE6AA7E5": "Peut-être que cela ne sera pas aussi utile pour vous parce que vous n'utilisez pas de pages de niveau racine dans votre barre latérale, donc cet effet ne sera pas perceptible pour vous. Mais si c'est le cas, essayez-le.", 161 161 - "Adjust the font weight of sidebar items": "Ajuster le poids de la police des éléments de la barre latérale", 162 162 - "[Imho][imho] the one thing that triggers me the most about Starlight's root-leve.BC0D0A5B6F41C0B208BF": "[À mon avis][imho], ce qui me dérange le plus avec les éléments de niveau racine de la barre latérale de Starlight, c'est leur caractère gras. C'est probablement une opinion très subjective, mais si vous me demandez, une seule page ne peut pas être aussi importante qu'un groupe entier de pages dans votre documentation. Par conséquent, j'ai rendu le poids de la police des éléments de niveau racine plus léger, comme vous pouvez le voir dans le bloc de code ci-dessous.", 163 163 - "![Starlight sidebar with lighter font weight](../../../assets/sidebar-css/font-w.7D96D24D62FE18FEF0C9": "Barre latérale Starlight avec un poids de police réduit", 164 164 - "Adjust the colour of sidebar items": "Ajuster la couleur des éléments de la barre latérale", 165 165 - "A small but subtle change: I made unselected root-level items appear dimmer in t.487CF0E6076E81E13BB4": "Un petit changement mais subtil : j'ai rendu les éléments de niveau racine non sélectionnés plus ternes dans le bloc de code ci-dessous.", 166 166 - "If you choose to use this design as well, I recommend that you only apply the se.C425BF4402932D0E21FC": "Si vous choisissez d'utiliser ce design également, je recommande de n'appliquer que la deuxième règle CSS puisque la première revient simplement à démontrer comment ajuster le style des éléments de niveau racine sélectionnés — cette règle s'applique également aux autres blocs de code dans ce blog s'ils sont marqués comme `valeur par défaut`.", 167 167 - "": "Barre latérale Starlight avec des couleurs plus ternes", 168 168 - "Adjust the font size of sidebar items": "Ajuster la taille de la police des éléments de la barre latérale", 169 169 - "Although I don't recommend it, you can also adjust the font size of sidebar item.5B666452173153740723": "Bien que je ne le recommande pas, vous pouvez également ajuster la taille de la police des éléments de la barre latérale. Avec cet exemple de CSS personnalisé ci-dessous, j'ai réduit la taille de la police des éléments de niveau racine.", 170 170 - "![Starlight sidebar with smaller font size](../../../assets/sidebar-css/font-siz.B88E6D3A46696C763ECA": "Barre latérale Starlight avec une taille de police réduite", 171 171 - "Recommendations": "Recommandations", 172 172 - "Summing everything up, I recommend that you apply some mix of the above customiz.01EDE8C6353CC9B29A42": "Pour résumer, je recommande d'appliquer un mélange des options de personnalisation ci-dessus, que vous pouvez facilement vérifier dans un seul fichier `.css`.", 173 173 - "Note that I also use [Cascade Layers][starlight-css-cascade-layers], supported s.26DC0EFB0948E47CFD73": "Notez que j'utilise également les [niveaux de cascade][starlight-css-cascade-layers], pris en charge depuis [Starlight 0.34.0][starlight-0-34], et je recommande de les utiliser pour spécifier l'ordre dans lequel les styles CSS sont appliqués.", 174 174 - "How to create a horizontal progress indicator for your Starlight site": "Comment créer un indicateur de progression horizontal pour votre site Starlight", 175 175 - "Learn how to create a horizontal progress indicator for your Starlight site.": "Apprenez à créer un indicateur de progression horizontal pour votre site Starlight.", 176 176 - "Learn how to create a horizontal progress indicator for your <a class=\"gh-badge\".E525FE811A5499114EFE": "Apprenez à créer un indicateur de progression horizontal pour votre <a class=\"gh-badge\" href=\"https://github.com/withastro/starlight\"><img src=\"/starlight.png\" alt=\"Starlight\" />Starlight</a> site.", 177 177 - "In this post, we would like to show you how [FrostyBee](https://github.com/frost.E8FB1C6C96EF64C97121": "Dans cet article, nous aimerions vous montrer comment [FrostyBee](https://github.com/frostybee) a créé un indicateur de progression horizontal et épuré pour les sites Starlight.", 178 178 - "You will need to have an existing Starlight website.": "Vous devez disposer d’un site web Starlight existant.", 179 179 - "Create the progress indicator component": "Créer le composant d'indicateur de progression", 180 180 - "Let's create a new component called `ProgressIndicator.astro` in the `src/compon.3AF2A56DBB850F8660D1": "Créons un nouveau composant appelé `ProgressIndicator.astro` dans le répertoire `src/components/`. Ce composant sera chargé de rendre l'indicateur de progression.", 181 181 - "We create a container which spans across the whole width with the progress bar `.BF53914FAF1D12F4D39C": "Nous créons un conteneur qui s'étend sur toute la largeur avec la barre de progression `<div>` à l'intérieur. La largeur de l'élément `<div>` interne est mise à jour chaque fois que l'utilisateur fait défiler la page (et lors du chargement de celle-ci) pour refléter la position de défilement actuelle.", 182 182 - "In the hidden lines is the styling which makes sure that the progress bar looks .D3205B85D528FA0A2D8A": "Dans les lignes masquées se trouve le style qui s'assure que la barre de progression ressemble à une barre de progression typique. Elle est également adaptée à Starlight car la barre est automatiquement masquée lorsque le site n’a ni barre latérale ni table des matières, mais possède un élément « hero », comme la plupart des pages de destination.", 183 183 - "One thing to point out is what the global CSS (line 45) does: It pushes the mobi.9D93B4CCEB69834E52E2": "Un point important à noter concernant le CSS global (ligne 45) : il déplace le menu déroulant de la table des matières mobile vers le bas pour créer plus d’espace blanc au niveau de la barre de progression. C'est une préférence personnelle et vous pouvez le supprimer si vous le souhaitez.", 184 184 - "Starlight Override": "Surcharge dans Starlight", 185 185 - "Now we can use this component in a [Starlight override](https://starlight.astro..BD7A14DF6609C76376D6": "Nous pouvons maintenant utiliser ce composant dans une [surcharge Starlight](https://starlight.astro.build/guides/overriding-components/). Dans ce cas, il est logique de surcharger le composant [`Header.astro`](https://starlight.astro.build/reference/overrides/#header-1) comme ceci :", 186 186 - "Do not forget to add this component override to your `astro.config.mjs` file:": "N’oubliez pas d’ajouter cette surcharge de composant à votre fichier `astro.config.mjs` :", 187 187 - "Source Code": "Code source", 188 188 - "You can find the whole project code on [GitHub](https://github.com/trueberryless.F650372F9DC07B1F43E8": "Vous pouvez trouver l'intégralité du code du projet sur [GitHub](https://github.com/trueberryless/starlight-progress-indicator) et dans cet [exemple sur Stackblitz](https://stackblitz.com/github/trueberryless/starlight-progress-indicator?file=src%2Fcomponents%2FProgressIndicator.astro).", 189 189 - "Conclusion": "Conclusion", 190 190 - "With this setup, the progress indicator will be displayed on every page (except .14DF840C82B37252652E": "Avec cette configuration, l'indicateur de progression sera affiché sur chaque page (sauf les pages de destination) de votre site Starlight. 🥳", 191 191 - "You can also check out [FrostyBee's](https://github.com/frostybee) [Starlight Sc.2885FB180F098A43BD51": "Vous pouvez également consulter le [plugin Starlight Scroll To Top de FrostyBee](https://github.com/frostybee/starlight-scroll-to-top), qui prend également en charge un [Progress Ring](https://frostybee.github.io/starlight-scroll-to-top/configuration/#showprogressring) intégré depuis la version `0.3.1`. 🙌", 192 192 - "Starlight Topics Dropdown and List together": "Dropdown et Liste des sujets Starlight ensemble", 193 193 - "Learn how to combine a desktop list and mobile dropdown for your Starlight sideb.E44A5587DB1652DE8801": "Découvrez comment combiner une liste de bureau et un menu déroulant mobile pour les sujets de votre barre latérale Starlight.", 194 194 - "Combine two <a class=\"gh-badge\" href=\"https://github.com/withastro/starlight\"><i.F2B401A419A027863D20": "Combinez deux plugins <a class=\"gh-badge\" href=\"https://github.com/withastro/starlight\"><img src=\"/starlight.png\" alt=\"Starlight\" />Starlight</a> Sidebar Topics pour afficher une liste de sujets sur le bureau et un menu déroulant dans la barre latérale mobile.", 195 195 - "Using the [Starlight Sidebar Topics](https://github.com/hideoo/starlight-sidebar.7183C62B96DBF9A43128": "En utilisant le plugin [Starlight Sidebar Topics](https://github.com/hideoo/starlight-sidebar-topics) avec le composant [Starlight Sidebar Topics Dropdown](https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown), vous pouvez créer un site web qui affiche une liste de sujets sur le bureau et un menu déroulant sur mobile.", 196 196 - "Install the packages": "Installer les paquets", 197 197 - "First, install the `starlight-sidebar-topics` plugin and also the `starlight-sid.6A32241A1C081FF4DD1C": "Tout d'abord, installez le plugin `starlight-sidebar-topics` ainsi que le composant `starlight-sidebar-topics-dropdown` :", 198 198 - "Afterwards, follow the setup guides from [Starlight Sidebar Topics](https://star.754B56EA2499006C8169": "Ensuite, suivez les guides d'installation depuis [Starlight Sidebar Topics](https://starlight-sidebar-topics.netlify.app/docs/getting-started/#installation) et [Starlight Sidebar Topics Dropdown](https://starlight-sidebar-topics-dropdown.trueberryless.org/docs/getting-started/#installation).", 199 199 - "Modify the Sidebar component": "Modifier le composant de la barre latérale", 200 200 - "In the setup guide from the dropdown component, you have created a sidebar compo.BD6B58F9BEEFEE582749": "Dans le guide d'installation du composant déroulant, vous avez créé un composant de barre latérale qui ne rend que le menu déroulant. Désormais, vous devez modifier ce composant pour qu'il rende également la barre latérale par défaut si l'utilisateur est sur un bureau.", 201 201 - "Result": "Résultat", 202 202 - "If you follow these steps, your sidebar will look like this:": "Si vous suivez ces étapes, votre barre latérale ressemblera à ceci :", 203 203 - "![Final result with desktop view on the left and mobile view on the right](../...6745D424D50B4DE3BC95": "Résultat final avec l'affichage bureau à gauche et l'affichage mobile à droite", 204 204 - "You can find the complete source code of this guide in this [StackBlitz example].B731F1E66F12B002F90D": "Vous pouvez trouver le code source complet de ce guide dans cet [exemple StackBlitz](https://stackblitz.com/edit/withastro-starlight-qgraahmp?file=astro.config.mjs).", 205 205 - "Endless possibilities": "Possibilités infinies", 206 206 - "You could also do it the other way around (list on mobile, dropdown on desktop) .6BA6A2F32E24F0FB3A00": "Vous pourriez également faire l'inverse (liste sur mobile, menu déroulant sur le bureau) en intervertissant les propriétés `display: block` et `display: none` dans le CSS.", 207 207 - "Moreover, you could also create your own display component, which uses the route.40B5CA2AA37239989091": "De plus, vous pourriez également créer votre propre composant d'affichage, qui utilise les données de route depuis le plugin Starlight Sidebar Topics et rend les sujets d'une manière personnalisée. Cela est un peu plus avancé, mais vous trouverez plus d'informations à ce sujet dans la documentation [\"Custom Topics List\"](https://starlight-sidebar-topics.netlify.app/docs/guides/custom-topic-list/).", 208 208 - "Setting up Kubernetes with Cilium and Cloudflare": "Mise en place de Kubernetes avec Cilium et Cloudflare", 209 209 - "Today we'll take a look at how to set up a Kubernetes cluster with K3s and Ciliu.651207C3314901C11632": "Aujourd'hui, nous allons voir comment configurer un cluster Kubernetes avec K3s et Cilium.", 210 210 - "This blog posts describes the process of setting up a <a class=\"gh-badge\" href=\".E82478488BD3E7D9E2C2": "Cet article de blog décrit le processus de configuration d'un cluster <a class=\"gh-badge\" href=\"https://github.com/kubernetes\"><img src=\"https://github.com/kubernetes.png\" alt=\"Kubernetes\" />Kubernetes</a> avec <a class=\"gh-badge\" href=\"https://github.com/k3s-io\"><img src=\"https://github.com/k3s-io.png\" alt=\"k3s\" />k3s</a> et <a class=\"gh-badge\" href=\"https://github.com/cilium\"><img src=\"https://github.com/cilium.png\" alt=\"Cilium\" />Cilium</a>. Nous utilisons <a class=\"gh-badge\" href=\"https://github.com/helm\"><img src=\"https://github.com/helm.png\" alt=\"Helm\" />Helm</a> comme gestionnaire de packages et <a class=\"gh-badge\" href=\"https://github.com/cloudflare\"><img src=\"https://github.com/cloudflare.png\" alt=\"Cloudflare\" />Cloudflare</a> comme émetteur de certificats. Nous avons utilisé les astuces et conseils de Vegard S. Hagen tirés de [son article](https://blog.stonegarden.dev/articles/2024/02/bootstrapping-k3s-with-cilium/). En gros, ce blog explique comment tous les sites trueberryless.org sont déployés (ce n'est plus le cas).", 211 211 - "Working with [Docker](https://github.com/docker) Containers can be hard. However.1CC6942704DAE062A463": "Travailler avec les conteneurs [Docker](https://github.com/docker) peut être difficile. Cependant, il existe des outils qui facilitent la gestion des conteneurs, comme [Kubernetes](https://github.com/kubernetes). En fait, Kubernetes est le seul outil, à ma connaissance, qui agit comme un logiciel de gestion pour les conteneurs Docker. Kubernetes est bien intégré dans presque tous les fournisseurs de cloud, comme Google Cloud, Azure et AWS. Par conséquent, il utilise une syntaxe standardisée en `yaml`, ce qui est idéal pour les petits développeurs, car ils peuvent basculer entre « Les Trois Grands » avec peu d'effort.", 212 212 - "tl;dr": "résumé", 213 213 - "Install everything and then apply cert-manager. ez": "Installez tout, puis appliquez cert-manager. Facile.", 214 214 - "Install k3s": "Installer k3s", 215 215 - "As Hagen explains in [his article](https://blog.stonegarden.dev/articles/2024/02.D5EDD5BC9C49780444EF": "Comme Hagen l'explique dans [son article](https://blog.stonegarden.dev/articles/2024/02/bootstrapping-k3s-with-cilium/), nous voulons installer `k3s` sans configurations et avec tout désactivé. Il décrit en détail quels composants ne sont pas installés.", 216 216 - "After the installation, there should be some pods running (3). Don't be shocked .56BB9C3C1CCEDAFADEDB": "Après l'installation, quelques pods devraient être en cours d'exécution (3). Ne soyez pas choqués si les pods sont dans l'état `ContainerCreating` ou `Pending`. Cela est dû au fait que les pods ne peuvent pas communiquer entre eux parce que nous avons désactivé le CNI (`--flannel-backend=none`). Nous installerons plus tard [Cilium](https://github.com/cilium), qui remplacera le CNI Flannel.", 217 217 - "Install Helm": "Installer Helm", 218 218 - "Helm is the package manager for [Kubernetes](https://github.com/kubernetes), so .B3313537E64D4FFE6667": "Helm est le gestionnaire de packages pour [Kubernetes](https://github.com/kubernetes), vous pouvez soit l'installer directement (suivez la [documentation Helm](https://helm.sh/docs/intro/install/)), soit utiliser les composants d'Helm inclus avec Cilium. Nous avons choisi d'installer Helm directement, ce qui est facilement faisable avec cette commande :", 219 219 - "Install Cilium": "Installer Cilium", 220 220 - "[Cilium](https://github.com/cilium) is a networking and security software for Ku.F7DC9A96105A082EC9DB": "[Cilium](https://github.com/cilium) est un logiciel de mise en réseau et de sécurité pour Kubernetes. Cilium est très rapide, évolutif et sécurisé car il repose sur eBPF - une technologie révolutionnaire qui peut exécuter des programmes isolés dans le noyau Linux sans recompiler le noyau ou charger des modules noyau.", 221 221 - "We could install Cilium with Helm like shown here:": "Nous pourrions installer Cilium avec Helm comme indiqué ici :", 222 222 - "However, we wanted to install with their CLI and this is how you can do it. Firs.551EA48947BA4759E483": "Cependant, nous avons voulu l'installer avec leur CLI, et voici comment vous pouvez le faire. Tout d'abord, installez la CLI de Cilium en exécutant ce script :", 223 223 - "Then you can install Cilium with your Server IP-Address:": "Ensuite, vous pouvez installer Cilium avec l'adresse IP de votre serveur :", 224 224 - "Now we wait until Cilium says, everything is `OK` or `disabled`:": "Nous attendons maintenant que Cilium indique que tout est `OK` ou `disabled` :", 225 225 - "After a while, all pods should be `Running`.": "Au bout d'un moment, tous les pods devraient être en état `Running`.", 226 226 - "Last but not least, you can apply some resources for Cilium:": "Enfin, vous pouvez appliquer certaines ressources pour Cilium :", 227 227 - "Additionally you should upgrade the cilium config. In order to do that with the .B2C737654644F532072A": "De plus, vous devriez mettre à jour la configuration de Cilium. Pour cela, créez d'abord ce fichier dans le répertoire racine où vous souhaitez gérer le cluster k3s. Plus tard, vous pourrez également appliquer des propriétés liées à Hubble et Prometheus si vous souhaitez utiliser [Grafana](https://github.com/Grafana) ou un outil similaire (ouvrez les lignes repliées si vous souhaitez utiliser notre configuration également).", 228 228 - "Run this command to upgrade:": "Exécutez cette commande pour mettre à jour :", 229 229 - "Setup Certificate Manager with Cloudflare": "Configurer le gestionnaire de certificats avec Cloudflare", 230 230 - "In order to be able to create certificates for each subdomain, it is important t.412EB3BCACB9EA434592": "Pour pouvoir créer des certificats pour chaque sous-domaine, il est important d'appliquer un émetteur de certificats qui gère les demandes de certificats et les résout auprès d'un fournisseur. Nous avons choisi [Cloudflare](https://github.com/cloudflare) comme notre émetteur, et voici la configuration que vous devez appliquer à votre cluster Kubernetes. Pour plus d'informations, vous pouvez consulter la [documentation de cert-manager](https://cert-manager.io/docs/configuration/acme/dns01/cloudflare/).", 231 231 - "But first, we need to install the cert-manager by running the following command:.2C3AE967A1D1E33B0CFD": "Mais d'abord, nous devons installer le cert-manager en exécutant la commande suivante :", 232 232 - "You can apply a file to the [Kubernetes](https://github.com/kubernetes) cluster,.7C198D3247CB04A61DD9": "Vous pouvez appliquer un fichier au cluster [Kubernetes](https://github.com/kubernetes) en exécutant cette commande k8s (également k3s) :", 233 233 - "If you want to delete the resource in the Kubernetes cluster, the command is pre.13785BDE8535FD743BB9": "Si vous souhaitez supprimer la ressource dans le cluster Kubernetes, la commande est assez simple :", 234 234 - "As you may have spotted above, we also need a secret for the API token which aut.EED50E553247233483D4": "Comme vous l'avez peut-être remarqué ci-dessus, nous avons également besoin d'un secret pour le jeton API qui authentifie que ce générateur est autorisé à demander des certificats. Par conséquent, nous créons un secret avec un `API Token` non chiffré de Cloudflare.", 235 235 - "Nowadays we create a token by going to your [Cloudflare](https://github.com/clou.29311654A42391586C43": "De nos jours, nous créons un jeton en accédant à votre tableau de bord [Cloudflare](https://github.com/cloudflare), puis en cliquant sur votre profil et en sélectionnant l'onglet `API Tokens`. Ici, vous pouvez générer un jeton spécifique pour votre générateur ou utiliser la clé API globale (non recommandée). La solution recommandée est de créer un jeton API avec deux permissions (jeton personnalisé) :", 236 236 - "Zone - DNS - Edit": "Zone - DNS - Modifier", 237 237 - "Zone - Zone - Read": "Zone - Zone - Lecture", 238 238 - "": "Jeton API Cloudflare", 239 239 - "A more detailed description about the tokens, can be found in the [Cloudflare do.1F2C806B3988F77EF2CC": "Une description plus détaillée des jetons peut être trouvée dans les [docs Cloudflare](https://developers.cloudflare.com/fundamentals/api/get-started/create-token/).", 240 240 - "After applying this secret to Kubernetes, the issuer should be ready to resolve .6908E4EC999AC0DCA147": "Après avoir appliqué ce secret à Kubernetes, le générateur devrait être prêt à résoudre quelques vilains problèmes !", 241 241 - "You can now use this issuer by applying this file which will hopefully create a .7987E8195B3DBB4AB6A9": "Vous pouvez maintenant utiliser ce générateur en appliquant ce fichier qui, espérons-le, créera un certificat :", 242 242 - "It usually takes around 90 seconds to authenticate the request once applied. You.523D684039CD86DF5B8E": "Cela prend généralement environ 90 secondes pour authentifier la demande une fois appliquée. Vous pouvez vérifier l'état actuel de la demande en exécutant cette commande kubernetes. Si cela prend plus de 2 minutes, peut-être que quelques astuces dans [#Dépannage](#no-cloudflare-certificate-approval) peuvent vous aider.", 243 243 - "The `-n` option stands for namespace.": "L'option `-n` signifie namespace.", 244 244 - "## Example app [`mutanuq`](https://mutanuq.trueberryless.org)": "Exemple d'application [`mutanuq`](https://mutanuq.trueberryless.org)", 245 245 - "Then you can use this certificate in your Ingress controller:": "Ensuite, vous pouvez utiliser ce certificat dans votre contrôleur Ingress :", 246 246 - "Setup Keel": "Configurer Keel", 247 247 - "We always wanted a clean Continuous Integration (CI) and Continuous Delivery (CD.5A7C877EE9C3CC7E2E7A": "Nous avons toujours voulu une solution propre d'Intégration Continue (CI) et de Livraison Continue (CD) pour nos sites web. Cela signifie qu'un message de commit spécifique devrait déclencher un processus automatisé via [GitHub](https://github.com/github), Docker Hub et notre serveur, qui, à la fin, met à jour le site web correspondant en environ deux minutes.", 248 248 - "Keel is a robust software tool which enables this feature for Kubernetes. We use.782AFBD621B2DB555C2D": "Keel est un outil logiciel robuste qui permet cette fonctionnalité pour Kubernetes. Nous avons utilisé Keel pour tirer de nouvelles images Docker de Docker Hub en interrogeant toutes les quelques minutes. De plus, Keel fournit un magnifique tableau de bord où vous pouvez contrôler l'interrogation également.", 249 249 - "In order to set up Keel with the admin dashboard, we created those files:": "Pour configurer Keel avec le tableau de bord d'administration, nous avons créé ces fichiers :", 250 250 - "`secret-dashboard.yaml` for the Admin Username and Password (not everyone should.BC266314D27DCB36F4CB": "`secret-dashboard.yaml` pour le nom d'utilisateur et le mot de passe administrateur (tout le monde ne devrait pas pouvoir accéder au tableau de bord)", 251 251 - "`keel.yaml` for the actual k3s configs (copied and adapted from [KeelHQ](https:/.F8A38C5FC9A4505AF62C": "`keel.yaml` pour les configurations réelles de k3s (copié et adapté de [KeelHQ](https://github.com/keel-hq/keel/blob/9f0a7160bbdc3a107ad148933a4269f30e4e479c/deployment/deployment-template.yaml))", 252 252 - "After applying both files and managing the additional certificate for `keel.true.30388E288EFFF1AD00F9": "Après avoir appliqué les deux fichiers et géré le certificat supplémentaire pour `keel.trueberryless.org`, le tableau de bord Keel fonctionne parfaitement. De plus, chaque `Deployment` Kubernetes peut opter pour un sondage Docker Hub automatisé en ajoutant quelques annotations :", 253 253 - "Celebrate with a Coffee!": "Célébrez avec un café !", 254 254 - "Congratulations, you've successfully set up [Kubernetes](https://github.com/kube.C26D3423275F0054D782": "Félicitations, vous avez réussi à configurer [Kubernetes](https://github.com/kubernetes) avec [Cilium](https://github.com/cilium) et [Cloudflare](https://github.com/cloudflare) ! Vous méritez une pause café. Profitez d'une tasse bien méritée, et si vous souhaitez partager un café virtuel avec moi, n'hésitez pas à soutenir mon travail sur [Ko-fi](https://ko-fi.com/trueberryless). Merci !", 255 255 - "Troubleshooting": "Dépannage", 256 256 - "Cilium-ingress has no External-IP": "Cilium-ingress n'a pas d'External-IP", 257 257 - "Make sure that the `ip-pool` includes the address specified by the annotations i.4E44377E5C9AC3845ED3": "Assurez-vous que le `ip-pool` inclut l'adresse spécifiée par les annotations dans le fichier `config.yaml`.", 258 258 - "Also in some cases, other ingress controllers get the annotated address before t.16FB14B27C64B47E0869": "Dans certains cas, d'autres contrôleurs d'entrée obtiennent l'adresse annotée avant que le contrôleur d'entrée de Cilium puisse y accéder, donc elle resterait en attente...", 259 259 - "If you don't deploy locally but on one of `The Big Three`, please check out some.4CF2A8E1AE1127E8E9D5": "Si vous ne déployez pas localement mais sur l'une des `Big Three`, veuillez consulter d'autres documentations sur les raisons pour lesquelles l'IP externe reste en attente. Il est principalement de leur responsabilité de vous fournir une adresse.", 260 260 - "No Cloudflare Certificate Approval": "Pas d'approbation de certificat Cloudflare", 261 261 - "There can be some problem when the certificate won't get approved by Cloudflare..21242D4E500A87FE26A2": "Il peut y avoir un problème lorsque le certificat ne reçoit pas l'approbation de Cloudflare.", 262 262 - "Wrong API token": "Jeton API incorrect", 263 263 - "First make sure that the Cloudflare API token is correct. To make 100 percent su.BE3E293E05F70A765669": "Tout d'abord, assurez-vous que le jeton API Cloudflare est correct. Pour être sûr à 100 %, créez-en un nouveau et insérez-le (non encodé en base64) dans ce fichier :", 264 264 - "Max auth failures reached": "Maximum d'échecs d'authentification atteint", 265 265 - "We once ran into the error `Error: 9109: Max auth failures reached, please check.661EAA2B42757CBB4C1D": "Nous avons rencontré une fois l'erreur `Error: 9109: Max auth failures reached, please check your Authorization header.`. Il suffit d'attendre quelques heures, de supprimer la ressource et de l'appliquer à nouveau :", 266 266 - "Hopefully, you're now good to go!": "Espérons que tout fonctionne maintenant !", 267 267 - "Setting up Continuous deployment in a GitHub repository": "Configurer le déploiement continu dans un dépôt GitHub", 268 268 - "Today we'll take a look at how to set up a GitHub repository which will be deplo.210AF277FD26683FD09E": "Aujourd'hui, nous allons voir comment configurer un dépôt GitHub qui sera déployé sur un cluster k3s via Argo CD.", 269 269 - "Today we'll take a look at how to set up a <a class=\"gh-badge\" href=\"https://git.A040D5A396CEA3FE8E47": "Aujourd'hui, nous allons voir comment configurer un <a class=\"gh-badge\" href=\"https://github.com/github\"><img src=\"https://github.com/github.png\" alt=\"github\" />GitHub</a> dépôt qui sera déployé sur un cluster k3s via Argo CD. En résumé, l'article inclura les fichiers Workflow, le Dockerfile, les manifestes (déploiement) et les dépôts <a class=\"gh-badge\" href=\"https://github.com/docker\"><img src=\"https://github.com/docker.png\" alt=\"Docker Hub\" />Docker Hub</a>. Veuillez consulter [notre blog Argo CD](./setup-argocd-for-kubernetes) car cet article sera une continuation d'un autre post.", 270 270 - "In today's post, we'll take a quick look at how to set up continuous deployment .837E00D0E73247CB97BC": "Dans le post d'aujourd'hui, nous allons examiner brièvement comment configurer un déploiement continu dans un dépôt [GitHub](https://github.com/github). Nous sommes assez sûrs que cette configuration fonctionne également pour d'autres registres Git, mais si vous en utilisez un autre, gardez à l'esprit que cet article est conçu uniquement pour GitHub.", 271 271 - "This post also assumes that you use [GitHub](https://github.com/github) Actions .5387D30E9AFCFCF33E71": "Ce post suppose également que vous utilisez [GitHub](https://github.com/github) Actions combiné avec Argo CD pour déployer vos applications sur un cluster Kubernetes. Suivez nos autres [articles sur le déploiement](/blog/tags/deployment) pour des instructions supplémentaires sur la façon de configurer ces deux technologies sur votre serveur personnel.", 272 272 - "Preparations": "Préparatifs", 273 273 - "We recommend creating a [Docker Hub](https://hub.docker.com/) account or choose .D653C06B296243188634": "Nous recommandons de créer un compte [Docker Hub](https://hub.docker.com/) ou de choisir un autre registre Docker si vous le souhaitez.", 274 274 - "Your GitHub repository must fulfil these conditions:": "Votre dépôt GitHub doit remplir ces conditions :", 275 275 - "Has a Dockerfile (ideally in the root folder)": "A un Dockerfile (idéalement dans le dossier racine)", 276 276 - "Has two GitHub Secrets ([create GitHub Secret](https://docs.github.com/en/action.5E18F567EA5B8452C4B3": "A deux Secrets GitHub ([créer un Secret GitHub](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions#creating-secrets-for-a-repository)) :", 277 277 - "DOCKER_USERNAME: Your docker username": "DOCKER\\_USERNAME : Votre nom d'utilisateur Docker", 278 278 - "DOCKER\\_PASSWORD: Your docker password (or [access token](https://docs.docker.co.09AD66E199369AC9AC74": "DOCKER\\_PASSWORD : Votre mot de passe Docker (ou [jeton d'accès](https://docs.docker.com/security/for-developers/access-tokens/))", 279 279 - "Create workflow file(s)": "Créer un ou plusieurs fichiers de workflow", 280 280 - "GitHub Actions are special jobs in GitHub which mostly run on Linux servers and .E52CA8DEA2F2414C53E4": "Les GitHub Actions sont des tâches spécifiques sur GitHub qui fonctionnent principalement sur des serveurs Linux et peuvent être contrôlées en créant des fichiers `yaml` dans le répertoire `.github/workflows`. Ces fichiers particuliers permettent de définir les événements déclencheurs des tâches et offrent beaucoup de flexibilité. En tant qu'utilisateur régulier des GitHub Actions, je peux vous dire qu'il faut souvent réécrire vos fichiers `yaml` car les petits détails sont facilement négligés. Mais sans plus attendre, passons directement à la création d'un fichier `deployment.yaml` adapté, qui effectuera les tâches suivantes pour nous :", 281 281 - "Push a new docker image to Docker Hub (with the newest version).": "Pousser une nouvelle image Docker sur Docker Hub (avec la dernière version).", 282 282 - "Update the `manifest/deployment.yaml` file, so Argo CD gets notified about the n.745ACECEA48EBB0BD214": "Mettre à jour le fichier `manifest/deployment.yaml` pour qu'Argo CD soit informé de la nouvelle image taguée.", 283 283 - "(optional) Create a new release on GitHub, so the times of releases are document.5A45740CFC388A713228": "(optionnel) Créer une nouvelle release sur GitHub, afin que les temps de publication soient documentés où ils doivent l'être.", 284 284 - "Here you have an obsolete `docker-hub.yaml` which we used to use because it has .ACD068BBAB645A580B40": "Voici un fichier `docker-hub.yaml` obsolète que nous utilisions auparavant car il proposait de bonnes stratégies de versioning :", 285 285 - "After copying the contents of our `deployment.yaml` file and creating the new fi.BA0B84DE711F10368BA7": "Après avoir copié le contenu de notre fichier `deployment.yaml` et créé le nouveau fichier dans le dossier `.github/workflows`, vous devez effectuer quelques adaptations très **importantes** :", 286 286 - "Change the `IMAGE_NAME` to your personal Docker Hub repository. The image name c.70E854B465ED70C76952": "Modifiez le `IMAGE_NAME` pour qu'il corresponde à votre dépôt personnel sur Docker Hub. Le nom de l'image se compose de votre nom de compte et du nom du dépôt. Si vous n'êtes pas sûr de ce qu'est le nom de votre image, vous pouvez regarder l'URL du dépôt Docker Hub, il devrait y figurer quelque part.", 287 287 - "Now you should be good to go to add the keyword `deploy` into any commit message.BBFBDF3655BEA5A69ED1": "Maintenant, vous êtes prêt à ajouter le mot-clé `deploy` dans n'importe quel message de commit sur la branche principale de votre dépôt, et cela devrait automatiquement pousser une image Docker sur Docker Hub et mettre à jour le manifeste pour Argo CD.", 288 288 - "Congratulations, you've successfully set up Argo CD with k3s and [Cilium](https:.F5382A81A78FA5565691": "Félicitations, vous avez configuré Argo CD avec k3s et [Cilium](https://github.com/cilium) avec succès ! Vous méritez une pause café. Savourez une tasse bien méritée, et si vous souhaitez partager un café virtuel avec moi, n'hésitez pas à soutenir mon travail sur [Ko-fi](https://ko-fi.com/trueberryless). Merci !", 289 289 - "Setting up Argo CD in a k3s cluster": "Configuration d'Argo CD dans un cluster k3s", 290 290 - "Today we'll take a look at how to set up Argo CD in a k3s cluster.": "Aujourd'hui, nous allons examiner comment configurer Argo CD dans un cluster k3s.", 291 291 - "Continuing to improve our k3s cluster and especially the CI/CD workflow, we now .A2E0EE988FAFFFAD6A42": "Pour continuer à améliorer notre cluster k3s et surtout le flux de travail CI/CD, nous allons maintenant nous pencher sur l'outil GitOps appelé <a class=\"gh-badge\" href=\"https://github.com/argoproj\"><img src=\"https://github.com/argoproj.png\" alt=\"Argo CD\" />Argo CD</a>, et comment nous pouvons l'intégrer à notre cluster. Notre pile technologique pour le déploiement utilise ces services&#58; k3s, Helm, Cilium et après ce tutoriel, Argo CD également.", 292 292 - "Having read Vegard S. Hagen's article “[Argo CD Kustomize with Helm](https://blo.A0B58D0615DC386245A0": "Après avoir lu l'article de Vegard S. Hagen “[Argo CD Kustomize with Helm](https://blog.stonegarden.dev/articles/2023/09/argocd-kustomize-with-helm/)” et décidé que leur solution n'était pas adaptée à notre cluster, nous sommes directement passés au guide “[Getting started](https://argo-cd.readthedocs.io/en/stable/getting_started/)” par défaut d'Argo CD. Et maintenant, nous allons vous faire traverser les étapes de configuration d'[Argo CD](https://github.com/argoproj) sur [k3s](https://github.com/k3s-io) et [Cilium](https://github.com/cilium), en poursuivant à partir du chapitre “[Setup Certificate Manager with Cloudflare](/blog/setup-kubernetes-with-cilium-and-cloudflare#setup-certificate-manager-with-cloudflare)” de notre article précédent “[Setting up Kubernetes with Cilium and Cloudflare](/blog/setup-kubernetes-with-cilium-and-cloudflare)”. Dans ce même article récent, nous avons également configuré [Keel](https://github.com/keel-hq) à la fin, mais cette étape sera désormais inutile car nous utiliserons Argo CD pour obtenir le code le plus récent et le plus avancé à partir de chaque dépôt [GitHub](https://github.com/github). Bonne lecture !", 293 293 - "We assume that you followed [our other blog post](/blog/setup-kubernetes-with-ci.35443F83A3EBC402F568": "Nous supposons que vous avez suivi [notre autre article de blog](/blog/setup-kubernetes-with-cilium-and-cloudflare).", 294 294 - "Requirements": "Pré-requis", 295 295 - "Before we can start, we need to make sure we have `kubectl` installed, a kubecon.AF18D970264C891E62E6": "Avant de commencer, nous devons nous assurer que nous avons installé `kubectl`, un fichier kubeconfig (k3s enregistre ce fichier ici :", 296 296 - ") and CoreDNS (check if you have CoreDNS by running this": ") et CoreDNS (vérifiez si vous avez CoreDNS en exécutant cette commande :", 297 297 - "command).": "commande).", 298 298 - "Installation": "Installation", 299 299 - "First, let's apply all the necessary services, deployments and many other differ.3968A495D46DF328E51D": "Tout d'abord, appliquons tous les services nécessaires, les déploiements et de nombreuses autres ressources Kubernetes différentes en exécutant :", 300 300 - "Certificate": "Certificat", 301 301 - "Additionally, we'll need a certificate:": "De plus, nous aurons besoin d'un certificat :", 302 302 - "Apply this resource by running `kubectl apply -f certificate.yaml`.": "Appliquez cette ressource en exécutant `kubectl apply -f certificate.yaml`.", 303 303 - "Ingress Controller": "Contrôleur d'Ingress", 304 304 - "And we'll need a ingress controller which is managed by Cilium:": "Nous aurons également besoin d'un contrôleur d'Ingress géré par Cilium :", 305 305 - "Apply this resource by running `kubectl apply -f argocd-ingress.yaml`.": "Appliquez cette ressource en exécutant `kubectl apply -f argocd-ingress.yaml`.", 306 306 - "Deactivate TSL within Argo CD": "Désactiver TLS dans Argo CD", 307 307 - "With the certificate the connection between the client and server is secured. Ho.198C7766F41D2E4927DA": "Avec le certificat, la connexion entre le client et le serveur est sécurisée. Cependant, il existe toujours un certificat auto-signé au sein des services [Argo CD](https://github.com/argoproj), dont nous n'avons pas strictement besoin. Nous pouvons donc désactiver la sécurité du serveur Argo CD en modifiant la propriété `server.insecure`.", 308 308 - "In order to do that, we first run this command:": "Pour ce faire, exécutez d'abord cette commande :", 309 309 - "which will hopefully open a file in vim or neovim (otherwise would be cringe if .8B321BBC80D980EFA538": "ce qui ouvrira, espérons-le, un fichier dans vim ou neovim (sinon ce serait une honte si vous nous demandez, MDR). Le fichier devrait ressembler à ceci :", 310 310 - "The last two lines will probably be not there at first, but this is exactly the .00E15DF17F5D9A9B4B22": "Les deux dernières lignes ne seront probablement pas là au départ, mais c'est exactement le paramètre que nous voulons atteindre. Allez-y et ajoutez ces deux lignes (marquées ci-dessus) et enregistrez le fichier (`Esc` → `:wq` si vous êtes cool).", 311 311 - "Restart the Argo CD Server by running and waiting till the rollout is completed:.CDC77B3806BBA44885A8": "Redémarrez le serveur Argo CD en exécutant cette commande et en attendant que le déploiement soit terminé :", 312 312 - "After all those steps, we should now see the UI under [`https://argo-cd.trueberr.89BC34AD1ECDBC06B87E": "Après toutes ces étapes, nous devrions maintenant voir l'interface utilisateur sur [`https://argo-cd.trueberryless.org`](https://argo-cd.trueberryless.org) (protégé par mot de passe).", 313 313 - "": "Tableau de bord de l'interface utilisateur d'Argo CD", 314 314 - "The credentials of Argo CD UI consist of a user and a password. The user is alwa.BE74F043F4C1B4E5AB9E": "Les identifiants de connexion à l'interface utilisateur d'Argo CD se composent d'un utilisateur et d'un mot de passe. L'utilisateur est toujours `admin` et vous pouvez obtenir votre mot de passe en exécutant :", 315 315 - "Add manifest to repository": "Ajouter le manifest au dépôt", 316 316 - "Now in order to create a new application in [Argo CD](https://github.com/argopro.B153A0B7CA8710DB4FF2": "Pour créer une nouvelle application dans [Argo CD](https://github.com/argoproj) (via l'interface utilisateur ou l'interface CLI — nous utilisons l'interface utilisateur car nous n'avons pas configuré l'interface CLI), nous devons préparer le dépôt Git. Comme le dépôt est la seule source de vérité, c'est aussi l'endroit où nous définissons toutes les ressources Kubernetes qui devraient être créées par Argo CD.", 317 317 - "We recommend creating a new folder in the git repository called something like `.505C369206406EFB86A4": "Nous recommandons de créer un nouveau dossier dans le dépôt Git appelé quelque chose comme `manifest`. Dans ce dossier, nous allons créer quelques fichiers :", 318 318 - "`certificate.yaml`:": "`certificate.yaml` :", 319 319 - "`deployment.yaml`:": "`deployment.yaml` :", 320 320 - "`service.yaml`:": "`service.yaml` :", 321 321 - "`ingress.yaml`:": "`ingress.yaml` :", 322 322 - "These files are basically the exact same files mentioned in the [other post](/bl.A6639A930D5E316FA4EB": "Ces fichiers sont essentiellement les mêmes que ceux mentionnés dans [l'autre article](/blog/setup-kubernetes-with-cilium-and-cloudflare#example-app-mutanuq) mais séparés en quatre fichiers, car cela nous donne l'avantage de manipuler le manifest depuis [GitHub](https://github.com/github) Actions. Mais chaque chose en son temps, vous verrez comment configurer le manifest avec GitHub Actions dans le [prochain article](/blog/setup-continuous-integration-github-repository).", 323 323 - "Create new application in Argo CD UI": "Créer une nouvelle application dans l'interface utilisateur d'Argo CD", 324 324 - "You'll probably see the big `NEW APP` button in the UI of [Argo CD](https://gith.8C955D38A27D41B77691": "Vous verrez probablement le grand bouton `NEW APP` dans l'interface utilisateur d'[Argo CD](https://github.com/argoproj). Cliquez dessus et créez une nouvelle application avec les propriétés adaptées ci-dessous :", 325 325 - "Application Name: `mutanuq`": "Nom de l'application : `mutanuq`", 326 326 - "Project Name: `default`": "Nom du projet : `défaut`", 327 327 - "Sync Policy: Find out more in [this post](/blog/setup-continuous-integration-git.049A9447DEA81CE1B5DD": "Politique de synchronisation : En savoir plus dans [cet article](/blog/setup-continuous-integration-github-repository) / laissez `Manuel` pour l'instant", 328 328 - "Repository URL: `https://github.com/trueberryless-org/mutanuq`": "URL du dépôt : `https://github.com/trueberryless-org/mutanuq`", 329 329 - "Revision: `HEAD`": "Révision : `HEAD`", 330 330 - "Path: `manifest`": "Chemin : `manifest`", 331 331 - "Cluster URL: `https://kubernetes.default.svc`": "URL du cluster : `https://kubernetes.default.svc`", 332 332 - "Namespace: `mutanuq`": "Namespace : `mutanuq`", 333 333 - "Optionally — if you have [the CLI installed](https://argo-cd.readthedocs.io/en/s.4F9EF0A15884AE51DE02": "Optionnellement — si vous avez [le CLI installé](https://argo-cd.readthedocs.io/en/stable/cli_installation/) — vous pouvez exécuter cette commande pour obtenir le même résultat :", 334 334 - "Now you can hopefully see your website being deployed in the UI. This process ca.9A72C473303559E3BDC1": "Vous devriez maintenant voir votre site web en cours de déploiement dans l'interface utilisateur. Ce processus peut prendre un certain temps, car, par exemple, la demande de certificat doit être approuvée. Une application saine devrait ressembler à ceci :", 335 335 - "![Argo CD Example Application UI](../../../assets/argocd/argocd_example_applicat.DFA9617B17D15540EAA3": "Interface utilisateur d'exemple d'Argo CD", 336 336 - "Congratulations, you've successfully set up [Argo CD](https://github.com/argopro.99A2D6F9095CF50BC9D2": "Félicitations, vous avez configuré avec succès [Argo CD](https://github.com/argoproj) sur un cluster [k3s](https://github.com/k3s-io) ! Vous méritez une pause café. Savourez une tasse bien méritée et, si vous souhaitez partager un café virtuel avec moi, n'hésitez pas à soutenir mon travail sur [Ko-fi](https://ko-fi.com/trueberryless). Merci !", 337 337 - "Continuation": "Continuation", 338 338 - "Be continued for our [next blog](/blog/setup-continuous-integration-github-repos.C6E6C542B1FAA026061D": "La suite dans notre [prochain article de blog](/blog/setup-continuous-integration-github-repository), qui décrira comment configurer un dépôt [GitHub](https://github.com/github) pouvant ensuite être déployé via Argo CD.", 339 339 - "How to create a Rehype plugin that turns GitHub links into beautiful badges": "Comment créer un plugin Rehype qui transforme les liens GitHub en badges attrayants", 340 340 - "Learn how to build a simple yet delightful Rehype plugin that automatically tran.1DBFD32D56C53FC8C2C2": "Apprenez à construire un plugin Rehype simple mais captivant qui transforme automatiquement des liens de profil GitHub classiques en liens élégants en forme de badge avec des images de profil—parfait pour ajouter de la personnalité à votre blog ou à vos documents.", 341 341 - "Discover how a tiny Rehype plugin can give your GitHub links a big visual upgrad.95CD8D7DFB0C962AE484": "Découvrez comment un minuscule plugin Rehype peut donner à vos liens GitHub une mise à niveau visuelle majeure. Avec seulement quelques lignes de code, nous transformerons des liens de profil classiques en badges élégants avec avatars, inspirés par le site d'Antfu et propulsés par Astro + Starlight.", 342 342 - "Recently, I added a very little neat feature to this blog, which you might have .31ECBA06CD87D5CFEC39": "Récemment, j'ai ajouté une petite fonctionnalité sympa à ce blog, que vous avez peut-être remarquée en tant que lecteur régulier. Ce n'est rien de gigantesque, mais cela donne à chaque blog cette petite touche charmante que j'ai recherchée pendant longtemps. Je parle (ou plutôt j'écris) de tous ces badges verts avec des photos de profil que vous pouvez également voir dans ce blog.", 343 343 - "The inspiration to create them was taken from none other than [Antfu](https://gi.F44018DA56F114106E55": "L'inspiration pour les créer vient de nul autre qu'[Antfu](https://github.com/antfu) lui-même, puisqu'il affiche ces badges partout sur son site web (au moment de cette rédaction).", 344 344 - "Initially I thought they would require some long and tedious programming session.255FD9F39C231A32E556": "Au départ, je pensais qu'il faudrait une longue et fastidieuse session de programmation pour atteindre la même beauté visuelle. Cependant, après quelques sessions de Vibe Coding - comme [Andrej Karpathy a inventé le terme](https://x.com/karpathy/status/1886192184808149383) - j'ai rapidement réalisé que ces badges n'étaient qu'à un petit [plugin rehype](https://github.com/rehypejs) d'existence.", 345 345 - "This is the whole code behind the rehype plugin:": "Voici tout le code derrière le plugin rehype :", 346 346 - "Basically all this plugin does, is walking through the HTML, looking for links w.713A33AB7C816E7ADAF6": "En gros, tout ce que fait ce plugin, c'est parcourir le HTML à la recherche de liens qui font référence à un profil GitHub. Si l'un d'eux est trouvé, il ajoute une balise `<img>` avant le contenu texte avec la photo de profil de l'utilisateur ou de l'organisation GitHub. Cela est possible de manière très cohérente grâce à la fonctionnalité de GitHub qui permet d'obtenir la photo comme ressource derrière le lien du profil suivi de `.png`. Lisez-en plus à ce sujet dans [cet article génial sur `dev.to`](https://dev.to/10xlearner/how-to-get-the-profile-picture-of-a-github-account-1d82).", 347 347 - "With a little bit of additional styling it looks really cute in my opinion. Plea.3CF02F394DFC8ECF3E94": "Avec un peu de style supplémentaire, cela a un rendu vraiment mignon à mon avis. Veuillez noter que comme ceci est une page [Starlight](https://starlight.astro.build), j'utilise des variables CSS disponibles, comme dans la ligne quatre :", 348 348 - "Now to put everything together, let's say for example in an Astro site, you just.9BE9659FCADE76D6467F": "Pour tout assembler, disons, par exemple, dans un site Astro, vous devez simplement ajouter le plugin rehype à la configuration comme ceci :", 349 349 - "Read more about the injection of rehype plugins in Astro in [their configuration.D3124728AFCD14A1CEE8": "Lisez-en davantage sur l'injection des plugins rehype dans Astro dans [leur référence de configuration](https://docs.astro.build/en/reference/configuration-reference/#markdownrehypeplugins).", 350 350 - "Do not forget to add the CSS in a similar way depending on your framework - in S.8376354E6C8822949CB6": "N'oubliez pas d'ajouter le CSS de manière similaire, en fonction de votre framework - dans Starlight, vous pouvez configurer des styles CSS globaux personnalisés en suivant [ces instructions](https://docs.astro.build/en/guides/styling/#scoped-styles) - et vous pouvez également admirer vos propres liens en badge. N'hésitez pas à partager cet article avec toute personne que vous souhaitez convaincre d'utiliser ces fonctionnalités.", 351 351 - "✨ Bones point": "✨ Point bonus", 352 352 - "If you want to use such a badge for other links too, I recommend that you craft .E4245F963D0ACC5A33AD": "Si vous souhaitez utiliser un tel badge pour d'autres liens également, je vous recommande de créer un petit composant Astro comme celui-ci :", 353 353 - "Just make sure that the CSS is globally (or [scope](https://docs.astro.build/en/.4FF4BAAF51A54FE15B11": "Assurez-vous simplement que le CSS est global (ou [scopé](https://docs.astro.build/en/guides/styling/#scoped-styles) dans le composant ci-dessus) et il est prêt à être utilisé :", 354 354 - "Earworms and the message hidden within the pattern": "Les chansons obsédantes et le message caché dans le motif", 355 355 - "Some random thoughts about earworms and their message hidden within the pattern..9902F83DCFE33FCF2F42": "Quelques réflexions aléatoires sur les chansons obsédantes et leur message caché dans le motif.", 356 356 - "Yes, this title is a small nod to the excellent Netflix series \"Arcane\", but tha.13B50605E73E31D148F1": "Oui, ce titre est un petit clin d'œil à l'excellente série Netflix \"Arcane\", mais ce n'est pas le sujet de cet article.", 357 357 - "Today, I want to share some thoughts about earworms, a term that originated in G.6A8601A7B3560A913F2E": "Aujourd'hui, je souhaite partager quelques réflexions sur les chansons obsédantes, un terme qui trouve son origine en allemand (« Ohrwurm ») et qui a ensuite été adopté en anglais en tant que traduction littérale. Le sens derrière ce terme plutôt abstrait est la musique accrocheuse—*musique collante*, comme l'appelle Wikipédia. Ce phénomène se produit souvent de manière imprévisible, surtout lorsque nos pensées s'éloignent du moment présent.", 358 358 - "While many of my blog-post ideas strike on train rides, while lying in bed, or w.25AB9868BD26D2664DE1": "Bien que beaucoup de mes idées de blog se manifestent lors de trajets en train, en étant allongé au lit ou simplement en réfléchissant à la vie, l'inspiration pour cet article m'a littéralement frappé sous la douche, comme le prévoient les bonnes vieilles *pensées sous la douche*. La raison – comme vous avez peut-être deviné en lisant le sujet – était une chanson obsédante concernant une mélodie dont j'aurais juré ne pas avoir entendu parler depuis longtemps, disons 4 à 5 semaines.", 359 359 - "And this always seems to be the confusing parts about earworms: Nobody really kn.02E8F977B7963E92DD1D": "Et cela semble toujours être la partie déroutante des chansons obsédantes : personne ne sait vraiment qui décide du moment où elles apparaissent. Est-ce le cerveau qui appuie sur « lecture » lorsqu'il est légèrement engourdi ? Vous savez ce que je veux dire, ces moments où vous ne savez pas vraiment à quoi vous pensez en ce moment et où vous n'avez pas besoin de réfléchir à ce à quoi penser, vous profitez simplement du moment. Il existe une autre expression idiomatique autrichienne pour ce scénario exact : \"ins Narrenkastl schauen\", ce qui signifie quelque chose comme *regarder dans le vide*. Et je pense que c'est précisément ces moments d'absence mentale qui sont à l'origine et la raison pour laquelle ces chansons obsédantes surviennent.", 360 360 - "But this still leaves the question: Who decides what to play in someone's head w.869DDF0A56F11A495705": "Mais cela laisse toujours la question : qui décide de ce qu'il faut jouer dans la tête de quelqu'un lorsque cela se produit ? Qui est le DJ ? Selon mon expérience, j'ai remarqué un schéma récurrent, surtout si vous venez d'écouter de la musique dans la dernière demi-heure. Mon cerveau, au moins, aime répéter des morceaux de la **pénultième chanson** entendue, en d'autres termes la chanson qui a été jouée avant la dernière. Cette théorie fonctionne encore mieux si la dernière chanson a été mise en pause au milieu ou simplement pas exactement à la fin.", 361 361 - "The exact reason for that is completely unknown to me, but if I had to guess, I .A798D76B65D60FBFC400": "La raison exacte de cela m'est complètement inconnue, mais si je devais deviner, je dirais que les rythmes de la chanson terminée (la pénultième) résonnent encore quelque part dans votre esprit, puisque la chanson elle-même était peut-être de ces chansons du type « je-diminue-mon-volume-pour-mettre-fin-à-ma-durée », ce qui n'est pas mon type préféré de fin musicale, mais encourage le cerveau à continuer.", 362 362 - "At least that's what I think. I would be very interested if you have experienced.2A5110405B0386450071": "Du moins, c'est ce que je crois. Je serais très intéressé de savoir si vous avez vécu des schémas similaires, alors n'hésitez pas à écrire votre propre article de blog à ce sujet ou à simplement partager celui-ci avec des amis afin que vous puissiez en discuter avec eux !", 363 363 - "However, one thing that's objectively missing in my opinion is a granular way of.DBB9BD2B7C991AECF1AF": "Cependant, une chose qui manque objectivement à mon avis est une manière granulaire de séparer les sujets larges dans votre documentation. Et je ne suis pas seul avec cette opinion subjectivement acceptée de manière générale. [HiDeoo](https://github.com/HiDeoo) n'est pas seulement l'un des mainteneurs les plus actifs du projet, mais aussi l'auteur des plus nombreux, et selon moi, des meilleurs plugins que vous pouvez trouver pour Starlight. Et ils ont également remarqué cette fonctionnalité de niche manquante concernant les sujets. C’est pourquoi ils ont décidé de créer le plugin [Starlight Sidebar Topics](https://github.com/hideoo/starlight-sidebar-topics) dès le début, en octobre 2024, qui vous permet de créer une barre latérale avec des sujets. Lisez-en davantage sur les fonctionnalités du plugin dans [sa documentation](https://starlight-sidebar-topics.trueberryless.org/).\n", 364 364 - "Afterwards, follow the setup guides from [Starlight Sidebar Topics](https://star.D6EC61B940DA777E2BEB": "Ensuite, suivez les guides d'installation de [Starlight Sidebar Topics](https://starlight-sidebar-topics.trueberryless.org/docs/getting-started/#installation) et de [Starlight Sidebar Topics Dropdown](https://starlight-sidebar-topics-dropdown.trueberryless.org/docs/getting-started/#installation).", 365 365 - "Moreover, you could also create your own display component, which uses the route.7237A9BCDFBA80A2B459": "De plus, vous pourriez également créer votre propre composant d'affichage, qui utilise les données de route du plugin Starlight Sidebar Topics et rend les sujets de manière personnalisée. Cela est un peu plus avancé, mais vous pouvez trouver plus d'informations à ce sujet dans la documentation [\"Custom Topics List\"](https://starlight-sidebar-topics.trueberryless.org/docs/guides/custom-topic-list/).", 366 366 - "Stop Outsourcing Your Soul to AI": "Arrêtez d'externaliser votre âme à l'IA", 367 367 - "Reflections on AI overuse, its cognitive and social downsides, and a proposed mo.A89AED1EE3DE3D0BCC9B": "Réflexions sur la surutilisation de l'IA, ses effets négatifs cognitifs et sociaux, et un modèle proposé pour utiliser l'IA sans éroder la créativité et la communication humaines.", 368 368 - "It has been more than two and a half years since the release of ChatGPT. The 30<.25CE9B6E0E88F7C05662": "Cela fait plus de deux ans et demi depuis la sortie de ChatGPT. Le 30<sup>ème</sup> novembre 2022 a marqué le début d'une nouvelle ère. Le début de l'IA. De nos jours, de nombreuses professions et personnes dans leur vie privée, en particulier dans le secteur des technologies de l'information, l'utilisent quotidiennement. Et nous ne savons même pas où nous en sommes sur le cycle des attentes de Gartner ou si l'IA s'améliorera en suivant la \"Loi des rendements accélérés\" de Kurzweil.", 369 369 - "The trend is still rising, but at the same time I have noticed a slight but stea.4471FBD85DD8F244947F": "La tendance est toujours en hausse, mais en même temps, j'ai remarqué une légère mais constante dégradation des connaissances humaines, car les gens délèguent de plus en plus le travail créatif à l'IA. Par conséquent, j'ai décidé d'écrire un petit article de blog pour partager mes réflexions, en essayant de décourager la surutilisation de l'intelligence artificielle qui pourrait ruiner nos capacités cognitives. Et bien que je sache que très peu de personnes liront ceci, cela ne m'empêche pas d'essayer. Sinon, j'aurais peut-être raté mon occasion d'aider l'avenir de l'humanité.", 370 370 - "**Disclaimer**: This whole blog post is created from my observations of developm.6E39A6FC36B46BF133B0": "**Avertissement** : Ce billet de blog est entièrement basé sur mes observations concernant les évolutions des changements sociaux, avec une attention particulière aux façons d'utiliser l'intelligence artificielle selon mon interprétation, et est donc très subjectif. Je n'ai pas consulté d'études qui pourraient soutenir ou contredire mon opinion.", 371 371 - "How people tend to use AI": "Comment les gens ont tendance à utiliser l'IA", 372 372 - "AI is awesome. I do not want to question this statement. It helped and still hel.1B73784A0B66F1C26560": "L'IA est incroyable. Je ne veux pas remettre en question cette affirmation. Elle m'a aidé et m'aide encore à améliorer mon flux de travail, à acquérir de nouvelles connaissances, à explorer de nouveaux horizons et à découvrir de nouvelles technologies. Pour les personnes qui ne s'intéressent pas au fonctionnement de l'IA, de tels outils intelligents ressemblent à de la magie. En conséquence, j'aime voir leurs yeux briller et leurs bouches s'ouvrir lorsque je leur explique que tout ce sur quoi l'IA est basée, c'est la probabilité. Quel mot est le plus susceptible d'être le suivant, en fonction des propriétés et des émotions dans un espace virtuel hautement dimensionnel. [Mais c'est un autre sujet.](https://www.youtube.com/watch?v=LPZh9BOjkQs)", 373 373 - "What I would like to focus on is how people have come to use AI, especially over.0645ED8C57D4B143BECD": "Ce sur quoi je souhaite me concentrer, c'est sur la façon dont les gens ont fini par utiliser l'IA, en particulier au cours des derniers mois - voire des dernières années. Comme notre cerveau est paresseux par défaut, nous avons tendance à externaliser davantage de travail à l'IA au fur et à mesure que nous nous concentrons moins sur une tâche spécifique. En d'autres termes, si vous ne mettez pas la plupart de votre engagement dans votre projet actuel, vous êtes probablement sur le point de simplement le transmettre à une IA. Une autre raison potentielle de sous-traiter le travail au monde de l'IA est l'ignorance des technologies sous-jacentes, ce qui rend difficile pour vous de trouver vos propres solutions.", 374 374 - "I am by no means a scientist, but I think that watching AI doing your work - bec.9C73DF2EC8CE97A8882E": "Je ne suis en aucun cas un scientifique, mais je pense que regarder une IA faire votre travail - parce que, en raison de votre incompétence, le résultat que vous produisez ne correspond pas à votre vision - vous donne tellement de dopamine que votre cerveau veut le faire plus souvent. De plus, l'être humain, en tant que figure sociale, cherche toujours à être connecté à quelqu'un, et interagir avec l'IA satisfait ces besoins. Ce comportement est typique de notre cerveau et se produit également lorsque nous regardons les réseaux sociaux ou consommons du contenu explicite. Il est profondément enraciné dans notre cortex cérébral, et toute l'industrie du jeu et les secteurs du divertissement en profitent sans scrupules pour optimiser leurs gains.", 375 375 - "I noticed this trend myself, as you can clearly see from [some of my posts where.6F67065684689D74728B": "J'ai moi-même remarqué cette tendance, comme vous pouvez le voir clairement dans [certains de mes articles où j'ai avoué avoir utilisé l'IA](/blog/authors/artificial-intelligence/) pour m'aider à les écrire. Mais je pense que ce n'est pas une honte. Tout créateur de contenu qui utilise l'IA devrait expérimenter de première main les écueils de la création de contenu directement pour le spectateur ou le lecteur, afin de réaliser à quel point il sait peu sur le sujet par la suite. Cela lui permettra d'apprendre de son erreur et d'être conscient de la facilité avec laquelle la paresse peut vous entraîner dans un chemin si méprisable. Seuls les excellents parmi nous se sont toujours efforcés de créer du contenu fait main.", 376 376 - "Negative side effects": "Effets négatifs", 377 377 - "I pointed out the main drawbacks of using AI too extensively that I observed. I .5A4212FD0B6A0413D8EA": "J'ai souligné les principaux inconvénients que j'ai observés dans une utilisation excessive de l'IA. Je vais maintenant vous donner deux raisons secondaires que j'ai remarquées chez moi, pour lesquelles vous ne devriez pas utiliser l'IA pour un travail expressif.", 378 378 - "Communication decline": "Déclin de la communication", 379 379 - "While watching a promotion video from \"The Browser Company™\" (see the last link .72C7B7D43BFCB10D0126": "En regardant une vidéo promotionnelle de \"The Browser Company™\" (voir le dernier lien dans la [section des ressources ci-dessous](#resources-with-better-evidence)), j'ai remarqué que les visions peuvent être très éloignées de nos jours. Je constate cette tendance non seulement dans le navigateur Dia, mais dans de nombreux aspects différents de la technologie et de nos vies. Un côté de la tendance veut intégrer l'IA partout où c'est possible, élargissant notre dépendance à celle-ci. Un exemple est l'utilisation de l'IA pour composer et écrire des messages à nos amis proches et collègues parce que cela nous rend plus efficaces. Je crois que cela nous rend juste stupides à long terme.", 380 380 - "If people do not train their brains for coming up with words for communication, .0E50F4E2AEC63CCFA8CD": "Si les gens ne forment pas leur cerveau à trouver des mots pour communiquer, à construire des phrases utiles et un sens pouvant être compris par d'autres êtres humains, notre fondation même de l'interaction les uns avec les autres est brisée et nous reviendrions au niveau de *Homo habilis* - la dernière espèce qui, probablement, n'a pas utilisé un langage verbal pleinement développé. Voyez, j'ai utilisé l'IA pour m'aider à rechercher ce petit bout d'information, mais j'ai choisi mes mots consciemment pour m'exprimer. De cette façon, non seulement j'ai appris quelque chose de nouveau, mais je peux maintenant également m'en souvenir. Une capacité que vous n'aurez jamais en externalisant l'écriture à l'IA.", 381 381 - "Loneliness": "Solitude", 382 382 - "Being alone on a mental level is in my opinion one of the most underrated modern.DF4685B2DE4270080DF1": "Être seul sur un plan mental est, à mon avis, l'un des dangers modernes les plus sous-estimés de la société. Le côté ironique de cela, c'est que si tout le monde est seul, nous avons tous cela en commun, ce qui fait que nous ne sommes pas seuls avec la solitude de chacun. Mais mes pensées dérivent à nouveau vers d'autres océans.", 383 383 - "AI strongly encourages us to be alone. It ~~acts~~ was intentionally trained to .CBE7FABA8A468DBE0C14": "L'IA nous encourage fortement à être seuls. Elle ~~agit~~ a été intentionnellement entraînée à agir comme un parfait ami, collègue ou quel que soit le terme que vous voulez employer. Récemment, j'ai remarqué que les réponses de ChatGPT incluent explicitement mon nom, ce qui est très étrange à plusieurs niveaux si vous voulez mon avis. On pourrait dire qu'il s'agit d'un doxxing artificiel privé, ce qui, bien sûr, est un oxymore en soi, car le doxxing, par définition, est public. Néanmoins, plus vous utilisez l'IA, plus *souvent* vous voulez utiliser l'IA. En particulier après l'introduction des modes vocaux de l'IA, cette tendance a continué à augmenter comme si le lendemain n'existait pas. Félicitations, ClosedAI, vous venez de réinventer l'addiction.", 384 384 - "In worst case scenarios, this can leads people to fear talking with other people.DE0F55D85004B91A5977": "Dans les pires scénarios, cela peut amener les gens à craindre de parler avec d'autres personnes. À abandonner des amitiés. À se retirer de la société. De telles habitudes sont des problèmes graves et devraient être examinées par un médecin ou un psychologue.", 385 385 - "Proposal of AI usage layer model": "Proposition de modèle de couche d'utilisation de l'IA", 386 386 - "Proposing a global solution for all people of such a problem is impossible. Sinc.10DA331D742128D1E376": "Proposer une solution globale pour tous face à un tel problème est impossible. Puisque chaque individu a ses propres expériences avec l'IA, ses propres pensées et sentiments, qu'il soit optimiste ou pessimiste, je ne peux pas parler pour tout le monde. En fait, je pense que je peux seulement parler pour moi-même, apprendre et partager mes propres façons de gérer et de limiter mon utilisation de l'IA, et espérer que ces expériences puissent également vous aider.", 387 387 - "My ideal experiences with AI - the optimal golden way between the overuse of AI .7279A13F58BE82D3A45D": "Mes expériences idéales avec l'IA - le juste milieu optimal entre la surutilisation de l'IA accompagnée de l'érosion cognitive et le fait de laisser la mode passer à côté de vous sans en tirer aucun avantage - consistent à utiliser l'IA [si et seulement si](https://en.wikipedia.org/wiki/If_and_only_if) vous, et seulement vous, en tirez des avantages. En d'autres termes, contrôlez votre utilisation et limitez-la de manière extrême, où seul vous-même devriez jamais entrer en contact avec le contenu produit par l'IA. Une telle limitation a de nombreuses conséquences, voici quelques exemples pour mieux illustrer et souligner ce que je veux dire :", 388 388 - "Use AI for personal learning sessions: If you initially want to dive into a new,.DE3EFB49A432DEF98DFD": "Utilisez l'IA pour des sessions d'apprentissage personnelles : Si vous souhaitez initialement plonger dans un nouveau sujet complètement inconnu, l'IA peut vous donner des aperçus généraux et vous montrer des connexions avec d'autres parties du savoir et des usages dans le monde réel. Bien que cela ne signifie pas nécessairement que vous apprendrez plus vite ou plus efficacement, cela aide à faire le premier pas et à se lancer.", 389 389 - "Use AI for stupid and repetitive workloads and ask for help if you are certain t.ABC71EA43B6FE421530F": "Utilisez l'IA pour des tâches stupides et répétitives et demandez de l'aide si vous êtes certain que le problème ou la tâche a déjà été résolu des milliers de fois par d'autres. Les modèles linguistiques actuels sont formés sur des données existantes, ce qui signifie qu'ils sont censés être performants pour résoudre des problèmes déjà résolus, non pas pour réinventer la roue, mais pour suggérer d'utiliser l'instrument rond existant.", 390 390 - "Do not use AI to express yourself to other people. Think about what meaning you .68CA5EC714F05E5EC131": "N'utilisez pas l'IA pour vous exprimer auprès des autres. Réfléchissez à ce que vous voulez transmettre, aux connaissances que vous souhaitez partager et exprimez vos pensées avec vos propres mots. Cela vous aide énormément à renforcer vos idées, à mieux vous souvenir de ce que vous avez appris et à vous sentir beaucoup mieux.", 391 391 - "Do not use AI to generate complex and creative work. Nowadays, there are hundred.572F9E5BBC126B708CF7": "N'utilisez pas l'IA pour générer des travaux complexes et créatifs. De nos jours, il existe des centaines - probablement des milliers - d'outils qui vous aident à créer de l'art, de la musique, du code, des designs, des plans, etc., grâce à l'IA ou entièrement avec elle. Bien que cela puisse donner l'impression que vous êtes plus productif, cela vous rend simplement plus ignorant à mesure que vous revenez souvent à ces méthodes, au lieu de faire ce que vous aimez par vous-même. Il est tout à fait acceptable de dire que des petites parties du travail peuvent être externalisées à l'IA, principalement des tâches répétitives qui prennent seulement plus de temps à faire manuellement. Les œuvres créatives et originales, cependant, devraient rester humaines et réalisées avec amour. Si vous n'aimez pas ce que vous faites du tout, cela peut être un signal qu'il serait peut-être temps d'arrêter entièrement cette activité.", 392 392 - "Do not fall for all the shiny AI stuff out there. Tools like [Lovable](https://l.730DE3F722D5456EC235": "Ne vous laissez pas séduire par tout le battage autour des outils d'IA. Des outils comme [Lovable](https://lovable.dev), [GitHub Copilot](https://github.com/features/copilot), [Cursor](https://cursor.com/en), [ChatGPT Voice](https://openai.com/index/chatgpt-can-now-see-hear-and-speak/) et le nouveau venu : [GPT-5](https://academy.openai.com/public/resources/intro-gpt-5), pour n'en citer que quelques-uns, ne cherchent pas vraiment à vous aider. Ils veulent soit vos données directement, soit contrôler votre flux de travail afin que vous ne puissiez plus y échapper une fois habitué à leur utilisation. Malheureusement, les gens s'habituent à l'IA de manière fascinante et rapide.", 393 393 - "In short, what I mean is that AI should be used for brainstorming and helping ea.7E4914372E95A248FB12": "En bref, ce que je veux dire, c'est que l'IA devrait être utilisée pour réfléchir et aider chaque individu à créer un produit final - à ne pas confondre avec l'IA créant le produit final -, mais pas pour communiquer avec d'autres personnes ni pour les résultats finaux eux-mêmes (par exemple, la création d'images, l'écriture de blogs, les publications sur les réseaux sociaux, la communication dans les chats, les discours de motivation, les essais, etc.). À mon avis, le cerveau humain ne peut évoluer et apprendre que par ses propres erreurs et expériences. Et vous ne pouvez jamais apprendre de vos erreurs lorsqu'elles ont en réalité été générées par l'IA.", 394 394 - "AI has a place in ideation, but expressive work should remain human.": "L'IA a sa place dans l'idéation, mais le travail expressif devrait rester humain.", 395 395 - "The Paradigm": "Le Paradigme", 396 396 - "I recently discovered a software design pattern called the \"Onion Architecture\"..1A7DACE78A504AB231FA": "J'ai récemment découvert un modèle de conception de logiciels appelé \"Onion Architecture\" (architecture en couches). Pour faire simple, le principe clé de cette architecture est sa division en couches, où chaque couche n'est connectée qu'à ses deux voisines (les couches parentes et enfants, mais pas les sœurs).", 397 397 - "To transfer this paradigm into the current context, you can imagine the AI as a .5C827B59D0E80CEDD730": "Pour transposer ce paradigme dans le contexte actuel, vous pouvez imaginer l'IA comme un outil mis à votre disposition, qui est déconnecté de toutes les autres parties en étant uniquement entouré par votre cerveau. Seul votre cerveau peut accéder, manipuler, créer et modifier les couches extérieures - dans cet exemple, écrire des blogs, créer du contenu, communiquer avec les gens via des chats ou des discours, ou vous exprimer avec de l'art ou des designs.", 398 398 - "Here you can see an image that represents my idea of a limited, but ideal usage .FC6C0DF5BEEB877D3C9A": "Voici une image qui représente mon idée d'un usage limité mais idéal de l'IA :", 399 399 - " est celle dans laquelle j'ai pris le plus de plaisir à être, car elle est à la fois la plus gratifiante et la plus conviviale. Toutes les communautés n'arrivent pas à atteindre un tel statut parmi les projets OSS.", 422 422 - "Recently, I discovered another evolving project founded by [pelikhan](https://gi.90E9DCA5FB8FA470B7FE": "Récemment, j'ai découvert un autre projet en évolution fondé par [pelikhan](https://github.com/pelikhan), qui vise à traduire automatiquement toute votre documentation, vos blogs ou vos sites marchands chaque fois qu'un changement survient grâce à l'aide de l'IA. Bien qu'un peu sceptique au début, la lecture approfondie du README.md de ce projet m'a captivé.", 423 423 - "The approach of strictly guiding AI into only translating little chunks - mostly.EFA08DBC1CAAB5CE6D3C": "L'approche consistant à guider strictement l'IA pour ne traduire que de petits morceaux - principalement des phrases ou des paragraphes avec des instructions perfectionnistes - m'a fait penser que cela pourrait vraiment fonctionner. J'ai donc essayé cela sur mon propre projet, mon blog. Et à ma grande surprise, ces traductions étaient bien meilleures que ce que j'avais imaginé. Bien sûr, on remarque que cela a été traduit par l'IA - le travail fait main ne sera, espérons-le, jamais entièrement remplacé - mais si vous mentionnez honnêtement que vous utilisez l'IA dans une note en marge, cela rend le contenu bien plus accessible aux gens que l'absence de traduction.", 424 424 - "So I took a closer look at the actual code of the project. After noticing some l.04C2097BA41406300A39": "J'ai donc examiné de plus près le code réel du projet. Après avoir remarqué quelques petites incohérences, des espaces pour des améliorations, et des fonctionnalités manquantes mais très intéressantes ici et là, j'ai commencé à y contribuer également. Après tout, avec un an de contributions dans de plus grands projets, les <span lang=\"en\">PRs</span> n'étaient pas une nouveauté pour moi.", 425 425 - "You have to know that this was a Friday evening - almost night in my timezone - .F07D43687D090B7997ED": "Il faut savoir que c'était un vendredi soir - presque nuit dans mon fuseau horaire - et que [Peli](https://github.com/pelikhan) était également en ligne, enchaînant les commits sur le projet. J'ai rapidement remarqué qu'à l'inverse des autres projets auxquels je participe, Peli ne perdait pas de temps à fusionner les <span lang=\"en\">PRs</span>. Ce fut très gratifiant ce soir-là car je n'ai cessé de contribuer jusqu'à une heure du matin, Peli fusionnant plus vite que je ne pouvais améliorer les fonctionnalités, les documents et les corrections. Un autre aspect qui a été génial est que, puisque c'était un jeune projet, Peli n'a pas hésité à simplement fusionner, tester localement, puis pousser de petites corrections que j'avais manquées.", 426 426 - "Fast-forward three days and I am now an official contributor to the project, mak.3479DA18B6C4E8D9A8EE": "Trois jours plus tard, me voici maintenant contributeur officiel du projet, le rendant chaque jour meilleur, principalement en me concentrant sur la documentation et le support pour mon projet de cœur : Starlight - comme vous l'avez peut-être déjà deviné à partir de [mes blogs](/blog/tags/starlight/).", 427 427 - "Peli and I have our virtual productivity sessions between 4pm and 8pm UTC, exten.51E309B378285EAEEA84": "Peli et moi organisons nos sessions de productivité virtuelles entre 16 h et 20 h UTC, avec des extensions pendant les week-ends. Donc, si vous souhaitez nous rejoindre en tant que pionnier du projet ou si cela a suscité votre intérêt pour l'utiliser, n'hésitez pas à le consulter sur [GitHub](https://github.com/github) : [https://github.com/pelikhan/action-continuous-translation](https://github.com/pelikhan/action-continuous-translation)", 428 428 - "Designing a No-Account, No-Database Approach to Time Tracking": "Concevoir une approche de suivi du temps sans compte et sans base de données", 429 429 - "A private time-tracking app storing all data in your browser — no accounts, no d.F138A1009E69F5985E79": "Une application de suivi du temps privée stockant toutes les données dans votre navigateur — pas de comptes, pas de base de données, juste un suivi simple.", 430 430 - "True Tracker is a minimalist time-tracking app built with Next.js that keeps all.83D3C3B8B44C4975D8DD": "True Tracker est une application minimaliste de suivi du temps construite avec Next.js qui garde toutes les données dans votre navigateur — pas de comptes, pas de base de données, juste une confidentialité et une simplicité totales.", 431 431 - "The summer of 2024 marked the start of an exciting new chapter for me as a devel.4693500D69418D01C04B": "L'été 2024 a marqué le début d'un nouveau chapitre passionnant pour moi en tant que développeur. Jusqu'à ce moment-là, j'avais principalement travaillé avec Angular, un framework que j'appréciais pour son approche structurée et opinée. Mais j'ai toujours été curieux de découvrir React : cela semblait plus léger, plus flexible, et juste… différent. Lorsque je suis tombé sur Next.js, un framework de [Vercel](https://github.com/vercel) basé sur React qui offrait des fonctionnalités comme le rendu côté serveur et un accent mis sur les performances, j'ai su qu'il était temps d'explorer quelque chose de nouveau.", 432 432 - "At the same time, I'd been frustrated for ages with session tracking tools like .03C6C9A3C18CFB3FDCD1": "En même temps, j'étais frustré depuis des années par les outils de suivi de sessions comme Toggl. Bien qu'ils soient théoriquement excellents, leurs meilleures fonctionnalités semblaient toujours enfermées derrière des paywalls premium. Comme tout développeur à un moment donné, je me suis dit, *« Pourquoi ne pas simplement créer le mien ? »* C'est pratiquement un rite de passage — chaque programmeur doit au moins une fois dans sa carrière créer une application de tâches ou un tracker. Et ainsi, True Tracker est né.", 433 433 - "True Tracker wouldn't just be any tracker, though. I wanted to do something diff.A78A97DDBF776E5A3623": "True Tracker n'était pas un tracker comme les autres, cependant. Je voulais faire quelque chose de différent. Pour commencer, je voulais le garder simple : les utilisateurs pouvaient ajouter des projets, les diviser en tâches, et suivre leur temps en sessions. Aucun surplus, aucune fonctionnalité inutile. Mais voici la particularité — True Tracker enregistrerait tout dans le stockage local. Pas de comptes, pas de synchronisation avec le cloud, et surtout, personne (même pas moi) n'aurait accès à vos données. C'est votre tracker, et vos données restent les vôtres.", 434 434 - "Of course, transitioning from Angular to Next.js wasn't without its challenges. .42B63477ABA3012B4AFB": "Bien sûr, passer d'Angular à Next.js n'a pas été sans défis. Si je devais donner un seul conseil à quiconque apprend un nouveau framework, ce serait celui-ci : *Lisez la documentation.* Sérieusement, ne la sautez pas. Je ne l'ai pas fait, et cela a conduit au chaos. Next.js était récemment passé au routeur d'application, mais je m'étais obstinément lancé dans la construction avec le routeur de pages. Il s'avère que cela a causé une montagne de problèmes lorsque l'application ne voulait pas se construire correctement parce qu'il n'y avait pas de répertoire `app`. J'ai dû garder un fichier `.gitkeep` vide dans le dossier pour que Git ne le supprime pas et ne casse rien à nouveau. Pas mon moment de gloire.", 435 435 - "After two weeks of nonstop coding, debugging, and running into what felt like ev.6C07E411C9E65C40E90F": "Après deux semaines de codage intensif, de débogage, et d'affrontement avec ce qui semblait être toutes les erreurs imaginables, True Tracker a enfin fonctionné. Je me souviens de cette première exécution réussie — j'avais l'impression de crier *« C'est vivant ! »* dans ma tête.", 436 436 - "The project also wasn't without its jokes. A friend, after seeing the app's bran.4E6FB3382F951646087C": "Le projet n'était pas non plus sans ses blagues. Un ami, après avoir vu le branding de l'application, a plaisanté : « Donc... le \"true\" dans True Tracker ? C'est un peu exagéré, même pour l'image. C'est *trop de vérité !* » Ils n'avaient pas tort, mais je l'ai assumé. Après tout, si vous allez marquer quelque chose, autant y aller à fond.", 437 437 - "True Tracker became my first-ever Next.js project—a simple but unique app for tr.252C96FD81AA9227820E": "True Tracker est devenu mon tout premier projet Next.js — une application simple mais unique pour suivre le temps sans aucune contrainte. Elle est maintenant en ligne à l'adresse [https://true-tracker.trueberryless.org](https://true-tracker.trueberryless.org/).", 438 438 - "The journey taught me more than just how to use Next.js. It taught me about push.4577627813AA93D48F0F": "Le voyage m'a appris plus que simplement comment utiliser Next.js. Il m'a appris à surmonter les défis, à passer d'un framework à un autre, et à embrasser les particularités qui rendent chaque projet unique. True Tracker n'est pas juste une application ; c'est une étape importante — une petite preuve que même les petites idées peuvent avoir un grand impact.", 439 439 - "Designing a Kafka-Based Pipeline and Interactive Graph for Energy Anomaly Detect.6E40C602D9518B54F990": "Conception d’un pipeline basé sur Kafka et d’un graphique interactif pour la détection des anomalies énergétiques", 440 440 - "A SOA solution with Siemens AG to analyze power grid anomalies, featuring a Kafk.7FC6E382F6C39EFB4296": "Une solution SOA avec Siemens AG pour analyser les anomalies du réseau électrique, comprenant un pipeline Kafka, PostgreSQL, une API GraphQL et un tableau de bord Angular pour la visualisation.", 441 441 - "For our diploma thesis with Siemens AG, we built a service-oriented solution to .E03A3AD551F1B141D274": "Dans le cadre de notre thèse avec Siemens AG, nous avons développé une solution orientée services pour détecter les anomalies du réseau électrique — comprenant un pipeline Kafka, PostgreSQL, une API GraphQL et un tableau de bord Angular avec des tableaux et un graphique interactif pour une visualisation en temps réel.", 442 442 - "During my fifth year at HTL Krems (2023/24), every student was required to compl.33C68E23474119532BF0": "Au cours de ma cinquième année à la HTL Krems (2023/24), chaque étudiant devait réaliser une thèse de diplôme — un projet d’envergure divisé en deux parties principales : théorique et pratique. Travaillant en binôme, nous devions produire un document théorique d’environ 100 pages dans lequel nous présentions, analysions et expliquions notre sujet choisi.", 443 443 - "The theoretical part was organized into three sections. The first involved gathe.383BAC1FDBC3A2145A6D": "La partie théorique était organisée en trois sections. La première consistait à recueillir et résumer les connaissances existantes issues de sources fiables comme des livres et des thèses précédentes. La deuxième se concentrait sur les idées et conclusions tirées de notre prototype — une solution logicielle que nous avons développée pour la partie pratique. Enfin, la troisième section combinait ces deux parties, offrant une comparaison critique et une réflexion sur ce que nous avions appris à travers l’ensemble du projet.", 444 444 - "The practical aspect required us to design and implement a solution, either soft.9F57571ADA22C3F461BC": "L’aspect pratique exigeait de concevoir et de mettre en œuvre une solution, soit logicielle, soit matérielle, pour résoudre un problème réel. Mon coéquipier, Clemens Schlipfinger, et moi avons décidé de nous concentrer exclusivement sur le logiciel pour garantir la fiabilité. Le matériel peut introduire des problèmes imprévisibles, tandis que le logiciel — surtout lorsqu’il est déployé dans des conteneurs Docker robustes — offre un environnement cohérent qui fonctionne sans problème partout.", 445 445 - "What made our project particularly exciting was our partnership with Siemens AG,.E3DFFF62A58AA54FFAF4": "Ce qui rendait notre projet particulièrement excitant, c’était notre partenariat avec Siemens AG, une entreprise multinationale renommée spécialisée dans l’énergie, l’automatisation et la digitalisation. Cette collaboration était rare parmi nos pairs et ajoutait une dimension professionnelle à notre travail. Siemens nous a confié la mission de développer une solution logicielle orientée services pour analyser les anomalies du réseau électrique européen.", 446 446 - "The system we built comprised several components, each designed to handle a spec.66064ADCDD1375BE0F9A": "Le système que nous avons construit comprenait plusieurs composants, chacun conçu pour remplir une fonction spécifique. Au cœur du système se trouvait une application Kafka responsable de l’ingestion des données — des rapports d’anomalies du réseau électrique que nous appelions Findings. Ces rapports détaillaient les défaillances et irrégularités dans le réseau électrique complexe européen, composé de millions de composants interconnectés comme des transistors, des interrupteurs et des générateurs. Kafka transmettait les anomalies les plus récentes à une base de données PostgreSQL, qui était ensuite rendue accessible via une API GraphQL. Cette API offrait des fonctionnalités complètes comme la pagination, le filtrage et le requêtage pour assurer une intégration fluide avec notre frontend basé sur Angular.", 447 447 - "The frontend was designed as a user-friendly dashboard with three key sections:": "Le frontend a été conçu comme un tableau de bord convivial avec trois sections clés :", 448 448 - "Anomalies Table – A searchable, paginated, and filterable table for quick naviga.530B334CB3F183450BCF": "Table des anomalies – Un tableau consultable, paginé et filtrable pour naviguer rapidement parmi les anomalies.", 449 449 - "Graph View – A dynamic visualisation of anomaly data, making it easier to pinpoi.FA55A622C6F84DDFA484": "Vue Graphique – Une visualisation dynamique des données d’anomalies, facilitant l’identification de la source d’un problème dans le réseau vaste et complexe.", 450 450 - "Overall Dashboard – Key metrics and insights for quick, actionable overviews.": "Tableau de bord global – Des indicateurs clés et des aperçus pour une vue d’ensemble rapide et exploitable.", 451 451 - "Clemens and I divided our responsibilities evenly. Clemens handled the backend s.57A227B299EB92B6AC25": "Clemens et moi avons réparti les responsabilités de manière équitable. Clemens s’est occupé des systèmes backend, y compris Kafka, PostgreSQL et l’API GraphQL, garantissant un pipeline de données fiable et efficace. De mon côté, j’ai pris le rôle de chef de projet, coordonnant la communication avec Siemens tout en développant le frontend et en assurant l’intégration fluide des différents composants. Cette collaboration nous a permis de tirer parti de nos points forts et de maintenir une charge de travail équilibrée.", 452 452 - "Our final product not only met Siemens' requirements but also demonstrated the p.3DFD3D918F5BEBCA8D06": "Notre produit final répondait non seulement aux exigences de Siemens, mais démontrait également la puissance d’une architecture orientée services (SOA) bien conçue dans la résolution de problèmes complexes et réels. C’était extrêmement gratifiant de voir notre logiciel fonctionner de manière fiable et fournir des informations exploitables pour remédier aux anomalies du réseau électrique.", 453 453 - "For more details about our work, feel free to explore our thesis [here](https://.404251D1094C50B2114B": "Pour plus de détails sur notre travail, n’hésitez pas à consulter notre thèse [ici](https://trueberryless.org/thesis.pdf) 📜 ou à lire notre cours vidéo [ici](https://videos.trueberryless.org/videos/thesis/) 🎥 (tous deux disponibles uniquement en allemand).", 454 454 - "![Terraform Variables Resolution Example](../../../assets/blog/terraform-variabl.112614E03BD3DF5C3717": "Exemple de Résolution des Variables Terraform", 455 455 - "How I Built a GitHub Profile README That Shouldn't Exist (But It Does)": "Comment j'ai créé un README de profil GitHub qui ne devrait pas exister (mais qui le fait)", 456 456 - "Creating a standout <a class=\"gh-badge\" href=\"https://github.com/github\"><img sr.2311B04CBE33507503C4": "Créer un README de profil <a class=\"gh-badge\" href=\"https://github.com/github\"><img src=\"https://github.com/github.png\" alt=\"github\" />GitHub</a> remarquable ne consiste pas seulement à ajouter quelques badges — il s'agit de repousser les limites techniques. Dans cette plongée approfondie, j'explore la manipulation de SVG au niveau bas, la conversion de HTML en SVG, les animations intégrées, et l'automatisation complète avec les GitHub Actions pour construire ce que je crois être l'un des README GitHub les plus techniquement avancés. D'une grille Bento dynamique qui se met à jour toutes les 5 minutes à l'intégration de SVG en direct sans requêtes externes, ce projet a transformé mon profil en une vitrine vivante et auto-mise à jour de mon travail. Vous voulez savoir comment j'ai fait ? Décortiquons cela. 🚀", 457 457 - "Read the more formal story [here](/blog/github-profile-readme/)": "Lisez l'histoire plus formelle [ici](/blog/github-profile-readme/)", 458 458 - "GitHub's Markdown [strips out a not a huge number of HTML tags, but important on.205FA73346A246681FB2": "Le Markdown de GitHub [supprime un certain nombre d'étiquettes HTML, mais des étiquettes importantes](https://github.github.com/gfm/#disallowed-raw-html-extension). Des raisons de sécurité, bien sûr (et je respecte totalement cela, GitHub, vraiment ❤️), mais cela signifiait que mon design parfait était complètement **inutilisable**.", 459 459 - "I tried tweaking it. Replacing unsupported tags with ones that worked. Maybe I c.9C1A1617434D20136447": "J'ai essayé de l'ajuster. De remplacer les étiquettes non prises en charge par celles qui fonctionnaient. Peut-être que je pouvais en sauver une partie ? *Non*. Les limitations du Markdown signifiaient que ma mise en page idéale était impossible.", 460 460 - "When in doubt, automate. If I couldn't get my HTML in directly, maybe I could ge.1858A8B032C310D0855B": "En cas de doute, automatisez. Si je ne pouvais pas insérer directement mon HTML, peut-être que je pouvais générer quelque chose de dynamique avec un script ? Alors j'ai bricolé un script Python pour récupérer mon dernier dépôt GitHub et l'insérer dans mon README. Je laisse juste ces octets aléatoires que certains appelleraient du code Python ici :", 461 461 - "This seemed like a step in the right direction. It was automated. It was functio.C4E6DC32E9331691DF3A": "Cela semblait être un pas dans la bonne direction. C'était automatisé. C'était fonctionnel. Mais cela ne résolvait pas mon problème principal. 😢", 462 462 - "This wasn't about dynamic content — it was about *design*. And no amount of Pyth.DA93C57EF8343BE1D312": "Il ne s'agissait pas de contenu dynamique — il s'agissait de *design*. Et aucun script Python ne rendrait le Markdown beau.", 463 463 - "![Throw away a good idea](../../../assets/blog/technically-impressive-github-pro.03B551FCEE5B8C4D1AE7": "Jeter une bonne idée", 464 464 - "I realised that if I couldn't directly embed HTML into Markdown, I could fake it.9ED2A1ECED976015FF4F": "Je me suis rendu compte que si je ne pouvais pas intégrer directement du HTML dans le Markdown, je pouvais feindre en utilisant des SVG imbriqués. (au fait, ceci est massivement simplifié ; le processus réel a pris des jours qui semblaient être des semaines, voire des mois, mais je sais que vous ne liriez tout de même rien de tout cela alors peu importe.)", 465 465 - "Encode all images in **Base64** (because GitHub Markdown won't load external ima.E9111278458075460675": "Encoder toutes les images en **Base64** (parce que le Markdown de GitHub ne chargera pas les images externes à l'intérieur d'un SVG contenant du HTML).", 466 466 - "It updates itself every 5 minutes, runs completely on GitHub Actions, and doesn'.83A1BE6CD135F68513B3": "Il se met à jour toutes les 5 minutes, fonctionne entièrement avec GitHub Actions, et ne dépend d'aucun service externe. C'est magnifique. C'est efficace. Et surtout, c'est techniquement absurde dans le meilleur des cas.", 467 467 - "Isn't that bad compared to the [old README.md](https://github.com/trueberryless/.6E17F52CECF11CDBE670": "Ce n'est pas si mal comparé à l'[ancien README.md](https://github.com/trueberryless/trueberryless/blob/5dce4ad0033b00829f8ec3756827057017447a65/README.md). Et ne commentez pas pourquoi j'écoute de la K-pop ! C'est mieux que vous ne le pensez, faites-moi confiance.", 468 468 - "But in the end, I created a [GitHub](https://github.com/github) profile README t.B8AC0FFCEFB516E68262": "Mais au final, j'ai créé un README de profil [GitHub](https://github.com/github) qui *ne devrait pas exister* — mais il existe. Et je l'adore.", 469 469 - "![Default styling of the Starlight sidebar](../../../assets/blog/starlight-sideb.0331D38A07873367F480": "Style par défaut de la barre latérale Starlight", 470 470 - "![Starlight sidebar where the margin between root-level items is smaller](../../.89CA79CF269489CCFFC6": "Barre latérale Starlight où la marge entre les éléments de niveau racine est plus petite", 471 471 - "![Starlight sidebar with lighter font weight](../../../assets/blog/starlight-sid.4E8DAA65B21751F8D390": "Barre latérale Starlight avec un poids de police plus léger", 472 472 - "![Starlight sidebar with dimmer colors](../../../assets/blog/starlight-sidebar-w.BD6139B97F87359FF661": "Barre latérale Starlight avec des couleurs plus ternes", 473 473 - "![Starlight sidebar with smaller font size](../../../assets/blog/starlight-sideb.951F34B3CACD02E0A935": "Barre latérale Starlight avec une taille de police plus petite", 474 474 - "![Final result with desktop view on the left and mobile view on the right](../...FD8F8FAFE2FBDBE76329": "Résultat final avec vue bureau à gauche et vue mobile à droite", 475 475 - "A Stylish Way to Give Credit in Starlight Projects": "Une façon élégante de rendre hommage dans les projets Starlight", 476 476 - "Inspired by the Starlight credit in Astro docs, I made a customizable plugin tha.6909F2E2BE5CAB2C314C": "Inspiré par le crédit Starlight dans la documentation Astro, j'ai créé un plugin personnalisable qui lie vers Starlight, Astro et le Starlight Blog, avec un support multilingue.", 477 477 - "Starlight Cooler Credit is a customizable plugin that gives stylish, multilingua.4FCC5DBB2DC131D33CAC": "Starlight Cooler Credit est un plugin personnalisable qui offre des liens de crédit élégants et multilingues vers Starlight, Astro et le Starlight Blog—transformant une petite idée en une collaboration mondiale.", 478 478 - "It all started when I noticed the credit link to [Starlight](https://starlight.a.E3176BDD24D595103F8B": "Tout a commencé lorsque j'ai remarqué le lien de crédit vers [Starlight](https://starlight.astro.build) dans la [documentation Astro](https://docs.astro.build). Positionné au bas de la table des matières, il était simple mais élégant, et j'aimais la manière subtile de reconnaître l'auteur du projet. Lorsque Starlight a introduit sa propre option de crédit, je l'ai activée dans tous mes projets. C'était discret, petit et placé au bas de chaque page—sympathique, mais facile à manquer.", 479 479 - "That’s when I thought, *What if others want a cooler credit option, like the one.A4A2F8A54AB64409161B": "C'est alors que je me suis dit, *Et si d'autres voulaient une option de crédit plus cool, comme celle de la documentation Astro ?* Alors, je me suis mis à créer un plugin. Au départ, c'était juste un projet amusant pour faire des liens vers Starlight et Astro d'une manière plus visible. J'ai commencé avec deux préréglages—un pour Starlight et un pour Astro—et j'ai partagé mon travail sur le Discord d'Astro.", 480 480 - "That’s where things took off. [One awesome Astro maintainer](https://www.rainsbe.B87402A9E163AA44FD52": "C'est là que tout a changé. [Un mainteneur extraordinaire d'Astro](https://www.rainsberger.ca/) a suggéré, *\"Pourquoi ne pas ajouter un lien vers le Starlight Blog également ?\"* et j'ai pensé, *Quelle idée géniale !* J'ai ajouté le blog comme troisième préréglage, et soudainement, le plugin est devenu bien plus que ce que j'avais prévu.", 481 481 - "But I wasn’t done yet. It bugged me that the credits were always in English, so .2030C81E5E275567F632": "Mais je n'avais pas encore fini. Ça m'agaçait que les crédits soient toujours en anglais, alors j'ai décidé de les faire traduire automatiquement en fonction des langues prises en charge par Starlight. C'est là que la vraie aventure a commencé. J'ai sollicité la communauté pour m'aider à traduire le plugin dans différentes langues. La réponse a été incroyable ! Des personnes du monde entier ont proposé leur aide, et ce qui avait commencé comme un projet solo s'est transformé en une collaboration mondiale. En chemin, j'ai fait de nouvelles rencontres et appris énormément grâce à tous ceux qui ont participé. Maintenant, le plugin prend en charge une dizaine de langues, et de nouvelles traductions continuent d'arriver.", 482 482 - "What started as a simple idea turned into something I’m really proud of: **Starl.95365D5202F9DED635D6": "Ce qui a commencé comme une idée simple est devenu quelque chose dont je suis vraiment fier : **Starlight Cooler Credit**. Ce n'est pas juste un plugin—c'est une façon de rendre hommage avec style, personnalisation et une touche de travail d'équipe mondial.", 483 483 - "If you’re curious, you can check it out at [starlight-cooler-credit.trueberryles.6ABA7C0A45AE4104F8C3": "Si vous êtes curieux, vous pouvez le découvrir sur [starlight-cooler-credit.trueberryless.org](https://starlight-cooler-credit.trueberryless.org/). Essayez-le—je pense que vous l'aimerez autant que moi !", 484 484 - "![Cloudflare API Token](../../../assets/blog/setup-kubernetes-with-cilium-and-cl.03ECE300FA8789879B29": "Jeton API Cloudflare", 485 485 - "Organising School Life: The Journey Behind Mutanuq": "Organiser la vie scolaire : le parcours derrière Mutanuq", 486 486 - "A fast, Markdown-powered website that organises school content, simplifies learn.C76D3D9450130FF80C83": "Un site web rapide, propulsé par Markdown, qui organise le contenu scolaire, simplifie l'apprentissage et soutient la croissance éducative.", 487 487 - "Mutanuq is a fast, Markdown-powered website I built to organize school content, .8D9E316ADD5966467825": "Mutanuq est un site web rapide propulsé par Markdown que j'ai conçu pour organiser le contenu scolaire, rationaliser l'étude et créer une ressource fiable pour mes camarades de classe et moi-même.", 488 488 - "In my second year at HTL Krems, 2021, I embarked on a project that combined two .4F2292C7BC6324244DF9": "Lors de ma deuxième année à HTL Krems, en 2021, j'ai entrepris un projet qui combinait deux choses qui m'ont toujours passionné : créer mon propre site web et trouver de meilleures façons d'organiser l'immense flux de matériel scolaire. Comme beaucoup d'étudiants, mes notes étaient éparpillées entre OneNote, des fichiers Word, des feuilles Excel, Google Drive, et même des outils comme [Witeboard](https://witeboard.com/). Ce chaos était écrasant, rendant difficile de se concentrer sur un apprentissage efficace.", 489 489 - "Driven by the vision of streamlining this process—not just for me, but also for .767678E51699FE7BA56A": "Animé par la vision de simplifier ce processus—non seulement pour moi, mais aussi pour mes camarades de classe—j'ai décidé de créer une plateforme centralisée pour résumer le contenu scolaire. Mon objectif était double : simplifier l'étude et inspirer la motivation parmi mes pairs.", 490 490 - "At that time, I wasn’t aware of frameworks that could make building documentatio.46FC3F67CBB578E4C0C2": "À cette époque, je ne connaissais pas de cadres qui pourraient faciliter la création de sites web de style documentation. Au lieu de cela, je me suis appuyé sur du simple HTML, CSS et JavaScript pour concevoir les premières versions de ce que j'appelais *Schneider IT*. Bien que j'adorais travailler dessus, mes premières tentatives étaient maladroites : générer dynamiquement la table des matières et la barre latérale avec mon propre code JavaScript entraînait des temps de chargement douloureusement lents. Il fallait 10 secondes ou plus pour que tout s'affiche !", 491 491 - "Despite the setbacks, I kept iterating. By 2023, I had created and discarded abo.4C51D8C17C02D0DB4703": "Malgré les revers, j'ai continué à itérer. En 2023, j'avais créé et abandonné environ 10 versions du site, cherchant toujours un design plus épuré et un système de gestion plus efficace. Le potentiel du site était clair pour moi, mais sa convivialité n'était pas encore au rendez-vous.", 492 492 - "That’s when I stumbled upon [Starlight](https://starlight.astro.build/), a power.2C6631782B77735B3205": "C'est à ce moment-là que je suis tombé sur [Starlight](https://starlight.astro.build/), un cadre puissant et incroyable créé par [Chris Swithinbank (@delucis)](https://github.com/delucis) pour créer des sites web rapides propulsés par Markdown. Découvrir Starlight a été un tournant—cela m'a permis de combiner deux choses qui me passionnent : créer des sites web et utiliser Markdown pour sa simplicité et son élégance.", 493 493 - "With the transition to Starlight, Schneider IT evolved into *Mutanuq*. The new n.99A51B0573CAAE76AA7D": "Avec la transition vers Starlight, Schneider IT est devenu *Mutanuq*. Le nouveau nom marquait un nouveau départ et reflétait le site web épuré et modernisé qu'il était devenu. J'ai tout réécrit, optimisé les performances du site et concentré mes efforts sur la création de contenu spécifiquement adapté aux besoins de mes camarades de classe, en particulier pour les tests à venir.", 494 494 - "The transformation paid off. Friends began using the website regularly and gave .0C49D62224878320182A": "La transformation a porté ses fruits. Mes amis ont commencé à utiliser le site régulièrement et à donner des retours enthousiastes comme : *\"Frérot, ce site est vraiment génial !\"* Mutanuq n'était pas seulement un outil pour les examens—il est devenu une ressource de confiance pour mes pairs et une archive personnelle pour toutes les connaissances que je voulais préserver au-delà de l'école.", 495 495 - "Thanks to Starlight, managing and expanding Mutanuq became effortless, and the p.DA9EDB995FD28655BD1F": "Grâce à Starlight, gérer et développer Mutanuq est devenu un jeu d'enfant, et le projet a évolué en quelque chose que je suis fier de maintenir même aujourd'hui. Ce qui avait commencé comme *Schneider IT*—une petite idée pour organiser mes notes—s'est épanoui en *Mutanuq*, une plateforme qui simplifie l'apprentissage pour les autres tout en préservant des connaissances précieuses pour mon moi futur.", 496 496 - "Designing a Profile That Works Within GitHub's Rules": "Concevoir un profil qui fonctionne dans les règles de GitHub", 497 497 - "How I Built a GitHub Profile README That Shouldn't Exist But It Does": "Comment j’ai conçu un README de profil GitHub qui ne devrait pas exister, mais qui existe", 498 498 - "Every great project starts with a realization of a problem. My GitHub profile RE.481577399AECDF28BE26": "Tout grand projet commence par la prise de conscience d’un problème. Mon README de profil GitHub était en désordre, rempli d’une quantité excessive d’informations, trop de badges, et un contenu accablant qui manquait de style et de structure. Il contenait des réalisations de hackathon, des graphiques de contributions GitHub, divers badges techniques, et bien plus, ce qui le rendait visuellement peu attrayant et difficile à naviguer. Au début, je pensais que c'était une manière efficace de me présenter, mais avec le temps, il est devenu clair que l'information était plus accablante qu'informative. Je voulais quelque chose de nouveau, une approche plus raffinée et visuellement attrayante pour présenter mon profil, et l’idée d’implémenter une grille « bento » m’est venue à l’esprit. L’objectif était de créer une mise en page qui soit non seulement fonctionnelle, mais également esthétiquement impressionnante et structurée.", 499 499 - "The first step was designing an ideal layout using HTML and CSS. The result was .6D5E560BE64C73324B74": "La première étape consistait à concevoir une mise en page idéale en utilisant HTML et CSS. Le résultat était prometteur, une conception structurée et visuellement agréable qui transmettait efficacement les informations prévues. Cependant, l’implémentation directe de ceci dans mon README de profil GitHub n’était pas simple. Le Markdown propre à GitHub impose des limitations strictes sur les éléments HTML pris en charge en raison des contraintes de sécurité. De nombreuses balises HTML essentielles étaient limitées, rendant impossible l'intégration de la conception telle qu'elle avait été envisagée. Comprendre ces limitations signifiait repenser complètement l’approche.", 500 500 - "Faced with these restrictions, I considered alternative ways to dynamically gene.2567BD537B285ECB001A": "Confronté à ces restrictions, j’ai envisagé des moyens alternatifs pour générer et présenter dynamiquement le contenu. Une approche consistait à automatiser les mises à jour du contenu à l’aide d’un script Python pour récupérer mon dernier dépôt GitHub et l’insérer dynamiquement dans le README. Le script accédait à l’API GitHub, récupérait le dépôt mis à jour le plus récemment, et modifiait le README en conséquence. Bien que cela ait été une expérimentation intéressante d’automatisation, cela ne résolvait pas le problème central, qui était la nécessité d’un design structuré et visuellement attrayant.", 501 501 - "Considering alternative approaches, I briefly entertained the idea of taking a s.780BAADFF3D433749DDA": "Envisageant des approches alternatives, j’ai brièvement envisagé l’idée de prendre une capture d’écran de la mise en page HTML conçue et de l’intégrer comme une image statique dans le README. Bien que cela aurait visuellement résolu le problème, cela semblait être une solution peu élégante qui manquait de flexibilité et de réactivité. Avançant, j’ai cherché une méthode qui permettait à la fois la structure et l’adaptabilité tout en maintenant les mises à jour dynamiques du contenu.", 502 502 - "SVGs emerged as a potential solution. They support scalability, maintain visual .0193206311AC8FC941A3": "Les SVGs se sont révélés être une solution potentielle. Ils assurent l’évolutivité, maintiennent une clarté visuelle sur différentes résolutions, et permettent l’intégration de texte et d’autres éléments. Une première expérimentation impliquait l’intégration de HTML dans un SVG en utilisant la balise `foreignObject`. Bien que conceptuellement prometteuse, la mise en œuvre s'est avérée complexe et a été mise de côté temporairement. En revenant au problème plus tard, une approche plus structurée était nécessaire.", 503 503 - "The final approach involved using a composite SVG structure. The solution consis.F542E5E0B858565590BE": "L’approche finale consistait à utiliser une structure SVG composite. La solution se composait de plusieurs éléments clés : convertir la mise en page HTML originale en une représentation SVG, encoder les images en Base64 pour garantir leur chargement correct, intégrer des éléments dynamiques tels que des statistiques GitHub et des mises à jour du statut Spotify sous forme de SVG inline, et automatiser les mises à jour via GitHub Actions. En utilisant ces techniques, la mise en page en grille « bento » est devenue entièrement fonctionnelle, capable de se mettre à jour automatiquement tout en conservant une apparence propre et structurée, respectant les contraintes du Markdown propre à GitHub.", 504 504 - "A critical turning point was the discovery of a Stack Overflow post detailing a .BFAFB816D1969BB990B1": "Un point tournant critique a été la découverte d’un post sur Stack Overflow détaillant une méthode pour convertir HTML en SVG de manière efficace et efficiente. Cette méthode fournissait un moyen structuré de générer les éléments SVG nécessaires tout en préservant le design prévu. En combinant cela avec l’encodage Base64 pour les images et les GitHub Actions pour l’automatisation, cela a permis d’obtenir une solution complète répondant à toutes les exigences initiales.", 505 505 - "The final implementation consists of a refined and visually striking GitHub prof.C95E5BCA4CC5C610AAF2": "La mise en œuvre finale consiste en un README de profil GitHub raffiné et visuellement remarquable qui intègre des mises à jour dynamiques tout en conservant une structure élégante. Il présente les informations clairement sans surcharge inutile et est entièrement automatisé, se mettant à jour toutes les cinq minutes sans intervention manuelle. Le projet a nécessité des recherches importantes et des expérimentations avec les SVGs, les GitHub Actions, et les limitations du Markdown. Le processus a demandé de la persévérance et de la résolution de problèmes pour travailler dans les contraintes de la plateforme tout en obtenant un résultat techniquement impressionnant. Le résultat est un README de profil GitHub qui équilibre efficacement design, automatisation et fonctionnalité dans les limitations de la plateforme.", 506 506 - "If you're now inspired to create a stunning GitHub profile README yourself, read.BC2C5ED3BDEE87A869B8": "Si vous êtes maintenant inspiré pour créer vous-même un README de profil GitHub impressionnant, lisez mon [article de blog technique et amusant](/blog/technically-impressive-github-profile-readme/) ou consultez directement mon dépôt [github.com/trueberryless/trueberryless](https://github.com/trueberryless/trueberryless/tree/7519c6f50094bdfd6fb47f610e6638ac8efdd6ad). Et si vous trouvez mon travail utile, pensez à lui donner un ⭐ et à me suivre sur GitHub à [trueberryless](https://github.com/trueberryless)! 🚀", 507 507 - "![Cognitive Erosion Paradigm: Layered, green circles with \"AI\" in the centre, su.38D1FAC9088D0BD4738E": "Paradigme d'Érosion Cognitive : Couches concentriques vertes avec \"IA\" au centre, entourées par \"Cerveau\", qui est lui-même entouré de plusieurs segments circulaires étiquetés \"Design\", \"Blog\", \"Chats\", \"Art\", \"Contenu\" et \"Discours\" dans le sens des aiguilles d'une montre.", 508 508 - "From Balloons to Binary: A 20th Birthday Packed with Clues": "Des ballons à la binaire : un 20ème anniversaire rempli d'énigmes", 509 509 - "This is the story of creating a true art masterpiece.": "Ceci est l'histoire de la création d'un véritable chef-d'œuvre artistique.", 510 510 - "This year, I turned 20 - and instead of simply lighting candles and inflating ba.CEC0F0AD03DAEF815274": "Cette année, j'ai eu 20 ans - et au lieu de simplement allumer des bougies et gonfler des ballons, je voulais célébrer de manière plus créative et personnelle. L'idée ? Cacher le nombre 20 sous autant de formes surprenantes, astucieuses et dissimulées que possible dans un salon décoré - puis tout capturer dans une seule photo. Que ce soit à travers des énigmes mathématiques ou des clins d'œil visuels, la pièce s'est transformée en une devinette joyeuse pleine de détails ludiques.", 511 511 - "I Turned 20 - And Turned It Into a Puzzle": "J'ai eu 20 ans - Et j'en ai fait une énigme", 512 512 - "The final result wasn't just a festive setting, but a carefully designed puzzle .B767471D3FEF6C98BD69": "Le résultat final n'était pas simplement un décor festif, mais une énigme soigneusement élaborée, remplie de sens, d'humour et de clins d'œil subtils à des choses que j'aime. Certains indices sont faciles à repérer, d'autres sont profondément cachés ou nécessitent une interprétation créative - mais maintenant que le défi a été lancé, il est temps de révéler les secrets.", 513 513 - "Altogether, the number 20 (or variations of it) appears **73 times** throughout .913452A34E0ADB471EF0": "Dans l'ensemble, le nombre 20 (ou ses variations) apparaît **73 fois** sur l'image. Cela inclut 14 occurrences du nombre littéral “20” caché sous des formes astucieuses comme des codes-barres, des QR codes et des valeurs hexadécimales, ainsi que six moments où des objets apparaissent en quantités exactes de vingt. On compte aussi 32 apparitions de “20” imprimées sur des ballons d'anniversaire éparpillés dans la pièce - bien qu'environ la moitié ne soient pas visibles dans l'image - et cinq références supplémentaires reflétant de façon créative mon anniversaire via des nombres comme 2025 ou 2005.", 514 514 - "Roughly 40 of these clues are clearly visible and solvable from the photo alone..900B0E49D675342ADE28": "Environ 40 de ces indices sont clairement visibles et résolvables uniquement à partir de la photo. Les autres nécessitent une réflexion latérale ou de l'imagination pour les découvrir - surtout ceux qui se cachent juste au-delà du cadre en deux dimensions de l'image.", 515 515 - "How the “20” Was Hidden": "Comment le \"20\" a été caché", 516 516 - "Many of the 20s are woven directly into the decor. There's a bright 20 km/h road.DF20030D8A7B9E4CCCF0": "Beaucoup de \"20\" sont intégrés directement dans la décoration. Il y a un panneau de signalisation indiquant 20 km/h, de grands ballons en aluminium en forme des chiffres 2 et 0, et une immense bannière “Joyeux 20ème Anniversaire” accrochée à la fenêtre. Un “gâteau” d'anniversaire fait de 20 rouleaux de papier toilette trône fièrement près du centre, entouré d'éléments décoratifs comme des horloges, des fruits, des chocolats Ferrero Rocher, des bougies de fête et des pièces de jeux - tous groupés intentionnellement par quantités de 20.", 517 517 - "Then come the mathematical twists: two QR codes subtly lead to the number 20. Th.631C4BD85BA49B72C4E1": "Puis viennent les astuces mathématiques : deux QR codes mènent subtilement au nombre 20. Il y a une bande en code Morse, un code binaire (10100) et une couleur représentée en hexadécimal qui se convertit en 20 en base<sub>10</sub>. Un code-barres cache visuellement le nombre, tandis qu'une main de cartes à jouer (As, Valet, Dame, Roi) s'additionne intelligemment pour atteindre 20. Une paire de dominos, aussi, somme le nombre magique. Même une part de gâteau sur le canapé - précisément 20% du tout - poursuit le thème.", 518 518 - "Some of the trickiest clues are tucked into logic puzzles. For example, the appl.3E1D246EA1E47E0643AB": "Certains des indices les plus complexes sont cachés dans des énigmes logiques. Par exemple, les pommes et les poires sur l'étagère murale en bois ressemblent à des 1 et des 0, et si elles sont décodées correctement, elles épellent \"Fe\" - un clin d'œil subtil à mon prénom, Félix. Les dés sur la table sont orientés de manière à ce que vous puissiez déduire les faces cachées du dessus, qui, une fois additionnées, donnent 20.[^1] Et le casse-tête le plus difficile : un paquet de mikados dont la valeur totale visible des pointes est de 110 - ce qui, interprété en base<sub>4</sub>, équivaut exactement à 20 en décimal. Une véritable énigme dans l'énigme !", 519 519 - "Fun fact: The tops of the dice should add up to 20, but in the final picture, th.1AD6690ECD087653EA2B": "Fait amusant : Les faces supérieures des dés devraient totaliser 20, mais sur la photo finale, elles n'atteignent que 12. Cela s'explique par le fait que les cinq dés n'ont pas été fabriqués selon la même disposition — deux suivent une numérotation dans le sens horaire et trois dans le sens antihoraire, comme expliqué [ici sur Wikipédia](https://en.wikipedia.org/wiki/Dice#Arrangement). 😂", 520 520 - "A few clues also fall under the “pop culture knowledge” category. There's a ment.AB39B4A99B41F7978013": "Quelques indices relèvent également de la “culture pop”. On mentionne Rihanna, qui, comme moi, est née le 20 février. Un petit hommage à Hans Zimmer et Christopher Nolan fait référence à leur collaboration de 2005 sur Batman Begins - l'année de ma naissance.", 521 521 - "A Snapshot of My Musical Taste": "Un aperçu de mes goûts musicaux", 522 522 - "While not directly part of the 20-themed puzzle, there's a musical layer hidden .E75B2EA910ADE079A758": "Bien qu'il ne fasse pas directement partie de l'énigme autour du chiffre 20, il y a une couche musicale cachée dans l'image qui reflète quelque chose de profondément personnel : mon amour pour la musique. Dans le coin supérieur gauche, huit pochettes d'albums carrées sont disposées avec soin, chacune présentant un code Spotify pointant vers l'un de mes morceaux préférés de tous les temps. Légèrement décalée à droite, la neuvième pochette représente une playlist rassemblant toutes ces chansons - une petite bande-son de mon univers.", 523 523 - "Each song on that list has earned its place not just for how it sounds, but for .64FF10782E65A696CFEC": "Chaque chanson sur cette liste a gagné sa place non seulement par son son, mais aussi pour les histoires, souvenirs et émotions qu'elle porte. Et surtout, pour les artistes incroyables qui les ont créées.", 524 524 - "It starts with *Molossus* from Batman Begins, a powerful, rising track that intr.0B2CCAEA825C10332861": "Cela commence avec *Molossus* de Batman Begins, un morceau puissant et exaltant qui m'a fait découvrir l'étonnant mélange de films et de musique grâce au travail de Hans Zimmer et Christopher Nolan - l'un de mes duos réalisateur-compositeur préférés. Le film est sorti en 2005, l'année de ma naissance, et bien que The Dark Knight soit mon préféré, Molossus restera toujours un morceau emblématique.", 525 525 - "Next is *9-bit Expedition* from the Fastfall soundtrack, composed by Lifeformed..60068D27CC86091CE517": "Ensuite, c'est *9-bit Expedition* de la bande originale de Fastfall, composée par Lifeformed. Leur style calme et inspiré par le chiptune touche un point sensible auquel je reviens sans cesse. J'admire tellement leur travail que j’ai utilisé leurs morceaux dans des niveaux personnalisés de Celeste que j'ai créés - non seulement parce qu'ils conviennent, mais parce que leur musique représente quelque chose pour moi.", 526 526 - "And then there's *Resurrections* from Celeste - a game I've easily spent 200-300.94D4BAA5C193535ECDD8": "Et puis, il y a *Resurrections* de Celeste - un jeu auquel j'ai facilement consacré 200-300 heures. La vraie magie de son ambiance, c'est Lena Raine, dont la musique atteint vos émotions et en extrait quelque chose de brut et magnifique. Ses compositions ne sont pas juste des arrière-plans - elles sont l'expérience. Je la considère sincèrement comme l'une des compositrices les plus inspirantes que j'aie jamais écoutées, et son travail sur Celeste est un chef-d'œuvre que j'admirerai toujours.", 527 527 - "Also in the mix is *22:12 - Until the End of Time* by Danger, from the Haven sou.72EAD217688685BCB963": "Aussi dans le mélange : *22:12 - Until the End of Time* par Danger, de la bande-son de Haven. Je n'ai même pas joué au jeu - la musique à elle seule m'a captivé. C'est cinématographique, émotionnel et complètement immersif. Danger a absolument réussi, créant un monde sonore dans lequel je pourrais me perdre pendant des heures.", 528 528 - "*Annihilate* from Across the Spider-Verse is another standout. I love both movie.9437FFA646F4451D9745": "*Annihilate* tiré de Across the Spider-Verse est un autre favori. J'adore les deux films de la série, et ce morceau capture parfaitement l'énergie, le style et l'émotion de l'histoire de Miles. C'est une explosion sonore qui ne vieillit jamais.", 529 529 - "From a totally different genre comes *ROTTWEiLER* by TJ\\_beastboy, a German rapp.B95612C092ABF85A718D": "D'un genre complètement différent vient *ROTTWEiLER* de TJ_beastboy, un rappeur allemand qui, pour moi, est à un niveau complètement différent. Il mélange des vibrations chill et une intensité entraînante d'une manière qui semble fraîche et authentique. Sa musique a toujours quelque chose d'unique à exprimer, et je pense honnêtement qu'il est l'un des meilleurs artistes actuels.", 530 530 - "Another track I couldn't leave out is *747* from Tenet - another mind-bending No.89615FC31E49EF7EA4BB": "Une autre piste que je ne pouvais pas omettre est *747* de Tenet - un autre film de Nolan aux scénarios alambiqués, avec une bande sonore signée Ludwig Göransson. L'énergie, le rythme et la structure de cette pièce frappent fort. C'est facilement l'une de mes bandes-son de film préférées de tous les temps, et Göransson continue de prouver qu'il est un génie en matière de musique de cinéma.", 531 531 - "Last but far from least: *MORE* by K/DA - my most-played song ever. It's high-en.12164785491B9D2DAF37": "Enfin, mais loin d'être des moindres : *MORE* de K/DA - ma chanson la plus écoutée. Elle est énergique, polie, confiante et simplement ultra fun. La K-pop en général est bien trop sous-estimée, et ce morceau est la preuve que les frontières de genre n'ont pas d'importance quand une chanson fonctionne à tous les niveaux.", 532 532 - "These songs - and the brilliant minds behind them - aren't just background music.E5DA08D529E76E42DBB3": "Ces chansons - et les esprits brillants derrière elles - ne sont pas juste de la musique d'ambiance. Elles font partie de mon monde créatif, de mon paysage émotionnel, et de la bande-son de tout ce que j'aime faire.", 533 533 - "Stats for Nerds": "Statistiques pour les Nerds", 534 534 - "For those who enjoy data and structure, here's a little summary of all 20s in th.B3CE0613F24C05B8FFE5": "Pour ceux qui apprécient les données et la structure, voici un petit résumé de tous les \"20\" dans l'image :", 535 535 - "Category": "Catégorie", 536 536 - "Count": "Nombre", 537 537 - "Total hidden instances": "Instances cachées totales", 538 538 - "73x": "73x", 539 539 - "Clearly visible and solvable": "Clair et résoluble", 540 540 - "\\~40x": "\\~40x", 541 541 - "Written \"20\"": "\"20\" écrit", 542 542 - "14x": "14x", 543 543 - "Groups of 20 identical items": "Groupes de 20 objets identiques", 544 544 - "6x": "6x", 545 545 - "Birthday balloons printed with \"20\"": "Ballons d'anniversaire imprimés avec \"20\"", 546 546 - "32x": "32x", 547 547 - "Creative variations (e.g., 2025, 2005)": "Variations créatives (ex. : 2025, 2005)", 548 548 - "5x": "5x", 549 549 - "Puzzle Solutions": "Solutions des énigmes", 550 550 - "Code Type": "Type de Code", 551 551 - "Representation": "Représentation", 552 552 - "QR Codes": "Codes QR", 553 553 - "Bar Code": "Code-barres", 554 554 - "20\\. February": "20. février", 555 555 - "Binary Code": "Code binaire", 556 556 - "Today is February 20th, 2025": "Aujourd'hui, c'est le 20 février 2025", 557 557 - "Base": "Base", 558 558 - "Code": "64", 559 559 - "My birthday is February 20th, 2005": "Mon anniversaire est le 20 février 2005", 560 560 - "Hex Code (Color Codes)": "Code Hexadécimal (codes couleurs)", 561 561 - "twenty": "vingt", 562 562 - "Morse Code": "Code Morse", 563 563 - "20\\. FEBRUARY 2005": "20. FÉVRIER 2005", 564 564 - "Playing Cards": "Cartes à jouer", 565 565 - "King (4) + Queen (3) + Jack (2) + Ace (11) = 20": "Roi (4) + Reine (3) + Valet (2) + As (11) = 20", 566 566 - "Domino": "Domino", 567 567 - "(0|2) + (3|3) + (4|0) + (2|1) + (1|0) + (2|2) = 20": "(0|2) + (3|3) + (4|0) + (2|1) + (1|0) + (2|2) = 20", 568 568 - "Apples (0) and Pears (1)": "Pommes (0) et Poires (1)", 569 569 - "Binary Code: Fe": "Code binaire : Fe", 570 570 - "Mikado Sticks Value": "Valeur des bâtons Mikado", 571 571 - "110 (base": "110 (base", 572 572 - ") = 20 (base": "4) = 20 (base", 573 573 - "Dice top sides": "10)", 574 574 - "It was a joy to turn this celebration into a personal challenge and to see frien.C633AD0611AAAC49C2DA": "3 + 2 + 1 + 1 + 5 = 12", 575 575 - "How to fully autogenerate Starlight sidebars (without losing control)": "Comment générer automatiquement des barres latérales Starlight sans perdre le contrôle", 576 576 - "Learn two Starlight techniques to autogenerate large sidebars while keeping clea.20BC1955A37AA7859B18": "Découvrez deux techniques de Starlight pour générer automatiquement de grandes barres latérales tout en conservant des URL et des intitulés propres.", 577 577 - "Have you ever wanted to simplify sidebar generation in your Starlight project? H.2D5E37D5439F17736C27": "Avez-vous déjà voulu simplifier la génération de barres latérales dans votre projet Starlight ? Avez-vous essayé de générer automatiquement l'intégralité de la barre latérale pour découvrir qu'elle ne vous permet pas de personnaliser la structure selon vos besoins ?", 578 578 - "This post demonstrates two Starlight features that make fully autogenerated side.BDF2E65CF1AF47E9F83B": "Cet article démontre deux fonctionnalités de Starlight qui rendent les barres latérales entièrement générées automatiquement flexibles et réduisent la maintenance.", 579 579 - "Use case": "Cas d'utilisation", 580 580 - "In medium to large Starlight projects, the problem arises that the manual creati.11763E0A14C36D449179": "Dans des projets Starlight de taille moyenne à grande, la création et la maintenance manuelles de la [configuration de la barre latérale Starlight](https://starlight.astro.build/reference/configuration/#sidebar) deviennent une tâche fastidieuse et chronophage.", 581 581 - "In the past, Starlight didn't provide the right primitives for this, and the rec.48BF051900AF52DB446D": "Par le passé, Starlight ne fournissait pas les primitives adéquates pour cela, et l'approche recommandée consistait à déplacer d'un niveau inférieur la génération automatique de la configuration de la barre latérale — afin que seuls les dossiers sans sous-dossiers imbriqués soient générés automatiquement. Cependant, avec l'introduction de [Route Data](https://starlight.astro.build/guides/route-data/) et du plus récent [`generateId()` hook de `docsLoader`](https://starlight.astro.build/reference/configuration/#generateid), ces scénarios peuvent désormais être résolus beaucoup plus facilement et efficacement.", 582 582 - "Solving the ordering issue": "Résolution du problème d’ordre", 583 583 - "A common problem always was: \"How can I customise the order of sidebar folders i.AE2CA0CC5AC2560DCF3C": "Un problème fréquent était toujours : \"Comment puis-je personnaliser l'ordre des dossiers de la barre latérale si je génère automatiquement la barre latérale ?\" D'anciennes problématiques comme [#1223](https://github.com/withastro/starlight/issues/1223) suggèrent une solution inspirée de [Nuxt Content](https://content.nuxt.com) où chaque segment de l'intégralité du chemin peut être [préfixé avec des nombres et des points](https://v2.content.nuxt.com/usage/content-directory#ordering) pour déterminer un ordre numérique au niveau du fichier. Un exemple pour un tel projet pourrait ressembler à ceci :", 584 584 - "src/content/docs/nested-folder": "src/content/docs/dossier-imbriqué", 585 585 - "1.frameworks": "1.frameworks", 586 586 - "1.vue.md": "1.vue.md", 587 587 - "2.nuxt.md": "2.nuxt.md", 588 588 - "2.examples": "2.examples", 589 589 - "1.vercel.md": "1.vercel.md", 590 590 - "2.netlify.md": "2.netlify.md", 591 591 - "If you want to use this approach in Starlight, it doesn't work out-of-the-box, b.1799E45D5D83874DE15D": "Si vous souhaitez utiliser cette approche dans Starlight, cela ne fonctionne pas immédiatement, mais avec une configuration simple, vous pouvez y parvenir.", 592 592 - "Starlight [0.35.0](https://github.com/withastro/starlight/releases/tag/%40astroj.5B25A8356D4B9CE00F94": "Starlight [0.35.0](https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.35.0) a introduit une fonction de rappel que vous pouvez passer à `docsLoader()` et qui peut manipuler l'identifiant (URL) de la page générée. En divisant l'entrée par `\"/\"` et en supprimant tout nombre + point au niveau des segments, vous disposez maintenant de la même fonctionnalité dans Starlight :", 593 593 - "The URL to access the pages now changes e.g., from `/nested-folder/1.frameworks/.6941CF02484C8DCB2B28": "L'URL pour accéder aux pages change maintenant par exemple, de `/nested-folder/1.frameworks/1.vue` à `/nested-folder/frameworks/vue`.", 594 594 - "However, the folder names in the sidebar still include the `1.` prefixes. So let.0CAEBB02FF8EEAA7C1F1": "Cependant, les noms des dossiers dans la barre latérale incluent encore les préfixes `1.`. Alors, résolvons également la manipulation de la barre latérale :", 595 595 - "Solving the sidebar folder naming issue": "Résolution du problème de nommage des dossiers dans la barre latérale", 596 596 - "Starlight [0.32.0](https://github.com/withastro/starlight/releases/tag/%40astroj.7F6BC940CC96F2ABA63D": "Starlight [0.32.0](https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.32.0) a introduit [Route Data](https://starlight.astro.build/guides/route-data/), que nous pouvons maintenant utiliser pour manipuler les noms des dossiers dans la barre latérale afin de", 597 597 - "remove any leading number + dot from the folder name and": "supprimer tout numéro et point en début de nom de dossier, et", 598 598 - "apply \"Title Case\" so they don't look completely lowercase": "appliquer la \"Title Case\" afin qu'ils ne soient pas entièrement en minuscules", 599 599 - "Internationalisation (i18n)": "Internationalisation (i18n)", 600 600 - "Note that [internationalisation (i18n) of folder names](https://starlight.astro..78D4931CBD055B889B4B": "Notez que [l'internationalisation (i18n) des noms de dossiers](https://starlight.astro.build/guides/sidebar/#internationalization) est une fonctionnalité manquante avec une telle configuration, car il n'y a actuellement aucun endroit pour définir des traductions de noms de dossiers ; ils sont simplement convertis en \"Title Case\". Implémenter une logique pour charger dynamiquement les traductions pourrait impliquer de lire le [champ `locale` à partir des données de route](https://starlight.astro.build/reference/route-data/#locale) et de définir les traductions dans des fichiers `json`. Sinon, [utilisez le plugin de HiDeoo](#using-hideoos-plugin), qui [prend en charge l'i18n](https://starlight-auto-sidebar.netlify.app/guides/i18n/).", 601 601 - "Don't forget to add the `routeData.ts` file to your `astro.config.mjs`:": "N'oubliez pas d'ajouter le fichier `routeData.ts` à votre fichier `astro.config.mjs` :", 602 602 - "Of course you can adjust the code to your needs (e.g., remove the \"Title Case\" t.8EE143244F5E89BEFCE4": "Bien sûr, vous pouvez ajuster le code à vos besoins (par exemple, supprimer la transformation \"Title Case\" si vos noms de fichiers sont déjà correctement écrits).", 603 603 - "Using HiDeoo's plugin": "Utilisation du plugin de HiDeoo", 604 604 - "If you want to autogenerate your whole sidebar and still have the flexibility to.AB216A94695F22CEA149": "Si vous souhaitez générer automatiquement toute votre barre latérale et conserver la flexibilité nécessaire pour personnaliser tout ce que vous voulez, [HiDeoo](https://github.com/HiDeoo) a également créé un plugin dédié pour de tels cas d'utilisation : [Starlight Auto Sidebar](https://starlight-auto-sidebar.netlify.app).", 605 605 - "Especially those two features got mentioned in this article:": "En particulier, ces deux fonctionnalités ont été mentionnées dans cet article :", 606 606 - "Controlling the [order](https://starlight-auto-sidebar.netlify.app/metadata/#ord.08329D63645DA7FDB0F2": "Controllant [l'ordre](https://starlight-auto-sidebar.netlify.app/metadata/#order) des répertoires individuels", 607 607 - "Adapting the [displayed label](https://starlight-auto-sidebar.netlify.app/metada.41A180D1D992072397D3": "Adaptant [l'intitulé affiché](https://starlight-auto-sidebar.netlify.app/metadata/#label) des dossiers individuels", 608 608 - "However, if you want to automate the whole generation without having to specify .AA2463868A43906766FA": "Cependant, si vous souhaitez automatiser entièrement la génération sans devoir spécifier manuellement les intitulés et l'ordre pour chaque répertoire, coder la solution vous-même (avec quelques lignes directrices de ce blog) est la solution préférée et recommandée.", 609 609 - "If you want to check out the code presented in this blog, feel free to visit the.9F7F074B6E1A29450183": "Si vous souhaitez consulter le code présenté dans cet article, n'hésitez pas à visiter le [StackBlitz](https://stackblitz.com/github/trueberryless/starlight-autogenerate-whole-sidebar?file=src%2Fcontent.config.ts) ou le code source dans le [dépôt GitHub](https://github.com/trueberryless/starlight-autogenerate-whole-sidebar).", 610 610 - "You might think that this story is now over because everyone could just use the .C9618FDEC9BA9ED17D35": "Vous pourriez penser que cette histoire est maintenant terminée, car tout le monde pourrait simplement utiliser la variante qu'il souhaite, et tout le monde est heureux. Mais Starlight a continué et continue de s'améliorer, et environ trois mois plus tard, le 15 février, presque comme un [cadeau d'anniversaire](/blog/20th-birthday/) pour moi, l'ajout tant attendu des données de route dans Starlight est arrivé avec la sortie de la version [v0.32](https://github.com/withastro/starlight/releases/tag/@astrojs/starlight@0.32.0). Cet ajout apparemment mineur a ouvert tant de possibilités, que je n'avais moi-même jamais envisagées. Une fois de plus, HiDeoo a été la principale source d'inspiration pour les auteurs de plugins et a poussé cette nouvelle fonctionnalité à ses limites. Il leur a fallu seulement deux jours pour [adapter plus de 11 plugins à la dernière version de Starlight à l'époque](https://bsky.app/profile/hideoo.dev/post/3liffpudc5c2b) et ils ont ensuite amélioré et refactorisé une grande partie du code pour tirer encore plus parti de cette puissante fonctionnalité.", 611 611 - "Deactivate TLS within Argo CD": "Désactiver TLS dans Argo CD" 612 612 - }