feat(Demo): Add & style theme gallery landing page

stencila · Mar 5, 2020 · edc9653 · edc9653
1 parent d4cae95
commit edc9653
Show file tree

Hide file tree

Showing 16 changed files with 344 additions and 78 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,6 @@ src/extensions/index.ts
 src/themes/index.ts
 src/selectors.ts
 src/selectors.css
+src/gallery.ejs
+src/gallery.ejs.media
+src/themes.json
diff --git a/README.md b/README.md
@@ -118,16 +118,16 @@ Extensions provide styling, and potentially interactivity, for node types that d
 <!-- prettier-ignore-start -->
 <!-- EXTS-START -->
 
-| Name                          | Description                  |
-| ----------------------------- | ---------------------------- |
-| [cite](./themes/cite)         | Citation extension           |
-| [cite-apa](./themes/cite-apa) | APA citation style extension |
-| [cite-mla](./themes/cite-mla) | MLA citation style extension |
-| [code](./themes/code)         | Code nodes extension         |
-| [headings](./themes/headings) | Headings extension           |
-| [math](./themes/math)         | Math styling extension.      |
-| [pages](./themes/pages)       | Pages extension              |
-| [person](./themes/person)     | Person extension             |
+| Name                          | Description                                                                                                                                                                                                                                 |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [cite](./themes/cite)         | Provides styling for in-text citations (i.e. `Cite` and `CiteGroup` nodes) and bibliographies (i.e. `CreativeWork` nodes in the `references` property of another `CreativeWork`).                                                           |
+| [cite-apa](./themes/cite-apa) | Provides styling for in-text citations and bibliographies in accordance with the [American Psychological Association (APA) style](https://en.wikipedia.org/wiki/APA_style).                                                                 |
+| [cite-mla](./themes/cite-mla) | Provides styling for in-text citations and bibliographies in accordance with the [Modern Language Association (MLA) style](https://style.mla.org/).                                                                                         |
+| [code](./themes/code)         | Provides syntax highlighting for `CodeFragment` and `CodeBlock` nodes using [Prism](https://prismjs.com/). Will not style executable node types like `CodeExpression` and `CodeChunk` which are styled by the base Stencila Web Components. |
+| [headings](./themes/headings) | A temporary extensions that changes the way that `Heading` nodes are represented. Ensures that there is only one `<h1>` tag (for the `title` property) and that `Heading` nodes are represented as `<h${depth+1}>`.                         |
+| [math](./themes/math)         | Provides styling of math nodes using MathJax fonts and styles. Use this if there is any likely to be math content, i.e. `MathFragment` and/or `MathBlock` nodes, in documents that your theme targets.                                      |
+| [pages](./themes/pages)       | Provides a [`@media print` CSS at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@page) to modify properties when printing a document e.g. to PDF.                                                                                  |
+| [person](./themes/person)     | Provides styling of `Person` nodes e.g the `authors` of an article, or authors for each `citation` in it's `references`.                                                                                                                    |
 
 <!-- EXTS-END -->
 <!-- prettier-ignore-end -->

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -81,6 +81,7 @@
     "css-loader": "3.4.2",
     "cssnano": "4.1.10",
     "cssnano-preset-default": "4.0.7",
+    "ejs-loader": "^0.3.5",
     "eslint-plugin-react": "^7.18.3",
     "extract-loader": "4.0.3",
     "file-loader": "4.3.0",

diff --git a/src/demo/editor/header.tsx b/src/demo/editor/header.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import { examples } from '../../examples'
 import { ViewportToggle } from './viewportToggle'
 import { getExample, setExample } from '../utils/preview'
+import { HeaderBase } from './headerBase'
 
 interface Props {
   /* onExampleChange: (e: React.ChangeEvent<HTMLSelectElement>) => string */
@@ -15,9 +16,7 @@ const HeaderComponent = ({ examples }: Props): JSX.Element => {
 
   return (
     <>
-      <img src="https://stenci.la/img/stencila-logo.svg" />
-
-      <span className="name"> Thema</span>
+      <HeaderBase />
 
       <div className="tools">
         <ViewportToggle />

diff --git a/src/demo/editor/headerBase.tsx b/src/demo/editor/headerBase.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const HeaderBase = (): JSX.Element => {
+  return (
+    <a href="/">
+      <img src="https://stenci.la/img/stencila-logo.svg" />
+
+      <span className="name"> Thema</span>
+    </a>
+  )
+}
diff --git a/src/demo/editor/index.tsx b/src/demo/editor/index.tsx
@@ -12,7 +12,7 @@ export const ThemeEditor = (): JSX.Element => {
       <Header />
 
       <h2 id="themeName">
-        <span>Current Theme</span>
+        <span>Theme</span>
 
         <ThemeSwitcher
           activeTheme={activeTheme}
@@ -22,13 +22,6 @@ export const ThemeEditor = (): JSX.Element => {
 
       <hr />
 
-      <p>
-        Themes are designed to be customizable, if you’d like to make extensive
-        changes you can extend a theme, or make one from scratch.{' '}
-        <a href="https://github.com/stencila/thema/">Read the documentation</a>{' '}
-        to learn how.
-      </p>
-
       <h3>Customize</h3>
 
       <VariableKnobs theme={activeTheme} />

diff --git a/src/demo/gallery.tsx b/src/demo/gallery.tsx
@@ -0,0 +1,9 @@
+/**
+ * Header for gallery page
+ */
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { HeaderBase } from './editor/headerBase'
+
+ReactDOM.render(<HeaderBase />, document.getElementById('header'))
diff --git a/src/demo/styles.css b/src/demo/styles.css
@@ -13,11 +13,14 @@ html {
 }
 
 body {
-  display: flex;
-  flex-wrap: wrap;
   height: 100%;
   margin: 0;
   padding: 3rem 0 0;
+
+  &.editor {
+    display: flex;
+    flex-wrap: wrap;
+  }
 }
 
 body > * {
@@ -65,6 +68,11 @@ header {
     color: var(--color-neutral-700);
   }
 
+  a:link,
+  a:visited {
+    text-decoration: none;
+  }
+
   img {
     height: 2rem;
   }
@@ -99,6 +107,81 @@ main {
   background-color: var(--color-neutral-100);
 }
 
+:--root > :--List > :--ListItem {
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.035), 0 0 40px rgba(0, 0, 0, 0.07);
+  overflow: hidden;
+  transition: box-shadow 200ms ease-out;
+  padding-bottom: var(--spacer-sm);
+
+  &:hover {
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.045), 0 0 40px rgba(0, 0, 0, 0.17);
+  }
+}
+
+/* Gallery page */
+
+:--root > :--List > :--ListItem > :--CreativeWork {
+  :--title {
+    display: none;
+  }
+
+  :--Heading {
+    font-size: var(--font-size-h1);
+    color: var(--color-key);
+    order: -1;
+    margin-top: var(--spacer-md);
+    margin-bottom: var(--spacer-md);
+    text-transform: capitalize;
+  }
+
+  & > a[href^='/editor?'] {
+    order: -1;
+    display: block;
+    border-bottom: 1px solid var(--color-neutral-400);
+    margin-bottom: var(--spacer-md);
+  }
+
+  & > :--Organization {
+    display: none;
+  }
+
+  & > :--Paragraph:last-of-type > a {
+    background-color: var(--color-neutral-300);
+    border-radius: 4px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.035), 0 0 40px rgba(0, 0, 0, 0.07);
+    border: 1px solid var(--color-neutral-400);
+    font-size: 12px;
+    font-weight: bold;
+    letter-spacing: 1px;
+    padding: 0.25rem 0.5rem;
+    text-decoration: none;
+    text-transform: uppercase;
+    transition: color 200ms ease-out, background-color 200ms ease-out,
+      border-color 200ms ease-out;
+
+    &:hover {
+      background-color: var(--color-neutral-400);
+    }
+
+    &::after {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='#363636' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-size: contain;
+      color: red;
+      content: '';
+      display: inline-block;
+      height: 16px;
+      transition: transform 125ms ease-out;
+      vertical-align: middle;
+      width: 14px;
+    }
+
+    &:hover::after {
+      transform: translateX(0.25rem);
+    }
+  }
+}
+
 iframe {
   background-color: white;
   border: 1px solid var(--color-neutral-300);
@@ -145,10 +228,11 @@ menu p {
 #contribute:link,
 #sidebar > a.button,
 #sidebar > button {
-  background-color: #1d64f3;
+  background-color: var(--color-neutral-400);
   border-radius: 2px;
-  border: none;
-  color: white;
+  border: 1px solid var(--color-neutral-500);
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.035), 0 0 40px rgba(0, 0, 0, 0.07);
+  color: var(--color-key);
   font-weight: bold;
   letter-spacing: 1px;
   margin: 1rem 0;
@@ -161,6 +245,7 @@ menu p {
 #contribute:hover,
 #sidebar > a.button:hover,
 #sidebar > button:hover {
+  color: white;
   background-color: #164ebf;
 }
 
@@ -182,8 +267,8 @@ menu p {
   width: 100%;
 }
 
-h2,
-h3 {
+#sidebar h2,
+#sidebar h3 {
   font-size: 12px;
   font-weight: bold;
   color: var(--color-neutral-700);
@@ -192,7 +277,7 @@ h3 {
   position: relative;
 }
 
-h3::after {
+#sidebar h3::after {
   content: '';
   position: absolute;
   -webkit-transform: translateY(-50%);
@@ -202,7 +287,7 @@ h3::after {
 }
 
 hr,
-h3::after {
+#sidebar h3::after {
   background-color: var(--color-neutral-500);
   border: none;
   height: 1px;
@@ -240,17 +325,12 @@ h3::after {
 }
 
 #themeVariables label.modified {
-  color: #066860;
   cursor: help;
   font-style: italic;
   font-weight: bold;
   padding: 1px 0;
 }
 
-#themeVariables label.modified::after {
-  content: '*';
-}
-
 #themeVariables .labelWrapper button {
   background-color: var(--color-neutral-100);
   border: 1px solid var(--color-neutral-400);

diff --git a/src/galleryTemplate.ejs b/src/galleryTemplate.ejs
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Stencila Thema</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  </head>
+  <body>
+    <header id="header"></header>
+
+    <main>
+      <%= require("./gallery.ejs")() %>
+    </main>
+  </body>
+</html>