DB messed up

.editorconfig

@@ -1,11 +1,11 @@
-# editorconfig.org
-root = true
+[*.{ts,tsx}]
+indent_size = 2
+indent_style = space
+trim_trailing_whitespace = true
+max_line_length = 80
 
-[*]
-charset = utf-8
-end_of_line = lf
+[*.{md, mdx}]
 indent_size = 2
 indent_style = space
-insert_final_newline = true
 trim_trailing_whitespace = true
 max_line_length = 80

.eslintrc.json

@@ -1,35 +1,11 @@
 {
-  "$schema": "https://json.schemastore.org/eslintrc",
-  "root": true,
-  "extends": [
-    "next/core-web-vitals",
-    "plugin:tailwindcss/recommended",
-    "prettier"
-  ],
-  "plugins": ["tailwindcss", "prettier"],
+  "extends": ["next/core-web-vitals", "prettier"],
+  "plugins": ["prettier"],
   "rules": {
-    "@next/next/no-html-link-for-pages": "off",
-    "react/jsx-key": "off",
-    "tailwindcss/no-custom-classname": "off",
-    "tailwindcss/classnames-order": "error",
     "import/no-unresolved": [2],
     "prettier/prettier": ["error"],
     "react-hooks/exhaustive-deps": ["off"],
-    "indent": "off"
-  },
-  "settings": {
-    "tailwindcss": {
-      "callees": ["cn"],
-      "config": "tailwind.config.js"
-    },
-    "next": {
-      "rootDir": true
-    }
-  },
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx"],
-      "parser": "@typescript-eslint/parser"
-    }
-  ]
+    "indent": "off",
+    "semi": ["error", "never"]
+  }
 }

.vscode/settings.json

@@ -2,8 +2,10 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "prettier.tabWidth": 4,
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
   "editor.formatOnSaveMode": "modificationsIfAvailable",
-  "editor.formatOnPaste": false,
-  "prettier.requireConfig": true
+  "editor.formatOnPaste": true,
+  "prettier.requireConfig": true,
+  "prettier.semi": false,
+  "prettier.configPath": "prettier.config.js"
 }

app/blog/[slug]/page.tsx

@@ -1,18 +1,16 @@
 import "@/styles/mdx.css"
-
 import { createHash } from "crypto"
-import { Suspense } from "react"
-import { headers } from "next/headers"
+import { getPost, getSeries } from "@/lib/content"
+import { getAllViewsCount, getLikes } from "@/lib/db"
 import { LikeButton } from "@/ui/like-button"
 import CustomMDXComponents from "@/ui/mdx"
 import { TableOfContents } from "@/ui/post/table-of-contents"
 import { Series } from "@/ui/series"
 import { ViewCounter } from "@/ui/view-counter"
 import moment from "moment"
 import { getMDXComponent } from "next-contentlayer/hooks"
