From b082d7d6e86361fadc46c96a4b6f50e1f6f0023a Mon Sep 17 00:00:00 2001
From: TomasBankauskas <tbdizainas@gmail.com>
Date: Wed, 1 Dec 2021 22:54:14 +0200
Subject: [PATCH] added post tags

---
 models/PostFeedTagLayout.yaml            |  7 +++++++
 models/PostLayout.yaml                   |  9 ++++++++-
 src/components-manifest.json             |  5 +++++
 src/components/PostFeedSection/index.tsx | 17 +++++++++++++++++
 src/layouts/PostFeedTagLayout/index.tsx  |  2 ++
 src/layouts/PostLayout/index.tsx         | 17 +++++++++++++++++
 src/layouts/index.ts                     |  3 ++-
 stackbit.yaml                            |  2 ++
 8 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 models/PostFeedTagLayout.yaml
 create mode 100644 src/layouts/PostFeedTagLayout/index.tsx

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}
                             </p>
                         )}
+                        <PostTags post={post} />
                     </div>
                 </article>
             ))}
@@ -364,6 +365,22 @@ function postCategory(post) {
     );
 }
 
+function PostTags({ post }) {
+    const tags = post.tags || [];
+    if (tags.length === 0) {
+        return null;
+    }
+    return (
+        <p className="text-sm mt-4" data-sb-field-path="tags">
+            {tags.map((tag, index) => (
+                <Link key={index} className="mr-3" data-sb-field-path={`.${index}`} href={getPageUrlPath(tag)}>
+                    {tag.title}
+                </Link>
+            ))}
+        </p>
+    );
+}
+
 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}
                             </Markdown>
                         )}
+                        <PostTags post={page} />
                     </div>
                 </article>
                 {sections.length > 0 && (
@@ -97,3 +98,19 @@ function postCategory(category) {
         </Link>
     );
 }
+
+function PostTags({ post }) {
+    const tags = post.tags || [];
+    if (tags.length === 0) {
+        return null;
+    }
+    return (
+        <footer className="max-w-screen-md mx-auto mt-12" data-sb-field-path="tags">
+            {tags.map((tag, index) => (
+                <Link key={index} className="mr-3" data-sb-field-path={`.${index}`} href={getPageUrlPath(tag)}>
+                    {tag.title}
+                </Link>
+            ))}
+        </footer>
+    );
+}
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