Added datafiles

Author: Stefterv

content/examples/Basics/Image/Alphamask/data/mask.jpg

@@ -76,6 +76,7 @@ const updateExamples = async () => {
       cwd: path.join(from, example.dirname)
     });
 
+
     for (let i = 0; i < pdes.length; i++) {
       const pde = pdes[i];
       fs.copySync(
@@ -91,6 +92,10 @@ const updateExamples = async () => {
 
     for (let i = 0; i < dataFiles.length; i++) {
       const dataFile = dataFiles[i];
+      fs.copySync(
+        path.join(from, example.dirname, dataFile),
+        path.join(to, example.dirname, dataFile)
+      )
       fs.copySync(
         path.join(from, example.dirname, dataFile),
         path.join(

content/examples/Basics/Image/Alphamask/data/moonwalk.jpg

@@ -1,20 +1,29 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 
 import ProcessingIcon from '../images/logo-processing.svg';
 
 import * as css from './OpenWithButton.module.css';
 
-const OpenWithButton = ({ pdes }) => {
+const OpenWithButton = ({ pdes, dataFiles }) => {
     const main = pdes[0]
-    let sketchURL = `pde://sketch/base64/${stringToBase64(main.code)}?pde=`
-    for (let pde of pdes) {
-        if (pde === main) continue
-        sketchURL += `${pde.name}:${stringToBase64(pde.code)},`
-    }
+    const [sketchURL, setSketchURL] = useState(`processing://open?sketch=${stringToBase64(main.code)}`)
+
+    useEffect(() => {
+        let sketchURL = `pde://sketch/base64/${stringToBase64(main.code)}?pde=`
+        for (let pde of pdes) {
+            if (pde === main) continue
+            sketchURL += `${pde.name}:${stringToBase64(pde.code)},`
+        }
+        if (dataFiles.length > 0) {
+            let data = '&data=' + dataFiles.map(file => file.relativePath.split('/').pop() + ":" + window.location.protocol + "//" + window.location.host + file.publicURL).join(',')
+            sketchURL += data
+        }
+        setSketchURL(sketchURL)
+    }, [])
     const [showInstructions, setShowInstructions] = useState(false)
 
-    React.useEffect(() => {
+    useEffect(() => {
         const handleClickOutside = (event) => {
             if (showInstructions && !event.target.closest(`.${css.root}`)) {
                 setShowInstructions(false);
@@ -36,7 +45,7 @@ const OpenWithButton = ({ pdes }) => {
             {showInstructions && (
                 <div className={classnames(css.instructions)}>
                     <h1>Opening Processing<span className={css.ellipsis}></span></h1>
-                    <p>If nothing happens, <a href="https://www.processing.org/download/" target="_black" className={css.downloadLink}>Download Processing</a> version 4.4.1 or later and try again.</p>
+                    <p>If nothing happens, <a href="https://www.processing.org/download/" target="_black">Download Processing</a> version 4.4.1 or later and try again.</p>
                     <p className={classnames(css.tooltipFootnote)}>Make sure Processing is installed and was opened at least once.</p>
                 </div>
             )}

scripts/updateExamples.js

@@ -10,7 +10,7 @@ import { escapeHtml } from '../utils';
 
 import * as css from './Tabs.module.css';
 
-const Tabs = ({ pdes, className }) => {
+const Tabs = ({ pdes, className, dataFiles }) => {
   const [active, setActive] = useState(pdes[0].name);
 
   useHighlight();
@@ -43,7 +43,7 @@ const Tabs = ({ pdes, className }) => {
           key={key}>
           <div className={css.actions}>
             <CopyButton text={pde.code} />
-            <OpenWithButton pdes={pdes} />
+            <OpenWithButton pdes={pdes} dataFiles={dataFiles} />
           </div>
           <pre className={css.codeBlock}>
             <code

src/components/OpenWithButton.js

@@ -0,0 +1,23 @@
+import { useStaticQuery, graphql } from "gatsby"
+
+export const useExampleDataFiles = (sketchName) => {
+  const data = useStaticQuery(
+    graphql`
+query GetExampleDataFiles {
+  allFile(
+    filter: {sourceInstanceName: {eq: "examples"}, name: {}, relativePath: {regex: "/data/"}}
+  ) {
+    edges {
+      node {
+        relativePath
+        publicURL
+      }
+    }
+  }
+}`
+  )
+  return data.allFile.edges
+    .map((edge) => edge.node)
+    .filter(node => node.relativePath.includes(sketchName))
+    ;
+}

src/components/Tabs.js

@@ -22,10 +22,12 @@ import {
   useRelatedExamples,
   useTrail
 } from '../../hooks/examples';
+import { useExampleDataFiles } from '../../hooks/examples/data';
 
 import * as css from '../../styles/templates/examples/example.module.css';
 import * as grid from '../../styles/grid.module.css';
 
+
 const ExampleTemplate = ({ data, pageContext }) => {
   const [showSidebar, setShowSidebar] = useSidebar('examples');
   const intl = useIntl();
@@ -35,6 +37,7 @@ const ExampleTemplate = ({ data, pageContext }) => {
   const { image, allExamples, relatedImages, liveSketch } = data;
 
   const example = usePreparedExample(data.example);
+  const dataFiles = useExampleDataFiles(name)
   const pdes = usePdes(data.pdes.nodes, locale, name);
   const examples = usePreparedExamples(allExamples.nodes, relatedImages.nodes);
   const tree = useTree(examples);
@@ -117,7 +120,7 @@ const ExampleTemplate = ({ data, pageContext }) => {
                 />
               )}
             </div>
-            <Tabs pdes={pdes} />
+            <Tabs pdes={pdes} dataFiles={dataFiles} />
             <RelatedExamples
               examples={relatedExamples}
               heading={intl.formatMessage({ id: 'relatedExamples' })}