@minidocs/astro 0.0.0-stage → 0.2.0

package/src/styles/prose.css

@@ -0,0 +1,218 @@
+/* Rendered Markdown content, from the Prose component or the md-prose class. */
+@layer minidocs {
+  .md-prose {
+    color: var(--md-color-text);
+    font-size: var(--md-prose-font-size);
+    line-height: var(--md-prose-line-height);
+    overflow-wrap: break-word;
+  }
+
+  .md-prose > :first-child {
+    margin-block-start: 0;
+  }
+
+  .md-prose > :last-child {
+    margin-block-end: 0;
+  }
+
+  .md-prose :is(h1, h2, h3, h4, h5, h6) {
+    color: var(--md-color-heading);
+    font-weight: 600;
+    line-height: 1.35;
+    text-wrap: balance;
+  }
+
+  .md-prose h1 {
+    margin-block: 0 1rem;
+    font-size: 1.875em;
+    font-weight: 700;
+    letter-spacing: -0.015em;
+    line-height: 1.25;
+  }
+
+  .md-prose h2 {
+    margin-block: 2.5em 0.75em;
+    font-size: 1.5em;
+    letter-spacing: -0.01em;
+  }
+
+  .md-prose h3 {
+    margin-block: 2em 0.5em;
+    font-size: 1.125em;
+  }
+
+  .md-prose :is(h4, h5, h6) {
+    margin-block: 1.75em 0.5em;
+    font-size: 1em;
+  }
+
+  /* A heading right after another one already has enough space above it */
+  .md-prose :is(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) {
+    margin-block-start: 0.75em;
+  }
+
+  /* Except under the page title, which needs a clear gap before the first section */
+  .md-prose h1 + :is(h2, h3, h4, h5, h6) {
+    margin-block-start: 1.75em;
+  }
+
+  .md-prose :is(p, ul, ol, blockquote, pre, table, figure) {
+    margin-block: 1.125em;
+  }
+
+  .md-prose a {
+    color: var(--md-color-accent);
+    text-decoration: underline;
+    text-decoration-color: color-mix(in srgb, var(--md-color-accent) 35%, transparent);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.22em;
+    transition: text-decoration-color 0.15s;
+  }
+
+  .md-prose a:hover {
+    text-decoration-color: currentColor;
+  }
+
+  .md-prose strong {
+    color: var(--md-color-heading);
+    font-weight: 600;
+  }
+
+  /* Set explicitly, since resets like Tailwind's Preflight remove the browser defaults */
+  .md-prose :is(ul, ol) {
+    padding-inline-start: 1.375em;
+  }
+
+  .md-prose ul {
+    list-style-type: disc;
+  }
+
+  .md-prose ol {
+    list-style-type: decimal;
+  }
+
+  .md-prose :is(ul, ol) ul {
+    list-style-type: circle;
+  }
+
+  .md-prose li {
+    margin-block: 0.375em;
+    padding-inline-start: 0.125em;
+  }
+
+  .md-prose li > :is(ul, ol) {
+    margin-block: 0.375em;
+  }
+
+  .md-prose li::marker {
+    color: var(--md-color-muted);
+  }
+
+  .md-prose ol > li::marker {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .md-prose blockquote {
+    margin-inline: 0;
+    padding-inline-start: 1em;
+    border-inline-start: 2px solid var(--md-color-border);
+    color: var(--md-color-muted);
+  }
+
+  .md-prose hr {
+    margin-block: 3em;
+    border: 0;
+    border-block-start: 1px solid var(--md-color-border);
+  }
+
+  .md-prose img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--md-radius);
+  }
+
+  .md-prose code,
+  .md-prose kbd {
+    font-family: var(--md-font-mono);
+    font-size: 0.875em;
+  }
+
+  .md-prose :not(pre) > code {
+    padding: 0.125em 0.375em;
+    border-radius: 0.3125rem;
+    background: color-mix(in srgb, var(--md-color-heading) 6%, transparent);
+    color: var(--md-color-heading);
+    overflow-wrap: anywhere;
+  }
+
+  .md-prose a code {
+    color: inherit;
+  }
+
+  .md-prose kbd {
+    padding: 0.0625em 0.375em;
+    border: 1px solid var(--md-color-border);
+    border-block-end-width: 2px;
+    border-radius: 0.3125rem;
+    color: var(--md-color-heading);
+  }
+
+  .md-prose pre {
+    padding: 0.875rem 1rem;
+    border: 1px solid var(--md-color-border);
+    border-radius: 0.5rem;
+    background-color: var(--md-color-code-bg);
+    font-size: 0.8125rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    tab-size: 2;
+  }
+
+  .md-prose pre > code {
+    font-size: inherit;
+  }
+
+  /* Shiki dual themes with defaultColor: false leave colors to CSS; single themes set them inline and win */
+  .md-prose :is(pre, pre span) {
+    color: light-dark(var(--shiki-light), var(--shiki-dark));
+  }
+
+  .md-prose pre:focus-visible {
+    outline: var(--md-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* Wide tables scroll inside themselves instead of widening the page */
+  .md-prose table {
+    display: block;
+    width: max-content;
+    max-width: 100%;
+    overflow-x: auto;
+    border-collapse: collapse;
+    font-size: 0.9375em;
+    line-height: 1.6;
+  }
+
+  .md-prose :is(th, td) {
+    padding: 0.625em 1.25em 0.625em 0;
+    border-block-end: 1px solid var(--md-color-border);
+    text-align: start;
+    vertical-align: top;
+  }
+
+  .md-prose :is(th, td):last-child {
+    padding-inline-end: 0;
+  }
+
+  /* Tables scroll sideways, so code in them stays whole instead of breaking mid-word */
+  .md-prose :is(th, td) code {
+    overflow-wrap: normal;
+    white-space: nowrap;
+  }
+
+  .md-prose th {
+    border-block-end-color: color-mix(in srgb, var(--md-color-heading) 25%, transparent);
+    color: var(--md-color-heading);
+    font-weight: 600;
+  }
+}

package/src/styles/search.css

@@ -0,0 +1,207 @@
+/* Search: the trigger, the dialog, and the states around results. Options are styled by their ARIA state. */
+@layer minidocs {
+  .md-search-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 13rem;
+    height: 2rem;
+    padding-inline: 0.625rem 0.5rem;
+    border: 0;
+    border-radius: 0.5rem;
+    background: color-mix(in srgb, var(--md-color-heading) 4.5%, transparent);
+    color: var(--md-color-muted);
+    font: inherit;
+    font-size: 0.8125rem;
+    cursor: pointer;
+    transition:
+      color 0.15s,
+      background-color 0.15s;
+  }
+
+  .md-search-trigger:hover {
+    background: color-mix(in srgb, var(--md-color-heading) 8%, transparent);
+    color: var(--md-color-heading);
+  }
+
+  .md-search-trigger:focus-visible {
+    outline: var(--md-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* One nested kbd per key, which styles can box or join, e.g. with a "+" before every key but the first */
+  .md-search-shortcut {
+    display: inline-flex;
+    gap: 0.1875em;
+    margin-inline-start: auto;
+    color: var(--md-color-muted);
+    font-family: var(--md-font-sans);
+    font-size: 0.75rem;
+  }
+
+  .md-search-shortcut[data-platform="apple"] {
+    gap: 0.0625em;
+  }
+
+  .md-search-shortcut kbd {
+    font: inherit;
+  }
+
+  .md-search-dialog {
+    box-sizing: border-box;
+    width: min(36rem, 100vw - 1.5rem);
+    max-height: min(32rem, 100dvh - 2 * min(14vh, 7rem));
+    margin: min(14vh, 7rem) auto auto;
+    padding: 0;
+    overflow: hidden;
+    border: 1px solid var(--md-color-border);
+    border-radius: 0.875rem;
+    background: var(--md-color-bg);
+    color: var(--md-color-text);
+    box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.18);
+    /* Set here, not on [open]: closing keeps display flex until it fades out, and a row would flash meanwhile */
+    flex-direction: column;
+    opacity: 0;
+    transform: scale(0.98);
+    transition:
+      opacity 0.18s,
+      transform 0.18s cubic-bezier(0.32, 0.72, 0, 1),
+      overlay 0.18s allow-discrete,
+      display 0.18s allow-discrete;
+  }
+
+  /* Results scroll on their own, below whatever sits above them */
+  .md-search-dialog[open] {
+    display: flex;
+    opacity: 1;
+    transform: none;
+  }
+
+  /* The page behind a modal stays put, as with the sidebar drawer */
+  :root:has(.md-search-dialog[open]) {
+    overflow: hidden;
+  }
+
+  .md-search-dialog::backdrop {
+    background: transparent;
+    transition:
+      background-color 0.18s,
+      overlay 0.18s allow-discrete,
+      display 0.18s allow-discrete;
+  }
+
+  .md-search-dialog[open]::backdrop {
+    background: light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.5));
+  }
+
+  @starting-style {
+    .md-search-dialog[open] {
+      opacity: 0;
+      transform: scale(0.98);
+    }
+
+    .md-search-dialog[open]::backdrop {
+      background: transparent;
+    }
+  }
+
+  .md-search-input {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    padding: 0.875rem 1rem;
+    border: 0;
+    border-block-end: 1px solid var(--md-color-border);
+    background: transparent;
+    color: var(--md-color-heading);
+    font: inherit;
+    font-size: 0.9375rem;
+    outline: none;
+  }
+
+  .md-search-input::placeholder {
+    color: var(--md-color-muted);
+  }
+
+  .md-search-results {
+    flex: 1;
+    min-height: 0;
+    padding: 0.375rem;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-padding-block: 0.375rem;
+  }
+
+  .md-search-results [role="group"] + [role="group"] {
+    margin-block-start: 0.5rem;
+  }
+
+  .md-search-results [role="option"] {
+    display: block;
+    padding: 0.5rem 0.625rem;
+    border-radius: 0.5rem;
+    color: var(--md-color-text);
+    font-size: 0.875rem;
+    line-height: 1.45;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .md-search-results [role="option"][aria-selected="true"] {
+    background: var(--md-color-hover);
+  }
+
+  /* The underline keeps matches visible even when the accent is the heading color */
+  .md-search-results mark {
+    background: none;
+    color: var(--md-color-accent);
+    text-decoration: underline;
+    text-decoration-color: color-mix(in srgb, var(--md-color-accent) 50%, transparent);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.2em;
+  }
+
+  .md-search-idle,
+  .md-search-loading,
+  .md-search-empty,
+  .md-search-error {
+    padding: 2.25rem 1.5rem;
+    color: var(--md-color-muted);
+    font-size: 0.8125rem;
+    text-align: center;
+    text-wrap: balance;
+  }
+
+  .md-search-found {
+    color: var(--md-color-muted);
+    font-size: 0.75rem;
+  }
+
+  .md-search-query {
+    color: var(--md-color-heading);
+  }
+
+  /* Local engines answer within a frame, so a loading message that appeared at once would only flash */
+  .md-search-loading {
+    animation: md-search-reveal 0.15s 0.3s backwards;
+  }
+
+  /* Over earlier results, a message would push them down on every keystroke; place a spinner there yourself */
+  .md-search:not([data-status="loading"]) .md-search-loading {
+    display: none;
+  }
+
+  @keyframes md-search-reveal {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .md-search-trigger,
+    .md-search-dialog,
+    .md-search-dialog::backdrop {
+      transition: none;
+    }
+  }
+}

