Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Begin fixing landing customization #148

Open
wants to merge 4 commits into
base: release
Choose a base branch
from
Open

Begin fixing landing customization #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ed28f5f
Begin fixing landing customization
indrora Dec 26, 2023
f586b8b
landing: Don't use scratch to get section title
indrora Jan 4, 2024
5d73283
finish moving around JS
indrora Jan 29, 2024
f090b4d
css: complete adding goat support
indrora Jan 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions assets/docs/scss/custom/structure/_content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,33 @@ i {
}
}


// goat diagrams
figure.goat.svg-container {

padding: 0.1rem;
align-items: center;
width: 100%;
@include media-breakpoint-up(md) {
width: auto;
padding:.5rem;
padding-left: auto;
padding-right: auto;
}
@include media-breakpoint-up(lg) {
padding: 1rem;
}
svg {
width:100%;
@include media-breakpoint-up(lg) {
max-width: 60rem;
}
font-family: var(--bs-font-monospace);
font-size: 0.7rem;
}
}


// Chroma Highlighter CSS
.docs-content .main-content td pre {

Expand Down
10 changes: 9 additions & 1 deletion assets/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,12 @@ function toggleMenu() {
} else {
isOpen.style.display = "block";
}
};
};

window.addEventListener("DOMContentLoaded", (ev) => {
const viewers = document.querySelectorAll(".image-compare");
viewers.forEach((element, i) => {
let view = new ImageCompare(element, JSON.parse(element.dataset.icConfig) ).mount();
});

});
14 changes: 3 additions & 11 deletions assets/scss/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,25 +27,17 @@ $font-family-monospace: {{ .Site.Params.mono_font | default "SFMono-Regular, Me
// Structure
@import "custom/structure/general";
@import "custom/structure/topbar";
// @import "custom/structure/content";
// @import "custom/structure/sidebar-layouts";
// @import "custom/structure/doc-nav";
// @import "custom/structure/toc-layouts";
@import "custom/structure/footer";

// // Components
// Components
@import "custom/components/buttons";
@import "custom/components/badge";
@import "custom/components/backgrounds";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMHO, this should not be removed. This breaks the background-color of the nav-pills of the image-comparer and maybe other things as well

// @import "custom/components/alerts";
// @import "custom/components/card";

// // Pages
// Pages
// @import "custom/pages/blog";

@import "custom/pages/features";
@import "custom/pages/helper";
@import "custom/pages/hero";
{{ if ($.Scratch.Get "image_compare_enabled") }}@import "custom/pages/image-compare-viewer";{{ end }}
@import "custom/pages/image-compare-viewer";

// @import "custom/pages/simplebar";
0 data/landing.yaml → data/landing_default.yaml
View file
Open in desktop
File renamed without changes.
47 changes: 6 additions & 41 deletions layouts/_default/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,19 @@
<!DOCTYPE html>
{{ $.Scratch.Delete "social_list" }}
{{ $.Scratch.Delete "social_list" -}}
<!-- social_list -->
{{ $social_params := slice "github" "twitter" "instagram" "rss" }}
{{ range $social_params }}
{{- $social_params := slice "github" "twitter" "instagram" "rss" -}}
{{- range $social_params -}}
{{ if isset site.Params.social . }}
{{ $.Scratch.Add "social_list" (slice .) }}
{{ end }}
{{ end }}
{{- end -}}

<!--
Is an image_compare landing page template enabled?
If so, collect and consolidate the items config from each enabled instance
-->
{{ $ic := newScratch }}
{{ range $value := .Site.Data.landing }}
{{ $template := string (replaceRE `( |-{1,})` "_" $value.template) }}
{{ if eq $template "image_compare" }}
{{ if $value.enable }}
{{ $ic.Add "enabled" (slice $value.enable) }}
{{ range $value.items }}
{{ $ic.Add "config" (slice (.config | jsonify | safeJS)) }}
{{ end }}
{{ end }}
{{- end }}
{{ end }}

{{ $.Scratch.Set "image_compare_enabled" (in ($ic.Get "enabled") true) }}
{{$.Page.Scratch.Set "image_compare_config" (slice ) }}
{{$.Page.Scratch.Set "image_compare_used" false }}

<html lang="{{ site.LanguageCode }}" dir="ltr">
{{- partial "head.html" . -}}
Expand All @@ -38,28 +26,5 @@
</div>
{{- partial "footer.html" . -}}

<!-- Lotus Docs JS -->
{{ $app := resources.Get "/js/app.js" }}
{{- if not .Site.IsServer }}
{{- $js := (slice $app) | resources.Concat "/js/bundle.js" | minify | fingerprint "sha384" }}
<script type="text/javascript" src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>
{{- else }}
{{- $js := (slice $app) | resources.Concat "/js/bundle.js" }}
<script type="text/javascript" src="{{ $js.Permalink }}" {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end }}></script>
{{- end }}

<!-- Image Compare Viewer Config -->
{{ if ($.Scratch.Get "image_compare_enabled") }}
<script>
const viewers = document.querySelectorAll(".image-compare");
let configs = [
{{ (delimit ($ic.Get `config`) `,`) | safeJS }}
];
viewers.forEach((element, i) => {
let view = new ImageCompare(element, configs[i]).mount();
});
</script>
{{ end }}

</body>
</html>
18 changes: 18 additions & 0 deletions layouts/docs/_markup/render-codeblock-goat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{{ $width := .Attributes.width }}
{{ $height := .Attributes.height }}
{{ $class := .Attributes.class | default "" }}
<figure class="goat svg-container {{ $class }}">
{{ with diagrams.Goat .Inner }}
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin"
{{ if or $width $height }}
{{ with $width }}width="{{ . }}"{{ end }}
{{ with $height }}height="{{ . }}"{{ end }}
{{ else }}
viewBox="0 0 {{ .Width }} {{ .Height }}"
{{ end }}>
{{ .Inner }}
</svg>
{{ end }}
</figure>
9 changes: 7 additions & 2 deletions layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
{{ define "main" }}
{{ $landingData := .Site.Data.landing }}

{{ $landingData := (default .Site.Data.landing_default .Site.Data.landing) }}


{{ $map := newScratch }}

{{ range $key, $value := $landingData }}
Expand All @@ -11,14 +14,16 @@
"weight" $weight
"template" $template
"sectionTitle" $sectionTitle
"data" $value
)}}
{{ end }}
{{ end }}

