From e8415db2b8d66564a8cec7cd3e84ef6f23354324 Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Mon, 25 Sep 2023 16:56:03 -0500
Subject: [PATCH] Tutorial Page Layout (#13)

* add styles for tutorial info, add helpers

* add tutorial page layout
---
 src/css/doc.css                |  9 ++++++++-
 src/css/ds-button.css          |  6 ++++++
 src/css/site.css               |  1 +
 src/css/tutorial-info.css      | 15 +++++++++++++++
 src/helpers/stepcount.js       |  7 +++++++
 src/helpers/svg.js             | 10 ++++++++++
 src/img/colab.svg              | 18 ++++++++++++++++++
 src/layouts/tutorial.hbs       | 11 +++++++++++
 src/partials/article.hbs       | 15 +++++++++------
 src/partials/tutorial-info.hbs | 28 ++++++++++++++++++++++++++++
 10 files changed, 113 insertions(+), 7 deletions(-)
 create mode 100644 src/css/tutorial-info.css
 create mode 100644 src/helpers/stepcount.js
 create mode 100644 src/helpers/svg.js
 create mode 100644 src/img/colab.svg
 create mode 100644 src/layouts/tutorial.hbs
 create mode 100644 src/partials/tutorial-info.hbs

diff --git a/src/css/doc.css b/src/css/doc.css
index 73203a2c..f9abf01a 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -939,7 +939,8 @@
   padding: 0.25rem 0;
 }
 
-.doc .conum[data-value] {
+.doc .conum[data-value],
+.doc .step {
   @include text-overline;
 
   color: var(--ds-text-inverse);
@@ -963,6 +964,12 @@
   display: none;
 }
 
+.doc .step {
+  position: relative;
+  top: -0.25em;
+  margin-right: var(--ds-space-q);
+}
+
 .doc hr {
   border: solid var(--section-divider-color);
   border-width: 2px 0 0;
diff --git a/src/css/ds-button.css b/src/css/ds-button.css
index 06758a78..c79828a8 100644
--- a/src/css/ds-button.css
+++ b/src/css/ds-button.css
@@ -15,6 +15,10 @@
   }
 }
 
