[part-14/d] Added "images" list field to the "designs" collection

- Updated "designs-template" to represent new "images" field from the CMS
- Updated dummy content with random word generator samples
- Added sample images for design details
- Added another dummy design content

src/content/designs/hello-from-design-01.md

@@ -1,6 +1,19 @@
 ---
 contentKey: design
-title: hello from design 01
-description: design 01 description
-image: ../../../uploads/irene-kredenets-tcvh_bwhtrc-unsplash.jpg
+title: Humor
+description: It was the scarcity that fueled his creativity.
+featuredImage: ../../../uploads/irene-kredenets-tcvh_bwhtrc-unsplash.jpg
+images:
+  - title: Fibre
+    description: If my calculator had a history, it would be more embarrassing than my browser history.
+    image: ../../../uploads/irene-kredenets-tcvh_bwhtrc-unsplash-01.jpg
+  - title: Wording
+    description: He realized there had been several deaths on this road, but his concern rose when he saw the exact number.
+    image: ../../../uploads/irene-kredenets-tcvh_bwhtrc-unsplash-02.jpg
+  - title: Criticism
+    description: Mary plays the piano.
+    image: ../../../uploads/irene-kredenets-tcvh_bwhtrc-unsplash-03.jpg
+  - title: Pin
+    description: Nancy was proud that she ran a tight shipwreck.
+    image: ../../../uploads/irene-kredenets-tcvh_bwhtrc-unsplash-04.jpg
 ---

src/content/designs/hello-from-design-02.md

@@ -1,6 +1,19 @@
 ---
 contentKey: design
-title: hello from design 02
-description: design 02 description
-image: ../../../uploads/sarah-dorweiler-gupitdbdre4-unsplash.jpg
+title: Circulation
+description: The fact that there's a stairway to heaven and a highway to hell explains life well.
+featuredImage: ../../../uploads/sarah-dorweiler-gupitdbdre4-unsplash.jpg
+images:
+  - title: Identification
+    description: He was all business when he wore his clown suit.
+    image: ../../../uploads/sarah-dorweiler-gupitdbdre4-unsplash-01.jpg
+  - title: Elbow
+    description: I often see the time 11:11 or 12:34 on clocks.
+    image: ../../../uploads/sarah-dorweiler-gupitdbdre4-unsplash-02.jpg
+  - title: Refund
+    description: The bees decided to have a mutiny against their queen.
+    image: ../../../uploads/sarah-dorweiler-gupitdbdre4-unsplash-03.jpg
+  - title: Serve
+    description: Everything was going so well until I was accosted by a purple giraffe.
+    image: ../../../uploads/sarah-dorweiler-gupitdbdre4-unsplash-04.jpg
 ---

src/content/designs/hello-from-design-03.md

@@ -1,6 +1,19 @@
 ---
 contentKey: design
-title: hello from design 03
-description: design 03 description
-image: ../../../uploads/ali-muhamad-ht1r6z5py5i-unsplash.jpg
+title: Brag
+description: Stop waiting for exceptional things to just happen.
+featuredImage: ../../../uploads/ali-muhamad-ht1r6z5py5i-unsplash.jpg
+images:
+  - title: Accompany
+    description: He used to get confused between soldiers and shoulders, but as a military man, he now soldiers responsibility.
+    image: ../../../uploads/ali-muhamad-ht1r6z5py5i-unsplash-01.jpg
+  - title: Charismatic
+    description: The old apple revels in its authority.
+    image: ../../../uploads/ali-muhamad-ht1r6z5py5i-unsplash-02.jpg
+  - title: Shallow
+    description: Everyone says they love nature until they realize how dangerous she can be.
+    image: ../../../uploads/ali-muhamad-ht1r6z5py5i-unsplash-03.jpg
+  - title: Invisible
+    description: He had decided to accept his fate of accepting his fate.
+    image: ../../../uploads/ali-muhamad-ht1r6z5py5i-unsplash-04.jpg
 ---

src/content/designs/magnitude.md

