From 31982778f8762f06a3a3681a8a60b3df18f98d73 Mon Sep 17 00:00:00 2001
From: Ludwig Schubert <ludwigschubert@google.com>
Date: Fri, 1 Sep 2017 15:05:31 -0700
Subject: [PATCH] Remove d-acknowledgements (useless) and d-title (actively
 hindering modularization)

---
 examples/article.html                | 23 +++++++----
 src/components.js                    |  6 +--
 src/components/d-acknowledgements.js | 30 --------------
 src/components/d-appendix.js         | 30 ++++++++------
 src/components/d-math.js             | 28 ++++----------
 src/components/d-title.js            | 58 ----------------------------
 src/controller.js                    |  4 ++
 src/styles/d-math.css                | 11 ++++++
 src/styles/styles-article.css        | 46 ++++++++++++++++++----
 src/styles/styles-layout.css         | 17 +++-----
 src/styles/styles.js                 |  4 +-
 11 files changed, 105 insertions(+), 152 deletions(-)
 delete mode 100644 src/components/d-acknowledgements.js
 delete mode 100644 src/components/d-title.js
 create mode 100644 src/styles/d-math.css
diff --git a/examples/article.html b/examples/article.html
index 740d72d..8f78266 100644
--- a/examples/article.html
+++ b/examples/article.html
@@ -20,7 +20,12 @@
           "affiliation":"Google Brain",
           "affiliationURL":"https://g.co/brain"
         }
-      ]
+      ],
+      "katex": {
+        "delimiters": [
+          {"left": "$$", "right": "$$", "display": false}
+        ]
+      }
     }</script>
   </d-front-matter>
 
@@ -29,10 +34,8 @@
 
 <body>
 <d-article>
-  <d-title>
-    <h1>How to Use t-SNE Effectively</h1>
-    <h2>Although extremely useful for visualizing high-dimensional data, t-SNE plots can sometimes be mysterious or misleading.</h2>
-  </d-title>
+  <h1>How to Use t-SNE Effectively</h1>
+  <h2>Although extremely useful for visualizing high-dimensional data, t-SNE plots can sometimes be mysterious or misleading.</h2>
   <d-byline></d-byline>
   <!-- <d-abstract>
     <p>This is the first paragraph of the article. Test a long&thinsp;&mdash;&thinsp;dash -- here it is.</p>
@@ -41,7 +44,7 @@
   <p>Before diving in: if you haven’t encountered t-SNE before, here’s what you need to know about the math behind it. The goal is to take a set of points in a high-dimensional space and find a faithful representation of those points in a lower-dimensional space, typically the 2D plane. The algorithm is non-linear and adapts to the underlying data, performing different transformations on different regions. Those differences can be a major source of confusion.
   <p>This is the first paragraph of the article. Test a long&thinsp;&mdash;&thinsp;dash -- here it is.</p>
   <p>Test for owner's possessive. Test for "quoting a passage." And another sentence. Or two. Some flopping fins; for diving.</p>
-  <p>Here's a test of an inline equation <d-math>c = a^2 + b^2</d-math>. And then there's a block equation:</p>
+  <p>Here's a test of an inline equation <d-math>c = a^2 + b^2</d-math>. Also with configurable katex standards just using inline '$' signs: $$x^2$$ And then there's a block equation:</p>
   <d-math block>
       c = \pm \sqrt{ \sum_{i=0}^{n}{a^{222} + b^2}}
   </d-math>
@@ -107,15 +110,17 @@
   </script>
   <p>That's it for the example article!</p>
   <aside>Some text.</aside>
+
 </d-article>
 
 <d-appendix>
-  <d-acknowledgements>
+
+  <div id='contributions'>
     <h3>Contributions</h3>
     <p>Some text describing who did what.</p>
     <h3>Reviewers</h3>
     <p>Some text with links describing who reviewed the article.</p>
-  </d-acknowledgements>
+  </div>
 
   <d-footnote-list></d-footnote-list>
 
@@ -224,5 +229,7 @@
     </script></d-bibliography>
 
   <distill-appendix> </distill-appendix>
+
 </d-appendix>
+
 </body>
diff --git a/src/components.js b/src/components.js
index f835bcf..fcfdd03 100644
--- a/src/components.js
+++ b/src/components.js
@@ -4,7 +4,6 @@ makeStyleTag(document);
 
 /* Components */
 import { Abstract }         from './components/d-abstract';
-import { Acknowledgements } from './components/d-acknowledgements';
 import { Appendix }         from './components/d-appendix';
 import { Article }          from './components/d-article';
 import { Bibliography }     from './components/d-bibliography';
@@ -16,14 +15,13 @@ import { FootnoteList }     from './components/d-footnote-list';
 import { FrontMatter }      from './components/d-front-matter';
 import { DMath }            from './components/d-math';
 import { References }       from './components/d-references';
