Preview

packages/www/components/Footer/index.tsx

@@ -10,6 +10,7 @@ const Footer = () => {
         justify="center"
         gap={5}
         css={{
+          py: "$5",
           flexDirection: "column",
           "@bp2": {
             flexDirection: "row",

packages/www/components/Site/Hero/index.tsx

@@ -23,7 +23,6 @@ const Hero = ({
   ctas = [],
   backgroundColor = "inherit",
 }) => {
-  console.log(ctas);
   return (
     <Box css={{ position: "relative", bc: backgroundColor }}>
       <Guides backgroundColor={backgroundColor} />

packages/www/components/Site/SplitImage/index.tsx

@@ -1,7 +1,6 @@
 import { urlFor } from "../../../lib/client";
-import { Box as LiveBox } from "@livepeer/design-system";
+import { Box } from "@livepeer/design-system";
 import { PortableText } from "@portabletext/react";
-import { Container, Box } from "@theme-ui/components";
 import Image from "next/image";
 
 export default function SplitImage({
@@ -10,85 +9,36 @@ export default function SplitImage({
   defaultImage,
   portableText,
 }) {
-  const { image } = defaultImage;
   return (
-    <Container>
+    <Box
+      css={{
+        display: "grid",
+        alignItems: "center",
+        gridTemplateColumns: "1fr",
+        mx: "auto",
+        gap: 80,
+        mb: "$8",
+        "@bp2": {
+          gap: 140,
+          gridTemplateColumns: "1fr 1fr",
+        },
+      }}>
+      <img
+        src={urlFor(defaultImage).url()}
+        alt={title}
+        style={{ objectFit: "contain", width: "100%", height: "100%" }}
+      />
       <Box
-        sx={{
-          display: "grid",
-          gridTemplateColumns: ["1fr", "1fr 1fr"],
-          gridAutoFlow: "dense",
-          padding: "15px",
-          gap: "20px",
-          maxWidth: "1600px",
-          marginLeft: "auto",
-          marginRight: "auto",
+        css={{
+          borderRadius: "12px",
+          gridColumn: "unset",
+          gridRow: 1,
+          "@bp2": {
+            order: inverted ? 1 : 1,
+          },
         }}>
-        <Box
-          sx={{
-            background: "#D4D4D4",
-            color: "#000116",
-            borderRadius: "12px",
-            overflow: "hidden",
-            position: "relative",
-            minHeight: ["320px", "440px"],
-          }}>
-          {defaultImage.asset && (
-            <Image
-              src={urlFor(defaultImage).url()}
-              alt={title ?? "asdad"}
-              placeholder="blur"
-              blurDataURL={urlFor(defaultImage)
-                .width(24)
-                .height(24)
-                .blur(10)
-                .url()}
-              objectFit="cover"
-              layout="fill"
-            />
-          )}
-          {/* <img
-            src={defaultImage.asset.url}
-            alt={title}
-            style={{ objectFit: "cover", width: "100%", height: "100%" }}
-          /> */}
-        </Box>
-        <Box
-          sx={{
-            background: "white",
-            color: "#000116",
-            borderRadius: "12px",
-            paddingX: "32px",
-            paddingTop: "32px",
-            gridColumn: inverted ? ["unset", 1] : ["unset", 2],
-            gridRow: 1,
-            minHeight: ["320px", "440px"],
-          }}>
-          <LiveBox
-            css={{
-              fontSize: 32,
-              fontWeight: 600,
-              lineHeight: 1,
-              mb: 32,
-              letterSpacing: "0px",
-              "@bp1": {
-                fontSize: 40,
-                letterSpacing: "-1px",
-              },
-              "@bp2": {
-                fontSize: 50,
-                letterSpacing: "-2px",
-              },
-              "@bp3": {
-                fontSize: 58,
-                letterSpacing: "-4px",
-              },
-            }}>
-            {title}
-          </LiveBox>
-          {portableText && <PortableText value={portableText} />}
-        </Box>
+        {portableText && <PortableText value={portableText} />}
       </Box>
-    </Container>
+    </Box>
   );
 }

packages/www/css/markdown.css

@@ -1,12 +1,12 @@
 .markdown-body {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
-  color: #24292f;
+  color: #171717;
   background-color: #ffffff;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
     sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  font-size: 16px;
-  line-height: 1.5;
+  font-size: 18px;
+  line-height: 1.7;
   word-wrap: break-word;
 }
 
@@ -118,8 +118,17 @@
   font-size: 1em;
 }
 
+.markdown-body ul::marker {
+  content: none;
+}
+
+.markdown-body ul {
+  margin-left: 0 !important;
+  padding-left: 20px;
+}
+
 .markdown-body figure {
-  margin: 1em 40px;
+  margin: 1em 0;
 }
 
 .markdown-body hr {
@@ -252,7 +261,7 @@
 .markdown-body h5,
 .markdown-body h6 {
   margin-top: 24px;
-  margin-bottom: 16px;
+  margin-bottom: 24px;
   font-weight: 600;
   line-height: 1.25;
 }
@@ -266,7 +275,7 @@
 
 .markdown-body h3 {
   font-weight: 600;
-  font-size: 1.25em;
+  font-size: 1.5em;
 }
 
 .markdown-body h4 {
@@ -287,7 +296,7 @@
 
 .markdown-body p {
   margin-top: 0;
-  margin-bottom: 10px;
+  margin-bottom: 48px;
 }
 
 .markdown-body blockquote {
@@ -543,7 +552,7 @@
 .markdown-body pre,
 .markdown-body details {
   margin-top: 0;
-  margin-bottom: 16px;
+  margin-bottom: 48px;
 }
 
 .markdown-body blockquote > :first-child {
@@ -659,7 +668,7 @@
 
 .markdown-body dl dd {
   padding: 0 16px;
-  margin-bottom: 16px;
+  margin-bottom: 24px;
 }
 
 .markdown-body table th {
@@ -819,7 +828,7 @@
 }
 
 .markdown-body .highlight {
-  margin-bottom: 16px;
+  margin-bottom: 24px;
 }
 
 .markdown-body .highlight pre {

packages/www/lib/client.tsx

@@ -6,7 +6,7 @@ const options = {
   dataset: "production",
   projectId: "dp4k3mpw",
   useCdn: process.env.NODE_ENV === "production",
-  // token: process.env.SANITY_API_TOKEN,
+  token: process.env.SANITY_API_TOKEN,
 };
 
 if (process.env.NODE_ENV === "development") {

packages/www/lib/utils/index.tsx

@@ -82,7 +82,7 @@ export function getMaxLines(element: HTMLElement, height: number) {
 export function blocksToText(blocks, opts = {}) {
   const options = Object.assign({}, { nonTextBehavior: "remove" }, opts);
   return blocks
-    .map((block) => {
+    ?.map((block) => {
       if (block._type !== "block" || !block.children) {
         return options.nonTextBehavior === "remove"
           ? ""

packages/www/pages/[slug].tsx

@@ -18,7 +18,6 @@ const Page = ({
 }) => {
   const router = useRouter();
   const builder = imageUrlBuilder(client as any);
-  console.log(title, content);
   if (router.isFallback) {
     return (
       <Layout>

packages/www/pages/blog/[slug].tsx

@@ -74,7 +74,7 @@ const Post = ({
   excerpt,
   noindex = false,
   preview,
-  content,
+  contentRaw,
   furtherReading,
   metaTitle,
   metaDescription,
@@ -89,8 +89,8 @@ const Post = ({
       </Layout>
     );
   }
-  const text = blocksToText(content);
-  const stats = readingTime(text);
+  // const text = blocksToText(contentRaw);
+  // const stats = readingTime(text);
 
   return (
     <Layout
@@ -207,14 +207,14 @@ const Post = ({
               <Box
                 css={{ mx: "$2", width: "1px", height: 16, bc: "$neutral2" }}
               />
-              <Box
+              {/* <Box
                 css={{
                   textOverflow: "ellipsis",
                   overflow: "hidden",
                   whiteSpace: "nowrap",
                 }}>
                 {stats.text}
-              </Box>
+              </Box> */}
             </Flex>
             <Box
               css={{
@@ -262,7 +262,7 @@ const Post = ({
                 },
               }}>
               <BlockContent
-                blocks={content}
+                blocks={contentRaw}
                 serializers={serializers}
                 {...client.config()}
               />

packages/www/pages/blog/index.tsx

@@ -21,7 +21,6 @@ import { Blog as BlogContent } from "content";
 import { client } from "lib/client";
 
 const BlogIndex = ({ categories, posts }) => {
-  console.log(posts);
   const router = useRouter();
   const {
     query: { slug },