[WIP] Add randomized gradients implementation

app/writeups/WriteupTemplate.tsx

@@ -0,0 +1,32 @@
+import LinkIcon from "~/components/LinkIcon";
+
+export default function WriteupTemplate(
+	{ children, title, tags, href, href_name }: { children: React.ReactNode, title: string, tags: string[], href?: string, href_name?: string }
+) {
+	return (
+		<div>
+			<div
+				className="w-full mb-14"
+				// TODO randomized gradients
+				style={{ background: "linear-gradient(115deg,#3c7161 7%, #243e38 40%, rgba(28, 28, 30, 1) 66%)" }}
+			>
+				<div className="max-w-[65ch] mx-auto pt-14 pb-8">
+					<h1 className="font-medium text-6xl mb-6">{title}</h1>
+					<div className="flex flex-row items-center gap-x-4">
+						{
+							href && href_name && <LinkIcon href={href} name={href_name} />
+						}
+						{
+							tags.map((tag) => (
+								<span className="inline-block rounded-full px-3 py-2 bg-white/20 text-sm border border-white" key={tag}>
+									{tag}
+								</span>
+							))
+						}
+					</div>
+				</div>
+			</div>
+			{children}
+		</div>
+	);
+}

app/writeups/cf/1071/page.tsx

@@ -0,0 +1,11 @@
+import WriteupTemplate from "../../WriteupTemplate";
+
+export default function Round1071() {
+	return (
+		<WriteupTemplate title="Codeforces Round #1071" tags={[]} href="https://codeforces.com/contest/1071" href_name="Codeforces Round #1071">
+			<article className="prose dark:prose-invert mx-auto">
+				<h2>Problem A</h2>
+			</article>
+		</WriteupTemplate>
+	);
+}

app/writeups/lc/312/page.tsx

@@ -1,8 +1,7 @@
 "use client";
 import ReactKatex from "@pkasila/react-katex";
 import ShikiHighlighter from "react-shiki";
-import LinkIcon from "~/components/LinkIcon";
-
+import WriteupTemplate from "../../WriteupTemplate";
 
 const SOLN = String.raw`class Solution:
 	def maxCoins(self, nums: List[int]) -> int:
@@ -29,19 +28,7 @@ const SOLN = String.raw`class Solution:
 
 export default function LC312() {
 	return (
-		<div>
-			<div
-				className="w-full mb-14"
-				style={{ background: "linear-gradient(115deg,#3c7161 7%, #243e38 40%, rgba(28, 28, 30, 1) 66%)" }}
-			>
-				<div className="max-w-[65ch] mx-auto pt-14 pb-8">
-					<h1 className="font-medium text-6xl mb-6">Burst Balloons</h1>
-					<div className="flex flex-row items-center gap-x-4">
-						<LinkIcon href="https://leetcode.com/problems/burst-balloons/" name="LeetCode 312" />
-						<span className="inline-block rounded-full px-3 py-2 bg-white/20 text-sm border border-white">DP</span>
-					</div>
-				</div>
-			</div>
+		<WriteupTemplate title="Burst Balloons" tags={["DP"]} href="https://leetcode.com/problems/burst-balloons/" href_name="LeetCode 312">
 			<article className="prose dark:prose-invert mx-auto">
 
 				<p>
@@ -141,6 +128,6 @@ export default function LC312() {
 			<ShikiHighlighter language="python" theme="one-dark-pro" showLineNumbers startingLineNumber={1} className="mx-auto mt-6 container">
 				{SOLN}
 			</ShikiHighlighter>
-		</div>
+		</WriteupTemplate>
 	);
 }

app/writeups/page.tsx

@@ -2,15 +2,15 @@ import Link from "next/link";
 import { ReactNode } from "react";
 
 function WriteupLink({ children, link }: { children: ReactNode, link: string }) {
-	return <Link href={`/writeups/${link}`}>{children}</Link>
+	return <Link href={`/writeups${link}`}>{children}</Link>
 }
 
 export default function Writeups() {
 	return (
 		<div>
 			<h1>Codeforces</h1>
 			<ul className="list-disc list-inside">
-				<li></li>
+				<li><WriteupLink link="/cf/1071">Round #1071</WriteupLink></li>
 			</ul>
 			<h1>LeetCode</h1>
 			<ul className="list-disc list-inside">

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,17 +15,27 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
-      "~/*": ["./*"]
+      "~/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }