refactor: resource attribution
This commit is contained in:
parent
1a61aeade0
commit
24bfa733ba
12 changed files with 169 additions and 99 deletions
17
assets/css/components/_attr.scss
Normal file
17
assets/css/components/_attr.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
.attr {
|
||||
position: absolute;
|
||||
background-color: $dark;
|
||||
font-size: 0.7em;
|
||||
color: $light;
|
||||
inline-size: fit-content;
|
||||
padding-block: 0.2em;
|
||||
padding-inline: 0.5em;
|
||||
opacity: 0.8;
|
||||
margin-block: 0 !important;
|
||||
margin-inline: auto;
|
||||
top: 0;
|
||||
|
||||
& a {
|
||||
color: $light;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
.figure {
|
||||
inline-size: fit-content;
|
||||
margin: 16px auto;
|
||||
position: relative;
|
||||
|
||||
&--chart {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -9,11 +9,18 @@ video {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.picture {
|
||||
.picture__wrapper {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
block-size: auto;
|
||||
width: fit-content;
|
||||
max-block-size: 50vh;
|
||||
|
||||
& .picture {
|
||||
display: block;
|
||||
inline-size: auto;
|
||||
max-inline-size: 100%;
|
||||
margin: auto;
|
||||
block-size: auto;
|
||||
max-block-size: 50vh;
|
||||
|
||||
& img {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
@import "layout/footer";
|
||||
@import "layout/main";
|
||||
|
||||
@import "components/attr";
|
||||
@import "components/audio";
|
||||
@import "components/blockquote";
|
||||
@import "components/button";
|
||||
|
|
|
|||
|
|
@ -53,24 +53,6 @@
|
|||
background-size: contain;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
& .attr {
|
||||
position: absolute;
|
||||
background-color: $dark;
|
||||
font-size: 0.7em;
|
||||
color: $light;
|
||||
inline-size: fit-content;
|
||||
padding-block: 0.2em;
|
||||
padding-inline: 0.5em;
|
||||
opacity: 0.8;
|
||||
margin-block: 0;
|
||||
margin-inline: auto;
|
||||
top: 0;
|
||||
|
||||
& a {
|
||||
color: $light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title,
|
||||
|
|
|
|||
10
data/licences.json
Normal file
10
data/licences.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"CC0 1.0": "https://creativecommons.org/publicdomain/zero/1.0/",
|
||||
"CC BY 2.0": "https://creativecommons.org/licenses/by/2.0/",
|
||||
"CC BY-SA 2.0": "https://creativecommons.org/licenses/by-sa/2.0/",
|
||||
"CC BY-NC 2.0": "https://creativecommons.org/licenses/by-nc/2.0/",
|
||||
"CC BY-SA 3.0": "https://creativecommons.org/licenses/by-sa/3.0/",
|
||||
"CC BY-SA 4.0": "https://creativecommons.org/licenses/by-sa/4.0/",
|
||||
"Pixabay Content License": "https://pixabay.com/service/license-summary/",
|
||||
"Unsplash License": "https://unsplash.com/license"
|
||||
}
|
||||
58
layouts/partials/media/attr.html
Normal file
58
layouts/partials/media/attr.html
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<!--
|
||||
Partial to render attribution for a resource.
|
||||
|
||||
@params sc Site context.
|
||||
@params pc Page context.
|
||||
@params attr Resource attribution.
|
||||
@params attr_link Resource link. Optional.
|
||||
@params attr_license Resource license. Optional.
|
||||
@params attr_license_link Resource license link. Optional.
|
||||
-->
|
||||
|
||||
<!-- Validation -->
|
||||
|
||||
{{- if ( not ( isset . "sc" ) ) -}}
|
||||
{{- errorf "No site context received" -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- if ( not ( isset . "pc" ) ) -}}
|
||||
{{- errorf "No page context received (%q)" .sc.Page.File.Dir -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- if ( not ( isset . "params" ) ) -}}
|
||||
{{- errorf "No params given (%q)" .pc.File.Path -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- if ( not ( isset .params "attr" ) ) -}}
|
||||
{{- errorf "No attr given (%q)" .pc.File.Path -}}
|
||||
{{- end -}}
|
||||
|
||||
<!-- Variable assignment -->
|
||||
|
||||
{{- $attr := .params.attr -}}
|
||||
{{- $attr_link := .params.attrlink -}}
|
||||
{{- $attr_licence := .params.attrlicence -}}
|
||||
{{- $attr_licence_link := .params.attrlicencelink -}}
|
||||
|
||||
<!-- Rendering -->
|
||||
|
||||
<p class="attr">
|
||||
{{- with $attr_link -}}
|
||||
<a href="{{ . }}" target="_blank" rel="noopener">
|
||||
{{- end -}}
|
||||
{{- $attr | safeHTML -}}
|
||||
{{- if $attr_link -}}
|
||||
</a>
|
||||
{{- end -}}
|
||||
|
||||
{{- if $attr_licence }} (
|
||||
{{- with ( index .sc.Site.Data.licences $attr_licence ) -}}
|
||||
<a href="{{ . }}" target="_blank" rel="noopener">
|
||||
{{- end -}}
|
||||
{{- $attr_licence -}}
|
||||
{{- with ( index .sc.Site.Data.licences $attr_licence ) -}}
|
||||
</a>
|
||||
{{- end -}}
|
||||
)
|
||||
{{- end -}}
|
||||
<p>
|
||||
|
|
@ -9,28 +9,30 @@
|
|||
{{- $src := . -}}
|
||||
{{- $isResizable := not ( in ( slice "svg" "gif" ) $src.MediaType.SubType ) -}}
|
||||
|
||||
|
||||
<!-- Rendering -->
|
||||
|
||||
<picture
|
||||
class="picture"
|
||||
itemprop="image"
|
||||
>
|
||||
{{ if $isResizable -}}
|
||||
<picture
|
||||
class="picture"
|
||||
itemprop="image"
|
||||
>
|
||||
{{ if $isResizable -}}
|
||||
<source srcset="{{- ($src.Resize "1200x webp").RelPermalink -}}" />
|
||||
<source srcset="{{- ($src.Resize "800x png").RelPermalink -}}" media="(max-width: 800px)"/>
|
||||
{{- end }}
|
||||
<img
|
||||
class="u-photo picture__image"
|
||||
{{ if not $isResizable -}}
|
||||
src="{{- $src.RelPermalink -}}"
|
||||
{{- else -}}
|
||||
src="{{- ($src.Resize "1200x webp").RelPermalink -}}"
|
||||
width="{{- $src.Width -}}"
|
||||
height="{{- $src.Height -}}"
|
||||
{{- end }}
|
||||
{{ with $src.Params.alt -}}alt="{{- . -}}"{{- end }}
|
||||
{{ with $src.Params.title -}}title="{{- . -}}" {{- end }}
|
||||
loading="lazy"
|
||||
role="img"
|
||||
<source
|
||||
srcset="{{- ($src.Resize "800x png").RelPermalink -}}"
|
||||
media="(max-width: 800px)"
|
||||
/>
|
||||
{{- end }}
|
||||
<img
|
||||
class="u-photo picture__image"
|
||||
{{ if not $isResizable -}}
|
||||
src="{{- $src.RelPermalink -}}"
|
||||
{{- else -}}
|
||||
src="{{- ($src.Resize "1200x webp").RelPermalink -}}" width="{{- $src.Width -}}" height="{{- $src.Height -}}"
|
||||
{{- end }}
|
||||
{{ with $src.Params.alt -}}alt="{{- . -}}"{{- end }}
|
||||
{{ with $src.Params.title -}}title="{{- . -}}"{{- end }}
|
||||
loading="lazy"
|
||||
role="img"
|
||||
/>
|
||||
</picture>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
{{- /*
|
||||
Renders the header tile for an item.
|
||||
Renders the header tile for an item.
|
||||
|
||||
@params pc The page context.
|
||||
@params sc The site context.
|
||||
*/ -}}
|
||||
@params pc The page context.
|
||||
@params sc The site context.
|
||||
*/
|
||||
-}}
|
||||
|
||||
{{- if ( not ( isset . "sc" ) ) -}}
|
||||
{{- errorf "No site context received" -}}
|
||||
|
|
@ -14,21 +15,26 @@
|
|||
{{- end -}}
|
||||
|
||||
{{ with .pc.Params.featured_image }}
|
||||
<img class="u-photo" style="display: none;" src="
|
||||
<img
|
||||
class="u-photo"
|
||||
style="display: none;"
|
||||
src="
|
||||
{{- with ( $.pc.Resources.GetMatch . ) -}}
|
||||
{{ partialCached "images/get-image.html" ( dict "img" . ) . }}
|
||||
{{- else -}}
|
||||
{{- . -}}
|
||||
{{- end -}}
|
||||
"
|
||||
{{ partialCached "images/get-image.html" ( dict "img" . ) . }}
|
||||
{{- else -}}
|
||||
{{- . -}}
|
||||
{{- end -}}
|
||||
"
|
||||
itemprop="image"
|
||||
{{- with ( $.pc.Resources.GetMatch . ) -}}
|
||||
alt="{{ .Params.alt }}"
|
||||
{{- end -}}
|
||||
{{- with ( $.pc.Resources.GetMatch . ) -}}
|
||||
alt="{{ .Params.alt }}"
|
||||
{{- end -}}
|
||||
/>
|
||||
{{ end }}
|
||||
|
||||
<div class="article-header__featured-image"
|
||||
|
||||
<div
|
||||
class="article-header__featured-image"
|
||||
{{ with .pc.Params.featured_image }}
|
||||
{{ with ( $.pc.Resources.GetMatch . ) }}
|
||||
style="background-image: url({{ partialCached "images/get-image.html" ( dict "img" . ) $.pc }})"
|
||||
|
|
@ -36,32 +42,21 @@
|
|||
style="background-image: url({{ . }})"
|
||||
{{ end }}
|
||||
{{ end -}}
|
||||
>
|
||||
|
||||
>
|
||||
<div class="article-header__title-wrapper">
|
||||
<a class="u-url u-uid" style="display: none" href="{{ .pc.Permalink }}"></a>
|
||||
{{- with .pc.File -}}
|
||||
{{- partialCached "text/item-title.html" ( dict "pc" $.pc "sc" $.sc "class" "article-header" ) .Filename -}}
|
||||
{{- else -}}
|
||||
{{- partial "text/item-title.html" ( dict "pc" $.pc "sc" $.sc "class" "article-header" ) -}}
|
||||
{{- end -}}
|
||||
<a
|
||||
class="u-url u-uid"
|
||||
style="display: none"
|
||||
href="{{ .pc.Permalink }}"
|
||||
></a>
|
||||
{{- with .pc.File -}}
|
||||
{{- partialCached "text/item-title.html" ( dict "pc" $.pc "sc" $.sc "class" "article-header" ) .Filename -}}
|
||||
{{- else -}}
|
||||
{{- partial "text/item-title.html" ( dict "pc" $.pc "sc" $.sc "class" "article-header" ) -}}
|
||||
{{- end -}}
|
||||
</div>
|
||||
|
||||
{{ with ( .pc.Resources.GetMatch .pc.Params.featured_image ) }}
|
||||
<p class="attr">
|
||||
{{- with .Params.attrlink -}}<a href="{{ . }}" target="_blank" rel="noopener">{{- end -}}
|
||||
{{- .Params.attr | safeHTML -}}
|
||||
{{- if .Params.attrlink -}}</a>{{- end -}}
|
||||
{{- if .Params.attrlicence }} (
|
||||
{{- with .Params.attrlicencelink -}}
|
||||
<a href="{{ . }}" target="_blank" rel="noopener">
|
||||
{{- end -}}
|
||||
{{- .Params.attrlicence -}}
|
||||
{{- if .Params.attrlicencelink -}}
|
||||
</a>
|
||||
{{- end -}}
|
||||
)
|
||||
{{- end -}}
|
||||
<p>
|
||||
{{- partial "media/attr.html" ( dict "pc" $.pc "sc" $.sc "params" .Params ) -}}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -54,13 +54,14 @@
|
|||
|
||||
{{- if .Get "link" }}</a>{{ end -}}
|
||||
|
||||
{{- if or ( .Get "caption" ) ( .Get "title" ) ( $src.Params.attr ) -}}
|
||||
{{- if or ( .Get "caption" ) ( .Get "title" ) -}}
|
||||
<figcaption class="figure__caption{{ if not ( or ( .Get "caption" ) ( .Get "title" ) ) }} figure__caption--no-height{{ end }}">
|
||||
{{- if .Params.attrlink -}}<a class="figcaption__attrlink" href="{{ .Params.attrlink }}">{{- end -}}
|
||||
{{- if .Params.attr -}}<p class="figcaption__attr">{{ .Params.attr | safeHTML }}{{ with .Params.attrlicence }} <span class="figcaption__licence">{{ . | safeHTML }}</span>{{ end }}</p>{{- end -}}
|
||||
{{- if .Params.attrlink -}}</a>{{- end -}}
|
||||
{{- with .Get "title" -}}<h4 class="figcaption__title">{{ . | markdownify | safeHTML }}</h4>{{- end -}}
|
||||
{{- with .Get "caption" -}}<p class="figcaption__caption">{{ . | markdownify | safeHTML }}</p>{{- end -}}
|
||||
</figcaption>
|
||||
{{- end -}}
|
||||
|
||||
{{- if $src.Params -}}
|
||||
{{- partial "media/attr.html" ( dict "pc" . "sc" $ "params" $src.Params ) -}}
|
||||
{{- end -}}
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -48,18 +48,8 @@
|
|||
{{- errorf "No handling for resource of type %q" .ResourceType -}}
|
||||
{{- end -}}
|
||||
</a>
|
||||
{{- if or ( .Params.title ) ( .Params.attr ) -}}
|
||||
{{- if or ( .Params.title ) -}}
|
||||
<figcaption class="figure__caption{{ if not .Params.title }} figure__caption--no-height{{ end }}">
|
||||
{{ if .Params.attrlink -}}
|
||||
<a class="figcaption__attrlink" href="{{ .Params.attrlink }}"
|
||||
{{- with .Params.attrtarget }} target="{{ . }}"{{ end -}}
|
||||
{{- with .Params.attrrel }} rel="{{ . }}"{{ end -}}
|
||||
>
|
||||
{{- end -}}
|
||||
{{- if .Params.attr -}}<p class="figcaption__attr">{{ .Params.attr | safeHTML }}{{ with .Params.attrlicence }} <span class="figcaption__licence">{{ . | safeHTML }}</span>{{ end }}</p>{{- end -}}
|
||||
{{- if .Params.attrlink -}}
|
||||
</a>
|
||||
{{- end -}}
|
||||
{{- if .Params.href -}}
|
||||
<a href="{{- if ( eq .Params.href "asCite" ) -}}{{ .Params.cite }}{{- else -}}{{ .Params.href }}{{- end -}}">
|
||||
{{- end -}}
|
||||
|
|
@ -82,6 +72,10 @@
|
|||
</a>
|
||||
{{- end -}}
|
||||
</figcaption>
|
||||
{{- end -}}
|
||||
|
||||
{{- if .Params -}}
|
||||
{{- partial "media/attr.html" ( dict "pc" . "sc" $ "params" .Params ) -}}
|
||||
{{- end -}}
|
||||
</figure>
|
||||
{{- end }}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
{{- end -}}
|
||||
|
||||
<!-- Rendering -->
|
||||
<div>
|
||||
<div class="picture__wrapper">
|
||||
{{- if .Get "link" -}}
|
||||
{{- if $linkedResource -}}
|
||||
<a href="{{- $linkedResource.RelPermalink -}}"{{- with .Get "rel" }} rel="{{- . -}}"{{- end -}}>
|
||||
|
|
@ -37,13 +37,15 @@
|
|||
<a href="{{- .Get "link" -}}">
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- partial "media/picture.html" $src -}}
|
||||
|
||||
{{- if .Get "link" -}}
|
||||
</a>
|
||||
{{- end -}}
|
||||
|
||||
{{- if $src.Params -}}
|
||||
{{- partial "media/attr.html" ( dict "pc" . "sc" $ "params" $src.Params ) -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- with ( .Get "caption" ) -}}
|
||||
<div class="figure__caption"><p class="figcaption__caption">{{ . | safeHTML }}</p></div>
|
||||
{{- end -}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue