diff --git a/models/PostFeedTagLayout.yaml b/models/PostFeedTagLayout.yaml new file mode 100644 index 00000000..1c03d75f --- /dev/null +++ b/models/PostFeedTagLayout.yaml @@ -0,0 +1,7 @@ +name: PostFeedTagLayout +label: Blog Tag +labelField: title +layout: PostFeedTagLayout +hideContent: true +extends: + - PostFeedLayout diff --git a/models/PostLayout.yaml b/models/PostLayout.yaml index d0d9357e..fa42ad36 100644 --- a/models/PostLayout.yaml +++ b/models/PostLayout.yaml @@ -17,6 +17,13 @@ fields: label: Category models: - PostFeedCategoryLayout + - type: list + name: tags + label: Tags + items: + type: reference + models: + - PostFeedTagLayout - type: reference name: author label: Author @@ -35,7 +42,7 @@ fields: type: ImageBlock url: https://assets.stackbit.com/components/images/default/post-4.jpeg altText: Post thumbnail image - caption: "" + caption: '' - type: list name: bottomSections label: Sections diff --git a/src/components-manifest.json b/src/components-manifest.json index 32c2f41f..0ae9dfee 100644 --- a/src/components-manifest.json +++ b/src/components-manifest.json @@ -148,5 +148,10 @@ "path": "layouts/PostFeedCategoryLayout", "modelName": "PostFeedCategoryLayout", "isDynamic": true + }, + "PostFeedTagLayout": { + "path": "layouts/PostFeedTagLayout", + "modelName": "PostFeedTagLayout", + "isDynamic": true } } diff --git a/src/components/PostFeedSection/index.tsx b/src/components/PostFeedSection/index.tsx index 10b0e017..8cd83347 100644 --- a/src/components/PostFeedSection/index.tsx +++ b/src/components/PostFeedSection/index.tsx @@ -137,6 +137,7 @@ function postsVariantA(props) { {post.excerpt}

)} + ))} @@ -364,6 +365,22 @@ function postCategory(post) { ); } +function PostTags({ post }) { + const tags = post.tags || []; + if (tags.length === 0) { + return null; + } + return ( +

+ {tags.map((tag, index) => ( + + {tag.title} + + ))} +

+ ); +} + function mapMinHeightStyles(height) { switch (height) { case 'auto': diff --git a/src/layouts/PostFeedTagLayout/index.tsx b/src/layouts/PostFeedTagLayout/index.tsx new file mode 100644 index 00000000..4e6b6605 --- /dev/null +++ b/src/layouts/PostFeedTagLayout/index.tsx @@ -0,0 +1,2 @@ +import PostFeedLayout from '../PostFeedLayout'; +export default PostFeedLayout; diff --git a/src/layouts/PostLayout/index.tsx b/src/layouts/PostLayout/index.tsx index 05d1ff86..f8cf27c1 100644 --- a/src/layouts/PostLayout/index.tsx +++ b/src/layouts/PostLayout/index.tsx @@ -32,6 +32,7 @@ export default function PostLayout(props) { {page.markdown_content} )} + {sections.length > 0 && ( @@ -97,3 +98,19 @@ function postCategory(category) { ); } + +function PostTags({ post }) { + const tags = post.tags || []; + if (tags.length === 0) { + return null; + } + return ( + + ); +} diff --git a/src/layouts/index.ts b/src/layouts/index.ts index 86ea0d08..93694238 100644 --- a/src/layouts/index.ts +++ b/src/layouts/index.ts @@ -1,6 +1,7 @@ import PageLayout from './PageLayout'; import PostFeedLayout from './PostFeedLayout'; import PostFeedCategoryLayout from './PostFeedCategoryLayout'; +import PostFeedTagLayout from './PostFeedTagLayout'; import PostLayout from './PostLayout'; -export { PageLayout, PostFeedLayout, PostFeedCategoryLayout, PostLayout }; \ No newline at end of file +export { PageLayout, PostFeedLayout, PostFeedCategoryLayout, PostFeedTagLayout, PostLayout }; \ No newline at end of file diff --git a/stackbit.yaml b/stackbit.yaml index 88d65f17..87f54a61 100644 --- a/stackbit.yaml +++ b/stackbit.yaml @@ -16,6 +16,8 @@ contentModels: isPage: true PostFeedCategoryLayout: isPage: true + PostFeedTagLayout: + isPage: true modelsSource: type: files