From 23ae44eae89ea570d6b52ebe8fbf8a75a4ed4b1a Mon Sep 17 00:00:00 2001 From: Khusika Dhamar Gusti Date: Tue, 27 Jul 2021 17:12:48 +0700 Subject: [PATCH] feat(about): Add ability to display web profile depends on .Site.Params.home.profile.enable Signed-off-by: Khusika Dhamar Gusti --- assets/css/_variables.scss | 5 + assets/css/about.scss | 268 ++++++++++++++++++ exampleSite/config.toml | 111 ++++++++ layouts/_default/single.html | 31 ++ layouts/partials/about/parameter.html | 18 ++ layouts/partials/about/profile.html | 89 ++++++ layouts/partials/head/link.html | 17 ++ ...s_dec8201e33e18b45ca5c4b29b113f78e.content | 1 + ...scss_dec8201e33e18b45ca5c4b29b113f78e.json | 1 + 9 files changed, 541 insertions(+) create mode 100644 assets/css/about.scss create mode 100644 layouts/partials/about/parameter.html create mode 100644 layouts/partials/about/profile.html create mode 100644 resources/_gen/assets/scss/css/about.scss_dec8201e33e18b45ca5c4b29b113f78e.content create mode 100644 resources/_gen/assets/scss/css/about.scss_dec8201e33e18b45ca5c4b29b113f78e.json diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss index 9d079cbf..4bb5e583 100644 --- a/assets/css/_variables.scss +++ b/assets/css/_variables.scss @@ -101,6 +101,11 @@ $table-thead-color-dark: #20252b !default; // Color of the blockquote $blockquote-color: #6bd6fd !default; $blockquote-color-dark: #59c5ec !default; + +// Color of the parameter +$skill-color: #282828 !default; +$level-color: #0fffb7 !default; +$level-color-dark: #00875e !default; // ========== Single Content ========== // // ========== Pagination ========== // diff --git a/assets/css/about.scss b/assets/css/about.scss new file mode 100644 index 00000000..ba6e28a0 --- /dev/null +++ b/assets/css/about.scss @@ -0,0 +1,268 @@ +@charset "utf-8"; + +@import "_variables"; +@import "_mixin/index"; + +.single-title { + text-align: right; +} + +.single-card[data-about=true] { + @include border-radius(0); + @include box-shadow(none); + background-color: transparent !important; + margin: 0 !important; + padding: 0 !important; + display: flex; + align-items: stretch; + justify-content: space-between; + flex-direction: row; + flex-wrap: wrap; +} + +.profile{ + position: relative; + margin-top: 1rem; + max-height: 27rem; + + .grid { + display: flex; + align-items: stretch; + justify-content: space-between; + flex-direction: column; + padding: 0 1rem; + min-height: 13rem; + max-height: 13rem; + overflow-x: auto; + @include border-radius(.5rem); + @include box-shadow(0 2px 4px -1px rgba(0, 0, 0, 0.2)); + background-color: $global-background-card-color; + [theme=dark] & { + background-color: $global-background-card-color-dark; + } + } + + [data-param=off] & { + width: 100%; + display: flex; + align-items: stretch; + justify-content: space-between; + flex-direction: row; + flex-wrap: wrap; + + .grid { + width: 49%; + } + } + + [data-param=on] & { + width: 40%; + + .bottom { + margin-top: 1rem; + } + } + + .top { + padding-bottom: 1rem; + } + + .img { + img { + width: 8rem; + height: auto; + background-color: $avatar-background-color; + border: .5rem solid $global-background-color; + @include border-radius(50%); + top: -4rem; + left: 50%; + position: absolute; + transform: translateX(-50%); + [data-param=off] & { + left: 25%; + } + [theme=dark] & { + background-color: $global-background-card-color-dark; + border-color: $global-background-color-dark; + } + } + } + + h2 { + font-size: 1.25rem; + font-weight: bold; + text-align: center; + margin: 4rem 0 0; + padding: .1rem; + } + + .subtitle { + font-size: 1rem; + font-weight: normal; + text-align: center; + margin: 0; + padding: .1rem; + } + + .links { + text-align: center; + font-size: 1.5rem; + padding-top: 0.25rem; + overflow: auto; + white-space: nowrap; + + a * { + vertical-align: text-bottom; + margin: 0 .125rem .25rem; + } + + img { + height: 1.5rem; + margin: 0 .125rem .25rem; + } + } + + p { + text-align: left; + } + + span { + float: right; + position: relative; + } +} + +.param { + margin-top: 1rem; + position: relative; + padding: 1rem; + width: 59%; + min-height: 27rem; + max-height: 27rem; + @include border-radius(.5rem); + @include box-shadow(0 2px 4px -1px rgba(0, 0, 0, 0.2)); + background-color: $global-background-card-color; + [theme=dark] & { + background-color: $global-background-card-color-dark; + } + + h2 { + text-align: center; + margin: .2rem 0; + } + + .exp{ + min-height: 12rem; + max-height: 12rem; + padding: 1rem; + overflow-x: auto; + background-color: $code-background-color; + @include border-radius(1rem); + [theme=dark] & { + background-color: $search-background-color-dark; + } + } + + .skill { + font-size: $code-font-size; + min-height: 13rem; + max-height: 13rem; + overflow-x: auto; + + .box{ + box-sizing: border-box; + width: 100%; + margin: 10px 0; + } + + .box p{ + margin: 0 0 10px; + padding: 0; + font-weight: bold; + letter-spacing: 1px; + } + + .box p:nth-child(2){ + float: right; + position: relative; + top: -33px; + } + + .bar{ + background-color: $skill-color; + padding: 2px; + box-sizing: border-box; + } + + .level{ + background-color: $level-color; + width: 100%; + height: 4px; + [theme=dark] & { + background-color: $level-color-dark; + } + } + } +} + +@media only screen and (max-width: 680px) { + .profile { + [data-param="on"] & { + width: 100%; + display: flex; + align-items: stretch; + justify-content: space-between; + flex-direction: row; + flex-wrap: wrap; + .grid { + width: 49%; + } + .img { + img { + left: 25%; + } + } + .bottom { + margin-top: 0; + } + } + } + + .param { + margin-bottom: .5rem; + width: 100%; + min-height: initial; + } +} + +@media only screen and (max-width: 480px) { + .single-title { + display: none; + } + .profile { + margin-top: 4rem; + [data-param="off"] &, [data-param="on"] & { + flex-direction: column; + .grid { + width: 100%; + } + } + [data-param=on] & { + .top { + margin-bottom: 1rem; + } + } + [data-param=off] & { + .top { + margin-bottom: .5rem; + } + } + .img { + img { + [data-param=off] &, [data-param="on"] & { + left: 50%; + } + } + } + } +} diff --git a/exampleSite/config.toml b/exampleSite/config.toml index ef3823aa..613c2d28 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -133,6 +133,43 @@ ignoreErrors = ["err-missing-comment-accesstoken", "err-missing-oembed-accesstok index = "index.en" appID = "PASDMWALPK" searchKey = "b42948e51daaa93df92381c8e2ac0f93" + + # About page config + [languages.en.params.about] + # whether to enable profile on about page + # depends on .Site.Params.home.profile.enable + enable = true + # whether to enable param layout + param = true + # title for param layout + paramTitle = "Personal Information" + # general description of your site + # can be write with markdown style + description = "[FeelIt](https://github.com/khusika/FeelIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Khusika](https://khusika.com). It is based on the original [LoveIt Theme](https://github.com/dillonzq/LoveIt), [LeaveIt Theme](https://github.com/liuzc/LeaveIt), and [KeepIt Theme](https://github.com/Fastbyte01/KeepIt)." + # description of your status + [[languages.en.params.about.status]] + faIcon = "fas fa-building" + title = "Company" + desc = "FeelIt" + [[languages.en.params.about.status]] + faIcon = "fas fa-briefcase fa-fw" + title = "Occupation" + desc = "Freelancer" + [[languages.en.params.about.status]] + title = "Location" + faIcon = "fas fa-map-marker-alt" + desc = "Earth" + # description of your parameter + [[languages.en.params.about.parameter]] + language = "UI/UX" + level = "80" + [[languages.en.params.about.parameter]] + language = "HTML" + level = "70" + [[languages.en.params.about.parameter]] + language = "Go" + level = "60" + # Home page config [languages.en.params.home] # amount of RSS pages @@ -265,6 +302,43 @@ ignoreErrors = ["err-missing-comment-accesstoken", "err-missing-oembed-accesstok index = "index.zh-cn" appID = "PASDMWALPK" searchKey = "b42948e51daaa93df92381c8e2ac0f93" + + # 关于页面配置 + [languages.zh-cn.params.about] + # 是否启用关于页面的配置文件 + # 依赖于取决于 .Site.Params.home.profile.enable + enable = true + # 是否启用参数布局 + param = true + # 参数布局的标题 + paramTitle = "个人信息" + # 您网站的一般描述 + # 可以用markdown样式写 + description = "[FeelIt](https://github.com/khusika/FeelIt) 是一个由 [Khusika](https://khusika.com) 开发的**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。 它的原型基于 [LoveIt 主题](https://github.com/dillonzq/LoveIt), [LeaveIt 主题](https://github.com/liuzc/LeaveIt), 和 [KeepIt 主题](https://github.com/Fastbyte01/KeepIt)。" + # 你的状态描述 + [[languages.zh-cn.params.about.status]] + faIcon = "fas fa-building" + title = "公司" + desc = "FeelIt" + [[languages.zh-cn.params.about.status]] + faIcon = "fas fa-briefcase fa-fw" + title = "职业" + desc = "自由职业者" + [[languages.zh-cn.params.about.status]] + title = "地点" + faIcon = "fas fa-map-marker-alt" + desc = "地球" + # 参数说明 + [[languages.zh-cn.params.about.parameter]] + language = "UI/UX" + level = "80" + [[languages.zh-cn.params.about.parameter]] + language = "HTML" + level = "70" + [[languages.zh-cn.params.about.parameter]] + language = "Go" + level = "60" + # 主页信息设置 [languages.zh-cn.params.home] # RSS 文章数目 @@ -395,6 +469,43 @@ ignoreErrors = ["err-missing-comment-accesstoken", "err-missing-oembed-accesstok index = "index.fr" appID = "PASDMWALPK" searchKey = "b42948e51daaa93df92381c8e2ac0f93" + + # About page config + [languages.fr.params.about] + # whether to enable profile on about page + # depends on .Site.Params.home.profile.enable + enable = true + # whether to enable param layout + param = true + # title for param layout + paramTitle = "Informations Personnelles" + # general description of your site + # can be write with markdown style + description = "[FeelIt](https://github.com/khusika/FeelIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Khusika](https://khusika.com). It is based on the original [LoveIt Theme](https://github.com/dillonzq/LoveIt), [LeaveIt Theme](https://github.com/liuzc/LeaveIt), and [KeepIt Theme](https://github.com/Fastbyte01/KeepIt)." + # description of your status + [[languages.fr.params.about.status]] + faIcon = "fas fa-building" + title = "Compagnie" + desc = "FeelIt" + [[languages.fr.params.about.status]] + faIcon = "fas fa-briefcase fa-fw" + title = "Occupation" + desc = "Indépendant" + [[languages.fr.params.about.status]] + title = "Lieu" + faIcon = "fas fa-map-marker-alt" + desc = "Terre" + # description of your parameter + [[languages.fr.params.about.parameter]] + language = "UI/UX" + level = "80" + [[languages.fr.params.about.parameter]] + language = "HTML" + level = "70" + [[languages.fr.params.about.parameter]] + language = "Go" + level = "60" + # Home page config [languages.fr.params.home] # amount of RSS pages diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 5b80dbb5..0c87b33b 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -6,6 +6,36 @@ {{- $offline := $params.offline -}} {{- if ne $offline true -}} + {{- $about := .Site.Params.about -}} + {{- $profile := .Site.Params.home.profile -}} + + {{- if and (eq $about.enable true) (eq $profile.enable true) -}} + {{- with .Site.GetPage "/about" -}} +
+ + {{- /* Title */ -}} +

