Merge pull request #315 from infinum/experiment/playground

Storybook bye bye

website/docusaurus.config.js

@@ -38,11 +38,17 @@ module.exports = {
  position: 'right',
  },
  {
- to: '/storybook/',
- activeBasePath: 'storybook',
+ to: '/devkit-components/',
+ activeBasePath: 'devkit-components',
  label: 'Storybook',
  position: 'right',
  },
+ {
+ to: '/playground/',
+ activeBasePath: 'playground',
+ label: 'Playground',
+ position: 'right',
+ },
  {
  to: '/blog',
  activeBasePath: 'blog',
@@ -162,6 +168,7 @@ module.exports = {
  sidebarPath: require.resolve('./sidebars-forms.js'),
  },
  ],
+ 'es-text-loader',
  ],
  customFields: {
  keywords: [

website/package.json

@@ -36,7 +36,9 @@
  "@docusaurus/preset-classic": "^3.1.1",
  "@infinum/docusaurus-theme": "^0.5.0",
  "@mdx-js/react": "^3.0.1",
+ "@wp-playground/client": "^0.6.7",
  "clsx": "^2.1.0",
+ "es-text-loader": "file:plugins/es-text-loader",
  "prism-react-renderer": "^2.3.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
@@ -52,5 +54,8 @@
  "last 1 firefox version",
  "last 1 safari version"
  ]
+ },
+ "devDependencies": {
+ "raw-loader": "^4.0.2"
  }
 }

website/plugins/es-text-loader/index.js

@@ -0,0 +1,17 @@
+module.exports = function (context, options) {
+ return {
+ name: 'es-text-loader',
+ configureWebpack() {
+ return {
+ module: {
+ rules: [
+ {
+ test: /\.txt$/i,
+ use: 'raw-loader',
+ },
+ ],
+ },
+ };
+ },
+ };
+};

website/plugins/es-text-loader/package.json

@@ -0,0 +1,5 @@
+{
+ "name": "es-text-loader",
+ "version": "0.0.0",
+ "private": true
+ }

website/src/pages/devkit-components.js

@@ -0,0 +1,127 @@
+import React, { useEffect, useRef, useState } from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Layout from '@theme/Layout';
+import { startPlaygroundWeb, installTheme, wpCLI } from '@wp-playground/client';
+
+export default function DevKitComponents() {
+ const context = useDocusaurusContext();
+ const { siteConfig = {} } = context;
+
+ const [isLoading, setIsLoading] = useState(true);
+
+ useEffect(() => {
+ const init = async () => {
+
+ const client = await startPlaygroundWeb({
+ iframe: iframeRef.current,
+ remoteUrl: `https://playground.wordpress.net/remote.html`,
+ blueprint: {
+ preferredVersions: {
+ php: '8.3',
+ wp: '6.4',
+ },
+ phpExtensionBundles: [
+ 'kitchen-sink'
+ ],
+ features: {
+ networking: true,
+ },
+ landingPage: '/wp-admin',
+ steps: [
+ {
+ step: 'login',
+ username: 'admin',
+ password: 'password'
+ },
+ ]
+ },
+ sapiName: 'cli',
+ });
+
+ // Fetch theme.
+ const themeZipFilename = 'devkit-components.zip';
+ const themeZipReq = await fetch(`/${themeZipFilename}`, {
+ headers: {
+ 'Content-Type': 'application/octet-stream',
+ },
+ credentials: 'include'
+ })
+ const themeZipBlob = await themeZipReq.blob();
+ const themeFile = new File([themeZipBlob], themeZipFilename);
+
+ await installTheme(client, {
+ themeZipFile: themeFile,
+ options: {
+ activate: true,
+ },
+ });
+
+ // Install WP-CLI.
+ const wpCliPath = '/wordpress/wp-cli.phar';
+ const wpCliResponse = await fetch('https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar');
+ const wpCli = await wpCliResponse.arrayBuffer();
+ await client.writeFile(wpCliPath, new Uint8Array(wpCli));
+
+ // Add the demo posts.
+ const { text: wpCliOutput } = await wpCLI(client, {
+ command: `wp post create --post_title='Welcome to Eightshift DevKit!' --post_content='<!-- wp:eightshift-boilerplate/devkit-components /-->' --post_status='publish'`,
+ wpCliPath,
+ });
+
+ // WP playground currently has an issue that pollutes the WP-CLI output, so --porcelain isn't of much help here unfortunately.
+ const addedPostId = wpCliOutput.substring(wpCliOutput.indexOf('Created post ') + 13, wpCliOutput.lastIndexOf('.')).trim();
+
+ await client.goTo(`/wp-admin/post.php?post=${addedPostId}&action=edit`);
+
+ await new Promise((resolve) => setTimeout(resolve, 1500));
+
+ setIsLoading(false);
+ };
+
+ init();
+ }, []);
+
+ const iframeRef = useRef(null);
+
+ return (
+ <Layout
+ title='Playground'
+ description={siteConfig.tagline}
+ keywords={siteConfig.customFields.keywords}
+ metaImage={useBaseUrl(`img/${siteConfig.customFields.image}`)}
+ wrapperClassName='es-single-full-screen-child es-has-t-border'
+ >
+ <iframe
+ className='es-full-size'
+ allow='clipboard-read; clipboard-write'
+ ref={iframeRef}
+ style={{
+ visibility: isLoading ? 'hidden' : 'visible'
+ }}
+ />
+
+ {isLoading &&
+ <div
+ style={{ position: 'fixed', top: 0, left: 0, display: 'grid', placeItems: 'center', blockSize: '100%', inlineSize: '100%' }}
+ >
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+ <div class="sk-cube-grid">
+ <div class="sk-cube sk-cube1"></div>
+ <div class="sk-cube sk-cube2"></div>
+ <div class="sk-cube sk-cube3"></div>
+ <div class="sk-cube sk-cube4"></div>
+ <div class="sk-cube sk-cube5"></div>
+ <div class="sk-cube sk-cube6"></div>
+ <div class="sk-cube sk-cube7"></div>
+ <div class="sk-cube sk-cube8"></div>
+ <div class="sk-cube sk-cube9"></div>
+ </div>
+
+ <h3>Preparing docs, please wait</h3>
+ </div>
+ </div>
+ }
+ </Layout>
+ );
+};

