chore(docs): restructured Skin docs site and made it more mobile frie…

…ndly (#2520)

.stylelintrc

@@ -24,6 +24,7 @@
         "selector-class-pattern": null,
         "alpha-value-notation": "number",
         "declaration-block-no-redundant-longhand-properties": null,
+        "media-feature-range-notation": null,
         "value-keyword-case": [
             "lower",
             {

package.json

@@ -77,7 +77,7 @@
         "@commitlint/config-conventional": "^19.6.0",
         "@ebay/browserslist-config": "^2.10.0",
         "@floating-ui/dom": "^1.6.12",
-        "@marko/run": "^0.5.11",
+        "@marko/run": "^0.5.13",
         "@marko/run-adapter-static": "^0.2.1",
         "@percy/cli": "^1.30.5",
         "@percy/storybook": "^6.0.3",

src/components/about.marko

@@ -1,5 +1,5 @@
 <div id="about">
-    <h2>About</h2>
+    <h2>What is Skin?</h2>
     <p>Skin is the official CSS framework of eBay. Skin represents the eBay brand and adheres to the following core principals:</p>
     <dl>
         <dt>Accessible</dt>

src/components/anchor.marko

@@ -0,0 +1,5 @@
+static const basePath = import.meta.env.BASE_URL;
+
+<a href=`${basePath}${input.href || ''}` class=input.class role=input.role target=input.target>
+    <${input.renderBody}/>
+</a>

src/components/components-list.marko

@@ -0,0 +1,11 @@
+import path from 'path';
+
+<for|key, comp| in=input.components>
+    $ const componentName = path.basename(comp, '.marko');
+    $ const name = componentName.replace(/-([a-z])/g, function (g) { return ` ${g[1].toUpperCase()}`; });
+    $ const properName = name.charAt(0).toUpperCase() + name.slice(1);
+    <li>
+        <anchor href=`component/${componentName}` class="nav-link" role="menuitem">${properName}</anchor>
+    </li>
+</for>
+

src/components/components.marko

@@ -0,0 +1,12 @@
+import path from 'path';
+import flags from "./data/flags.json"
+import icons from "./data/icons.json"
+
+static const componentFolders = import.meta.glob("../routes/_index/component/*/*.marko");
+
+static const components = Object.keys(componentFolders).map((filePath) => {
+    const parts = filePath.split('/');
+    return parts.slice(0, parts.length - 1).join('/');
+});
+
+export { components, flags, icons };