feat(website): initial build of evo web

package.json

@@ -20,6 +20,7 @@
     "postinstall": "npx playwright install --with-deps chromium",
     "prepare": "husky",
     "release": "npm run release --ws && changeset publish",
+    "start": "marko-run",
     "test": "npm run test --ws",
     "update-snapshots": "npm run update-snapshots --ws --if-present",
     "version": "npm run version --ws && changeset version && npm i --package-lock-only && git add -A packages"
@@ -193,5 +194,8 @@
     "winston": "^3.17.0",
     "xmlserializer": "^0.6.1",
     "yargs": "^18.0.0"
+  },
+  "dependencies": {
+    "markdown-it": "^14.1.0"
   }
 }

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

@@ -0,0 +1,32 @@
+class {}
+
+<ebay-card 
+    layout="horizontal"
+    variant="outlined"
+    ...input
+>
+    <@media>
+        <img 
+            src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-real-square-pic.jpg" 
+            alt="Example card image" 
+            class="card__hero-image"
+        />
+    </@media>
+
+    <@overline>
+        <ebay-authenticity-guarantee-16-icon />
+        <span>Authenticity Guaranteed</span>
+    </@overline>
+
+    <@title>Authentic Rookie Cards</@title>
+
+    <@description>
+        Museum-quality rookie cards from three sports that prove some people's side hustles become billion-dollar careers while others struggle to keep houseplants alive.
+    </@description>
+
+    <@footer>
+        <ebay-button variant="primary">
+            See Details
+        </ebay-button>
+    </@footer>
+</ebay-card>

src/components/a11y-docs-list.marko

@@ -0,0 +1,31 @@
+import path from "path";
+
+<for|folder, files| in=input.a11yDocs>
+    $ const folderName = folder.split('/').pop() || 'Root';
+    $ const displayName = folderName.replace(/-([a-z])/g, function (g) {
+        return ` ${g[1].toUpperCase()}`;
+    });
+    $ const properFolderName = displayName.charAt(0).toUpperCase() + displayName.slice(1);
+
+    <li>
+        <h3>${properFolderName}</h3>
+        <ul>
+            <for|filePath| of=files>
+                $ const docName = path.basename(filePath, ".md");
+                $ const name = docName.replace(/-([a-z])/g, function (g) {
+                    return ` ${g[1].toUpperCase()}`;
+                });
+                $ const properName = name.charAt(0).toUpperCase() + name.slice(1);
+
+                // Extract the folder name after "patterns/"
+                $ const folderName = folder.split('/').pop() || '';
+
+                <li>
+                    <a href=`/accessibility/${folderName}/${docName}` class="nav-link" role="menuitem">
+                        ${properName}
+                    </a>
+                </li>
+            </for>
+        </ul>
+    </li>
+</for>

src/components/a11y-docs.marko

@@ -0,0 +1,22 @@
+static const a11yDocsSources = import.meta.glob(
+    "../../src/docs/a11y/**/*.md"
+);
+static const a11yDocsFlat = Object.keys(a11yDocsSources);
+
+// Organize docs by folder structure
+static const a11yDocs = a11yDocsFlat.reduce((acc, filePath) => {
+    // Extract the relative path after "src/docs/a11y/"
+    const relativePath = filePath.replace(/.*\/packages\/a11y\//, '');
+    const pathParts = relativePath.split('/');
+    const fileName = pathParts.pop(); // Remove filename
+    const folderPath = pathParts.join('/'); // Get folder path
+
+    if (!acc[folderPath]) {
+        acc[folderPath] = [];
+    }
+    acc[folderPath].push(filePath);
+
+    return acc;
+}, {});
+
+export { a11yDocs, a11yDocsSources };

src/components/a11y-mind-pattern.marko

@@ -0,0 +1,18 @@
+import markdownit from 'markdown-it';
+import fs from 'fs';
+import path from 'path';
+
+static const md = markdownit();
+
+$ {
+    // Get the a11y MIND pattern, read its contents, and convert to HTML
+    const pattern = input.pattern;
+    const a11yPatternsDir = 'src/docs/a11y/patterns/component-patterns/';
+    const a11yPatternsPath = path.join(process.cwd(), `${a11yPatternsDir}/${pattern}.md`);
+    const a11yMindPatternMD = fs.readFileSync(a11yPatternsPath, 'utf-8');
+    const a11yMindPatternHTML = md.render(a11yMindPatternMD);
+}
+
+<div class="a11y-mind-pattern">
+    $!{a11yMindPatternHTML}
+</div>

src/components/a11y-navrail.marko

@@ -0,0 +1,12 @@
+import { a11yDocs } from "./a11y-docs.marko";
+
+<div class="site-nav secondary-nav">
+    <nav id="a11y-nav" aria-labelledby="navrail-a11y-nav_title">
+        <h2 id="navrail-a11y-nav_title">
+            <a href="/accessibility/">Accessibility Docs</a>
+        </h2>
+        <ul role="menubar">
+            <a11y-docs-list a11yDocs=a11yDocs/>
+        </ul>
+    </nav>
+</div>

src/components/about.marko

@@ -0,0 +1,57 @@
+<div id="about">
+    <h2>About</h2>
+    <p>
+        Skin is a pure CSS framework, created by a team of passionate frontend engineers at eBay.
+    </p>
+    <p>
+        Skin's default stylesheet represents
+        <a href="https://playbook.ebay.com">
+            eBay Evo
+        </a>
+         - eBay's evolved brand and design system - but Skin also offers
+        <a href="#token-system">
+            token-based configuration
+        </a>
+         to enable non-eBay branded experiences.
+    </p>
+    <p>Skin adheres to the following core principals:</p>
+    <dl>
+        <dt>Accessible</dt>
+        <dd>
+            Skin leverages semantic HTML, SVG & ARIA to apply our styles wherever possible; thus enforcing correct,${" "}
+            <a href="https://github.com/ianmcburnie/bones">
+                accessible markup
+            </a>
+            .
+        </dd>
+        <dt>Declarative</dt>
+        <dd>
+            Skin follows the
+            <a href="https://getbem.com">
+                BEM
+            </a>
+            ${" "}methodology ("Block, Element and Modifier") for structured, human readable code which embraces the power & efficiency of the cascade.
+        </dd>
+        <dt>Decoupled</dt>
+        <dd>
+            Skin is decoupled from the JavaScript layer, meaning the HTML and CSS is agnostic of the frontend framework (BYOJ = Bring Your Own Javascript!)
+            <sup>*</sup>
+        </dd>
+        <dt>Scalable</dt>
+        <dd>
+            Skin is built on a system of
+            <a href="https://tr.designtokens.org/format/">
+                design tokens
+            </a>
+            ${" "}(implemented as CSS Variables); enabling a scalable and consistent visual system for UI development.
+        </dd>
+    </dl>
+    <p>
+        <sup>*</sup>
+        This website uses
+        <a href="https://github.com/makeup/makeup-js">
+            makeup-js
+        </a>
+         to add some basic interactivity to examples where needed.
+    </p>
+</div>

src/components/analytics-tracking.marko

@@ -0,0 +1,9 @@
+<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-9HQJ5CWCJZ"></script>
+<script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-9HQJ5CWCJZ');
+</script>