Mirror of
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

refactor: use better images and make OG images dynamic (#142)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

authored by

Felix Schneider
autofix-ci[bot]
and committed by
GitHub
b6015013 1b1192a9

+227 -132
+9 -5
astro.config.mjs
··· 13 13 import rehypeAutolinkHeadings from "./src/plugins/rehype/autolink-headings"; 14 14 import rehypeGitHubBadgeLinks from "./src/plugins/rehype/github-badge-links"; 15 15 16 - const { GISCUS_REPO_ID, GISCUS_CATEGORY_ID } = loadEnv( 17 - process.env.NODE_ENV ?? "development", 16 + const { GISCUS_REPO_ID } = loadEnv( 17 + process.env.GISCUS_REPO_ID, 18 + process.cwd(), 19 + "" 20 + ); 21 + const { GISCUS_CATEGORY_ID } = loadEnv( 22 + process.env.GISCUS_CATEGORY_ID, 18 23 process.cwd(), 19 - "GISCUS_" 24 + "" 20 25 ); 21 26 22 27 if (!GISCUS_REPO_ID || !GISCUS_CATEGORY_ID) { ··· 131 136 clemens: { 132 137 name: "Clemens Schlipfinger", 133 138 picture: "/clemens.png", 134 - url: "https://www.linkedin.com/in/clemens-schlipfinger/", 139 + url: "https://clemens.steinanet.at/", 135 140 }, 136 141 hideoo: { 137 142 name: "HiDeoo", ··· 167 172 TableOfContents: "./src/components/TableOfContents.astro", 168 173 Hero: "./src/components/Hero.astro", 169 174 PageTitle: "./src/components/PageTitle.astro", 170 - Pagination: "./src/components/Pagination.astro", 171 175 }, 172 176 customCss: ["./src/styles/index.css"], 173 177 markdown: {
+3 -3
package.json
··· 37 37 "sharp": "^0.34.4", 38 38 "starlight-blog": "^0.24.2", 39 39 "starlight-cooler-credit": "^0.4.0", 40 - "starlight-giscus": "^0.7.0", 40 + "starlight-giscus": "^0.8.0", 41 41 "starlight-image-zoom": "^0.13.1", 42 42 "starlight-links-validator": "^0.18.0", 43 43 "starlight-theme-rapide": "^0.5.1", ··· 45 45 "unist-util-visit": "^5.0.0" 46 46 }, 47 47 "devDependencies": { 48 - "vite": "^7.1.9", 49 48 "@trivago/prettier-plugin-sort-imports": "5.2.2", 50 49 "prettier": "3.5.3", 51 - "prettier-plugin-astro": "0.14.1" 50 + "prettier-plugin-astro": "0.14.1", 51 + "vite": "^7.1.9" 52 52 }, 53 53 "packageManager": "pnpm@10.10.0" 54 54 }
+5 -5
pnpm-lock.yaml
··· 54 54 specifier: ^0.4.0 55 55 version: 0.4.0(@astrojs/starlight@0.36.0(astro@5.14.3(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.52.4)(typescript@5.9.3)(yaml@2.8.1))) 56 56 starlight-giscus: 57 - specifier: ^0.7.0 58 - version: 0.7.0(@astrojs/starlight@0.36.0(astro@5.14.3(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.52.4)(typescript@5.9.3)(yaml@2.8.1))) 57 + specifier: ^0.8.0 58 + version: 0.8.0(@astrojs/starlight@0.36.0(astro@5.14.3(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.52.4)(typescript@5.9.3)(yaml@2.8.1))) 59 59 starlight-image-zoom: 60 60 specifier: ^0.13.1 61 61 version: 0.13.1(@astrojs/starlight@0.36.0(astro@5.14.3(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.52.4)(typescript@5.9.3)(yaml@2.8.1))) ··· 1952 1952 peerDependencies: 1953 1953 '@astrojs/starlight': '>=0.32' 1954 1954 1955 - starlight-giscus@0.7.0: 1956 - resolution: {integrity: sha512-5Qt4BFcP7i3QWP7BoyEEZc/VwDNLi1PYGWvT2EfiFzrwovTUfmbJ1wGCvLZYg7usVyLDMVM5ABSZAL/LwNi4iQ==} 1955 + starlight-giscus@0.8.0: 1956 + resolution: {integrity: sha512-mWDQOyVsuavns2Wy/+KMnjma/7A1LjEGS2r+ic1fWKOCT8lKc6kqe/KlA7rLsbuE6UsUV0MAZdiGf1WoJ6M+hw==} 1957 1957 engines: {node: ^18.20.8 || ^20.3.0 || >=22.0.0} 1958 1958 peerDependencies: 1959 1959 '@astrojs/starlight': '>=0.35.0' ··· 4964 4964 '@astrojs/starlight': 0.36.0(astro@5.14.3(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.52.4)(typescript@5.9.3)(yaml@2.8.1)) 4965 4965 change-case: 5.4.4 4966 4966 4967 - starlight-giscus@0.7.0(@astrojs/starlight@0.36.0(astro@5.14.3(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.52.4)(typescript@5.9.3)(yaml@2.8.1))): 4967 + starlight-giscus@0.8.0(@astrojs/starlight@0.36.0(astro@5.14.3(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.52.4)(typescript@5.9.3)(yaml@2.8.1))): 4968 4968 dependencies: 4969 4969 '@astrojs/starlight': 0.36.0(astro@5.14.3(@types/node@24.7.1)(jiti@1.21.7)(rollup@4.52.4)(typescript@5.9.3)(yaml@2.8.1)) 4970 4970
public/blog/accelerating-translations-with-continuous-integration.jpg

This is a binary file and will not be displayed.

public/blog/accelerating-translations-with-continuous-integration.png

This is a binary file and will not be displayed.

public/blog/authors/artificial-intelligence.jpg

This is a binary file and will not be displayed.

public/blog/authors/artificial-intelligence.png

This is a binary file and will not be displayed.

public/blog/authors/clemens-schlipfinger.jpg

This is a binary file and will not be displayed.

public/blog/authors/clemens-schlipfinger.png

This is a binary file and will not be displayed.

public/blog/authors/felix-schneider.jpg

This is a binary file and will not be displayed.

public/blog/authors/felix-schneider.png

This is a binary file and will not be displayed.

public/blog/authors/frostybee.jpg

This is a binary file and will not be displayed.

public/blog/authors/frostybee.png

This is a binary file and will not be displayed.

public/blog/authors/hideoo.jpg

This is a binary file and will not be displayed.

public/blog/authors/hideoo.png

This is a binary file and will not be displayed.

public/blog/cognitive-erosion.jpg

This is a binary file and will not be displayed.

public/blog/cognitive-erosion.png

This is a binary file and will not be displayed.

public/blog/deep-thoughts.jpg

This is a binary file and will not be displayed.

public/blog/deep-thoughts.png

This is a binary file and will not be displayed.

public/blog/diploma-thesis.jpg

This is a binary file and will not be displayed.

public/blog/diploma-thesis.png

This is a binary file and will not be displayed.

public/blog/earworms.jpg

This is a binary file and will not be displayed.

public/blog/github-profile-readme.jpg

This is a binary file and will not be displayed.

public/blog/github-profile-readme.png

This is a binary file and will not be displayed.

public/blog/mutanuq.jpg

This is a binary file and will not be displayed.

public/blog/mutanuq.png

This is a binary file and will not be displayed.

public/blog/rehype-github-badge-links.jpg

This is a binary file and will not be displayed.

public/blog/rehype-github-badge-links.png

This is a binary file and will not be displayed.

public/blog/setup-argocd-for-kubernetes.jpg

This is a binary file and will not be displayed.

public/blog/setup-argocd-for-kubernetes.png

This is a binary file and will not be displayed.

public/blog/setup-continuous-integration-github-repository.jpg

This is a binary file and will not be displayed.

public/blog/setup-continuous-integration-github-repository.png

This is a binary file and will not be displayed.

public/blog/setup-kubernetes-with-cilium-and-cloudflare.jpg

This is a binary file and will not be displayed.

public/blog/setup-kubernetes-with-cilium-and-cloudflare.png

This is a binary file and will not be displayed.

public/blog/starlight-autogenerate-whole-sidebar.jpg

This is a binary file and will not be displayed.

public/blog/starlight-autogenerate-whole-sidebar.png

This is a binary file and will not be displayed.

public/blog/starlight-cooler-credit.jpg

This is a binary file and will not be displayed.

public/blog/starlight-cooler-credit.png

This is a binary file and will not be displayed.

public/blog/starlight-dropdown-and-list-together.jpg

This is a binary file and will not be displayed.

public/blog/starlight-dropdown-and-list-together.png

This is a binary file and will not be displayed.

public/blog/starlight-progress-indicator.jpg

This is a binary file and will not be displayed.

public/blog/starlight-progress-indicator.png

This is a binary file and will not be displayed.

public/blog/starlight-sidebar-whitespace.jpg

This is a binary file and will not be displayed.

public/blog/starlight-sidebar-whitespace.png

This is a binary file and will not be displayed.

public/blog/starlight-topics-history-story.jpg

This is a binary file and will not be displayed.

public/blog/starlight-topics-history-story.png

This is a binary file and will not be displayed.

public/blog/tags/automation.jpg

This is a binary file and will not be displayed.

public/blog/tags/automation.png

This is a binary file and will not be displayed.

public/blog/tags/components.jpg

This is a binary file and will not be displayed.

public/blog/tags/components.png

This is a binary file and will not be displayed.

public/blog/tags/css.jpg

This is a binary file and will not be displayed.

public/blog/tags/css.png

This is a binary file and will not be displayed.

public/blog/tags/deployment.jpg

This is a binary file and will not be displayed.

public/blog/tags/deployment.png

This is a binary file and will not be displayed.

public/blog/tags/education.jpg

This is a binary file and will not be displayed.

public/blog/tags/education.png

This is a binary file and will not be displayed.

public/blog/tags/github.jpg

This is a binary file and will not be displayed.

public/blog/tags/github.png

This is a binary file and will not be displayed.

public/blog/tags/mindspace.jpg

This is a binary file and will not be displayed.

public/blog/tags/mindspace.png

This is a binary file and will not be displayed.

public/blog/tags/plugins.jpg

This is a binary file and will not be displayed.

public/blog/tags/plugins.png

This is a binary file and will not be displayed.

public/blog/tags/starlight.jpg

This is a binary file and will not be displayed.

public/blog/tags/starlight.png

This is a binary file and will not be displayed.

public/blog/tags/tool.jpg

This is a binary file and will not be displayed.

public/blog/tags/tool.png

This is a binary file and will not be displayed.

public/blog/technically-impressive-github-profile-readme.jpg

This is a binary file and will not be displayed.

public/blog/technically-impressive-github-profile-readme.png

This is a binary file and will not be displayed.

public/blog/terraform-variables-resolution.jpg

This is a binary file and will not be displayed.

public/blog/terraform-variables-resolution.png

This is a binary file and will not be displayed.

public/blog/true-tracker.jpg

This is a binary file and will not be displayed.

public/blog/true-tracker.png

This is a binary file and will not be displayed.

public/blog/username.jpg

This is a binary file and will not be displayed.

public/blog/username.png

This is a binary file and will not be displayed.

-7
src/components/Pagination.astro
··· 1 - --- 2 - import Comments from "starlight-giscus/components/Comments.astro"; 3 - import OriginalPagination from "@astrojs/starlight/components/Pagination.astro"; 4 - --- 5 - 6 - <Comments /> 7 - <OriginalPagination />
+5 -1
src/content/docs/blog/20th-birthday.mdx
··· 9 9 - trueberryless 10 10 - ai 11 11 cover: 12 - alt: A beautiful cover image with the text "20th Birthday" 12 + alt: A decorated birthday cake featuring two candles shaped like the number twenty, symbolizing a 20th birthday celebration. 13 13 image: ../../../../public/blog/20th-birthday.jpg 14 14 giscus: true 15 15 --- ··· 133 133 ## Conclusion 134 134 135 135 It was a joy to turn this celebration into a personal challenge and to see friends and family try to solve the riddle. Whether you spotted five 20s or all seventy-three - thank you for playing along! 🎉 136 + 137 + ## Credits 138 + 139 + Cover image creator: https://unsplash.com/@bilal_ayadi
+7 -2
src/content/docs/blog/accelerating-translations-with-continuous-integration.mdx
··· 12 12 - trueberryless 13 13 excerpt: <p>I have been working in OSS on <a class="gh-badge" href="https://github.com/github"><img src="https://github.com/github.png" alt="github" />GitHub</a> for over a year now and although I thought I found everything I want to contribute to, I recently discovered <a class="gh-badge" href="https://github.com/pelikhan"><img src="https://github.com/pelikhan.png" alt="pelikhan" />Peli's</a> personal project <a href="https://github.com/pelikhan/action-continuous-translation">action-continuous-translation</a> and I am very happy that I started doing regular contributions there and being part of the little community now.</p> 14 14 cover: 15 - alt: A beautiful cover image with the text "AI Translations" 16 - image: ../../../../public/blog/accelerating-translations-with-continuous-integration.png 15 + alt: Vibrant plastic letters in various colors set against a pink and blue background, adding a playful touch to the image. 16 + image: ../../../../public/blog/accelerating-translations-with-continuous-integration.jpg 17 17 tableOfContents: false 18 18 --- 19 19 ··· 32 32 Fast-forward three days and I am now an official contributor to the project, making it greater and greater almost daily, mainly focusing on docs and the support for my heart project: Starlight - as you might already have guessed from [my blogs](/blog/tags/starlight/). 33 33 34 34 Peli and I have our virtual productivity sessions between 4pm and 8pm UTC, extending longer on weekends. So if you want to join us as an early bird of the project or got interested in using it, feel free to check it out on [GitHub](https://github.com/github): https://github.com/pelikhan/action-continuous-translation 35 + 36 + 37 + ## Credits 38 + 39 + Cover image creator: https://unsplash.com/@towfiqu999999
+7 -3
src/content/docs/blog/cognitive-erosion.mdx
··· 7 7 authors: 8 8 - trueberryless 9 9 cover: 10 - alt: A beautiful cover image with the text "Cognitive Erosion" 11 - image: ../../../../public/blog/cognitive-erosion.png 10 + alt: A painting showing a man with a bright, colorful brain, illustrating the concept of cognitive erosion and its impact on thought. 11 + image: ../../../../public/blog/cognitive-erosion.jpg 12 12 giscus: true 13 13 featured: true 14 14 --- 15 15 16 - It has been more than two and a half years since the release of ChatGPT. The 30<sup>th</sup> November, 2022 marked the beginning of a new era. The start of AI. Nowadays, many professions and people in private lives, especially in the information technology sector, use it on a daily basis. And we do not even know where we are on the Gartner hype cycle or if AI will improve following Kurzweil’s "Law of Accelerating Returns". 16 + It has been more than two and a half years since the release of ChatGPT. The 30<sup>th</sup> November, 2022 marked the beginning of a new era. The start of AI. Nowadays, many professions and people in private lives, especially in the information technology sector, use it on a daily basis. And we do not even know where we are on the Gartner hype cycle or if AI will improve following Kurzweil’s "Law of Accelerating Returns". 17 17 18 18 The trend is still rising, but at the same time I have noticed a slight but steady degradation of knowledge on a human basis because people delegate more and more creative work to AI. As a result, I have decided to write a little blog post, where I can share my thoughts, trying to discourage the overuse of Artificial Intelligence which would ruin our cognitive capabilities. And although I know that very little people read this, it does not stop me from trying. Otherwise, I might have missed my opportunity in helping humanities future. 19 19 ··· 104 104 - [The most powerful ways to "hack" our new Dia browser (YouTube.com)](https://www.youtube.com/watch?v=JCZUIm4S9QQ) 105 105 106 106 Happy reading! 107 + 108 + ## Credits 109 + 110 + Cover image creator: https://neurolaunch.com
+5 -1
src/content/docs/blog/earworms.mdx
··· 7 7 authors: 8 8 - trueberryless 9 9 cover: 10 - alt: A beautiful cover image with the text "Earworms" 10 + alt: A visual representation of a sound wave set on a pink background, showcasing the dynamics of sound frequencies. 11 11 image: ../../../../public/blog/earworms.jpg 12 12 tableOfContents: false 13 13 giscus: true ··· 28 28 The exact reason for that is completely unknown to me, but if I had to guess, I would say that the rhythms of the completed song (the penultimate one) are still ringing somewhere in your mind since the song itself was maybe one of those "I-just-fade-out-my-volume-to-end-me"-songs, which is not my favourite type of ending to music, but it encourages the brain to go on. 29 29 30 30 At least that's what I think. I would be very interested if you have experienced similar patterns, so feel free to write your own blog post about it or just share this one with friends so you can discuss it with them! 31 + 32 + ## Credits 33 + 34 + Cover image creator: https://unsplash.com/@unclearvision
+6 -2
src/content/docs/blog/github-profile-readme.mdx
··· 8 8 authors: 9 9 - trueberryless 10 10 cover: 11 - alt: A beautiful cover image with the text "GitHub Profile README" 12 - image: ../../../../public/blog/github-profile-readme.png 11 + alt: Visual representation of git history with contributions stats, featuring text highlighted in green and blue for clarity. 12 + image: ../../../../public/blog/github-profile-readme.jpg 13 13 --- 14 14 15 15 Every great project starts with a realization of a problem. My GitHub profile README was cluttered, filled with too much information, too many badges, and an overwhelming amount of content that lacked style and structure. It had hackathon achievements, GitHub contribution graphs, various technical badges, and much more, making it visually unappealing and difficult to navigate. Initially, I thought this was an effective way to present myself, but over time, it became clear that the information was overwhelming rather than informative. I wanted something new, a more refined and visually appealing approach to presenting my profile, and the idea of implementing a bento grid came to mind. The goal was to create a layout that was not only functional but also aesthetically impressive and structured. ··· 31 31 The final implementation consists of a refined and visually striking GitHub profile README that integrates dynamic content updates while maintaining an elegant structure. It presents information clearly without unnecessary clutter and is entirely automated, updating itself every five minutes without manual intervention. The project involved significant research and experimentation with SVGs, GitHub Actions, and Markdown limitations. The process required persistence and problem-solving to work within the constraints of the platform while achieving a technically impressive result. The outcome is a GitHub profile README that effectively balances design, automation, and functionality within the limitations of the platform. 32 32 33 33 If you're now inspired to create a stunning GitHub profile README yourself, read my [more technical and amusing blog post](/blog/technically-impressive-github-profile-readme/) or directly check out my repository [github.com/trueberryless/trueberryless](https://github.com/trueberryless/trueberryless/tree/7519c6f50094bdfd6fb47f610e6638ac8efdd6ad). And if you find my work helpful, consider giving it a ⭐ and following me on GitHub at [trueberryless](https://github.com/trueberryless)! 🚀 34 + 35 + ## Credits 36 + 37 + Cover image creator: https://unsplash.com/@yancymin
+8 -2
src/content/docs/blog/mutanuq.mdx
··· 10 10 authors: 11 11 - trueberryless 12 12 cover: 13 - alt: A beautiful cover image with the text "Mutanuq" 14 - image: ../../../../public/blog/mutanuq.png 13 + alt: A vibrant back-to-school graphic featuring school supplies and cheerful colors, emphasizing the excitement of a new school year. 14 + image: ../../../../public/blog/mutanuq.jpg 15 15 --- 16 16 17 17 In my second year at HTL Krems, 2021, I embarked on a project that combined two things I’ve always been passionate about: creating my own website and finding better ways to organize the endless flow of school material. Like many students, my notes were scattered across OneNote, Word files, Excel sheets, Google Drive, and even tools like [Witeboard](https://witeboard.com/). The chaos was overwhelming, making it difficult to focus on learning effectively. ··· 29 29 The transformation paid off. Friends began using the website regularly and gave enthusiastic feedback like, *"Bro, this website looks awesome!"* Mutanuq wasn’t just a tool for exams—it became a trusted resource for my peers and a personal archive for all the knowledge I wanted to preserve beyond school. 30 30 31 31 Thanks to Starlight, managing and expanding Mutanuq became effortless, and the project grew into something I’m proud to maintain even today. What started as *Schneider IT*—a small idea to organize my notes—blossomed into *Mutanuq*, a platform that simplifies learning for others while preserving valuable knowledge for my future self. 32 + 33 + You can take a look at Mutanuq under this domain: https://mutanuq.trueberryless.org 34 + 35 + ## Credits 36 + 37 + Cover image creator: https://unsplash.com/@miracleday
+7 -3
src/content/docs/blog/rehype-github-badge-links.mdx
··· 9 9 - trueberryless 10 10 excerpt: Discover how a tiny Rehype plugin can give your GitHub links a big visual upgrade. With just a few lines of code, we’ll turn regular profile links into elegant badges with avatars, inspired by Antfu’s site and powered by Astro + Starlight. 11 11 cover: 12 - alt: A beautiful cover image with the text "Badge Links" 13 - image: ../../../../public/blog/rehype-github-badge-links.png 12 + alt: A backpack covered in an assortment of badges, each representing unique interests and experiences. 13 + image: ../../../../public/blog/rehype-github-badge-links.jpg 14 14 tableOfContents: false 15 15 featured: true 16 16 --- ··· 143 143 /> 144 144 ``` 145 145 146 - </details> 146 + </details> 147 + 148 + ## Credits 149 + 150 + Cover image creator: https://unsplash.com/@luarte_raw
+6 -2
src/content/docs/blog/setup-argocd-for-kubernetes.mdx
··· 11 11 authors: 12 12 - trueberryless 13 13 cover: 14 - alt: A beautiful cover image with the text "Argo CD" 15 - image: ../../../../public/blog/setup-argocd-for-kubernetes.png 14 + alt: A massive container ship with stacked cargo containers sailing across the ocean under a clear blue sky. 15 + image: ../../../../public/blog/setup-argocd-for-kubernetes.jpg 16 16 giscus: true 17 17 --- 18 18 ··· 297 297 ## Continuation 298 298 299 299 Be continued for our [next blog](/blog/setup-continuous-integration-github-repository) which will describe how to set up a [GitHub](https://github.com/github) repository which can then be deployed via Argo CD. 300 + 301 + ## Credits 302 + 303 + Cover image creator: https://unsplash.com/@carrier_lost
+6 -2
src/content/docs/blog/setup-continuous-integration-github-repository.mdx
··· 11 11 authors: 12 12 - trueberryless 13 13 cover: 14 - alt: A beautiful cover image with the text "Github CD" 15 - image: ../../../../public/blog/setup-continuous-integration-github-repository.png 14 + alt: A person balances on a large pipe, with a view of the landscape in the background. 15 + image: ../../../../public/blog/setup-continuous-integration-github-repository.jpg 16 16 giscus: true 17 17 --- 18 18 ··· 276 276 ## Celebrate with a Coffee! 277 277 278 278 Congratulations, you've successfully set up Argo CD with k3s and [Cilium](https://github.com/cilium)! You deserve a coffee break. Enjoy a well-earned cup, and if you'd like to share a virtual coffee with me, feel free to support my work on [Ko-fi](https://ko-fi.com/trueberryless). Thank you! 279 + 280 + ## Credits 281 + 282 + Cover image creator: https://unsplash.com/@frostroomhead
+6 -2
src/content/docs/blog/setup-kubernetes-with-cilium-and-cloudflare.mdx
··· 11 11 - trueberryless 12 12 - clemens 13 13 cover: 14 - alt: A beautiful cover image with the text "Kubernetes" 15 - image: ../../../../public/blog/setup-kubernetes-with-cilium-and-cloudflare.png 14 + alt: A cube in 3D with a yellow and green sticker applied to its surface, showcasing a geometric design. 15 + image: ../../../../public/blog/setup-kubernetes-with-cilium-and-cloudflare.jpg 16 16 giscus: true 17 17 metrics: 18 18 readingTime: 360 ··· 782 782 ``` 783 783 784 784 Hopefully, you're now good to go! 785 + 786 + ## Credits 787 + 788 + Cover image creator: https://unsplash.com/@growtika
+7 -3
src/content/docs/blog/starlight-autogenerate-whole-sidebar.mdx
··· 8 8 authors: 9 9 - trueberryless 10 10 cover: 11 - alt: A beautiful cover image with the text "Auto Sidebar" 12 - image: ../../../../public/blog/starlight-autogenerate-whole-sidebar.png 11 + alt: A shelf displaying an array of colorful binders in various shades, organized neatly for easy access. 12 + image: ../../../../public/blog/starlight-autogenerate-whole-sidebar.jpg 13 13 --- 14 14 15 15 import { FileTree } from '@astrojs/starlight/components'; ··· 22 22 23 23 ## Use case 24 24 25 - In medium to large Starlight projects, the problem arises that the manual creation and maintenance of the [Starlight sidebar configuration](https://starlight.astro.build/reference/configuration/#sidebar) is a tedious and time-consuming task. 25 + In medium to large Starlight projects, the problem arises that the manual creation and maintenance of the [Starlight sidebar configuration](https://starlight.astro.build/reference/configuration/#sidebar) is a tedious and time-consuming task. 26 26 27 27 In the past, Starlight didn't provide the right primitives for this, and the recommended approach was to move the autogeneration of the sidebar configuration one level deeper - so that only folders without nested subfolders were autogenerated. However, with the introduction of [Route Data](https://starlight.astro.build/guides/route-data/) and the more recent [`generateId()` hook of `docsLoader`](https://starlight.astro.build/reference/configuration/#generateid), these scenarios can now be solved much more easily and efficiently. 28 28 ··· 152 152 However, if you want to automate the whole generation without having to specify labels and orders manually for each directory, coding the solution yourself (with some guidelines in this blog) is the preferred and recommended solution. 153 153 154 154 If you want to check out the code presented in this blog, feel free to visit the [StackBlitz](https://stackblitz.com/github/trueberryless/starlight-autogenerate-whole-sidebar?file=src%2Fcontent.config.ts) or the source code in the [GitHub repo](https://github.com/trueberryless/starlight-autogenerate-whole-sidebar). 155 + 156 + ## Credits 157 + 158 + Cover image creator: https://unsplash.com/@viktortalashuk
+7 -3
src/content/docs/blog/starlight-cooler-credit.mdx
··· 9 9 authors: 10 10 - trueberryless 11 11 cover: 12 - alt: A beautiful cover image with the text "Cooler Credit" 13 - image: ../../../../public/blog/starlight-cooler-credit.png 12 + alt: Visual representation of a credit score, highlighting key metrics and overall credit health. 13 + image: ../../../../public/blog/starlight-cooler-credit.jpg 14 14 --- 15 15 16 16 It all started when I noticed the credit link to [Starlight](https://starlight.astro.build) in the [Astro docs](https://docs.astro.build). Positioned at the bottom of the Table of Contents, it was simple but stylish, and I loved how it subtly gave credit. When Starlight introduced its own credit option, I activated it in all my projects. It was small, understated, and tucked at the bottom of each page—nice, but easy to miss. ··· 23 23 24 24 What started as a simple idea turned into something I’m really proud of: **Starlight Cooler Credit** . It’s more than just a plugin—it’s a way to give credit with style, customization, and a touch of global teamwork. 25 25 26 - If you’re curious, you can check it out at [starlight-cooler-credit.trueberryless.org](https://starlight-cooler-credit.trueberryless.org/) . Give it a try—I think you’ll love it as much as I do! 26 + If you’re curious, you can check it out at [starlight-cooler-credit.trueberryless.org](https://starlight-cooler-credit.trueberryless.org/) . Give it a try—I think you’ll love it as much as I do! 27 + 28 + ## Credits 29 + 30 + Cover image creator: https://unsplash.com/@markuswinkler
+7 -3
src/content/docs/blog/starlight-dropdown-and-list-together.mdx
··· 1 1 --- 2 - title: Starlight Topics Dropdown and List together 2 + title: How components open up endless possibilities 3 3 description: Learn how to combine a desktop list and mobile dropdown for your Starlight sidebar topics. 4 4 date: 2025-05-13 5 5 tags: ··· 12 12 - hideoo 13 13 - trueberryless 14 14 cover: 15 - alt: A beautiful cover image with the text "Dropdown and List?" 16 - image: ../../../../public/blog/starlight-dropdown-and-list-together.png 15 + alt: A collection of electronic components featuring multiple batteries and several battery chargers arranged on a flat surface. 16 + image: ../../../../public/blog/starlight-dropdown-and-list-together.jpg 17 17 --- 18 18 19 19 import { Tabs, TabItem } from "@astrojs/starlight/components"; ··· 116 116 You could also do it the other way around (list on mobile, dropdown on desktop) by swapping the `display: block` and `display: none` properties in the CSS. 117 117 118 118 Moreover, you could also create your own display component, which uses the route data from the Starlight Sidebar Topics plugin and renders the topics in a custom way. This is a bit more advanced, but you can find more information about this in the ["Custom Topics List" documentation](https://starlight-sidebar-topics.trueberryless.org/docs/guides/custom-topic-list/). 119 + 120 + ## Credits 121 + 122 + Cover image creator: https://unsplash.com/@nahakiole
+7 -3
src/content/docs/blog/starlight-progress-indicator.mdx
··· 11 11 - frostybee 12 12 - trueberryless 13 13 cover: 14 - alt: A beautiful cover image with the text "Progress Bar" 15 - image: ../../../../public/blog/starlight-progress-indicator.png 14 + alt: A striking black and red background with a bold red line running horizontally. 15 + image: ../../../../public/blog/starlight-progress-indicator.jpg 16 16 --- 17 17 18 18 In this post, we would like to show you how [FrostyBee](https://github.com/frostybee) created a clean horizontal progress indicator for Starlight sites. ··· 25 25 26 26 Let's create a new component called `ProgressIndicator.astro` in the `src/components/` directory. This component will be responsible for rendering the progress indicator. 27 27 28 - We create a container which spans across the whole width with the progress bar `<div>` inside. The width of the inner `<div>` is the updated whenever the user scrolls (and when the page loads) to reflect the current scroll position. 28 + We create a container which spans across the whole width with the progress bar `<div>` inside. The width of the inner `<div>` is the updated whenever the user scrolls (and when the page loads) to reflect the current scroll position. 29 29 30 30 ```astro title="src/components/ProgressIndicator.astro" collapse={27-43} 31 31 <div class="progress-scroll-container" aria-hidden="true"> ··· 125 125 With this setup, the progress indicator will be displayed on every page (except landing pages) of your Starlight site. 🥳 126 126 127 127 You can also check out [FrostyBee's](https://github.com/frostybee) [Starlight Scroll To Top plugin](https://github.com/frostybee/starlight-scroll-to-top) which also supports a built in [Progress Ring](https://frostybee.github.io/starlight-scroll-to-top/configuration/#showprogressring) since version `0.3.1`. 🙌 128 + 129 + ## Credits 130 + 131 + Cover image creator: https://unsplash.com/@muriel_1
+6 -2
src/content/docs/blog/starlight-sidebar-whitespace.mdx
··· 10 10 authors: 11 11 - trueberryless 12 12 cover: 13 - alt: A beautiful cover image with the text "Starlight CSS" 14 - image: ../../../../public/blog/starlight-sidebar-whitespace.png 13 + alt: An abstract artwork showcasing a blend of orange, blue, and yellow hues, creating a lively and colorful composition. 14 + image: ../../../../public/blog/starlight-sidebar-whitespace.jpg 15 15 --- 16 16 17 17 Have you ever wondered why your [Starlight][starlight] sidebar doesn't look that appealing? Did you know how important the space between items in your sidebar unconsciously is? The font size, the weight and little colour differences? In this guide, we'll take a look at how you can customize the appearance of your Starlight sidebar with some quick and easy steps. ··· 147 147 [starlight-css-cascade-layers]: https://starlight.astro.build/guides/css-and-tailwind/#cascade-layers 148 148 [starlight-0-34]: https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.34.0 149 149 [imho]: https://en.wiktionary.org/wiki/IMHO 150 + 151 + ## Credits 152 + 153 + Cover image creator: https://unsplash.com/@steve_j
+6 -2
src/content/docs/blog/starlight-topics-history-story.mdx
··· 10 10 - trueberryless 11 11 - ai 12 12 cover: 13 - alt: A beautiful cover image with the text "History Time" 14 - image: ../../../../public/blog/starlight-topics-history-story.png 13 + alt: Majestic pillars stand in the courtyard of an ancient temple, showcasing intricate carvings and historical significance. 14 + image: ../../../../public/blog/starlight-topics-history-story.jpg 15 15 --- 16 16 17 17 Maybe you have heard about this cool documentation framework before. I talk about it quite often and use it regularly. Not only because I'm an active contributor, but also because [Starlight](https://starlight.astro.build) just grew to my heart. Its features: Simplicity and minimalism, but everything you need. Its performance: [Faster than 98% of other websites out there](https://www.websitecarbon.com/website/starlight-astro-build-getting-started/). Its accessibility: Not even a question! ··· 41 41 Profound. Timeless. Golden. 42 42 43 43 And that single, beautiful spark of an idea? It’s precisely what I’ll guide you through in [the post "Starlight Topics Dropdown and List together"](/blog/starlight-dropdown-and-list-together/). 44 + 45 + ## Credits 46 + 47 + Cover image creator: https://unsplash.com/@nakkeeran_raveendran
+9 -5
src/content/docs/blog/technically-impressive-github-profile-readme.mdx
··· 10 10 - trueberryless 11 11 - ai 12 12 cover: 13 - alt: A beautiful cover image with the text "GitHub Profile" 14 - image: ../../../../public/blog/technically-impressive-github-profile-readme.png 13 + alt: Overhead perspective of a soccer field with two prominent lines delineating the field boundaries. 14 + image: ../../../../public/blog/technically-impressive-github-profile-readme.jpg 15 15 --- 16 16 17 17 :::note ··· 20 20 21 21 ## The Beginning: A README That Looked Like a Wikipedia Dump 22 22 23 - Every great story starts with a problem, and mine was simple: my [GitHub profile](https://github.com/trueberryless) README was a complete mess. It was long. It had too much text. It was overflowing with badges — so many that it looked like I was hoarding every possible internet trophy. Hackathons, GitHub contributions, Astro, roadmap.sh — if there was a badge, I had it. 23 + Every great story starts with a problem, and mine was simple: my [GitHub profile](https://github.com/trueberryless) README was a complete mess. It was long. It had too much text. It was overflowing with badges — so many that it looked like I was hoarding every possible internet trophy. Hackathons, GitHub contributions, Astro, roadmap.sh — if there was a badge, I had it. 24 24 25 - At first, I thought this was fine. It showed everything about me, right? But one day, I looked at it and realised: 25 + At first, I thought this was fine. It showed everything about me, right? But one day, I looked at it and realised: 26 26 27 27 > This is not stylish. This is a cluttered disaster. 28 28 ··· 133 133 134 134 It updates itself every 5 minutes, runs completely on GitHub Actions, and doesn't rely on any external services. It's beautiful. It's efficient. And most importantly, it's technically absurd in the best way possible. 135 135 136 - Take a look at a specific example of the final results at some point back in time. 136 + Take a look at a specific example of the final results at some point back in time. 137 137 138 138 import { Image } from 'astro:assets' 139 139 ··· 156 156 Would I recommend it? Only if you have way too much patience. 😅 157 157 158 158 But in the end, I created a [GitHub](https://github.com/github) profile README that *shouldn't exist* — but it does. And I love it. 159 + 160 + ## Credits 161 + 162 + Cover image creator: https://unsplash.com/@eduardoflorespe
+7 -3
src/content/docs/blog/terraform-variables-resolution.mdx
··· 9 9 authors: 10 10 - trueberryless 11 11 cover: 12 - alt: A beautiful cover image with the text "VSCE Terraform" 13 - image: ../../../../public/blog/terraform-variables-resolution.png 12 + alt: A wooden church building perched on a hill, symbolizing stability and faith, akin to resolving variables in Terraform. 13 + image: ../../../../public/blog/terraform-variables-resolution.jpg 14 14 --- 15 15 16 16 import { FileTree, LinkButton } from "@astrojs/starlight/components" ··· 156 156 After this initial brainstorming phase, I prefer to use [Claude](https://github.com/anthropics) for programming all the files necessary for such an extension since in my experience this AI bot really has the ability to nail code. I hardly encountered bugs or runtime issues with Claude code, so I use it exactly for such use cases – initial starters. The drawback of Claude is its very limited free trial, which is why I am always careful when choosing my words and try to think of as many possible mistakes the AI could make ahead of time. 157 157 So this is how it began: I took some time to formulate my exact scenario and wish into the limited context windows of a random words machine called Claude and immediately received a huge `extension.ts` implementation. Of course there were obvious differences between my vision and the communication to this LLM, so I had to tell it another time what the important considerations are and in order to be able to receive more code, I also used my magic trick: "If this is too big for one file, just give me the whole extension.ts in multiple files, which should work of course." 158 158 159 - Claude then went on a long journey. 159 + Claude then went on a long journey. 160 160 161 161 After some struggling to keep it going my tokens were all used and I had to figure out the remaining code myself. Nonetheless, I managed to get a running version since not much was missing and immediately realised some improvements that went unnoticed until now. Since I had to wait for my tokens to refill, I did exactly this. 162 162 ··· 173 173 Here you can see the example from [the Terraform explanation](#what-is-terraform), showing how this extension visually adds the values of the variables in VS Code: 174 174 175 175 ![Terraform Variables Resolution Example](../../../assets/blog/terraform-variables-resolution/example.png) 176 + 177 + ## Credits 178 + 179 + Cover image creator: https://unsplash.com/@pablocontreras
+7 -2
src/content/docs/blog/thesis.mdx src/content/docs/blog/diploma-thesis.mdx
··· 7 7 - Tool 8 8 authors: 9 9 - trueberryless 10 + - clemens 10 11 cover: 11 - alt: A beautiful cover image with the text "Diploma Thesis" 12 - image: ../../../../public/blog/diploma-thesis.png 12 + alt: A view of Europe illuminated at night from space, showcasing city lights and geographical features. 13 + image: ../../../../public/blog/diploma-thesis.jpg 13 14 featured: true 14 15 giscus: true 15 16 --- ··· 37 38 Our final product not only met Siemens' requirements but also demonstrated the power of a well-designed service-oriented architecture (SOA) in solving complex, real-world problems. It was immensely rewarding to see our software functioning reliably and providing actionable insights to tackle power grid anomalies. 38 39 39 40 For more details about our work, feel free to explore our thesis [here](https://trueberryless.org/thesis.pdf) 📜 or read our video course [here](https://videos.trueberryless.org/videos/thesis/) 🎥 (both only available in German). 41 + 42 + ## Credits 43 + 44 + Cover image creator: https://animalia-life.club/qa/pictures/high-resolution-nasa-earth-at-night-from-space
+6 -2
src/content/docs/blog/true-tracker.mdx
··· 8 8 authors: 9 9 - trueberryless 10 10 cover: 11 - alt: A beautiful cover image with the text "True Tracker" 12 - image: ../../../../public/blog/true-tracker.png 11 + alt: An elegant pocket watch placed on a book, highlighting the contrast between the timepiece and the textured pages. 12 + image: ../../../../public/blog/true-tracker.jpg 13 13 featured: true 14 14 --- 15 15 ··· 28 28 True Tracker became my first-ever Next.js project—a simple but unique app for tracking time with no strings attached. It's live now at [https://true-tracker.trueberryless.org](https://true-tracker.trueberryless.org/). 29 29 30 30 The journey taught me more than just how to use Next.js. It taught me about pushing past challenges, transitioning between frameworks, and embracing the quirks that make each project unique. True Tracker isn't just an app; it's a milestone—a little piece of proof that even small ideas can have a big impact. 31 + 32 + ## Credits 33 + 34 + Cover image creator: https://unsplash.com/@mboulden
+6 -2
src/content/docs/blog/username.mdx
··· 8 8 authors: 9 9 - trueberryless 10 10 cover: 11 - alt: A beautiful cover image with the text "Username" 12 - image: ../../../../public/blog/username.png 11 + alt: A digital display is framed by vibrant trees, creating a peaceful natural environment. 12 + image: ../../../../public/blog/username.jpg 13 13 tableOfContents: false 14 14 --- 15 15 ··· 34 34 Now, you might be thinking, _Three days for that? Really?_ 35 35 36 36 And to that, I say: _Yes_. Greatness takes time. Besides, who needs true berries when you can be berryless? 37 + 38 + ## Credits 39 + 40 + Cover image creator: https://www.freepik.com
+5 -1
src/content/docs/blog/writing-blogs-is-hard-and-easy.mdx
··· 9 9 - trueberryless 10 10 excerpt: <p>Talk a little bit about how one can become better (not master by any means, nobody is perfect) in writing a blog post. These are just my thoughts after two awesome guys from the <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> and <a class="gh-badge" href="https://github.com/louisescher"><img src="https://github.com/louisescher.png" alt="louisescher" />Lou</a>) decided to write blogs about how hard and easy it is to write blog posts.</p><p>Please read their posts first as this is the follow-up on both of them:</p><ol><li><a href="https://jacobjenkins.codes/posts/why-is-writing-blogs-so-hard/">"Why is writing blog posts so hard?" - Jacob Jenkins</a></li><li><a href="https://lou.gg/blog/why-writing-blogs-isnt-hard">"Why Writing Blogs isn't hard" - Louis Escher</a></li><li><a href="/blog/writing-blogs-is-hard-and-easy/">"Some aspects of creating a blog are really easy, and some are extremely difficult!" - Felix Schneider</a></li></ol><p>After that you have successfully completed this awesome trilogy of blog posts about blog posts.</p> 11 11 cover: 12 - alt: A beautiful cover image with the text "Writing Skill" 12 + alt: A wooden table displays a notebook, a pen, and a steaming coffee cup, suggesting a productive writing session. 13 13 image: ../../../../public/blog/writing-blogs-is-hard-and-easy.jpg 14 14 tableOfContents: false 15 15 --- ··· 59 59 - Blogs have easy and hard sides: This is what the title says, but know that I wrote all that I realised that I haven't answered that question at all... Thank god, that Jacob didn't type a question mark at the end of that suggestion. 🙏 60 60 61 61 Yeah, I guess that's it. If you want to share you thoughts, leave them in [Lou's comments](https://lou.gg/blog/why-writing-blogs-isnt-hard) because I have none. 62 + 63 + ## Credits 64 + 65 + Cover image creator: https://unsplash.com/@dlxmedia
+1 -1
src/content/docs/de/blog/accelerating-translations-with-continuous-integration.mdx
··· 22 22 Teil der kleinen Community bin.</p> 23 23 cover: 24 24 alt: A beautiful cover image with the text "AI Translations" 25 - image: ../../../../../public/blog/accelerating-translations-with-continuous-integration.png 25 + image: ../../../../../public/blog/accelerating-translations-with-continuous-integration.jpg 26 26 tableOfContents: false 27 27 28 28 ---
+1 -1
src/content/docs/de/blog/cognitive-erosion.mdx
··· 10 10 - trueberryless 11 11 cover: 12 12 alt: A beautiful cover image with the text "Cognitive Erosion" 13 - image: ../../../../../public/blog/cognitive-erosion.png 13 + image: ../../../../../public/blog/cognitive-erosion.jpg 14 14 giscus: true 15 15 featured: true 16 16
+1 -1
src/content/docs/de/blog/github-profile-readme.mdx
··· 10 10 - trueberryless 11 11 cover: 12 12 alt: A beautiful cover image with the text "GitHub Profile README" 13 - image: ../../../../../public/blog/github-profile-readme.png 13 + image: ../../../../../public/blog/github-profile-readme.jpg 14 14 15 15 --- 16 16
+1 -1
src/content/docs/de/blog/mutanuq.mdx
··· 15 15 - trueberryless 16 16 cover: 17 17 alt: A beautiful cover image with the text "Mutanuq" 18 - image: ../../../../../public/blog/mutanuq.png 18 + image: ../../../../../public/blog/mutanuq.jpg 19 19 20 20 --- 21 21
+1 -1
src/content/docs/de/blog/rehype-github-badge-links.mdx
··· 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 - image: ../../../../../public/blog/rehype-github-badge-links.png 20 + image: ../../../../../public/blog/rehype-github-badge-links.jpg 21 21 tableOfContents: false 22 22 featured: true 23 23
+1 -1
src/content/docs/de/blog/setup-argocd-for-kubernetes.mdx
··· 17 17 - trueberryless 18 18 cover: 19 19 alt: A beautiful cover image with the text "Argo CD" 20 - image: ../../../../../public/blog/setup-argocd-for-kubernetes.png 20 + image: ../../../../../public/blog/setup-argocd-for-kubernetes.jpg 21 21 giscus: true 22 22 23 23 ---
+1 -1
src/content/docs/de/blog/setup-continuous-integration-github-repository.mdx
··· 22 22 - trueberryless 23 23 cover: 24 24 alt: A beautiful cover image with the text "Github CD" 25 - image: ../../../../../public/blog/setup-continuous-integration-github-repository.png 25 + image: ../../../../../public/blog/setup-continuous-integration-github-repository.jpg 26 26 giscus: true 27 27 28 28 ---
+1 -1
src/content/docs/de/blog/setup-kubernetes-with-cilium-and-cloudflare.mdx
··· 29 29 - clemens 30 30 cover: 31 31 alt: A beautiful cover image with the text "Kubernetes" 32 - image: ../../../../../public/blog/setup-kubernetes-with-cilium-and-cloudflare.png 32 + image: ../../../../../public/blog/setup-kubernetes-with-cilium-and-cloudflare.jpg 33 33 giscus: true 34 34 metrics: 35 35 readingTime: 360
+1 -1
src/content/docs/de/blog/starlight-autogenerate-whole-sidebar.mdx
··· 12 12 - trueberryless 13 13 cover: 14 14 alt: A beautiful cover image with the text "Auto Sidebar" 15 - image: ../../../../../public/blog/starlight-autogenerate-whole-sidebar.png 15 + image: ../../../../../public/blog/starlight-autogenerate-whole-sidebar.jpg 16 16 17 17 --- 18 18
+1 -1
src/content/docs/de/blog/starlight-cooler-credit.mdx
··· 15 15 - trueberryless 16 16 cover: 17 17 alt: A beautiful cover image with the text "Cooler Credit" 18 - image: ../../../../../public/blog/starlight-cooler-credit.png 18 + image: ../../../../../public/blog/starlight-cooler-credit.jpg 19 19 20 20 --- 21 21
+1 -1
src/content/docs/de/blog/starlight-dropdown-and-list-together.mdx
··· 17 17 - trueberryless 18 18 cover: 19 19 alt: A beautiful cover image with the text "Dropdown and List?" 20 - image: ../../../../../public/blog/starlight-dropdown-and-list-together.png 20 + image: ../../../../../public/blog/starlight-dropdown-and-list-together.jpg 21 21 22 22 --- 23 23
+1 -1
src/content/docs/de/blog/starlight-progress-indicator.mdx
··· 16 16 - trueberryless 17 17 cover: 18 18 alt: A beautiful cover image with the text "Progress Bar" 19 - image: ../../../../../public/blog/starlight-progress-indicator.png 19 + image: ../../../../../public/blog/starlight-progress-indicator.jpg 20 20 21 21 --- 22 22
+1 -1
src/content/docs/de/blog/starlight-sidebar-whitespace.mdx
··· 17 17 - trueberryless 18 18 cover: 19 19 alt: A beautiful cover image with the text "Starlight CSS" 20 - image: ../../../../../public/blog/starlight-sidebar-whitespace.png 20 + image: ../../../../../public/blog/starlight-sidebar-whitespace.jpg 21 21 22 22 --- 23 23
+1 -1
src/content/docs/de/blog/starlight-topics-history-story.mdx
··· 18 18 - ai 19 19 cover: 20 20 alt: A beautiful cover image with the text "History Time" 21 - image: ../../../../../public/blog/starlight-topics-history-story.png 21 + image: ../../../../../public/blog/starlight-topics-history-story.jpg 22 22 23 23 --- 24 24
+1 -1
src/content/docs/de/blog/technically-impressive-github-profile-readme.mdx
··· 25 25 - ai 26 26 cover: 27 27 alt: A beautiful cover image with the text "GitHub Profile" 28 - image: ../../../../../public/blog/technically-impressive-github-profile-readme.png 28 + image: ../../../../../public/blog/technically-impressive-github-profile-readme.jpg 29 29 30 30 --- 31 31
+1 -1
src/content/docs/de/blog/terraform-variables-resolution.mdx
··· 11 11 - trueberryless 12 12 cover: 13 13 alt: A beautiful cover image with the text "VSCE Terraform" 14 - image: ../../../../../public/blog/terraform-variables-resolution.png 14 + image: ../../../../../public/blog/terraform-variables-resolution.jpg 15 15 16 16 --- 17 17
+1 -1
src/content/docs/de/blog/thesis.mdx src/content/docs/de/blog/diploma-thesis.mdx
··· 15 15 - trueberryless 16 16 cover: 17 17 alt: A beautiful cover image with the text "Diploma Thesis" 18 - image: ../../../../../public/blog/diploma-thesis.png 18 + image: ../../../../../public/blog/diploma-thesis.jpg 19 19 featured: true 20 20 giscus: true 21 21
+1 -1
src/content/docs/de/blog/true-tracker.mdx
··· 13 13 - trueberryless 14 14 cover: 15 15 alt: A beautiful cover image with the text "True Tracker" 16 - image: ../../../../../public/blog/true-tracker.png 16 + image: ../../../../../public/blog/true-tracker.jpg 17 17 featured: true 18 18 19 19 ---
+1 -1
src/content/docs/fr/blog/accelerating-translations-with-continuous-integration.mdx
··· 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 - image: ../../../../../public/blog/accelerating-translations-with-continuous-integration.png 27 + image: ../../../../../public/blog/accelerating-translations-with-continuous-integration.jpg 28 28 tableOfContents: false 29 29 30 30 ---
+1 -1
src/content/docs/fr/blog/cognitive-erosion.mdx
··· 10 10 - trueberryless 11 11 cover: 12 12 alt: A beautiful cover image with the text "Cognitive Erosion" 13 - image: ../../../../../public/blog/cognitive-erosion.png 13 + image: ../../../../../public/blog/cognitive-erosion.jpg 14 14 giscus: true 15 15 featured: true 16 16
+1 -1
src/content/docs/fr/blog/github-profile-readme.mdx
··· 10 10 - trueberryless 11 11 cover: 12 12 alt: A beautiful cover image with the text "GitHub Profile README" 13 - image: ../../../../../public/blog/github-profile-readme.png 13 + image: ../../../../../public/blog/github-profile-readme.jpg 14 14 15 15 --- 16 16
+1 -1
src/content/docs/fr/blog/mutanuq.mdx
··· 14 14 - trueberryless 15 15 cover: 16 16 alt: A beautiful cover image with the text "Mutanuq" 17 - image: ../../../../../public/blog/mutanuq.png 17 + image: ../../../../../public/blog/mutanuq.jpg 18 18 19 19 --- 20 20
+1 -1
src/content/docs/fr/blog/rehype-github-badge-links.mdx
··· 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 - image: ../../../../../public/blog/rehype-github-badge-links.png 20 + image: ../../../../../public/blog/rehype-github-badge-links.jpg 21 21 tableOfContents: false 22 22 featured: true 23 23
+1 -1
src/content/docs/fr/blog/setup-argocd-for-kubernetes.mdx
··· 19 19 - trueberryless 20 20 cover: 21 21 alt: A beautiful cover image with the text "Argo CD" 22 - image: ../../../../../public/blog/setup-argocd-for-kubernetes.png 22 + image: ../../../../../public/blog/setup-argocd-for-kubernetes.jpg 23 23 giscus: true 24 24 25 25 ---
+1 -1
src/content/docs/fr/blog/setup-continuous-integration-github-repository.mdx
··· 21 21 - trueberryless 22 22 cover: 23 23 alt: A beautiful cover image with the text "Github CD" 24 - image: ../../../../../public/blog/setup-continuous-integration-github-repository.png 24 + image: ../../../../../public/blog/setup-continuous-integration-github-repository.jpg 25 25 giscus: true 26 26 27 27 ---
+1 -1
src/content/docs/fr/blog/setup-kubernetes-with-cilium-and-cloudflare.mdx
··· 28 28 - clemens 29 29 cover: 30 30 alt: A beautiful cover image with the text "Kubernetes" 31 - image: ../../../../../public/blog/setup-kubernetes-with-cilium-and-cloudflare.png 31 + image: ../../../../../public/blog/setup-kubernetes-with-cilium-and-cloudflare.jpg 32 32 giscus: true 33 33 metrics: 34 34 readingTime: 360
+1 -1
src/content/docs/fr/blog/starlight-autogenerate-whole-sidebar.mdx
··· 12 12 - trueberryless 13 13 cover: 14 14 alt: A beautiful cover image with the text "Auto Sidebar" 15 - image: ../../../../../public/blog/starlight-autogenerate-whole-sidebar.png 15 + image: ../../../../../public/blog/starlight-autogenerate-whole-sidebar.jpg 16 16 17 17 --- 18 18
+1 -1
src/content/docs/fr/blog/starlight-cooler-credit.mdx
··· 14 14 - trueberryless 15 15 cover: 16 16 alt: A beautiful cover image with the text "Cooler Credit" 17 - image: ../../../../../public/blog/starlight-cooler-credit.png 17 + image: ../../../../../public/blog/starlight-cooler-credit.jpg 18 18 19 19 --- 20 20
+1 -1
src/content/docs/fr/blog/starlight-dropdown-and-list-together.mdx
··· 17 17 - trueberryless 18 18 cover: 19 19 alt: A beautiful cover image with the text "Dropdown and List?" 20 - image: ../../../../../public/blog/starlight-dropdown-and-list-together.png 20 + image: ../../../../../public/blog/starlight-dropdown-and-list-together.jpg 21 21 22 22 --- 23 23
+1 -1
src/content/docs/fr/blog/starlight-progress-indicator.mdx
··· 15 15 - trueberryless 16 16 cover: 17 17 alt: A beautiful cover image with the text "Progress Bar" 18 - image: ../../../../../public/blog/starlight-progress-indicator.png 18 + image: ../../../../../public/blog/starlight-progress-indicator.jpg 19 19 20 20 --- 21 21
+1 -1
src/content/docs/fr/blog/starlight-sidebar-whitespace.mdx
··· 18 18 - trueberryless 19 19 cover: 20 20 alt: A beautiful cover image with the text "Starlight CSS" 21 - image: ../../../../../public/blog/starlight-sidebar-whitespace.png 21 + image: ../../../../../public/blog/starlight-sidebar-whitespace.jpg 22 22 23 23 --- 24 24
+1 -1
src/content/docs/fr/blog/starlight-topics-history-story.mdx
··· 18 18 - ai 19 19 cover: 20 20 alt: A beautiful cover image with the text "History Time" 21 - image: ../../../../../public/blog/starlight-topics-history-story.png 21 + image: ../../../../../public/blog/starlight-topics-history-story.jpg 22 22 23 23 --- 24 24
+1 -2
src/content/docs/fr/blog/technically-impressive-github-profile-readme.mdx
··· 25 25 - ai 26 26 cover: 27 27 alt: A beautiful cover image with the text "GitHub Profile" 28 - image: ../../../../../public/blog/technically-impressive-github-profile-readme.png 29 - 28 + image: ../../../../../public/blog/technically-impressive-github-profile-readme.jpg 30 29 --- 31 30 32 31 :::note
+1 -1
src/content/docs/fr/blog/terraform-variables-resolution.mdx
··· 11 11 - trueberryless 12 12 cover: 13 13 alt: A beautiful cover image with the text "VSCE Terraform" 14 - image: ../../../../../public/blog/terraform-variables-resolution.png 14 + image: ../../../../../public/blog/terraform-variables-resolution.jpg 15 15 16 16 --- 17 17
+1 -1
src/content/docs/fr/blog/thesis.mdx src/content/docs/fr/blog/diploma-thesis.mdx
··· 16 16 - trueberryless 17 17 cover: 18 18 alt: A beautiful cover image with the text "Diploma Thesis" 19 - image: ../../../../../public/blog/diploma-thesis.png 19 + image: ../../../../../public/blog/diploma-thesis.jpg 20 20 featured: true 21 21 giscus: true 22 22
+1 -1
src/content/docs/fr/blog/true-tracker.mdx
··· 14 14 - trueberryless 15 15 cover: 16 16 alt: A beautiful cover image with the text "True Tracker" 17 - image: ../../../../../public/blog/true-tracker.png 17 + image: ../../../../../public/blog/true-tracker.jpg 18 18 featured: true 19 19 20 20 ---
+31 -24
src/routeData.ts
··· 1 1 import { defineRouteMiddleware } from "@astrojs/starlight/route-data"; 2 + import fs from "fs"; 3 + import path from "path"; 2 4 3 5 export const onRequest = defineRouteMiddleware((context) => { 6 + const routeId = ["blog", ""].includes(context.locals.starlightRoute.id) 7 + ? "blog/deep-thoughts" 8 + : context.locals.starlightRoute.id; 9 + 10 + // Directory of your public assets 11 + const publicDir = path.join(process.cwd(), "public"); 12 + 13 + // Possible image extensions 14 + const extensions = [".png", ".jpg", ".webp"]; 15 + 16 + // Find the first matching image file 17 + const foundExt = extensions.find((ext) => 18 + fs.existsSync(path.join(publicDir, `${routeId}${ext}`)) 19 + ); 20 + 21 + // Build the final URL 4 22 const ogImageUrl = new URL( 5 - `/${["blog", ""].includes(context.locals.starlightRoute.id) ? "blog/deep-thoughts" : context.locals.starlightRoute.id}.png`, 23 + `/${routeId}${foundExt ?? ".jpg"}`, // default fallback 6 24 context.site 7 25 ); 8 26 9 27 const { head, entry } = context.locals.starlightRoute; 10 28 11 - head.push({ 12 - tag: "meta", 13 - attrs: { property: "og:image", content: ogImageUrl.href }, 14 - }); 15 - head.push({ 16 - tag: "meta", 17 - attrs: { property: "twitter:domain", content: context.site?.hostname }, 18 - }); 19 - head.push({ 20 - tag: "meta", 21 - attrs: { 29 + // Common meta tags 30 + const metaTags = [ 31 + { property: "og:image", content: ogImageUrl.href }, 32 + { property: "twitter:domain", content: context.site?.hostname }, 33 + { 22 34 property: "twitter:url", 23 35 content: `${context.site?.href}${entry.id}`, 24 36 }, 25 - }); 26 - head.push({ 27 - tag: "meta", 28 - attrs: { name: "twitter:title", content: entry.data.title }, 29 - }); 30 - head.push({ 31 - tag: "meta", 32 - attrs: { name: "twitter:description", content: entry.data.description }, 33 - }); 34 - head.push({ 35 - tag: "meta", 36 - attrs: { name: "twitter:image", content: ogImageUrl.href }, 37 + { name: "twitter:title", content: entry.data.title }, 38 + { name: "twitter:description", content: entry.data.description }, 39 + { name: "twitter:image", content: ogImageUrl.href }, 40 + ]; 41 + 42 + metaTags.forEach((meta) => { 43 + head.push({ tag: "meta", attrs: meta }); 37 44 }); 38 45 });