feat(style): improve style shortcode to support nesting (#263)

pogor-dev · Apr 26, 2020 · fc46fba · fc46fba
1 parent f8b84de
commit fc46fba
Show file tree

Hide file tree

Showing 19 changed files with 90 additions and 63 deletions.
diff --git a/assets/css/_mixin/_summary.scss b/assets/css/_mixin/_summary.scss
@@ -15,6 +15,7 @@
       padding: 30% 0 0;
       position: relative;
       margin: 0.6rem auto;
+      @include transition(transform 0.4s ease);
 
       img {
         position: absolute;
@@ -24,6 +25,10 @@
         top: 0;
         object-fit: cover;
       }
+
+      &:hover {
+        @include transform(scale(1.01));
+      }
     }
 
     .single-title {

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -98,12 +98,12 @@ enableEmoji = true
       # App icon config
       [languages.en.params.app]
         # optional site title override for the app when added to an iOS home screen or Android launcher
-        title = "LoveIt App"
+        title = "LoveIt"
         # whether to omit favicon resource links
-        noFavicon = true
+        noFavicon = false
         # modern SVG favicon to use in place of older style .png and .ico files
-        svgFavicon = 'favicon.svg'
-        # Android browser color theming
+        svgFavicon = ""
+        # Android browser theme color
         themeColor = "#ffffff"
         # Safari mask icon color
         iconColor = "#5bbad5"
@@ -284,19 +284,19 @@ enableEmoji = true
       description = "关于 LoveIt 主题"
       # 网站关键词
       keywords = ["Theme", "Hugo"]
-      # App icon config
+      # 应用图标配置
       [languages.zh-cn.params.app]
-        # optional site title override for the app when added to an iOS home screen or Android launcher
-        title = "LoveIt App"
-        # whether to omit favicon resource links
-        noFavicon = true
-        # modern SVG favicon to use in place of older style .png and .ico files
-        svgFavicon = 'favicon.svg'
-        # Android browser color theming
+        # 当添加到 iOS 主屏幕或者 Android 启动器时的标题, 覆盖默认标题
+        title = "LoveIt"
+        # 是否隐藏网站图标资源链接
+        noFavicon = false
+        # 更现代的 SVG 网站图标, 可替代旧的 .png 和 .ico 文件
+        svgFavicon = ""
+        # Android 浏览器主题色
         themeColor = "#ffffff"
-        # Safari mask icon color
+        # Safari 图标颜色
         iconColor = "#5bbad5"
-        # Windows v8-10 tile color
+        # Windows v8-10 磁贴颜色
         tileColor = "#da532c"
       # 搜索配置
       [languages.zh-cn.params.search]
@@ -472,12 +472,12 @@ enableEmoji = true
       # App icon config
       [languages.fr.params.app]
         # optional site title override for the app when added to an iOS home screen or Android launcher
-        title = "LoveIt App"
+        title = "LoveIt"
         # whether to omit favicon resource links
-        noFavicon = true
+        noFavicon = false
         # modern SVG favicon to use in place of older style .png and .ico files
-        svgFavicon = 'favicon.svg'
-        # Android browser color theming
+        svgFavicon = ""
+        # Android browser theme color
         themeColor = "#ffffff"
         # Safari mask icon color
         iconColor = "#5bbad5"

diff --git a/exampleSite/content/about.en.md b/exampleSite/content/about.en.md
@@ -9,11 +9,13 @@ math:
   enable: true
 ---
 
+{{< style "img { height: 1.25rem; }" >}}
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/releases)
 [![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-ff4088?style=flat-square&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/dillonzq/LoveIt?style=social)](https://github.com/dillonzq/LoveIt)
 [![GitHub forks](https://img.shields.io/github/forks/dillonzq/LoveIt?style=social)](https://github.com/dillonzq/LoveIt/fork)
+{{< /style >}}
 
 [:(far fa-kiss-wink-heart fa-fw): LoveIt](https://github.com/dillonzq/LoveIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Dillon](https://dillonzq.com).
 

diff --git a/exampleSite/content/about.fr.md b/exampleSite/content/about.fr.md
@@ -9,11 +9,13 @@ math:
   enable: true
 ---
 
+{{< style "img { height: 1.25rem; }" >}}
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/releases)
 [![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-ff4088?style=flat-square&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/dillonzq/LoveIt?style=social)](https://github.com/dillonzq/LoveIt)
 [![GitHub forks](https://img.shields.io/github/forks/dillonzq/LoveIt?style=social)](https://github.com/dillonzq/LoveIt/fork)
+{{< /style >}}
 
 {{< admonition warning >}}
 Sorry, this article has not been completely translated into **French**.

diff --git a/exampleSite/content/about.zh-cn.md b/exampleSite/content/about.zh-cn.md
@@ -9,11 +9,13 @@ math:
   enable: true
 ---
 
+{{< style "img { height: 1.25rem; }" >}}
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/releases)
 [![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-ff4088?style=flat-square&logo=hugo)](https://gohugo.io/)
 [![License](https://img.shields.io/github/license/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/dillonzq/LoveIt?style=social)](https://github.com/dillonzq/LoveIt)
 [![GitHub forks](https://img.shields.io/github/forks/dillonzq/LoveIt?style=social)](https://github.com/dillonzq/LoveIt/fork)
+{{< /style >}}
 
 [:(far fa-kiss-wink-heart fa-fw): LoveIt](https://github.com/dillonzq/LoveIt) 是一个由 [Dillon](https://dillonzq.com) 开发的**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
 

diff --git a/exampleSite/content/posts/theme-documentation-basics.en.md b/exampleSite/content/posts/theme-documentation-basics.en.md
@@ -206,12 +206,12 @@ Note that some of these parameters are explained in details in other sections of
   # {{< version 0.2.0 >}} App icon config
   [params.app]
     # optional site title override for the app when added to an iOS home screen or Android launcher
-    title = "LoveIt App"
+    title = "LoveIt"
     # whether to omit favicon resource links
-    noFavicon = true
+    noFavicon = false
     # modern SVG favicon to use in place of older style .png and .ico files
-    svgFavicon = 'favicon.svg'
-    # Android browser color theming
+    svgFavicon = ""
+    # Android browser theme color
     themeColor = "#ffffff"
     # Safari mask icon color
     iconColor = "#5bbad5"

diff --git a/exampleSite/content/posts/theme-documentation-basics.fr.md b/exampleSite/content/posts/theme-documentation-basics.fr.md
@@ -211,12 +211,12 @@ Note that some of these parameters are explained in details in other sections of
   # {{< version 0.2.0 >}} App icon config
   [params.app]
     # optional site title override for the app when added to an iOS home screen or Android launcher
-    title = "LoveIt App"
+    title = "LoveIt"
     # whether to omit favicon resource links
-    noFavicon = true
+    noFavicon = false
     # modern SVG favicon to use in place of older style .png and .ico files
-    svgFavicon = 'favicon.svg'
-    # Android browser color theming
+    svgFavicon = ""
+    # Android browser theme color
     themeColor = "#ffffff"
     # Safari mask icon color
     iconColor = "#5bbad5"

diff --git a/exampleSite/content/posts/theme-documentation-basics.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics.zh-cn.md
@@ -206,19 +206,19 @@ hugo
   # {{< version 0.2.0 >}} 日期格式
   dateFormat = "2006-01-02"
 
-  # {{< version 0.2.0 >}} App icon config
+  # {{< version 0.2.0 >}} 应用图标配置
   [params.app]
-    # optional site title override for the app when added to an iOS home screen or Android launcher
-    title = "LoveIt App"
-    # whether to omit favicon resource links
-    noFavicon = true
-    # modern SVG favicon to use in place of older style .png and .ico files
-    svgFavicon = 'favicon.svg'
-    # Android browser color theming
+    # 当添加到 iOS 主屏幕或者 Android 启动器时的标题, 覆盖默认标题
+    title = "LoveIt"
+    # 是否隐藏网站图标资源链接
+    noFavicon = false
+    # 更现代的 SVG 网站图标, 可替代旧的 .png 和 .ico 文件
+    svgFavicon = ""
+    # Android 浏览器主题色
     themeColor = "#ffffff"
-    # Safari mask icon color
+    # Safari 图标颜色
     iconColor = "#5bbad5"
-    # Windows v8-10 tile color
+    # Windows v8-10磁贴颜色
     tileColor = "#da532c"
 
   # {{< version 0.2.0 >}} 搜索配置

diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md
@@ -22,26 +22,30 @@ lightgallery: true
 
 ## style
 
+{{< version 0.2.0 changed >}}
+
 `style` is a shortcode to insert custom style in your post.
 
 The `style` shortcode has two positional parameters.
 
-The **first** one is the custom style content.
+The **first** one is the custom style content,
+which supports nesting syntax in [SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting)
+and `&` referring to this parent HTML element.
 
-And the **second** one is the HTML tag around the content you want to change style, and whose default value is `div`.
+And the **second** one is the tag name of the HTML element wrapping the content you want to change style, and whose default value is `div`.
 
 Example `style` input:
 
 ```markdown
-{{</* style "text-align: right;" */>}}
-This is a right-aligned paragraph.
+{{</* style "text-align:right; strong{color:#00b1ff;}" */>}}
+This is a **right-aligned** paragraph.
 {{</* /style */>}}
 ```
 
 The rendered output looks like this:
 
-{{< style "text-align: right;" >}}
-This is a right-aligned paragraph.
+{{< style "text-align:right; strong{color:#00b1ff;}" >}}
+This is a **right-aligned** paragraph.
 {{< /style >}}
 
 ## link

diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.fr.md
@@ -27,26 +27,30 @@ Welcome to take the time to propose a translation by [making a PR](https://githu
 
 ## style
 
+{{< version 0.2.0 changed >}}
+
 `style` is a shortcode to insert custom style in your post.
 
 The `style` shortcode has two positional parameters.
 
-The **first** one is the custom style content.
+The **first** one is the custom style content,
+which supports nesting syntax in [SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting)
+and `&` referring to this parent HTML element.
 
-And the **second** one is the HTML tag around the content you want to change style, and whose default value is `div`.
+And the **second** one is the tag name of the HTML element wrapping the content you want to change style, and whose default value is `div`.
 
 Example `style` input:
 
 ```markdown
-{{</* style "text-align: right;" */>}}
-This is a right-aligned paragraph.
+{{</* style "text-align:right; strong{color:#00b1ff;}" */>}}
+This is a **right-aligned** paragraph.
 {{</* /style */>}}
 ```
 
 The rendered output looks like this:
 
-{{< style "text-align: right;" >}}
-This is a right-aligned paragraph.
+{{< style "text-align:right; strong{color:#00b1ff;}" >}}
+This is a **right-aligned** paragraph.
 {{< /style >}}
 
 ## link

diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes.zh-cn.md
@@ -25,26 +25,29 @@ mapbox:
 
 ## style
 
+{{< version 0.2.0 changed >}}
+
 `style` shortcode 用来在你的文章中插入自定义样式.
 
 `style` shortcode 有两个位置参数.
 
-第一个参数是自定义样式的内容.
+第一个参数是自定义样式的内容. 它支持 [SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting) 中的嵌套语法,
+并且 `&` 指代这个父元素.
 
 第二个参数是包裹你要更改样式的内容的 HTML 标签, 默认值是 `div`.
 
 一个 `style` 示例:
 
 ```markdown
-{{</* style "text-align: right;" */>}}
-This is a right-aligned paragraph.
+{{</* style "text-align:right; strong{color:#00b1ff;}" */>}}
+This is a **right-aligned** paragraph.
 {{</* /style */>}}
 ```
 
 呈现的输出效果如下:
 
-{{< style "text-align: right;" >}}
-This is a right-aligned paragraph.
+{{< style "text-align:right; strong{color:#00b1ff;}" >}}
+This is a **right-aligned** paragraph.
 {{< /style >}}
 
 ## link

diff --git a/layouts/partials/head/link.html b/layouts/partials/head/link.html
@@ -1,16 +1,16 @@
 {{- $cdn := .Scratch.Get "cdn" | default dict -}}
 {{- $fingerprint := .Scratch.Get "fingerprint" -}}
 
-{{- if not $.Site.Params.app.noFavicon -}}
-    {{- with $.Site.Params.app.svgFavicon -}}
-        <link rel="icon" href="/{{ . }}">
+{{- if not .Site.Params.app.noFavicon -}}
+    {{- with .Site.Params.app.svgFavicon -}}
+        <link rel="icon" href="{{ . }}">
     {{- else -}}
         <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     {{- end -}}
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-    {{- with $.Site.Params.app.iconColor -}}
+    {{- with .Site.Params.app.iconColor -}}
         <link rel="mask-icon" href="/safari-pinned-tab.svg" color="{{ . }}">
     {{- end -}}
     <link rel="manifest" href="/site.webmanifest">

diff --git a/layouts/shortcodes/style.html b/layouts/shortcodes/style.html
@@ -1,4 +1,8 @@
 {{- $content := .Inner | .Page.RenderString -}}
 {{- $id := partial "function/id.html" (dict "content" $content) -}}
 {{- $tag := .Get 1 | default "div" -}}
-{{- printf `<%s id="%s">%s</%s><style>#%s{%s}</style>` $tag $id $content $tag $id ($.Get 0) | safeHTML -}}
+{{- $style := .Get 0 | printf "#%s{%s}" $id -}}
+{{- $res := resources.FromString "css/shortcode/style.scss" $style -}}
+{{- $res = $res | toCSS (dict "targetPath" "css/shortcode/style.css" "outputStyle" "compressed") -}}
+{{- printf `<%s id="%s">%s</%s>` $tag $id $content $tag | safeHTML -}}
+<style>{{ $res.Content | safeCSS }}</style>
diff --git a/package.json b/package.json
@@ -30,8 +30,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "npm run build && npm run copy && git add .",
-      "pre-push": "npm run build && npm run copy && git add ."
+      "pre-commit": "npm run build && npm run copy && git add ."
     }
   },
   "repository": {

diff --git a/resources/_gen/assets/scss/css/shortcode/style.scss_19001642409beba3b4bbc3ec1bde302a.content b/resources/_gen/assets/scss/css/shortcode/style.scss_19001642409beba3b4bbc3ec1bde302a.content
@@ -0,0 +1 @@
+#id-27e8e4 img{height:1.25rem}
diff --git a/resources/_gen/assets/scss/css/shortcode/style.scss_19001642409beba3b4bbc3ec1bde302a.json b/resources/_gen/assets/scss/css/shortcode/style.scss_19001642409beba3b4bbc3ec1bde302a.json
@@ -0,0 +1 @@
+{"Target":"css/shortcode/style.css","MediaType":"text/css","Data":{}}
diff --git a/resources/_gen/assets/scss/css/style.template.scss_788c4a23da05f3aa3e03b28055a2e5f9.content b/resources/_gen/assets/scss/css/style.template.scss_788c4a23da05f3aa3e03b28055a2e5f9.content
diff --git a/resources/_gen/assets/scss/css/style.template.scss_84a735b886b24531b6e80c5fb2060510.content b/resources/_gen/assets/scss/css/style.template.scss_84a735b886b24531b6e80c5fb2060510.content
diff --git a/resources/_gen/assets/scss/css/style.template.scss_d40178ffcb058d725849178b0a7a43cc.content b/resources/_gen/assets/scss/css/style.template.scss_d40178ffcb058d725849178b0a7a43cc.content
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"Target":"css/shortcode/style.css","MediaType":"text/css","Data":{}}