@easyops-cn/a2ui-react 0.0.0

package/website/src/client/color-mode-switch.css

@@ -0,0 +1,47 @@
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+a {
+  cursor: pointer;
+  display: block;
+  padding: 6px;
+  border-radius: 8px;
+}
+
+a:hover {
+  background-color: var(--muted-color);
+}
+
+a:focus {
+  outline: 2px solid var(--text-color);
+  outline-offset: 2px;
+}
+
+svg {
+  display: block;
+}
+
+.lucide {
+  width: 1em;
+  height: 1em;
+  font-size: 1.5rem;
+}
+
+.lucide-moon {
+  display: none;
+}
+
+a[data-theme='dark'] {
+  .lucide-moon {
+    display: block;
+  }
+
+  .lucide-sun {
+    display: none;
+  }
+}

package/website/src/client/index.js

@@ -0,0 +1,61 @@
+// @ts-check
+import ColorModeCss from './color-mode-switch.css'
+import MoonSvg from './moon.svg'
+import SunSvg from './sun.svg'
+
+if (CSS.supports('color-scheme', 'dark')) {
+  customElements.define(
+    'color-mode-switch',
+    class ColorModeSwitchElement extends HTMLElement {
+      /** @type {HTMLElement} */
+      _switch
+
+      constructor() {
+        super()
+
+        const shadowRoot = this.attachShadow({
+          mode: 'open',
+          delegatesFocus: true,
+        })
+
+        shadowRoot.innerHTML = `<style>${ColorModeCss}</style><a role="button" tabindex="0">${MoonSvg}${SunSvg}</a>`
+
+        // @ts-ignore
+        this._switch = shadowRoot.querySelector('a')
+        this._setTheme(localStorage.getItem('theme') || getPreferColorScheme())
+      }
+
+      _clickHandler = () => {
+        const currentTheme = document.documentElement.dataset.theme
+        const nextTheme = currentTheme === 'dark' ? 'light' : 'dark'
+        this._setTheme(nextTheme, true)
+      }
+
+      /**
+       * @param {string} theme
+       * @param {boolean=} force
+       */
+      _setTheme(theme, force) {
+        document.documentElement.dataset.theme = theme
+        this._switch.dataset.theme = theme
+        if (force) {
+          localStorage.setItem('theme', theme)
+        }
+      }
+
+      connectedCallback() {
+        this._switch.addEventListener('click', this._clickHandler)
+      }
+
+      disconnectedCallback() {
+        this._switch.removeEventListener('click', this._clickHandler)
+      }
+    }
+  )
+
+  function getPreferColorScheme() {
+    return window.matchMedia?.('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light'
+  }
+}

package/website/src/client/moon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon-icon lucide-moon"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/></svg>

package/website/src/client/sun.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>

package/website/src/components/Footer.jsx

@@ -0,0 +1,9 @@
+export default function Footer() {
+  return (
+    <footer>
+      © {new Date().getFullYear()} • Built with{' '}
+      <a href="https://github.com/weareoutman/plain-blog">Plain Blog</a> •{' '}
+      <a href="https://github.com/easyops-cn/a2ui-react">GitHub</a>
+    </footer>
+  )
+}

package/website/src/components/Header.jsx

@@ -0,0 +1,44 @@
+import { useSiteContext } from 'plain-blog/SiteContext'
+
+export default function Header() {
+  const { baseUrl, site } = useSiteContext()
+
+  return (
+    <header>
+      <h1>
+        <a href={baseUrl}>{site.title}</a>
+      </h1>
+      <div className="header-right">
+        <nav className="header-nav">
+          <a href={baseUrl} className="active">
+            Docs
+          </a>
+          <a href={`${baseUrl}playground/`}>Playground</a>
+          <a
+            href="https://github.com/easyops-cn/a2ui-react"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            GitHub
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+              <polyline points="15 3 21 3 21 9" />
+              <line x1="10" y1="14" x2="21" y2="3" />
+            </svg>
+          </a>
+        </nav>
+        <color-mode-switch />
+      </div>
+    </header>
+  )
+}

package/website/src/components/Page.jsx

@@ -0,0 +1,28 @@
+import { useSiteContext } from 'plain-blog/SiteContext'
+
+export default function Page({ title, meta, children }) {
+  const { stylesheets, site, locales, scripts } = useSiteContext()
+
+  return (
+    <html lang={title === 'Introducing Plain Blog' ? 'en-US' : locales?.[0]}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>{title}</title>
+        {meta &&
+          Object.entries(meta).map(
+            ([name, content]) =>
+              content && <meta key="name" name={name} content={content} />
+          )}
+        {site.favicon && <link rel="icon" href={site.favicon} />}
+        {stylesheets?.map((url) => (
+          <link key={url} rel="stylesheet" href={url} />
+        ))}
+        {scripts?.map((url) => (
+          <script key={url} src={url} async />
+        ))}
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}

package/website/src/global.css

@@ -0,0 +1,423 @@
+html {
+  --primary-color: #009488;
+  --text-color: hsl(10, 20%, 20%);
+  --muted-color: hsl(10, 20%, 94%);
+  --background-color: hsl(10, 10%, 98%);
+
+  color-scheme: light;
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme='light']) {
+    --primary-color: #80cbc4;
+    --text-color: hsl(210, 50%, 96%);
+    --muted-color: rgb(64, 71, 86);
+    --background-color: hsl(230, 25%, 18%);
+
+    color-scheme: dark;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+html[data-theme='dark'] {
+  --primary-color: #80cbc4;
+  --text-color: hsl(210, 50%, 96%);
+  --muted-color: rgb(64, 71, 86);
+  --background-color: hsl(230, 25%, 18%);
+
+  color-scheme: dark;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family:
+    system-ui,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    Ubuntu,
+    Cantarell,
+    Noto Sans,
+    sans-serif,
+    'Segoe UI',
+    'Roboto',
+    'Ubuntu',
+    'Cantarell',
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
+  line-height: 1.75;
+  font-weight: 400;
+  font-size: 16px;
+  margin: 0;
+}
+
+h1 {
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+h2 {
+  font-size: 24px;
+}
+
+h3 {
+  font-size: 20px;
+}
+
+a {
+  color: var(--primary-color);
+  text-decoration: none;
+  box-shadow: 0 1px 0 0 currentColor;
+}
+
+h1 > a,
+h2 > a,
+h3 > a {
+  color: inherit;
+
+  &:not(:hover) {
+    box-shadow: none;
+  }
+}
+
+body > header,
+body > footer,
+body > main {
+  width: 100%;
+  max-width: 1240px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body > header,
+body > footer,
+body > main > section,
+body > main > article,
+body > main > nav {
+  padding: 16px;
+}
+
+body > header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-top: 24px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.header-nav {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.header-nav a {
+  color: var(--text-color);
+  font-size: 16px;
+  font-weight: 500;
+  box-shadow: none;
+  padding: 6px 8px;
+  transition: color 0.2s ease;
+}
+
+.header-nav a:hover {
+  color: var(--primary-color);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+.header-nav a.active {
+  color: var(--primary-color);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+.header-nav a[target='_blank'] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+}
+
+body > header > a {
+  box-shadow: none;
+  text-decoration: none;
+  color: var(--primary-color);
+  font-size: 24px;
+  font-weight: 700;
+}
+
+body > header {
+  padding-top: 32px;
+}
+
+body > header h1 {
+  margin: 0;
+  font-size: 20px;
+  color: var(--primary-color);
+}
+
+body > header h1 > a {
+  box-shadow: none;
+  text-decoration: none;
+}
+
+body > header h1 > a:not(:hover) {
+  color: inherit;
+}
+
+body > footer {
+  padding-bottom: 32px;
+}
+
+body > footer > hr {
+  border-width: 0 0 1px;
+  border-style: solid;
+  border-color: var(--muted-color);
+}
+
+body > main:has(> article) {
+  display: flex;
+}
+
+body > main > article {
+  max-width: 80%;
+  min-width: 0;
+  flex: 1 0;
+}
+
+body > main > nav {
+  max-width: 20%;
+  min-width: 0;
+  flex: 0 0 20%;
+  font-size: 13px;
+  position: sticky;
+  top: 0;
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding-left: 8px;
+  }
+
+  li {
+    margin: 8px;
+  }
+
+  & > ul {
+    border-left: 1px solid var(--muted-color);
+  }
+}
+
+article > p,
+article > blockquote > p {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+article > p > a > img,
+article > p > img {
+  display: block;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+:not(pre) > code {
+  font-family:
+    Menlo, Monaco, Consolas, 'Andale Mono', 'Ubuntu Mono', 'Courier New',
+    monospace;
+  background-color: var(--muted-color);
+  padding: 0.125em 0.25em 0.125em;
+  border-radius: 0.25em;
+}
+
+a > code {
+  padding-bottom: 0.05em;
+}
+
+article blockquote {
+  padding-left: 32px;
+  padding-right: 32px;
+  margin-left: 0px;
+  margin-right: 0px;
+  border-left: 5px solid rgb(204, 204, 204);
+  opacity: 0.8;
+}
+
+article table {
+  width: 100%;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  border-collapse: separate;
+  border-spacing: 0px;
+}
+
+article th,
+article td {
+  text-align: left;
+  padding: 4px 4px 4px 0px;
+  border-color: var(--muted-color);
+  border-bottom-style: solid;
+}
+
+article p.post-date {
+  font-size: 14px;
+  margin-top: -16px;
+  margin-bottom: 16px;
+}
+
+.shiki {
+  margin-left: -16px;
+  margin-right: -16px;
+  padding: 16px;
+  font-size: 14px;
+  line-height: 1.75;
+  overflow-x: auto;
+  outline: 1px solid var(--muted-color);
+}
+
+p.figure-caption {
+  text-align: center;
+  opacity: 0.6;
+  font-size: 87.5%;
+  margin-top: -14px;
+  font-style: italic;
+
+  width: fit-content;
+  max-width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+  border-bottom: 1px solid #ccc;
+  padding-left: 28px;
+  padding-right: 28px;
+  padding-bottom: 7px;
+}
+
+hr.divider {
+  border: none;
+  font-size: 150%;
+  letter-spacing: 0.6em;
+  margin-bottom: 42px;
+  text-align: center;
+}
+
+hr.divider::before {
+  content: '...';
+}
+
+footer > hr {
+  margin-bottom: 16px;
+}
+
+a[role='button'] {
+  cursor: pointer;
+}
+
+.search-mark {
+  box-shadow: 0 1px 0 0 currentColor;
+}
+
+/* color-mode-switch:not(:defined) {
+  display: none;
+} */
+
+@media screen and (max-width: 996px) {
+  body > main > nav {
+    display: none;
+  }
+
+  body > main > article {
+    max-width: 992px;
+  }
+}
+
+@media screen and (max-width: 703px) {
+  body > header h1 {
+    flex: 0 0 100%;
+  }
+
+  .header-right {
+    flex: 0 0 calc(100% + 6px);
+    margin-left: -6px;
+  }
+}
+
+@media screen and (max-width: 1271px) and (min-width: 704px) {
+  .shiki {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+@media screen and (min-width: 704px) {
+  h1 {
+    font-size: 40px;
+  }
+  h2 {
+    font-size: 32px;
+  }
+  h3 {
+    font-size: 24px;
+  }
+  h4 {
+    font-size: 20px;
+  }
+
+  body > header h1 {
+    font-size: 24px;
+    line-height: 36px;
+  }
+
+  .shiki {
+    border-radius: 10px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme='light']) {
+    .shiki,
+    .shiki span {
+      color: var(--shiki-dark) !important;
+      background-color: var(--shiki-dark-bg) !important;
+      /* Optional, if you also want font styles */
+      font-style: var(--shiki-dark-font-style) !important;
+      font-weight: var(--shiki-dark-font-weight) !important;
+      text-decoration: var(--shiki-dark-text-decoration) !important;
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .shiki,
+  .shiki span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    /* Optional, if you also want font styles */
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+}