Added PostFeedLayout and PostCategoryLayout

models/FeaturedPostsSection.yaml

@@ -4,52 +4,16 @@ label: Featured posts
 labelField: title
 thumbnail: https://assets.stackbit.com/components/models/thumbnails/default.png
 extends:
-  - Section
+  - PostFeedSection
 groups:
   - sectionComponent
-fieldGroups:
-  - name: styles
-    label: Styles
-  - name: settings
-    label: Settings
 fields:
-  - type: enum
-    name: variant
-    group: styles
-    label: Arrangement
-    options:
-      - label: Three columns grid
-        value: variant-a
-      - label: Two columns grid
-        value: variant-b
-      - label: Mixed grid
-        value: variant-c
-      - label: List
-        value: variant-d
-    default: variant-a
-  - name: colors
-    default: colors-h
-  - type: string
-    name: title
-    label: Title
+  - name: title
     default: Featured
-  - type: string
-    name: subtitle
-    label: Subtitle
+  - name: subtitle
     default: Featured blog posts section example
-  - type: list
-    name: actions
-    label: Actions
-    items:
-      type: model
-      models:
-        - Button
-        - Link
-    default:
-      - type: Button
-        label: View all
-        url: '/'
-        style: primary
+  - name: colors
+    default: colors-h
   - type: list
     name: posts
     label: Posts
@@ -61,69 +25,3 @@ fields:
       - content/pages/blog/post-three.md
       - content/pages/blog/post-two.md
       - content/pages/blog/post-one.md
-  - type: boolean
-    name: showDate
-    label: Show post date
-    default: false
-  - type: boolean
-    name: showAuthor
-    label: Show post author
-    description: Show the author of the post
-    default: false
-  - type: style
-    name: styles
-    styles:
-      self:
-        height: ['auto', 'screen']
-        width: ['narrow', 'wide', 'full']
-        margin: ['tw0:36']
-        padding: ['tw4:36']
-        justifyContent: ['flex-start', 'flex-end', 'center']
-        borderRadius: '*'
-        borderWidth: ['0:8']
-        borderStyle: '*'
-        borderColor:
-          - value: 'border-primary'
-            label: 'Primary color'
-            color: '$primary'
-          - value: 'border-secondary'
-            label: 'Secondary color'
-            color: '$secondary'
-          - value: 'border-dark'
-            label: 'Dark color'
-            color: '$dark'
-          - value: 'border-complementary'
-            label: 'Complementary color'
-            color: '$complementary'
-          - value: 'border-complementary-alt'
-            label: 'Complementary alt color'
-            color: '$complementaryAlt'
-      title:
-        fontWeight: ['400', '700']
-        fontStyle: ['normal', 'italic']
-        textAlign: ['left', 'center', 'right']
-      subtitle:
-        fontWeight: ['400', '700']
-        fontStyle: ['normal', 'italic']
-        textAlign: ['left', 'center', 'right']
-      actions:
-        justifyContent: ['flex-start', 'flex-end', 'center']
-    default:
-      self:
-        height: auto
-        width: wide
-        margin: ['mt-0', 'mb-0', 'ml-0', 'mr-0']
-        padding: ['pt-12', 'pb-12', 'pl-4', 'pr-4']
-        justifyContent: center
-        borderRadius: none
-        borderWidth: 0
-        borderStyle: none
-        borderColor: border-dark
-      title:
-        textAlign: center
-      subtitle:
-        fontWeight: 400
-        fontStyle: normal
-        textAlign: center
-      actions:
-        justifyContent: center

models/PagedPostsSection.yaml

@@ -0,0 +1,29 @@
+type: object
+name: PagedPostsSection
+label: Post feed
+labelField: title
+extends:
+  - PostFeedSection
+fields:
+  - name: title
+    hidden: true
+    default: null
+  - name: subtitle
+    hidden: true
+    default: null
+  - name: showDate
+    default: true
+  - name: showAuthor
+    default: true
+  - name: variant
+    default: variant-d
+    options:
+      - label: Three columns grid
+        value: variant-a
+      - label: List
+        value: variant-d
+  - name: actions
+    hidden: true
+    default: []
+  - name: colors
+    default: colors-a

models/Person.yaml

@@ -26,8 +26,7 @@ fields:
     default:
       url: https://assets.stackbit.com/components/images/default/default-person.png
       altText: Person photo
-  - type: string
-    name: id
-    label: ID
-    default: name-surname
-    required: true
+  - type: slug
+    name: slug
+    label: Slug
+    description: "Slug used to render posts written by this person. For example, if the slug is 'john-doe', a page will be created under /blog/author/john-doe"

models/PostFeedCategoryLayout.yaml

@@ -0,0 +1,6 @@
+name: PostFeedCategoryLayout
+label: Blog Category
+layout: PostFeedCategoryLayout
+hideContent: true
+extends:
+  - PostFeedLayout

models/PostFeedLayout.yaml

