Merge pull request #29 from diffplug/feat/mdx-to-html

Style markdown content
diffplug · Oct 3, 2023 · ca34d82 · ca34d82
2 parents 5a50cff + c627845
commit ca34d82
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 13 deletions.
diff --git a/docs/src/components/Hero.tsx b/docs/src/components/Hero.tsx
@@ -20,10 +20,7 @@ export function Hero() {
         className={clsx([
           "flex",
           "justify-between",
-          "px-2",
           "wide-phone:block",
-          "wide-phone:px-4",
-          "wide-phone:py-2",
           "wide-phone:text-right",
         ])}
       >
@@ -33,10 +30,13 @@ export function Hero() {
             "flex",
             "flex-col",
             "justify-between",
-            "pt-1",
+            "pt-3",
             "wide-phone:p-0",
             "wide-phone:justify-center",
             "wide-phone:items-end",
+            "wide-phone:h-[70px]",
+            "tablet:h-[140px]",
+            "tablet:gap-[15px]",
           ])}
         >
           <p

diff --git a/docs/src/components/IntroText.tsx b/docs/src/components/IntroText.tsx
@@ -10,12 +10,10 @@ export function IntroText() {
         "flex-col",
         "absolute",
         "top-[529px]",
-        "px-2",
         "gap-[30px]",
         "wide-phone:top-[184px]",
         "wide-phone:items-end",
         "wide-phone:text-right",
-        "wide-phone:px-4",
         "tablet:top-[262px]",
         "tablet:gap-[40px]",
         "desktop:top-[345px]",

diff --git a/docs/src/components/Mascot.tsx b/docs/src/components/Mascot.tsx
@@ -5,7 +5,7 @@ export function Mascot() {
   const literalOffsetTop = useRef(0);
 
   useEffect(() => {
-    const literalSection = document.getElementById("selfie-is-literal")!;
+    const literalSection = document.getElementById("is-literal")!;
     literalOffsetTop.current = literalSection.offsetTop;
 
     function setScrollPosition() {

diff --git a/docs/src/components/Selfie.tsx b/docs/src/components/Selfie.tsx
@@ -0,0 +1,22 @@
+import clsx from "clsx";
+export function Selfie() {
+  return (
+    <span
+      className={clsx([
+        "inline",
+        "bg-gradient-to-r",
+        "from-blue",
+        "via-green",
+        "to-red",
+        "bg-clip-text",
+        "font-logo",
+        "text-[47px]",
+        "leading-none",
+        "text-transparent",
+        "desktop:text-[70px]",
+      ])}
+    >
+      selfie
+    </span>
+  );
+}
diff --git a/docs/src/pages/_app.tsx b/docs/src/pages/_app.tsx
@@ -1,6 +1,7 @@
 import { AppProps } from "next/app";
 import Head from "next/head";
 import { MDXProvider } from "@mdx-js/react";
+import clsx from "clsx";
 
 import * as mdxComponents from "@/components/mdx";
 
@@ -14,7 +15,18 @@ export default function App({ Component, pageProps }: AppProps) {
         <meta name="description" content={pageProps.description} />
       </Head>
       <MDXProvider components={mdxComponents}>
-        <Component {...pageProps} />
+        <div
+          className={clsx([
+            "flex",
+            "flex-col",
+            "gap-[10px]",
+            "px-2",
+            "wide-phone:px-4",
+            "wide-phone:py-2",
+          ])}
+        >
+          <Component {...pageProps} />
+        </div>
       </MDXProvider>
     </>
   );

diff --git a/docs/src/pages/index.mdx b/docs/src/pages/index.mdx
@@ -1,8 +1,9 @@
 import { Hero } from "@/components/Hero";
+import { Selfie } from "@/components/Selfie";
 
 <Hero />
 
-## selfie is literal
+## <Selfie /> is literal
 
 Sure, you could write your assertions like this.
 
@@ -59,7 +60,7 @@ public void preventCssBloat() {
 }
 ```
 
-## selfie is lensable
+## <Selfie /> is lensable
 
 Some snapshots are so big that it would be cumbersome to put them inline into your test code. So selfie helps you put them on disk.
 
@@ -95,7 +96,7 @@ H4sIAAAAAAAA/8pIzcnJVyjPL8pJUQQAlQYXAAAA
 
 TODO.
 
-## selfie is like a filesystem
+## <Selfie /> is like a filesystem
 
 Selfie's snapshot files `.ss` are incredibly simple to parse, and you can use `selfie-lib` to parse them for you if you want. You can treat them as an output deliverable of your code, and use them as an input to other tooling.
 

diff --git a/docs/src/styles/tailwind.css b/docs/src/styles/tailwind.css
@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  body {
+    @apply text-base;
+    @apply desktop:text-xl;
+  }
+
+  h2 {
+    @apply text-lg;
+    @apply desktop:text-2xl;
+  }
+}
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
@@ -44,9 +44,39 @@ module.exports = {
       sans: "'Jost', sans-serif",
       logo: "'Bagel Fat One', cursive",
     },
+    fontSize: {
+      base: [
+        "22px",
+        {
+          lineHeight: "1.2em",
+          fontWeight: 400,
+        },
+      ],
+      lg: [
+        "30px",
+        {
+          lineHeight: "1.25em",
+          fontWeight: 400,
+        },
+      ],
+      xl: [
+        "34px",
+        {
+          lineHeight: "1.2em",
+          fontWeight: 400,
+        },
+      ],
+      "2xl": [
+        "45px",
+        {
+          lineHeight: "1.25em",
+          fontWeight: 400,
+        },
+      ],
+    },
     screens: {
-      "wide-phone": "600px",
-      tablet: "800px",
+      "wide-phone": "605px",
+      tablet: "725px",
       desktop: "1159px",
       xl: "1300px",
     },