Compare commits

...

14 Commits

Author SHA1 Message Date
stereobooster c8b33ae51e refactoring 2023-11-26 14:52:34 +01:00
stereobooster 0c6c30fec1 do not lazy load the feature image 2023-11-26 14:42:26 +01:00
stereobooster 6eb34e7124 use 2x instead of x2 in query params 2023-11-26 14:23:42 +01:00
stereobooster 11fd48f5d0 potential solution to screenshot 2023-11-26 14:14:49 +01:00
stereobooster 8cfe33965b use original image as backup for srcset 2023-11-26 14:14:49 +01:00
stereobooster 3ffe2b1002 do not upscale images in picture shortcode 2023-11-26 14:14:49 +01:00
stereobooster 978791808f integrate in single.html 2023-11-26 14:14:48 +01:00
stereobooster c237e04744 Example of integration of picture partial 2023-11-26 14:14:48 +01:00
James Panther 16edb5da3b
📝 Update changelog 2023-11-26 16:25:55 +11:00
James Panther 041fc30fe9
🔀 Merge pull request #691 from stereobooster/portable-links-2
Print warning if system can't resolve link to a markdown file
2023-11-26 16:23:01 +11:00
James Panther a9f79b7495
🔥 Remove Fathom Analytics custom domain parameter 2023-11-26 16:20:04 +11:00
James Panther 05c3fef94a
🔨 Preparing release v2.7.6 2023-11-26 15:41:00 +11:00
James Panther 6e4ace75f8
🐛 Fix mermaid diagram dark mode styling
Fixes #706
2023-11-26 11:43:02 +11:00
stereobooster e70c968e56 Print warning if system can't resolve link to a markdown file 2023-10-31 16:54:45 +01:00
18 changed files with 218 additions and 153 deletions

View File

