fix(Demo): Generate examples standalone

To avoid conflicts and confusion when example HTML has existing themes CSS and JS
stencila · Feb 12, 2020 · a2eb9f1 · a2eb9f1
1 parent bf12a60
commit a2eb9f1
Show file tree

Hide file tree

Showing 9 changed files with 9,444 additions and 9,675 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "postinstall": "npm run build:selectors",
     "semantic-release": "semantic-release",
     "test": "npm run test:build && npm run test:run",
-    "test:build": "parcel build ./src/examples/article-kitchen-sink.html -d test/build --public-url .",
+    "test:build": "parcel build ./src/index.html ./src/examples/*.html -d test/build --public-url .",
     "test:run": "SAUCE_API_HOST=eu-central-1.saucelabs.com wdio",
     "watch": "parcel watch ./src/**/*.css ./src/**/*.ts"
   },

diff --git a/src/demo/index.ts b/src/demo/index.ts
@@ -49,7 +49,7 @@ const exampleSet = async (example: string): Promise<void> => {
 
   // Load the HTML content
   const req = new XMLHttpRequest()
-  req.open('GET', `./${examples[example]}`, false)
+  req.open('GET', examples[example], false)
   req.send(null)
   const html = req.responseText
 

diff --git a/src/demo/styles.css b/src/demo/styles.css
@@ -36,10 +36,10 @@ header {
 
     .github {
       img {
-        margin-left: 1rem;
+        margin: 0 0.5rem;
         height: 24px;
         width: 24px;
-        color: #777;
+        opacity: 0.4;
       }
     }
   }

diff --git a/src/examples/article-antibodies.html b/src/examples/article-antibodies.html
diff --git a/src/examples/article-drosophila.html b/src/examples/article-drosophila.html
diff --git a/src/examples/article-kitchen-sink.html b/src/examples/article-kitchen-sink.html
diff --git a/src/examples/generate.sh b/src/examples/generate.sh
@@ -1,21 +1,17 @@
 #!/bin/sh
 
 # Generate article-kitchen-sink.html
-npx encoda convert article-kitchen-sink.json article-kitchen-sink.html
+npx encoda convert article-kitchen-sink.json article-kitchen-sink.html --standalone=false
 
 # Generate article-drosophila.html
-npx encoda convert https://elifesciences.org/articles/49574v2 article-drosophila.html
+npx encoda convert https://elifesciences.org/articles/49574v2 article-drosophila.html --standalone=false
 
 # Generate article-antibodies.html
-npx encoda convert 'https://journals.plos.org/ploscompbiol/article?id=10.1371/journal.pcbi.1007207' article-antibodies.html
+npx encoda convert 'https://journals.plos.org/ploscompbiol/article?id=10.1371/journal.pcbi.1007207' article-antibodies.html --standalone=false
 
 # Generate article-rmarkdown.html
 # Temporarily excluded becuase, with removal of `coerce()` call from `xmd` codec
 # the metadata is causing this to fail.
 # curl -o rmarkdown.nb.html https://raw.githubusercontent.com/stencila/examples/master/rmarkdown/rmarkdown.nb.html
-# npx encoda convert  rmarkdown.nb.html --from rnb article-rmarkdown.html
+# npx encoda convert  rmarkdown.nb.html --from rnb article-rmarkdown.html --standalone=false
 # rm rmarkdown.nb.html
-
-# Replace unpkg Thema packages with local versions for development. Swapping out JavaScript files for TypeScript
-perl -pi -w -e 's/https:\/\/unpkg.com\/\@stencila\/thema\@1\/dist\/(.+\/index)\.js/\.\.\/$1\.ts/g;' *.html
-perl -pi -w -e 's/https:\/\/unpkg.com\/\@stencila\/thema\@1\/dist/\.\./g;' *.html
diff --git a/src/examples/index.ts b/src/examples/index.ts
@@ -1,5 +1,5 @@
 export const examples: { [key: string]: string } = {
-  'article-kitchen-sink': '/examples/article-kitchen-sink.html',
-  'article-antibodies': '/examples/article-antibodies.html',
-  'article-drosophila': '/examples/article-drosophila.html'
+  'article-kitchen-sink': 'examples/article-kitchen-sink.html',
+  'article-antibodies': 'examples/article-antibodies.html',
+  'article-drosophila': 'examples/article-drosophila.html'
 }
diff --git a/src/index.html b/src/index.html
@@ -32,12 +32,14 @@
       class="theme"
       rel="stylesheet"
       href="./themes/stencila/styles.css"
+      disabled
     />
     <link
       id="skeleton"
       class="theme"
       rel="stylesheet"
       href="./themes/skeleton/styles.css"
+      disabled
     />
   </head>
   <body>