Merge branch 'master' into deploy

public/browserconfig.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-    <msapplication>
-        <tile>
-            <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#00aba9</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>

public/phpstorm/PHPCodestyleSaibotk.xml

@@ -0,0 +1,25 @@
+<code_scheme name="Default" version="173">
+  <PHPCodeStyleSettings>
+    <option name="CONCAT_SPACES" value="false" />
+    <option name="PHPDOC_PARAM_SPACES_BETWEEN_TAG_AND_TYPE" value="2" />
+    <option name="PHPDOC_PARAM_SPACES_BETWEEN_TYPE_AND_NAME" value="2" />
+    <option name="PHPDOC_PARAM_SPACES_BETWEEN_NAME_AND_DESCRIPTION" value="2" />
+    <option name="LOWER_CASE_BOOLEAN_CONST" value="true" />
+    <option name="LOWER_CASE_NULL_CONST" value="true" />
+    <option name="ELSE_IF_STYLE" value="COMBINE" />
+    <option name="KEEP_RPAREN_AND_LBRACE_ON_ONE_LINE" value="true" />
+    <option name="SPACE_AFTER_UNARY_NOT" value="true" />
+    <option name="SPACE_BEFORE_SHORT_CLOSURE_LEFT_PARENTHESIS" value="true" />
+    <option name="ATTRIBUTES_WRAP" value="2" />
+  </PHPCodeStyleSettings>
+  <codeStyleSettings language="PHP">
+    <option name="BLANK_LINES_AFTER_PACKAGE" value="1" />
+    <option name="ALIGN_MULTILINE_PARAMETERS" value="false" />
+    <option name="SPACE_AFTER_TYPE_CAST" value="true" />
+    <option name="METHOD_PARAMETERS_RPAREN_ON_NEXT_LINE" value="true" />
+    <option name="IF_BRACE_FORCE" value="3" />
+    <option name="DOWHILE_BRACE_FORCE" value="3" />
+    <option name="WHILE_BRACE_FORCE" value="3" />
+    <option name="FOR_BRACE_FORCE" value="3" />
+  </codeStyleSettings>
+</code_scheme>

public/safari-pinned-tab.svg

@@ -1 +0,0 @@
-<svg version="1" xmlns="http://www.w3.org/2000/svg" width="1118.667" height="1118.667" viewBox="0 0 839.000000 839.000000"><path d="M0 198.5V276h139v442h155V276h143v442h155l.2-79.7.3-79.8 19.5 25c10.7 13.8 22.2 28.6 25.5 33.1 3.3 4.4 22.1 28.8 41.8 54.1l35.8 46.1 9.3-7.1c5.1-4 14.8-11.5 21.6-16.7 6.7-5.2 27.6-21.4 46.4-36 18.8-14.6 36.7-28.5 39.9-31l5.6-4.4-2.6-3.6c-1.5-1.9-11.1-14.3-21.3-27.5-10.2-13.2-19.4-25.2-20.5-26.6-5.3-7-84.5-109.4-119.9-154.8-7.5-9.6-13.3-17.7-13.1-18.2.3-.4 6.5-5.4 13.8-11.1 12.7-9.9 75.6-59.5 94.2-74.3 5-3.9 19.9-15.8 33.2-26.4l24.3-19.3-7.3-9.1c-4-5.1-13.2-16.6-20.3-25.7-7.2-9.1-25.5-32.4-40.8-51.8-15.3-19.3-27.9-35.2-28.1-35.2-.1 0-10.8 8.3-23.6 18.6-12.9 10.2-31.2 24.7-40.8 32.2-9.5 7.5-29.1 23-43.5 34.3l-26.1 20.6-.3-61.4-.2-61.3H0v77.5z"/></svg>

public/site.webmanifest

