add first docussaurus site to git

www/src/components/HomepageFeatures/index.tsx

@@ -0,0 +1,71 @@
+import type {ReactNode} from 'react';
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+type FeatureItem = {
+  title: string;
+  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  description: ReactNode;
+};
+
+const FeatureList: FeatureItem[] = [
+  {
+    title: 'Easy to Use',
+    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    description: (
+      <>
+        Docusaurus was designed from the ground up to be easily installed and
+        used to get your website up and running quickly.
+      </>
+    ),
+  },
+  {
+    title: 'Focus on What Matters',
+    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    description: (
+      <>
+        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
+        ahead and move your docs into the <code>docs</code> directory.
+      </>
+    ),
+  },
+  {
+    title: 'Powered by React',
+    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    description: (
+      <>
+        Extend or customize your website layout by reusing React. Docusaurus can
+        be extended while reusing the same header and footer.
+      </>
+    ),
+  },
+];
+
+function Feature({title, Svg, description}: FeatureItem) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className="text--center">
+        <Svg className={styles.featureSvg} role="img" />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <Heading as="h3">{title}</Heading>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures(): ReactNode {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

www/src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}

www/src/css/custom.css

@@ -0,0 +1,215 @@
+/**
+ * Butter brand styles — ported from the Jekyll _scss folder.
+ * Infima variables are overridden to match the original palette and typography.
+ */
+
+/* ---- Fonts ---- */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/poppins-v15-latin-regular.woff2') format('woff2'),
+       url('/fonts/poppins-v15-latin-regular.woff') format('woff');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/poppins-v15-latin-600.woff2') format('woff2'),
+       url('/fonts/poppins-v15-latin-600.woff') format('woff');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/poppins-v15-latin-700.woff2') format('woff2'),
+       url('/fonts/poppins-v15-latin-700.woff') format('woff');
+}
+@font-face {
+  font-family: 'Prata';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/prata-v13-latin-regular.woff2') format('woff2'),
+       url('/fonts/prata-v13-latin-regular.woff') format('woff');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/inter-v3-latin-regular.woff2') format('woff2'),
+       url('/fonts/inter-v3-latin-regular.woff') format('woff');
+}
+
+/* ---- Brand variables ---- */
+:root {
+  --butter-white: #ffffff;
+  --butter-cream: #FFFBEB;
+  --butter-black: #000000;
+  --butter-dark-gray: #242424;
+  --butter-gray: #595959;
+  --butter-gold: #FFDF3F;
+  --butter-shade-gold: #EECF06;
+  --butter-royal-blue: #6166E9;
+
+  --butter-base-font: 'Poppins', sans-serif;
+  --butter-text-font: 'Prata', serif;
+  --butter-footer-font: 'Inter', sans-serif;
+
+  /* Infima overrides */
+  --ifm-color-primary: #6166E9;
+  --ifm-color-primary-dark: #464cdf;
+  --ifm-color-primary-darker: #3a40dc;
+  --ifm-color-primary-darkest: #2127b8;
+  --ifm-color-primary-light: #7c80ed;
+  --ifm-color-primary-lighter: #888cef;
+  --ifm-color-primary-lightest: #aeb0f4;
+  --ifm-font-family-base: var(--butter-base-font);
+  --ifm-heading-font-family: var(--butter-base-font);
+  --ifm-navbar-background-color: var(--butter-gold);
+  --ifm-footer-background-color: var(--butter-shade-gold);
+  --ifm-footer-color: var(--butter-dark-gray);
+  --ifm-footer-link-color: var(--butter-dark-gray);
+  --ifm-footer-title-color: var(--butter-dark-gray);
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme='dark'] {
+  --ifm-color-primary: #FFDF3F;
+  --ifm-color-primary-dark: #f5d10b;
+  --ifm-color-primary-darker: #e8c60b;
+  --ifm-color-primary-darkest: #bfa309;
+  --ifm-color-primary-light: #ffe668;
+  --ifm-color-primary-lighter: #ffe97a;
+  --ifm-color-primary-lightest: #fff0a6;
+  --ifm-background-color: #242424;
+  --ifm-navbar-background-color: #4a3f07;
+  --ifm-footer-background-color: #1b1b1b;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+
+/* ---- General typography ---- */
+body {
+  font-family: var(--butter-base-font);
+  font-weight: 400;
+}
+
+/* ---- Butter hero band (gold) ---- */
+.butter-hero {
+  background-color: var(--butter-gold);
+  padding: 3.5rem 0 3rem;
+  text-align: center;
+}
+.butter-hero .hero-logo {
+  display: block;
+  margin: 0 auto 1.25rem;
+  max-width: 240px;
+  width: 60%;
+  height: auto;
+}
+.butter-hero .hero-title {
+  font-size: 42px;
+  font-weight: 800;
+  color: var(--butter-black);
+  margin: 0 0 .75rem;
+}
+.butter-hero .hero-subtitle {
+  font-family: var(--butter-text-font);
+  font-size: 22px;
+  color: var(--butter-black);
+  letter-spacing: .4px;
+  line-height: 1.5;
+  max-width: 760px;
+  margin: 0 auto;
+}
+@media (max-width: 768px) {
+  .butter-hero { padding: 2.25rem 0 2rem; }
+  .butter-hero .hero-title { font-size: 32px; }
+  .butter-hero .hero-subtitle { font-size: 18px; }
+}
+
+/* ---- Content area (lighter cream background) ---- */
+.butter-content {
+  background-color: var(--butter-cream);
+  padding: 3.5rem 0 4rem;
+}
+[data-theme='dark'] .butter-content {
+  background-color: var(--ifm-background-color);
+}
+.butter-content .section {
+  max-width: 760px;
+  margin: 0 auto 2.5rem;
+  text-align: center;
+}
+.butter-content .section:last-child {
+  margin-bottom: 0;
+}
+.butter-content h2 {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 0 .75rem;
+}
+.butter-content .content-text {
+  font-family: var(--butter-text-font);
+  font-size: 20px;
+  line-height: 1.6;
+  color: var(--butter-black);
+  letter-spacing: .4px;
+  margin: 0 0 1.25rem;
+}
+[data-theme='dark'] .butter-content .content-text,
+[data-theme='dark'] .butter-content h2 {
+  color: var(--ifm-font-color-base);
+}
+@media (max-width: 768px) {
+  .butter-content .content-text { font-size: 17px; }
+  .butter-content h2 { font-size: 24px; }
+}
+
+/* ---- Device image ---- */
+.butter-content .device-image {
+  margin: 1rem auto 2.5rem;
+  text-align: center;
+}
+.butter-content .device-image img {
+  display: block;
+  margin: 0 auto;
+  max-width: 70%;
+  border-radius: 8px;
+}
+.butter-content .device-image .caption {
+  font-family: var(--butter-text-font);
+  font-size: 15px;
+  color: var(--butter-gray);
+  margin: .75rem auto 0;
+  max-width: 70%;
+}
+
+/* ---- Pill button matching the original .btn-main ---- */
+.btn-main {
+  display: inline-block;
+  font-weight: 600;
+  color: var(--butter-white);
+  text-align: center;
+  user-select: none;
+  background-color: var(--butter-royal-blue);
+  border: 1px solid var(--butter-royal-blue);
+  padding: 1.25em 2.75em;
+  font-size: 12px;
+  letter-spacing: 1px;
+  line-height: 1.5;
+  border-radius: 50rem;
+  transition: all .2s ease;
+  text-decoration: none;
+  margin-bottom: 10px;
+}
+.btn-main:hover,
+.btn-main:focus {
+  background-color: #7378ec;
+  color: var(--butter-white);
+  text-decoration: none;
+}

www/src/pages/contact.mdx

@@ -0,0 +1,5 @@
+
+# Get In Touch
+
+How you can reach out!
+

www/src/pages/index.module.css

@@ -0,0 +1,23 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

www/src/pages/index.tsx

@@ -0,0 +1,124 @@
+import type {ReactNode} from 'react';
+import Layout from '@theme/Layout';
+import Heading from '@theme/Heading';
+
+const CONTACT_EMAIL = 'support@guardianproject.info';
+const MAILING_LIST = 'https://lists.mayfirst.org/mailman/listinfo/butter/';
+const BOOT_IMAGES = 'https://docs.likebutter.app/update-butter';
+const REPO = 'https://gitlab.com/likebutter/butterbox-rpi';
+const DOCS = 'https://docs.likebutter.app';
+
+function Hero() {
+  return (
+    <header className="butter-hero">
+      <div className="container">
+        <img
+          className="hero-logo"
+          src="/img/butter-logo-feature-large.svg"
+          alt="Butter App Feature Logo"
+        />
+        <Heading as="h1" className="hero-title">
+          Introducing Butter Box
+        </Heading>
+        <p className="hero-subtitle">
+          No Internet? No electricity? No problem. You can make the{' '}
+          <a href="/docs/intro">Butter app store</a> available anywhere with
+          Butter Box.
+        </p>
+      </div>
+    </header>
+  );
+}
+
+export default function Home(): ReactNode {
+  return (
+    <Layout
+      title="Introducing Butter Box"
+      description="Life without internet made smoother. Get access to tools that help.">
+      <Hero />
+      <main className="butter-content">
+        <div className="container">
+          <div className="device-image">
+            <img
+              src="/img/plugged-in-to-solar.jpg"
+              alt="A Butter Box: A Raspberry Pi Zero W 2 plugged into a battery and solar panel."
+            />
+            <p className="caption">
+              An app store, encrypted chat, and more, all available over WiFi
+              from an off-the-grid Raspberry Pi.
+            </p>
+          </div>
+
+          <section className="section">
+            <Heading as="h2">How does it work?</Heading>
+            <p className="content-text">
+              Butter Box broadcasts its own WiFi network. Once you join, you
+              can install Butter, get apps, join a public chatroom, or make
+              your own private one to share with friends. Butter Box works
+              even when there&apos;s no Internet. Just stop by the box to
+              download more apps or check in on your chatrooms. Everything is
+              stored right on the Butter Box.
+            </p>
+            <a className="btn-main" target="_blank" rel="noreferrer" href={DOCS}>
+              Learn More
+            </a>
+          </section>
+
+          <section className="section">
+            <Heading as="h2">Get your own Butter Box</Heading>
+            <p className="content-text">
+              We make &amp; ship Butter Boxes to partners around the world.
+              Reach out to us if you serve a community that could benefit.
+            </p>
+            <a className="btn-main" href={`mailto:${CONTACT_EMAIL}`}>
+              Email us
+            </a>
+          </section>
+
+          <section className="section">
+            <Heading as="h2">Join our community mailing list</Heading>
+            <p className="content-text">
+              Get support and share expertise with other &ldquo;Smooth
+              Operators&rdquo; (Butter Box stewards) around the world.
+            </p>
+            <a
+              className="btn-main"
+              target="_blank"
+              rel="noreferrer"
+              href={MAILING_LIST}>
+              Join the list here
+            </a>
+          </section>
+
+          <section className="section">
+            <Heading as="h2">Make your own Butter Box</Heading>
+            <p className="content-text">
+              You can make your own Butter Box by installing a pre-made image
+              on a Raspberry Pi. Just download the image and burn it onto a
+              MicroSD card using the same RPi Imager you&apos;d use to install
+              other distros.
+            </p>
+            <a
+              className="btn-main"
+              target="_blank"
+              rel="noreferrer"
+              href={BOOT_IMAGES}>
+              Download boot images
+            </a>
+            <p className="content-text" style={{marginTop: '1.5rem'}}>
+              Or, customize your Butter Box following the instructions in our
+              open source repository.
+            </p>
+            <a
+              className="btn-main"
+              target="_blank"
+              rel="noreferrer"
+              href={`${REPO}/-/blob/main/docs/en/README.md`}>
+              Source &amp; Documentation
+            </a>
+          </section>
+        </div>
+      </main>
+    </Layout>
+  );
+}

www/src/pages/markdown-page.mdx

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.