Formatting

Author: reinink

src/components/code-example.tsx

@@ -1,18 +1,18 @@
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
 import {
-  transformerNotationWordHighlight,
   transformerNotationDiff,
   transformerNotationHighlight,
+  transformerNotationWordHighlight,
 } from "@shikijs/transformers";
-import { createHighlighter } from "shiki";
-import theme from "./syntax-highlighter/theme.json";
 import { clsx } from "clsx";
 import dedent from "dedent";
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
+import { createHighlighter } from "shiki";
+import theme from "./syntax-highlighter/theme.json";
 
+import { highlightClasses } from "./highlight-classes";
 import atApplyInjection from "./syntax-highlighter/at-apply.json";
 import atRulesInjection from "./syntax-highlighter/at-rules.json";
 import themeFnInjection from "./syntax-highlighter/theme-fn.json";
-import { highlightClasses } from "./highlight-classes";
 
 export function js(strings: TemplateStringsArray, ...args: any[]) {
   return { lang: "js", code: dedent(strings, ...args) };
@@ -57,7 +57,7 @@ export async function CodeExample({
 
 export function CodeExampleWrapper({ className, children }: { className?: string; children: React.ReactNode }) {
   return (
-    <div className="rounded-xl bg-gray-950 in-data-stack:mt-0 in-[figure]:-mx-1 in-[figure]:-mb-1 in-data-stack:rounded-none in-data-stack:[:first-child>&]:rounded-t-xl in-data-stack:[:last-child>&]:rounded-b-xl">
+    <div className="rounded-xl bg-gray-950 in-data-stack:mt-0 in-data-stack:rounded-none in-[figure]:-mx-1 in-[figure]:-mb-1 in-data-stack:[:first-child>&]:rounded-t-xl in-data-stack:[:last-child>&]:rounded-b-xl">
       <div
         className={clsx(
           "rounded-xl p-1 text-sm scheme-dark in-data-stack:not-first:rounded-t-none dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10",

src/components/content.tsx

@@ -1,6 +1,6 @@
+import css from "dedent";
 import { Fragment } from "react";
 import { CodeExample } from "./code-example";
-import css from "dedent";
 
 const screens = {
   sm: "small",

src/components/dynamic-viewport-example.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import React, { useState, useRef } from "react";
-import { motion, useScroll, useMotionValueEvent } from "framer-motion";
 import clsx from "clsx";
-import { Stripes } from "./stripes";
+import { motion, useMotionValueEvent, useScroll } from "framer-motion";
+import { useRef, useState } from "react";
 import { Example } from "./example";
+import { Stripes } from "./stripes";
 
 const viewport = {
   lvh: 491,

src/components/fathom.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { load, trackPageview } from "fathom-client";
-import { useEffect, Suspense } from "react";
 import { usePathname, useSearchParams } from "next/navigation";
+import { Suspense, useEffect } from "react";
 
 function TrackPageView() {
   const pathname = usePathname();

src/components/footer.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-import ThemeToggle from "./theme-toggle";
-import Link from "next/link";
 import clsx from "clsx";
+import Link from "next/link";
+import ThemeToggle from "./theme-toggle";
 
 export function FooterSitemap({ className }: { className?: string }) {
   return (

src/components/highlight.tsx

@@ -1,7 +1,7 @@
+import { Components, toJsxRuntime } from "hast-util-to-jsx-runtime";
 import { Fragment, type JSX } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createHighlighter, ShikiTransformer } from "shiki";
-import { Components, toJsxRuntime } from "hast-util-to-jsx-runtime";
 import atApplyInjection from "./syntax-highlighter/at-apply.json";
 import atRulesInjection from "./syntax-highlighter/at-rules.json";
 import themeFnInjection from "./syntax-highlighter/theme-fn.json";

src/components/home/build-anything-section.tsx

@@ -1,23 +1,23 @@
-import { BentoItem } from "./bento";
-import GridContainer from "../grid-container";
-import CategoryHeader from "./category-header";
 import Image from "next/image";
 import React from "react";
-import openai from "./build-anything-section/openai.png";
-import opal from "./build-anything-section/opal.png";
+import GridContainer from "../grid-container";
+import { BentoItem } from "./bento";
+import clerk from "./build-anything-section/clerk.png";
 import feastables from "./build-anything-section/feastables.png";
+import googleIo from "./build-anything-section/googleio.png";
 import gumroad from "./build-anything-section/gumroad.png";
-import skims from "./build-anything-section/skims.png";
+import midjourney from "./build-anything-section/midjourney.png";
+import nasa from "./build-anything-section/nasa.png";
+import opal from "./build-anything-section/opal.png";
+import openai from "./build-anything-section/openai.png";
+import poolside from "./build-anything-section/poolside.png";
 import reddit from "./build-anything-section/reddit.png";
 import rivian from "./build-anything-section/rivian.png";
 import shopify from "./build-anything-section/shopify.png";
-import clerk from "./build-anything-section/clerk.png";
-import verge from "./build-anything-section/verge.png";
-import googleIo from "./build-anything-section/googleio.png";
+import skims from "./build-anything-section/skims.png";
 import ted from "./build-anything-section/ted.png";
-import poolside from "./build-anything-section/poolside.png";
-import midjourney from "./build-anything-section/midjourney.png";
-import nasa from "./build-anything-section/nasa.png";
+import verge from "./build-anything-section/verge.png";
+import CategoryHeader from "./category-header";
 
 export default function BuildAnythingSection() {
   return (

src/components/home/explainer-section.tsx

@@ -1,21 +1,21 @@
-import React from "react";
+import clsx from "clsx";
 import type { Element, ElementContent } from "hast";
+import React from "react";
 import type { ShikiTransformer } from "shiki";
-import clsx from "clsx";
-import GridContainer from "../grid-container";
-import CategoryHeader from "./category-header";
 import { html } from "../code-example";
+import { generateCss } from "../generated-css";
+import GridContainer from "../grid-container";
+import { HighlightedCode } from "../highlight";
+import { getTextContent } from "../highlight-classes";
 import { AnchoredToBottom } from "./anchored-to-bottom";
+import CategoryHeader from "./category-header";
 import {
   EditorAnimation,
   EditorKeyframe,
   ShowOutputClassAnimation,
   TerminalAnimation,
   TypingAnimation,
 } from "./explainer/animation";
-import { HighlightedCode } from "../highlight";
-import { getTextContent } from "../highlight-classes";
-import { generateCss } from "../generated-css";
 
 export default function ExplainerSection() {
   let timeline: EditorKeyframe[] = [

src/components/home/explainer/animation.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { createContext, Fragment, useContext, useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { useInView } from "framer-motion";
+import { createContext, Fragment, useContext, useEffect, useRef, useState } from "react";
 
 export interface EditorKeyframe {
   class?: string;

src/components/home/hero.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import clsx from "clsx";
+import { motion } from "framer-motion";
+import React, { useEffect, useState } from "react";
 import GridContainer from "../grid-container";
 import { SearchButton } from "../search";
+import cover from "./cover.png";
 import { Editor } from "./editor";
 import LinkButton from "./link-button";
-import React, { useEffect, useState } from "react";
-import { motion } from "framer-motion";
-import cover from "./cover.png";
 
 const SYMBOL = { color: "var(--color-slate-400)" };
 const ELEMENT = { color: "var(--color-pink-400)" };