[misc]: Keyboard, a11y, and misc things

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+	"recommendations": [
+		"editorconfig.editorconfig",
+		"dbaeumer.vscode-eslint",
+		"github.vscode-github-actions",
+		"unifiedjs.vscode-mdx",
+		"esbenp.prettier-vscode",
+		"bradlc.vscode-tailwindcss",
+		"graphql.vscode-graphql-syntax",
+		"graphql.vscode-graphql",
+		"streetsidesoftware.code-spell-checker"
+	]
+}

.vscode/settings.json

@@ -11,5 +11,23 @@
 		"stylesheet",
 		"tailwindcss"
 	],
-	"eslint.useFlatConfig": true
+	"editor.formatOnSave": true,
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": "explicit"
+	},
+	"eslint.run": "onSave",
+	"eslint.useFlatConfig": true,
+	"eslint.codeActionsOnSave.mode": "problems",
+	"[javascript]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[javascriptreact]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[mdx]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[json]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	}
 }

mdx-components.jsx

@@ -1,26 +1,8 @@
-import slugify from "@sindresorhus/slugify";
 import Image from "next/image";
 import DocsLayout from "@/components/docs-layout";
+import Heading from "@/components/heading";
 import CustomLink from "@/components/link";
 
-// Custom heading component with clickable anchor links
-const Heading = ({ level, children, ...props }) => {
-	const Tag = `h${level}`;
-	// Ensure children are treated as a single string for slug generation
-	const textContent = Array.isArray(children)
-		? children.join("") // Join array items if children is an array
-		: children?.toString() || ""; // Convert children to string or fallback to empty
-	const id = slugify(textContent); // Generate slug from heading text
-
-	return (
-		<Tag id={id} {...props} className="group">
-			<CustomLink href={`#${id}`} className="text-blue-500 no-underline">
-				{children}
-			</CustomLink>
-		</Tag>
-	);
-};
-
 export function useMDXComponents(components) {
 	return {
 		img: ({ src }, ...props) => (

src/components/heading.jsx

@@ -0,0 +1,24 @@
+import { LinkIcon } from "@heroicons/react/24/outline";
+import Link from "./link";
+
+// Custom heading component with clickable anchor links
+export default function Heading({ level, children, id, ...props }) {
+	const Tag = `h${level}`;
+	console.log("props", props);
+	return (
+		<Tag
+			id={id.toString()}
+			className="group flex items-center hover:text-blue-500"
+			{...props}
+		>
+			<Link
+				href={`#${id}`}
+				className="no-underline transition-colors group-hover:text-blue-500"
+				noDefaultStyles
+			>
+				{children}
+				<LinkIcon className="ml-2 inline-block size-5" />
+			</Link>
+		</Tag>
+	);
+}

src/components/layout.jsx

@@ -10,7 +10,9 @@ const inter = localFont({
 
 export default function Layout({ children }) {
 	return (
-		<div className={`${inter.variable} flex min-h-screen flex-col font-inter`}>
+		<div
+			className={`${inter.variable} flex min-h-screen flex-col font-inter selection:bg-purple-700`}
+		>
 			<Header />
 			{children}
 			<Footer />

src/components/link.jsx

@@ -10,7 +10,7 @@ export default function CustomLink({
 	disableExternalIcon,
 	...props
 }) {
-	const defaultClasses = "underline text-blue-500";
+	const defaultClasses = "text-blue-500";
 
 	const calculatedClasses = classNames(
 		{ [defaultClasses]: !noDefaultStyles },

src/components/primary-menu.jsx

@@ -47,8 +47,13 @@ export default function PrimaryMenu({ className }) {
 			</ul>
 			<Menu>
 				<MenuButton className="group rounded-md px-2 py-1.5 text-white/70 hover:text-white md:hidden">
-					<span className="sr-only">Open main nav</span>
+					<span className="sr-only hidden group-data-[open]:block">
+						Open main nav
+					</span>
 					<XMarkIcon className="hidden size-6 group-data-[open]:block" />
+					<span className="sr-only group-data-[open]:hidden">
+						Open main nav
+					</span>
 					<Bars3Icon className="size-6 group-data-[open]:hidden" />
 				</MenuButton>
 				<MenuItems

src/components/search-bar.jsx

@@ -1,4 +1,4 @@
-import { MagnifyingGlassIcon } from "@heroicons/react/24/solid";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { useCombobox } from "downshift";
 import debounce from "lodash.debounce";
 import { useRouter } from "next/router";
@@ -112,6 +112,7 @@ export default function SearchBar() {
 				onClick={openModal}
 				type="button"
 			>
+				<span className="sr-only md:hidden">Open search</span>
 				<MagnifyingGlassIcon className="h-6 w-6 text-gray-400 md:hidden" />
 				<span className="hidden md:inline">
 					<span className="pl-3">Search docs...</span>

src/lib/smart-search-plugin.mjs

@@ -46,14 +46,14 @@ async function collectPages(directory) {
 
 			// Safely extract metadata using regex
 			const metadataMatch = content.match(
-				/export const metadata = ({[\S\s]+?});/,
+				/export const metadata = (?<metadata>{[\S\s]+?});/,
 			);
 			let metadata = {};
 
 			if (metadataMatch) {
 				try {
 					// eslint-disable-next-line no-eval
-					metadata = eval(`(${metadataMatch[1]})`); // Parse the metadata block
+					metadata = eval(`(${metadataMatch.metadata})`); // Parse the metadata block
 				} catch (error) {
 					console.error("Error parsing metadata:", error);
 				}

src/pages/global.css

@@ -31,6 +31,11 @@
 	* {
 		@apply outline-teal-800;
 	}
+
+	:target {
+		@apply scroll-mt-[100px] bg-teal-600/50;
+		@apply animate-bounce motion-reduce:animate-none;
+	}
 }
 
 /* Styles for code blocks */

src/pages/index.jsx

@@ -25,7 +25,7 @@ export default function Index() {
 						</p>
 						<p className="not-prose inline-flex gap-4">
 							<Link
-								className="not-prose text-gray-1000 group inline-flex items-center gap-1 rounded-full border border-blue-800/20 bg-gradient-to-tr from-blue-600/50 from-20% to-blue-900/50 px-8 py-2 text-base leading-none tracking-tight shadow-lg backdrop-blur-lg transition duration-75 hover:border-gray-100/50 hover:bg-gradient-to-tl hover:from-gray-100/70 hover:to-white/70 hover:text-gray-900 hover:backdrop-blur-xl lg:py-3"
+								className="not-prose text-gray-1000 group inline-flex items-center gap-1 rounded-full border border-blue-800/20 bg-gradient-to-tr from-blue-600/50 from-20% to-purple-900/50 px-8 py-2 text-base leading-none tracking-tight shadow-lg backdrop-blur-lg transition duration-75 hover:border-gray-100/50 hover:bg-gradient-to-tl hover:from-purple-400/80 hover:to-teal-400/80 hover:text-gray-900 hover:backdrop-blur-xl lg:py-3"
 								href="/docs/"
 								noDefaultStyles
 							>
@@ -36,7 +36,7 @@ export default function Index() {
 								/>
 							</Link>
 							<Link
-								className="not-prose group inline-flex items-center gap-1 rounded-full border border-gray-200/20 bg-gradient-to-br from-purple-600/20 from-10% to-blue-600/20 px-8 py-2 text-base leading-none tracking-tight text-gray-200 shadow-lg backdrop-blur-lg transition duration-75 hover:border-gray-100/50 hover:bg-gradient-to-tl hover:from-gray-100/70 hover:to-white/70 hover:text-gray-900 hover:backdrop-blur-xl lg:py-3"
+								className="not-prose group inline-flex items-center gap-1 rounded-full border border-gray-200/20 bg-gradient-to-br from-purple-600/20 from-10% to-blue-600/20 px-8 py-2 text-base leading-none tracking-tight text-gray-200 shadow-lg backdrop-blur-lg transition duration-75 hover:border-gray-100/50 hover:bg-gradient-to-tl hover:from-teal-400/80 hover:to-purple-400/80 hover:text-gray-900 hover:backdrop-blur-xl lg:py-3"
 								disableExternalIcon
 								href="/discord"
 								noDefaultStyles
@@ -125,7 +125,7 @@ export default function Index() {
 					</div>
 					<p className="mt-16 text-center">
 						<Link
-							className="not-prose group inline-flex items-center gap-1 rounded-full border border-gray-200/20 bg-gradient-to-br from-purple-600/20 from-10% to-blue-600/20 px-8 py-2 text-base leading-none tracking-tight text-gray-200 shadow-lg backdrop-blur-lg transition duration-75 hover:border-gray-100/50 hover:bg-gradient-to-tl hover:from-gray-100/70 hover:to-white/70 hover:text-gray-900 hover:backdrop-blur-xl lg:py-3"
+							className="not-prose group inline-flex items-center gap-1 rounded-full border border-gray-200/20 bg-gradient-to-br from-purple-600/20 from-10% to-blue-600/20 px-8 py-2 text-base leading-none tracking-tight text-gray-200 shadow-lg backdrop-blur-lg transition duration-75 hover:border-gray-100/50 hover:bg-gradient-to-tl hover:from-purple-400/80 hover:to-teal-300/80 hover:text-gray-900 hover:backdrop-blur-xl lg:py-3"
 							href="/docs/"
 							noDefaultStyles
 						>

src/pages/showcase/index.jsx

@@ -1,4 +1,4 @@
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import Image from "next/image";
 import Link from "@/components/link";
 

src/wp-templates/index-template.jsx

@@ -42,27 +42,6 @@ export default function IndexTemplate() {
 
 	const { editorBlocks } = node;
 
-	const toc = [];
-
-	if (editorBlocks) {
-		editorBlocks
-			.filter((blocks) => blocks?.attributes?.level)
-			.map((block) => {
-				if (block.attributes.level === 2 || block.attributes.level === 3) {
-					const heading = {
-						tagName: `h${block.attributes.level}`,
-						children: [
-							{
-								type: "text",
-								value: block.attributes.content,
-							},
-						],
-					};
-					toc.push(heading);
-				}
-			});
-	}
-
 	const blockList = flatListToHierarchical(editorBlocks, {
 		childrenKey: "innerBlocks",
 	});
@@ -80,7 +59,7 @@ export default function IndexTemplate() {
 
 			{node?.modified && (
 				<div className="text-sm text-gray-500" id="last-updated">
-					Last Upated:{" "}
+					Last Updated:{" "}
 					{new Date(node.modified).toLocaleDateString("en-us", {
 						weekday: "long",
 						year: "numeric",