website tweaks and fixes (#97)

flydelabs · Mar 3, 2024 · dece56c · dece56c
1 parent a349606
commit dece56c
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 106 deletions.
diff --git a/runtime/webpack-loader.js b/runtime/webpack-loader.js
@@ -23,16 +23,7 @@ module.exports = async function loader() {
         node.run = `___require('./${requirePath}').${node.source.export}.run___`;
       }
       return { ...acc, [key]: node };
-    } else if (node.editorComponentBundlePath) {
-      const resolvedBundlePath = join(
-        node.source.path,
-        node.editorComponentBundlePath
-      );
-      node.editorComponentBundleContent = readFileSync(
-        resolvedBundlePath,
-        "utf-8"
-      );
-      // is macro node
+    } else if (node.editorConfig) {
       return { ...acc, [key]: node };
     }
     return acc;

diff --git a/website/docs/5-custom-nodes.mdx b/website/docs/5-custom-nodes.mdx
@@ -21,8 +21,8 @@ A Flyde custom code node can be created by exporting an object that implements t
 
 A custom code node consists of 2 parts:
 
-- its metadata, which is used to describe the node in the visual editor. This includes the node's name, description, inputs, outputs, and icon.
-- its logic, which is the code that runs when the node is executed.
+- Its metadata, which is used to describe the node in the visual editor. This includes the node's name, description, inputs, outputs, and icon.
+- Its logic, which is the code that runs when the node is executed.
 
 The following example shows how to create a custom code node that adds two numbers together:
 

diff --git a/website/docs/index.md b/website/docs/index.md
@@ -21,14 +21,16 @@ Flyde makes it easier for **less skilled technical members to understand, and ev
 Flyde's main building blocks are:
 
 - .flyde files, which represent Flyde flows. They are YAML files behind the scenes and describe which nodes are in the flow, and how they are connected.