-import { Title }            from './components/d-title';
 import { TOC }              from './components/d-toc';
 import { Figure }           from './components/d-figure';
 
 const components = [
-  Abstract, Acknowledgements, Appendix, Article, Bibliography,
+  Abstract, Appendix, Article, Bibliography,
   Byline, Cite, Code, Footnote, FootnoteList, FrontMatter, DMath,
-  References, Title, TOC, Figure,
+  References, TOC, Figure,
 ];
 
 /* Distill website specific components */
diff --git a/src/components/d-acknowledgements.js b/src/components/d-acknowledgements.js
deleted file mode 100644
index 1a70a95..0000000
--- a/src/components/d-acknowledgements.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Template } from '../mixins/template';
-
-const T = Template('d-acknowledgements', `
-<style>
-
-:host {
-  contain: content;
-}
-
-::slotted(h3) {
-  font-size: 15px;
-  font-weight: 500;
-  margin-top: 20px;
-  margin-bottom: 0;
-  color: rgba(0,0,0,0.65);
-  line-height: 1em;
-}
-
-::slotted(*) a {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-</style>
-
-<slot></slot>
-`);
-
-export class Acknowledgements extends T(HTMLElement) {
-
-}
diff --git a/src/components/d-appendix.js b/src/components/d-appendix.js
index 8a54417..b9a45ac 100644
--- a/src/components/d-appendix.js
+++ b/src/components/d-appendix.js
@@ -4,10 +4,8 @@ import { body } from '../helpers/layout';
 const T = Template('d-appendix', `
 <style>
 
-:host {
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
+d-appendix {
+  contain: content;
 
   font-size: 13px;
   line-height: 1.7em;
@@ -16,18 +14,28 @@ const T = Template('d-appendix', `
   color: rgba(0,0,0,0.5);
   padding-top: 36px;
   padding-bottom: 48px;
-
-  contain: content;
 }
 
