Draft: Support Quarto-formatted Notebooks

.gitignore

@@ -4,3 +4,5 @@ content/notebooks
 data/bibliography.json
 .sass-cache
 .ipynb_checkpoints
+.hugo_build.lock
+bin/nbconvert/nbconvert

Makefile

@@ -7,10 +7,18 @@ serve: prepare
 serve-drafts: prepare
 	hugo server -D
 
-prepare: convert
+prepare: experience bibliography notebooks
+
+experience:
 	bin/sort-experience.ts data/experience.json
 
-convert:
+bibliography:
 	bin/biblio.ts assets/bib/bibliography.bib -m assets/bib/members.json -o data/bibliography.json
-	go run bin/nbconvert.go
 
+notebooks: nbconvert
+	bin/nbconvert/nbconvert
+
+nbconvert:
+	+make -C bin/nbconvert
+
+.PHONY: prepare experience bibliography notebooks

assets/sass/39alpha/base.scss

@@ -36,6 +36,7 @@ figure > img {
 }
 
 figcaption {
+  margin-top: $spacing-unit / 2;
   font-size: $small-font-size;
 }
 
@@ -100,7 +101,7 @@ blockquote {
 
 pre, code {
   @include relative-font-size(0.9375);
-  border: 1px solid $grey-color-light;
+  border: 1px solid $grey-color;
   border-radius: 3px;
   background-color: #eef;
 }

assets/sass/39alpha/layout.scss

@@ -304,29 +304,46 @@
 .post-content, .notebook-content {
     margin-bottom: $spacing-unit;
 
-    h2 {
+    h1 {
+        text-align: center;
+
         @include relative-font-size(2);
 
         @include media-query($on-laptop) {
             @include relative-font-size(1.75);
         }
     }
 
-    h3 {
+    h2 {
+        text-align: center;
+
         @include relative-font-size(1.625);
 
         @include media-query($on-laptop) {
             @include relative-font-size(1.375);
         }
     }
 
-    h4 {
+    h3 {
+        text-align: center;
+
         @include relative-font-size(1.25);
 
         @include media-query($on-laptop) {
             @include relative-font-size(1.125);
         }
     }
+
+    h4 {
+        text-align: center;
+        font-style: italic;
+
+        @include relative-font-size(1.125);
+
+        @include media-query($on-laptop) {
+            @include relative-font-size(1);
+        }
+    }
 }
 
 .notebook-content {
@@ -347,6 +364,10 @@
     }
 }
 
+.observablehq {
+    margin-bottom: $spacing-unit / 2;
+}
+
 .giving {
     width: 100%;
     height: auto;
@@ -533,12 +554,14 @@
     }
 }
 
-#code-hider {
+.code-hider {
+    color: $brand-color;
     text-align: right;
     padding-bottom: 10px;
+    user-select: none;
 
     span {
-        color: $brand-color;
+        margin-left: $spacing-unit / 4;
         text-decoration: none;
 
         &:hover {

assets/sass/39alpha/syntax-highlighting.scss

@@ -1,64 +1,89 @@
 .chroma {
-  background: #eef;
-  @extend %vertical-rhythm;
+    color: $text-color;
+    background-color: $background-color;
+    @extend %vertical-rhythm;
 
-  .c     { color: #998; font-style: italic } // Comment
-  .err   { color: #a61717; background-color: #e3d2d2 } // Error
-  .k     { font-weight: bold } // Keyword
-  .o     { font-weight: bold } // Operator
-  .cm    { color: #998; font-style: italic } // Comment.Multiline
-  .cp    { color: #999; font-weight: bold } // Comment.Preproc
-  .c1    { color: #998; font-style: italic } // Comment.Single
-  .cs    { color: #999; font-weight: bold; font-style: italic } // Comment.Special
-  .gd    { color: #000; background-color: #fdd } // Generic.Deleted
-  .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
-  .ge    { font-style: italic } // Generic.Emph
-  .gr    { color: #a00 } // Generic.Error
-  .gh    { color: #999 } // Generic.Heading
-  .gi    { color: #000; background-color: #dfd } // Generic.Inserted
-  .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
-  .go    { color: #888 } // Generic.Output
-  .gp    { color: #555 } // Generic.Prompt
-  .gs    { font-weight: bold } // Generic.Strong
-  .gu    { color: #aaa } // Generic.Subheading
-  .gt    { color: #a00 } // Generic.Traceback
-  .kc    { font-weight: bold } // Keyword.Constant
-  .kd    { font-weight: bold } // Keyword.Declaration
-  .kp    { font-weight: bold } // Keyword.Pseudo
-  .kr    { font-weight: bold } // Keyword.Reserved
-  .kt    { color: #458; font-weight: bold } // Keyword.Type
-  .m     { color: #099 } // Literal.Number
-  .s     { color: #d14 } // Literal.String
-  .na    { color: #008080 } // Name.Attribute
-  .nb    { color: #0086B3 } // Name.Builtin
-  .nc    { color: #458; font-weight: bold } // Name.Class
-  .no    { color: #008080 } // Name.Constant
-  .ni    { color: #800080 } // Name.Entity
-  .ne    { color: #900; font-weight: bold } // Name.Exception
-  .nf    { color: #900; font-weight: bold } // Name.Function
-  .nn    { color: #555 } // Name.Namespace
-  .nt    { color: #000080 } // Name.Tag
-  .nv    { color: #008080 } // Name.Variable
-  .ow    { font-weight: bold } // Operator.Word
-  .w     { color: #bbb } // Text.Whitespace
-  .mf    { color: #099 } // Literal.Number.Float
-  .mh    { color: #099 } // Literal.Number.Hex
-  .mi    { color: #099 } // Literal.Number.Integer
-  .mo    { color: #099 } // Literal.Number.Oct
-  .sb    { color: #d14 } // Literal.String.Backtick
-  .sc    { color: #d14 } // Literal.String.Char
-  .sd    { color: #d14 } // Literal.String.Doc
-  .s2    { color: #d14 } // Literal.String.Double
-  .se    { color: #d14 } // Literal.String.Escape
-  .sh    { color: #d14 } // Literal.String.Heredoc
-  .si    { color: #d14 } // Literal.String.Interpol
-  .sx    { color: #d14 } // Literal.String.Other
-  .sr    { color: #009926 } // Literal.String.Regex
-  .s1    { color: #d14 } // Literal.String.Single
-  .ss    { color: #990073 } // Literal.String.Symbol
-  .bp    { color: #999 } // Name.Builtin.Pseudo
-  .vc    { color: #008080 } // Name.Variable.Class
-  .vg    { color: #008080 } // Name.Variable.Global
-  .vi    { color: #008080 } // Name.Variable.Instance
-  .il    { color: #099 } // Literal.Number.Integer.Long
+    .x {  }
+    .err { color: #a61717; background-color: #e3d2d2 }
+    .cl {  }
+    .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+    .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+    .hl { background-color: #ffffcc }
+    .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #686868 }
+    .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #686868 }
+    .line { display: flex; }
+    .k { color: #6ab825; font-weight: bold }
+    .kc { color: #6ab825; font-weight: bold }
+    .kd { color: #6ab825; font-weight: bold }
+    .kn { color: #6ab825; font-weight: bold }
+    .kp { color: #6ab825 }
+    .kr { color: #6ab825; font-weight: bold }
+    .kt { color: #6ab825; font-weight: bold }
+    .n {  }
+    .na { color: #bbbbbb }
+    .nb { color: #24909d }
+    .bp {  }
+    .nc { color: #447fcf; text-decoration: underline }
+    .no { color: #40ffff }
+    .nd { color: #ffa500 }
+    .ni {  }
+    .ne { color: #bbbbbb }
+    .nf { color: #447fcf }
+    .fm {  }
+    .nl {  }
+    .nn { color: #447fcf; text-decoration: underline }
+    .nx {  }
+    .py {  }
+    .nt { color: #6ab825; font-weight: bold }
+    .nv { color: #40ffff }
+    .vc {  }
+    .vg {  }
+    .vi {  }
+    .vm {  }
+    .l {  }
+    .ld {  }
+    .s { color: #ed9d13 }
+    .sa { color: #ed9d13 }
+    .sb { color: #ed9d13 }
+    .sc { color: #ed9d13 }
+    .dl { color: #ed9d13 }
+    .sd { color: #ed9d13 }
+    .s2 { color: #ed9d13 }
+    .se { color: #ed9d13 }
+    .sh { color: #ed9d13 }
+    .si { color: #ed9d13 }
+    .sx { color: #ffa500 }
+    .sr { color: #ed9d13 }
+    .s1 { color: #ed9d13 }
+    .ss { color: #ed9d13 }
+    .m { color: #3677a9 }
+    .mb { color: #3677a9 }
+    .mf { color: #3677a9 }
+    .mh { color: #3677a9 }
+    .mi { color: #3677a9 }
+    .il { color: #3677a9 }
+    .mo { color: #3677a9 }
+    .o {  }
+    .ow { color: #6ab825; font-weight: bold }
+    .p {  }
+    .c { color: #999999; font-style: italic }
+    .ch { color: #999999; font-style: italic }
+    .cm { color: #999999; font-style: italic }
+    .c1 { color: #999999; font-style: italic }
+    .cs { color: #e50808; background-color: #520000; font-weight: bold }
+    .cp { color: #cd2828; font-weight: bold }
+    .cpf { color: #cd2828; font-weight: bold }
+    .g {  }
+    .gd { color: #d22323 }
+    .ge { font-style: italic }
+    .gr { color: #d22323 }
+    .gh { color: #ffffff; font-weight: bold }
+    .gi { color: #589819 }
+    .go { color: #cccccc }
+    .gp { color: #aaaaaa }
+    .gs { font-weight: bold }
+    .gu { color: #ffffff; text-decoration: underline }
+    .gt { color: #d22323 }
+    .gl { text-decoration: underline }
+    .w { color: #666666 }
 }