Wrap demo

tshemeng · Sep 26, 2021 · 90eeed0 · 90eeed0
1 parent c918142
commit 90eeed0
Show file tree

Hide file tree

Showing 80 changed files with 288 additions and 38 deletions.
diff --git a/components/Demo.tsx b/components/Demo.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import Link from 'next/link';
+import { Spacer, Spinner, Window } from '@1milligram/design';
+import { Frame } from '@1milligram/frame';
+
+import { classNames } from '../utils/classNames';
+import { CodeIcon } from './icons/CodeIcon';
+import { LinkIcon } from './icons/LinkIcon';
+import Code from './markdown/Code';
+
+export const Demo: React.FC<{
+    title?: string;
+    url: string;
+}> = ({ title = '', url }) => {
+    const sampleCodeUrl = url.replace('/demo/', 'https://github.com/1milligram/html-dom/blob/master/public/demo/');
+    const [sampleCode, setSampleCode] = React.useState('');
+    const [codeOpened, setCodeOpened] = React.useState(false);
+
+    const loadSampleCode = () => {
+        setCodeOpened(!codeOpened);
+        if (!sampleCode) {
+            fetch(url)
+                .then((response) => response.text())
+                .then((text) => setSampleCode(text));
+        }
+    };
+
+    return (
+        <>
+            <Spacer size="small" />
+            <Window title={title}>
+                <div className="demo">
+                    <div className="demo__frame">
+                        <Frame url={url} />
+                    </div>
+                    <div className="demo__toolbar">
+                        <button className="demo__button" type="button" onClick={loadSampleCode}>
+                            <CodeIcon />
+                        </button>
+                        <Link href={sampleCodeUrl}>
+                            <a className="demo__button" target="blank" rel="noopener noreferrer">
+                                <LinkIcon />
+                            </a>
+                        </Link>
+                    </div>
+                    <div
+                        className={classNames({
+                            demo__code: true,
+                            'demo__code--opened': codeOpened,
+                        })}
+                    >
+                        {!sampleCode && (
+                            <div className="demo__code-loader">
+                                <Spinner />
+                            </div>
+                        )}
+                        {sampleCode && (
+                            <div className="demo__code-body">
+                                <Code className="lang-html">{sampleCode}</Code>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </Window>
+            <Spacer size="small" />
+        </>
+    );
+};
diff --git a/components/icons/CodeIcon.tsx b/components/icons/CodeIcon.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+export const CodeIcon = () => (
+    <svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
+        <g transform="matrix(1,0,0,1,0,0)">
+            <path
+                d="M11.736,5a1,1,0,0,1-.894-.553L9.894,2.553A1,1,0,0,0,9,2H1.5a1,1,0,0,0-1,1V21a1,1,0,0,0,1,1h21a1,1,0,0,0,1-1V6a1,1,0,0,0-1-1Z"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            ></path>
+            <path
+                d="M14.5 9.5L18 13 14.5 16.5"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            ></path>
+            <path
+                d="M9.5 9.5L6 13 9.5 16.5"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            ></path>
+        </g>
+    </svg>
+);
diff --git a/components/icons/LinkIcon.tsx b/components/icons/LinkIcon.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+export const LinkIcon = () => (
+    <svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
+        <g transform="matrix(1,0,0,1,0,0)">
+            <path
+                d="M13.5,14a2,2,0,0,0,2,2h5a3.008,3.008,0,0,0,3-3V11a3.009,3.009,0,0,0-3-3h-5a2,2,0,0,0-2,2"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            ></path>
+            <path
+                d="M10.5,14a2,2,0,0,1-2,2h-5a3.008,3.008,0,0,1-3-3V11a3.009,3.009,0,0,1,3-3h5a2,2,0,0,1,2,2"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            ></path>
+            <path
+                d="M6.5 11.999L17.5 11.999"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            ></path>
+        </g>
+    </svg>
+);
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
         "start": "serve out"
     },
     "dependencies": {
+        "@1milligram/frame": "^1.0.0",
         "@mdx-js/loader": "^1.6.22",
         "@mdx-js/react": "^1.6.22",
         "@next/mdx": "^11.1.2",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -20,7 +20,7 @@ import {
 
 // Design
 import '@1milligram/design/lib/styles/index.css';
-
+import '@1milligram/frame/lib/styles/index.css';
 import '../styles/index.scss';
 
 const markdownComponents = {

diff --git a/pages/allow-to-enter-particular-characters-only.mdx b/pages/allow-to-enter-particular-characters-only.mdx
@@ -1,3 +1,4 @@
+import { Demo } from '../components/Demo';
 import { PostLayout } from '../layouts/PostLayout';
 
 In this example, we will force users to enter characters from given set only. Specifically, the supported characters in this demonstration include the digits and space. Of course, you can apply the idea for other characters as well.
@@ -107,7 +108,10 @@ In our specific example, `<input type="number" />` doesn't help because it doesn
 
 ### Demo
 
-<iframe src="/demo/allow-to-enter-particular-characters-only/index.html"></iframe>
+<Demo
+    title="Allow to enter particular characters only"
+    url="/demo/allow-to-enter-particular-characters-only/index.html"
+/>
 
 ### See also
 

diff --git a/pages/communication-between-an-iframe-and-its-parent-window.mdx b/pages/communication-between-an-iframe-and-its-parent-window.mdx
@@ -1,3 +1,4 @@
+import { Demo } from '../components/Demo';
 import { PostLayout } from '../layouts/PostLayout';
 
 ### Send data from an iframe to its parent window
@@ -69,7 +70,10 @@ Here is an example demonstrates how to send a simple message between a [page](ht
 
 ### Demo
 
-<iframe src="/demo/communication-between-an-iframe-and-its-parent-window/index.html"></iframe>
+<Demo
+    title="Communication between an iframe and its parent window"
+    url="/demo/communication-between-an-iframe-and-its-parent-window/index.html"
+/>
 
 ### See also
 

diff --git a/pages/copy-highlighted-code-to-the-clipboard.mdx b/pages/copy-highlighted-code-to-the-clipboard.mdx
@@ -1,3 +1,4 @@
+import { Demo } from '../components/Demo';
 import { PostLayout } from '../layouts/PostLayout';
 
 Allowing users to copy sample code is a common thing in the web development nowadays.
@@ -22,7 +23,7 @@ You can see the code in the demo below. Enjoy!
 
 ### Demo
 
-<iframe src="/demo/copy-highlighted-code-to-the-clipboard/index.html"></iframe>
+<Demo title="Copy highlighted code to the clipboard" url="/demo/copy-highlighted-code-to-the-clipboard/index.html" />
 
 ### See also
 

diff --git a/pages/count-the-number-of-characters-of-a-textarea.mdx b/pages/count-the-number-of-characters-of-a-textarea.mdx
@@ -1,3 +1,4 @@
+import { Demo } from '../components/Demo';
 import { PostLayout } from '../layouts/PostLayout';
 
 Assume that we have a `textarea` and a normal `div` elements for showing how many characters user has been entering:
@@ -45,7 +46,10 @@ messageEle.addEventListener('input', function (e) {
 
 ### Demo
 
-<iframe src="/demo/count-the-number-of-characters-of-a-textarea/index.html"></iframe>
+<Demo
+    title="Count the number of characters of a textarea"
+    url="/demo/count-the-number-of-characters-of-a-textarea/index.html"
+/>
 
 ### See also
 

diff --git a/pages/create-a-custom-scrollbar.mdx b/pages/create-a-custom-scrollbar.mdx
@@ -1,3 +1,4 @@
+import { Demo } from '../components/Demo';
 import { PostLayout } from '../layouts/PostLayout';
 
 You can customize the look and feel of the browser's scrollbar by changing some CSS properties.
@@ -217,7 +218,7 @@ I hope this post isn't too long and you can follow until here. Following is the
 
 ### Demo
 
-<iframe src="/demo/create-a-custom-scrollbar/index.html"></iframe>
+<Demo title="Create a custom scrollbar" url="/demo/create-a-custom-scrollbar/index.html" />
 
 ### See also
 

diff --git a/pages/create-a-range-slider.mdx b/pages/create-a-range-slider.mdx
@@ -1,3 +1,4 @@
+import { Demo } from '../components/Demo';
 import { PostLayout } from '../layouts/PostLayout';
 
 This post introduces two popular ways to create a range slider.
@@ -141,7 +142,7 @@ Enjoy the demo!
 
 ### Demo
 
-<iframe src="/demo/create-a-range-slider/index.html"></iframe>
+<Demo title="Create a range slider" url="/demo/create-a-range-slider/index.html" />
 
 ### See also
 

diff --git a/pages/create-an-image-comparison-slider.mdx b/pages/create-an-image-comparison-slider.mdx
@@ -1,3 +1,4 @@
+import { Demo } from '../components/Demo';
 import { PostLayout } from '../layouts/PostLayout';
 
 In this post, we'll create a slider for comparing two images visually. The slider has three elements organized as below:
@@ -145,7 +146,7 @@ _Photo by [frank mckenna](https://unsplash.com/@frankiefoto) on [Unsplash](https
 
 ### Demo
 
-<iframe src="/demo/create-an-image-comparison-slider/index.html"></iframe>
+<Demo title="Create an image comparison slider" url="/demo/create-an-image-comparison-slider/index.html" />
 
 ### See also
 

diff --git a/pages/create-resizable-split-views.mdx b/pages/create-resizable-split-views.mdx
@@ -1,3 +1,4 @@
+import { Demo } from '../components/Demo';
 import { PostLayout } from '../layouts/PostLayout';
 
 In this post, we'll add an element to resize children of a given element.
@@ -149,7 +150,7 @@ const mouseUpHandler = function () {
 
 Below is the demo that you can play with.
 
-<iframe src="/demo/create-resizable-split-views/index.html"></iframe>
+<Demo title="Create resizable split views" url="/demo/create-resizable-split-views/index.html" />
 
 ### Support vertical direction
 
@@ -242,7 +243,7 @@ Enjoy the demo!
 
 ### Demo
 
-<iframe src="/demo/create-resizable-split-views/direction.html"></iframe>
+<Demo title="Support vertical direction" url="/demo/create-resizable-split-views/direction.html" />
 
 ### See also
 

diff --git a/pages/drag-and-drop-element-in-a-list.mdx b/pages/drag-and-drop-element-in-a-list.mdx
@@ -1,3 +1,4 @@
+import { Demo } from '../components/Demo';
 import { PostLayout } from '../layouts/PostLayout';
 
 In this example, we will create a sortable list whose items can be dragged and dropped inside it:
@@ -233,7 +234,7 @@ Following is the final demo. Try to drag and drop any item!
 
 ### Demo
 
-<iframe src="/demo/drag-and-drop-element-in-a-list/index.html"></iframe>
+<Demo title="Drag and drop element in a list" url="/demo/drag-and-drop-element-in-a-list/index.html" />
 
 ### See also
 

diff --git a/pages/drag-and-drop-table-column.mdx b/pages/drag-and-drop-table-column.mdx
@@ -1,3 +1,4 @@
+import { Demo } from '../components/Demo';
 import { PostLayout } from '../layouts/PostLayout';
 
 Before taking a look at this example, it's recommended to visit this [post](/drag-and-drop-element-in-a-list) to know how we can drag and drop element in a list.
@@ -251,7 +252,7 @@ Following is the final demo. Try to drag and drop the first cell of any column.
 
 ### Demo
 
-<iframe src="/demo/drag-and-drop-table-column/index.html"></iframe>
+<Demo title="Drag and drop table column" url="/demo/drag-and-drop-table-column/index.html" />
 
 ### See also
 

diff --git a/pages/drag-and-drop-table-row.mdx b/pages/drag-and-drop-table-row.mdx
@@ -1,3 +1,4 @@
+import { Demo } from '../components/Demo';
 import { PostLayout } from '../layouts/PostLayout';
 
 Before taking a look at this example, it's recommended to visit this [post](/drag-and-drop-element-in-a-list) to know how we can drag and drop element in a list.
@@ -232,7 +233,7 @@ Following is the final demo. Try to drag and drop the first cell of any row.
 
 ### Demo
 
-<iframe src="/demo/drag-and-drop-table-row/index.html"></iframe>
+<Demo title="Drag and drop table row" url="/demo/drag-and-drop-table-row/index.html" />
 
 ### See also
 

diff --git a/pages/drag-to-scroll.mdx b/pages/drag-to-scroll.mdx
@@ -1,3 +1,4 @@
+import { Demo } from '../components/Demo';
 import { PostLayout } from '../layouts/PostLayout';
 
 User often uses the mouse to scroll in a scrollable container. In addition to that, some applications also allow user to scroll by dragging the element. You can see that feature implemented in a [PDF viewer](https://react-pdf-viewer.dev), [Figma](https://www.figma.com) and many more.
@@ -107,7 +108,7 @@ Hopefully you love the following demo!
 
 ### Demo
 
-<iframe src="/demo/drag-to-scroll/index.html"></iframe>
+<Demo title="Drag to scroll" url="/demo/drag-to-scroll/index.html" />
 
 ### See also
 

diff --git a/pages/export-a-table-to-csv.mdx b/pages/export-a-table-to-csv.mdx
@@ -1,3 +1,4 @@
+import { Demo } from '../components/Demo';
 import { PostLayout } from '../layouts/PostLayout';
 
 Assume that we have a `table` element and a `button` for exporting the table cells to CSV as following:
@@ -74,7 +75,7 @@ exportBtn.addEventListener('click', function () {
 
 ### Demo
 
-<iframe src="/demo/export-a-table-to-csv/index.html"></iframe>
+<Demo title="Export a table to csv" url="/demo/export-a-table-to-csv/index.html" />
 
 ### See also
 

diff --git a/pages/get-size-of-the-selected-file.mdx b/pages/get-size-of-the-selected-file.mdx
@@ -1,3 +1,4 @@
+import { Demo } from '../components/Demo';
 import { PostLayout } from '../layouts/PostLayout';
 
 In the markup below, we have two elements defined by different `id` attributes.
@@ -58,7 +59,7 @@ sizeEle.innerHTML = formatFileSize(files[0].size);
 
 ### Demo
 
-<iframe src="/demo/get-size-of-the-selected-file/index.html"></iframe>
+<Demo title="Get size of the selected file" url="/demo/get-size-of-the-selected-file/index.html" />
 
 ### See also
 

diff --git a/pages/highlight-an-element-when-dragging-a-file-over-it.mdx b/pages/highlight-an-element-when-dragging-a-file-over-it.mdx
@@ -1,3 +1,4 @@
+import { Demo } from '../components/Demo';
 import { PostLayout } from '../layouts/PostLayout';
 
 Assume that we have a droppable element as below
@@ -48,7 +49,10 @@ The last thing, `e.preventDefault()` is used in the handlers to [prevent](/preve
 
 ### Demo
 
-<iframe src="/demo/highlight-an-element-when-dragging-a-file-over-it/index.html"></iframe>
+<Demo
+    title="Highlight an element when dragging a file over it"
+    url="/demo/highlight-an-element-when-dragging-a-file-over-it/index.html"
+/>
 
 ### See also
 

diff --git a/pages/make-a-draggable-element.mdx b/pages/make-a-draggable-element.mdx
@@ -1,3 +1,4 @@
+import { Demo } from '../components/Demo';
 import { PostLayout } from '../layouts/PostLayout';
 
 Assume that we want to turn the following element to draggable element:
@@ -86,7 +87,7 @@ We can use the technique in this post to
 
 ### Demo
 
-<iframe src="/demo/make-a-draggable-element/index.html"></iframe>
+<Demo title="Make a draggable element" url="/demo/make-a-draggable-element/index.html" />
 
 ### See also