+a.ds-button:hover {
+  text-decoration: none;
+}
+
 /* icon button */
 .ds-button--is-icon {
   height: var(--ds-space-5);
@@ -24,10 +28,12 @@
 
 .ds-button--leading-icon {
   margin-right: var(--ds-space-1);
+  display: flex;
 }
 
 .ds-button--trailing-icon {
   margin-left: var(--ds-space-1);
+  display: flex;
 }
 
 .ds-button--variant-outlined {
diff --git a/src/css/site.css b/src/css/site.css
index 8cd0fb8a..fc01feb8 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -23,3 +23,4 @@
 @import "footer.css";
 @import "highlight.css";
 @import "print.css";
+@import "tutorial-info.css";
diff --git a/src/css/tutorial-info.css b/src/css/tutorial-info.css
new file mode 100644
index 00000000..bbfc799d
--- /dev/null
+++ b/src/css/tutorial-info.css
@@ -0,0 +1,15 @@
+.tutorial-info {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-2h);
+  margin-bottom: var(--ds-space-3);
+}
+
+.tutorial-info .info-item {
+  display: flex;
+  gap: var(--ds-space-1);
+}
+
+.tutorial-info .tutorial-actions {
+  margin-left: auto;
+}
diff --git a/src/helpers/stepcount.js b/src/helpers/stepcount.js
new file mode 100644
index 00000000..5e085e8f
--- /dev/null
+++ b/src/helpers/stepcount.js
@@ -0,0 +1,7 @@
+'use strict'
+
+module.exports = (html) => {
+  const matches = html.toString().match(/class="step"/g)
+  if (!matches) return undefined
+  return matches.length
+}
diff --git a/src/helpers/svg.js b/src/helpers/svg.js
new file mode 100644
index 00000000..df541a5e
--- /dev/null
+++ b/src/helpers/svg.js
@@ -0,0 +1,10 @@
+'use strict'
+
+const fs = require('fs')
+const path = require('path')
+
+module.exports = (iconName) => {
+  const pathName = path.join(__dirname, '/src/img/', iconName + '.svg')
+  const content = fs.readFileSync(pathName, 'utf8')
+  return content
+}
diff --git a/src/img/colab.svg b/src/img/colab.svg
new file mode 100644
index 00000000..26996769
--- /dev/null
+++ b/src/img/colab.svg
@@ -0,0 +1,18 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M3.75928 8.0133L1.79336 6.06519C0.708822 7.13764 0.0997314 8.59082 0.0997314 10.1059C0.0997314 11.6209 0.708822 13.0741 1.79336 14.1466L3.76765 12.1984C3.20511 11.644 2.88833 10.8921 2.88676 10.1076C2.88519 9.32304 3.19896 8.56991 3.75928 8.0133Z"
+    fill="#E8710A" />
+  <path
+    d="M1.79333 6.06533L3.75926 8.01344C4.03818 7.73789 4.36942 7.51929 4.73402 7.37015C5.09862 7.22101 5.48944 7.14424 5.88413 7.14424C6.27882 7.14424 6.66964 7.22101 7.03424 7.37015C7.39884 7.51929 7.73007 7.73789 8.009 8.01344L9.43952 5.59481L9.35586 5.52877C8.24005 4.70734 6.86194 4.30953 5.47339 4.40805C4.08483 4.50657 2.77857 5.09483 1.79333 6.06533Z"
+    fill="#F9AB00" />
+  <path
+    d="M9.44789 14.6172L8.009 12.2068C7.73007 12.4823 7.39884 12.7009 7.03424 12.8501C6.66964 12.9992 6.27882 13.076 5.88413 13.076C5.48944 13.076 5.09862 12.9992 4.73402 12.8501C4.36942 12.7009 4.03818 12.4823 3.75926 12.2068L1.79333 14.1549C2.77661 15.1167 4.07628 15.6996 5.45724 15.798C6.8382 15.8964 8.20926 15.5039 9.3224 14.6915L9.41443 14.6172"
+    fill="#F9AB00" />
+  <path
+    d="M10 6.06517C8.91549 7.13762 8.3064 8.5908 8.3064 10.1059C8.3064 11.6209 8.91549 13.0741 10 14.1465L11.9743 12.1984C11.4108 11.6423 11.0942 10.8881 11.0942 10.1017C11.0942 9.31531 11.4108 8.56111 11.9743 8.00503C12.5379 7.44895 13.3022 7.13655 14.0992 7.13655C14.8962 7.13655 15.6605 7.44895 16.2241 8.00503L18.2067 6.06517C17.6682 5.53279 17.0286 5.11043 16.3245 4.82225C15.6204 4.53408 14.8656 4.38574 14.1034 4.38574C13.3411 4.38574 12.5863 4.53408 11.8822 4.82225C11.1781 5.11043 10.5385 5.53279 10 6.06517Z"
+    fill="#F9AB00" />
+  <path
+    d="M18.2067 6.06519L16.2408 8.0133C16.8043 8.56938 17.1209 9.32358 17.1209 10.11C17.1209 10.8964 16.8043 11.6506 16.2408 12.2067C15.6772 12.7628 14.9129 13.0752 14.1159 13.0752C13.3189 13.0752 12.5546 12.7628 11.991 12.2067L10 14.1548C11.0872 15.2287 12.5621 15.8324 14.1004 15.8331C14.8621 15.8335 15.6163 15.6859 16.3202 15.3986C17.024 15.1114 17.6636 14.6901 18.2025 14.1589C18.7414 13.6278 19.1689 12.9971 19.4608 12.3028C19.7526 11.6086 19.903 10.8645 19.9034 10.1129C19.9038 9.36134 19.7541 8.61705 19.463 7.92254C19.1719 7.22803 18.745 6.5969 18.2067 6.06519Z"
+    fill="#E8710A" />
+</svg>
+  
\ No newline at end of file
diff --git a/src/layouts/tutorial.hbs b/src/layouts/tutorial.hbs
new file mode 100644
index 00000000..c5282ec1
--- /dev/null
+++ b/src/layouts/tutorial.hbs
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+{{> head defaultPageTitle='Untitled'}}
+  </head>
+  <body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
+{{> header}}
+{{> body}}
+{{> footer}}
+  </body>
+</html>
diff --git a/src/partials/article.hbs b/src/partials/article.hbs
index 81dac293..720eaada 100644
--- a/src/partials/article.hbs
+++ b/src/partials/article.hbs
@@ -1,7 +1,10 @@
 <article class="doc">
-{{#with page.title}}
-<h1 class="page">{{{this}}}</h1>
-{{/with}}
-{{{page.contents}}}
-{{> pagination}}
-</article>
+  {{#with page.title}}
+  <h1 class="page">{{{this}}}</h1>
+  {{/with}}
+  {{#if (eq page.layout 'tutorial')}}
+  {{> tutorial-info}}
+  {{/if}}
+  {{{page.contents}}}
+  {{> pagination}}
+</article>
\ No newline at end of file
diff --git a/src/partials/tutorial-info.hbs b/src/partials/tutorial-info.hbs
new file mode 100644
index 00000000..6fb792cd
--- /dev/null
+++ b/src/partials/tutorial-info.hbs
@@ -0,0 +1,28 @@
+<div class="tutorial-info">
+  {{#with page.attributes.skill-level}}
+  <div class="info-item">
+    <span class="material-icons">network_check</span>
+    {{{this}}}
+  </div>
+  {{/with}}
+  {{#with (stepcount page.contents)}}
+  <div class="info-item">
+    <span class="material-icons">playlist_add_check</span>
+    {{{this}}} Steps
+  </div>
+  {{/with}}
+  {{#with page.attributes.time-commitment}}
+  <div class="info-item">
+    <span class="material-icons">query_builder</span>
+    {{{this}}}
+  </div>
+  {{/with}}
+  <div class="tutorial-actions">
+    {{#with page.attributes.colab-link}}
+    <a href="{{{this}}}" target="_blank" class="colab ds-button ds-button--variant-outlined ds-button--color-neutral">
+      <div class="ds-button--leading-icon">{{{svg 'colab'}}}</div>
+      Run this on Colab
+    </a>
+    {{/with}}
+  </div>
+</div>
\ No newline at end of file