Add copy link feature

jihoonahn · Nov 29, 2023 · d74064e · d74064e
1 parent 472d199
commit d74064e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/Sources/Layouts/PostLayout.swift b/Sources/Layouts/PostLayout.swift
@@ -9,7 +9,7 @@ struct PostLayout: Component {
                     Div {
                         Div {
                             Time(DateFormatter.time.string(from: item.date))
-                                .class("text-gray-500 text-sm")
+                                .class("font-semibold text-gray-500 text-sm")
                         }
                     }
                     .class("component md:w-[654px]")
@@ -19,14 +19,14 @@ struct PostLayout: Component {
                                 .class("m-0 leading-normal font-semibold text-heading-2 md:text-heading-1")
                         }
                     }
-                    .class("component md:w-[654px]")
+                    .class("component my-0 md:w-[654px]")
                     Div {
                         Div {
                             Text(item.description)
                         }
                         .class("text-lg md:text-2xl mx-auto")
                     }
-                    .class("component md:w-[654px]")
+                    .class("component mt-5 mb-0 md:w-[654px]")
                 }
                 Figure {
                     Div {
@@ -41,7 +41,30 @@ struct PostLayout: Component {
                     }
                 }
                 .class("mx-auto w-[85%] text-left mt-8 md:w-[700px]")
+                Div {
+                    Div {
+                        Div {
+                            List(item.tags) { tag in
+                                ListItem {
+                                    Link(tag.string, url: context.site.url(for: tag))
+                                        .class("block my-1 px-1.5 py-2 bg-neutral-900 text-white rounded-lg transition duration-200 ease-in-out hover:bg-zinc-300 hover:text-black")
+                                }
+                                .class("inline-block mr-1.5")
+                            }
+                            .class("m-0")
+                        }
+                        Button {
+                            Image("/static/icons/copy.svg")
+                                .class("my-0")
+                        }
+                        .accessibilityLabel("link share")
+                        .class("copyPost m-1 w-9 h-9 p-1.5 bg-blog-c-button rounded-full hover:bg-gray-300 transition duration-200 ease-in-out")
+                    }
+                    .class("flex justify-between mt-6")
+                }
+                .class("mx-auto w-[85%] text-left mt-8 md:w-[700px]")
                 PreviewPost(context: context, item: item)
+                Script(.src("/static/scripts/post.js"))
                 Script(
                     .src("https://utteranc.es/client.js"),
                     .repo("jihoonahn/blog"),

diff --git a/Sources/Styles/global.css b/Sources/Styles/global.css
@@ -183,7 +183,7 @@
     }
 
     .component {
-        @apply w-[85%] my-6 md:my-8 lg:my-11 mx-auto overflow-auto lg:w-[980px];
+        @apply text-center w-[85%] my-6 md:my-8 lg:my-11 mx-auto overflow-auto lg:w-[980px];
     }
 
     .blogNavBarMenuLink {