andesine 0.1.0 → 0.4.0

package/dist/templates/pages/src/components/primitives/button.tsx

@@ -0,0 +1,121 @@
+import clsx from "clsx";
+import { type JSX, type ParentComponent, mergeProps, Show, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+
+interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  color?: ButtonColor;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  text?: ButtonText;
+  /** Renders an `<a>` element. */
+  link?: string;
+  target?: string;
+  /** Renders a non-interactive `<div>` element. */
+  badge?: boolean;
+}
+
+interface IconButtonProps extends ButtonProps {
+  icon: string;
+  label?: string;
+  iconClass?: string;
+}
+
+type ButtonColor = "base" | "contrast" | "primary";
+type ButtonVariant = "solid" | "text" | "outlined";
+type ButtonSize = "xs" | "small" | "medium";
+type ButtonText = "base" | "soft" | "softer";
+
+const sizeClasses: Record<ButtonSize, string> = {
+  xs: ":base: px-1 py-0.5 text-xs",
+  small: ":base: px-1.5 py-1 text-sm",
+  medium: ":base: px-2 py-1 text-base"
+};
+const colorClasses: Record<ButtonColor, string> = {
+  base: ":base: bg-gray-200 outline-gray-200",
+  contrast: ":base: bg-white outline-gray-200 shadow-gray-200",
+  primary: ":base: bg-gradient-to-tr bg-[length:125%_auto] text-white outline-tertiary"
+};
+const variantClasses: Record<ButtonVariant, string> = {
+  solid: ":base: focus:outline-none",
+  text: ":base: bg-transparent focus:outline-none",
+  outlined: ":base: outline outline-1 -outline-offset-1 shadow-md focus-visible:outline-1"
+};
+const textClasses: Record<ButtonText, string> = {
+  base: ":base: text-gray-700",
+  soft: ":base: text-gray-400",
+  softer: ":base: text-gray-500"
+};
+const iconButtonSizes: Record<ButtonSize, Record<"button" | "icon" | "label", string>> = {
+  xs: { button: ":base-2: p-1", icon: ":base: h-4.5 w-4.5", label: ":base: pl-1" },
+  small: { button: ":base-2: p-1", icon: ":base: h-5 w-5", label: ":base: pl-1" },
+  medium: { button: ":base-2: p-1", icon: ":base: h-6 w-6", label: ":base: pl-1" }
+};
+
+// Keyboard focus shows the hover style.
+const getHoverClasses = (color: ButtonColor, variant: ButtonVariant): string => {
+  if (color === "primary") return ":base: @hover:bg-right focus-visible:bg-right";
+  if (color === "contrast") return ":base: @hover:bg-gray-100 focus-visible:bg-gray-100";
+  if (variant === "text") return ":base: @hover:bg-gray-200 focus-visible:bg-gray-200";
+
+  return ":base: @hover:(shadow-inner outline-gray-300) focus-visible:(shadow-inner outline-gray-300)";
+};
+const Button: ParentComponent<ButtonProps> = (providedProps) => {
+  const props = mergeProps(
+    { color: "base", variant: "solid", size: "medium" } as const,
+    providedProps
+  );
+  const [local, rest] = splitProps(props, [
+    "class",
+    "color",
+    "variant",
+    "size",
+    "text",
+    "link",
+    "badge"
+  ]);
+  const component = (): "a" | "div" | "button" => {
+    if (local.link) return "a";
+    if (local.badge) return "div";
+
+    return "button";
+  };
+
+  return (
+    <Dynamic
+      component={component()}
+      {...rest}
+      href={local.link}
+      type={component() === "button" ? (rest.type ?? "button") : undefined}
+      class={clsx(
+        ":base: relative inline-flex items-center justify-center rounded-lg font-medium transition-[background-position,background-color,box-shadow,opacity] duration-200 ease-out disabled:opacity-70",
+        !local.badge && ":base: cursor-pointer",
+        sizeClasses[local.size],
+        variantClasses[local.variant],
+        local.variant !== "text" && colorClasses[local.color],
+        local.text && textClasses[local.text],
+        getHoverClasses(local.color, local.variant),
+        local.class
+      )}
+    />
+  );
+};
+const IconButton: ParentComponent<IconButtonProps> = (providedProps) => {
+  const props = mergeProps({ size: "medium" } as const, providedProps);
+  const [local, rest] = splitProps(props, ["class", "icon", "label", "iconClass", "children"]);
+
+  return (
+    <Button {...rest} class={clsx(iconButtonSizes[props.size].button, local.class)}>
+      <span
+        aria-hidden="true"
+        class={clsx("shrink-0", iconButtonSizes[props.size].icon, local.icon, local.iconClass)}
+      />
+      <Show when={local.label}>
+        <span class={clsx("truncate", iconButtonSizes[props.size].label)}>{local.label}</span>
+      </Show>
+      {local.children}
+    </Button>
+  );
+};
+
+export { Button, IconButton };
+export type { ButtonProps, IconButtonProps };

