Rearrange the post layout to put the title above the image. Set to Da…

…rk mode by default.
pbassham · Sep 3, 2024 · a6f6ca9 · a6f6ca9
1 parent 2110106
commit a6f6ca9
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -12,11 +12,11 @@ Uses Github Projects (v2) as CMS.
 
 #### Features:
 - Issue = Page or Post
-- Category Pages (using custom field in project)
+- Category Pages (using custom field in the Github project)
 - Tag Pages using github Labels
 - MDX Components
 - public editing option
-- 
+- Live updating site without a redeploy to Vercel. Just need to refresh the homepage and it checks for new issues and builds the pages.
 
 ## Instructions
 
@@ -28,7 +28,7 @@ Uses Github Projects (v2) as CMS.
 ### Github Project Configuration
 
 1. Create a Project
-2. Enter the Project Number \_\_\_
+2. Enter the Project Number \_\_\_ in the configuration file `githubCMS.config.ts`
 3. Create Custom fields (fields with no space will be used as is, if the name has a space it will turn to camelCase)
    1. Category
    2. Cover Image
@@ -57,3 +57,6 @@ Example:
   project_num: 1,
 }
 ```
+### Make a Category Page
+1. Create a new issue in the project and title it the category name (eg. Posts)
+2. Set a subtitle that will show up on the category page as a description.
diff --git a/next.config.js b/next.config.js
@@ -10,5 +10,13 @@ const NextConfig = {
   experimental: {
     appDir: false,
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**.githubusercontent.com',
+      },
+    ],
+  },
 }
 module.exports = NextConfig
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -28,9 +28,9 @@ export const Footer = (props: FlexProps) => (
         <IconButton as="a" href={`https://github.com/${config.github_account}`} target="_blank" aria-label="GitHub" icon={<FaGithub fontSize="1.25rem" />} />
         <IconButton
           as="a"
-          href={`https://twitter.com/${config.twitter_account}`}
+          href={`https://x.com/${config.twitter_account}`}
           target="_blank"
