Add post images. Change active links to conditionally render based on props

Author: jason-roundtree

studio/package.json

@@ -24,7 +24,8 @@
     "@sanity/vision": "^1.149.0",
     "prop-types": "^15.6",
     "react": "^16.2",
-    "react-dom": "^16.2"
+    "react-dom": "^16.2",
+    "sanity-plugin-asset-source-unsplash": "^0.1.3"
   },
   "devDependencies": {}
 }

studio/sanity.json

@@ -13,7 +13,8 @@
     "@sanity/default-layout",
     "@sanity/default-login",
     "@sanity/desk-tool",
-    "@sanity/code-input"
+    "@sanity/code-input",
+    "asset-source-unsplash"
   ],
   "env": {
     "development": {

studio/schemas/post.js

@@ -44,11 +44,6 @@ export default {
             //     dateFormat: 'YYYY-MM-DD',
             // }
         },
-        {
-            title: 'Image',
-            name: 'image',
-            type: 'image'
-        },
         {
             title: 'Author',
             name: 'author',
@@ -77,6 +72,11 @@ export default {
             title: 'Slug',
             name: 'slug',
             type: 'slug',
+        },
+        {
+            title: 'Image',
+            name: 'image',
+            type: 'image'
         }
     ]
 }

studio/yarn.lock

@@ -6115,7 +6115,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@~15.7.2:
   version "15.7.2"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   dependencies:
@@ -6428,6 +6428,13 @@ react-onclickoutside@^6.7.1:
   version "6.9.0"
   resolved "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz#a54bc317ae8cf6131a5d78acea55a11067f37a1f"
 
+react-photo-gallery@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npmjs.org/react-photo-gallery/-/react-photo-gallery-8.0.0.tgz#04ff9f902a2342660e63e6817b4f010488db02b8"
+  dependencies:
+    prop-types "~15.7.2"
+    resize-observer-polyfill "^1.5.0"
+
 react-popper@^1.0.2:
   version "1.3.7"
   resolved "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
@@ -6824,6 +6831,12 @@ same-origin@^0.1.1:
   version "0.1.1"
   resolved "https://registry.npmjs.org/same-origin/-/same-origin-0.1.1.tgz#c2287d3192577df517acbbd6d1451a9c3c3914f5"
 
+sanity-plugin-asset-source-unsplash@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.npmjs.org/sanity-plugin-asset-source-unsplash/-/sanity-plugin-asset-source-unsplash-0.1.3.tgz#0c66c841322debbe7ef93e66798cbafa1216e392"
+  dependencies:
+    react-photo-gallery "^8.0.0"
+
 sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"

web/client.js

@@ -3,5 +3,5 @@ import sanityClient from '@sanity/client'
 export default sanityClient({
     projectId: '9k4z7s6m', 
     dataset: 'production', 
-    useCdn: false // `false` if you want to ensure fresh data
+    useCdn: true // `false` if you want to ensure fresh data
 })

web/colorsAndThemes.js

@@ -22,7 +22,8 @@ const themes = {
         iconAlt: 'Icon of moon for "Dark Mode" theme',
         syntax: duotoneDark,
         asideBackground: duotoneDark.plain.backgroundColor,
-        articleLinks: colors.articleLinksDark
+        articleLinks: colors.articleLinksDark,
+        listItemBgColor: colors.primaryColor
     },
     light: {
         body: colors.offWhite,
@@ -33,7 +34,8 @@ const themes = {
         iconAlt: 'Icon of sun for "Light Mode" theme',
         syntax: duotoneLight,
         asideBackground: duotoneLight.plain.backgroundColor,
-        articleLinks: colors.articleLinksLight
+        articleLinks: colors.articleLinksLight,
+        listItemBgColor: 'white'
     }
 }
 

web/components/GlobalStyles.js

@@ -58,10 +58,6 @@ export const GlobalStyles = createGlobalStyle`
         }
     }
 
-    .selectedTag.selectedTag {
-        background-color: var(--primary-darker)
-    }
-
     pre {
         font-family: 'Courier Prime', monospace;
     }

web/components/KeywordTags.js

@@ -1,28 +1,21 @@
 import styled from 'styled-components'
 import sortObjProperties from '../utils/sortObjProperties.js'
 
-// const TagsContainer = styled.div`
-//     display: flex;
-//     justify-content: center;
-//     flex-wrap: wrap;
-// `
 const TagBtn = styled.button`
     margin: 15px 0 0 15px;
-    /* padding: 7px 10px;
-    color: var(--secondary-color);
-    font-size: 1em;
-    border: none;
-    background-color: var(--primary-color);
-    font-family: 'Nanum Gothic Coding', monospace;
+    background-color: ${({ theme }) => theme.listItemBgColor};
+    color: ${({ theme }) => theme.primaryColor};
     &:hover {
-        cursor: pointer;
-        background-color: var(--primary-darker);
-    } */
+        background-color: ${({ theme }) => theme.secondaryColor};
+    }
+    ${({active, theme }) => active && `
+        background-color: ${theme.secondaryColor}
+    `}
 `
 const TagCount = styled.span`
     font-family: 'Fjalla One', sans-serif;
-    color: var(--secondary-color);
     font-size: .8em;
+    color: ${({ theme }) => theme.primaryColor};
 `
 
 function KeywordTags(props) {
@@ -31,15 +24,15 @@ function KeywordTags(props) {
 
     return (
         <div>
-            {/* this prevents `All Posts` button from rendering prior to the rest of the tag buttons */}
+            {/* this prevents the `All Posts` button from rendering prior to the rest of the tag buttons and allows me to style the background-color independently of the others */}
             {tags && (
                 <TagBtn
                     onClick={props.handleTagFilter}
                     id='clearFilter'
-                    className={
+                    active={
                         props.filteredTags.length > 0 
-                            ? ''
-                            : 'selectedTag'
+                            ? false
+                            : true
                     }
                 >
                     All Posts
@@ -52,10 +45,10 @@ function KeywordTags(props) {
                         key={tag.name}
                         id={tag._id}
                         onClick={props.handleTagFilter}
-                        className={
+                        active={
                             props.filteredTags.includes(tag._id) 
-                                ? 'selectedTag'
-                                : ''
+                                ? true
+                                : false
                         }
                     >   
                         {tag.name}

web/pages/index.js

@@ -8,13 +8,14 @@ import KeywordTags from '../components/KeywordTags'
 import sortObjProperties from '../utils/sortObjProperties.js'
 
 const ListItem = styled.li`
-    margin: 15px 0 0 15px;
+    margin: 25px 0 0 15px;
     padding: 7px 10px;
     font-size: 1.75em;
-    border: 1px solid var(--primary-darker);
+    background-color: ${({ theme }) => theme.listItemBgColor};
     &:hover {
         cursor: pointer;
         background-color: ${({ theme }) => theme.secondaryColor};
+        border: ${({ theme }) => theme.secondaryColor};
     }
 `
 const ListItemLink = styled.a`
@@ -185,6 +186,7 @@ export async function getStaticProps() {
     const posts = await client.fetch(`
         *[ _type == "post" && published ]{
             ..., 
+            "postImg": image.asset->,
             tags[]->{_id, name}
         }
     `)

web/pages/posts/[slug].js

@@ -32,10 +32,6 @@ const AsideBlock = styled.div`
     background-color: ${({ theme }) => theme.asideBackground};
     font-size: .9em;
     line-height: 1.5em;
-    /* TODO: dynamically change border and text according to theme? */
-    /* light text: rgb(178, 151, 98) */
-    /* light border: */
-    /* border-left: 1px solid var(--primary-color); */
     border: 1px solid rgba(114, 143, 203, .5);
     border-left: 2px solid rgba(114, 143, 203, .5);
     
@@ -47,7 +43,7 @@ const Pre = styled.pre`
     text-align: left;
     margin: 1em 0;
     padding: 0.5em;
-    /* TODO: is this doing anything? */
+    /* TODO: is this really doing much? */
     & .token-line {
         line-height: 1.4em;
         height: 1.3em;
@@ -93,11 +89,6 @@ const Button = styled.button`
     font-weight: bold;
     display: block; 
     margin: auto;
-    /* background-color: ${({ theme }) => theme.secondaryColor};
-    &:hover {
-        background-color: ${({ theme }) => theme.primaryColor};
-        color: ${({ theme }) => theme.secondaryColor};
-    } */
 `
 const H3 = styled.h3`
     font-size: 1.5em;
@@ -106,7 +97,11 @@ const H3 = styled.h3`
     font-family: 'Fjalla One', sans-serif;
     font-family: 'Cuprum', sans-serif;
 `
-
+const PostImg = styled.img`
+    display: block;
+    width: 100%;
+    margin: 1em 0;
+`
 function Post(props) {
     const [articleBtmPos, setArticleBtmPos] = useState(0)
     // console.log('propsPost: ', props)
@@ -134,7 +129,7 @@ function Post(props) {
             if (!section.children[i].marks) {
                 // console.log('paragraphBlock inline code')
                 blockContent.push(
-                    <InlineCodeMain>
+                    <InlineCodeMain key={section.children[i]._key}>
                         {section.children[i].str_content_inline}
                     </InlineCodeMain>
                 )
@@ -292,6 +287,10 @@ function Post(props) {
         >
             <article>
                 <h2>{props.title}</h2>
+                <PostImg 
+                    src={props.postImg.url}
+                    alt={`Image of ${props.postImg.description} by ${props.postImg.creditLine}`}
+                />
                 <PostDescription>{props.description}</PostDescription>
                 {/* // TODO: Add _updatedAt field? */}
                 <PostDate>
@@ -342,7 +341,10 @@ export async function getStaticPaths() {
 export async function getStaticProps(context) {
     const { slug } = context.params
     const post = await client.fetch(`
-        *[_type == "post" && slug.current == $slug][0]
+        *[_type == "post" && slug.current == $slug][0]{
+            ...,
+            "postImg": image.asset->,
+        }
     `, { slug } )
     return { props: post }
 }