@@ -1,19 +0,0 @@
-{
-  "name": "Saiblog",
-  "short_name": "Saiblog",
-  "icons": [
-    {
-      "src": "/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "theme_color": "#5c5c5c",
-  "background_color": "#5c5c5c",
-  "display": "standalone"
-}

src/components/BaseHead.astro

@@ -11,19 +11,15 @@ export interface Props {
   image?: string
 }
 
-const { title, description, image = '/android-chrome-192x192.png' } = Astro.props
+const { title, description } = Astro.props
 ---
 
 <!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-<link rel="manifest" href="/site.webmanifest" />
-<link rel="mask-icon" href="safari-pinned-tab.svg" color="" />
-<link rel="shortcut icon" href="favicon.ico" />
+
+<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤖</text></svg>">
+
 <meta name="generator" content={Astro.generator} />
 
 <!-- Primary Meta Tags -->
@@ -36,13 +32,13 @@ const { title, description, image = '/android-chrome-192x192.png' } = Astro.prop
 <meta property="og:url" content={Astro.url} />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
-<meta property="og:image" content={new URL(image, Astro.url)} />
+<!-- <meta property="og:image" content={new URL(image, Astro.url)} /> -->
 
 <!-- Twitter -->
 <meta property="twitter:card" content="summary_large_image" />
 <meta property="twitter:url" content={Astro.url} />
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
-<meta property="twitter:image" content={new URL(image, Astro.url)} />
+<!-- <meta property="twitter:image" content={new URL(image, Astro.url)} /> -->
 
 <ViewTransitions />

src/components/Header.astro

@@ -8,15 +8,17 @@ import { SITE_TITLE } from '../config'
 
 <header class="mt-8">
 
-  <nav class="gap-2 flex items-center">
+  <nav class="gap-4 lg:gap-2 flex lg:flex-row flex-col items-center">
     <h2 class="text-3xl text-white font-semibold mr-4">
       {SITE_TITLE}
     </h2>
 
+    <div>
       <HeaderLink href="/">Home</HeaderLink>
       <HeaderLink href="/posts">Posts</HeaderLink>
+    </div>
 
-    <div class="ml-auto space-x-2">
+    <div class="lg:ml-auto space-x-4 mt-2 lg:mt-0">
       <a
         class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300"
         href="https://flausch.social/@saibotk"

src/pages/posts.astro

@@ -14,10 +14,10 @@ const posts = rawPosts
     <ul class="space-y-6">
       {
         posts.map((post) => (
-          <li class="flex items-baseline gap-8">
+          <li class="flex items-baseline gap-2 lg:gap-8">
             <time
               datetime={post.frontmatter.pubDate}
-              class="w-32 italic text-zinc-200 underline underline-offset-3"
+              class="w-32 flex-none italic text-zinc-200 underline underline-offset-3"
             >
               {new Date(post.frontmatter.pubDate).toLocaleDateString('en-us', {
                 year: 'numeric',
@@ -25,7 +25,7 @@ const posts = rawPosts
                 day: 'numeric',
               })}
             </time>
-            <a class="hover:scale-[1.02] transition duration-150 active:scale-[0.98] active:text-pink-300 text-2xl" href={post.url}>
+            <a class="hover:scale-[1.02] transition duration-150 active:scale-[0.98] active:text-pink-300 text-xl lg:text-2xl" href={post.url}>
               {post.frontmatter.title}
             </a>
           </li>

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

@@ -0,0 +1,232 @@
+---
+layout: "@layouts/BlogPost.astro"
+title: "My PhpStorm configuration for Laravel and Vue"
+description: "In this post I will present my setup of PhpStorm for a Laravel + Vue environment with static code analysis via Pint, phpstan and eslint with prettier."
+pubDate: "Oct 13 2023"
+---
+
+> Ohh! A wild blog post appeared! Will this be the beginning of a ~Pokémon~ PhpStorm trainer career?
+
+## 🤔 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!
+
+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.  
+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.
+
+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.
+
+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".
+
+## 🔌 Plugins
+
+- Laravel IDEA
+- .env Files Support
+- .ignore
+- Pest PHP
+- GitHub Copilot
+- Tokyo Night Theme
+
+## ✅ Checks
+
+### PHPStan
+
+> This is a per-project setting, so you will need to do that for every project.
+
+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
+a project independant path for PHPStan and fill in `./vendor/bin/phpstan`.
+
+I honestly think JetBrains should just guess this automatically tbh.
+
+![The Quality Tools Settings screen with the PHPStan switch toggled to ON and the level adjusted to 8. Additionally the three dot button is highlighted and the path setting.](../../images/setup-phpstorm-for-laravel-and-vue/phpstan_settings.png)
+
+### Inspection severity
+
+Next up, we are going to adjust and enable some inspections for our tools.
+Just go to the `Inspections` settings screen, found in the `Editor` settings:
+
+#### ESLint Inspection
+
+![The Inspections settings with the ESLint Inspection highlighted and enabled with the checkmark.](../../images/setup-phpstorm-for-laravel-and-vue/eslint_inspection.png)
+
+#### PHPStan Inspection
+
+Now enable the PHPStan to actually notice the errors while developing. You should also make sure to check the Severity and Highlight in Editor settings to be set to `Error` or something else you prefer, to notice the issues and provide incentive to fix 'em all.
+
+![The Inspections settings with the PHPStan Inspection highlighted and enabled. Additionally the Severity and Highlighting in Editor Settings are highlighted.](../../images/setup-phpstorm-for-laravel-and-vue/phpstan_inspection.png)
+
+#### Pint Inspection
+
+Now enable the Pint Inspection too, but this time change the Severity to `No highlighting`, to avoid visual interruptions when coding and the style does not perfectly match.
+
+![The Inspections settings with the Laravel Pint Inspection highlighted, enabled and its severity set to no highlighting.](../../images/setup-phpstorm-for-laravel-and-vue/pint_inspection.png)
+
+## 🖨️ Formatting
+
+> Sadly you will need to configure those for every project...
+
+### Format on Save
+
+This one is also important, go to `Tools -> Actions on Save` and enable `Reformat code`.
+Otherwise tools like Laravel Pint won't run automatically.
+
+![The Tools Actions on Save settings screen with the Reformat code checkbox highlighted and enabled. Additionally the Files exclude option is highlighted.](../../images/setup-phpstorm-for-laravel-and-vue/format_on_save.png)
+
+Additionally, make sure to **disable formatting on all JS & Vue file types**, since this saves unnecessary changes and jarring when formatting, since they might conflict with Prettier for example.
+
+> This improve in the next PhpStorm 2023.3 release, where they fixed a bug about adjusting the code style when Prettier is detected.
+
+### Pint
+
+Next up, we also want to format our PHP code. So go to `PHP -> Quality Tools -> Laravel Pint` and set the slider to `ON`.
+
+Additionally press the 3 dots and configure the Laravel Pint path to be `./vendor/bin/pint` to make this suitable for all your projects.
+
+![The PHP Quality Tools settings screen with highlights to the ON toggle of Laravel Pint and the three dot menu to the right. Additionally the three dot menu popup is shown with a highlight to the Pint path.](../../images/setup-phpstorm-for-laravel-and-vue/pint_settings.png)
+
+### Prettier
+
+For JS files, lets setup 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,
+because it will run on all files in CI anyways and I often found myself to include 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)
+
+### ESLint
+
+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}`.
+
+Again, remember to enable the `Run on save` checkbox for the auto fix on 💾 sweetness.
+
+![The Language & Frameworks, JavaScript, Code Quality Tools, ESLint settings screen with highlights to each option mentioned above.](../../images/setup-phpstorm-for-laravel-and-vue/format_eslint.png)
+
+## 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.
+
+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.
+
+> 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
+
+You can now follow all of these steps or just donwload my codestyle xml and import it 😄  
+👉 Download the CodeStyle [here](/phpstorm/PHPCodestyleSaibotk.xml)
+
+#### Spaces
+
+Disable spaces around concatenation in `Spaces -> Around operators` and uncheck `Concatenation (.)`.
+Also enable `After type cast`, `After unary Not (!)` & `Arrow function parentheses`.
+
+![A screenshot of the unchecked concatenation option for spaces.](../../images/setup-phpstorm-for-laravel-and-vue/style_spaces.png)
+
+#### PHPDoc
+
+Change the `PHPDoc @param spaces` settings to 2.
+![A screenshot of the PHPDoc spaces options.](../../images/setup-phpstorm-for-laravel-and-vue/style_phpdoc.png)
+
+#### 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`.
+
+![A screenshot of the code conversion options.](../../images/setup-phpstorm-for-laravel-and-vue/style_code_conversion.png)
+
+#### Wrapping and Braces
+
+Go to `Wrapping and Braces`.
+
+Under `Function declaration parameters` check `New line after '('`, `Place ')' on new line`, `Keep ')' and '{' on one line` and uncheck `Align when multiline`.
+
+Set `Force Braces` to `Always` for `'if()' statement`, `for()/foreach() statements`, `'while' statement` & `'do ... while' statement`.
+
+![A screenshot of the wrapping and braces options.](../../images/setup-phpstorm-for-laravel-and-vue/style_wrapping_and_braces.png)
+
+#### Blank lines
+
+Go to `Blank lines` and set `After namespace` to `1`.
+
+![A screenshot of the blank lines options.](../../images/setup-phpstorm-for-laravel-and-vue/style_blank_lines.png)
+
+## 🎨 Theme & Custom Code Color Theme
+
+### Font
+
+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`.
+
+### 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.
+
+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)
+
+## Anti-Copilot Snoop
+
+As an additional treat, I recommend to disable GitHub Copilot for some files containing secrets, just to make sure such stuff is not transferred to GitHub.
+
+Go to `Languages & Frameworks -> GitHub Copilot` and disable `DotEnv` in the `Languages` section.
+
+![A screenshot of the GitHub Copilot settings.](../../images/setup-phpstorm-for-laravel-and-vue/disable_copilot_dotenv.png)
+
+## Other Stuff
+
+### 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 😄
+
+### Add Run Actions for Horizon etc
+
+For projects using Laravel Horizon, I can only recommend to add 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.
+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)
+
+And now enjoy a nice Horizon configuration, that is running in the background and can easily be restarted as you would also do with your `pnpm dev` etc. commands.
+
+## Final Thoughts
+
+While this is a pain to configure for every project, there is a way to set those options for all new projects within PhpStorm:
+
+![Showing the menu for new project defaults. This can be found under File->New Projects Setup->Settings for New Projects...](../../images/setup-phpstorm-for-laravel-and-vue/setup_new_projects_defaults.png)
+
+And to improve upon that, we will explore creating a little CLI tool in a future blog post to automatically enable all of those configs in an existing project.
+
+**Thank you for reading,**  
+saibotk
+
+**PS:**  
+If you found this helpful or have some thoughts, don't hesitate to message me [@saibotk@flausch.social](https://flausch.social/@saibotk)