package/src/styles/sidebar.css

@@ -0,0 +1,162 @@
+/* Sidebar: the tree itself. Where it sits and the drawer on narrow screens belong to layout.css. */
+@layer minidocs {
+  .md-sidebar {
+    color: var(--md-color-text);
+    font-size: var(--md-sidebar-font-size);
+    line-height: 1.5;
+  }
+
+  .md-sidebar-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .md-sidebar-item + .md-sidebar-item {
+    margin-block-start: 1px;
+  }
+
+  .md-sidebar-link,
+  .md-sidebar-group-title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: var(--md-sidebar-item-padding-block) var(--md-sidebar-item-padding-inline);
+    border-radius: var(--md-radius);
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      color 0.15s,
+      background-color 0.15s;
+  }
+
+  .md-sidebar-link:hover,
+  .md-sidebar-group-title:hover {
+    background: var(--md-color-hover);
+    color: var(--md-color-heading);
+  }
+
+  .md-sidebar :is(.md-sidebar-link, .md-sidebar-group-title):focus-visible {
+    outline: var(--md-focus-ring);
+    outline-offset: -2px;
+  }
+
+  .md-sidebar [aria-current="page"] {
+    background: var(--md-color-current);
+    color: var(--md-color-accent);
+    font-weight: 500;
+  }
+
+  /* Levels inside a group hang off a hairline; the current page marks its stretch of it */
+  .md-sidebar-group .md-sidebar-list {
+    margin-block: 1px;
+    margin-inline-start: var(--md-sidebar-indent);
+    padding-inline-start: var(--md-sidebar-rail-gap);
+    border-inline-start: 1px solid var(--md-color-border);
+  }
+
+  .md-sidebar-group .md-sidebar-list [aria-current="page"] {
+    background: none;
+  }
+
+  .md-sidebar-group .md-sidebar-list [aria-current="page"]::before {
+    content: "";
+    position: absolute;
+    inset-block: 0.25rem;
+    inset-inline-start: calc(-1 * var(--md-sidebar-rail-gap) - 1.5px);
+    width: 2px;
+    border-radius: 1px;
+    background: var(--md-color-accent);
+  }
+
+  .md-sidebar-label {
+    display: block;
+    margin-block-start: 1.5rem;
+    padding: var(--md-sidebar-item-padding-block) var(--md-sidebar-item-padding-inline);
+    padding-block-end: 0.25rem;
+    color: var(--md-color-heading);
+    font-size: 0.8125rem;
+    font-weight: 600;
+  }
+
+  .md-sidebar-item:first-child > .md-sidebar-label {
+    margin-block-start: 0;
+  }
+
+  /* A labelled section lists its pages without another level of indentation */
+  .md-sidebar-label + .md-sidebar-list {
+    margin-inline-start: 0;
+    padding-inline-start: 0;
+    border: 0;
+  }
+
+  .md-sidebar-group-title {
+    list-style: none;
+  }
+
+  .md-sidebar-group-title::-webkit-details-marker {
+    display: none;
+  }
+
+  /* Native markers vary between browsers, so groups draw their own chevron */
+  .md-sidebar-group-title::after {
+    content: "";
+    flex: none;
+    width: 0.3125rem;
+    height: 0.3125rem;
+    margin-inline: auto 0.25rem;
+    border-block-end: 1.5px solid currentColor;
+    border-inline-end: 1.5px solid currentColor;
+    opacity: 0.45;
+    transform: rotate(-45deg);
+    transition: transform 0.2s;
+  }
+
+  .md-sidebar-group[data-state="open"] > .md-sidebar-group-title::after {
+    transform: rotate(45deg);
+  }
+
+  .md-sidebar-link[data-external]::after {
+    content: "";
+    flex: none;
+    width: 0.4375rem;
+    height: 0.4375rem;
+    margin-inline-start: -0.125rem;
+    border-block-start: 1.5px solid currentColor;
+    border-inline-end: 1.5px solid currentColor;
+    opacity: 0.45;
+    transform: translateY(-0.125rem);
+  }
+
+  /* Always shown here; layout.css hides it where the sidebar has its own column */
+  .md-sidebar-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--md-color-border);
+    border-radius: var(--md-radius);
+    background: transparent;
+    color: var(--md-color-heading);
+    font: inherit;
+    font-size: 0.875rem;
+    cursor: pointer;
+  }
+
+  .md-sidebar-trigger:hover {
+    background: var(--md-color-hover);
+  }
+
+  .md-sidebar-trigger:focus-visible {
+    outline: var(--md-focus-ring);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .md-sidebar-group-title::after {
+      transition: none;
+    }
+  }
+}

