technoduck/hugo-theme-stack-stars
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor(article): remove color tag & add custom category color (#75)

Browse source 
closes: https://github.com/CaiJimmy/hugo-theme-stack/issues/71
This commit is contained in:
Jimmy Cai 2020-12-22 19:43:14 +01:00 committed by GitHub
parent 31c42bcfe7
commit e606dca404
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
assets/ts/main.ts
View file

@ -22,20 +22,6 @@ let Stack = {
new StackGallery(articleContent);
}
/**
* Add color to tags
*/
document.querySelectorAll('.color-tag').forEach(async (tag: HTMLLinkElement) => {
const imageURL = tag.getAttribute('data-image'),
key = tag.getAttribute('data-key'),
hash = tag.getAttribute('data-hash');
const colors = await getColor(key, hash, imageURL);
tag.style.color = colors.Vibrant.bodyTextColor;
tag.style.background = colors.Vibrant.hex;
})
/**
* Add linear gradient background to tile style article
*/

3
exampleSite/content/categories/Test/_index.md
View file

@ -3,4 +3,7 @@ title: "Test"
description: "This is a example category"
slug: "test"
image: "hutomo-abrianto-l2jk-uxb1BY-unsplash.jpg"
style:
background: "#2a9d8f"
color: "#fff"
---

14
layouts/partials/article/components/details.html
View file

@ -1,22 +1,10 @@
{{ $image := partialCached "helper/image" (dict "Context" . "Type" "article") .RelPermalink "article" }}
{{- $context := . -}}
<div class="article-details">
{{ if .Params.categories }}
<header class="article-category">
{{ range (.GetTerms "categories") }}
{{ if and $image.exists $image.resource }}
{{- $imageRaw := $image.resource | resources.Fingerprint "md5" -}}
{{- $20x := $imageRaw.Fill "20x20 smart" -}}
<a href="{{ .RelPermalink }}"
class="color-tag"
data-image="{{ $20x.RelPermalink }}"
data-key="{{ $context.Slug }}"
data-hash="{{ $imageRaw.Data.Integrity }}">
<a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
{{ .LinkTitle }}
</a>
{{ else }}
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
{{ end }}
{{ end }}
</header>
{{ end }}