Preview/imagepartial fix (#76)

* Attempt #1 Signed-off-by: Chris Reddington <[email protected]> * Fix search action (#74) Signed-off-by: Chris Reddington <[email protected]> * Fix search string Signed-off-by: Chris Reddington <[email protected]> * Search fix template Signed-off-by: Chris Reddington <[email protected]> * Update template Signed-off-by: Chris Reddington <[email protected]> * Adjust banner size Signed-off-by: Chris Reddington <[email protected]> * Resize images Signed-off-by: Chris Reddington <[email protected]> * SEO Fixes, Package-lock fix Signed-off-by: Chris Reddington <[email protected]> * Tweaks to GH Actions Workflow Signed-off-by: Chris Reddington <[email protected]> * Tweak to external Signed-off-by: Chris Reddington <[email protected]> * Adjust to Date Signed-off-by: Chris Reddington <[email protected]> * Bug fix for missing mode Signed-off-by: Chris Reddington <[email protected]> * Markdown image fix Signed-off-by: Chris Reddington <[email protected]> * Rudimentary custom style functionality Signed-off-by: Chris Reddington <[email protected]>
CloudWithChris · Feb 23, 2022 · 3140426 · 3140426
1 parent 1e3bb90
commit 3140426
Show file tree

Hide file tree

Showing 21 changed files with 305 additions and 102 deletions.
diff --git a/.github/workflows/pr-checks.yaml b/.github/workflows/pr-checks.yaml
@@ -112,7 +112,7 @@ jobs:
           pushd $SITE_FOLDER_PATH/public
           sudo gem install html-proofer
           htmlproofer -v
-          htmlproofer --allow-hash-href --http-status-ignore "999" --url-ignore "/https://github.com/,/https://twitter.com/,https://fonts.googleapis.com"
+          htmlproofer --allow-hash-href --disable-external true
   lighthouse:
     needs: matrixBuild
     name: "Lighthouse Eval"
@@ -152,6 +152,7 @@ jobs:
             repo-token: ${{ secrets.GITHUB_TOKEN }}
             # Provide either site-dir or url
             url: ${{ steps.netlify.outputs.url }}
+            scan-timeout: '600000'
 
       - name: Upload report artifact
         uses: actions/upload-artifact@v2

diff --git a/REFERENCE.md b/REFERENCE.md
@@ -748,31 +748,37 @@ hugo new --kind talk talk/your-talk-slug
 ```yaml
 ---
 # Default hugo properties
-title: ""           # Name of the Person
-description: ""     # Used for SEO optimisation
-publishDate: ""     # TODO: Differentiate between date
-date: ""            # TODO: Differentiate between PublishDate
+title: ""             # Name of the Person
+description: ""       # Used for SEO optimisation
+publishDate: ""       # TODO: Differentiate between date
+date: ""              # TODO: Differentiate between PublishDate
 
 # Site-wide [required properties]
-image: ""           # Displayed when referenced in listing pages
-images:             # An array of images used in Social Sharing
+image: ""             # Displayed when referenced in listing pages
+images:               # An array of images used in Social Sharing
 - ""
-tags:               # Used for SEO optimisation and browsing across the site.
+tags:                 # Used for SEO optimisation and browsing across the site.
 - ""
 - ""
 
 # Site-wide [optional properties]
-banner: ""          # Optional, but strongly recommended to give a professional feel
-externalLink: ""    # Full URL to override listing links to an external page
-series:             # Array of series (i.e. filenames of the series this is a part of)
+series:               # Array of series (i.e. filenames of the series this is a part of)
 - ""
 
 # Content-specific properties
-eventName: ""       # Name of the organising group / event (e.g. Name of the conference)
-hosts:              # Array of hosts in the episode (i.e. filenames of those people)
+event:
+  attendanceType: ""  # physical, virtual, hybrid
+  organizerName: ""   # Name of the organising group / event (e.g. Name of the conference)
+  organizerUrl: ""    # URL of the organising group
+  eventUrl: ""        # URL of the specific event, if applicable (e.g. a meetup talk, rather than the meetup group)
+  type: ""            # Type of event (e.g. Meetup, Conference, etc.)
+  location: ""        # Required for physical and hybrid events.
+  cost: ""            # Cost to attend the event
+  costCurrency: ""    # Cost currency for the event. Use a standard format - http://en.wikipedia.org/wiki/ISO_4217
+  available: "" # Whether registration/ticket purchases/etc. are still available (true/false). Defaults to false when event is in past.
+speakers:             # Array of hosts in the episode (i.e. filenames of those people).
 - ""
-talkType: ""        # String displayed on the talk page. Represents the type of talk.
-youtube: ""         # ID of the YouTube video for this content
+youtube: ""           # ID of the YouTube video for this content
 ---
 Input your talk description here.
-```
+```
diff --git a/archetypes/talk/index.md b/archetypes/talk/index.md
@@ -1,28 +1,35 @@
 ---
 # Default hugo properties
-title: ""           # Name of the Person
-description: ""     # Used for SEO optimisation
-publishDate: ""     # TODO: Differentiate between date
-date: ""            # TODO: Differentiate between PublishDate
+title: ""             # Name of the Person
+description: ""       # Used for SEO optimisation
+publishDate: ""       # TODO: Differentiate between date
+date: ""              # TODO: Differentiate between PublishDate
 
 # Site-wide [required properties]
-image: ""           # Displayed when referenced in listing pages
-images:             # An array of images used in Social Sharing
+image: ""             # Displayed when referenced in listing pages
+images:               # An array of images used in Social Sharing
 - ""
-tags:               # Used for SEO optimisation and browsing across the site.
+tags:                 # Used for SEO optimisation and browsing across the site.
 - ""
 - ""
 
 # Site-wide [optional properties]
-externalLink: ""    # Full URL to override listing links to an external page
-series:             # Array of series (i.e. filenames of the series this is a part of)
+series:               # Array of series (i.e. filenames of the series this is a part of)
 - ""
 
 # Content-specific properties
-eventName: ""       # Name of the organising group / event (e.g. Name of the conference)
-hosts:              # Array of hosts in the episode (i.e. filenames of those people)
+event:
+  attendanceType: ""  # physical, virtual, hybrid
+  organizerName: ""   # Name of the organising group / event (e.g. Name of the conference)
+  organizerUrl: ""    # URL of the organising group
+  eventUrl: ""        # URL of the specific event, if applicable (e.g. a meetup talk, rather than the meetup group)
+  type: ""            # Type of event (e.g. Meetup, Conference, etc.)
+  location: ""        # Required for physical and hybrid events.
+  cost: ""            # Cost to attend the event
+  costCurrency: ""    # Cost currency for the event. Use a standard format - http://en.wikipedia.org/wiki/ISO_4217
+  available: "" # Whether registration/ticket purchases/etc. are still available (true/false). Defaults to false when event is in past.
+speakers:             # Array of hosts in the episode (i.e. filenames of those people).
 - ""
-talkType: ""        # String displayed on the talk page. Represents the type of talk.
-youtube: ""         # ID of the YouTube video for this content
+youtube: ""           # ID of the YouTube video for this content
 ---
 Input your talk description here.
diff --git a/assets/sass/custom_variables.scss b/assets/sass/custom_variables.scss
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -1,8 +1,25 @@
 $fa-font-path: "/webfonts";
 $breadcrumb-divider: quote(">");
 
-@import "custom_variables";
+$mainlink-color: {{ .Site.Params.content.theme.mainlinkcolor | default "#0C62A8" }};
+$accent-color: {{ .Site.Params.content.theme.accentcolor | default "#157DB9" }};
+$footer-color: {{ .Site.Params.content.theme.footercolor | default "#157DB9" }};
+$compliment-color: {{ .Site.Params.content.theme.complimentcolor | default "#CFDCE1" }};
 
+$theme-colors: (
+  "primary":    #FFFFFF,
+  "secondary":  #FFFFFF,
+  "success":    #FFFFFF,
+  "info":       #FFFFFF,
+  "warning":    #FFFFFF,
+  "danger":     #FFFFFF,
+  "light":      #FFFFFF,
+  "dark":       #FFFFFF
+);
+
+$blockquote-border-color: $accent-color;
+$blockquote-border-width: 5px;
+$blockquote-font-size: 15px;
 
 // Custom.scss
 // Option B: Include parts of Bootstrap

diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
@@ -20,7 +20,7 @@ blockquote {
 }
 
 .MuiTypography-colorInherit {
-  color: #0C62A8 !important;
+  color: $mainlink-color !important;
 }
 
 .navbar-dark .navbar-nav .nav-link {
@@ -88,7 +88,7 @@ footer a {
 }
 
 main a {
-  color: #0C62A8;
+  color: $mainlink-color;
   text-decoration: none;
 }
 

diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
@@ -161,6 +161,11 @@ params:
       twitter: "CloudWithChris"
       twitter_domain: "cloudwithchris.com" # This domain shows in twitter cards as "View on `twitter_domain`"
       youtube: "CloudWithChris"
+    theme:
+      accentcolor: "#FF0000"
+      complimentcolor: "#FFFFFF"
+      footercolor: "#FF0000"
+      mainlinkcolor: "#000000"
   # Parameters relating to site features and functionality
   features:
     # Settings relating to audio players embedded 

diff --git a/exampleSite/content/talk/waug-azure-arc/index.md b/exampleSite/content/talk/waug-azure-arc/index.md
@@ -4,20 +4,25 @@ Description: "Azure Arc is a suite of Azure Services that simplifies management
 PublishDate: "2021-09-29T15:30:00Z"
 Title: "Using Azure Arc to run your Application Services on-premises or in any cloud"
 image: img/talks/waug.jpg
-hosts:
+speakers:
 - chrisreddington
 images:
 - img/talks/waug.jpg
 - img/cloudwithchris.png
-talkType: "Meetup"
-eventName: "Welsh Azure User Group"
 tags:
 - Azure
 - Azure Arc
 - Developer
 - Hybrid
 - Multicloud
 - Serverless
-externalLink: https://www.youtube.com/watch?v=rwJ62UqA4oQ
+youtube: "rwJ62UqA4oQ"
+event:
+  attendanceType: "hybrid"  # physical, virtual, hybrid
+  organizerName: "Welsh Azure User Group"   # Name of the organising group / event (e.g. Name of the conference)
+  organizerUrl: "https://www.meetup.com/MSFT-Stack/"             # URL of the organising group
+  eventUrl: "https://www.meetup.com/MSFT-Stack/"    # URL of the specific event, if applicable (e.g. a meetup talk, rather than the meetup group)
+  type: "Meetup"            # Type of event (e.g. Meetup, Conference, etc.)
+  location: "Somewhere cool"        # Required for physical and hybrid events.
 ---
 Azure Arc is a suite of Azure Services that simplifies management of workloads in a Hybrid and Multicloud deployment. You've likely heard about this from the Infrastructure or Virtual Machine perspective, but how can it help with your applications? We'll explore how App Services, Logic Apps, Azure Functions, Event Grid and API Management Gateways can be deployed to on-premises and other clouds using Azure Arc!
diff --git a/exampleSite/package-lock.json b/exampleSite/package-lock.json
diff --git a/exampleSite/package-lock.old.json b/exampleSite/package-lock.old.json
@@ -0,0 +1,42 @@
+{
+  "name": "hugo-creator",
+  "version": "2.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "hugo-creator",
+      "version": "2.0.0",
+      "dependencies": {
+        "@fortawesome/fontawesome-free": "^5.15.2",
+        "bootstrap": "^5.0.0-beta2"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz",
+      "integrity": "sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/bootstrap": {
+      "version": "5.0.0-beta2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0-beta2.tgz",
+      "integrity": "sha512-e+uPbPHqTQWKyCX435uVlOmgH9tUt0xtjvyOC7knhKgOS643BrQKuTo+KecGpPV7qlmOyZgCfaM4xxPWtDEN/g=="
+    }
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": {
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz",
+      "integrity": "sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA=="
+    },
+    "bootstrap": {
+      "version": "5.0.0-beta2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0-beta2.tgz",
+      "integrity": "sha512-e+uPbPHqTQWKyCX435uVlOmgH9tUt0xtjvyOC7knhKgOS643BrQKuTo+KecGpPV7qlmOyZgCfaM4xxPWtDEN/g=="
+    }
+  }
+}
diff --git a/exampleSite/package.json b/exampleSite/package.json
@@ -4,6 +4,6 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.0.0",
-    "bootstrap": "^5.0.0-beta2"
+    "bootstrap": "^5.0.0"
   }
 }
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
@@ -1,8 +1,32 @@
 {{ if .Title }}
   <figure class="figure text-center">
-    <img class="img-fluid" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" loading="lazy">
+    {{ template "image" (dict "context" . "page" .Page) }}
     <figcaption class="figure-caption">{{ .Title }}</figcaption>
   </figure>
 {{ else }}
-  <img class="img-fluid" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" loading="lazy">
+  {{ template "image" (dict "context" . "page" .Page)  }}
+{{ end }}
+
+
+{{ define "image" }}
+{{ $context := .context }}
+{{ $page := .page }}
+{{ $image := $page.Resources.GetMatch $context.Destination }}
+{{ $tiny := ($image.Resize "480x webp") }}
+{{ $small := ($image.Resize "768x webp") }}
+{{ $medium := ($image.Resize "1024x webp") }}
+{{ $large := ($image.Resize "1366x webp") }}
+<img class="img-fluid" loading="lazy"
+    srcset="
+    {{- with $tiny.RelPermalink -}}{{.}} 480w{{- end -}}
+    {{- with $small.RelPermalink -}}, {{.}} 768w{{- end -}}
+    {{- with $medium.RelPermalink -}}, {{.}} 1024w{{- end -}}
+    {{- with $large.RelPermalink -}}, {{.}} 1366w{{- end -}}" 
+    src="{{ $image.RelPermalink }}" 
+    sizes="(max-width: 600px) 480px,
+          (max-width: 800px) 768px,
+          (max-width: 1050px) 1024px,
+          1366px"
+    alt="{{ $context.Text }}" 
+    title="{{ $context.Text }}" />
 {{ end }}
diff --git a/layouts/partials/cards/content-card.html b/layouts/partials/cards/content-card.html
@@ -26,7 +26,7 @@
         {{ end }}
 
         {{ if eq .Type "talk" }}
-          {{ partial "content/people.html" (dict "people" .Params.Hosts "site" $site "size" 50 )}}
+          {{ partial "content/people.html" (dict "people" .Params.Speakers "site" $site "size" 50 )}}
         {{ end }}
     </div>
 

diff --git a/layouts/partials/content/banner-image.html b/layouts/partials/content/banner-image.html
@@ -16,9 +16,9 @@
               {{- with $large.RelPermalink -}}, {{.}} 1366w{{- end -}}" 
           src="{{ $banner.RelPermalink }}" 
           sizes="(max-width: 600px) 480px,
-                 (max-width: 800px) 480px,
-                 (max-width: 1050px) 480px,
-                 768px"
+                 (max-width: 800px) 768px,
+                 (max-width: 1050px) 1024px,
+                 1366px"
           alt="{{ $content.Title }}" 
           title="{{ $content.Title }}" />
   </a>