Update astro

.gitignore

@@ -104,4 +104,7 @@ dist
 .tern-port
 
 # Vercel output directory
-.vercel
+.vercel
+
+# Astro build output
+.astro

astro.config.ts

@@ -1,5 +1,5 @@
 // https://astro.build/config
-import deno from "@astrojs/deno";
+import deno from "@deno/astro-adapter";
 import tailwind from "@astrojs/tailwind";
 import { defineConfig } from "astro/config";
 

eslint.config.mjs

@@ -1,10 +1,12 @@
-import eslintConfig from "@igorkowalczyk/eslint-config/flat";
+import eslintConfig from "@igorkowalczyk/eslint-config";
 import eslintPluginAstro from "eslint-plugin-astro";
 
 export default [
- {
-  ignores: ["dist/"],
- },
- ...eslintConfig,
+ // prettier
+ ...eslintConfig.base,
+ ...eslintConfig.node,
+ ...eslintConfig.typescript,
+ ...eslintConfig.tailwindcss,
+ ...eslintConfig.astro,
  ...eslintPluginAstro.configs["flat/recommended"],
 ];

package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
-    "preview": "deno run --allow-net --allow-read --unstable --allow-env ./dist/server/entry.mjs",
-    "format": "prettier . --write --ignore-unknown --cache --plugin=prettier-plugin-astro --plugin=prettier-plugin-tailwindcss",
+    "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs",
+    "format": "prettier . --write --ignore-unknown --cache --plugin=prettier-plugin-astro",
     "format:check": "prettier . --check --cache",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
@@ -33,19 +33,21 @@
   },
   "homepage": "https://github-views.deno.dev/",
   "dependencies": {
-    "@astrojs/deno": "5.0.1",
     "@astrojs/tailwind": "5.1.3",
+    "@deno/astro-adapter": "0.1.5",
     "@igorkowalczyk/is-browser": "5.0.4",
+    "@types/canvas-confetti": "1.6.4",
     "astro": "5.0.3",
     "badgen": "3.2.3",
     "canvas-confetti": "1.9.3",
     "mini-svg-data-uri": "1.4.4",
+    "sharp": "0.33.5",
     "tailwindcss": "3.4.16",
     "tailwindcss-text-fill": "0.2.0"
   },
   "devDependencies": {
-    "@igorkowalczyk/eslint-config": "2.2.0",
-    "@igorkowalczyk/prettier-config": "2.2.0",
+    "@igorkowalczyk/eslint-config": "3.0.0-beta.16",
+    "@igorkowalczyk/prettier-config": "3.0.0-beta.16",
     "@tailwindcss/forms": "0.5.9",
     "@typescript-eslint/eslint-plugin": "8.17.0",
     "@typescript-eslint/parser": "8.17.0",
@@ -56,5 +58,6 @@
     "prettier": "3.4.2",
     "prettier-plugin-astro": "0.14.1",
     "prettier-plugin-tailwindcss": "0.6.9"
-  }
+  },
+  "packageManager": "[email protected]"
 }

prettier.config.mjs

