Banner area change (#89)

* Work in progress Signed-off-by: Chris Reddington <791642+chrisreddington@users.noreply.github.com> * WIP - Dynamic content (linked) Signed-off-by: Chris Reddington <791642+chrisreddington@users.noreply.github.com> * Banner update Signed-off-by: Chris Reddington <791642+chrisreddington@users.noreply.github.com> * Update footer
CloudWithChris · Mar 16, 2022 · ee25e7d · ee25e7d
1 parent c71c583
commit ee25e7d
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 89 deletions.
diff --git a/exampleSite/data/popular.json b/exampleSite/data/popular.json
@@ -0,0 +1 @@
+["/blog/hello-world/", "/blog/build-2021-summary/", "/blog/jamstack-cloud-winning-combination/", "/blog/api-management-and-policies/", "/blog/static-web-apps-vs-storage-account-static-sites/", "/blog/azuredevops-selfhosted-agents-on-azure/", "/blog/secure-app-service-with-easy-auth-and-app-gateway-public/", "/blog/api-management-and-additional-policies/", "/blog/github-action-docker-dotnet-core/", "/blog/using-oidc-github-actions-azure-swa/"]
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,53 +1,88 @@
 {{ define "top" }}
   <section class="container">
-    <div class="col">      
-      {{ $featuredContent := where .Site.Pages "Params.featured" ">" 0 }}
-      {{ $featuredContentCount := len $featuredContent }}
-      {{ if gt $featuredContentCount 0 }}
-        <div class="row my-3">
-          <div id="featuredContent" class="carousel slide" data-bs-ride="carousel">
-            <div class="carousel-indicators">
-              {{ range $index, $value := $featuredContent }}
-                <button type="button" data-bs-target="#featuredContent" data-bs-slide-to="{{ $index }}" {{ if (eq $index 0) }}class="active"{{ end }} aria-current="true" aria-label="{{ $value.Title}}"></button>
-              {{ end }}
+    <div class="row my-3">
+      <div class="col-lg-8 col-sm-12 px-0 px-lg-3">
+        {{ $featuredContent := where .Site.Pages "Params.featured" ">" 0 }}
+        {{ $featuredContentCount := len $featuredContent }}
+        {{ if gt $featuredContentCount 0 }}
+          <div class="row">
+            <div id="featuredContent" class="carousel slide" data-bs-ride="carousel">
+              <div class="carousel-indicators">
+                {{ range $index, $value := $featuredContent }}
+                  <button type="button" data-bs-target="#featuredContent" data-bs-slide-to="{{ $index }}" {{ if (eq $index 0) }}class="active"{{ end }} aria-current="true" aria-label="{{ $value.Title}}"></button>
+                {{ end }}
+              </div>
+              <div class="carousel-inner">
+                {{ range $index, $value := $featuredContent }}
+                  <div class="carousel-item {{ if (eq $index 0) }}active{{ end }}">
+                    {{ $image := .Resources.GetMatch .Params.Banner }}
+                    {{ if $image }}
+                      {{ template "carouselImage" dict "currentItem" .Page "url" ($image.RelPermalink | relURL) "index" $index }}
+                    {{ else }}
+                      {{ template "carouselImage" dict "currentItem" .Page "url" (.Params.Image | relURL) "index" $index }}
+                    {{ end }}
+                  </div>
+                {{ end }}
+              </div>
+              <button class="carousel-control-prev" type="button" data-bs-target="#featuredContent" data-bs-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Previous</span>
+              </button>
+              <button class="carousel-control-next" type="button" data-bs-target="#featuredContent" data-bs-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Next</span>
+              </button>
             </div>
-            <div class="carousel-inner">
-              {{ range $index, $value := $featuredContent }}
-                <div class="carousel-item {{ if (eq $index 0) }}active{{ end }}">
-                  {{ $image := .Resources.GetMatch .Params.Banner }}
-                  {{ if $image }}
-                    {{ template "carouselImage" dict "currentItem" .Page "url" ($image.RelPermalink | relURL) "index" $index }}
-                  {{ else }}
-                    {{ template "carouselImage" dict "currentItem" .Page "url" (.Params.Image | relURL) "index" $index }}
-                  {{ end }}
+          </div>
+        {{ end }}
+      </div>
+      <div class="col-lg-4 col-sm-12 d-flex flex-column justify-content-between">
+        <h1>Coming up</h1>
+        {{ $comingUp := (where .Site.RegularPages ".Params.upcoming" "==" true).ByDate | first 4 }}
+        {{ range $index, $value := $comingUp }}
+          <div class="row gy-1 my-1 {{ if (ge $index 3) }} d-none d-xl-block{{ end }}">
+            <a href="{{ .Permalink }}" class="card bg-cwc text-white">
+              <div class="card-body">
+                <h1 class="fs-6 card-title">{{ .Title }}</h1>
+                <div class="d-flex">
+                  <div class="flex-fill">
+                    {{ partial "content/type" . }}
+                  </div>
+                  <div class="flex-fill">
+                    <i class="fa-solid fa-calendar me-2"></i>
+                    {{ .Date.Format "January 2, 2006" }}
+                  </div>
                 </div>
-              {{ end }}
-            </div>
-            <button class="carousel-control-prev" type="button" data-bs-target="#featuredContent" data-bs-slide="prev">
-              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-              <span class="visually-hidden">Previous</span>
-            </button>
-            <button class="carousel-control-next" type="button" data-bs-target="#featuredContent" data-bs-slide="next">
-              <span class="carousel-control-next-icon" aria-hidden="true"></span>
-              <span class="visually-hidden">Next</span>
-            </button>
+              </div>
+            </a>
           </div>
-        </div>
-      {{ end }}
-
-      <div class="row {{ if eq $featuredContentCount 0 }}pt-3{{ end }}">
-        {{ $query := first 3 (where (where $.Site.RegularPages "Section" "episode") ".Params.upcoming" true).ByDate }}
-        {{ $count := len $query }}
-        {{ $site := .Site }}
-
-        {{ range $query }}         
-          {{- partial "component/upcoming-content.html" (dict "count" $count "content" . "site" $site) -}}
         {{ end }}
-      </div>  
-      <div class="row float-end">
-        <p><a href="{{ "/upcoming" | relURL }}">See all upcoming episodes</a></p>
       </div>
     </div>
+    <div class="row">
+      <h1>Popular</h1>
+    </div>
+    <div class="row">
+      {{ $popular := $.Site.Data.popular | first 3 }}
+      {{ range where $.Site.RegularPages "RelPermalink" "in" $popular }}
+        <div class="px-0 px-lg-2 mh-100 h-100 col-lg-4 col-sm-12 my-2">
+          <a href="{{ .Permalink }}" class="card bg-cwc text-white">
+            <div class="card-body">
+              <h2 class="fs-6 card-title">{{ .Title }}</h2>
+              <div class="d-flex">
+                <div class="flex-fill">
+                  {{ partial "content/type" . }}
+                </div>
+                <div class="flex-fill">
+                  <i class="fa-solid fa-calendar me-2"></i>
+                  {{ .Date.Format "January 2, 2006" }}
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      {{ end }}
+    </div>
   </section>
 {{ end }}
 
@@ -76,7 +111,6 @@ <h1 class="card-title">
     </div>
   </div>
 </div>
-</a>
 
 {{ end }}
 

diff --git a/layouts/partials/content/type.html b/layouts/partials/content/type.html
@@ -0,0 +1,12 @@
+{{ $icon := "generic" }}
+
+{{ if eq .Type "episode" }}
+  {{ $icon = "fa-solid fa-play" }}
+{{ else if eq .Type "blog" }}
+  {{ $icon = "fa-solid fa-pencil" }}
+{{ else if eq .Type "talk" }}
+  {{ $icon = "fa-solid fa-chalkboard-user" }}
+{{ end }}
+  <i class="{{ $icon }} me-2"></i>
+  {{ .Type | humanize }}
+</span>
diff --git a/layouts/partials/footer/all.html b/layouts/partials/footer/all.html
@@ -1,54 +1,54 @@
 <footer class="mt-auto">
-  <nav class="navbar">
-    <div class="container">
-      <div class="row justify-content-md-center">
-        <div class="col-12 d-flex justify-content-center">
-          <div class="row">
-            <ul class="nav">
-              <li class="nav-item"><a class="nav-link" href="#" id="changePreferences">Cookie Preferences</a></li>
-              {{ $currentPage := . }}
-                {{ range .Site.Menus.footer }}
-                  {{ partial "nav-links.html" (dict "context" . "currentPage" $currentPage) }}
-                {{ end }}
-            </ul>
-          </div>
-        </div>
-        <div class="col-12 col-md-6">
-          <ul class="icons nav">
-            {{ with .Site.Params.content.social.YouTube }}
-              <li class="nav-item">            
-                <a class="nav-link" href="https://www.youtube.com/c/{{ . }}"><button type="button" aria-label="YouTube" class="btn btn-social btn-youtube btn-rounded"><i class="fab fa-youtube"></i></button></a>
-              </li>
-            {{ end }}
-            {{ with .Site.Params.content.social.Twitter }}
-              <li class="nav-item">
-                <a class="nav-link" href="https://twitter.com/{{ . }}" aria-label="Twitter"><button aria-label="Twitter" type="button" class="btn btn-social btn-twitter btn-rounded"><i class="fab fa-twitter"></i></button></a>
-              </li>
-            {{ end }}
-            {{ with .Site.Params.content.social.Facebook }}
-              <li class="nav-item">
-
-                <a class="nav-link" href="https://facebook.com/{{ . }}" aria-label="Twitter"><button aria-label="Twitter" type="button" class="btn btn-social btn-facebook btn-rounded"><i class="fab fa-facebook"></i></button></a>
-              </li>  
-            {{ end }}        
-            {{ with .Site.Params.content.social.GitHub }}
-              <li class="nav-item">
-                <a class="nav-link" href="https://github.com/{{ . }}" aria-label="GitHub"><button type="button" aria-label="GitHub" class="btn btn-social btn-github btn-rounded"><i class="fab fa-github"></i></button></a>
-              </li>
-            {{ end }}
-          </ul>
+  <div class="container">
+    <div class="row justify-content-center">
+      <nav class="navbar navbar-expand navbar-dark bg-cwc justify-content-center">
+        <ul class="nav navbar-nav">
+          <li class="nav-item ">
+            <a class="nav-link" href="#" id="changePreferences">Cookie Preferences</a>
+          </li>
+          {{ $currentPage := . }}
+            {{ range .Site.Menus.footer }}
+              {{ partial "nav-links.html" (dict "context" . "currentPage" $currentPage) }}
+            {{ end }}      
+        </ul>    
+      </nav>
+    </div>
+    <div class="row">
+      <div class="col-12 col-md-6">
+        <ul class="icons nav justify-content-center">
+          {{ with .Site.Params.content.social.YouTube }}
+            <li class="nav-item">            
+              <a class="nav-link" href="https://www.youtube.com/c/{{ . }}"><button type="button" aria-label="YouTube" class="btn btn-social btn-youtube btn-rounded"><i class="fab fa-youtube"></i></button></a>
+            </li>
+          {{ end }}
+          {{ with .Site.Params.content.social.Twitter }}
+            <li class="nav-item">
+              <a class="nav-link" href="https://twitter.com/{{ . }}" aria-label="Twitter"><button aria-label="Twitter" type="button" class="btn btn-social btn-twitter btn-rounded"><i class="fab fa-twitter"></i></button></a>
+            </li>
+          {{ end }}
+          {{ with .Site.Params.content.social.Facebook }}
+            <li class="nav-item">
+
+              <a class="nav-link" href="https://facebook.com/{{ . }}" aria-label="Twitter"><button aria-label="Twitter" type="button" class="btn btn-social btn-facebook btn-rounded"><i class="fab fa-facebook"></i></button></a>
+            </li>  
+          {{ end }}        
+          {{ with .Site.Params.content.social.GitHub }}
+            <li class="nav-item">
+              <a class="nav-link" href="https://github.com/{{ . }}" aria-label="GitHub"><button type="button" aria-label="GitHub" class="btn btn-social btn-github btn-rounded"><i class="fab fa-github"></i></button></a>
+            </li>
+          {{ end }}
+        </ul>
+      </div>
+      <div class="col-12 col-md-6">
+        <div class="row justify-content-center text-white text-wrap">
+          <p>&copy; {{ .Site.Params.content.site.copyright.established | markdownify }} - {{ dateFormat "2006" now }} {{ .Site.Params.content.site.copyright.notice | markdownify }}</p>
         </div>
-        <div class="col-12 col-md-6">
-          <div class="row justify-content-center text-white text-wrap">
-            <p>&copy; {{ .Site.Params.content.site.copyright.established | markdownify }} - {{ dateFormat "2006" now }} {{ .Site.Params.content.site.copyright.notice | markdownify }}</p>
-          </div>
-          <div class="row justify-content-center text-white text-wrap">
-            <p>{{ .Site.Params.content.site.copyright.additional_information | markdownify }}</p>
-          </div>
+        <div class="row justify-content-center text-white text-wrap">
+          <p>{{ .Site.Params.content.site.copyright.additional_information | markdownify }}</p>
         </div>
       </div>
     </div>
-  </nav>
+  </div>
 </footer>
 <!-- JavaScript and dependencies -->
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		["/blog/hello-world/", "/blog/build-2021-summary/", "/blog/jamstack-cloud-winning-combination/", "/blog/api-management-and-policies/", "/blog/static-web-apps-vs-storage-account-static-sites/", "/blog/azuredevops-selfhosted-agents-on-azure/", "/blog/secure-app-service-with-easy-auth-and-app-gateway-public/", "/blog/api-management-and-additional-policies/", "/blog/github-action-docker-dotnet-core/", "/blog/using-oidc-github-actions-azure-swa/"]