Skip to content

Create dedicated Storybook section on website for interactive editor exploration #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kumaradityaraj wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Create dedicated Storybook section on website for interactive editor exploration #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import ThemeIcon from './ThemeIcon.astro';
</div>
<div class="navbar-end">
<ul class="menu menu-horizontal px-1">
<li><a href="https://openworkflow-editor.netlify.app/" target="_blank">Playground</a></li>

@lornakelly lornakelly Sep 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should move this link to the consts.ts file where other external links are for consistency. And lets also add rel="noopener" as all external links on this site have it as well

@lornakelly lornakelly Sep 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also wondering should we change from Playground > Try the Editor
wdyt?

@fantonangeli fantonangeli Sep 3, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lornakelly https://openworkflow-editor.netlify.app/ is the deployment from main branch, which is ok for now and it's updated.
I think for the Editor, as a next step, we should have a deployment

  • from the version tag (ie. 1.1.0)
  • possibly using GH Pages as Netlify deletes a deployment after a while ( default should be 90days)

Does it make sense?

@lornakelly lornakelly Sep 3, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes most definitely, good catch - otherwise they are going to see features not released yet. Can you please add a ticket to the editor repo for his @fantonangeli ?

@ricardozanini ricardozanini Sep 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I agree -> we will need a new netlify account perhaps?

@fantonangeli fantonangeli Sep 3, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ricardozanini I’ve also done some research on this topic. Netlify deploy are subject to retention, so permanent versioned release URLs would require additional setup, likely a dedicated release site managed from our release CI, and not fully automated by Netlify..

GitHub Pages seems simpler for this use case: we can publish releases directly from the release workflow and naturally expose permanent versioned URLs such as /1.1.0/, /1.2.0/, etc, and we can always view a previous version.

@ricardozanini ricardozanini Sep 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow, we could publish directly to the org's GH page and we would have an /editor path.

@fantonangeli fantonangeli Sep 3, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we create a GH Pages under https://github.com/open-workflow-specification/editor we can manage autonomously, and @lornakelly already has permissions for that

@fantonangeli fantonangeli Sep 4, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue created: open-workflow-specification/editor#387

<li><a href="/blog">Blog</a></li>
<li><a href="/community">Community</a></li>
</ul>
Expand Down
48 changes: 48 additions & 0 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,54 @@ import OWSEditor from "../components/OWSEditor";
const examples = (await getCollection('example')).sort((a,b) => a.data.title.localeCompare(b.data.title));
---
<Layout>
<!-- Diagram Editor CTA -->
<div
id="editor-popup"
class="hidden fixed bottom-6 right-6 z-50 w-[300px] rounded-box border border-base-300 bg-base-100 p-5 shadow-2xl"
>
<button
id="editor-popup-close"
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
aria-label="Close"
type="button"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</button>

<div>
<h3 class="text-xl font-bold">
Meet the Diagram Editor
</h3>
<p class="mt-1 text-sm opacity-80">
Visualize and explore workflows with our interactive editor.
</p>
<a
href="https://openworkflow-editor.netlify.app/"
target="_blank"
rel="noopener noreferrer"
class="btn btn-primary btn-sm mt-4"
>
Try the Editor
</a>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
const popup = document.getElementById("editor-popup");
const closeButton = document.getElementById("editor-popup-close");

@lornakelly lornakelly Sep 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because this isnt persisted to session or local storage, it means you can close pop, then if you navigate to Blog or something else and come back it will reappear

@ricardozanini @JBBianchi Would you prefer if when you dismiss the pop up, you dont have to dismiss again or you are ok with the above behaviour

@ricardozanini ricardozanini Sep 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm ok with the popup showing all the time :D

if (!popup) return;
setTimeout(() => {
popup.classList.remove("hidden");
}, 2000);
closeButton?.addEventListener("click", () => {
popup?.remove();
});
});
</script>

<!-- Hero -->
<div class="hero min-h-[60vh]">
<div class="relative h-full w-full bg-base-200 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]">
Expand Down