starlight-theme-apple 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,101 @@
+# starlight-theme-apple
+
+## 0.4.0
+
+### Minor Changes
+
+- [#65](https://github.com/acsandmann/starlight-theme-apple/pull/65) [`84b4096`](https://github.com/acsandmann/starlight-theme-apple/commit/84b4096452bed89126f4e48f8b11c433240c0848) Thanks [@trueberryless](https://github.com/trueberryless)! - Adds support for Astro v6, drops support for Astro v5.
+
+  ⚠️ **BREAKING CHANGE:** The minimum supported version of Starlight is now `0.38.0`.
+
+  Please follow the [upgrade guide](https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.38.0) to update your project.
+
+## 0.3.3
+
+### Patch Changes
+
+- [#51](https://github.com/acsandmann/starlight-theme-apple/pull/51) [`179c35a`](https://github.com/acsandmann/starlight-theme-apple/commit/179c35aefdd6acd51bce638941379f3e5e427c58) Thanks [@acsandmann](https://github.com/apps/acsandmann)! - Setups trusted publishing using OpenID Connect (OIDC) authentication — no code changes.
+
+## 0.3.2
+
+### Patch Changes
+
+- [`8262f4c`](https://github.com/acsandmann/starlight-theme-apple/commit/8262f4c71734fcfcbf522117b527c194c5a6ffbd) Thanks [@trueberryless](https://github.com/trueberryless)! - Make mobile toc even more little by decreasing the height to 3.5rem
+
+## 0.3.1
+
+### Patch Changes
+
+- [`15a98fd`](https://github.com/acsandmann/starlight-theme-apple/commit/15a98fdc78175895f2d74d3aa9b91b345df7dfbc) Thanks [@trueberryless](https://github.com/trueberryless) and [@tsavpyn](https://github.com/tsavpyn)! - Fix mobile table of contents takes up too much space
+
+## 0.3.0
+
+### Minor Changes
+
+- [`e0537f3`](https://github.com/acsandmann/starlight-theme-apple/commit/e0537f3dd70c8ad5d4702cc5059060c64a5ff05f) Thanks [@trueberryless](https://github.com/trueberryless)! - Rename NPM package to starlight-theme-apple
+
+### Patch Changes
+
+- [`9f032da`](https://github.com/acsandmann/starlight-theme-apple/commit/9f032da50ff24c37b48eaa1c0060439ebfbedab7) Thanks [@trueberryless](https://github.com/trueberryless)! - Make pagination labels and arrows more subtle and adjust margins and sizes
+
+- [`24cd5c2`](https://github.com/acsandmann/starlight-theme-apple/commit/24cd5c229370fd5c056593f25be6c98c118f9c45) Thanks [@trueberryless](https://github.com/trueberryless)! - Fix spacing between social icons when screen width is between 800px and 1151px
+
+## 0.2.1
+
+### Patch Changes
+
+- [`fa2e281`](https://github.com/acsandmann/starlight-theme-apple/commit/fa2e28104b334a8a15626deea8fa1006def9cc11) Thanks [@trueberryless](https://github.com/trueberryless)! - Improve the accessibility of the Table of Contents by highlighting the active heading with the accent color.
+
+## 0.2.0
+
+### Minor Changes
+
+- [#14](https://github.com/acsandmann/starlight-theme-apple/pull/14) [`623d0c7`](https://github.com/acsandmann/starlight-theme-apple/commit/623d0c7e561bf53c5c3dc9d932e59a605245a7aa) Thanks [@trueberryless](https://github.com/trueberryless)! - Groups all of the Starlight Next.js theme CSS declarations into a single `nextjs` [cascade layer](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers).
+
+  This change aligns with the Starlight CSS architecture and allows for easier customization of the Starlight Next.js theme CSS as any custom unlayered CSS will override the default styles. If you are using cascade layers in your custom CSS, you can use the [`@layer`](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) CSS at-rule to define the order of precedence for different layers including the ones used by Starlight and the Starlight Next.js theme.
+
+  Make sure to check your site’s appearance when upgrading to make sure there are no style regressions caused by this change.
+
+- [#14](https://github.com/acsandmann/starlight-theme-apple/pull/14) [`623d0c7`](https://github.com/acsandmann/starlight-theme-apple/commit/623d0c7e561bf53c5c3dc9d932e59a605245a7aa) Thanks [@trueberryless](https://github.com/trueberryless)! - ⚠️ **BREAKING CHANGE:** The minimum supported version of Starlight is now version `0.34.0`.
+
+  Please use the `@astrojs/upgrade` command to upgrade your project:
+
+  ```sh
+  npx @astrojs/upgrade
+  ```
+
+### Patch Changes
+
+- [#14](https://github.com/acsandmann/starlight-theme-apple/pull/14) [`4a3ba25`](https://github.com/acsandmann/starlight-theme-apple/commit/4a3ba257a0f60652fe7eaa049d2dc800cfee7b90) Thanks [@trueberryless](https://github.com/trueberryless)! - Fixes a banner position issue when using a banner in pages with a sidebar.
+
+- [#14](https://github.com/acsandmann/starlight-theme-apple/pull/14) [`39abcc1`](https://github.com/acsandmann/starlight-theme-apple/commit/39abcc1f2310f42e4417891453e703a70ae517e7) Thanks [@trueberryless](https://github.com/trueberryless)! - Fixes an issue where nested user-defined Expressive Code settings were not being applied correctly.
+
+## 0.1.4
+
+### Patch Changes
+
+- [`ba3a9df`](https://github.com/acsandmann/starlight-theme-apple/commit/ba3a9df11896b701dab098f3b3dfb85808f94c71) Thanks [@trueberryless](https://github.com/trueberryless)! - Fix width of banner being too large when ToC is not visible
+
+## 0.1.3
+
+### Patch Changes
+
+- [#9](https://github.com/acsandmann/starlight-theme-apple/pull/9) [`65eb62a`](https://github.com/acsandmann/starlight-theme-apple/commit/65eb62a9587e9eeabe85e5f9cbfde2360590eef2) Thanks [@trueberryless](https://github.com/trueberryless)! - Fix margin between social icons, make whitespace between sidebar and content bigger
+
+## 0.1.2
+
+### Patch Changes
+
+- [#4](https://github.com/acsandmann/starlight-theme-apple/pull/4) [`479a7dc`](https://github.com/acsandmann/starlight-theme-apple/commit/479a7dc28391670e701d4baa23ddadc472bf0624) Thanks [@trueberryless](https://github.com/trueberryless)! - Add keywords and lower peerDep to Starlight 0.30 because it's just CSS
+
+## 0.1.1
+
+### Patch Changes
+
+- [`0ef41c9`](https://github.com/acsandmann/starlight-theme-apple/commit/0ef41c9ce7fcbe8aa101cc5bcfba4dbab11b037b) Thanks [@trueberryless](https://github.com/trueberryless)! - Fix @fontsource installed in root package
+
+## 0.1.0
+
+### Minor Changes
+
+- [`ee9ce1e`](https://github.com/acsandmann/starlight-theme-apple/commit/ee9ce1ef4fec571f1ce7fa6c288baa5b68a23760) Thanks [@trueberryless](https://github.com/trueberryless)! - Initial public release

package/README.md

@@ -0,0 +1,15 @@
+# `starlight-theme-apple`
+
+An Astro Starlight theme inspired by Apple Developer Documentation.
+
+## Documentation
+
+Want to get started immediately?
+
+Check out the `starlight-theme-apple` getting started guide.
+
+## License
+
+Licensed under the MIT license, Copyright © trueberryless.
+
+See [LICENSE](https://github.com/acsandmann/starlight-theme-apple/blob/main/LICENSE) for more information.

package/components/PageTitle.astro

@@ -0,0 +1,24 @@
+---
+const title = Astro.locals.starlightRoute.entry.data.title;
+const segments = Astro.url.pathname.split("/").filter(Boolean);
+const parents = segments.slice(0, -1).map((segment, index) => ({
+  href: `/${segments.slice(0, index + 1).join("/")}/`,
+  label: decodeURIComponent(segment)
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" "),
+}));
+---
+
+<nav class="apple-breadcrumbs" aria-label="Breadcrumb">
+  <a href="/">Documentation</a>
+  {
+    parents.map((parent) => (
+      <>
+        <span aria-hidden="true">›</span>
+        <a href={parent.href}>{parent.label}</a>
+      </>
+    ))
+  }
+</nav>
+<h1 id="_top">{title}</h1>

package/index.ts

@@ -0,0 +1,49 @@
+import type { StarlightPlugin } from "@astrojs/starlight/types";
+import { fileURLToPath } from "node:url";
+
+export default function starlightThemeApple(): StarlightPlugin {
+  return {
+    name: "starlight-theme-apple",
+    hooks: {
+      "config:setup"({ config, updateConfig }) {
+        const userExpressiveCodeConfig =
+          !config.expressiveCode || config.expressiveCode === true
+            ? {}
+            : config.expressiveCode;
+
+        updateConfig({
+          components: {
+            ...config.components,
+            PageTitle: fileURLToPath(
+              new URL("./components/PageTitle.astro", import.meta.url)
+            ),
+          },
+          customCss: [
+            ...(config.customCss ?? []),
+            "starlight-theme-apple/styles.css",
+          ],
+          expressiveCode:
+            config.expressiveCode === false
+              ? false
+              : {
+                  themes: ["github-dark", "github-light"],
+                  ...userExpressiveCodeConfig,
+                  styleOverrides: {
+                    borderColor: "var(--apple-border-subtle)",
+                    borderRadius: "var(--apple-radius-sm)",
+                    ...userExpressiveCodeConfig.styleOverrides,
+                    frames: {
+                      editorActiveTabIndicatorTopColor: "unset",
+                      editorActiveTabIndicatorBottomColor: "var(--apple-link)",
+                      editorTabBarBorderBottomColor:
+                        "var(--apple-border-subtle)",
+                      frameBoxShadowCssValue: "unset",
+                      ...userExpressiveCodeConfig.styleOverrides?.frames,
+                    },
+                  },
+                },
+        });
+      },
+    },
+  };
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "starlight-theme-apple",
+  "version": "0.1.0",
+  "description": "An Apple Developer Documentation-inspired theme for Astro Starlight.",
+  "keywords": [
+    "starlight",
+    "theme",
+    "apple-developer-documentation",
+    "docs",
+    "black",
+    "dark"
+  ],
+  "homepage": "https://acsandmann.github.io/starlight-theme-apple/",
+  "bugs": {
+    "url": "https://github.com/acsandmann/starlight-theme-apple/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/acsandmann/starlight-theme-apple.git",
+    "directory": "packages/starlight-theme-apple"
+  },
+  "license": "MIT",
+  "author": "trueberryless <trueberryless@gmail.com> (https://felixs.dev)",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts",
+    "./styles.css": "./styles.css",
+    "./styles/*": "./styles/*"
+  },
+  "devDependencies": {
+    "@astrojs/starlight": "^0.41.7",
+    "astro": "^7.0.2"
+  },
+  "peerDependencies": {
+    "@astrojs/starlight": ">=0.38"
+  },
+  "engines": {
+    "node": ">=22.23.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/styles/base.css

@@ -0,0 +1,104 @@
+html {
+  scroll-padding-top: calc(var(--apple-header-height) + 1.5rem);
+  text-rendering: optimizeLegibility;
+}
+body {
+  background: var(--apple-background);
+  color: var(--apple-foreground);
+  font-family: var(--apple-font-sans);
+  font-size: 1.0625rem;
+  line-height: 1.4706;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+::selection {
+  background: color-mix(in srgb, var(--apple-link) 28%, transparent);
+}
+:focus-visible {
+  outline: 2px solid var(--apple-link);
+  outline-offset: 3px;
+}
+a {
+  transition:
+    color var(--apple-transition),
+    background-color var(--apple-transition),
+    border-color var(--apple-transition);
+}
+button,
+[role="button"],
+summary,
+input,
+select {
+  transition:
+    color var(--apple-transition),
+    background-color var(--apple-transition),
+    border-color var(--apple-transition),
+    box-shadow var(--apple-transition),
+    opacity var(--apple-transition),
+    transform 80ms ease;
+}
+button:active:not(:disabled),
+[role="button"]:active:not([aria-disabled="true"]) {
+  transform: scale(0.97);
+}
+:is(button, input, select, summary, a)[aria-disabled="true"],
+button:disabled,
+input:disabled,
+select:disabled {
+  cursor: not-allowed;
+  opacity: var(--apple-disabled-opacity);
+}
+.main-frame {
+  background: var(--apple-background);
+}
+.main-pane {
+  min-width: 0;
+}
+.main-pane main {
+  position: relative;
+}
+.content-panel {
+  padding-block: 0;
+}
+.content-panel + .content-panel,
+.main-pane > main > .content-panel:last-of-type {
+  border-top: 0;
+}
+.sl-container {
+  max-width: var(--apple-content-width);
+}
+.sl-banner {
+  max-width: var(--apple-content-width);
+  margin-block: 2rem 1rem;
+  margin-inline: var(--sl-content-pad-x);
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--apple-border);
+  border-radius: var(--apple-radius-sm);
+  background: var(--apple-surface);
+  box-shadow: none;
+  color: var(--apple-foreground);
+  text-align: start;
+}
+.sl-banner a {
+  color: var(--apple-link);
+}
+[data-has-sidebar] main:has(.sl-banner) {
+  display: grid;
+}
+@media (min-width: 72rem) {
+  .sl-banner {
+    margin-inline: auto;
+  }
+  [data-has-sidebar] .sl-banner {
+    justify-self: end;
+    margin-inline: var(--sl-content-pad-x);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/styles/code.css

@@ -0,0 +1,77 @@
+.sl-markdown-content :not(pre) > code:not(:where(.not-content *)) {
+  padding: 0.12em 0.32em;
+  border: 1px solid var(--apple-border-subtle);
+  border-radius: 0.22rem;
+  background: var(--apple-code-background);
+  color: var(--apple-foreground);
+  font-family: var(--apple-font-mono);
+  font-size: 0.88em;
+}
+.expressive-code {
+  --ec-brdRad: var(--apple-radius-sm);
+  --ec-brdWd: 1px;
+  margin-block: 1.5rem;
+}
+.expressive-code figure.frame {
+  box-shadow: none !important;
+}
+.sl-markdown-content .expressive-code .has-title {
+  --ec-uiPadBlk: 0.375rem;
+}
+.expressive-code .frame .header {
+  min-height: 2.2rem;
+  border-color: var(--apple-border-subtle) !important;
+  background: var(--apple-code-background) !important;
+}
+.sl-markdown-content .expressive-code .frame.is-terminal .header {
+  border-bottom: 1px solid var(--apple-border) !important;
+}
+.expressive-code .frame .title {
+  color: var(--apple-secondary-foreground) !important;
+  font-family: var(--apple-font-sans) !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+}
+.expressive-code pre {
+  border-color: var(--apple-border-subtle) !important;
+  background: var(--apple-code-background) !important;
+}
+.expressive-code pre code {
+  font-size: 0.9375rem !important;
+  line-height: 1.5625rem !important;
+}
+.expressive-code .copy button {
+  border-color: var(--apple-border) !important;
+  border-radius: var(--apple-radius-sm) !important;
+  background: var(--apple-surface-raised) !important;
+  color: var(--apple-secondary-foreground) !important;
+}
+.expressive-code .copy button:hover {
+  border-color: var(--apple-link) !important;
+  background: var(--apple-selection) !important;
+  color: var(--apple-link) !important;
+}
+.expressive-code .copy button:active,
+.expressive-code .copy button[data-copied] {
+  background: var(--apple-pressed) !important;
+  color: var(--apple-foreground) !important;
+}
+.sl-markdown-content starlight-file-tree {
+  border: 1px solid var(--apple-border-subtle);
+  border-radius: var(--apple-radius-sm);
+  background: var(--apple-code-background);
+}
+.sl-markdown-content
+  starlight-file-tree
+  .directory
+  > details
+  > summary:hover
+  ~ ul,
+.sl-markdown-content
+  starlight-file-tree
+  .directory
+  > details
+  > summary:focus-visible
+  ~ ul {
+  border-color: var(--apple-link);
+}