package/src/styles/toc.css

@@ -0,0 +1,79 @@
+/* Table of contents. */
+@layer minidocs {
+  .md-toc {
+    position: relative;
+    padding-inline-start: var(--md-toc-indent);
+    color: var(--md-color-muted);
+    font-size: var(--md-toc-font-size);
+    line-height: 1.45;
+  }
+
+  /* The track the reading position moves along */
+  .md-toc::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 1px;
+    background: var(--md-color-border);
+  }
+
+  /* attachToc places the marker on the current link through these variables */
+  .md-toc::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    inset-inline-start: -0.5px;
+    width: 2px;
+    height: var(--md-toc-marker-height, 0);
+    border-radius: 1px;
+    background: var(--md-color-accent);
+    transform: translateY(var(--md-toc-marker-top, 0));
+    transition:
+      transform 0.25s cubic-bezier(0.32, 0.72, 0, 1),
+      height 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  /* attachToc sets this while the marker jumps, e.g. on a page opened half way down */
+  .md-toc[data-md-toc-instant]::after {
+    transition: none;
+  }
+
+  .md-toc-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .md-toc-list .md-toc-list {
+    padding-inline-start: var(--md-toc-indent);
+  }
+
+  .md-toc-link {
+    display: block;
+    padding-block: 0.3125rem;
+    color: inherit;
+    text-decoration: none;
+    transition: color 0.15s;
+  }
+
+  .md-toc-link:hover {
+    color: var(--md-color-heading);
+  }
+
+  .md-toc-link:focus-visible {
+    border-radius: 2px;
+    outline: var(--md-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .md-toc-link[aria-current="true"] {
+    color: var(--md-color-accent);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .md-toc::after {
+      transition: none;
+    }
+  }
+}

package/src/styles.css

@@ -0,0 +1,9 @@
+/* All minidocs default styles. To leave a part unstyled, import base.css and the files you want from minidocs/styles/ instead. */
+@import "./styles/base.css";
+@import "./styles/layout.css";
+@import "./styles/sidebar.css";
+@import "./styles/toc.css";
+@import "./styles/prose.css";
+@import "./styles/pager.css";
+@import "./styles/callout.css";
+@import "./styles/search.css";