@@ -0,0 +1,42 @@
+name: PostFeedLayout
+label: Blog
+labelField: title
+layout: PostFeedLayout
+hideContent: true
+fields:
+  - type: string
+    name: title
+    label: Title
+    default: This is a page title
+  - type: number
+    name: numOfPostsPerPage
+    label: Number of Posts per page
+    description: set to 0 to show all posts on a single page
+    default: 10
+  - type: model
+    name: postFeed
+    readOnly: true
+    label: Post Feed
+    models: [PagedPostsSection]
+    default:
+      title: null
+      subtitle: null
+      showDate: true
+      showAuthor: true
+      variant: variant-d
+      colors: colors-a
+      actions: []
+  - type: list
+    name: topSections
+    label: Top Sections
+    items:
+      type: model
+      groups:
+        - sectionComponent
+  - type: list
+    name: bottomSections
+    label: Bottom Sections
+    items:
+      type: model
+      groups:
+        - sectionComponent

models/PostFeedSection.yaml

@@ -4,34 +4,43 @@ label: Post feed
 labelField: title
 extends:
   - Section
-groups:
-  - sectionComponent
 fieldGroups:
   - name: styles
     label: Styles
   - name: settings
     label: Settings
 fields:
+  - type: string
+    name: title
+    label: Title
+    default: Posts
+  - type: string
+    name: subtitle
+    label: Subtitle
+    default: Blog posts
+  - type: boolean
+    name: showDate
+    label: Show post date
+    default: false
+  - type: boolean
+    name: showAuthor
+    label: Show post author
+    description: Show the author of the post
+    default: false
   - type: enum
     name: variant
     group: styles
     label: Arrangement
+    default: variant-a
     options:
       - label: Three columns grid
         value: variant-a
-      - label: List
+      - label: Two columns grid
         value: variant-b
-    default: variant-a
-  - name: colors
-    default: colors-h
-  - type: string
-    name: title
-    label: Title
-    default: Latest news
-  - type: string
-    name: subtitle
-    label: Subtitle
-    default: Latest blog posts section example
+      - label: Mixed grid
+        value: variant-c
+      - label: List
+        value: variant-d
   - type: list
     name: actions
     label: Actions
@@ -45,15 +54,6 @@ fields:
         label: View all
         url: '/'
         style: primary
-  - type: boolean
-    name: showRecent
-    label: Show recent posts only
-    description: Show the specified number of recent posts
-    default: false
-  - type: number
-    name: recentCount
-    label: Number of recent posts to show
-    default: 6
   - type: style
     name: styles
     styles:

models/PostLayout.yaml

@@ -12,6 +12,11 @@ fields:
     name: date
     label: Date
     required: true
+  - type: reference
+    name: category
+    label: Category
+    models:
+      - PostFeedCategoryLayout
   - type: reference
     name: author
     label: Author

models/RecentPostsSection.yaml

@@ -0,0 +1,26 @@
+type: object
+name: RecentPostsSection
+label: Recent posts
+labelField: title
+extends:
+  - PostFeedSection
+groups:
+  - sectionComponent
+fields:
+  - name: title
+    default: Recent Posts
+  - name: subtitle
+    default: Latest blog posts section example
+  - name: variant
+    default: variant-a
+    options:
+      - label: Three columns grid
+        value: variant-a
+      - label: List
+        value: variant-d
+  - name: colors
+    default: colors-h
+  - type: number
+    name: recentCount
+    label: Number of recent posts to show
+    default: 6

src/components-manifest.json

@@ -44,11 +44,6 @@
         "modelName": "FeaturedPeopleSection",
         "isDynamic": true
     },
-    "FeaturedPostsSection": {
-        "path": "components/FeaturedPostsSection",
-        "modelName": "FeaturedPostsSection",
-        "isDynamic": true
-    },
     "Footer": {
         "path": "components/Footer",
         "modelName": "Footer",
@@ -84,6 +79,16 @@
         "modelName": "PostFeedSection",
         "isDynamic": true
     },
+    "FeaturedPostsSection": {
+        "path": "components/FeaturedPostsSection",
+        "modelName": "FeaturedPostsSection",
+        "isDynamic": true
+    },
+    "RecentPostsSection": {
+        "path": "components/RecentPostsSection",
+        "modelName": "RecentPostsSection",
+        "isDynamic": true
+    },
     "QuoteSection": {
         "path": "components/QuoteSection",
         "modelName": "QuoteSection",
@@ -133,5 +138,15 @@
         "path": "layouts/PostLayout",
         "modelName": "PostLayout",
         "isDynamic": true
+    },
+    "PostFeedLayout": {
+        "path": "layouts/PostFeedLayout",
+        "modelName": "PostFeedLayout",
+        "isDynamic": true
+    },
+    "PostFeedCategoryLayout": {
+        "path": "layouts/PostFeedCategoryLayout",
+        "modelName": "PostFeedCategoryLayout",
+        "isDynamic": true
     }
 }

src/components/ContactSection/index.tsx

@@ -3,6 +3,7 @@ import Markdown from 'markdown-to-jsx';
 import classNames from 'classnames';
 import { getComponent } from '../../components-registry';
 import { mapStylesToClassNames as mapStyles } from '../../utils/map-styles-to-class-names';
+import { getDataAttrs } from '../../utils/get-data-attrs';
 import FormBlock from '../FormBlock';
 
 export default function ContactSection(props) {
@@ -13,6 +14,7 @@ export default function ContactSection(props) {
     return (
         <div
             id={cssId}
+            {...getDataAttrs(props)}
             className={classNames(
                 'sb-component',
                 'sb-component-section',