Skip to content

Commit

Permalink
Merge pull request #323 from infinum/feature/playground-improvements
Browse files Browse the repository at this point in the history 
WP playground-related improvements
  • Loading branch information
@goranalkovic-infinum
goranalkovic-infinum authored May 10, 2024
2 parents b3e2ba9 + 16bb23c commit b1e0cf4
Show file tree
Hide file tree
Showing 7 changed files with 1,561 additions and 1,706 deletions.
3,051 changes: 1,428 additions & 1,623 deletions website/package-lock.json
View file

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions website/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@eightshift/docs",
"version": "9.0.0",
"version": "9.1.0",
"description": "A documentation website for Eightshift open source projects.",
"author": {
"name": "Eightshift team",
Expand Down Expand Up @@ -32,16 +32,16 @@
"clear": "docusaurus clear"
},
"dependencies": {
"@docusaurus/core": "^3.1.1",
"@docusaurus/preset-classic": "^3.1.1",
"@docusaurus/core": "^3.3.2",
"@docusaurus/preset-classic": "^3.3.2",
"@infinum/docusaurus-theme": "^0.5.0",
"@mdx-js/react": "^3.0.1",
"@wp-playground/client": "^0.6.7",
"clsx": "^2.1.0",
"@wp-playground/client": "^0.7.19",
"clsx": "^2.1.1",
"es-text-loader": "file:plugins/es-text-loader",
"prism-react-renderer": "^2.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"browserslist": {
"production": [
Expand Down
44 changes: 25 additions & 19 deletions website/src/pages/devkit-components.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@ export default function DevKitComponents() {
const { siteConfig = {} } = context;

const [isLoading, setIsLoading] = useState(true);
const [loadingStep, setLoadingStep] = useState('Initializing');
const [loadingProgress, setLoadingProgress] = useState(null);

useEffect(() => {
const init = async () => {

const client = await startPlaygroundWeb({
iframe: iframeRef.current,
remoteUrl: `https://playground.wordpress.net/remote.html`,
Expand Down Expand Up @@ -40,16 +41,25 @@ export default function DevKitComponents() {
});

// Fetch theme.
setLoadingStep('Loading theme');
setLoadingProgress(25);

const themeZipFilename = 'devkit-components.zip';
const themeZipReq = await fetch(`/${themeZipFilename}`, {
headers: {
'Content-Type': 'application/octet-stream',
},
credentials: 'include'
})

setLoadingProgress(33);
setLoadingStep('Unpacking theme');

const themeZipBlob = await themeZipReq.blob();
const themeFile = new File([themeZipBlob], themeZipFilename);

setLoadingProgress(50);
setLoadingStep('Installing theme');
await installTheme(client, {
themeZipFile: themeFile,
options: {
Expand All @@ -58,12 +68,18 @@ export default function DevKitComponents() {
});

// Install WP-CLI.
setLoadingProgress(60);
setLoadingStep('Setting up 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.
setLoadingStep('Initializing block');
setLoadingProgress(80);

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,
Expand All @@ -72,8 +88,12 @@ export default function DevKitComponents() {
// 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();

setLoadingStep('Finalizing');
setLoadingProgress(92);

await client.goTo(`/wp-admin/post.php?post=${addedPostId}&action=edit`);

setLoadingProgress(100);
await new Promise((resolve) => setTimeout(resolve, 1500));

setIsLoading(false);
Expand Down Expand Up @@ -102,24 +122,10 @@ export default function DevKitComponents() {
/>

{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 className='es-full-size flex flex-col items-center justify-center gap-1.5 esd-full-fixed'>
<progress value={loadingProgress} max={100}></progress>
<h3>Preparing component docs</h3>
<span className='text-12'>{loadingStep}</span>
</div>
}
</Layout>
Expand Down
91 changes: 82 additions & 9 deletions website/src/pages/playground.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import Layout from '@theme/Layout';
Expand All @@ -9,16 +9,21 @@ export default function Playground() {
const context = useDocusaurusContext();
const { siteConfig = {} } = context;

const [iframeUrl, setIframeUrl] = useState('');

const [isLoading, setIsLoading] = useState(true);
const [loadingStep, setLoadingStep] = useState('Initializing');
const [loadingProgress, setLoadingProgress] = useState(null);

useEffect(() => {
const init = async () => {

const client = await startPlaygroundWeb({
iframe: iframeRef.current,
remoteUrl: `https://playground.wordpress.net/remote.html`,
remoteUrl: 'https://playground.wordpress.net/remote.html',
blueprint: {
preferredVersions: {
php: '8.3',
wp: '6.4',
wp: '6.5',
},
phpExtensionBundles: [
'kitchen-sink'
Expand All @@ -36,19 +41,34 @@ export default function Playground() {
]
},
sapiName: 'cli',
onClientConnected: (playground) => {
window.playground = playground;
},
});

client.onNavigation((url) => {
setIframeUrl(url);
});

// Fetch theme.
setLoadingStep('Loading theme');
setLoadingProgress(25);
const themeZipFilename = 'devkittest.zip';
const themeZipReq = await fetch(`/${themeZipFilename}`, {
headers: {
'Content-Type': 'application/octet-stream',
},
credentials: 'include'
})

setLoadingProgress(33);
setLoadingStep('Unpacking theme');
const themeZipBlob = await themeZipReq.blob();
const themeFile = new File([themeZipBlob], themeZipFilename);

setLoadingProgress(50);
setLoadingStep('Installing theme');

await installTheme(client, {
themeZipFile: themeFile,
options: {
Expand All @@ -57,37 +77,53 @@ export default function Playground() {
});

// Install WP-CLI.
setLoadingProgress(60);
setLoadingStep('Setting up 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 post.
setLoadingProgress(75);
setLoadingStep('Adding demo posts');

const welcomePostContent = introPost.split("\n").map((line) => line.trim()).join('');
await client.writeFile(`/wordpress/initial-post.txt`, welcomePostContent);

const {text: wpCliOutput} = await wpCLI(client, {
const { text: wpCliOutput } = await wpCLI(client, {
command: `wp post create /wordpress/initial-post.txt --post_title='Welcome to Eightshift DevKit!' --post_type='page' --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();

setLoadingProgress(95);
setLoadingStep('Finalizing');
await client.goTo(`/wp-admin/post.php?post=${addedPostId}&action=edit`);

setLoadingProgress(100);
// Add demo posts.
await wpCLI(client, {
command: 'wp post generate --count=10 --post_status=publish',
wpCliPath,
});

setIsLoading(false);
};

init();
}, []);

const iframeRef = useRef(null);

const handleUrlSubmit = (e) => {
e.preventDefault();
window?.playground?.goTo(iframeUrl);
}

return (
<Layout
title='Playground'
Expand All @@ -96,11 +132,48 @@ export default function Playground() {
metaImage={useBaseUrl(`img/${siteConfig.customFields.image}`)}
wrapperClassName='es-single-full-screen-child es-has-t-border'
>
<iframe
<div
className='es-full-size'
allow='clipboard-read; clipboard-write'
ref={iframeRef}
/>
style={{
visibility: isLoading ? 'hidden' : 'visible'
}}
>
<div
className='flex flex-col desktop:flex-row items-center gap-8 desktop:justify-between bg-grey-100'
style={{
borderBottom: '1px solid rgb(228 235 245)',
padding: '0.5rem',
}}
>
<form className='w-full' onSubmit={handleUrlSubmit}>
<input
className='w-full border text-12'
value={iframeUrl}
onChange={({ target }) => setIframeUrl(target?.value)}
type='text'
style={{
fontFamily: 'var(--ifm-font-family-monospace)',
borderColor: 'rgb(228 235 245)',
borderRadius: '0.5rem',
padding: '0.5rem',
}}
/>
</form>
</div>
<iframe
className='es-full-size border-t border-t-grey-200'
allow='clipboard-read; clipboard-write'
ref={iframeRef}
/>
</div>

{isLoading &&
<div className='es-full-size flex flex-col items-center justify-center gap-1.5 esd-full-fixed'>
<progress value={loadingProgress} max={100}></progress>
<h3>Preparing playground</h3>
<span className='text-12'>{loadingStep}</span>
</div>
}
</Layout>
);
};
67 changes: 19 additions & 48 deletions website/src/theme/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,35 @@
@import url('https://use.typekit.net/baz1roy.css');

.sk-cube-grid {
width: 3rem;
height: 3rem;
margin: 0 auto;
.esd-full-fixed {
position: fixed;
inset: 0;
}

.sk-cube-grid .sk-cube {
width: 33%;
height: 33%;
float: left;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
background-color: rgb(216 38 44);
}

.sk-cube-grid .sk-cube1 {
animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
animation-delay: 0.4s;
progress {
appearance: none;
}

.sk-cube-grid .sk-cube4 {
animation-delay: 0.1s;
}
progress::-webkit-progress-bar {
background-color: white;
border-radius: 10rem;
border: 1px solid var(--ifm-color-gray-400);

.sk-cube-grid .sk-cube5 {
animation-delay: 0.2s;
height: 0.5rem;
}

.sk-cube-grid .sk-cube6 {
animation-delay: 0.3s;
}
progress::-webkit-progress-value {
background-color: #D8262C;
border-radius: 10rem;

.sk-cube-grid .sk-cube7 {
animation-delay: 0s;
}

.sk-cube-grid .sk-cube8 {
animation-delay: 0.1s;
}
height: 0.5rem;

.sk-cube-grid .sk-cube9 {
animation-delay: 0.2s;
transition: 0.5s inline-size ease-out;
}

@keyframes sk-cubeGridScaleDelay {
0%,
70%,
100% {
transform: scale3D(1, 1, 1);
}
progress[value]::-moz-progress-bar {
background-color: #D8262C;
border-radius: 10rem;

35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
height: 0.5rem;
}
Binary file modified website/static/devkit-components.zip
View file
Binary file not shown.
Binary file modified website/static/devkittest.zip
View file
Binary file not shown.

0 comments on commit b1e0cf4

Please sign in to comment.