Merge pull request #13 from torizon/castello/style

Page Style Layout Improvements & Tooling
torizon · Aug 19, 2024 · e55a5c1 · e55a5c1
2 parents d4f99d9 + 31073ea
commit e55a5c1
Show file tree

Hide file tree

Showing 20 changed files with 401 additions and 53 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,5 +1,6 @@
 {
     "recommendations": [
-        "eliostruyf.vscode-front-matter"
+        "eliostruyf.vscode-front-matter",
+        "microhobby.taskrunnercodeplus"
     ]
-}
+}
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -0,0 +1,34 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "start-hugo",
+            "detail": "Start the Hugo server to be used as a development server",
+            "hide": false,
+            "command": "docker",
+            "type": "shell",
+            "args": [
+                "run",
+                "--rm",
+                "-it",
+                "-v",
+                "${workspaceFolder}:/src",
+                "-p",
+                "1313:1313",
+                "klakegg/hugo:ext-alpine",
+                "server"
+            ],
+            "problemMatcher": [
+                "$tsc"
+            ],
+            "presentation": {
+                "reveal": "always"
+            },
+            "icon": {
+                "id": "run",
+                "color": "terminal.ansiBlue"
+            },
+            "group": "none"
+        }
+    ]
+}
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
@@ -0,0 +1,15 @@
+<!-- Images that use the standard image format for markdown will be displayed in a
+  magnific modal popup. Use format ![alt text](/path/to/image.img) -->
+<!-- Place this file in layouts > _default > _markup > render-image.html -->
+<!-- Also place the image-modal.css and partial/image-modal.html appropriately. -->
+<!-- Id for the image on the page is set to a random 6 numbers, chosen from 1 to 500 -->
+<!-- Onclick opens the modal, and displays/overlays the the image that has the id for the
+  clicked image. -->
+<!-- attribution appreciated. github: zjeaton web: https://froglegs.co -->
+
+<div class="md__image centered-figure">
+    <img class="auto-sized-image" width="70%" id="{{ first 6 (shuffle (seq 1 500)) }}" src="{{ .Destination | safeURL }}" onclick="openModal(this.id)" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
+    <figcaption>
+        <h4>{{ .Text }}</h4>
+    </figcaption>
+</div>
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -5,14 +5,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     {{ if .Params.Description }}
-    <meta name="description" content="{{ .Params.Description }}">{{ end }}
+    <meta name="description" content="{{ .Params.Description }}">
+    {{ end }}
     {{ if .Params.Author }}
-    <meta name="author" content="{{ .Params.Author }}">{{ end }}
+    <meta name="author" content="{{ .Params.Author }}">
+    {{ end }}
+    {{ partial "meta-og.html" . }}
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="/favicon.png" type="image/png" />
     <title>{{ .Title }}</title>
     <link rel="stylesheet" href="/css/normalize.css">
     <link rel="stylesheet" href="/css/main.css">
     <link rel="stylesheet" href="/css/center.css">
     <link rel="stylesheet" href="/css/imgcaption.css">
+    <link rel="stylesheet" href="/css/image-modal.css">
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-B4YDVYDFR4"></script>
@@ -25,9 +31,12 @@
 </head>
 
 <body>
+    {{ partial "image-modal.html" }}
     {{ partial "header.html" . }}
     {{ block "main" . }}{{ end }}
     {{ partial "footer.html" . }}
 </body>
 
-</html>
+<script src="/js/main.js"></script>
+
+</html>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -1,32 +1,48 @@
 {{ define "main" }}
 <div id="hero">
     <div class="container">
-        <h1>Engineering<br/>at the Edge</h1>
+        <h1>Engineering<br/>at the Edge <span class="blink">_</span> </h1>
         <p>Welcome to the Torizon R&D team's blog.</p>
     </div>
 </div>
 