package/dist/templates/pages/src/components/primitives/card.tsx

@@ -0,0 +1,25 @@
+import clsx from "clsx";
+import { type JSX, type ParentComponent, splitProps } from "solid-js";
+
+interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** A soft shadow around the card. */
+  shade?: boolean;
+}
+
+const Card: ParentComponent<CardProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "shade"]);
+
+  return (
+    <div
+      {...rest}
+      class={clsx(
+        ":base: rounded-2xl border border-gray-200 bg-gray-50 p-2 outline-none",
+        local.shade && ":base: shadow-[0_0_12px_0px] shadow-gray-200",
+        local.class
+      )}
+    />
+  );
+};
+
+export { Card };
+export type { CardProps };

package/dist/templates/pages/src/components/primitives/dialog.tsx

@@ -0,0 +1,47 @@
+import { Dialog as ArkDialog } from "@ark-ui/solid/dialog";
+import clsx from "clsx";
+import type { ParentComponent } from "solid-js";
+import { Portal } from "solid-js/web";
+import { Card } from "./card";
+
+interface DialogProps {
+  open: boolean;
+  /** The dialog's accessible name. */
+  label: string;
+  /** Element that gets focus on open; the default is the first focusable element. */
+  initialFocus?(): HTMLElement | null | undefined;
+  class?: string;
+  onOpenChange(open: boolean): void;
+}
+
+/** A dialog near the top of the screen, over the blurred page, e.g. for search. */
+const Dialog: ParentComponent<DialogProps> = (props) => (
+  <ArkDialog.Root
+    open={props.open}
+    initialFocusEl={props.initialFocus && (() => props.initialFocus?.() ?? null)}
+    onOpenChange={(details) => props.onOpenChange(details.open)}
+  >
+    <Portal>
+      <ArkDialog.Backdrop class="fixed inset-0 z-70 data-[state=open]:animate-overlay-in data-[state=closed]:animate-overlay-out" />
+      <ArkDialog.Positioner class="fixed inset-0 z-70 flex items-start justify-center px-4 pb-4 pt-[10dvh]">
+        <ArkDialog.Content
+          aria-label={props.label}
+          class="outline-none data-[state=open]:animate-dialog-in data-[state=closed]:animate-dialog-out"
+        >
+          <Card
+            shade
+            class={clsx(
+              ":base-2: flex w-xl max-w-[calc(100vw-2rem)] flex-col gap-3 rounded-xl p-3 md:p-4",
+              props.class
+            )}
+          >
+            {props.children}
+          </Card>
+        </ArkDialog.Content>
+      </ArkDialog.Positioner>
+    </Portal>
+  </ArkDialog.Root>
+);
+
+export { Dialog };
+export type { DialogProps };

package/dist/templates/pages/src/components/primitives/input.tsx

