Fixed missing components from base Docusaurus lab

Author: dfreniche

src/components/BrowserWindow/index.js

@@ -0,0 +1,34 @@
+import "./main.css";
+import React from "react";
+
+export default function BrowserWindow(props) {
+  // Straight out of w3schools: https://www.w3schools.com/howto/howto_css_browser_window.asp
+
+  const url = props.url || "http://localhost:3000";
+
+  return (
+    <div className="browser container">
+      <div className="row">
+        <div className="column left">
+        <span className="dot" style={{background: "#ED594A"}}></span>
+        <span className="dot" style={{background: "#FDD800"}}></span>
+        <span className="dot" style={{background: "#5AC05A"}}></span>
+        </div>
+        <div className="column middle">
+          <input type="text" value={url} />
+        </div>
+        <div className="column right">
+          <div style={{float: "right"}}>
+            <span className="bar"></span>
+            <span className="bar"></span>
+            <span className="bar"></span>
+          </div>
+        </div>
+      </div>
+
+      <div className="content">
+        {props.children}
+      </div>
+    </div>
+  )
+}

src/components/BrowserWindow/main.css

@@ -0,0 +1,81 @@
+* {
+  box-sizing: border-box;
+}
+
+/* The browser window */
+.browser.container {
+  border: 3px solid #f1f1f1;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  margin-bottom: 10px;
+  cursor: not-allowed;
+}
+
+/* Container for columns and the top "toolbar" */
+.browser .row {
+  padding: 10px;
+  background: #f1f1f1;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+/* Create three unequal columns that floats next to each other */
+.browser .column {
+  float: left;
+}
+
+.browser .left {
+  width: 15%;
+}
+
+.browser .right {
+  width: 10%;
+}
+
+.browser .middle {
+  width: 75%;
+}
+
+/* Clear floats after the columns */
+.browser .row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/* Three dots */
+.browser .dot {
+  margin-top: 4px;
+  height: 12px;
+  width: 12px;
+  background-color: #bbb;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+/* Style the input field */
+.browser input[type=text] {
+  width: 100%;
+  border-radius: 3px;
+  border: none;
+  background-color: white;
+  margin-top: -8px;
+  height: 25px;
+  color: #666;
+  padding: 5px;
+}
+
+/* Three bars (hamburger menu) */
+.browser .bar {
+  width: 17px;
+  height: 3px;
+  background-color: #aaa;
+  margin: 3px 0;
+  display: block;
+}
+
+/* Page content */
+.browser .content {
+  padding: 10px;
+  text-align: center;
+}

src/components/Link.js

@@ -0,0 +1,10 @@
+import React from "react";
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+export default function UTMLink(props) {
+  const context = useDocusaurusContext();
+  const utmParams = context?.siteConfig?.customFields?.utmParams || '';
+  const to = `${props.to}?${utmParams}`;
+  return <Link {...props} to={to} />;
+}

src/components/Screenshot.js

@@ -0,0 +1,11 @@
+import React from "react";
+import BrowserWindow from "@site/src/components/BrowserWindow";
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+export default function Screenshot(props) {
+  return (
+    <BrowserWindow {...props}>
+      <img src={useBaseUrl(props.src)} alt={props.alt} />
+    </BrowserWindow>
+  )
+};

src/theme/MDXComponents.js

@@ -0,0 +1,12 @@
+import React from 'react';
+// Import the original mapper
+import MDXComponents from '@theme-original/MDXComponents';
+import Link from "@site/src/components/Link";
+import Screenshot from "@site/src/components/Screenshot";
+
+export default {
+  // Re-use the default mapping
+  ...MDXComponents,
+  Link,
+  Screenshot
+};