-<div id="last-post">
-    {{ with (index .Pages.ByDate.Reverse 0) }}
-    <div id="last-post-pic">
-        <a href="{{ .Permalink }}"><img src="{{ .Params.Image }}" alt="Card Image"></a>
-    </div>
-    <div class="card-content">
-        <p class="card-date">{{ .Date.Format "January 02, 2006" }}</p>
-        {{ if .Params.Series }}<h6>{{ .Params.Series }}</h6>{{ end }}
-        <h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
-        <p class="card-description">{{ .Params.Abstract | truncate 200 }}</p>
-    </div>
-    {{ end }}
-</div>
-
 <main class="container" id="posts-list">
     <!-- <label for="select-tag">Filter by:</label>
     <select name="select-tag" id="select-tag">
         {{ range .Site.Params.tags }}
         <option value=".">{{ . }}</option>
         {{ end }}
     </select> -->
+
+    <div id="last-post">
+        {{ with (index .Pages.ByDate.Reverse 0) }}
+        <div class="card-content">
+            <p class="card-date">{{ .Date.Format "January 02, 2006" }}</p>
+            <div class="card-info-grid">
+                {{ if .Params.userId }}
+                <!-- profile img -->
+                <p class="card-written-by">
+                    <img class="card-written-by-profile-img" src="https://avatars.githubusercontent.com/u/{{ .Params.userId }}" />
+                </p>
+                {{ else }}
+                <p></p>
+                {{ end }}
+                <!-- blog info -->
+                {{ if .Params.Series }}<h6>{{ .Params.Series }}</h6>{{ end }}
+                <h4 class="card-title title-last-post"><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
+                <p></p>
+                <p class="last-card-description">{{ .Params.Abstract | truncate 200 }}</p>
+            </div>
+        </div>
+        <div id="last-post-pic">
+            <div id="last-post-pic-back-blur" style="background-image: url('{{ .Params.Image }}');"></div>
+            <a href="{{ .Permalink }}">
+                <img src="{{ .Params.Image }}" alt="Card Image" />
+            </a>
+        </div>
+        {{ end }}
+    </div>
+
     <div id="posts">
         {{ $paginator := .Paginate (after 1 .Pages) }}
         {{ range .Paginator.Pages }}
@@ -57,4 +73,8 @@ <h4 class="card-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
         {{ end }}
     </div>
 </main>