@@ -0,0 +1,22 @@
+import clsx from "clsx";
+import { type Component, type JSX, splitProps } from "solid-js";
+
+type InputProps = JSX.InputHTMLAttributes<HTMLInputElement>;
+
+// Fields use at least 16px text on mobile to prevent zoom on iOS.
+const Input: Component<InputProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <input
+      {...rest}
+      class={clsx(
+        ":base: h-7 w-full rounded-lg bg-gray-200 px-2 text-[16px] text-gray-700 outline-gray-200 placeholder:(text-gray-500 opacity-50) focus:(shadow-inner outline-none) md:text-sm",
+        local.class
+      )}
+    />
+  );
+};
+
+export { Input };
+export type { InputProps };

package/dist/templates/pages/src/components/primitives/logo.tsx

@@ -0,0 +1,41 @@
+import type { SiteContext } from "@andesine/pages";
+import clsx from "clsx";
+import { type Component, Show } from "solid-js";
+
+interface LogoProps {
+  site: SiteContext;
+  class?: string;
+}
+
+/**
+ * The configured logo and the site name: a square icon next to the name, or a full logo and a
+ * bar before the name. Without a logo, the name only.
+ */
+const Logo: Component<LogoProps> = (props) => {
+  const full = (): boolean => props.site.logo?.format === "full";
+  const showName = (): boolean => !props.site.logo || props.site.logo.title;
+  // The name follows as text, so a logo image repeats only the text in the image.
+  const alt = (): string => props.site.logo?.alt ?? (showName() ? "" : props.site.name);
+
+  return (
+    <span class={clsx(":base: flex min-w-0 items-center gap-3 text-2xl font-bold", props.class)}>
+      <Show when={props.site.logo}>
+        {(logo) => (
+          <img
+            src={logo().src}
+            alt={alt()}
+            class={full() ? "h-6.5 w-auto shrink-0" : "h-8 w-8 shrink-0"}
+          />
+        )}
+      </Show>
+      <Show when={showName()}>
+        <Show when={full()}>
+          <span aria-hidden="true" class="h-6 w-0.5 shrink-0 rounded-full bg-gray-200" />
+        </Show>
+        <span class={clsx("truncate", full() && "text-xl font-semibold")}>{props.site.name}</span>
+      </Show>
+    </span>
+  );
+};
+
+export { Logo };

package/dist/templates/pages/src/components/primitives/menu.tsx

