sizing improvements

hackclub · Oct 1, 2024 · 2b2fd3a · 2b2fd3a
1 parent a6d236b
commit 2b2fd3a
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 28 deletions.
diff --git a/components/Header.js b/components/Header.js
@@ -11,15 +11,19 @@ function UnstyledLink({ children, ...props }) {
 export default function Header({ concise }) {
     return (
         <Box as="header" sx={{ bg: 'sheet', color: 'text' }} id="top">
-            <Container variant="wide" sx={concise ? { pt: 4, pb: 2 } : { pt: 5, pb: [3, 4] }}>
+            <Container variant="wide" sx={concise ? { pt: 4, pb: 2, display: "flex", justifyContent: "center" } : { pt: 5, pb: [3, 4] }}>
 
                 <Box sx={{
                     display: "flex",
                     justifyContent: "flex-start",
                     alignItems: "flex-start",
                     flexDirection: "row",
                     mb: 4,
-                    gap: 3
+                    gap: 3,
+                    ...(concise ? {
+                        width: "100%",
+                        maxWidth: "800px",
+                    } : {})
                 }}>
                     <Link href="/">
                         <Image src="https://assets.hackclub.com/hcb-light.svg" alt="HCB Logo" sx={{

diff --git a/components/Post.js b/components/Post.js
@@ -111,7 +111,7 @@ function PostContent({ children, meta, skipAuthor }) {
     )
 }
 
-function Post({ children, meta, skipAuthor }) {
+export function Post({ children, meta, skipAuthor }) {
 
 
     return (
@@ -121,7 +121,7 @@ function Post({ children, meta, skipAuthor }) {
     );
 }
 
-function Preview ({ children, skipLink }) {
+export function Preview ({ children, skipLink }) {
     const meta = useContext(PostContext);
 
     return (
@@ -137,7 +137,4 @@ function Preview ({ children, skipLink }) {
     );
 }
 
-Post.Preview = Preview;
-
-export { Post };
 export default Post;
diff --git a/content/index.js b/content/index.js
@@ -1,9 +1,30 @@
 import * as rawPosts from "./posts/posts.js";
 import authors from "./authors/authors.js";
+import { Heading, Link, Text } from "theme-ui";
+import theme from '@hackclub/theme'
 
-const posts = Object.entries(rawPosts).map(([_, { meta, default: component }]) => ({
+const posts = Object.entries(rawPosts).map(([_, { meta, default: rawComponent }]) => ({
     meta,
-    component
+    rawComponent,
+    component: props => {
+        const Component = rawComponent;
+        return <Component components={{
+            h1: props => {
+                return (
+                    <>
+                        <Heading variant="headline" as="h1" sx={{ fontSize: 3, mb: 0, mt: 4 }} {...props} />
+                        <hr style={{ margin: "0px", backgroundColor: theme.colors.smoke, height: "1px", border: 0 }} />
+                    </>
+                )
+            },
+            h2: props => <Heading variant="headline" as="h2" sx={{ fontSize: 2, mt: 24 }} {...props} />,
+            h3: props => <Heading variant="headline" as="h3" sx={{ fontSize: 2 }} {...props} />,
+            h4: props => <Heading variant="headline" as="h4" sx={{ fontSize: 1 }} {...props} />,
+            h5: props => <Heading variant="headline" as="h5" sx={{ fontSize: 1, fontStyle: "italic" }} {...props} />,
+            a: props => <Link {...props} />,
+            p: props => <Text mt={1} as="p" {...props} />,
+        }} {...props} />;
+    }
 }));
 
 export {

diff --git a/content/posts/august-2024-newsletter/post.mdx b/content/posts/august-2024-newsletter/post.mdx
@@ -1,4 +1,4 @@
-import { Post, Author } from '@/components/Post.js'
+import { Post, Author, Preview } from '@/components/Post.js'
 import Image from 'next/image'
 
 export const meta = {
@@ -10,8 +10,7 @@ export const meta = {
 };
 
 <Post meta={meta} skipAuthor>
-
-<Post.Preview>
+<Preview>
 
 Welcome to the newly revamped HCB monthly newsletter... we got word your inbox was feeling lonely, so we're here to spice things up!
 
@@ -33,7 +32,7 @@ Need to get some where quickly in HCB? Try hitting <kbd>Ctrl</kbd> / ⌘ +
 
 From there you can navigate to all of your organizations or search HCB for a specific transaction, card, or reimbursement. Let us know what you think!
 
-</Post.Preview>
+</Preview>
 
 ## 🙏 Allow donors to cover fiscal sponsorship fees.
 
@@ -102,4 +101,4 @@ All the best,
 
 <Author id="dylan" overrideText="Dylan and The HCB Team" />
 
-</Post>
+</Post>
diff --git a/content/posts/demo/post.mdx b/content/posts/demo/post.mdx
@@ -0,0 +1,24 @@
+import Post from '@/components/Post.js'
+
+export const meta = {
+    title: "🔧 Typography & style demo",
+    slug: "demo",
+    category: "new",
+    tags: [
+        "receipts",
+    ],
+    author: "team",
+    date: new Date()
+};
+
+<Post meta={meta}>
+
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+
+This is a paragraph. It's a bit longer than the others.
+
+</Post>
diff --git a/content/posts/posts.js b/content/posts/posts.js
@@ -1,3 +1,4 @@
 // export all posts from this file
 export * as a from "./same-day-ach/post.mdx";
-export * as b from "./august-2024-newsletter/post.mdx";
+export * as b from "./august-2024-newsletter/post.mdx";
+export * as c from "./demo/post.mdx";
diff --git a/jsconfig.json b/jsconfig.json
@@ -2,9 +2,7 @@
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
-        "@/styles/*": ["styles/*"],
-        "@/content/*": ["content/*"],
-        "@/components/*": ["components/*"]
+        "@/*": ["*"],
       }
     }
   }
diff --git a/pages/index.js b/pages/index.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { posts } from "../content";
-import { Box, Card, Container, Grid, Heading, Image, Link, Text } from "theme-ui";
+import { Box, Card, Container, Flex, Grid, Heading, Image, Link, Text } from "theme-ui";
 import Header from "../components/Header";
 import Footer from "@/components/Footer";
 
@@ -22,22 +22,28 @@ export default function Home() {
             <Box as="main" sx={{ color: 'text' }} className="post-list">
                 <Container as="article" variant="wide" sx={{ pt: 3, pb: [3, 4] }}>
 
-                    <Grid columns={["1fr", "1fr", "1fr", "1fr 300px"]} gap={6}>
+                    <Flex sx={{
+                        flexDirection: ["column", "row"],
+                        justifyContent: "space-between",
+                        px: 66
+                    }} gap={6}>
                         <Box sx={{
                             display: "flex",
                             flexDirection: "column",
-                            gap: 5
+                            gap: 5,
+                            width: "100%",
+                            maxWidth: "800px",
                         }}>
                             {posts.toReversed().map((post) => (
                                 <PostPreview key={post.meta.slug} post={post} />
                             ))}
                         </Box>
 
-                        <Card as="aside" variant="sunken" sx={{ pt: 2, pb: [3, 4], width: "100%", height: "min-content", minHeight: "300px" }}>
+                        <Card as="aside" variant="sunken" sx={{ pt: 2, pb: [3, 4], width: "100%", height: "min-content", minHeight: "300px", maxWidth: "300px" }}>
                             <Heading as="h3" variant="headline" mt={0}>Filter</Heading>
                             <Text>TODO: add search and filters</Text>
                         </Card>
-                    </Grid>
+                    </Flex>
                 </Container>
 
                 <Footer />

diff --git a/pages/posts/[slug].js b/pages/posts/[slug].js
@@ -1,7 +1,7 @@
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import { posts } from "@/content/index";
-import { Box, Container, Grid } from "theme-ui";
+import { Box, Container, Flex } from "theme-ui";
 
 export default function Post({ slug }) {
     const post = posts.find(post => post.meta.slug === slug);
@@ -11,14 +11,21 @@ export default function Post({ slug }) {
         <>
             <Header concise />
             <Box as="main" sx={{ color: 'text' }}>
-                <Container as="article" variant="wide" sx={{ pt: 3, pb: [3, 4] }}>
+                <Container as="article" variant="wide" sx={{ pt: 3, pb: [3, 4], minHeight: "calc(100vh - 200px)" }}>
 
-                    <Grid columns={["1fr"]} gap={6}>
-                        <Box>
+                    <Flex sx={{
+                        flexDirection: ["column", "row"],
+                        justifyContent: "center",
+                    }} gap={6}>
+                        <Box sx={{
+                            width: "100%",
+                            maxWidth: "800px",
+
+                        }}>
                             <PostBody />
                         </Box>
 
-                    </Grid>
+                    </Flex>
                 </Container>
             </Box>
             <Footer />