RedHat-UX · zeroedin · Jun 10, 2024 · Feb 6, 2024 · Feb 6, 2024 · Feb 6, 2024
diff --git a/.pfe.config.json b/.pfe.config.json
@@ -16,8 +16,7 @@
     "description": "Red Hat Design System",
     "componentSubpath": "elements",
     "stylesheets": [
-      "/docs/assets/base.css",
-      "/docs/assets/demos.css"
+      "/docs/styles/pages/dev-server.css"
     ]
   }
 }
diff --git a/CONTRIBUTING_DESIGN.md b/CONTRIBUTING_DESIGN.md
@@ -57,7 +57,7 @@ Most pages should have front matter that looks like this:
 
 ```jinja
 ---
-layout: layout-basic.njk
+layout: layouts/pages/basic.njk
 title: Grid
 order: -10
 tags:
@@ -73,7 +73,7 @@ tags:
 ### Getting pages into the navigation
 
 The navigation is an included template:
-`pages/component/header.njk`
+`pages/partials/component/sidenav.njk`
 
 It is a mixture of hardcoding and dynamic listing so that it's _hopefully_ easy to understand.
 
@@ -129,14 +129,14 @@ Here's a two simple examples:
 
 ```jinja
 ---
-layout: layout-basic.njk
+layout: blayouts/pages/basic.njk
 title: Example page
 ---
 ```
 
 ```jinja
 ---
-layout: layout-home.njk
+layout: layouts/pages/home.njk
 title: Home
 ---
 ```
@@ -146,7 +146,7 @@ This tells 11ty what the page template should be (relative to the `pages` folder
 Here's an example including tags, which is a multi-value piece of data.
 ```jinja
 ---
-layout: layout-basic.njk
+layout: layouts/pages/basic.njk
 title: Accordion Element
 tags:
   - javascript
