Standalone preview

Author: pomber

playground/src/app.jsx

@@ -20,26 +20,29 @@ const defaultCss = `.preview-container {
 }`;
 
 function App() {
-  const defaultInput = React.useMemo(() => {
-    return (
-      readHash() || {
-        mdx: defaultCode,
-        css: defaultCss,
-        config: {
-          lineNumbers: false,
-          showCopyButton: false,
-          theme: "material-darker",
-        },
-      }
-    );
+  const data = React.useMemo(() => {
+    const input = readHash() || {
+      mdx: defaultCode,
+      css: defaultCss,
+      config: {
+        lineNumbers: false,
+        showCopyButton: false,
+        theme: "material-darker",
+      },
+    };
+    const params = new URL(location).searchParams;
+    const standalonePreview = !!params.get("preview");
+    return { input, standalonePreview };
   }, []);
-  const [input, setInput] = useState(defaultInput);
+  const [input, setInput] = useState(data.input);
 
   React.useEffect(() => {
     writeHash(input);
   }, [input]);
 
-  return (
+  return data.standalonePreview ? (
+    <Preview input={input} standalone={true} />
+  ) : (
     <div className="app">
       <header>
         <a className="code-hike" href="https://codehike.org">

playground/src/index.css

@@ -136,12 +136,16 @@ main {
 
 .preview {
   min-width: 600px;
-  border-left: 2px solid cadetblue;
   flex: 1;
   min-height: 0;
   overflow: auto;
 }
 
+.preview.standalone {
+  overflow: unset;
+  padding: 0.1px;
+}
+
 .preview-error {
   color: #be0924;
   padding: 0.5rem 1.5rem;
@@ -172,3 +176,28 @@ main {
   opacity: 0.8;
   filter: blur(1.5px);
 }
+
+.standalone-link {
+  position: fixed;
+  top: 3.6rem;
+  right: 1.6rem;
+  z-index: 3;
+  background-color: #222;
+  color: #fafafa;
+  border-radius: 4px;
+  border: 1px solid #fafafa;
+}
+
+.standalone .standalone-link {
+  top: 2rem;
+}
+
+.standalone-link:hover {
+  background-color: #000;
+}
+.icon {
+  width: 24px;
+  height: 24px;
+  display: block;
+  padding: 4px;
+}

playground/src/preview.jsx

@@ -6,10 +6,11 @@ import { CH } from "@code-hike/mdx/components";
 import "@code-hike/mdx/styles.css";
 import { ErrorBoundary } from "react-error-boundary";
 import { getTheme } from "./themes";
+import { toHash } from "./hash";
 
 export function Preview(props) {
   return (
-    <div className="preview">
+    <div className={`preview ${props.standalone ? "standalone" : ""}`}>
       <ErrorBoundary
         resetKeys={[props.input.mdx, props.input.css, props.input.config]}
         FallbackComponent={ErrorFallback}
@@ -28,7 +29,7 @@ function ErrorFallback({ error }) {
   );
 }
 
-function InnerPreview({ input }) {
+function InnerPreview({ input, standalone }) {
   const [Content, setContent] = useState(undefined);
   const [error, setError] = useState(undefined);
   useEffect(() => {
@@ -67,9 +68,57 @@ function InnerPreview({ input }) {
           <pre>{error}</pre>
         </div>
       ) : null}
+      {standalone ? (
+        <a href={`/#${toHash(input)}`} className="standalone-link">
+          <PlaygroundIcon />
+        </a>
+      ) : (
+        <a href={`/?preview=1#${toHash(input)}`} className="standalone-link">
+          <ExternalIcon />
+        </a>
+      )}
       <div className={`preview-container ${error ? "with-error" : ""}`}>
         {Content ? <Content components={{ CH }} /> : null}
       </div>
     </>
   );
 }
+
+function ExternalIcon() {
+  return (
+    <svg
+      className="icon"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Open in new window</title>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+      />
+    </svg>
+  );
+}
+function PlaygroundIcon() {
+  return (
+    <svg
+      className="icon"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Open playground</title>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+      />
+    </svg>
+  );
+}