@@ -2,7 +2,7 @@ import config from "@igorkowalczyk/prettier-config";
 
 export default {
  ...config,
- plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+ plugins: ["prettier-plugin-astro"],
  overrides: [
   {
    files: "*.astro",

src/components/Button.astro

@@ -9,7 +9,7 @@ const { href, body } = Astro.props;
 
 <a href={href} class="group mt-2 flex w-fit rounded-md border border-transparent bg-white/10 px-4 py-2 text-sm font-medium text-white duration-200 hover:bg-white/15 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none">
  {body}
- <svg class="ml-2 mt-[2px] h-4 w-4 duration-200 group-hover:translate-x-1 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+ <svg class="ml-2 mt-[2px] size-4 duration-200 group-hover:translate-x-1 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
   <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
  </svg>
 </a>

src/components/Image.astro

@@ -6,4 +6,4 @@ export interface Props {
 const { url } = Astro.props;
 ---
 
-<img src={url} alt="Badge" class="h-auto w-auto p-2" />
+<img src={url} alt="Badge" class="size-auto p-2" />

src/components/Input.astro

@@ -2,4 +2,4 @@
 const { props } = Astro;
 ---
 
-<input class="my-2 w-full rounded-lg border-[1px] border-neutral-800 bg-transparent p-2 font-normal text-white outline-none duration-200 focus:border-neutral-700" {...props} />
+<input class="my-2 w-full rounded-lg border border-neutral-800 bg-transparent p-2 font-normal text-white outline-none duration-200 focus:border-neutral-700" {...props} />

src/database/index.ts

@@ -1,4 +1,4 @@
-import "./patch.ts";
+import "./patch";
 
 export async function IncreaseViews(username: string): Promise<number> {
  if (username === "example") return 0;

src/database/patch.ts

@@ -4,7 +4,7 @@ declare global {
  }
 }
 
-/* eslint-disable func-names,space-before-function-paren */
-export default BigInt.prototype.toJSON = function () {
+/* eslint-disable func-names */
+export default BigInt.prototype.toJSON = function() {
  return this.toString();
 };

src/layouts/Layout.astro

@@ -5,7 +5,7 @@ export interface Props {
 
 const { title } = Astro.props;
 import { Image } from "astro:assets";
-import "../styles/main.css";
+import "@/styles/main.css";
 ---
 
 <!doctype html>
@@ -39,13 +39,13 @@ import "../styles/main.css";
  </head>
  <body>
   <div class="flex min-h-screen items-center justify-center bg-background bg-repeat-round bg-grid-[rgba(255,255,255,0.05)]">
-   <div class="absolute left-0 top-0 z-10 h-full w-full bg-[radial-gradient(circle,rgba(2,0,36,0)0,rgb(16,17,16,100%))]"></div>
+   <div class="absolute left-0 top-0 z-10 size-full bg-[radial-gradient(circle,rgba(2,0,36,0)0,rgb(16,17,16,100%))]"></div>
    <div class="z-10 m-6 min-w-0 max-w-2xl overflow-hidden rounded-[10px] border border-neutral-800 bg-background-secondary font-inter text-white shadow-main md:m-12">
-    <div class="flex-none border-b border-neutral-800"><div class="flex h-8 items-center space-x-1.5 px-3"><div class="h-2.5 w-2.5 rounded-full bg-neutral-700"></div><div class="h-2.5 w-2.5 rounded-full bg-neutral-700"></div><div class="h-2.5 w-2.5 rounded-full bg-neutral-700"></div></div></div>
+    <div class="flex-none border-b border-neutral-800"><div class="flex h-8 items-center space-x-1.5 px-3"><div class="size-2.5 rounded-full bg-neutral-700"></div><div class="size-2.5 rounded-full bg-neutral-700"></div><div class="size-2.5 rounded-full bg-neutral-700"></div></div></div>
     <div class="px-6 py-3 md:px-12 md:py-6">
      <a href="https://github.com/igorkowalczyk/github-views" target="_blank" class="mx-auto flex w-fit" rel="noopener noreferrer">
       <div class="mb-4 w-24 cursor-pointer rounded-2xl border border-neutral-800 p-3 duration-200 hover:border-neutral-600 hover:bg-neutral-800">
-       <Image src="/logo.png" alt="Profile Views" class="noreplace mx-auto h-[70px] w-[70px]" width={70} height={70} loading={"eager"} />
+       <Image src="/logo.png" alt="Profile Views" class="noreplace mx-auto size-[70px]" width={70} height={70} loading={"eager"} />
       </div>
      </a>
      <slot />

src/pages/404.astro

@@ -1,8 +1,8 @@
 ---
-import Button from "../components/Button.astro";
-import Description from "../components/Description.astro";
-import Header from "../components/Header.astro";
-import Layout from "../layouts/Layout.astro";
+import Button from "@/components/Button.astro";
+import Description from "@/components/Description.astro";
+import Header from "@/components/Header.astro";
+import Layout from "@/layouts/Layout.astro";
 ---
 
 <Layout title="Profile views - create your own badges">

src/pages/api/badge/[username].ts

@@ -1,7 +1,7 @@
 import { badgen } from "badgen";
 import type { StyleOption } from "badgen";
-import { FormatNumber } from "../../../utils/FormatNumber.ts";
-import { IncreaseViews, GetViews } from "../../../database/index.ts";
+import { IncreaseViews, GetViews } from "@/database/index";
+import { FormatNumber } from "@/utils/FormatNumber";
 
 interface QueryParams {
  label?: string;
@@ -24,9 +24,9 @@ export const GET = async function GET({ params, request }: { params: { username:
 
   const badge = badgen({
    label: label || "Views",
-   labelColor: labelColor,
+   labelColor,
    status: FormatNumber(views, isValidFormat ? format! : "short"),
-   color: color,
+   color,
    style: style || "flat",
   });
 

src/pages/api/json/[username].ts

@@ -1,4 +1,4 @@
-import { GetViews } from "../../../database/index.ts";
+import { GetViews } from "@/database/index";
 
 export const GET = async function GET({ params }: { params: { username: string } }): Promise<Response> {
  try {

src/pages/index.astro

@@ -1,9 +1,9 @@
 ---
-import Description from "../components/Description.astro";
-import Header from "../components/Header.astro";
-import Image from "../components/Image.astro";
-import Input from "../components/Input.astro";
-import Layout from "../layouts/Layout.astro";
+import Description from "@/components/Description.astro";
+import Header from "@/components/Header.astro";
+import Image from "@/components/Image.astro";
+import Input from "@/components/Input.astro";
+import Layout from "@/layouts/Layout.astro";
 const url = "/api/badge/example";
 ---
 
@@ -16,7 +16,7 @@ const url = "/api/badge/example";
    <button disabled="true" id="submit" class="group rounded-md border border-transparent bg-white/10 px-4 py-2 font-inter text-sm font-medium text-white duration-200 hover:bg-white/15 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none">
     <span class="mt-[2px] inline-flex"
      >Create
-     <svg class="ml-2 mt-[2px] h-4 w-4 duration-200 group-hover:translate-x-1 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"> </path></svg></span
+     <svg class="ml-2 mt-[2px] size-4 duration-200 group-hover:translate-x-1 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"> </path></svg></span
     >
    </button>
    <canvas id="confetti" class="pointer-events-none absolute right-[-100px] top-[-120px]"> </canvas>
@@ -68,7 +68,7 @@ const url = "/api/badge/example";
    <div id="markdown" class="mb-4 hidden">
     <Description text="Copy the markdown code below and paste it anywhere you want!" />
    </div>
-   <table class="hidden border-[2px] border-white/10 p-2" id="rendered">
+   <table class="hidden border-2 border-white/10 p-2" id="rendered">
     <tbody>
      <tr>
       <td>
@@ -107,7 +107,7 @@ const url = "/api/badge/example";
     resize: true,
     useWorker: true,
    });
-   input.value.length !== 0 &&
+   if (input.value.length !== 0) {
     particles({
      particleCount: 50,
      spread: 70,
@@ -117,6 +117,7 @@ const url = "/api/badge/example";
      },
      scalar: 0.5,
     });
+   }
   });
  </script>
 

tailwind.config.js

@@ -26,8 +26,7 @@ module.exports = {
     }),
    });
   }),
-  /* eslint-disable global-require */
+
   require("@igorkowalczyk/is-browser"),
-  /* eslint-enable global-require */
  ],
 };