Merge branch 'master' into deploy

.docker/Dockerfile

@@ -1,4 +1,4 @@
-FROM docker.io/library/nginx:1.25.2-alpine
+FROM docker.io/library/nginx:1.25.3-alpine
 
 COPY ./dist/ /usr/share/nginx/html/
 

.docker/default.conf

@@ -36,7 +36,7 @@ server {
       return 405;
     }
 
-    location /rss {
+    location = /rss {
         rewrite ^/rss /rss.xml redirect;
     }
 

.eslintrc.json

@@ -1,22 +1,22 @@
-module.exports = {
+{
-  extends: ["@clickbar/typescript", "plugin:astro/recommended"],
+  "extends": ["@clickbar/typescript", "plugin:astro/recommended"],
-  overrides: [
+  "overrides": [
     {
       // Define the configuration for `.astro` file.
-      files: ["*.astro"],
+      "files": ["*.astro"],
       // Allows Astro components to be parsed.
-      parser: "astro-eslint-parser",
+      "parser": "astro-eslint-parser",
       // Parse the script in `.astro` as TypeScript by adding the following configuration.
       // It's the setting you need when using TypeScript.
-      parserOptions: {
+      "parserOptions": {
-        parser: "@typescript-eslint/parser",
+        "parser": "@typescript-eslint/parser",
-        extraFileExtensions: [".astro"],
+        "extraFileExtensions": [".astro"]
       },
-      rules: {
+      "rules": {
         // override/add rules settings here, such as:
         // Does not work well with typescript
-        "no-undef": "off",
+        "no-undef": "off"
-      },
+      }
-    },
+    }
-  ],
+  ]
-};
+}

.gitlab-ci.yml

@@ -39,60 +39,27 @@ package:
   stage: package
   interruptible: true
   image: quay.io/sheogorath/build-ah-engine:latest
-  tags:
+  rules:
-    - privileged
+    - if: "$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH"
-  variables:
-    LANG: C.UTF-8
-  before_script:
-    - podman login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD" $CI_REGISTRY
-  script:
-    - podman build --pull -f .docker/Dockerfile -t "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG" .
-    - podman push "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG"
-  except:
-    - deploy
-
-package-deploy:
-  stage: package
-  interruptible: true
-  image: quay.io/sheogorath/build-ah-engine:latest
   variables:
     LANG: C.UTF-8
   tags:
-    - privileged
+    - privileged-ram-4gb
   before_script:
     - podman login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD" $CI_REGISTRY
   script:
-    - podman build --pull -f .docker/Dockerfile -t "$CI_REGISTRY_IMAGE" .
+    - podman build --pull -f .docker/Dockerfile -t "$CI_REGISTRY_IMAGE" -t "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG" .
     - podman push "$CI_REGISTRY_IMAGE"
-  only:
+    - podman push "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG"
-    - deploy
 
 test:
   stage: test
   interruptible: true
   tags:
-    - privileged
+    - privileged-ram-4gb
-  image: quay.io/sheogorath/build-ah-engine:latest
-  variables:
-    LANG: C.UTF-8
-  before_script:
-    - dnf install curl
-  script:
-    - podman run -d -p 8080:80 --name testing $CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG
-    - sleep 5
-    - podman exec testing nginx -c /etc/nginx/nginx.conf -t
-    - curl http://localhost:8080/status.txt | grep -q 'OK'
-    - podman stop testing
-    - podman rm testing
-  except:
-    - deploy
-
-test-deploy:
-  stage: test
-  interruptible: true
-  tags:
-    - privileged
   image: quay.io/sheogorath/build-ah-engine:latest
+  rules:
+    - if: "$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH"
   variables:
     LANG: C.UTF-8
   before_script:
@@ -104,15 +71,13 @@ test-deploy:
     - curl http://localhost:8080/status.txt | grep -q 'OK'
     - podman stop testing
     - podman rm testing
-  only:
-    - deploy
 
 deploy:
   stage: deploy
+  rules:
+    - if: "$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH"
   variables:
     PLAYBOOK: static_websites.yml
   trigger:
     project: saibotk.de/infrastructure-private
     strategy: depend
-  only:
-    - deploy

.prettierrc.cjs

@@ -1,11 +0,0 @@
-module.exports = {
-  plugins: [require.resolve("prettier-plugin-astro")],
-  overrides: [
-    {
-      files: "*.astro",
-      options: {
-        parser: "astro",
-      },
-    },
-  ],
-};

package.json

@@ -15,19 +15,19 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^1.0.0",
+    "@astrojs/mdx": "^2.1.1",
-    "@astrojs/rss": "^3.0.0",
+    "@astrojs/rss": "^4.0.5",
-    "@astrojs/sitemap": "^3.0.0",
+    "@astrojs/sitemap": "^3.1.0",
-    "@astrojs/tailwind": "^5.0.0",
+    "@astrojs/tailwind": "^5.1.0",
-    "@clickbar/eslint-config-typescript": "^8.0.2",
+    "@clickbar/eslint-config-typescript": "^10.0.0",
-    "@fontsource/fira-code": "^5.0.8",
+    "@fontsource/fira-code": "^5.0.16",
-    "@fontsource/inter": "^5.0.8",
+    "@fontsource/inter": "^5.0.16",
-    "@tailwindcss/typography": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.10",
-    "astro": "^3.0.7",
+    "astro": "^4.4.1",
-    "eslint": "^8.48.0",
+    "eslint": "^8.56.0",
-    "eslint-plugin-astro": "^0.29.0",
+    "eslint-plugin-astro": "^0.31.4",
-    "prettier-plugin-astro": "^0.12.0",
+    "prettier-plugin-astro": "^0.13.0",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.1",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.3"
   }
 }

