fix(ui): add tailwind typography

apps/marketing/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
+    "@tailwindcss/typography": "^0.5.10",
     "@turbocharger/database": "*",
     "@turbocharger/ui": "*",
     "@turbocharger/utils": "*",

apps/marketing/src/app/blog/[postSlug]/layout.tsx

@@ -14,7 +14,7 @@ const PostLayout = (props: PostLayoutProps) => {
     <div className="container max-w-4xl">
       {children}
       <CallToAction
-        className="mb-24 mt-36"
+        className="mt-32"
         logo={false}
         headline={config.cta.headline}
         subheadline={config.cta.subheadline}

apps/marketing/src/app/blog/[postSlug]/page.tsx

@@ -1,5 +1,4 @@
 import { notFound } from "next/navigation";
-import { serialize } from "next-mdx-remote/serialize";
 import { Badge } from "@turbocharger/ui";
 import { formatDate } from "@turbocharger/utils";
 import { MDX } from "@/components/mdx";
@@ -47,7 +46,9 @@ export default async function PostPage(props: PostPageProps) {
             post.metadata.keywords.map((tag) => <Badge key={tag}>{tag}</Badge>)}
         </div>
       </div>
-      <article className="mt-8">{post.content && <MDX source={post.content} />}</article>
+      <article className="prose prose-quoteless prose-neutral dark:prose-invert mt-20 max-w-full">
+        {post.content && <MDX source={post.content} />}
+      </article>
     </div>
   );
 }

apps/marketing/src/components/mdx.tsx

@@ -147,12 +147,12 @@ function createHeading(level) {
 }
 
 let components = {
-  // h1: createHeading(1),
-  // h2: createHeading(2),
-  // h3: createHeading(3),
-  // h4: createHeading(4),
-  // h5: createHeading(5),
-  // h6: createHeading(6),
+  h1: createHeading(1),
+  h2: createHeading(2),
+  h3: createHeading(3),
+  h4: createHeading(4),
+  h5: createHeading(5),
+  h6: createHeading(6),
   Image: RoundedImage,
   a: CustomLink,
   Callout,

apps/marketing/src/styles/globals.css

@@ -1,3 +1,134 @@
+:root {
+  --sh-class: #2d5e9d;
+  --sh-identifier: #354150;
+  --sh-sign: #8996a3;
+  --sh-string: #00a99a;
+  --sh-keyword: #f47067;
+  --sh-comment: #a19595;
+  --sh-jsxliterals: #6266d1;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --sh-class: #4c97f8;
+    --sh-identifier: white;
+    --sh-keyword: #f47067;
+    --sh-string: #0fa295;
+  }
+}
+
+::selection {
+  background-color: #47a3f3;
+  color: #fefefe;
+}
+
+html {
+  min-width: 360px;
+}
+
+.prose .anchor {
+  @apply absolute invisible no-underline;
+
+  margin-left: -1em;
+  padding-right: 0.5em;
+  width: 80%;
+  max-width: 700px;
+  cursor: pointer;
+}
+
+.anchor:hover {
+  @apply visible;
+}
+
+.prose a {
+  @apply transition-all decoration-neutral-400 dark:decoration-neutral-600 underline-offset-2 decoration-[0.1em];
+}
+
+.prose .anchor:after {
+  @apply text-neutral-300 dark:text-neutral-700;
+  content: '#';
+}
+
+.prose *:hover > .anchor {
+  @apply visible;
+}
+
+.prose pre {
+  @apply bg-neutral-50 dark:bg-neutral-900 rounded-lg overflow-x-auto border border-neutral-200 dark:border-neutral-900;
+}
+
+.prose code {
+  @apply px-1 py-0.5 rounded-lg;
+}
+
+.prose pre code {
+  @apply p-0;
+  border: initial;
+  line-height: 1.5;
+}
+
+.prose code span {
+  @apply font-medium;
+}
+
+.prose img {
+  /* Don't apply styles to next/image */
+  @apply m-0;
+}
+
+.prose h2,
+h3,
+h4 {
+  @apply font-medium tracking-tighter !important;
+}
+
+.prose strong {
+  @apply font-medium;
+}
+
+.prose > :first-child {
+  /* Override removing top margin, causing layout shift */
+  margin-top: 1.25em !important;
+  margin-bottom: 1.25em !important;
+}
+
+pre::-webkit-scrollbar {
+  display: none;
+}
+
+pre {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+/* Remove Safari input shadow on mobile */
+input[type='text'],
+input[type='email'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.prose .tweet a {
+  text-decoration: inherit;
+  font-weight: 500;
+}
+
+table {
+  display: block;
+  max-width: fit-content;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.prose .callout > p {
+  margin: 0 !important;
+}
+
+.title {
+  text-wrap: balance;
+}
+
 .word-animation {
   color: transparent;
   -webkit-text-fill-color: transparent;

apps/marketing/tailwind.config.ts

@@ -2,16 +2,9 @@
 import type { Config } from "tailwindcss";
 import sharedConfig from "@turbocharger/tailwind-config/tailwind.config.ts";
 
-const config: Pick<Config, "presets"> = {
-  presets: [
-    {
-      ...sharedConfig,
-      content: [
-        "./**/*.{js,ts,jsx,tsx}",
-        "../../packages/ui/src/**/*{.js,.ts,.jsx,.tsx}",
-      ],
-    },
-  ],
+const config: Pick<Config, "content" | "presets"> = {
+  content: ["./**/*.{js,ts,jsx,tsx}", "../../packages/ui/src/**/*{.js,.ts,.jsx,.tsx}"],
+  presets: [sharedConfig],
 };
 
 export default config;

packages/tailwind-config/package.json

@@ -8,6 +8,7 @@
   "types": "index.ts",
   "devDependencies": {
     "tailwindcss": "^3.2.4",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "@tailwindcss/typography": "^0.5.10"
   }
 }

packages/tailwind-config/tailwind.config.ts

@@ -19,6 +19,14 @@ const config: Config = {
         "2xl": "1400px",
       },
     },
+    typography: {
+      quoteless: {
+        css: {
+          "blockquote p:first-of-type::before": { content: "none" },
+          "blockquote p:first-of-type::after": { content: "none" },
+        },
+      },
+    },
     extend: {
       colors: {
         border: "hsl(var(--border))",
@@ -83,6 +91,6 @@ const config: Config = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 };
 export default config;

packages/ui/src/components/loading-dots/loading-dots.module.css

@@ -37,4 +37,4 @@
   100% {
     opacity: 0.2;
   }
-}
+}

yarn.lock

@@ -1855,6 +1855,16 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tailwindcss/typography@^0.5.10":
+  version "0.5.10"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.10.tgz#2abde4c6d5c797ab49cf47610830a301de4c1e0a"
+  integrity sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
+
 "@trivago/prettier-plugin-sort-imports@^4.3.0":
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.3.0.tgz#725f411646b3942193a37041c84e0b2116339789"
@@ -4813,6 +4823,11 @@ lodash.camelcase@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
 
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+  integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
+
 lodash.isfunction@^3.0.9:
   version "3.0.9"
   resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051"
@@ -5945,6 +5960,14 @@ postcss-nested@^6.0.1:
   dependencies:
     postcss-selector-parser "^6.0.11"
 
+[email protected]:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-selector-parser@^6.0.11:
   version "6.0.13"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"