Tutorial Page Layout (#13)

* add styles for tutorial info, add helpers * add tutorial page layout
riptano · Sep 25, 2023 · e8415db · e8415db
1 parent 9769b9e
commit e8415db
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 7 deletions.
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
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>