src/components/Footer.astro

@@ -22,6 +22,6 @@ const today = new Date()
       Source Code
     </a>
     <span> &#183; </span>
-    <a href="/rss.xml" target="_blank" rel="noopener" class="inline-block"><Rss class="w-5 h-5 hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300" /></a>
+    <a href="/rss.xml" target="_blank" rel="noopener" class="inline-block" aria-label="RSS Feed"><Rss class="w-5 h-5 hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300" /></a>
   </div>
 </footer>

src/env.d.ts

@@ -1 +1,11 @@
 /// <reference types="astro/client" />
+
+import "astro/astro-jsx";
+
+declare global {
+  namespace JSX {
+    type Element = HTMLElement;
+    // type Element = astroHTML.JSX.Element // We want to use this, but it is defined as any.
+    type IntrinsicElements = astroHTML.JSX.IntrinsicElements;
+  }
+}

src/layouts/Base.astro

@@ -19,12 +19,12 @@ const { pageTitle, description } = Astro.props
 <html lang="en">
   <head>
     <BaseHead
-      title={((pageTitle && pageTitle + ' - ') || '') + SITE_TITLE}
+      title={((pageTitle && pageTitle + ' - ') ?? '') + SITE_TITLE}
-      description={(description && description) || SITE_DESCRIPTION}
+      description={(description && description) ?? SITE_DESCRIPTION}
     />
   </head>
   <body
-    class="font-sans text-zinc-300 w-full max-w-4xl px-4 mx-auto min-h-screen flex flex-col"
+    class="font-sans text-zinc-300 w-full max-w-4xl px-4 mx-auto min-h-screen flex flex-col overflow-x-hidden"
   >
     <Header title={SITE_TITLE} />
     <main class="grow flex flex-col my-4 mx-4">

src/layouts/BlogPost.astro