@@ -0,0 +1,121 @@
+import { Menu as ArkMenu } from "@ark-ui/solid/menu";
+import clsx from "clsx";
+import { type Component, type JSX, For, Match, Show, Switch } from "solid-js";
+import { Portal } from "solid-js/web";
+
+interface MenuItem {
+  type?: "item";
+  value: string;
+  label: string;
+  icon?: string;
+  href?: string;
+  target?: string;
+  onSelect?(): void;
+}
+
+interface MenuHeader {
+  type: "header";
+  label: string;
+}
+
+interface MenuSeparator {
+  type: "separator";
+}
+
+interface MenuProps {
+  items: MenuEntry[];
+  /** Renders the trigger; spread the given props on the trigger element. */
+  trigger(props: () => JSX.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
+  class?: string;
+}
+
+interface MenuItemContentProps {
+  item: MenuItem;
+}
+
+type MenuEntry = MenuItem | MenuHeader | MenuSeparator;
+
+const itemClasses =
+  "group relative flex w-full cursor-pointer items-center gap-1 rounded-md px-1 py-0.5 text-sm text-gray-700 outline-none data-[highlighted]:bg-gray-100";
+
+const MenuItemContent: Component<MenuItemContentProps> = (props) => (
+  <>
+    <Show when={props.item.icon}>
+      <span
+        aria-hidden="true"
+        class={clsx("h-4.5 w-4.5 shrink-0 text-gray-500", props.item.icon)}
+      />
+    </Show>
+    <span class="flex-1 truncate px-1 text-start">{props.item.label}</span>
+  </>
+);
+const Menu: Component<MenuProps> = (props) => (
+  <ArkMenu.Root
+    positioning={{ placement: "bottom-end", offset: { mainAxis: 6 } }}
+    onSelect={(details) => {
+      const item = props.items.find(
+        (entry): entry is MenuItem => "value" in entry && entry.value === details.value
+      );
+
+      item?.onSelect?.();
+    }}
+  >
+    <ArkMenu.Trigger asChild={props.trigger} />
+    <Portal>
+      <ArkMenu.Positioner>
+        <ArkMenu.Content
+          class={clsx(
+            // Like the app, menus show and hide without animation.
+            "z-80 flex min-w-48 flex-col gap-0.5 rounded-[0.625rem] border border-gray-200 bg-white p-1 shadow-[0_0_12px_0px] shadow-black/15 outline-none",
+            props.class
+          )}
+        >
+          <For each={props.items}>
+            {(entry) => (
+              <Switch>
+                <Match when={entry.type === "separator"}>
+                  <ArkMenu.Separator class="my-0.5 h-px border-none bg-gray-200" />
+                </Match>
+                <Match when={entry.type === "header" && entry}>
+                  {(header) => (
+                    <span class="truncate px-1 py-0.5 text-xs text-gray-500">{header().label}</span>
+                  )}
+                </Match>
+                <Match when={entry.type !== "header" && entry.type !== "separator" && entry}>
+                  {(item) => (
+                    <Show
+                      when={item().href}
+                      fallback={
+                        <ArkMenu.Item value={item().value} class={itemClasses}>
+                          <MenuItemContent item={item()} />
+                        </ArkMenu.Item>
+                      }
+                    >
+                      {(href) => (
+                        <ArkMenu.Item
+                          value={item().value}
+                          asChild={(itemProps) => (
+                            <a
+                              {...itemProps({ class: itemClasses })}
+                              href={href()}
+                              target={item().target}
+                            >
+                              <MenuItemContent item={item()} />
+                            </a>
+                          )}
+                        />
+                      )}
+                    </Show>
+                  )}
+                </Match>
+              </Switch>
+            )}
+          </For>
+        </ArkMenu.Content>
+      </ArkMenu.Positioner>
+    </Portal>
+  </ArkMenu.Root>
+);
+
+export { Menu };
+export type { MenuItem, MenuHeader, MenuSeparator, MenuEntry, MenuProps };

package/dist/templates/pages/src/components/primitives/scroll-area.tsx

@@ -0,0 +1,103 @@
+import { ScrollArea as ArkScrollArea } from "@ark-ui/solid/scroll-area";
+import clsx from "clsx";
+import { type ParentComponent, Show } from "solid-js";
+
+interface ScrollAreaProps {
+  orientation?: "vertical" | "horizontal";
+  class?: string;
+  viewportClass?: string;
+  contentClass?: string;
+  /** Classes of the scrollbar and its thumb, e.g. to change their size or insets. */
+  scrollbarClass?: string;
+  thumbClass?: string;
+  /** Fades the top and bottom edges while content scrolls past them. Vertical only. */
+  shadow?: boolean;
+  /** The session storage key of a saved scroll position, restored before the first paint. */
+  scrollKey?: string;
+  viewportRef?(element: HTMLDivElement): void;
+}
+
+const shadowClass =
+  "pointer-events-none absolute inset-x-0 z-1 h-12 from-gray-50 to-gray-50/0 opacity-0 transition-opacity duration-150";
+// Shown while the pointer is over the area, or while it scrolls.
+const scrollbarClass =
+  ":base: z-10 flex media-touch:hidden opacity-0 transition-opacity duration-200 data-[hover]:opacity-100 data-[scrolling]:opacity-100";
+// A transparent border insets the thumb on any background.
+const thumbClass =
+  ":base: rounded-lg border-2 border-solid border-transparent bg-gray-200 bg-clip-padding shadow-inner";
+
+/**
+ * Scrolls its content in one direction, with an overlay scrollbar.
+ * Ark sets `position: relative` on the root, so position a wrapper instead, e.g. with `sticky`.
+ */
+const ScrollArea: ParentComponent<ScrollAreaProps> = (props) => {
+  const horizontal = (): boolean => props.orientation === "horizontal";
+
+  return (
+    <ArkScrollArea.Root
+      class={clsx(
+        ":base: relative flex min-h-0 overflow-hidden",
+        !horizontal() && ":base: flex-col",
+        props.class
+      )}
+    >
+      <ArkScrollArea.Viewport
+        ref={props.viewportRef}
+        data-scroll-key={props.scrollKey}
+        class={clsx(
+          "peer",
+          ":base: w-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+          // Touch screens keep their native overlay scrollbars.
+          "media-touch:[scrollbar-width:auto] media-touch:[&::-webkit-scrollbar]:block",
+          // A percent height does not resolve under a `max-height`, so a column flex item sizes it.
+          horizontal()
+            ? ":base: h-full overflow-y-hidden!"
+            : ":base: min-h-0 flex-1 overflow-x-hidden!",
+          props.viewportClass
+        )}
+      >
+        {/* Ark sets `min-width: fit-content`, which only horizontal scrolling needs. */}
+        <ArkScrollArea.Content class={clsx(!horizontal() && ":base: min-w-0!", props.contentClass)}>
+          {props.children}
+        </ArkScrollArea.Content>
+      </ArkScrollArea.Viewport>
+      <Show when={props.shadow && !horizontal()}>
+        <div
+          aria-hidden="true"
+          class={clsx(
+            shadowClass,
+            "top-0 bg-gradient-to-b peer-[[data-overflow-y]:not([data-at-top])]:opacity-100"
+          )}
+        />
+        <div
+          aria-hidden="true"
+          class={clsx(
+            shadowClass,
+            "bottom-0 bg-gradient-to-t peer-[[data-overflow-y]:not([data-at-bottom])]:opacity-100"
+          )}
+        />
+      </Show>
+      <ArkScrollArea.Context>
+        {(scrollArea) => (
+          <Show when={horizontal() ? scrollArea().hasOverflowX : scrollArea().hasOverflowY}>
+            <ArkScrollArea.Scrollbar
+              orientation={props.orientation ?? "vertical"}
+              class={clsx(
+                scrollbarClass,
+                horizontal() ? ":base: h-3 flex-col px-2.5" : ":base: w-3 py-2.5",
+                props.scrollbarClass
+              )}
+            >
+              <ArkScrollArea.Thumb
+                class={clsx(thumbClass, horizontal() ? "h-full" : "w-full", props.thumbClass)}
+              />
+            </ArkScrollArea.Scrollbar>
+          </Show>
+        )}
+      </ArkScrollArea.Context>
+    </ArkScrollArea.Root>
+  );
+};
+
+export { ScrollArea };
+export type { ScrollAreaProps };

package/dist/templates/pages/src/components/primitives/shortcut.tsx

@@ -0,0 +1,60 @@
+import clsx from "clsx";
+import { type Component, For, Match, Switch } from "solid-js";
+
+interface ShortcutProps {
+  /** Keys joined with `+`, e.g. `$mod+K`. `$mod` is Command on Apple devices and Ctrl elsewhere. */
+  shortcut: string;
+  /** Shows `$mod` as Ctrl. */
+  ctrl?: boolean;
+  class?: string;
+}
+
+/** A keyboard shortcut with key icons, after the Andesine app's shortcut. */
+const Shortcut: Component<ShortcutProps> = (props) => {
+  const pieces = (): string[] => {
+    return props.shortcut.split("+").map((piece) => {
+      const key = piece.toLowerCase().trim();
+
+      return key === "$mod" && props.ctrl ? "ctrl" : key;
+    });
+  };
+
+  return (
+    <kbd class={clsx(":base: flex items-center justify-center font-mono", props.class)}>
+      <For each={pieces()}>
+        {(piece) => (
+          <Switch>
+            <Match when={piece === "$mod"}>
+              <span class="i-lucide:command inline-block" />
+            </Match>
+            <Match when={piece === "ctrl"}>
+              <span class="pr-0.5 font-light leading-[1]">Ctrl</span>
+            </Match>
+            <Match when={piece === "alt"}>
+              <span class="i-lucide:option inline-block" />
+            </Match>
+            <Match when={piece === "shift"}>
+              <span class="i-lucide:arrow-big-up inline-block" />
+            </Match>
+            <Match when={piece === "enter"}>
+              <span class="i-lucide:corner-down-left inline-block" />
+            </Match>
+            <Match when={piece === "backspace"}>
+              <span class="i-lucide:delete inline-block" />
+            </Match>
+            <Match when={/^f\d\d?$/.test(piece)}>
+              <span class="min-w-3 text-center text-[90%] font-light leading-[1]">
+                {piece.toUpperCase()}
+              </span>
+            </Match>
+            <Match when={true}>
+              <span class="w-3 text-center font-light leading-[1]">{piece.toUpperCase()}</span>
+            </Match>
+          </Switch>
+        )}
+      </For>
+    </kbd>
+  );
+};
+
+export { Shortcut };

package/dist/templates/pages/src/components/primitives/tooltip.tsx

@@ -0,0 +1,39 @@
+import { Tooltip as ArkTooltip } from "@ark-ui/solid/tooltip";
+import clsx from "clsx";
+import type { JSX, ParentComponent } from "solid-js";
+import { Portal } from "solid-js/web";
+
+interface TooltipProps {
+  content: JSX.Element;
+  class?: string;
+}
+
+const Tooltip: ParentComponent<TooltipProps> = (props) => (
+  <ArkTooltip.Root
+    openDelay={500}
+    closeDelay={250}
+    positioning={{ placement: "bottom", offset: { mainAxis: 6 } }}
+  >
+    <ArkTooltip.Trigger
+      asChild={(triggerProps) => (
+        <span {...triggerProps({ class: "inline-flex" })}>{props.children}</span>
+      )}
+    />
+    <Portal>
+      <ArkTooltip.Positioner>
+        <ArkTooltip.Content
+          class={clsx(
+            ":base: relative z-80 flex whitespace-nowrap rounded-md bg-gray-800 px-1.5 py-1 text-xs leading-none text-gray-50 shadow-inner shadow-gray-900 ring-1 ring-gray-900 pointer-events-none",
+            ":base: data-[state=open]:animate-popover-in data-[state=closed]:animate-popover-out",
+            props.class
+          )}
+        >
+          {props.content}
+        </ArkTooltip.Content>
+      </ArkTooltip.Positioner>
+    </Portal>
+  </ArkTooltip.Root>
+);
+
+export { Tooltip };
+export type { TooltipProps };

package/dist/templates/pages/src/components/reference/facts.astro

@@ -0,0 +1,27 @@
+---
+import type { Fact } from "@andesine/pages";
+
+interface Props {
+  facts: Fact[];
+}
+
+const { facts } = Astro.props;
+---
+
+{
+  facts.length > 0 && (
+    <div class="flex flex-wrap gap-x-3 text-base leading-7 text-gray-500">
+      {facts.map((fact) => (
+        <span>
+          <span class="text-sm">{fact.label}:</span>{" "}
+          {fact.values.map((value, index) => (
+            <>
+              {index > 0 && ", "}
+              <code>{value}</code>
+            </>
+          ))}
+        </span>
+      ))}
+    </div>
+  )
+}