feat: Add circle shortcode (#158)

cf. #152
peaceiris · May 22, 2020 · acd2b3f · acd2b3f
1 parent 17a7fd0
commit acd2b3f
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -39,6 +39,7 @@ Hugo IRIS Theme
   - [Netlify](#netlify)
   - [GitHub Pages using Actions](#github-pages-using-actions)
 - [Shortcodes](#shortcodes)
+  - [circle](#circle)
   - [button](#button)
   - [li](#li)
   - [mermaid](#mermaid)
@@ -194,6 +195,16 @@ jobs:
 
 ## Shortcodes
 
+### circle
+
+If your logo image is located at `static/images/logo.jpg`.
+
+```md
+{{< circle src="/images/logo.jpg" alt="hugo-theme-iris logo" >}}
+```
+
+<img width="500px" src="https://raw.githubusercontent.com/peaceiris/hugo-theme-iris/master/exampleSite/static/images/shortcode_circle.jpg" alt="Shortcode mermaid">
+
 ### button
 
 ```md

diff --git a/assets/theme/scss/style.scss b/assets/theme/scss/style.scss
@@ -3,12 +3,3 @@
 pre {
   margin: 1rem 0rem;
 }
-
-figure.image {
-  margin: 2rem 0rem;
-
-  figcaption {
-    margin: 1rem 0rem;
-  }
-}
-
diff --git a/exampleSite/content/en/_index.md b/exampleSite/content/en/_index.md
@@ -8,6 +8,8 @@ date: 2020-01-01T23:00:00.000Z
 
 ## About Hugo IRIS Theme
 
+{{< circle src="/images/logo.jpg" alt="hugo-theme-iris logo" >}}
+
 View source code on GitHub.
 
 <br>

diff --git a/exampleSite/static/images/logo.jpg b/exampleSite/static/images/logo.jpg
diff --git a/exampleSite/static/images/shortcode_circle.jpg b/exampleSite/static/images/shortcode_circle.jpg
diff --git a/layouts/shortcodes/circle.html b/layouts/shortcodes/circle.html
@@ -0,0 +1,14 @@
+{{ $src := .Get "src" }}
+{{ $alt := .Get "alt" }}
+
+<br>
+  <figure class="image is-180x180 container">
+    <img
+      class="is-rounded"
+      src="{{ $src | absURL }}"
+      alt="{{ $alt | safeHTML }}"
+      decoding="async"
+      loading="lazy"
+    />
+  </figure>
+<br>
diff --git a/resources/_gen/assets/scss/theme/scss/style.scss_b95b077eb505d5c0aff8055eaced30ad.content b/resources/_gen/assets/scss/theme/scss/style.scss_b95b077eb505d5c0aff8055eaced30ad.content
@@ -1 +1 @@
-pre{margin:1rem 0}figure.image{margin:2rem 0}figure.image figcaption{margin:1rem 0}
+pre{margin:1rem 0}
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,6 +8,8 @@ date: 2020-01-01T23:00:00.000Z @@
     ## About Hugo IRIS Theme
+    {{< circle src="/images/logo.jpg" alt="hugo-theme-iris logo" >}}
     View source code on GitHub.
     <br>
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		pre{margin:1rem 0}figure.image{margin:2rem 0}figure.image figcaption{margin:1rem 0}
		pre{margin:1rem 0}