@@ -19,7 +19,7 @@ const {
 <Base pageTitle={title} description={description}>
   <article>
     <div class="text-center">
-      <h1 class="mt-20 mb-2 text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-tr from-pink-500 to-indigo-200">{title}</h1>
+      <h1 class="mt-20 mb-2 text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-tr from-pink-500 to-indigo-200">{title}</h1>
       {pubDate && <time class="text-base tracking-wider text-zinc-400">{pubDate}</time>}
       {
         updatedDate && (

src/pages/posts.astro

@@ -1,7 +1,14 @@
 ---
 import Base from '../layouts/Base.astro'
 
-const rawPosts = await Astro.glob('./posts/**/*.{md,mdx}')
+interface Frontmatter {
+  title: string
+  description?: string
+  pubDate: string
+  draft?: boolean
+}
+
+const rawPosts = await Astro.glob<Frontmatter>('./posts/**/*.md')
 const posts = rawPosts
   .filter((post) => !post.frontmatter.draft)
   .sort(

src/pages/posts/setup-phpstorm-for-laravel-and-vue.md

@@ -9,16 +9,16 @@ pubDate: "Oct 13 2023"
 
 ## 🤔 Why?
 
-There are many resources already available for setting up your PhpStorm. For example the excellent course from Jeffrey Way on [Laracasts](https://laracasts.com/series/phpstorm-for-laravel-developers), go watch it if you really want to make it your own!
+There are many resources already available for setting up your PhpStorm. For example, the excellent course from Jeffrey Way on [Laracasts](https://laracasts.com/series/phpstorm-for-laravel-developers), go watch it if you really want to make it your own!
 
-But this is much more a reference for random people on the internet, colleagues or friends on how i setup my PhpStorm and we will mainly focus on the Tooling setup in this post.  
+But this is much more a reference for random people on the internet, colleagues or friends on how I set up my PhpStorm, and we will mainly focus on the tooling setup in this post.  
-I will share details on my style customizations in a smaller blog post soon, where i will also share my customized Tokyo Night color scheme.
+In the end I will also share some details on my color style customizations, where I will also share my customized Tokyo Night color scheme.
 
 But why do you share this just now?  
-Mainly because I got inspired to be sharing more because of the amazing talk ["Publishing Your Work"](https://www.youtube.com/watch?v=2YaEtaXYVtI) from Aaron Francis.
+Mainly because I got inspired to share more because of the amazing talk ["Publishing Your Work"](https://www.youtube.com/watch?v=2YaEtaXYVtI) from Aaron Francis.
 
 Is this a perfect guide?  
-No, and it will never be. Everything in this world is changing really fast and if I would let my perfectionism decide wether or not to publish this, you would still only find the ol' "First Post" on my "blog".
+No, and it will never be. Everything in this world is changing really fast and if I would let my perfectionism decide whether to publish this, you would still only find the ol' "First Post" on my "blog".
 
 ## 🔌 Plugins
 
@@ -37,8 +37,8 @@ No, and it will never be. Everything in this world is changing really fast and i
 
 To ensure safety in your PHP code, we want to enable PHPStan in the `PHP -> Quality Tools` section.
 
-Make sure to adjust the level to a good default (will be overriden by your project's config anyways) and press the `...` button to properly set
+Make sure to adjust the level to a good default (will be overridden by your project's config anyway) and press the `...` button to properly set
-a project independant path for PHPStan and fill in `./vendor/bin/phpstan`.
+a project independent path for PHPStan and fill in `./vendor/bin/phpstan`.
 
 I honestly think JetBrains should just guess this automatically tbh.
 
@@ -90,16 +90,16 @@ Additionally press the 3 dots and configure the Laravel Pint path to be `./vendo
 
 ### Prettier
 
-For JS files, lets setup the good ol' Prettier.  
+For JS files, lets set up the good ol' Prettier.  
 To do so, go to `Languages & Frameworks -> JavaScript -> Prettier` and enable `Automatic Prettier configuration`.
 
-Now you can also adjust the file endings to include only some formats, but I changed it to check everything since this currently catches everything for my usecase,
+Now you can also adjust the file endings to include only some formats, but I changed it to check everything since this currently catches everything for my use case,
-because it will run on all files in CI anyways and I often found myself to include more and more file endings.  
+because it will run on all files in CI anyway and I often found myself including more and more file endings.  
 So I just let Prettier check every file: `{**/*,*}.{*}`
 
 Also remember to enable the `Run on save` checkbox for the auto fix on 💾 sweetness.
 
-![The Language & Frameworks, JavaScript, Prettier settings screen with highlights to each option mentioned above.](../../images/setup-phpstorm-for-laravel-and-vue/format_prettier.png)
+![The Language & Frameworks, JavaScript, Prettier settings screen with highlights for each option mentioned above.](../../images/setup-phpstorm-for-laravel-and-vue/format_prettier.png)
 
 ### ESLint
 
@@ -107,7 +107,7 @@ Same thing for ESLint.
 Go to `Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint` and enable `Automatic ESLint configuration`.
 
 For ESLint I still maintain a list of file endings, since it can get quite performance heavy.
-Currently I have the following list: `{**/*,*}.{js,ts,mjs,cjs,mts,jsx,tsx,html,vue,astro}`.
+Currently, I have the following list: `{**/*,*}.{js,ts,mjs,cjs,mts,jsx,tsx,html,vue,astro}`.
 
 Again, remember to enable the `Run on save` checkbox for the auto fix on 💾 sweetness.
 
@@ -115,20 +115,25 @@ Again, remember to enable the `Run on save` checkbox for the auto fix on 💾 sw
 
 ## Code Style
 
-Now comes an important change to avoid conflicting code style formatting from PHPStorms rules, which need some tweaks since they are now active on save and usually people do not notice how the default settings look. If we do not change these, we will be able to see how PHPStorm first applies its own style and then runs tools like Laravel Pint which reformat the code again. For large files this could lead to big jitter and annoyance.
+Now comes an important change to avoid conflicting code style formatting from PHPStorms rules, which need some tweaks since they are now active on save and usually people do not notice how the default settings look. If we do not change these, we will be able to see how PHPStorm first applies its own style and then runs tools like Laravel Pint which reformat the code again. For large files, this could lead to big jitter and annoyance.
 
 Go to `Editor -> Code Style -> PHP`. Choose `Scheme: Default (IDE)`.
 
 > Note: We do not use the `Set from...` Feature here, and instead configure only a handful rules on our own to match the style.
 
-But we are not done yet, since the base configuration still formats way too much for my taste and maybe your colleagues. So we tweak some styles to avoid auto formatting code sections that are valid for Laravel Pint but not for PHPStorm. Our settings will reduce the impact of auto-formats to a minimum and ideally should not cause you to commit "unneccesary" styles which are not enforced through Laravel Pint for example.
+But we are not done yet, since the base configuration still formats way too much for my taste and maybe your colleagues. So we tweak some styles to avoid auto formatting code sections that are valid for Laravel Pint but not for PHPStorm. Our settings will reduce the impact of auto-formats to a minimum and ideally should not cause you to commit "unneccessary" styles which are not enforced through Laravel Pint for example.
 
 > If you have some custom Laravel Pint / PHPCsFixer rules and notice double reformats, you might need to match some settings to your rules.
 
-### PHP Style Adjustments
+### PHP Style Adjustments (config file)
 
-You can now follow all of these steps or just donwload my codestyle xml and import it 😄  
+You can now follow all the steps below or just download my codestyle export and import it 😄  
-👉 Download the CodeStyle [here](/phpstorm/PHPCodestyleSaibotk.xml)
+👉 Download the CodeStyle <a href="/phpstorm/PHPCodestyleSaibotk.xml" target="_blank">here</a>
+
+And import it on the PHP Code style page, by clicking the ⚙️ icon.
+![Screenshot of the import menu.](../../images/setup-phpstorm-for-laravel-and-vue/style_import.png)
+
+### PHP Style Adjustments (detailed)
 
 #### Spaces
 
@@ -145,7 +150,7 @@ Change the `PHPDoc @param spaces` settings to 2.
 #### Code Conversion
 
 Now go to the `Code Conversion` tab and select `Lower case` for both `True/False` and `Null` constants.
-Additionally enable `Convert else if/elseif to` and select `elseif`.
+Additionally, enable `Convert else if/elseif to` and select `elseif`.
 
 ![A screenshot of the code conversion options.](../../images/setup-phpstorm-for-laravel-and-vue/style_code_conversion.png)
 
@@ -172,24 +177,26 @@ Go to `Blank lines` and set `After namespace` to `1`.
 For my IDE I chose the `Fira Code Nerd Font` which is a patched version of `Fira Code` with additional symbols used e.g. in my terminal.
 It is set to size `15.0` with ligatures enabled, for extra fancy symbols.
 
-For the terminal I am also using Fira Code, but this time the mono variant and in size `13.0`: `Fira Code Nerd Font Mono`.
+For the terminal, I am also using Fira Code, but this time the mono variant and in size `13.0`: `Fira Code Nerd Font Mono`.
 
 ### Theme
 
-As my theme I am using [Tokyo Night Dark](https://plugins.jetbrains.com/plugin/18820-tokyo-night-theme).
+As my theme, I am using [Tokyo Night Dark](https://plugins.jetbrains.com/plugin/18820-tokyo-night-theme).
 
 But I only use this as the overall editor theme, which can be found under `Appearance & Behavior -> Appearance`.
 
 ### Color Scheme
 
-For the color scheme I decided to start with the [Tokyo Night Color Scheme](https://plugins.jetbrains.com/plugin/15662-tokyo-night-color-scheme) and then heavily modified it based on the original VSCode theme colors, to be more in line with the original theme.
+![Screenshot of example code with my color scheme applied](../../images/setup-phpstorm-for-laravel-and-vue/color_scheme.png)
 
-Sadly though, I got to feel the inferior code color scheme options of PHPStorm in contrast to VSCode. Nonetheless it now looks pretty good and similar.
+For the color scheme, I decided to start with the [Tokyo Night Color Scheme](https://plugins.jetbrains.com/plugin/15662-tokyo-night-color-scheme) and then heavily modified it based on the original VSCode theme colors, to be more in line with the original theme.
 
-While not perfect, I uploaded my current version here and may upload it to the Marketplace if i ever feel like dedicating more time to it.
+Sadly though, I got to feel the inferior code color scheme options of PHPStorm in contrast to VSCode. Nonetheless, it now looks pretty good and similar.
+
+While not perfect, I uploaded my current version here and may upload it to the Marketplace if I ever feel like dedicating more time to it.
 But for now I already invested way more hours into this than I initially wanted 😅
 
-👉 Check it out [here](/phpstorm/TokyoNightPlusPlus.icls)
+👉 Check it out <a href="/phpstorm/TokyoNightPlusPlus.icls" target="_blank">here</a>
 
 ## Anti-Copilot Snoop
 
@@ -203,14 +210,14 @@ Go to `Languages & Frameworks -> GitHub Copilot` and disable `DotEnv` in the `La
 
 ### Don't exclude `vendor` or `node_modules` folder
 
-PHPStorm uses them for auto completion and I once made the mistake to exclude them, which lead to missing auto-completions. So just don't do this 😄
+PHPStorm uses them for autocompletion and I once made the mistake to exclude them, which lead to missing auto-completions. So just don't do this 😄
 
 ### Add Run Actions for Horizon etc
 
-For projects using Laravel Horizon, I can only recommend to add this as a shortcut run configuration.
+For projects using Laravel Horizon, I can only recommend adding this as a shortcut run configuration.
 
 Go to `Run/Debug Configurations`, press `+` and add a new `Shell Script` command.
-Set `Script text` to `php artisan horizon` or any other artisan command that is long running and uncheck the `Execute in terminal` checkbox.
+Set `Script text` to `php artisan horizon` or any other artisan command that is long-running and uncheck the `Execute in terminal` checkbox.
 Also make sure the `Allow multiple instances` checkbox is disabled.
 
 ![A screenshot of the Run/Debug configurations modal.](../../images/setup-phpstorm-for-laravel-and-vue/run_horizon.png)

src/pages/rss.xml.ts

@@ -2,12 +2,17 @@ import rss, { pagesGlobToRssItems } from "@astrojs/rss";
 
 import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
 
-export async function GET() {
+import type { RSSFeedItem } from "@astrojs/rss";
+import type { APIContext } from "astro";
+
+export async function GET(context: APIContext) {
   return rss({
     title: SITE_TITLE,
     description: SITE_DESCRIPTION,
-    site: import.meta.env.SITE,
+    site: context.site ?? "",
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-argument
+
-    items: await pagesGlobToRssItems(import.meta.glob("./posts/**/*.{md,mdx}")),
+    items: (await pagesGlobToRssItems(
+      import.meta.glob("./posts/**/*.md"),
+    )) as RSSFeedItem[],
   });
 }

src/styles/global.css

@@ -11,5 +11,5 @@ html {
 }
 
 .prose-custom :not(pre) code {
-  @apply before:hidden after:hidden bg-zinc-700 p-0.5 px-1 inline rounded-sm;
+  @apply before:hidden after:hidden bg-zinc-800 p-0.5 px-1 inline break-words rounded-sm;
 }

tailwind.config.js

@@ -1,8 +1,8 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
+import typographyPlugin from "@tailwindcss/typography";
-const defaultTheme = require("tailwindcss/defaultTheme");
+import defaultTheme from "tailwindcss/defaultTheme";
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     extend: {
@@ -12,5 +12,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("@tailwindcss/typography")],
+  plugins: [typographyPlugin],
 };

tsconfig.json

@@ -7,5 +7,6 @@
       "@components/*": ["src/components/*"],
       "@images/*": ["src/images/*"]
     }
-  }
+  },
+  "include": ["src/**/*", "astro.config.js", "tailwind.config.js"]
 }