{{ range sort ($map.Get "wgtTpl") ".weight" }}

{{ $.Scratch.Set "sectionTitle" .sectionTitle }}
{{ $path := printf "landing/%s.html" .template }}
{{ partial $path $.Page }}
{{ partial $path . }}
{{ end }}
{{/* printf "%s" (sort ($map.Get "wgtTpl") ".weight" ) */}}
{{ end }}
17 changes: 5 additions & 12 deletions layouts/partials/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,26 +27,19 @@
{{- end -}}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" {{ if hugo.IsProduction }}integrity="{{ $style.Data.Integrity }}"{{ end -}}/>
<!-- Bootstrap JS -->
{{ $js := resources.Get "js/bootstrap.js" }}
{{- $imgviewjs := resources.Get "/js/image-compare-viewer.min.js" -}}
{{- $appjs := resources.Get "/js/app.js" -}}
{{- $bsjs := resources.Get "js/bootstrap.js" -}}
{{- $js := slice $bsjs $imgviewjs $appjs | resources.Concat "/js/bundle.js"}}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

my tests show that the image-compare-viewer sources are not properly embedded:

Uncaught ReferenceError: ImageCompare is not defined
    at bundle.js:1489:20
    at NodeList.forEach (<anonymous>)
    at bundle.js:1488:15

{{ $params := dict }}
{{ $sourceMap := cond hugo.IsProduction "" "inline" }}
{{ $opts := dict "sourceMap" $sourceMap "minify" hugo.IsProduction "target" "es2018" "params" $params }}
{{ $js = $js | js.Build $opts }}
{{ if hugo.IsProduction }}
{{ $js = $js | fingerprint "sha384" }}
{{ end }}

