feat(ui): add navbar and footer

components/Footer/index.jsx

@@ -0,0 +1,95 @@
+import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
+import LinkedInIcon from '@node-core/ui-components/Icons/Social/LinkedIn';
+import DiscordIcon from '@node-core/ui-components/Icons/Social/Discord';
+import XIcon from '@node-core/ui-components/Icons/Social/X';
+import { footer } from '#theme/site' with { type: 'json' };
+
+import Logo from '#theme/Logo';
+import styles from './index.module.css';
+
+const SOCIAL_ICONS = {
+  GitHub: GitHubIcon,
+  X: XIcon,
+  Discord: DiscordIcon,
+  LinkedIn: LinkedInIcon,
+};
+
+/**
+ * Site-wide footer with brand description, navigation columns,
+ * and social links.
+ */
+export default () => (
+  <footer className={styles.footer}>
+    <div className={styles.inner}>
+      <div className={styles.top}>
+        <div className={styles.brand}>
+          <a href="/" className={styles.logo} aria-label="webpack home">
+            <Logo />
+            <span className={styles.wordmark}>webpack</span>
+          </a>
+          <p className={styles.tagline}>
+            A static module bundler for modern JavaScript applications.
+            Maintained by the open-source community since 2012.
+          </p>
+        </div>
+
+        {footer.groups.map(section => (
+          <nav
+            key={section.title}
+            className={styles.section}
+            aria-label={section.title}
+          >
+            <h2 className={styles.heading}>{section.title}</h2>
+            <ul className={styles.list}>
+              {section.links.map(({ text, link }) => (
+                <li key={text}>
+                  <a href={link} className={styles.link}>
+                    {text}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ))}
+      </div>
+
+      <div className={styles.bottom}>
+        <p className={styles.legal}>
+          &copy; <a href="https://openjsf.org">OpenJS Foundation</a> and webpack
+          contributors. All rights reserved. The{' '}
+          <a href="https://openjsf.org">OpenJS Foundation</a> has registered
+          trademarks and uses trademarks. For a list of trademarks of the{' '}
+          <a href="https://openjsf.org">OpenJS Foundation</a>, please see our{' '}
+          <a href="https://trademark-policy.openjsf.org">Trademark Policy</a>{' '}
+          and <a href="https://trademark-list.openjsf.org">Trademark List</a>.
+          Trademarks and logos not indicated on the{' '}
+          <a href="https://trademark-list.openjsf.org">
+            list of OpenJS Foundation trademarks
+          </a>{' '}
+          are trademarks&trade; or registered&reg; trademarks of their
+          respective holders. Use of them does not imply any affiliation with or
+          endorsement by them.
+        </p>
+        <ul className={styles.social}>
+          {footer.socialLinks.map(({ label, link }) => {
+            const Icon = SOCIAL_ICONS[label];
+
+            return (
+              <li key={label}>
+                <a
+                  href={link}
+                  className={styles.socialLink}
+                  aria-label={label}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                >
+                  <Icon width={20} height={20} />
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  </footer>
+);

components/Footer/index.module.css

@@ -0,0 +1,134 @@
+.footer {
+  border-top: 1px solid var(--color-neutral-900);
+  background-color: var(--color-neutral-950);
+  color: var(--color-neutral-500);
+}
+
+.inner {
+  max-width: 80rem;
+  margin-inline: auto;
+  padding: 3rem 1.5rem 1.5rem;
+}
+
+.top {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2.5rem;
+}
+
+@media (min-width: 40rem) {
+  .top {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 64rem) {
+  .top {
+    grid-template-columns: 1.5fr repeat(4, 1fr);
+    gap: 2rem;
+  }
+}
+
+.brand {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 18rem;
+}
+
+.logo {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+}
+
+.wordmark {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-neutral-50);
+}
+
+.tagline {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--color-neutral-600);
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+
+.heading {
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-green-300);
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.link {
+  font-size: 0.9375rem;
+  color: var(--color-neutral-300);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.link:hover {
+  color: var(--color-green-300);
+}
+
+.bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  margin-top: 2.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--color-neutral-900);
+}
+
+@media (min-width: 40rem) {
+  .bottom {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.legal {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--color-neutral-600);
+}
+
+.social {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.socialLink {
+  display: inline-flex;
+  color: var(--color-neutral-500);
+  transition: color 0.15s ease;
+}
+
+.socialLink:hover {
+  color: var(--color-neutral-50);
+}

components/Layout.jsx

@@ -1,10 +1,13 @@
 import DefaultLayout from '@node-core/doc-kit/src/generators/web/ui/components/Layout/index.jsx';
+import HomeLayout from '../layouts/Home/index.jsx';
 import '../styles/theme.css';
 
+const LAYOUTS = {
+  home: HomeLayout,
+};
+
 export default function Layout(props) {
-  return (
-    <>
-      <DefaultLayout {...props} />
-    </>
-  );
+  const Component = LAYOUTS[props.metadata.layout] ?? DefaultLayout;
+
+  return <Component {...props} />;
 }

components/NavBar.jsx

@@ -0,0 +1,36 @@
+import ThemeToggle from '@node-core/ui-components/Common/ThemeToggle';
+import NavBar from '@node-core/ui-components/Containers/NavBar';
+import styles from '@node-core/ui-components/Containers/NavBar/index.module.css';
+import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
+
+import SearchBox from '@node-core/doc-kit/src/generators/web/ui/components/SearchBox';
+import { useTheme } from '@node-core/doc-kit/src/generators/web/ui/hooks/useTheme.mjs';
+import { navbar } from '#theme/site' with { type: 'json' };
+import Logo from '#theme/Logo';
+
+/**
+ * NavBar component that displays the headings, search, etc.
+ */
+export default ({ metadata }) => {
+  const [themePreference, setThemePreference] = useTheme();
+
+  return (
+    <NavBar
+      Logo={Logo}
+      sidebarItemTogglerAriaLabel="Toggle navigation menu"
+      navItems={navbar}
+    >
+      <SearchBox pathname={metadata.path} />
+      <ThemeToggle
+        onChange={setThemePreference}
+        currentTheme={themePreference}
+      />
+      <a
+        href="https://github.com/webpack/webpack"
+        className={styles.ghIconWrapper}
+      >
+        <GitHubIcon />
+      </a>
+    </NavBar>
+  );
+};

components/SideBar.jsx

@@ -1,5 +1,5 @@
 import SideBar from '@node-core/ui-components/Containers/Sidebar';
-import { sidebar } from '#theme/site' with { type: 'json' };
+import { sidebar } from '#theme/local/site' with { type: 'json' };
 
 /** @param {string} url */
 const redirect = url => (window.location.href = url);

components/WebpackLogo/Icon.jsx

@@ -0,0 +1,20 @@
+export default () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 774 875.7"
+    width={30}
+    height={30}
+  >
+    <path fill="#FFF" d="M387 0l387 218.9v437.9L387 875.7 0 656.8V218.9z" />
+
+    <path
+      fill="#8ed6fb"
+      d="M704.9 641.7L399.8 814.3V679.9l190.1-104.6 115 66.4zm20.9-18.9V261.9l-111.6 64.5v232l111.6 64.4zM67.9 641.7L373 814.3V679.9L182.8 575.3 67.9 641.7zM47 622.8V261.9l111.6 64.5v232L47 622.8zm13.1-384.3L373 61.5v129.9L172.5 301.7l-1.6.9-110.8-64.1zm652.6 0l-312.9-177v129.9l200.5 110.2 1.6.9 110.8-64z"
+    />
+
+    <path
+      fill="#1c78c0"
+      d="M373 649.3L185.4 546.1V341.8L373 450.1v199.2zm26.8 0l187.6-103.1V341.8L399.8 450.1v199.2zm-13.4-207zM198.1 318.2l188.3-103.5 188.3 103.5-188.3 108.7-188.3-108.7z"
+    />
+  </svg>
+);

layouts/Home/index.jsx

@@ -0,0 +1 @@
+export default undefined;