chore: Update dependencies & astro to v3 🚀

.eslintrc.cjs

@@ -1,22 +1,22 @@
 module.exports = {
-  extends: ['@clickbar/typescript', 'plugin:astro/recommended'],
+  extends: ["@clickbar/typescript", "plugin:astro/recommended"],
   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: {
-        parser: '@typescript-eslint/parser',
+        parser: "@typescript-eslint/parser",
-        extraFileExtensions: ['.astro'],
+        extraFileExtensions: [".astro"],
       },
       rules: {
         // override/add rules settings here, such as:
         // Does not work well with typescript
-        'no-undef': 'off',
+        "no-undef": "off",
       },
     },
   ],
-}
+};

.prettierrc.cjs

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

README.md

@@ -8,7 +8,6 @@ npm create astro@latest -- --template blog
 
 > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
 
-
 ![blog](https://user-images.githubusercontent.com/4677417/186189140-4ef17aac-c3c9-4918-a8c2-ce86ba1bb394.png)
 
 Features:

astro.config.mjs

@@ -1,16 +1,15 @@
-import { defineConfig } from 'astro/config'
+import mdx from "@astrojs/mdx";
-import mdx from '@astrojs/mdx'
+import sitemap from "@astrojs/sitemap";
-import sitemap from '@astrojs/sitemap'
+import tailwind from "@astrojs/tailwind";
-
+import { defineConfig } from "astro/config";
-import tailwind from '@astrojs/tailwind'
 
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://saibotk.de',
+  site: "https://saibotk.de",
   integrations: [mdx(), sitemap(), tailwind()],
   markdown: {
     shikiConfig: {
-      theme: 'rose-pine-moon',
+      theme: "rose-pine-moon",
     },
   },
-})
+});

package.json

@@ -8,24 +8,26 @@
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
+    "prettier": "prettier . --cache",
     "lint": "eslint --ext .js,.cjs,.mjs,.ts,.cts,.mts,.tsx,.astro .",
-    "fix": "eslint --fix --ext .js,.cjs,.mjs,.ts,.cts,.mts,.tsx,.astro .",
+    "format": "pnpm prettier --write",
+    "fix": "pnpm lint --fix && pnpm format",
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^0.11.4",
+    "@astrojs/mdx": "^1.0.0",
-    "@astrojs/rss": "^1.0.2",
+    "@astrojs/rss": "^3.0.0",
-    "@astrojs/sitemap": "^1.0.0",
+    "@astrojs/sitemap": "^3.0.0",
-    "@astrojs/tailwind": "^2.1.1",
+    "@astrojs/tailwind": "^5.0.0",
-    "@clickbar/eslint-config-typescript": "^4.0.10",
+    "@clickbar/eslint-config-typescript": "^8.0.2",
-    "@fontsource/fira-code": "^4.5.12",
+    "@fontsource/fira-code": "^5.0.8",
-    "@fontsource/inter": "^4.5.14",
+    "@fontsource/inter": "^5.0.8",
-    "@tailwindcss/typography": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.9",
-    "astro": "^1.5.2",
+    "astro": "^3.0.7",
-    "eslint": "^8.26.0",
+    "eslint": "^8.48.0",
-    "eslint-plugin-astro": "^0.20.0",
+    "eslint-plugin-astro": "^0.29.0",
-    "prettier-plugin-astro": "^0.6.0",
+    "prettier-plugin-astro": "^0.12.0",
-    "tailwindcss": "^3.2.1",
+    "tailwindcss": "^3.3.3",
-    "typescript": "^4.8.4"
+    "typescript": "^5.2.2"
   }
 }

public/site.webmanifest

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

renovate.json

@@ -1,9 +1,6 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
+  "extends": ["config:base", "docker:enableMajor"],
-    "config:base",
-    "docker:enableMajor"
-  ],
   "prConcurrentLimit": 0,
   "gitLabAutomerge": true
 }

src/components/BaseHead.astro

@@ -1,6 +1,8 @@
 ---
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
+import { ViewTransitions } from 'astro:transitions'
+
 import '../styles/global.css'
 
 export interface Props {
@@ -42,3 +44,5 @@ const { title, description, image = '/android-chrome-192x192.png' } = Astro.prop
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
+
+<ViewTransitions />

src/components/Footer.astro

@@ -1,5 +1,5 @@
 ---
-import RSS from './icons/RSS.astro'
+import RSS from './icons/Rss.astro'
 
 const today = new Date()
 ---

src/components/Header.astro

@@ -1,9 +1,9 @@
 ---
-import { SITE_TITLE } from '../config'
 import HeaderLink from './HeaderLink.astro'
 import GitHub from './icons/GitHub.astro'
-import Mastodon from './icons/Mastodon.astro'
 import GitLab from './icons/GitLab.astro'
+import Mastodon from './icons/Mastodon.astro'
+import { SITE_TITLE } from '../config'
 ---
 
 <header class="mt-8">

src/config.ts

@@ -1,5 +1,5 @@
 // Place any global data in this file.
 // You can import this data from anywhere in your site by using the `import` keyword.
 
-export const SITE_TITLE = "Saibotk's blog"
+export const SITE_TITLE = "Saibotk's blog";
-export const SITE_DESCRIPTION = 'Welcome to my personal blog!'
+export const SITE_DESCRIPTION = "Welcome to my personal blog!";

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/layouts/Base.astro

@@ -1,10 +1,10 @@
 ---
-import '@fontsource/inter/variable-full.css'
 import '@fontsource/fira-code'
+import '@fontsource/inter'
 
 import BaseHead from '../components/BaseHead.astro'
-import Header from '../components/Header.astro'
 import Footer from '../components/Footer.astro'
+import Header from '../components/Header.astro'
 import { SITE_TITLE, SITE_DESCRIPTION } from '../config'
 
 export interface Props {

src/pages/rss.xml.ts

@@ -1,10 +1,13 @@
-import rss from '@astrojs/rss'
+import rss, { pagesGlobToRssItems } from "@astrojs/rss";
-import { SITE_TITLE, SITE_DESCRIPTION } from '../config'
 
-export const get = () =>
+import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
-  rss({
+
+export async function GET() {
+  return rss({
     title: SITE_TITLE,
     description: SITE_DESCRIPTION,
     site: import.meta.env.SITE,
-    items: import.meta.glob('./posts/**/*.{md,mdx}'),
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-argument
-  })
+    items: await pagesGlobToRssItems(import.meta.glob("./posts/**/*.{md,mdx}")),
+  });
+}

src/styles/global.css

@@ -1,15 +1,15 @@
 html {
-	@apply font-sans bg-zinc-900 text-zinc-300 w-full max-w-3xl mx-auto;
+  @apply font-sans bg-zinc-900 text-zinc-300 w-full max-w-3xl mx-auto;
 }
 
 .prose-custom {
-	@apply prose prose-invert max-w-full;
+  @apply prose prose-invert max-w-full;
 }
 
 .prose-custom code {
-	@apply font-code;
+  @apply font-code;
 }
 
 .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-700 p-0.5 px-1 inline rounded-sm;
 }

tailwind.config.cjs

@@ -1,16 +1,16 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const defaultTheme = require('tailwindcss/defaultTheme')
+const defaultTheme = require("tailwindcss/defaultTheme");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     extend: {
       fontFamily: {
-        sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
+        sans: ["InterVariable", ...defaultTheme.fontFamily.sans],
-        code: ['Fira Code', ...defaultTheme.fontFamily.mono],
+        code: ["Fira Code", ...defaultTheme.fontFamily.mono],
       },
     },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require("@tailwindcss/typography")],
-}
+};