Tutorial Page Layout (#13)

colegoldsmith · web-flow · commit e8415db2b8d6 · 2023-09-25T14:56:03.000-07:00
* add styles for tutorial info, add helpers

* add tutorial page layout
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
+  
diff --git a/src/layouts/tutorial.hbs 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
@@ -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>
diff --git a/src/partials/tutorial-info.hbs 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>

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,10 @@`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`
	`18`	`+a.ds-button:hover {`
	`19`	`+ text-decoration: none;`
	`20`	`+}`
	`21`	`+`
`18`	`22`	`/* icon button */`
`19`	`23`	`.ds-button--is-icon {`
`20`	`24`	`height: var(--ds-space-5);`
`@@ -24,10 +28,12 @@`
`24`	`28`
`25`	`29`	`.ds-button--leading-icon {`
`26`	`30`	`margin-right: var(--ds-space-1);`
	`31`	`+ display: flex;`
`27`	`32`	`}`
`28`	`33`
`29`	`34`	`.ds-button--trailing-icon {`
`30`	`35`	`margin-left: var(--ds-space-1);`
	`36`	`+ display: flex;`
`31`	`37`	`}`
`32`	`38`
`33`	`39`	`.ds-button--variant-outlined {`