+<!-- these are placed here to have some content above the footer -->
+<br/>
+<br/>
+<br/>
 {{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -2,7 +2,19 @@
 <main id="article-page">
     <article>
         <h1>{{ .Title }}</h1>
-        <p class="article-info">{{ .Date.Format "January 02, 2006" }}<br/>Written by {{ .Params.Author }}</p>
+        {{ if .Params.userId }}
+        <a href="#" onclick="openGithubProfileFromUserId('{{ .Params.userId }}')">
+        {{ else }}
+        <a href="#">
+        {{ end }}
+            <p class="article-info">
+                {{ if .Params.userId }}
+                    <img class="profile-img" src="https://avatars.githubusercontent.com/u/{{ .Params.userId }}" /><br/>
+                {{ end }}
+                {{ .Date.Format "January 02, 2006" }}<br/>
+                Written by {{ .Params.Author }}
+            </p>
+        </a>
         <div>{{ .Content }}</div>
         <div id="inline-share">
             <p>SHARE</p>
@@ -34,4 +46,8 @@ <h1>{{ .Title }}</h1>
         </p>
     </div>
 </main>
+<!-- these are placed here to have some content above the footer -->
+<br/>
+<br/>
+<br/>
 {{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,3 +1,3 @@
-<footer>
+<footer class="footer-scrolled">
     &copy; Torizon {{ time.Now.Year }}
-</footer>
+</footer>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,7 +1,7 @@
 <header>
     <nav>
         <div class="container">
-            <div class="navbar-logo"><a href="/"><img src="/img/logo.png" /></a></div>
+            <div class="navbar-logo"><a href="/"><img src="/img/logoOldButModern.png" /></a></div>
             <ul>
                 <li {{ if (eq .RelPermalink "/") }} selected="true" {{end}} ><a href="/">Blog</a></li>
                 <!-- <li {{ if (eq .RelPermalink "/open-source") }} selected="true" {{end}} ><a href="#">Open Source</a></li>
@@ -11,4 +11,4 @@
             <div class="github-icon"><a href="https://github.com/torizon/blog" target="_blank"><span class="inline-icon">{{ partial "fontawesome"  "assets/fa/github.svg" }}</span></a></div>
         </div>
     </nav>
-</header>
+</header>
diff --git a/layouts/partials/image-modal.html b/layouts/partials/image-modal.html
@@ -0,0 +1,12 @@
+<!-- Place in layouts > partials > image-modal.html -->
+<!-- Use the partial at the bottom of any page in which you want magnific pop-up images,
+  or simply place at the bottom of baseof.html -->
+<!-- Modal will open upon clicking the image. Modal will close with clicking the x or image. -->
+
+<!-- The Modal -->
+<div id="myModal" class="modal">
+    <button class="modal-close" onclick="closeModal()">close</button>
+    <div class="modal-content">
+      <img class="modal-pic" id="modalPic" onclick="closeModal()" style="max-width: 100%; max-height: 80vh; margin: auto;">
+    </div>
+</div>
diff --git a/layouts/partials/meta-og.html b/layouts/partials/meta-og.html
@@ -0,0 +1,17 @@
+{{ if .Params.title }}
+    <meta property="og:title" content="{{ .Params.title }}" />
+{{ else }}
+    <meta property="og:title" content="Engineering at the Edge" />
+{{ end }}
+{{ if .Params.abstract }}
+    <meta property="og:description" content="{{ .Params.abstract }}" />
+{{ end }}
+{{ if .Params.title }}
+    <meta property="og:type" content="aticle" />
+{{ end }}
+    <meta property="og:url" content="{{ .Permalink }}" />
+{{ if .Params.ogImage }}
+    <meta property="og:image" content="{{ .Params.ogImage }}" />
+{{ else }}
+    <meta property="og:image" content="{{ .Permalink }}img/mainOg.jpg" />
+{{ end }}
diff --git a/static/css/center.css b/static/css/center.css
@@ -4,4 +4,9 @@
     margin-right: auto;
     text-align: center;
     margin: 0 auto;
-}
+}
+
+.auto-sized-image {
+    max-width: 100%;
+    height: auto;
+}
diff --git a/static/css/image-modal.css b/static/css/image-modal.css
@@ -0,0 +1,69 @@
+/* The markdown image container */
+.md__image {
+  cursor: pointer;
+}
+
+/* The Modal (background) */
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  padding-top: 4em;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: #00508dc7;
+  backdrop-filter: blur(5px);
+}
+
+/* Modal Content */
+.modal-content {
+  position: relative;
+  margin: auto;
+  padding: 0;
+  width: 90%;
+  max-width: 1400px;
+}
+
+.modal-pic {
+  display: flex;
+  align-content: center;
+  cursor: pointer;
+  margin-top: 3em !important;
+}
+
+/* The Close Button */
+/* Optimized for accessibility by using a button named close but
+  shifting the close text out of the button and only showing x */
+.modal-close {
+  color: white;
+  background-color: #ffffff00;
+  position: absolute;
+  top: 2.5em;
+  right: 1.3em;
+  font-size: 2em;
+  font-weight: bold;
+  height: 1em;
+  width: 1em;
+  text-indent: 10em;
+  overflow: hidden;
+  border: 0;
+}
+
+.modal-close::after {
+  position: absolute;
+  line-height: 0.5;
+  top: 0.2em;
+  left: 0.1em;
+  text-indent: 0;
+  content: "\00D7"
+}
+
+.modal-close:hover,
+.modal-close:focus {
+  color: #b90000;
+  text-decoration: none;
+  cursor: pointer;
+}