From 368cb44499ff6a191e9e3b46d2b8ecc143da8473 Mon Sep 17 00:00:00 2001 From: tabinurie Date: Sun, 22 Nov 2020 13:54:54 +0900 Subject: [PATCH] Implement affeliate link shortcode --- assets/sass/components/_affeliate.scss | 124 ++++++++++++++++++ assets/sass/main.scss | 1 + exampleSite/content/en/posts/shortcodes.md | 11 ++ .../static/images/shortcodes/affeliate.jpg | Bin 0 -> 7418 bytes layouts/partials/svgs/affeliate/amazon.svg | 1 + layouts/partials/svgs/affeliate/gmarket.svg | 1 + layouts/partials/svgs/affeliate/link.svg | 1 + layouts/partials/svgs/affeliate/rakuten.svg | 1 + layouts/partials/svgs/affeliate/yahoojp.svg | 1 + layouts/shortcodes/affeliate.html | 42 ++++++ 10 files changed, 183 insertions(+) create mode 100644 assets/sass/components/_affeliate.scss create mode 100644 exampleSite/static/images/shortcodes/affeliate.jpg create mode 100644 layouts/partials/svgs/affeliate/amazon.svg create mode 100644 layouts/partials/svgs/affeliate/gmarket.svg create mode 100644 layouts/partials/svgs/affeliate/link.svg create mode 100644 layouts/partials/svgs/affeliate/rakuten.svg create mode 100644 layouts/partials/svgs/affeliate/yahoojp.svg create mode 100644 layouts/shortcodes/affeliate.html diff --git a/assets/sass/components/_affeliate.scss b/assets/sass/components/_affeliate.scss new file mode 100644 index 0000000..a7c6eea --- /dev/null +++ b/assets/sass/components/_affeliate.scss @@ -0,0 +1,124 @@ +.affeliate { + word-break: keep-all; + padding: 0.5rem; + margin: 2.5rem 0; + border-radius: 0.5rem; + position: relative; + display: flex; + + @include themify($themes) { + border: 1px solid themed('content-box-border-color'); + background-color: themed('content-box-background-color'); + } + + &__imgwrapper { + width: 25%; + text-align: center; + margin: 0 auto; + padding: .5rem; + } + &__image { + width: 100%; + height: auto; + object-fit: cover; + } + &__body { + width: 75%; + text-align: center; + &__title { + font-family: $title-font; + font-size: 1rem; + font-weight: bold; + } + &__description { + font-size: 0.75rem; + } + } + + &__icons { + @include flexbox(); + @include align-items(center); + @include justify-content(center); + @include flex-wrap(wrap); + margin: 0.5rem 0; + + a { + text-decoration: none !important; + } + } + + &__item { + font-family: $title-font; + font-size: 0.8rem; + cursor: pointer; + border-radius: 0.25rem; + margin: 0.25rem; + text-transform: capitalize; + + @include flexbox(); + @include align-items(center); + + &[data-type="affeliate"] { + svg { + @include themify($themes) { + color: themed('share-color'); + background-color: themed('share-background-color'); + @include box-shadow(1px, 1px, 3px, 0, themed('share-shadow-color')); + } + } + } + + svg { + padding: 0.375rem; + border-radius: 0.25rem; + margin-right: 0.25rem; + + &[data-name="amazon"] { + color: white; + @include on-event { + background-color: #FF9900; + } + } + &[data-name="rakuten"] { + color: white; + @include on-event { + background-color: #BF0000; + } + } + &[data-name="yahoojp"] { + color: white; + @include on-event { + background-color: #FF0132; + } + } + &[data-name="gmarket"] { + color: white; + @include on-event { + background-color: #48AC4A; + } + } + &[data-name="link"] { + color: white; + @include on-event { + background-color: #00457C; + } + } + + @include transition(transform, 0.15s, ease-in); + @include on-event { + @include translateY(-0.25rem); + } + } + } + + @media screen and (max-width: 767px) { + display: block; + + &__imgwrapper { + width: 60%; + } + &__body { + width: 100%; + } + } +} diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 465f547..32033d0 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -82,6 +82,7 @@ $viewport_size: {{ .Site.Params.viewportSize | default "normal" }}; @import 'components/button'; @import 'components/featuredImage'; @import 'components/comment'; +@import 'components/affeliate'; @import 'pages/404'; @import 'pages/about'; diff --git a/exampleSite/content/en/posts/shortcodes.md b/exampleSite/content/en/posts/shortcodes.md index 880f40f..026433c 100644 --- a/exampleSite/content/en/posts/shortcodes.md +++ b/exampleSite/content/en/posts/shortcodes.md @@ -133,3 +133,14 @@ warning text {{< notice error >}} error text {{< /notice >}} + +## Affeliate +{{< affeliate title="The Very Hungry Caterpillar" + description="Author: Eric Carle; Publisher: Philomel Books
THE all-time classic picture book, from generation to generation, sold somewhere in the world every 30 seconds! A sturdy and beautiful book to give as a gift for new babies, baby showers, birthdays, and other new beginnings!" + img="images/shortcodes/affeliate.jpg" + amazon="https://www.amazon.com/dp/0399226907/" + rakuten="https://books.rakuten.co.jp/rb/4177444/" + yahoojp="https://store.shopping.yahoo.co.jp/maniacs-shop/pd-01041801.html" + gmarket="http://global.gmarket.co.kr/item?goodsCode=260740452" + link="https://www.penguinrandomhouse.com/books/557025/9780399256042" >}} + diff --git a/exampleSite/static/images/shortcodes/affeliate.jpg b/exampleSite/static/images/shortcodes/affeliate.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e301ef6a930fe89eabe064f35ce01ebd15ccc2ff GIT binary patch literal 7418 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 literal 0 HcmV?d00001 diff --git a/layouts/partials/svgs/affeliate/amazon.svg b/layouts/partials/svgs/affeliate/amazon.svg new file mode 100644 index 0000000..b894ba4 --- /dev/null +++ b/layouts/partials/svgs/affeliate/amazon.svg @@ -0,0 +1 @@ + diff --git a/layouts/partials/svgs/affeliate/gmarket.svg b/layouts/partials/svgs/affeliate/gmarket.svg new file mode 100644 index 0000000..c32151d --- /dev/null +++ b/layouts/partials/svgs/affeliate/gmarket.svg @@ -0,0 +1 @@ + diff --git a/layouts/partials/svgs/affeliate/link.svg b/layouts/partials/svgs/affeliate/link.svg new file mode 100644 index 0000000..406f70a --- /dev/null +++ b/layouts/partials/svgs/affeliate/link.svg @@ -0,0 +1 @@ + diff --git a/layouts/partials/svgs/affeliate/rakuten.svg b/layouts/partials/svgs/affeliate/rakuten.svg new file mode 100644 index 0000000..624b51b --- /dev/null +++ b/layouts/partials/svgs/affeliate/rakuten.svg @@ -0,0 +1 @@ + diff --git a/layouts/partials/svgs/affeliate/yahoojp.svg b/layouts/partials/svgs/affeliate/yahoojp.svg new file mode 100644 index 0000000..848c63c --- /dev/null +++ b/layouts/partials/svgs/affeliate/yahoojp.svg @@ -0,0 +1 @@ + diff --git a/layouts/shortcodes/affeliate.html b/layouts/shortcodes/affeliate.html new file mode 100644 index 0000000..82abebb --- /dev/null +++ b/layouts/shortcodes/affeliate.html @@ -0,0 +1,42 @@ +
+
+ {{ if .Get "img" }} + {{ if .Get + {{ end }} +
+
+
+ {{ if .Get "title"}}{{ .Get "title" }}{{ end }} +
+
+ {{ if .Get "description"}}{{ .Get "description" | safeHTML }}{{ end }} +
+
+ {{ if .Get "amazon"}} + + {{ partial "svgs/affeliate/amazon.svg" (dict "width" 30 "height" 30) }} + + {{ end }} + {{ if .Get "rakuten"}} + + {{ partial "svgs/affeliate/rakuten.svg" (dict "width" 30 "height" 30) }} + + {{ end }} + {{ if .Get "yahoojp"}} + + {{ partial "svgs/affeliate/yahoojp.svg" (dict "width" 30 "height" 30) }} + + {{ end }} + {{ if .Get "gmarket"}} + + {{ partial "svgs/affeliate/gmarket.svg" (dict "width" 30 "height" 30) }} + + {{ end }} + {{ if .Get "link"}} + + {{ partial "svgs/affeliate/link.svg" (dict "width" 30 "height" 30) }} + + {{ end }} +
+
+