-- The visual flow editor editor, which edits .flyde files. Available as a [VSCode extension](https://marketplace.visualstudio.com/items?itemName=flyde.flyde-vscode)
+- The visual flow editor, which edits .flyde files. Available as a [VSCode extension](https://marketplace.visualstudio.com/items?itemName=flyde.flyde-vscode)
 - The runtime library, an npm package `@flyde/runtime`, which runs loads and runs .flyde files. Both on NodeJS and the browser (via a webpack loader)
 - The standard library, an npm package `@flyde/stdlib`, which contains a set of built-in nodes that can be used to create flows. Note: `@flyde/runtime` depends on `@flyde/stdlib`, so you don't need to install it separately.
 
 ## Getting Started
 
 The easiest way to experiment with Flyde is to visit the [online playground](https://flyde.dev/playground), which allows you to create and run flows in the browser.
 
+If you want to learn how to integrate Flyde with your code, jump straight to the the [Integrating with Existing Code](./integrate-flows) guide.
+
 The playground has many examples and showcases not only the visual editor, but also the runtime library, and how to integrate it with your own code.
 
 After you've played with the playground, you can install the VSCode extension, and start creating your own flows and integrating them with your code.

diff --git a/website/src/components/EmbeddedFlyde/EmbeddedFlyde.tsx b/website/src/components/EmbeddedFlyde/EmbeddedFlyde.tsx
@@ -74,6 +74,8 @@ export const EmbeddedFlyde: React.FC<EmbeddedFlydeProps> = forwardRef(
       props.flowProps.dependencies
     );
 
+    console.log({ resolvedDeps });
+
     const [editorState, setFlowEditorState] = useState<FlowEditorState>({
       flow,
       boardData: defaultBoardData,

diff --git a/website/src/css/global.scss b/website/src/css/global.scss
@@ -51,7 +51,7 @@
       flex-direction: column;
       max-width: 800px;
       // width: 50rem;
-      height: 30rem;
+      height: 35rem;
       min-height: 25rem;
 
       .example-tip {
@@ -61,6 +61,11 @@
         text-align: right;
         display: inline-flex;
         flex-wrap: wrap;
+        align-items: center;
+
+        &.hidden {
+          visibility: hidden;
+        }
       }
 
       .open-in-playground {

diff --git a/website/src/pages/_examples.ts b/website/src/pages/_examples.ts
@@ -6,27 +6,31 @@ import exampleReactivity from "./_hero-example/ExampleReactivity.flyde";
 export const examples = [
   {
     label: "Hello World",
+    fileName: "hello.flyde",
     flow: exampleHelloWorld,
     tip: `Try double clicking on the "World" node to change the string.`,
     playgroundUrl:
       "https://play.flyde.dev/apps/974a3913-1b3b-4a0a-9ca7-4e2a69d0fddb",
   },
   {
     label: "Beep Boop",
+    fileName: "beep.flyde",
     flow: exampleReactivity,
     tip: `Try changing the collection count and see the output change.`,
     playgroundUrl:
       "https://play.flyde.dev/apps/5860e97d-8e3c-4751-baf2-367bcd768852",
   },
   {
     label: "Debounce/Throttle",
+    fileName: "debounce.flyde",
     flow: exampleDebounceThrottle,
     tip: "Try changing the delay time of the debounce/throttle nodes.",
     playgroundUrl:
       "https://play.flyde.dev/apps/f35b90b9-9438-4805-a700-b7eb32c373b2",
   },
   {
     label: "HTTP Requests",
+    fileName: "http.flyde",
     flow: exampleHttpRequests,
     tip: `Double click "Format Response" to see how it is implemented.`,
     playgroundUrl:

diff --git a/website/src/pages/_hero-example/HeroExample.scss b/website/src/pages/_hero-example/HeroExample.scss
@@ -7,7 +7,9 @@
   height: 28rem;
   box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0px 3px 8px rgba(0, 0, 0, 0.8);
   border: 1px solid #5e5e5e;
+  overflow: hidden;
 
+  border-radius: 8px;
   .run-flow-btn {
     position: absolute;
     top: 20px;
@@ -51,14 +53,19 @@
   }
 
   .terminal-emulator {
-    background: #161616;
+    background: #010101;
     color: white;
     overflow: auto;
     flex: 1;
     font-size: 0.8rem;
     padding: 3px 8px;
   }
 
+  .terminal-header {
+    font-size: 12px;
+    background: #383838;
+  }
+
   .flyde-hero-example-wrapper {
     flex-direction: row;
     display: flex;
@@ -178,21 +185,22 @@
     // css for a file name tag like in vscode
     background-color: #383838;
     color: #cccccc;
-    padding: 0 5px;
-    font-size: 12px;
+    padding: 4px 5px;
+    font-size: 14px;
     // margin-right: 5px;
     width: 100%;
     text-align: center;
     display: block;
 
-    border-right: 1px solid #4f4f4f;
+    border-right: 1px solid #101010;
+
     cursor: pointer;
 
     &:hover {
       background-color: #4f4f4f;
     }
     &.selected {
-      background-color: #4f4f4f;
+      background-color: #1e1e1e;
       color: #ffffff;
     }
   }

diff --git a/website/src/pages/_hero-example/HeroExample.tsx b/website/src/pages/_hero-example/HeroExample.tsx
@@ -1,7 +1,7 @@
 import { EmbeddedFlyde } from "@site/src/components/EmbeddedFlyde/EmbeddedFlyde";
 import React, { forwardRef, useMemo } from "react";
 
-import { CodeBlock, vs2015 } from "react-code-blocks";
+import { vs2015 } from "react-code-blocks";
 
 const codeTheme = vs2015;
 
@@ -26,12 +26,14 @@ export const HeroExample: React.FC<{
   example: (typeof examples)[0];
   ref: any;
   children?: React.ReactNode;
-}> = forwardRef(function HeroExample({ example, children }, ref) {
+  onChangeExample: (example: (typeof examples)[0]) => void;
+}> = forwardRef(function HeroExample(
+  { example, children, onChangeExample },
+  ref
+) {
   const currentExample = example;
   const [logs, setLogs] = React.useState<any>([]);
 
-  const [fileVisible, setFileVisible] = React.useState("Example.flyde");
-
   const flowProps = useMemo(() => {
     const { newDeps, newNode } = processMacroNodes(
       currentExample.flow.flow.node,
@@ -64,52 +66,29 @@ export const HeroExample: React.FC<{
   return (
     <div className="hero-example relative">
       <div className="hero-example__tabs">
-        <div
-          onClick={() => setFileVisible(flowFileName)}
-          className={clsx(
-            "file-tag",
-            fileVisible === flowFileName && "selected"
-          )}
-        >
-          {flowFileName}
-        </div>
-        <div
-          className={clsx("file-tag", fileVisible === "index.ts" && "selected")}
-          onClick={() => setFileVisible("index.ts")}
-        >
-          index.ts
-        </div>
-      </div>
-      {fileVisible === flowFileName ? (
-        <div className="flow-wrapper">
-          <div className="loader-wrapper">
-            <Loader />
+        {examples.map((ex) => (
+          <div
+            onClick={() => onChangeExample(ex)}
+            className={clsx("file-tag", ex === example && "selected")}
+          >
+            {ex.fileName}
           </div>
-          <EmbeddedFlyde
-            ref={ref}
-            flowProps={flowProps}
-            onLog={onLogOutput}
-            onCompleted={noop}
-          />
-          {children}
-        </div>
-      ) : null}
-      {fileVisible === "index.ts" ? (
-        <div className="code-wrapper">
-          <CodeBlock
-            className="code-example"
-            showLineNumbers={false}
-            text={code}
-            language="typescript"
-            theme={codeTheme}
-            codeBlock
-            width="100%"
-          />
+        ))}
+      </div>
+
+      <div className="flow-wrapper">
+        <div className="loader-wrapper">
+          <Loader />
         </div>
-      ) : null}
-      {/* </main> */}
+        <EmbeddedFlyde
+          ref={ref}
+          flowProps={flowProps}
+          onLog={onLogOutput}
+          onCompleted={noop}
+        />
+        {children}
+      </div>
       <div className="terminal-wrapper">
-        <div className="file-tag">Terminal</div>
         <div className="terminal-emulator" ref={logsContainerRef}>
           {logs.length ? (
             logs.map((log, i) => <div key={i}>{log}</div>)

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -18,6 +18,7 @@ import { useCases } from "./_useCases";
 const FIRST_EXAMPLE_IDX = 0;
 
 function HomepageHeader() {
+  const [visibleTips, setVisibleTips] = useState(new Set());
   const [currentExample, setCurrExample] = React.useState(
     examples[FIRST_EXAMPLE_IDX]
   );
@@ -26,27 +27,7 @@ function HomepageHeader() {
 
   const runExample = useCallback(() => {
     exampleRef.current?.runFlow();
-  }, []);
-
-  const examplesContainer = useMemo(() => {
-    return (
-      <div className="example-actions">
-        <span className="font-thin label">Examples:</span>
-        {examples.map((ex) => (
-          <button
-            key={ex.label}
-            className={`button button--sm example-button ${
-              ex.label === currentExample.label
-                ? "button--primary"
-                : "button--secondary"
-            }`}
-            onClick={() => setCurrExample(ex)}
-          >
-            {ex.label}
-          </button>
-        ))}
-      </div>
-    );
+    setVisibleTips((tips) => new Set([...tips, currentExample.fileName]));
   }, [currentExample]);
 
   return (
@@ -77,7 +58,7 @@ function HomepageHeader() {
           </p>
           <div className="buttons-container">
             <Link className="button button--primary button--lg " href="/docs">
-              Quick Start
+              Documentation
             </Link>
             <Link
               className="button button--secondary button--lg example-btn"
@@ -88,8 +69,8 @@ function HomepageHeader() {
           </div>
         </div>
         <div className="example-container">
-          <div className="hero-horizontal-only">{examplesContainer}</div>
           <HeroExample
+            onChangeExample={(ex) => setCurrExample(ex)}
             example={currentExample}
             key={currentExample.label}
             ref={exampleRef}
@@ -104,23 +85,23 @@ function HomepageHeader() {
               Run
             </Button>
           </HeroExample>
-          {currentExample.tip ? (
-            <div className="example-tip">
-              Challenge:{" "}
-              {currentExample.tip.replace(/^[A-Z]/, (s) => s.toLowerCase())}{" "}
-              &nbsp;
-              {currentExample.playgroundUrl ? (
-                <a
-                  href={currentExample.playgroundUrl}
-                  className="open-in-playground"
-                  target="_blank"
-                >
-                  Open in playground
-                </a>
-              ) : null}
-            </div>
-          ) : null}
-          <div className="hero-vertical-only">{examplesContainer}</div>
+
+          <div
+            className={clsx("example-tip", {
+              hidden: !visibleTips.has(currentExample.fileName),
+            })}
+          >
+            <strong>Challenge:</strong>&nbsp;
+            {currentExample.tip.replace(/^[A-Z]/, (s) => s.toLowerCase())}{" "}
+            &nbsp;
+            <a
+              href={currentExample.playgroundUrl}
+              className="open- button button--sm button--secondary"
+              target="_blank"
+            >
+              Open in Playground
+            </a>
+          </div>
         </div>
       </div>
     </div>