website/src/pages/intro-post.txt

@@ -0,0 +1,9 @@
+<!-- wp:eightshift-boilerplate/paragraph {"wrapperSpacingTopLarge":40,"paragraphParagraphContent":"This playground allows you to try all the default blocks that come with DevKit."} /-->
+
+<!-- wp:eightshift-boilerplate/paragraph {"paragraphParagraphContent":"The WordPress instance you're looking at is \u003cstrong\u003erunning in your browser \u003c/strong\u003eand will get reset after you navigate away from the Playground."} /-->
+
+<!-- wp:eightshift-boilerplate/paragraph {"paragraphParagraphContent":"Almost all of WordPress functionalities are available, including managing posts, installing plugins, changing settings, and previewing the site."} /-->
+
+<!-- wp:eightshift-boilerplate/group {"wrapperWidthLarge":6,"wrapperOffsetLarge":4,"wrapperSpacingBottomLarge":0} -->
+<!-- wp:eightshift-boilerplate/card {"wrapperUseShowControl":false,"wrapperSimpleShowControl":false,"wrapperSimple":true,"wrapperBgColorType":"gradient","wrapperBgColorGradient":"linear-gradient(135deg, rgb(255, 253, 241) 0.00%,rgb(249, 244, 215) 100.00%)","wrapperWidthLarge":6,"wrapperOffsetLarge":4,"wrapperSpacingBottomLarge":0,"wrapperSpacingLeftInLarge":20,"wrapperSpacingRightInLarge":20,"wrapperSpacingTopInLarge":20,"wrapperSpacingBottomInLarge":20,"wrapperRoundedCornersLarge":20,"cardCardImageUse":false,"cardCardIntroContent":"🚧\u003cbr\u003eWork in progress!","cardCardIntroSize":"h5:bold","cardCardHeadingContent":"","cardCardHeadingSize":"h4:medium","cardCardHeadingUse":false,"cardCardParagraphContent":"We are working on improving the DevKit playground start page.\u003cbr\u003eA different layout and more demo pages are coming soon!.","cardCardParagraphSize":"caption:regular","cardCardButtonUse":false,"cardCardAlign":"center"} /-->
+<!-- /wp:eightshift-boilerplate/group -->