@@ -0,0 +1,21 @@
+---
+contentKey: design
+title: Magnitude
+description: If my calculator had a history, it would be more embarrassing than
+  my browser history.
+featuredImage: ../../../uploads/junko-nakase-q-72wa9-7dg-unsplash.jpg
+images:
+  - title: Wound
+    description: As he looked out the window, he saw a clown walk by.
+    image: ../../../uploads/nimble-made-gdebknrytd4-unsplash.jpg
+  - title: Network
+    description: With the high wind warning
+    image: ../../../uploads/markus-spiske-rdzzs9f53le-unsplash.jpg
+  - title: Bush
+    description: Pink horses galloped across the sea.
+    image: ../../../uploads/tamara-bellis-avyd_iph_c4-unsplash.jpg
+  - title: Visual
+    description: You have every right to be angry, but that doesn't give you the
+      right to be mean.
+    image: ../../../uploads/paulina-milde-jachowska-bjqg5g6eans-unsplash.jpg
+---

src/pages/about.md

@@ -3,25 +3,34 @@ contentKey: page
 title: About
 description: About Page Description
 ---
-About Page Content with a **bold** text!
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum varius finibus. Suspendisse aliquam feugiat gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla et enim rhoncus, consectetur ipsum id, fermentum purus. Pellentesque sollicitudin sapien turpis, et dignissim sapien commodo non.
+Samantha wanted to be famous. The problem was that she had never considered all the downsides to actually being famous. **All you need to do is** pick up the pen and begin. The sunblock was handed to the girl before practice, but the burned skin was proof she did not apply it. There was coal in his stocking and he was thrilled.
+
+Had she taken the time to objectively consider these downsides, she would have never agreed to publically sing that first song.
 
 ![Please always fill the alternative text attributes!](../../uploads/priscilla-du-preez-dlxlgiy-2vu-unsplash.jpg "Hola 'gatsby-remark-images' plugin!")
 
-Nulla pellentesque nisi nec sem faucibus, nec auctor nisi ullamcorper. Donec a lacinia velit. Aliquam erat volutpat. Nulla placerat orci molestie lectus porta, aliquet consequat nisi rhoncus. Nunc consequat consequat odio. Sed ultrices justo vitae velit lobortis, a ornare libero tincidunt. Donec a justo diam. Proin eu ullamcorper sem, non fermentum augue. Etiam sed ante sit amet urna elementum fringilla. Etiam ultricies volutpat dui, id ultricies lorem egestas tincidunt. Nunc sagittis nisi pellentesque felis interdum pharetra eget eget felis.
+The rain was coming. Everyone thought this would be a good thing. It hadn't rained in months and the earth was dry as a bone. It wasn't a surprise that everyone thought a good rain was what was needed, but they never expected how much rain would actually arrive.
+
+> There weren't supposed to be dragons flying in the sky. First and foremost, dragons didn't exist. They were mythical creatures from fantasy books like unicorns. This was something that Pete knew in his heart to be true so he was having a difficult time acknowledging that there were actually fire-breathing dragons flying in the sky above him.
+
+There was a leak in the boat. Nobody had yet noticed it, and nobody would for the next couple of hours. This was a problem since the boat was heading out to sea and while the leak was quite small at the moment, it would be much larger when it was ultimately discovered. John had planned it exactly this way.
+
+"It's never good to give them details," Janice told her sister. "Always be a little vague and keep them guessing." Her sister listened intently and nodded in agreement. She didn't fully understand what her sister was saying but that didn't matter. She loved her so much that she would have agreed to whatever came out of her mouth.
+
+> Sometimes it just doesn't make sense. The man walking down the street in a banana suit. The llama standing in the middle of the road. The fairies dancing in front of the car window. The fact that all of this was actually happening and wasn't a dream.
 
-> Suspendisse nec dui nibh. Cras non ornare nisi, eu rutrum urna. Sed lorem mauris, finibus ut commodo sed, lobortis at nulla. Quisque iaculis, diam id posuere luctus, orci turpis condimentum nunc, in dictum est sem quis turpis. Curabitur eget tortor id sem mattis rutrum a non tortor.
+It's an unfortunate reality that we don't teach people how to make money (beyond getting a 9 to 5 job) as part of our education system. The truth is there are a lot of different, legitimate ways to make money. That doesn't mean they are easy and that you won't have to work hard to succeed, but it does mean that if you're willing to open your mind a bit you don't have to be stuck in an office from 9 to 5 for the next fifty years o your life.
 
-Nullam ac cursus felis, eget mattis odio. Nulla rhoncus porttitor turpis ut eleifend. Pellentesque vulputate, nibh vel viverra bibendum, mauris magna tristique sem, vel mollis nisi arcu et lacus. Mauris sed tincidunt arcu, sed laoreet nisi. Quisque risus orci, bibendum eget augue eget, placerat euismod arcu. Nulla posuere dapibus nibh, eget interdum enim gravida a.
+The blinking light caught her attention. She thought about it a bit and couldn't remember ever noticing it before. That was strange since it was obvious the flashing light had been there for years. Now she wondered how she missed it for that amount of time and what other things in her small town she had failed to notice.
 
