feat: page titles and example controls (#89)

* feat: configure titles using router injector

* feat: example controls

* feedback: pin deps

Author: bitpshr

package-lock.json

@@ -16,6 +16,7 @@
     "@dojo/framework": "~7.0.0"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "5.15.3",
     "canonical-path": "1.0.0",
     "cldr-data": "36.0.0",
     "postcss": "7.0.21",

package.json

@@ -18,6 +18,8 @@ import getWidgetProperties from './interfaces.block';
 import getTheme from './theme.block';
 import code from './code.block';
 
+import '@fortawesome/fontawesome-free/css/all.css';
+
 function getWidgetFileNames(config: any): { [index: string]: string } {
 	return Object.keys(config.widgets).reduce((newConfig, widget) => {
 		return {

src/App.tsx

@@ -85,31 +85,68 @@ export default factory(function Example({
 		dimensions.height = '600px';
 	}
 
+	const isFullscreen = icache.get('isFullscreen');
+	const isCodeShowing = icache.getOrSet('isCodeShowing', true);
+
 	return (
 		<div>
 			{isOverview && <div innerHTML={widgetReadme} />}
 			{isOverview && <HorizontalRule />}
 			<h2 classes="text-2xl h mb-4">{example.title || 'Example'}</h2>
-			<div classes="bg-white rounded-t-lg overflow-hidden border-b-0 border-t border-l border-r border-gray-400 p-4">
-				{example.sandbox ? (
-					<iframe
-						src={`?cacheBust=${widgetName}-${
-							example.filename
-						}-${themeName}#widget/${widgetName}/sandbox/${example.filename.toLowerCase()}?theme=${themeName}`}
-						classes="w-full iframe"
-						styles={dimensions}
-					/>
-				) : (
-					<div key="example-container" styles={example.size ? dimensions : {}}>
-						<example.module />
-					</div>
-				)}
-			</div>
-			<div classes="rounded-b-lg bg-gray-800">
-				<pre classes="bg-blue-900 language-ts rounded px-4 py-4">
-					<code classes="language-ts" innerHTML={widgetExample} />
-				</pre>
+			<div
+				classes={`bg-white overflow-hidden border-t border-l border-r border-gray-400 ${
+					!isCodeShowing ? 'border-b' : 'border-b-0'
+				} ${isFullscreen ? 'fixed top-0 left-0 w-screen h-screen z-50' : 'rounded-t-lg'}`}
+			>
+				<div
+					classes={`border border-gray-400 border-t-0 border-l-0 border-r-0 flex justify-end ${
+						isFullscreen ? 'p-6' : 'px-4 py-2'
+					}`}
+				>
+					<button
+						classes={`border-0 appearance-none bg-transparent cursor-pointer p-0 ${
+							isFullscreen ? 'text-black mr-6' : 'text-gray-500 mr-4'
+						}`}
+						onclick={() => icache.set('isFullscreen', !isFullscreen)}
+					>
+						{isFullscreen ? (
+							<i class="fas fa-compress-alt"></i>
+						) : (
+							<i class="fas fa-expand-alt"></i>
+						)}
+					</button>
+					<button
+						classes={`border-0 appearance-none bg-transparent cursor-pointer p-0 ${
+							isCodeShowing ? 'text-black' : 'text-gray-500'
+						}`}
+						onclick={() => icache.set('isCodeShowing', !isCodeShowing)}
+					>
+						<i class="fas fa-code"></i>
+					</button>
+				</div>
+				<div classes="p-4">
+					{example.sandbox ? (
+						<iframe
+							src={`?cacheBust=${widgetName}-${
+								example.filename
+							}-${themeName}#widget/${widgetName}/sandbox/${example.filename.toLowerCase()}?theme=${themeName}`}
+							classes="w-full iframe"
+							styles={dimensions}
+						/>
+					) : (
+						<div key="example-container" styles={example.size ? dimensions : {}}>
+							<example.module />
+						</div>
+					)}
+				</div>
 			</div>
+			{isCodeShowing && (
+				<div classes="rounded-b-lg bg-gray-800">
+					<pre classes="bg-blue-900 language-ts rounded px-4 py-4">
+						<code classes="language-ts" innerHTML={widgetExample} />
+					</pre>
+				</div>
+			)}
 			{codesandboxPath && (
 				<div classes="my-4">
 					<a href={codesandboxPath}>

src/Example.tsx

@@ -61,7 +61,12 @@ export default ({ config }: { config: Config }) => {
 		const theme = getThemeFromConfig(config);
 		const registry = new Registry();
 		registerThemeInjector(theme.theme, registry);
-		registerRouterInjector(routes, registry);
+		registerRouterInjector(routes, registry, {
+			setDocumentTitle: ({ params, title }) => {
+				const section = params.widget || title;
+				return `Parade${section ? ` - ${section}` : ''}`;
+			}
+		});
 
 		const r = renderer(() => <App config={config} />);
 		r.mount({ registry, domNode: document.getElementById('app')!, transition });

src/index.tsx

@@ -149,10 +149,6 @@ h1 {
 	}
 }
 
-.z-100 {
-	z-index: 1000 !important;
-}
-
 .max-w-screen-xl {
 	max-width: 1280px !important;
 }

src/main.css

@@ -3,7 +3,8 @@ export default [
 		id: 'landing',
 		outlet: 'main',
 		path: '/',
-		defaultRoute: true
+		defaultRoute: true,
+		title: 'Home'
 	},
 	{
 		id: 'widget',