@ -6,6 +6,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
### Added
- Warning when building if links to markdown files cannot be resolved ([#691](https://github.com/jpanther/congo/pull/691))
### Removed
- Fathom Analytics custom domain parameter as this is no longer supported by Fathom
## [2.7.6] - 2023-11-26
### Fixed
- Some Mermaid diagram elements not styled correctly in dark mode ([#706](https://github.com/jpanther/congo/issues/706))
## [2.7.5] - 2023-11-25
### Added
@ -797,7 +811,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
- Advanced customisation using simple Tailwind colour definitions and styles
- Fully documented
[Unreleased]: https://github.com/jpanther/congo/compare/v2.7.5...HEAD
[Unreleased]: https://github.com/jpanther/congo/compare/v2.7.6...HEAD
[2.7.6]: https://github.com/jpanther/congo/compare/v2.7.5...v2.7.6
[2.7.5]: https://github.com/jpanther/congo/compare/v2.7.4...v2.7.5
[2.7.4]: https://github.com/jpanther/congo/compare/v2.7.3...v2.7.4
[2.7.3]: https://github.com/jpanther/congo/compare/v2.7.2...v2.7.3

View File

@ -1,4 +1,4 @@
/*! Congo v2.7.5 | MIT License | https://github.com/jpanther/congo */
/*! Congo v2.7.6 | MIT License | https://github.com/jpanther/congo */
/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com */

View File

@ -1,4 +1,4 @@
/*! Congo v2.7.5 | MIT License | https://github.com/jpanther/congo */
/*! Congo v2.7.6 | MIT License | https://github.com/jpanther/congo */
@tailwind base;
@tailwind components;

View File

@ -2,19 +2,29 @@ function css(name) {
return "rgb(" + getComputedStyle(document.documentElement).getPropertyValue(name) + ")";
}
let isDark = document.documentElement.classList.contains("dark");
mermaid.initialize({
theme: "base",
themeVariables: {
background: css("--color-neutral"),
primaryColor: css("--color-primary-200"),
secondaryColor: css("--color-secondary-200"),
tertiaryColor: css("--color-neutral-100"),
primaryBorderColor: css("--color-primary-400"),
primaryTextColor: isDark ? css("--color-neutral-200") : css("--color-neutral-700"),
primaryColor: isDark ? css("--color-primary-700") : css("--color-primary-200"),
secondaryColor: isDark ? css("--color-secondary-700") : css("--color-secondary-200"),
tertiaryColor: isDark ? css("--color-neutral-700") : css("--color-neutral-100"),
primaryBorderColor: isDark ? css("--color-primary-500") : css("--color-primary-400"),
secondaryBorderColor: css("--color-secondary-400"),
tertiaryBorderColor: css("--color-neutral-400"),
lineColor: css("--color-neutral-600"),
tertiaryBorderColor: isDark ? css("--color-neutral-300") : css("--color-neutral-400"),
lineColor: isDark ? css("--color-neutral-300") : css("--color-neutral-600"),
fontFamily:
"ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",
fontSize: "16px",
pieTitleTextSize: "19px",
pieSectionTextSize: "16px",
pieLegendTextSize: "16px",
pieStrokeWidth: "1px",
pieOuterStrokeWidth: "0.5px",
pieStrokeColor: isDark ? css("--color-neutral-300") : css("--color-neutral-400"),
pieOpacity: "1",
},
});

View File

@ -12,6 +12,7 @@ autoSwitchAppearance = true
enableSearch = false
enableCodeCopy = false
enableImageLazyLoading = true
enableImageWebp = true
# robots = ""
fingerprintAlgorithm = "sha256"
@ -68,7 +69,6 @@ fingerprintAlgorithm = "sha256"
[fathomAnalytics]
# site = "ABC12345"
# domain = "llama.yoursite.com"
[plausibleAnalytics]
# domain = "blog.yoursite.com"

View File

@ -12,6 +12,7 @@ autoSwitchAppearance = true
enableSearch = true
enableCodeCopy = true
enableImageLazyLoading = true
enableImageWebp = true
# robots = ""
fingerprintAlgorithm = "sha256"
@ -68,7 +69,6 @@ fingerprintAlgorithm = "sha256"
[fathomAnalytics]
# site = "ABC12345"
# domain = "llama.yoursite.com"
[verification]
# google = ""

View File

@ -169,7 +169,6 @@ Congoはテーマの機能を制御する多数の設定パラメーターを提
|`sitemap.excludedKinds`|`["taxonomy", "term"]`|生成される `/sitemap.xml` から除外されるべきコンテンツの種類。許容される値については[Hugo docs](https://gohugo.io/templates/section-templates/#page-kinds)を参照してください。|
|`taxonomy.showTermCount`|`true`|TaxonomiesのリストにTermごとの記事数を表示するかどうか。|
|`fathomAnalytics.site`|_Not set_|Fathom Analyticsによって生成されたウェブサイトのサイトコード。詳細は[アナリティクス]({{< ref "partials#" >}})を参照してください。|
|`fathomAnalytics.domain`|_Not set_|Fathom Analyticsでカスタムドメインを使用している場合、カスタムドメインから`script.js`を提供するためにここに指定します。|
|`verification.google`|_Not set_|サイトのメタデータに含めるGoogleが提供するサイト検証文字列。|
|`verification.bing`|_Not set_|サイトのメタデータに含めるBingが提供するサイト検証文字列。|
|`verification.pinterest`|_Not set_|サイトのメタデータに含めるPinterestが提供するサイト検証文字列。|

View File

@ -169,7 +169,6 @@ Many of the article defaults here can be overridden on a per article basis by sp
|`sitemap.excludedKinds`|`["taxonomy", "term"]`|Kinds of content that should be excluded from the generated `/sitemap.xml` file. Refer to the [Hugo docs](https://gohugo.io/templates/section-templates/#page-kinds) for acceptable values.|
|`taxonomy.showTermCount`|`true`|Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing.|
|`fathomAnalytics.site`|_Not set_|The site code generated by Fathom Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details.|
|`fathomAnalytics.domain`|_Not set_|If using a custom domain with Fathom Analytics, provide it here to serve `script.js` from the custom domain.|
|`plausibleAnalytics.domain`|_Not set_|Enter the domain of the website you want to track. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details.|
|`plausibleAnalytics.event`|_Not set_|Plausible api event proxied URL. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details.|
|`plausibleAnalytics.script`|_Not set_|Plausible analysis script proxied URL. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details.|

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

View File

@ -10,18 +10,21 @@ tags: ["partials", "analytics", "privacy", "comments", "favicons", "icon", "docs
## Analytics
Congo provides built-in support for Fathom Analytics and Google Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy. If you're interested you can use this affiliate link to [receive $10 credit](https://usefathom.com/ref/RLAJSV) and try the service.
Congo provides support for various analytics providers out of the box, as well as the ability to include custom code for any provider of your choice. If you don't currently have an analytics provider, check out Fathom Analytics.
### Fathom Analytics
To enable Fathom Analytics support, simply provide your Fathom site code in the `config/_default/params.toml` file. If you also use the custom domain feature of Fathom and would like to serve their script from your domain, you can also additionally provide the `domain` configuration value. If you don't provide a `domain` value, the script will load directly from Fathom DNS.
Fathom Analytics is a privacy-first service that is a great alternative to Google Analytics. It allows you to get all the visitor information you need, without spying on them. As a Congo user, you can use this affiliate link to [receive $10 credit](https://usefathom.com/ref/RLAJSV) and try the service.
[![Fathom Analytics. Website analytics without compromise. Zero cookies, GDPR compliant, and privacy-first. Start a free trial.](fathom-analytics.jpg)](https://usefathom.com/ref/RLAJSV)
To enable Fathom Analytics support, simply provide your Fathom site code in the `config/_default/params.toml` file. The script will load in your site directly from the Fathom Analytics CDN.
```toml
# config/_default/params.toml
[fathomAnalytics]
site = "ABC12345"
domain = "llama.yoursite.com"
```
### Plausible Analytics

View File

@ -1,64 +1,28 @@
{{ $url := urls.Parse .Destination }}
{{ $altText := .Text }}
{{ $caption := .Title }}
{{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }}
{{ if findRE "^https?" $url.Scheme }}
<figure>
<img
class="mx-auto my-0 rounded-md"
src="{{ $url.String }}"
alt="{{ $altText }}"
{{ if $lazyLoad }}
loading="lazy"
{{ end }}
/>
{{ $class := "mx-auto my-0 rounded-md" }}
{{ $file := $url.Path }}
{{ $img := .Page.Resources.GetMatch $file }}
{{- if and (not $img) .Page.File }}
{{ $path := path.Join .Page.File.Dir $file }}
{{ $img = resources.Get $path }}
{{ end -}}
{{/* https://github.com/gohugoio/hugo/pull/10666 */}}
{{- $params := $url.Query -}}
{{- $x2Param := $params.Get "2x" -}}
{{- $x2 := false -}}
{{- if eq $x2Param "true" -}}
{{- $x2 = true -}}
{{- end -}}
<figure>
{{- with $img -}}
{{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "x2" $x2) }}
{{- else -}}
<img src="{{ .Destination | safeURL }}" alt="{{ $altText }}" class="{{ $class }}"/>
{{- end -}}
{{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
</figure>
{{ else }}
{{ $resource := "" }}
{{ if $.Page.Resources.GetMatch ($url.String) }}
{{ $resource = $.Page.Resources.GetMatch ($url.String) }}
{{ else if resources.GetMatch ($url.String) }}
{{ $resource = resources.Get ($url.String) }}
{{ end }}
{{ with $resource }}
<figure>
<img
class="mx-auto my-0 rounded-md"
{{ if eq .MediaType.SubType "svg" }}
src="{{ .RelPermalink }}"
{{ else }}
width="{{ .Width }}"
height="{{ .Height }}"
{{ if lt .Width 660 }}
src="{{ .RelPermalink }}"
{{ else }}
srcset="
{{- (.Resize "330x").RelPermalink }} 330w,
{{- (.Resize "660x").RelPermalink }} 660w,
{{- (.Resize "1024x").RelPermalink }} 1024w,
{{- (.Resize "1320x").RelPermalink }} 2x"
src="{{ (.Resize "660x").RelPermalink }}"
{{ end }}
{{ end }}
alt="{{ $altText }}"
{{ if $lazyLoad }}
loading="lazy"
{{ end }}
/>
{{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
</figure>
{{ else }}
<figure>
<img
class="mx-auto my-0 rounded-md"
src="{{ $url.String }}"
alt="{{ $altText }}"
{{ if $lazyLoad }}
loading="lazy"
{{ end }}
/>
{{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
</figure>
{{ end }}
{{ end }}
</figure>

View File

@ -2,10 +2,16 @@
{{- $isRemote := strings.HasPrefix $link "http" -}}
{{- if not $isRemote }}
{{ $url := urls.Parse .Destination }}
{{ if $url.Path }}
{{- if $url.Path }}
{{ $fragment := "" }}
{{- with $url.Fragment }}{{ $fragment = printf "#%s" . }}{{ end -}}
{{- with .Page.GetPage $url.Path }}{{ $link = printf "%s%s" .RelPermalink $fragment }}{{ end -}}
{{ end }}
{{- with .Page.GetPage $url.Path }}
{{ $link = printf "%s%s" .RelPermalink $fragment }}
{{ else }}
{{- if hasSuffix $url.Path ".md" }}
{{ warnf "[CONGO] Can't resolve: %s" .Destination }}
{{ end -}}
{{ end -}}
{{ end -}}
{{ end -}}
<a href="{{ $link | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if $isRemote }} target="_blank" rel="noreferrer"{{ end }}>{{- .Text | safeHTML -}}</a>

View File

@ -15,25 +15,9 @@
</div>
{{ with $feature }}
<div class="prose">
<img
class="mb-6 -mt-4 rounded-md"
{{ if eq .MediaType.SubType "svg" }}
src="{{ .RelPermalink }}"
{{ else }}
width="{{ .Width }}"
height="{{ .Height }}"
{{ if lt .Width 660 }}
src="{{ .RelPermalink }}"
{{ else }}
srcset="
{{- (.Resize "330x").RelPermalink }} 330w,
{{- (.Resize "660x").RelPermalink }} 660w,
{{- (.Resize "1024x").RelPermalink }} 1024w,
{{- (.Resize "1320x").RelPermalink }} 2x"
{{ end }}
{{ end }}
alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
/>
{{ $altText := $.Params.featureAlt | default $.Params.coverAlt | default "" }}
{{ $class := "mb-6 -mt-4 rounded-md" }}
{{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "lazy" false) }}
{{ with $.Params.coverCaption }}
<figcaption class="mb-6 -mt-3 text-center">{{ . | markdownify }}</figcaption>
{{ end }}

View File

@ -1,11 +1,7 @@
{{ if hugo.IsProduction }}
{{ with .Site.Params.fathomAnalytics.site }}
{{ if isset $.Site.Params.fathomanalytics "domain" }}
<script defer src="https://{{ $.Site.Params.fathomanalytics.domain }}/script.js" data-site="{{ . }}"></script>
{{ else }}
<script defer src="https://cdn.usefathom.com/script.js" data-site="{{ . }}"></script>
{{ end }}
{{ end }}
{{ with site.Params.plausibleAnalytics.domain }}
<script defer
data-domain="{{ . }}"

View File

@ -0,0 +1,112 @@
{{ $img := .img }}
{{ $alt := .alt }}
{{ $class := .class }}
{{ $lazy := .lazy | default $.Page.Site.Params.enableImageLazyLoading | default true }}
{{ $webp := .webp | default $.Page.Site.Params.enableImageWebp | default true }}
{{ $lqip := .lqip | default false }}
{{ $x2 := .x2 | default false }}
{{ with $img }}
{{ if (eq .MediaType.SubType "svg") }}
{{ $width := ""}}
{{ $height := ""}}
{{ $svgContent := .Content }}
{{ range (findRESubmatch `<svg[^>]*width=["']([.0-9]*)["'a-zA-Z]` $svgContent 1) }}
{{ $width = index . 1 }}
{{ end }}
{{ range (findRESubmatch `<svg[^>]*height=["']([.0-9]*)["'a-zA-Z]` $svgContent 1) }}
{{ $height = index . 1 }}
{{ end }}
{{ if (eq "" $width $height) }}
{{ range (findRESubmatch `<svg[^>]*viewBox=["']?([.0-9]*) ([.0-9]*) ([.0-9]*) ([.0-9]*)` $svgContent 1) }}
{{ $width = index . 3 }}
{{ $height = index . 4 }}
{{ end }}
{{ end }}
{{ if (eq "" $width $height) }}
{{ warnf "Can't detect width and height for SVG %s" .RelPermalink }}
{{/* do not use lazy without dimensions */}}
{{ $lazy = false }}
{{ end }}
<picture {{ with $class }} class="{{ . }}" {{ end }}>
<img
src="{{ .RelPermalink }}"
{{ with $width }} width="{{ . }}" {{ end }}
{{ with $height }} height="{{ . }}" {{ end }}
{{ with $class }} class="{{ . }}" {{ end }}
{{ with $alt }} alt="{{ . }}" {{ end }}
{{ with $lazy }} loading="lazy" decoding="async" {{ end }}
>
</picture>
{{ else }}
<picture
{{ with $class }} class="{{ . }}" {{ end }}
{{ if $lqip }}
{{ $bg := (.Resize "20x webp q20").Content | base64Encode }}
style="background-image:url(data:image/webp;base64,{{ $bg }});background-size:cover"
{{ end }}
>
{{ $width := .Width }}
{{ $height := .Height }}
{{ if $x2 }}
{{ $width = div .Width 2 }}
{{ $height = div .Height 2 }}
{{ end }}
{{ if $webp }}
<source
{{ if lt .Width 660 }}
{{ with .Resize (printf "%dx%d webp" .Width .Height) }}
src="{{ .RelPermalink }}"
{{ end }}
{{ else }}
srcset="
{{- (.Resize "330x webp").RelPermalink }} 330w,
{{- (.Resize "660x webp").RelPermalink }} 660w
{{ if gt .Width 1024 }}
,{{ (.Resize "1024x webp").RelPermalink }} 1024w
{{ else }}
{{ with .Resize (printf "%dx%d webp" .Width .Height) }}
,{{ .RelPermalink }} {{ .Width }}w
{{ end }}
{{ end }}
{{ if gt .Width 1320 }}
,{{ (.Resize "1320x webp").RelPermalink }} 2x
{{ else }}
{{ with .Resize (printf "%dx%d webp" .Width .Height) }}
,{{ .RelPermalink }} {{ .Width }}w
{{ end }}
{{ end }}"
src="{{ (.Resize "660x webp").RelPermalink }}"
{{ end }}
type="image/webp"
/>
{{ end }}
<img
src="{{ .RelPermalink }}"
width="{{ $width }}"
height="{{ $height }}"
{{ with $class }} class="{{ . }}" {{ end }}
{{ with $alt }} alt="{{ . }}" {{ end }}
{{ with $lazy }} loading="lazy" decoding="async" {{ end }}
{{ if lt .Width 660 }}
src="{{ .RelPermalink }}"
{{ else }}
srcset="
{{- (.Resize "330x").RelPermalink }} 330w,
{{- (.Resize "660x").RelPermalink }} 660w
{{ if gt .Width 1024 }}
,{{ (.Resize "1024x").RelPermalink }} 1024w
{{ else }}
,{{ .RelPermalink }} {{ .Width }}w
{{ end }}
{{ if gt .Width 1320 }}
,{{ (.Resize "1320x").RelPermalink }} 2x
{{ else }}
,{{ .RelPermalink }} {{ .Width }}w
{{ end }}"
src="{{ (.Resize "660x").RelPermalink }}"
{{ end }}
>
</picture>
{{ end }}
{{ end }}

View File

@ -6,45 +6,23 @@
{{ $caption := .Get "caption" }}
{{ $href := .Get "href" }}
{{ $class := .Get "class" }}
{{ $file := $url.Path }}
{{ $img := .Page.Resources.GetMatch $file }}
{{- if and (not $img) .Page.File }}
{{ $path := path.Join .Page.File.Dir $file }}
{{ $img = resources.Get $path }}
{{ end -}}
<figure{{ with $class }} class="{{ . }}"{{ end }}>
{{ with $href }}<a href="{{ . }}">{{ end }}
<img
class="mx-auto my-0 rounded-md"
alt="{{ $altText }}"
{{ if .Site.Params.enableImageLazyLoading | default true }}
loading="lazy"
{{ end }}
{{ if findRE "^https?" $url.Scheme }}
src="{{ $url.String }}"
{{ else }}
{{ $resource := "" }}
{{ if $.Page.Resources.GetMatch ($url.String) }}
{{ $resource = $.Page.Resources.GetMatch ($url.String) }}
{{ else if resources.GetMatch ($url.String) }}
{{ $resource = resources.Get ($url.String) }}
{{ end }}
{{ with $resource }}
{{ if eq .MediaType.SubType "svg" }}
src="{{ .RelPermalink }}"
{{ else }}
width="{{ .Width }}"
height="{{ .Height }}"
{{ if lt .Width 660 }}
src="{{ .RelPermalink }}"
{{ else }}
srcset="
{{- (.Resize "330x").RelPermalink }} 330w,
{{- (.Resize "660x").RelPermalink }} 660w,
{{- (.Resize "1024x").RelPermalink }} 1024w,
{{- (.Resize "1320x").RelPermalink }} 2x"
src="{{ (.Resize "660x").RelPermalink }}"
{{ end }}
{{ end }}
{{ else }}
src="{{ $url.String }}"
{{ end }}
{{ end }}
/>
{{- with $img -}}
{{ partial "picture.html" (dict "img" . "alt" $altText "class" $class) }}
{{- else -}}
<img src="{{ $url.String }}" alt="{{ $altText }}" class="{{ $class }}"/>
{{- end -}}
{{ with $href }}</a>{{ end }}
{{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
</figure>

View File

@ -4,17 +4,16 @@
{{- if .Get "href" -}}
<a href="{{ .Get "href" }}">
{{- end -}}
<img src="{{ $image.RelPermalink }}"
{{- if or (.Get "alt") (.Get "caption") }}
alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify | plainify }}{{ end }}"
{{- end -}}
{{ if .Site.Params.enableImageLazyLoading | default true }}
loading="lazy"
{{ $altText := "" }}
{{ with .Get "alt" }}
{{ $altText = . }}
{{ else }}
{{ $altText = (.Get "caption") | markdownify | plainify }}
{{ end }}
width="100%"
height="auto"
style="max-width:{{ div $image.Width 2 }}px; max-height:{{ div $image.Height 2 }}px;"
/>
{{ partial "picture.html" (dict "img" $image "alt" $altText "x2" true) }}
{{- if .Get "href" }}</a>{{ end -}}
{{- if .Get "caption" -}}
<figcaption>

View File

@ -1,6 +1,6 @@
{
"name": "hugo-congo-theme",
"version": "2.7.5",
"version": "2.7.6",
"description": "Congo theme for Hugo",
"scripts": {
"preinstall": "rimraf assets/lib",