-1. Donec condimentum ex nibh, at malesuada libero placerat ut.
-2. Morbi ultricies consequat feugiat. 
-3. Phasellus purus velit, vulputate ut libero mattis, laoreet scelerisque erat. Nullam fermentum, lorem at varius mollis, neque lacus porttitor purus, quis pharetra eros felis vel turpis.
-4. Etiam convallis cursus justo in euismod.
+1. She put the pen to paper but she couldn't bring herself to actually write anything.
+2. She just stared at the blank card and wondered what words she could write that would help in even a small way.
+3. She thought of a dozen ways to begin but none seemed to do justice to the situation.
+4. There were no words that could help and she knew it.
 
-*Donec mollis lacus id augue volutpat, et commodo eros blandit. Donec non augue sit amet dui suscipit tincidunt. Maecenas blandit felis eu nulla volutpat, vel rutrum erat elementum. Vestibulum enim nisi, pulvinar vitae blandit ultricies, luctus vel nisi. Nam vitae feugiat mauris, id placerat ipsum. Integer consequat sapien nulla, ut placerat metus aliquam nec. Phasellus tristique lectus velit, a laoreet lorem accumsan a.* Donec ultrices in justo at semper. Integer eu magna dapibus, ornare massa quis, lobortis dui. Cras ultrices ornare sem mollis pharetra. Nulla facilisi. Integer porta urna at ex varius scelerisque. Quisque vel sollicitudin augue, et rhoncus felis.
+*There was little doubt that the bridge was unsafe. All one had to do was look at it to know that with certainty. Yet Bob didn't see another option.* He may have been able to work one out if he had a bit of time to think things through, but time was something he didn't have. A choice needed to be made, and it needed to be made quickly.
 
-Donec tempus orci ac nunc dignissim suscipit. Mauris nec cursus libero, ut iaculis elit. Nam non est congue, convallis ex a, aliquet eros. Vestibulum imperdiet nunc eu turpis semper, a volutpat libero lobortis. Duis tristique felis eget turpis efficitur aliquam. Praesent vel ipsum mollis, mollis justo eget, molestie libero. Aliquam sed tincidunt mi, quis auctor ex. Etiam tempus ex sed congue blandit. Fusce tempor ornare libero vel vulputate.
+The thing that's great about this job is the time sourcing the items involves no traveling. I just look online to buy it. It's really as simple as that. While everyone else is searching for what they can sell, I sit in front of my computer and buy better stuff for less money and spend a fraction of the time doing it.
 
-Praesent elit magna, semper eget sodales et, elementum et leo. Aliquam eget purus ut lorem accumsan finibus. Sed ullamcorper turpis arcu, a aliquet nunc dictum pharetra. Maecenas hendrerit sapien posuere mi vulputate, vitae consectetur felis varius. Aenean vitae nulla eget diam aliquam commodo eget eget tortor. Donec in efficitur neque, quis rhoncus lectus. Cras nisi risus, fermentum non tellus ut, tincidunt molestie arcu. Morbi nec massa sed sapien mollis tempus. Nam quam neque, volutpat ut fringilla at, aliquam ac quam. Donec et mi enim. Ut semper lorem sed dui sagittis commodo. Sed sed magna eleifend, pretium velit vel, viverra justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tempus urna velit, id interdum mauris imperdiet ac.
+She looked at her little girl who was about to become a teen. She tried to think back to when the girl had been younger but failed to pinpoint the exact moment when she had become a little too big to pick up and carry. It hit her all at once. She was no longer a little girl and she stood there speechless with fear, sadness, and pride all running through her at the same time.

src/pages/designs.md

@@ -3,4 +3,5 @@ contentKey: page
 title: Designs
 description: Designs Page Description
 ---
-Designs Page Content with a **bold** text!
+
+I used to practice weaving with spaghetti three hours a day but stopped because I didn't want to die alone. **Pair your designer cowboy hat with scuba gear for a memorable occasion**. There was something in the sky. What exactly was up there wasn't immediately clear. But there was definitely something in the sky and it was getting bigger and bigger.

src/pages/index.md

@@ -4,4 +4,5 @@ title: Index
 description: Index Page Description
 featuredImage: ../../uploads/gabriel-silverio-hibll8rsiwc-unsplash.jpg
 ---
-Index Page Content with a **bold** text!
+
+You're unsure whether or not to trust him, but very thankful that you wore a turtle neck.

src/templates/design-template.js

@@ -15,12 +15,40 @@ const DesignTemplate = (props) => {
       <PageHeader frontmatter={props.data.markdownRemark.frontmatter} />
       <div className='
         container
-        py-4 px-4 md:px-0
+        py-8 px-4 md:px-0
       '>
-        <GatsbyImage
-          image={props.data.markdownRemark.frontmatter.image.childImageSharp.gatsbyImageData}
-          alt={"Please always fill the alternative text attributes!"}
-        />
+        <div className='
+          grid
+          gap-4
+          grid-cols-1
+          md:grid-cols-2
+        '>
+          {
+            props.data.markdownRemark.frontmatter.images &&
+            props.data.markdownRemark.frontmatter.images.map((data) => {
+              return (
+                <div key={data.image.id}>
+                  <div className='shadow rounded-lg overflow-clip'>
+                    <GatsbyImage
+                      image={data.image.childImageSharp.gatsbyImageData}
+                      alt={data.title}
+                    />
+                  </div>
+                  <div className='text-sm text-center leading-4 mt-1 p-1 rounded-lg'>
+                    <h1 className='font-medium text-stone-700'>{data.title}</h1>
+                    <p className='text-stone-500'>{data.description}</p>
+                  </div>
+                </div>
+              );
+            })
+          }
+          <div className='md:col-span-2'>
+            <GatsbyImage
+              image={props.data.markdownRemark.frontmatter.featuredImage.childImageSharp.gatsbyImageData}
+              alt={"Please always fill the alternative text attributes!"}
+            />
+          </div>
+        </div>
       </div>
     </Layout>
   )
@@ -35,11 +63,24 @@ export const query = graphql`
       frontmatter {
         title
         description
-        image {
+        featuredImage {
           childImageSharp {
             gatsbyImageData
           }
         }
+        images {
+          title
+          description
+          image {
+            id
+            childImageSharp {
+              gatsbyImageData(
+                aspectRatio: 1
+                transformOptions: {fit: COVER}
+              )
+            }
+          }
+        }
       }
     }
   }

src/templates/designs-template.js

@@ -14,14 +14,15 @@ const DesignsTemplate = (props) => {
   return (
     <Layout>
       <PageHeader frontmatter={props.data.markdownRemark.frontmatter} />
-      <div className='container py-4 px-4 md:px-0'>
+      <div className='container py-8 px-4 md:px-0'>
         <div
           dangerouslySetInnerHTML={{
             __html: props.data.markdownRemark.html
           }}
           className='
             prose
             prose-p:text-stone-900
+            mb-6
         '>
         </div>
         <ul className='
@@ -40,7 +41,7 @@ const DesignsTemplate = (props) => {
                   shadow
                 '>
                   <GatsbyImage
-                    image={edge.node.frontmatter.image.childImageSharp.gatsbyImageData}
+                    image={edge.node.frontmatter.featuredImage.childImageSharp.gatsbyImageData}
                     alt={"Please always fill the alternative text attributes!"}
                   />
                   <div className='
@@ -98,7 +99,7 @@ export const query = graphql`
           frontmatter {
             title
             description
-            image {
+            featuredImage {
               childImageSharp {
                 gatsbyImageData
               }

src/templates/page-template.js

@@ -18,7 +18,7 @@ const PageTemplate = (props) => {
         }}
         className='
           container
-          py-4 px-4
+          py-8 px-4
           md:px-0
           prose
           prose-p:text-stone-900

static/admin/config.yml

@@ -35,4 +35,11 @@ collections:
       - {label: "Content Key", name: "contentKey", widget: "hidden", default: "design", required: true}
       - {label: "Title", name: "title", widget: "string"}
       - {label: "Description", name: "description", widget: "text"}
-      - {label: "Image", name: "image", widget: "image", allow_multiple: false, choose_url: false}
+      - {label: "Featured Image", name: "featuredImage", widget: "image", allow_multiple: false, choose_url: false}
+      - label: "Images"
+        name: "images"
+        widget: "list"
+        fields:
+          - {label: "Title", name: "title", widget: "string"}
+          - {label: "Description", name: "description", widget: "text"}
+          - {label: "Image", name: "image", widget: "image", allow_multiple: false, choose_url: false}