feat(website): initial build of evo web #317

ArtBlue · 2025-10-08T17:55:46Z

Fixes Build the New Evo Web Site #167

Description

A unified build of the Evo Web site

Notes

All details in offline docs.

changeset-bot · 2025-10-08T17:55:51Z

⚠️ No Changeset found

Latest commit: d602670

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

agliga

Theres a lot of files that are being unused. (like a src/routes/temp, all icon files, flags, market sans etc)
Lets clean those up and remove all the unneeded files. I think this will help a lot with the review since theres a lot of things that are unused.

packages/ebayui-core/src/components/ebay-card/examples/horizontal.marko

src/routes/a11y-docs.ts

src/routes/+layout.style.scss

src/routes/static/flag/flag-ac.svg

src/fonts/marketsans-v2/MarketSans-Bold-WebS.css

agliga · 2025-10-10T21:25:34Z

Also some icons are broken on certain links. And icons are broken on the icons link.

ArtBlue · 2025-10-13T18:06:48Z

Also some icons are broken on certain links. And icons are broken on the icons link.

I don't think I changed anything with how the icon master files were being loaded. I did see some styling issues with the icons and flags pages, and I fixed those. However, it doesn't appear as though the master files are actually loaded properly. Could this be a bug in Marko Run? @agliga @LuLaValva , can you look into it?

Check out src/routes/component/+layout.marko, which has <master-icons/> that do not load/render.

ArtBlue · 2025-10-14T18:14:34Z

Some of the icon issues got resolved, not sure how. There are some still missing for some reason.

agliga

Overall looks good, but needs some structure refactor. A lot of these patterns can be simplified and be inferred from the route.
Im happy to chat offline about this too.

agliga · 2025-10-20T16:45:10Z

src/routes/component/accordion/marko+meta.json

