feat(Theme Editor): Add ability to hide UI elements from the preview

README.md

@@ -215,6 +215,16 @@ npm run dev
 
 Then open http://localhost:1234/index.html in your browser to view the demo.
 
+There are a few URL query parameters which can be used to control the UI of the theme preview.
+
+| Parameter | Default Value        | Description                                                                                |
+| :-------- | :------------------- | :----------------------------------------------------------------------------------------- |
+| `theme`   | `stencila`           | Sets the active theme for the preview                                                      |
+| `example` | `articleKitchenSink` | Sets the content for the preview                                                           |
+| `ui`      | `true`               | When set to `false` hides the header and theme customization sidebar from the preview page |
+| `header`  | `true`               | When set to `false` hides only the header from the preview page                            |
+| `sidebar` | `true`               | When set to `false` hides only the theme customization sidebar from the preview page       |
+
 ### Creating a new theme
 
 #### Scripted creation

src/demo/editor/index.tsx

@@ -4,6 +4,7 @@ import { Header } from './header'
 import { ThemeVariables } from './theme'
 import { ThemeInfo } from './themeInfo'
 import { ThemeSwitcher } from './themeSwitcher'
+import { initUiVisibility } from '../utils/preview'
 
 type Props = {}
 
@@ -23,6 +24,10 @@ export class ThemeEditor extends React.PureComponent<Props, State> {
     this.setState({ activeTheme: theme })
   }
 
+  componentDidMount(): void {
+    initUiVisibility()
+  }
+
   render(): JSX.Element {
     return (
       <>

src/demo/styles.css

@@ -13,6 +13,7 @@ html {
 }
 
 body {
+  background-color: var(--color-neutral-100);
   font-family: var(--font-family-body, sans-serif);
   height: 100%;
   margin: 0;
@@ -22,6 +23,28 @@ body {
     display: flex;
     flex-wrap: wrap;
   }
+
+  &.headerHidden {
+    padding-top: 0;
+
+    header {
+      display: none;
+    }
+
+    iframe {
+      height: calc(100vh - 3rem);
+    }
+  }
+
+  &.sideBarHidden {
+    #sidebar {
+      display: none;
+    }
+
+    iframe {
+      width: calc(100% - 3rem);
+    }
+  }
 }
 
 body > * {
@@ -103,10 +126,6 @@ header {
   }
 }
 
-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;

src/demo/utils/preview.ts

@@ -2,6 +2,22 @@ import { keys, ASSET_PATH } from '.'
 import { examples, resolveExample } from '../../examples'
 import { append, create } from '../../util'
 
+/**
+ * Read query parameters from the URL, and conditionally hide the Theme Editor UI components
+ */
+export const initUiVisibility = (): void => {
+  const query = window.location.search
+  const hideUi: boolean = query.includes('ui=false')
+
+  if (hideUi || query.includes('header=false')) {
+    document.body.classList.add('headerHidden')
+  }
+
+  if (hideUi || query.includes('sidebar=false')) {
+    document.body.classList.add('sideBarHidden')
+  }
+}
+
 export const getExample = (): string => {
   return (
     new URL(window.location.href).searchParams.get(keys.EXAMPLE) ??