-          aria-label="Twitter"
+          aria-label="X"
           _hover={{
             background: "whiteAlpha.100",
             color: "blue.300",

diff --git a/src/components/MDXComponents.tsx b/src/components/MDXComponents.tsx
@@ -35,6 +35,7 @@ import NextLink from "next/link"
 import { HTMLChakraProps } from "@chakra-ui/system"
 import Summary from "./Summary"
 import { Hero } from "./Hero"
+// import NextImage from "next/image"
 
 const Hr = () => {
   const borderColor = mode("gray.200", "gray.600")
@@ -128,15 +129,36 @@ const Intro = (props) => {
     </Box>
   )
 }
+// import { Image, chakra  } from '@chakra-ui/react';
+// export const ChakraNextImage = (props) => {
+//   const { src, alt, ...rest } = props
+//   return (
+//     <Box position="relative" {...rest}>
+//       <NextImage
+//         objectFit="cover"
+//         // layout="fill"
+//         fill
+//         src={src}
+//         alt={alt}
+//       />
+//     </Box>
+//   )
+// }
 
 export const MDXComponents: import("mdx/types").MDXComponents | undefined = {
   h1: (props: HeadingProps): ReactElement => <H as="h1" size="xl" my="1.25rem" {...props} />,
   h2: (props: HeadingProps): ReactElement => <H as="h2" size="xl" my="1.5rem" {...props} />,
   h3: (props: HeadingProps): ReactElement => <H as="h3" size="lg" my="3rem" {...props} />,
   h4: (props: HeadingProps): ReactElement => <H as="h4" size="lg" my="3rem" {...props} />,
-  p: (props): ReactElement => <Text as="p" lineHeight="1.6" my="1.25rem" 
-  // px={10} 
-  {...props} />,
+  p: (props): ReactElement => (
+    <Text
+      as="p"
+      lineHeight="1.6"
+      my="1.25rem"
+      // px={10}
+      {...props}
+    />
+  ),
   // a: (props): ReactElement => <StylishLink {...props} />,
   a: (props): ReactElement => <NextChakraLink href={props?.href} {...props} />,
   ul: (props): ReactElement => <UnorderedList pl={4} {...props} />,
@@ -157,27 +179,21 @@ export const MDXComponents: import("mdx/types").MDXComponents | undefined = {
   hr: Hr,
   inlineCode: (props): ReactElement => <InlineCode {...props} />,
   blockquote: Blockquote,
-  img: (props): ReactElement => <Image 
-  ml={'-50vw'} 
-  // mr={'-50vw'} 
-  borderRadius='xl' 
-  // w='5xl'
-  // w={'4xl'}
-  // maxW={'5xl'}
-  // maxW={'container.sm'}
-  left='48vw'
-  // right='50vw'
-  position={'relative'}
-
-  // 
-	// margin-left: -50vw;
-	// margin-right: -50vw;
-	// max-width: 100vw;
-	// width: 100vw;
-  // left: 50%;
-	// position: relative;
-	// right: 50%;
-   {...props} />,
+  img: (props): ReactElement => (
+    <Image
+      ml={"-50vw"}
+      borderRadius="xl"
+      left="48vw"
+      // right='50vw'
+      position={"relative"}
+      // mr={'-50vw'}
+      // w='5xl'
+      // w={'4xl'}
+      // maxW={'5xl'}
+      // maxW={'container.sm'}
+      {...props}
+    />
+  ),
   // Small,
   // SideNote,
   // Asterisk,

diff --git a/src/components/PostList.tsx b/src/components/PostList.tsx
@@ -21,34 +21,26 @@ const PostList = (props: { allPosts: PostType[] }) => {
         morePosts.map((post: PostType) => {
           const { slug, category, coverImage, tags, title, subTitle, excerpt } = post
           // if (post.slug === "about") return
+          // console.log("post", post)
           return (
             // <Link href={`/${category || "posts"}/${slug}`} key={slug}>
             <Link href={`/${slug}`} key={slug}>
-              <Box pt={8} role="group">
-                {coverImage && (
-                  <Image
-                    src={coverImage}
-                    borderRadius={"md"}
-                    cursor="pointer"
-                    as={motion.img}
-                    whileHover={{ scale: 1.01 }}
-                    boxShadow="xl"
-                    //   whileTap={{ scale: 0.97 }}
-                  />
-                )}
-                <Container maxW={"90%"} px={0}>
+              <Box pt={0} role="group">
+
+                <Container maxW={"90%"} px={0} py={5}>
                   <Text
                     fontSize={"2xl"}
                     cursor={"pointer"}
                     fontWeight="bold"
                     fontFamily={"mono"}
-                    pt={10}
+                    // pt={10}
                     _groupHover={{ fontWeight: "semibold", color: "pink.500" }}
                   >
                     {title}
                   </Text>
                   <Stack 
                   // direction="row"
+
                   >
                     <Text
                       // fontSize={""}
@@ -57,26 +49,44 @@ const PostList = (props: { allPosts: PostType[] }) => {
                       //   fontWeight="bold"
                       // fontFamily={"mono"}
                       // fontStyle='italic'
-                      //   py={10}
+                        // pb={10}
                       _groupHover={{ color: "pink.500" }}
                     >
                       {subTitle}
                     </Text>
                     <Tags tags={tags} />
                   </Stack>
-                  <Text
-                    //   fontSize={""}
-                    cursor={"pointer"}
-                    //   fontWeight="bold"
-                    //   fontFamily={"mono"}
-                    pt={3}
-                    pb={10}
-                    //   _groupHover={{  color: "pink.500" }}
-                  >
-                    {excerpt}
-                  </Text>
-                  <Divider />
+
+
                 </Container>
+                {coverImage && (
+                  <Image
+                    src={coverImage}
+                    borderRadius={"md"}
+                    cursor="pointer"
+                    as={motion.img}
+                    whileHover={{ scale: 1.01 }}
+                    boxShadow="xl"
+                    paddingY={5}
+                    //   whileTap={{ scale: 0.97 }}
+                  />
+                )}
+                {excerpt && (
+                  <Container maxW={"90%"} px={0}>
+                  <Text
+                      //   fontSize={""}
+                      cursor={"pointer"}
+                      //   fontWeight="bold"
+                      //   fontFamily={"mono"}
+                      pt={3}
+                      pb={10}
+                      //   _groupHover={{  color: "pink.500" }}
+                    >
+                      {excerpt}
+                    </Text>
+                  </Container>
+                )}
+                <Divider py={5} />
               </Box>
              </Link>
           )

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -8,7 +8,7 @@ export default class Document extends NextDocument {
         <Head />
         <body>
           {/* Make Color mode to persists when you refresh the page. */}
-          <ColorModeScript />
+          <ColorModeScript initialColorMode='dark'/>
           <Main />
           <NextScript />
         </body>