@@ -0,0 +1,5 @@
+{
+  "pageTitle": "Accordion Marko Component",
+  "pageDescription": "The Accordion Marko component is optimized for server-side rendering and responsive streaming. It delivers a fast, accessible way to expand and collapse content while ensuring WCAG 2.1 AA compliance, semantic HTML, and seamless performance across devices.",


Do we want this repeated for each route?
It seems like a lot of extra boilerplate for each of these routes. This text is pretty much the same across all the routes except that it says marko instead of css or react.
Maybe we can have this in 1 place and add a "keyword" inside if we want it unique?

It's ideal to keep these since we get a lot of flexibility and having access to update them as needed. There are tweaks to titles and descriptions (and in the future other metas) that can be made to optimize pages and improve search engine rankings. The idea is that once these pages are live, we can track how they are doing and optimize whichever pages are not performing as well as they should to improve their visibility and rankings.

If we really want to have some pages, like the Marko and React be the same and just swap out "Marko" and "React" I suppose that's fine, but I would not want to have them all follow that pattern.

Since we only set these pages up once when we create new components, I don't think this is a big deal.

src/routes/component/accordion/marko+page.marko

agliga · 2025-10-20T16:53:01Z

src/routes/component/accordion/+page.marko

+        <li>Listen to toggle event of each details element</li>
+        <li>When receiving a toggle event, if the details state has moved from closed to open, close all other details elements</li>
+        </ol>
+        <p>That's it. Pretty straightforward. You can reference our <a href="https://github.com/eBay/mindpatterns/blob/gh-pages/_js/accordion.js">example code on GitHub</a>.</p>


Link points to mind patterns

Yep. We've not yet gone through and fixed the links and done a content audit/fix. Those are one of the last steps before we launch. See the doc I mentioned in the internal chat. The doc has the list of all tasks completed and outstanding.

agliga · 2025-10-20T17:01:57Z

src/routes/component/accordion/accessibility+page.marko

+<component-tabs componentInfo=metadata currentTab="A11y">
+    <div id="accordion-a11y">
+        <p>
+            <a11y-mind-pattern pattern="accordion"/>
+        </p>
+    </div>
+</component-tabs>


This can be simplified to be even simpler.

First off we probably should do a dynamic directory for these.
Something like:
component/$name/accessibility
In the accessibility directory, we can simply have this page

<a11y-mind-pattern pattern=$global.params.name/>

Ok, I can look into this.

I looked into this and tried a few different approaches, but I couldn't figure out a way to create a flexible solution that would allow each a11y page to have its own meta json and make the overall system more optimal. If there's a specific solution you have in mind, please let me know.

I agree the dynamic approach reduces initial boilerplate, but the individual route approach provides significantly more flexibility and better aligns with our SEO goals for component documentation. The one-time setup cost per component is worth the long-term benefits.

src/components/component-tabs.marko

agliga · 2025-10-20T17:15:51Z

src/components/component-tabs.marko

@@ -0,0 +1,42 @@
+$ const componentInfo = input.componentInfo || {};


So maybe a better pattern is to have a global metadata.json file with all info across all components
Then we don't have to import metadata in the parent and we can simply import it here and infer what path we are on based on $global.url
To get the current compiled JSON you can visit https://opensource.ebay.com/evo-web/skin/metadata
We can put that in a global JSON and then expose as is, and then read it and infer which component we are on.

Ok. I know DS consumes this for Playbook. As long as we're ok modifying that JSON to have some additional stuff:

{ "name": "accordion", "playbookURL": "https://playbook.ebay.com/design-system/components/accordion", "ds-component": { "name": "accordion", "staticVersion": 1.1, "markoVersion": 1.1, "reactVersion": 1.1 } }

I think thats fine. Its actually better that way.
I would also make it so that if there is no markoVersion or react version then it uses static version. We don't need to add the versions if the components are all aligned.

LuLaValva · 2025-10-30T23:17:01Z

Hey @ArtBlue I'm working on a PR to simplify some of the structure here, but in doing so I noticed a few problems that should be addressed separately. Please take a look:

No layout except for the one at the very top should include <html> and <head> tags. This will produce invalid HTML with nested HTML documents
routes/ should not include any files that aren't specifically for routing, or route-specific components. src/routes/static/ should be moved to src/static/ or src/public/static/ (the latter actually gets special treatment)

ArtBlue · 2025-10-31T15:33:49Z

Hey @ArtBlue I'm working on a PR to simplify some of the structure here, but in doing so I noticed a few problems that should be addressed separately. Please take a look:

No layout except for the one at the very top should include <html> and <head> tags. This will produce invalid HTML with nested HTML documents

routes/ should not include any files that aren't specifically for routing, or route-specific components. src/routes/static/ should be moved to src/static/ or src/public/static/ (the latter actually gets special treatment)

Thanks, @LuLaValva !

Yea, when I started on this, Marko didn't seem to be working that way. I was continually checking the markup to ensure things looked good. Maybe there was a change since because after I pulled in the most recent changes from main (a couple of weeks ago), I noticed this issue. I thought I had fixed them all after noticing them. Where do you see that?
I actually followed the same pattern that exists in the current site. Sure, we can move it. However, there are places where we need to use assets directly without importing, and if I'm not mistaken, this change will not allow us to do that, right?

LuLaValva · 2025-10-31T16:53:30Z

I wish regular comments had threads 😢. Here's a reply to a reply:

Since src/routes/layout.marko has HTML boilerplate, every other +layout that has it is invalid. Here's the list I found:
- src/routes/_index/+layout.marko
- src/routes/guide-examples/page-grid-blog-stretchy-nested/+layout.marko
- src/routes/guide-examples/skeleton-examples/+layout.marko
This change will actually allow us to use assets directly without importing, which I wouldn't expect to work with the current setup. If you move assets to src/public they will be automatically exposed as endpoints

…d one, created a failsafe for non-existent a11y patterns.

…ndering to markdown parsing, minor styling updates to tabs.

…to evo-site-sync

Copilot

Pull request overview

This PR implements the initial build of the Evo Web unified website by removing numerous component documentation pages and their associated metadata files from the skin package. The changes consolidate the documentation structure as part of a larger website reorganization effort.

Reviewed changes

Copilot reviewed 106 out of 2518 changed files in this pull request and generated no comments.

File	Description
Multiple `+page.marko` files	Removed component documentation pages for 40+ UI components including floating-label, flag, filter-input, field, checkbox, breadcrumbs, etc.
Multiple `+meta.json` files	Removed corresponding metadata files containing page titles and descriptions for each deleted component page
`+page.component-browser.js`	Removed browser-side component script for filter-chip interactions

…rnal variables

…onfig

feat(website): initial build of evo web

bd031c9

ArtBlue requested review from LuLaValva, agliga, ianmcburnie and saiponnada October 8, 2025 17:55

ArtBlue self-assigned this Oct 8, 2025

ArtBlue linked an issue Oct 8, 2025 that may be closed by this pull request

Build the New Evo Web Site #167

Closed

agliga reviewed Oct 10, 2025

View reviewed changes

chore(site): did some cleanup, changed a11y section component linking

ab9d2a5

chore(site): made a lot of PR feedback change requests

41b19b0

fix(site): moved a11y docs into js, fixed most of the icon issues

dad5797

agliga reviewed Oct 20, 2025

View reviewed changes

ArtBlue added 2 commits October 21, 2025 09:44

chore(site): centralized current tab handling

e24782a

chore(site): simplified component tabs and globalized component metadata

e554555

ArtBlue and others added 9 commits November 17, 2025 10:18

chore(site): revised evo web component pages structure

fdac5cb

chore(site): updated all the component structures to fit the finalize…

0f22794

…d one, created a failsafe for non-existent a11y patterns.

Merge branch 'main' into 167-evo-web-site

daf2c88

chore: update vite config

8911fae

chore(site): more cleanup, error handling of a11y docs, added html re…

32ea426

…ndering to markdown parsing, minor styling updates to tabs.

chore: synced skin site with new site

e1b605b

chore(site): updated component metadata with storybook paths

138f69f

Merge branch '167-evo-web-site' of https://github.com/eBay/evo-web in…

a025441

…to evo-site-sync

chore: updated scripts

04f79b7

Copilot AI reviewed Dec 4, 2025

View reviewed changes

chore: added placeholder images for each component

8189a48

agliga dismissed their stale review via 8189a48 December 4, 2025 23:34

agliga and others added 24 commits December 5, 2025 14:33

chore: layout cleanups

98edbc3

chore: removed unused css

5930945

chore: removed unused css, removed tailwind references, used all inte…

403fb61

…rnal variables

chore: cleaned up global styles, added css modules to certain pages

4016b9b

chore: fixed all icons

788ba7d

docs: 1st content sweep

11ce356

chore: cleaned up bem and styles from landing pages

70637ba

chore: fixed guides and all component links to be components

1a45711

chore: cleanup styles and footer

1252a3e

chore: fixed links and loading styles

220ce50

chore: fixed accessibility tables and skeleton examples

3e86df5

chore: added demo styles

9c3ab26

docs: 2nd content sweep

326fb31

docs: content sweep part 3

af55412

chore: added prev/next buttons. Fixed build. Added storybook links

f8e24f2

chore: misc cleanup

2dfc2c0

docs: content sweep part 4

abb9709

docs: removed ARIA menu roles from navigation links

d7e4ece

chore: fixed section header links, removed SVG page, fixed tooltips c…

27fcc26

…onfig

chore: removed menubar role

a9bf43c

chore: misc cleanup

770aada

docs: fixed duplicate main landmark

a961d6b

docs: fixed faketabs & highlight code scroll issue

e4c9815

chore: updated and fixed dev deps

d602670

agliga approved these changes Dec 11, 2025

View reviewed changes

agliga merged commit 5a06196 into main Dec 11, 2025
3 checks passed

agliga deleted the 167-evo-web-site branch December 11, 2025 18:17

		@@ -0,0 +1,42 @@
		$ const componentInfo = input.componentInfo \|\| {};

feat(website): initial build of evo web #317

feat(website): initial build of evo web #317

Uh oh!

Conversation

ArtBlue commented Oct 8, 2025

Description

Notes

Uh oh!

changeset-bot bot commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

agliga left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

agliga commented Oct 10, 2025

Uh oh!

ArtBlue commented Oct 13, 2025

Uh oh!

ArtBlue commented Oct 14, 2025

Uh oh!

agliga left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ArtBlue Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

agliga Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LuLaValva commented Oct 30, 2025

Uh oh!

ArtBlue commented Oct 31, 2025

Uh oh!

LuLaValva commented Oct 31, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

changeset-bot bot commented Oct 8, 2025 •

edited

Loading

ArtBlue Oct 21, 2025 •

edited

Loading

agliga Oct 20, 2025 •

edited

Loading