@easyops-cn/a2ui-react 0.0.0 → 0.0.2

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

@@ -1,47 +0,0 @@
-: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

@@ -1,61 +0,0 @@
-// @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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,423 +0,0 @@
-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;
-  }
-}