redesigned blog (#2162)

* wip

* add blog header

* Make DataColocation narrower on very large screens

* get styles closer to designs

* Improve focus management

* Handle longer bylines

* Add hover styles

* wip

* Implement BlogCardPicture

* Use oklch

* Make it pop

* Reduce jitter

* Optimize and tweak styles

* Fade in

* Actually fade in

* Format

* temporary: add leva to let the designers pick aspectRatio

* Point Prettier to our Tailwind config

* Improve mobile styles

* Update blog layout just a bit

* Remove temporary code, the designers picked aspectRatio=4.75

* Set aspect-ratio to 4.75 and refactor out a weird selector

* Make tags on /blog links, hide featured posts on /tags/* pages

* Add a bit more space

* Update lockfile

Author: hasparus

.prettierrc

@@ -173,6 +173,7 @@ const config = {
       },
     ]
   },
+  typedRoutes: true,
 }
 
 const withBundleAnalyzer = nextBundleAnalyzer({

next.config.js

@@ -0,0 +1,32 @@
+import { dirname, resolve } from "path"
+import { fileURLToPath } from "url"
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+/**
+ * @type {import("prettier").Config}
+ */
+export default {
+  arrowParens: "avoid",
+  semi: false,
+  singleQuote: false,
+  useTabs: false,
+  tabWidth: 2,
+  overrides: [
+    {
+      files: "*.svg",
+      options: { parser: "html" },
+    },
+    {
+      files: "*.mdx",
+      options: {
+        proseWrap: "always",
+        semi: false,
+        trailingComma: "none",
+      },
+    },
+  ],
+  plugins: ["prettier-plugin-pkg", "prettier-plugin-tailwindcss"],
+  // We need this to ensure classes format the same across CI and editors.
+  tailwindConfig: resolve(__dirname, "./tailwind.config.ts"),
+}

prettier.config.mjs

@@ -0,0 +1,36 @@
+export function arrowsMoveSideways(event: React.KeyboardEvent<HTMLElement>) {
+  if (
+    event.key !== "ArrowLeft" &&
+    event.key !== "ArrowRight" &&
+    event.key !== "ArrowUp" &&
+    event.key !== "ArrowDown"
+  ) {
+    return
+  }
+
+  let repeat = 1
+
+  if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+    const vertical = event.currentTarget.dataset.vertical
+    console.log({ vertical })
+    repeat = vertical ? parseInt(vertical) : 1
+  }
+
+  let current = event.currentTarget
+  for (let i = 0; i < repeat; ++i) {
+    if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      const previousElement = current.previousElementSibling
+      if (previousElement) {
+        current = previousElement as HTMLElement
+      }
+    } else if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      const nextElement = current.nextElementSibling
+      if (nextElement) {
+        current = nextElement as HTMLElement
+      }
+    }
+  }
+
+  event.preventDefault()
+  current.focus()
+}