@@ -164,7 +164,7 @@ the components to be used on the page:
 
 ```jinja
 ---
-layout: layout-basic.njk
+layout: layouts/pages/basic.njk
 title: Card
 tags:
   - component

diff --git a/docs/404.njk b/docs/404.njk
@@ -1,35 +1,28 @@
 ---
-layout: layout-basic.njk
+layout: layouts/pages/basic.njk
 title: Oops!
 permalink: 404.html
 ---
-<!doctype html>
 
-{% import 'component/components.njk' as components %}
-
-    <div class="centered feature-box">
-        <h1 class="section-headline">404 error</h1>
-        <h2 class="pfe-headline-alpha">This is embarrassing, we can’t find that page</h2>
-        <h3 class="pfe-headline-gamma" style="margin-top:48px;">Try one of these popular links instead</h3>
-        <ul class="inline-list">
-            <li><a href="/about">About this website</a></li>
-            <li><a href="/foundations">Foundations</a></li>
-            <li><a href="/elements">Elements</a></li>
-            <li><a href="/patterns">Patterns</a></li>
-            <li><a href="/get-started">Get started</a></li>
-        </ul>
-    </div>
+<div class="centered feature-box">
+  <h1 class="section-headline">404 error</h1>
+  <h2 class="pfe-headline-alpha">This is embarrassing, we can’t find that page</h2>
+  <h3 class="pfe-headline-gamma" style="margin-top:48px;">Try one of these popular links instead</h3>
+  <ul class="inline-list">
+    <li><a href="/about">About this website</a></li>
+    <li><a href="/foundations">Foundations</a></li>
+    <li><a href="/elements">Elements</a></li>
+    <li><a href="/patterns">Patterns</a></li>
+    <li><a href="/get-started">Get started</a></li>
+  </ul>
+</div>
 
-<div class="multi-column--min-300-wide section section--palette-default container feedback">
+<section>
+  <h2>Contact us</h2>
+  <p>If you feel that you reached this page in error, <a href="../get-started">contact us</a> and we'll point you in the right direction.</p>
 
-  <div>
-  {% call components.section("Feedback or requests") -%}
-    <p>Do you have any feedback? Or do you need to request something? Create an issue in our <a href="https://github.com/patternfly/patternfly-elements">GitHub repo</a> if so.</p>
-  {%- endcall %}
-  </div>
-  <div>
-  {% call components.section("Contact us") -%}
-    <p>If you feel that you reached this page in error, <a href="../get-started">contact us</a> and we'll point you in the right direction.</p>
-  {%- endcall %}
-  </div>
-</div>
+  <uxdot-feedback>
+    <h3 slot="header">Feedback or requests</h3>
+    <p slot="content">Do you have any feedback? Or do you need to request something? Create an issue in our <a href="https://github.com/patternfly/patternfly-elements">GitHub repo</a> if so.</p>
+  </uxdot-feedback>  
+</section>
diff --git a/docs/_data/comingSoonItems.yaml b/docs/_data/comingSoonItems.yaml
@@ -1,2 +1,3 @@
 - rh-breadcrumb
-- rh-footnote
+- rh-footnote
+- rh-jump-links
diff --git a/docs/_data/playgrounds.cjs b/docs/_data/playgrounds.cjs
@@ -108,8 +108,12 @@ module.exports = async function(data) {
 
   const playgroundConfigsMap = new Map();
 
-  const baseCssPath = url.pathToFileURL(path.join(process.cwd(), 'docs/assets/base.css'));
-  const baseCssSource = await fs.readFile(baseCssPath.pathname, 'utf8');
+  const resetCSS = url.pathToFileURL(path.join(process.cwd(), 'docs/styles/reset.css'));
+  const resetCSSSource = await fs.readFile(resetCSS.pathname, 'utf8');
+  const fontsCSS = url.pathToFileURL(path.join(process.cwd(), 'docs/styles/fonts.css'));
+  const fontsCSSSource = await fs.readFile(fontsCSS.pathname, 'utf8');
+  const typographyCSS = url.pathToFileURL(path.join(process.cwd(), 'docs/styles/typography.css'));
+  const typographyCSSSource = await fs.readFile(typographyCSS.pathname, 'utf8');
 
   for (const [primaryElementName, demos] of Object.entries(demoManifests)) {
     const fileMap = new Map();
@@ -120,25 +124,24 @@ module.exports = async function(data) {
       }
 
       const demoSource = await fs.readFile(demo.filePath, 'utf8');
-
       const fragment = parseFragment(demoSource);
 
-      const baseCssPathPrefix = demo.filePath.match(DEMO_FILEPATH_IS_MAIN_DEMO_RE) ? '' : '../';
+      const cssPrefix = demo.filePath.match(DEMO_FILEPATH_IS_MAIN_DEMO_RE) ? '' : '../';
 
       append(
         fragment,
         Tools.createCommentNode('playground-fold'),
         Tools.createElement('link', {
           rel: 'stylesheet',
-          href: 'https://static.redhat.com/libs/redhat/redhat-font/4/webfonts/red-hat-font.min.css'
+          href: `${cssPrefix}reset.css`,
         }),
         Tools.createElement('link', {
           rel: 'stylesheet',
-          href: 'https://static.redhat.com/libs/redhat/redhat-theme/6/advanced-theme.css'
+          href: `${cssPrefix}fonts.css`,
         }),
         Tools.createElement('link', {
           rel: 'stylesheet',
-          href: `${baseCssPathPrefix}rhds-demo-base.css`,
+          href: `${cssPrefix}typography.css`,
         }),
         Tools.createTextNode('\n\n'),
         Tools.createCommentNode('playground-fold-end'),
@@ -176,9 +179,21 @@ module.exports = async function(data) {
         }
       };
 
-      fileMap.set('demo/rhds-demo-base.css', {
+      fileMap.set('demo/reset.css', {
+        contentType: 'text/css',
+        content: resetCSSSource,
+        hidden: true,
+      });
+
+      fileMap.set('demo/fonts.css', {
+        contentType: 'text/css',
+        content: fontsCSSSource,
+        hidden: true,
+      });
+
+      fileMap.set('demo/typography.css', {
         contentType: 'text/css',
-        content: baseCssSource,
+        content: typographyCSSSource,
         hidden: true,
       });
 
@@ -197,9 +212,9 @@ module.exports = async function(data) {
           const attrs = getAttrMap(el);
           await addSubresourceURL(attrs.href);
         } catch (e) {
-          // we can swallow the error for the demo base file because we wrote it ourselves above.
+          // we can swallow the error for the demo typography and font file because we wrote it ourselves above.
           // maybe not the most elegant solution, but it works
-          if (e.subresourceFileURL?.href?.endsWith('rhds-demo-base.css')) {
+          if (e.subresourceFileURL?.href?.endsWith('typography.css') || e.subresourceFileURL?.href?.endsWith('fonts.css')) {
             continue;
           } else {
             // In order to surface the error to the user, let's enable console logging

diff --git a/docs/_includes/component/about.njk b/docs/_includes/component/about.njk
diff --git a/docs/_includes/component/components.njk b/docs/_includes/component/components.njk
diff --git a/docs/_includes/component/documentation.njk b/docs/_includes/component/documentation.njk
diff --git a/docs/_includes/component/foundations.njk b/docs/_includes/component/foundations.njk
diff --git a/docs/_includes/component/get-started.njk b/docs/_includes/component/get-started.njk