<script src="{{ $js.RelPermalink }}" {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end -}} defer></script>
<!-- Image Compare Viewer -->
{{ if ($.Scratch.Get "image_compare_enabled") }}
{{ $imagecompare := resources.Get "js/image-compare-viewer.min.js" }}
{{- if not .Site.IsServer }}
{{- $js := (slice $imagecompare) | resources.Concat "/js/image-compare.js" | minify | fingerprint "sha384" }}
<script type="text/javascript" src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>
{{- else }}
{{- $js := (slice $imagecompare) | resources.Concat "/js/image-compare.js" }}
<script type="text/javascript" src="{{ $js.Permalink }}" {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end }}></script>
{{- end }}
{{- end }}
<!-- Plausible Analytics Config -->
{{- if not .Site.IsServer }}
{{ if and (.Site.Params.plausible.scriptURL) (.Site.Params.plausible.dataDomain) -}}
Expand Down
4 changes: 1 addition & 3 deletions layouts/partials/landing/feature_grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
{{ $sectionTitle := .Scratch.Get "sectionTitle" }}
{{ with (index .Site.Data.landing $sectionTitle) }}
{{ if eq .enable true }}
{{- $sectionTitle := .sectionTitle }}{{ with .data }}{{ if eq .enable true }}
<!-- Features Start -->
<section id="{{ $sectionTitle }}">
<div class="container mt-100 mt-60">
Expand Down
6 changes: 2 additions & 4 deletions layouts/partials/landing/hero.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
{{ $sectionTitle := .Scratch.Get "sectionTitle" }}
{{ with (index .Site.Data.landing $sectionTitle) }}
{{ if eq .enable true }}
{{- $sectionTitle := .sectionTitle }}{{ with .data }}{{ if eq .enable true }}
<!-- Hero Start -->
{{ with .backgroundImage }}
{{ $path := .path | default "images" }}
Expand Down Expand Up @@ -62,7 +60,7 @@ <h4 class="heading mt-0 mb-3">

<div class="mt-3">
{{ with .ctaButton }}
<a href="{{ relLangURL .Site.Data.landing.hero.ctaButton.url }}" class="btn btn-lg btn-primary me-2 mt-2">
<a href="{{ relLangURL .url }}" class="btn btn-lg btn-primary me-2 mt-2">
{{ with .icon }}
<span class="material-icons align-middle">{{ . }}</span>
{{ end }}
Expand Down
9 changes: 5 additions & 4 deletions layouts/partials/landing/image_compare.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
{{ $sectionTitle := .Scratch.Get "sectionTitle" }}
{{ with (index .Site.Data.landing $sectionTitle) }}
{{ if eq .enable true }}
{{- $sectionTitle := .sectionTitle }}{{ with .data }}{{ if eq .enable true }}
{{- page.Scratch.Set "image_compare_used" true -}}
<section id="{{ $sectionTitle }}">
<div class="container mt-100 mt-60">
<div class="row justify-content-center">
Expand Down Expand Up @@ -39,14 +38,15 @@ <h4 class="title fw-bold mb-4">{{ . }}</h4>
<div class="tab-pane fade show{{ if (eq $index 0) }} active{{ end }}" id="pills-{{ $sectionTitle }}-{{ anchorize .title }}" role="tabpanel" aria-labelledby="{{ anchorize .title }}-tab">
<div class="row align-items-center">
<div class="col-md-12">
{{ $icc := (default nil .config ) }}
{{ $title := .title }}
{{ $path := .imagePath | default "images" }}
{{ $imageBefore := .imageBefore }}
{{ $imageAfter := .imageAfter }}
{{ $pathBefore := printf "%s/%s" $path $imageBefore }}
{{ $pathAfter := printf "%s/%s" $path $imageAfter }}
{{ with and $imageBefore $imageAfter }}
<div id="{{ anchorize $title }}-compare" class="image-compare rounded-md border">
<div id="{{ anchorize $title }}-compare" class="image-compare rounded-md border" data-ic-config='{{($icc | jsonify | safeJS)}}'>
{{ with $imageBefore := resources.Get $pathBefore }}
<img src="{{ .RelPermalink }}" alt="{{ $imageBefore }}" />
{{ end }}
Expand All @@ -64,5 +64,6 @@ <h4 class="title fw-bold mb-4">{{ . }}</h4>
</div><!--end row-->
</div><!--end container-->
</section>

{{ end }}
{{ end }}
4 changes: 1 addition & 3 deletions layouts/partials/landing/image_text.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
{{ $sectionTitle := .Scratch.Get "sectionTitle" }}
{{ with (index .Site.Data.landing $sectionTitle) }}
{{ if eq .enable true }}
{{- $sectionTitle := .sectionTitle }}{{ with .data }}{{ if eq .enable true }}
<!-- Single-Right Start -->
<section id="{{ $sectionTitle }}">
<div class="container mt-100 mt-60">
Expand Down