-${body('.content')}
+d-appendix h3 {
+  font-size: 15px;
+  font-weight: 500;
+  margin-top: 20px;
+  margin-bottom: 0;
+  color: rgba(0,0,0,0.65);
+  line-height: 1em;
+}
+
+d-appendix a {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+d-appendix > * {
+  grid-column: margin-left / body;
+}
 
 </style>
 
-<div class='content'>
-<slot></slot>
-</div>
-`, true);
+`, false);
 
 export class Appendix extends T(HTMLElement) {
 
diff --git a/src/components/d-math.js b/src/components/d-math.js
index 81862e5..ba10a8b 100644
--- a/src/components/d-math.js
+++ b/src/components/d-math.js
@@ -2,30 +2,16 @@
 import { Mutating } from '../mixins/mutating.js';
 import { Template } from '../mixins/template.js';
 
+import style from '../styles/d-math.css';
+
 // attaches renderMathInElement to window
 import { renderMathInElement } from '../helpers/katex-auto-render';
 
 export const katexJSURL = 'https://distill.pub/third-party/katex/katex.min.js';
 export const katexCSSTag = '<link rel="stylesheet" href="https://distill.pub/third-party/katex/katex.min.css" crossorigin="anonymous">';
 
-export const style = `
-.katex-display {
-  text-align: left;
-  padding: 8px 0 8px 0;
-  margin: 20px 0 20px 24px;
-}
-
-.katex {
-  -webkit-font-smoothing: antialiased;
-  color: rgba(0, 0, 0, 0.8);
-  font-size: 1.18em;
-}
-`;
-
 const T = Template('d-math', `
-
 ${katexCSSTag}
-
 <style>
 
 :host {
@@ -38,13 +24,10 @@ ${katexCSSTag}
 }
 
 ${style}
-
 </style>
-
-<span id="katex-container"></span>
+<span id='katex-container'></span>
 `);
 
-
 // DMath, not Math, because that would conflict with the JS built-in
 export class DMath extends Mutating(T(HTMLElement)) {
 
@@ -57,7 +40,9 @@ export class DMath extends Mutating(T(HTMLElement)) {
 
   static get katexOptions() {
     if (!DMath._katexOptions) {
-      DMath._katexOptions = {};
+      DMath._katexOptions = {
+        delimiters: [ { 'left':'$', 'right':'$', 'display':true } ]
+      };
     }
     return DMath._katexOptions;
   }
@@ -111,4 +96,5 @@ export class DMath extends Mutating(T(HTMLElement)) {
 }
 
 DMath.katexAdded = false;
+DMath.inlineMathRendered = false;
 window.DMath = DMath; // TODO: check if this can be removed, or if we should expose a distill global
diff --git a/src/components/d-title.js b/src/components/d-title.js
deleted file mode 100644
index 58953b8..0000000
--- a/src/components/d-title.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Template } from '../mixins/template';
-import { page } from '../helpers/layout';
-
-const T = Template('d-title', `
-<style>
-
-:host {
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-}
-::slotted(h1) {
-  padding-top: 16px;
-  padding-bottom: 0;
-  margin-top: 0;
-  margin-bottom: 18px;
-  line-height: 1.15;
-  font-size: 32px;
-  font-weight: 700;
-}
-
-::slotted(h2) {
-  border-bottom: none !important;
-  font-size: 26px !important;
-  font-weight: 300 !important;
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-  line-height: 1.6em !important;
-  margin-top: -2px !important;
-  margin-bottom: 36px !important;
-  border: none !important;
-}
-
-@media screen and (min-width: 768px), print {
-  ::slotted(h1) {
-    font-size: 42px;
-  }
-}
-@media(min-width: 1024px) {
-  ::slotted(h1) {
-    padding-top: 64px;
-    font-size: 42px;
-  }
-}
-@media(min-width: 1280px) {
-  ::slotted(h1) {
-    padding-top: 96px;
-  }
-}
-
-</style>
-
-<slot></slot>
-`);
-
-export class Title extends T(HTMLElement) {
-
-}
diff --git a/src/controller.js b/src/controller.js
index 6b6f7e2..6ef77db 100644
--- a/src/controller.js
+++ b/src/controller.js
@@ -121,6 +121,10 @@ export const Controller = {
       if (data.katex) {
         DMath.katexOptions = data.katex;
       }
+
+      if (data.title) {
+
+      }
     },
 
     DOMContentLoaded() {
diff --git a/src/styles/d-math.css b/src/styles/d-math.css
new file mode 100644
index 0000000..a51136e
--- /dev/null
+++ b/src/styles/d-math.css
@@ -0,0 +1,11 @@
+d-article .katex-display {
+  text-align: left;
+  padding: 8px 0 8px 0;
+  margin: 20px 0 20px 24px;
+}
+
+d-article .katex {
+  -webkit-font-smoothing: antialiased;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 1.18em;
+}
diff --git a/src/styles/styles-article.css b/src/styles/styles-article.css
index f564041..3de6e8c 100644
--- a/src/styles/styles-article.css
+++ b/src/styles/styles-article.css
@@ -18,14 +18,46 @@ d-article {
   }
 }
 
-/*h1::before {
-  content: "";
-  display: block;
-  border-bottom: solid 1px #999;
-  width: 40px;
-  margin-bottom: 24px;
-}*/
+d-article h1 {
+  grid-column: margin-left / page;
+  padding-top: 16px;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 18px;
+  line-height: 1.15;
+  font-size: 32px;
+  font-weight: 700;
+}
 
+d-article h1+h2 {
+  grid-column: margin-left / page;
+  border-bottom: none !important;
+  font-size: 26px !important;
+  font-weight: 300 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  line-height: 1.6em !important;
+  margin-top: -2px !important;
+  margin-bottom: 36px !important;
+  border: none !important;
+}
+
+@media screen and (min-width: 768px), print {
+  d-article h1 {
+    font-size: 42px;
+  }
+}
+@media(min-width: 1024px) {
+  d-article h1 {
+    padding-top: 64px;
+    font-size: 42px;
+  }
+}
+@media(min-width: 1280px) {
+  d-article h1 {
+    padding-top: 96px;
+  }
+}
 
 /* H2 */
 
diff --git a/src/styles/styles-layout.css b/src/styles/styles-layout.css
index b75df9d..1215185 100644
--- a/src/styles/styles-layout.css
+++ b/src/styles/styles-layout.css
@@ -1,8 +1,7 @@
 @supports not (display: grid) {
   d-article,
-  d-title,
-  d-byline,
   d-appendix,
+  d-byline,
   distill-footer {
     display: block;
     padding: 8px;
@@ -10,9 +9,8 @@
 }
 
 d-article,
-d-title,
-d-byline,
 d-appendix,
+d-byline,
 distill-footer {
   display: grid;
   justify-items: stretch;
@@ -22,9 +20,8 @@ distill-footer {
 @media(min-width: 768px) {
 
   d-article,
-  d-title,
-  d-byline,
   d-appendix,
+  d-byline,
   distill-footer {
     grid-template-columns: [start] 32px [margin-left-outset] 32px [margin-left] 3fr [body] 32px [body-outset] 1fr [page] 32px [page-outset] 32px [end];
   }
@@ -32,16 +29,15 @@ distill-footer {
 
 @media(min-width: 1024px) {
   d-article,
-  d-title,
-  d-byline,
   d-appendix,
+  d-byline,
   distill-footer {
     grid-template-columns: [start] 1fr [margin-left-outset] 32px [margin-left] 672px [body] 32px [body-outset] 224px [page] 32px [page-outset] 1fr [end];
   }
 }
 
+d-article,
 d-appendix,
-d-article > d-title,
 d-article > d-byline,
 d-article > distill-footer {
   grid-column: start / end;
@@ -53,8 +49,7 @@ d-article > * {
 }
 
 .l-page,
-d-figure,
-d-title > * {
+d-figure {
   grid-column: margin-left / page;
 }
 
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 27a82fc..1331025 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2,8 +2,8 @@ import base from './styles-base.css';
 import layout from './styles-layout.css';
 import article from './styles-article.css';
 import print from './styles-print.css';
-import { style as byline } from '../components/d-byline.js';
-import { style as math } from '../components/d-math.js';
+import { style as byline } from '../components/d-byline';
+import math from './d-math.css';
 
 export const styles = base + layout + byline + math + article + print;
 
