Skip to content

Commit

Permalink
add new loaders to components and playground
Browse files Browse the repository at this point in the history
  • Loading branch information
@goranalkovic-infinum
goranalkovic-infinum committed May 10, 2024
1 parent cd6fd99 commit 16bb23c
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 28 deletions.
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>
);
};

0 comments on commit 16bb23c

Please sign in to comment.