+ {{- .Title -}} +

+ +
+ {{- partial "about/profile.html" . -}} + {{- if eq $about.param true -}} + {{- partial "about/parameter.html" . -}} + {{- end -}} +
+ +
+ {{- /* Content */ -}} +
+ {{- $content := .Content -}} + {{- $content = dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" -}} + {{- $content | replaceRE "

" "
" | replaceRE "(?s:
\n?

)" "
" | replaceRE "https://www.w3.org/" "http://www.w3.org/"| replaceRE "font-weight:550" "font-weight:500" | replaceRE "` `
` | replaceRE ` style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"` `` | replaceRE " webkitallowfullscreen mozallowfullscreen" "" | replaceRE "allowfullscreen" `allow="fullscreen"` | replaceRE `type="application/javascript"` `` | replaceRE `charset="utf-8">` `>` | replaceRE `
` `` | safeHTML -}} +
+
+
+ {{- end -}} + {{- else -}} {{- $toc := $params.toc -}} {{- if eq $toc true -}} {{- $toc = .Site.Params.page.toc | default dict -}} @@ -71,6 +101,7 @@

{{ . }}

{{- /* Comment */ -}} {{- partial "comment.html" . -}} + {{- end -}} {{- else if eq $offline true -}}

{{ .Title }}

diff --git a/layouts/partials/about/parameter.html b/layouts/partials/about/parameter.html new file mode 100644 index 00000000..4e6d40e9 --- /dev/null +++ b/layouts/partials/about/parameter.html @@ -0,0 +1,18 @@ +
+
+

{{ .Site.Params.about.paramTitle }}

+ {{- range .Site.Params.about.parameter -}} +
+

{{ .language }}

+

{{ .level }}%

+
+
+
+
+ {{- end -}} +
+
+

{{ .Site.Params.about.description | markdownify }}

+
+
+ diff --git a/layouts/partials/about/profile.html b/layouts/partials/about/profile.html new file mode 100644 index 00000000..cd7c969b --- /dev/null +++ b/layouts/partials/about/profile.html @@ -0,0 +1,89 @@ +{{- $profile := .Site.Params.home.profile -}} +
+
+ {{- $avatar := $profile.avatarURL -}} + {{- with $profile.gravatarEmail -}} + {{- $avatar = md5 . | printf "https://www.gravatar.com/avatar/%v?s=240&d=mp" -}} + {{- end -}} + {{- if $avatar -}} +
+ {{- $menus := $.Site.Menus.main | default slice -}} + {{- with index $menus 0 -}} + {{- $url := .URL | relLangURL -}} + {{- with .Page -}} + {{- $url = .RelPermalink -}} + {{- end -}} + {{- dict "Src" $avatar | partial "plugin/image.html" -}} + {{- else -}} + {{- dict "Src" $avatar | partial "plugin/image.html" -}} + {{- end -}} +
+ {{- end -}} + +

+ {{- .Site.Title -}} +

+ + {{- with $profile.subtitle -}} +
+ {{- . | safeHTML -}} +
+ {{- end -}} + + {{- if $profile.social -}} +
+ {{- $socialMap := resources.Get "data/social.yml" | transform.Unmarshal -}} + {{- $socialArr := slice -}} + {{- range $key, $value := .Site.Params.social -}} + {{- $social := $key | lower | index $socialMap | default dict -}} + {{- if $value -}} + {{- if reflect.IsMap $value -}} + {{- with $value.weight -}} + {{- $social = dict "Weight" . | merge $social -}} + {{- end -}} + {{- with $value.prefix -}} + {{- $social = dict "Prefix" . | merge $social -}} + {{- end -}} + {{- with $value.template -}} + {{- $social = dict "Template" . | merge $social -}} + {{- end -}} + {{- with $value.id -}} + {{- $social = dict "Id" . | merge $social -}} + {{- end -}} + {{- with $value.url -}} + {{- $social = dict "Url" . | merge $social -}} + {{- end -}} + {{- with $value.title -}} + {{- $social = dict "Title" . | merge $social -}} + {{- end -}} + {{- with $value.newtab -}} + {{- $social = dict "Newtab" . | merge $social -}} + {{- end -}} + {{- with $value.icon -}} + {{- $social = dict "Icon" . | merge $social -}} + {{- end -}} + {{- else if ne $value true -}} + {{- $social = dict "Id" $value | merge $social -}} + {{- end -}} + {{- if $social.Icon.Simpleicons -}} + {{- $prefix := ($.Scratch.Get "cdn" | default dict).simpleIconsPrefix -}} + {{- $social = dict "Prefix" $prefix | dict "Icon" | merge $social -}} + {{- end -}} + {{- $socialArr = $socialArr | append $social -}} + {{- end -}} + {{- end -}} + {{- range sort $socialArr "Weight" -}} + {{- partial "plugin/social.html" . -}} + {{- end -}} +
+ {{- end -}} +
+
+
+ {{- range .Site.Params.about.status -}} +

 {{ .title }}:{{ .desc }}

+
+ {{- end -}} +
+
+
diff --git a/layouts/partials/head/link.html b/layouts/partials/head/link.html index 7dbc1f7b..bb053dba 100644 --- a/layouts/partials/head/link.html +++ b/layouts/partials/head/link.html @@ -32,7 +32,24 @@ {{- end -}} + {{- if not .IsHome -}} + +{{ with .Site.GetPage "/about" }} +{{- /* about.min.css */ -}} +{{- if .Site.Params.SourceMap -}} +{{- $style := dict "Source" "css/about.scss" "Fingerprint" $fingerprint -}} +{{- $options := dict "targetPath" "css/about.min.css" "enableSourceMap" true -}} +{{- $style = dict "Context" . "ToCSS" $options | merge $style -}} +{{- partial "plugin/style.html" $style -}} +{{- else -}} +{{- $style := dict "Source" "css/about.scss" "Fingerprint" $fingerprint -}} +{{- $options := dict "targetPath" "css/about.min.css" "enableSourceMap" false -}} +{{- $style = dict "Context" . "ToCSS" $options | merge $style -}} +{{- partial "plugin/style.html" $style -}} +{{- end -}} +{{ end }} + {{- /* page.min.css */ -}} {{- if .Site.Params.SourceMap -}} {{- $style := dict "Source" "css/page.scss" "Fingerprint" $fingerprint -}} diff --git a/resources/_gen/assets/scss/css/about.scss_dec8201e33e18b45ca5c4b29b113f78e.content b/resources/_gen/assets/scss/css/about.scss_dec8201e33e18b45ca5c4b29b113f78e.content new file mode 100644 index 00000000..3f019d56 --- /dev/null +++ b/resources/_gen/assets/scss/css/about.scss_dec8201e33e18b45ca5c4b29b113f78e.content @@ -0,0 +1 @@ +.single-title{text-align:right}.single-card[data-about=true]{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none;background-color:transparent !important;margin:0 !important;padding:0 !important;display:flex;align-items:stretch;justify-content:space-between;flex-direction:row;flex-wrap:wrap}.profile{position:relative;margin-top:1rem;max-height:27rem}.profile .grid{display:flex;align-items:stretch;justify-content:space-between;flex-direction:column;padding:0 1rem;min-height:13rem;max-height:13rem;overflow-x:auto;-webkit-border-radius:.5rem;-moz-border-radius:.5rem;border-radius:.5rem;-webkit-box-shadow:0 2px 4px -1px rgba(0,0,0,0.2);box-shadow:0 2px 4px -1px rgba(0,0,0,0.2);background-color:#fff}[theme=dark] .profile .grid{background-color:#333}[data-param=off] .profile{width:100%;display:flex;align-items:stretch;justify-content:space-between;flex-direction:row;flex-wrap:wrap}[data-param=off] .profile .grid{width:49%}[data-param=on] .profile{width:40%}[data-param=on] .profile .bottom{margin-top:1rem}.profile .top{padding-bottom:1rem}.profile .img img{width:8rem;height:auto;background-color:#afc6e9;border:0.5rem solid #f2f2f2;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;top:-4rem;left:50%;position:absolute;transform:translateX(-50%)}[data-param=off] .profile .img img{left:25%}[theme=dark] .profile .img img{background-color:#333;border-color:#292a2d}.profile h2{font-size:1.25rem;font-weight:bold;text-align:center;margin:4rem 0 0;padding:.1rem}.profile .subtitle{font-size:1rem;font-weight:normal;text-align:center;margin:0;padding:.1rem}.profile .links{text-align:center;font-size:1.5rem;padding-top:0.25rem;overflow:auto;white-space:nowrap}.profile .links a *{vertical-align:text-bottom;margin:0 .125rem .25rem}.profile .links img{height:1.5rem;margin:0 .125rem .25rem}.profile p{text-align:left}.profile span{float:right;position:relative}.param{margin-top:1rem;position:relative;padding:1rem;width:59%;min-height:27rem;max-height:27rem;-webkit-border-radius:.5rem;-moz-border-radius:.5rem;border-radius:.5rem;-webkit-box-shadow:0 2px 4px -1px rgba(0,0,0,0.2);box-shadow:0 2px 4px -1px rgba(0,0,0,0.2);background-color:#fff}[theme=dark] .param{background-color:#333}.param h2{text-align:center;margin:.2rem 0}.param .exp{min-height:12rem;max-height:12rem;padding:1rem;overflow-x:auto;background-color:#f5f5f5;-webkit-border-radius:1rem;-moz-border-radius:1rem;border-radius:1rem}[theme=dark] .param .exp{background-color:#363636}.param .skill{font-size:.875rem;min-height:13rem;max-height:13rem;overflow-x:auto}.param .skill .box{box-sizing:border-box;width:100%;margin:10px 0}.param .skill .box p{margin:0 0 10px;padding:0;font-weight:bold;letter-spacing:1px}.param .skill .box p:nth-child(2){float:right;position:relative;top:-33px}.param .skill .bar{background-color:#282828;padding:2px;box-sizing:border-box}.param .skill .level{background-color:#0fffb7;width:100%;height:4px}[theme=dark] .param .skill .level{background-color:#00875e}@media only screen and (max-width: 680px){[data-param="on"] .profile{width:100%;display:flex;align-items:stretch;justify-content:space-between;flex-direction:row;flex-wrap:wrap}[data-param="on"] .profile .grid{width:49%}[data-param="on"] .profile .img img{left:25%}[data-param="on"] .profile .bottom{margin-top:0}.param{margin-bottom:.5rem;width:100%;min-height:initial}}@media only screen and (max-width: 480px){.single-title{display:none}.profile{margin-top:4rem}[data-param="off"] .profile,[data-param="on"] .profile{flex-direction:column}[data-param="off"] .profile .grid,[data-param="on"] .profile .grid{width:100%}[data-param=on] .profile .top{margin-bottom:1rem}[data-param=off] .profile .top{margin-bottom:.5rem}[data-param=off] .profile .img img,[data-param="on"] .profile .img img{left:50%}} diff --git a/resources/_gen/assets/scss/css/about.scss_dec8201e33e18b45ca5c4b29b113f78e.json b/resources/_gen/assets/scss/css/about.scss_dec8201e33e18b45ca5c4b29b113f78e.json new file mode 100644 index 00000000..7701a282 --- /dev/null +++ b/resources/_gen/assets/scss/css/about.scss_dec8201e33e18b45ca5c4b29b113f78e.json @@ -0,0 +1 @@ +{"Target":"css/about.min.css","MediaType":"text/css","Data":{}} \ No newline at end of file