-
-import { getPost, getSeries } from "@/lib/content"
-import { getAllLikesCount, getAllViewsCount, getLikes } from "@/lib/db"
+import { headers } from "next/headers"
+import { Suspense } from "react"
 
 export async function generateMetadata({ params }) {
   const post = await getPost(params.slug)

app/page.tsx

@@ -1,8 +1,7 @@
-import { Suspense } from "react"
-import { Metadata } from "next"
 import Link from "@/ui/link/link"
 import { TopPosts } from "@/ui/post/top-posts"
 import { ArrowRightIcon } from "@heroicons/react/24/solid"
+import { Metadata } from "next"
 
 export const metadata: Metadata = {
   title: "Home | Yash Agarwal",

env.mjs

@@ -4,13 +4,19 @@ import { z } from "zod"
 export const env = createEnv({
   server: {
     DATABASE_URL: z.string().min(1),
+    DB_HOSTNAME: z.string().min(1),
+    DB_USERNAME: z.string().min(1),
+    DB_PASSWORD: z.string().min(1),
     IP_ADDRESS_SALT: z.string().min(16),
   },
   client: {
     NEXT_PUBLIC_APP_URL: z.string().min(1),
   },
   runtimeEnv: {
     DATABASE_URL: process.env.DATABASE_URL,
+    DB_HOSTNAME: process.env.DB_HOSTNAME,
+    DB_USERNAME: process.env.DB_USERNAME,
+    DB_PASSWORD: process.env.DB_PASSWORD,
     NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
     IP_ADDRESS_SALT: process.env.IP_ADDRESS_SALT,
   },

lib/db.ts

@@ -1,21 +1,18 @@
-import { cache } from "react"
 import { allPosts, Post } from "contentlayer/generated"
 import { Kysely } from "kysely"
 import { PlanetScaleDialect } from "kysely-planetscale"
-
+import { cache } from "react"
 import { DB } from "./db_types"
 
 export const db = new Kysely<DB>({
   dialect: new PlanetScaleDialect({
-    url: process.env.DATABASE_URL,
+    host: process.env.DB_HOSTNAME,
+    username: process.env.DB_USERNAME,
+    password: process.env.DB_PASSWORD,
   }),
 })
 
 export const getBlogViews = cache(async () => {
-  if (!process.env.DATABASE_URL) {
-    return 0
-  }
-
   const data = await db.selectFrom("Stats").select(["views"]).execute()
 
   return data.reduce((acc, curr) => acc + Number(curr.views), 0)

next.config.js

@@ -7,7 +7,6 @@ const nextConfig = {
   experimental: {
     appDir: true,
     serverActions: true,
-    esmExternals: true,
     serverComponentsExternalPackages: [],
   },
 }

prettier.config.js

@@ -1,37 +1,12 @@
 /** @type {import('prettier').Config} */
 module.exports = {
-  endOfLine: "lf",
+  arrowParens: "always",
   semi: false,
-  singleQuote: false,
-  tabWidth: 2,
   trailingComma: "all",
-  arrowParens: "always",
   proseWrap: "always",
+  tabWidth: 2,
+  requireConfig: true,
   useTabs: false,
   bracketSpacing: true,
   jsxBracketSameLine: false,
-  importOrder: [
-    "^(react/(.*)$)|^(react$)",
-    "^(next/(.*)$)|^(next$)",
-    "<THIRD_PARTY_MODULES>",
-    "",
-    "^types$",
-    "^@/env(.*)$",
-    "^@/types/(.*)$",
-    "^@/config/(.*)$",
-    "^@/lib/(.*)$",
-    "^@/components/ui/(.*)$",
-    "^@/components/(.*)$",
-    "^@/styles/(.*)$",
-    "^@/app/(.*)$",
-    "",
-    "^[./]",
-  ],
-  importOrderSeparation: false,
-  importOrderSortSpecifiers: true,
-  importOrderBuiltinModulesToTop: true,
-  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
-  importOrderMergeDuplicateImports: true,
-  importOrderCombineTypeAndValueImports: true,
-  plugins: ["@ianvs/prettier-plugin-sort-imports"],
 }

tsconfig.json

@@ -17,8 +17,14 @@
     "incremental": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"],
-      "contentlayer/generated": ["./.contentlayer/generated"]
+      "@/ui/*": ["./ui/*"],
+      "@/lib/*": ["./lib/*"],
+      "@/public/*": ["./public/*"],
+      "@/styles/*": ["./styles/*"],
+      "@/types": ["./types"],
+      "@/container/*": ["./container/*"],
+      "contentlayer/generated": ["./.contentlayer/generated"],
+      "@/content/*": ["./content/*"]
     },
     "plugins": [
       {

ui/view-counter.tsx

@@ -1,9 +1,7 @@
 "use client"
 
-import { Suspense, useEffect } from "react"
-
 import { incrementSlugMetrics } from "@/lib/db"
-
+import { Suspense, useEffect } from "react"
 import { LoadingDots } from "./loading"
 import { Metric } from "./metrics/metric"