From 4bdaea9a2ac36f7480aa6d9ff3ead4f490695a16 Mon Sep 17 00:00:00 2001 From: Myriad-Dreamin <35292584+Myriad-Dreamin@users.noreply.github.com> Date: Fri, 3 Jul 2026 16:24:25 +0000 Subject: [PATCH 1/3] build: bump @preview/shiroa-starlight to 0.4.0 --- .../preview/shiroa-starlight/0.4.0/LICENSE | 201 ++++++++++++ .../preview/shiroa-starlight/0.4.0/README.md | 3 + .../shiroa-starlight/0.4.0/content-panel.typ | 34 ++ .../preview/shiroa-starlight/0.4.0/head.typ | 33 ++ .../preview/shiroa-starlight/0.4.0/html.typ | 3 + .../preview/shiroa-starlight/0.4.0/icons.typ | 39 +++ .../preview/shiroa-starlight/0.4.0/index.typ | 64 ++++ .../preview/shiroa-starlight/0.4.0/lib.typ | 120 +++++++ .../preview/shiroa-starlight/0.4.0/mod.typ | 22 ++ .../shiroa-starlight/0.4.0/page-header.typ | 82 +++++ .../shiroa-starlight/0.4.0/page-main.typ | 19 ++ .../0.4.0/page-right-sidebar.typ | 53 ++++ .../0.4.0/page-sidebar-mobile.typ | 52 ++++ .../shiroa-starlight/0.4.0/page-sidebar.typ | 191 ++++++++++++ .../preview/shiroa-starlight/0.4.0/page.typ | 131 ++++++++ .../0.4.0/site-search-results.typ | 32 ++ .../shiroa-starlight/0.4.0/site-search.typ | 17 + .../shiroa-starlight/0.4.0/social-icons.typ | 29 ++ .../shiroa-starlight/0.4.0/styles/asides.css | 51 +++ .../0.4.0/styles/markdown.css | 292 ++++++++++++++++++ .../shiroa-starlight/0.4.0/styles/props.css | 205 ++++++++++++ .../shiroa-starlight/0.4.0/styles/reset.css | 53 ++++ .../shiroa-starlight/0.4.0/styles/search.css | 78 +++++ .../shiroa-starlight/0.4.0/styles/utils.css | 67 ++++ .../0.4.0/table-of-contents-mobile.typ | 5 + .../0.4.0/table-of-contents.typ | 85 +++++ .../shiroa-starlight/0.4.0/theme-provider.typ | 5 + .../shiroa-starlight/0.4.0/theme-select.typ | 108 +++++++ .../preview/shiroa-starlight/0.4.0/typst.toml | 11 + 29 files changed, 2085 insertions(+) create mode 100644 packages/preview/shiroa-starlight/0.4.0/LICENSE create mode 100644 packages/preview/shiroa-starlight/0.4.0/README.md create mode 100644 packages/preview/shiroa-starlight/0.4.0/content-panel.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/head.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/html.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/icons.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/index.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/lib.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/mod.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/page-header.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/page-main.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/page-right-sidebar.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/page-sidebar-mobile.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/page-sidebar.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/page.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/site-search-results.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/site-search.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/social-icons.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/styles/asides.css create mode 100644 packages/preview/shiroa-starlight/0.4.0/styles/markdown.css create mode 100644 packages/preview/shiroa-starlight/0.4.0/styles/props.css create mode 100644 packages/preview/shiroa-starlight/0.4.0/styles/reset.css create mode 100644 packages/preview/shiroa-starlight/0.4.0/styles/search.css create mode 100644 packages/preview/shiroa-starlight/0.4.0/styles/utils.css create mode 100644 packages/preview/shiroa-starlight/0.4.0/table-of-contents-mobile.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/table-of-contents.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/theme-provider.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/theme-select.typ create mode 100644 packages/preview/shiroa-starlight/0.4.0/typst.toml diff --git a/packages/preview/shiroa-starlight/0.4.0/LICENSE b/packages/preview/shiroa-starlight/0.4.0/LICENSE new file mode 100644 index 0000000000..97b51d5fa6 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/LICENSE @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "{}" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright 2023-2025 Myriad Dreamin + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. \ No newline at end of file diff --git a/packages/preview/shiroa-starlight/0.4.0/README.md b/packages/preview/shiroa-starlight/0.4.0/README.md new file mode 100644 index 0000000000..cab42b5d5f --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/README.md @@ -0,0 +1,3 @@ +# Shiroa Starlight + +The starlight theme is a modern, responsive theme for [Shiroa](https://github.com/Myriad-Dreamin/shiroa/), inspired by the Astro Starlight. diff --git a/packages/preview/shiroa-starlight/0.4.0/content-panel.typ b/packages/preview/shiroa-starlight/0.4.0/content-panel.typ new file mode 100644 index 0000000000..dd62804bdb --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/content-panel.typ @@ -0,0 +1,34 @@ + +#import "mod.typ": * + +// --- + +#div.with(class: "content-panel")({ + div(class: "sl-container", virt-slot("body")) +}) + +#add-styles( + ```css + @layer starlight.core { + .content-panel { + padding: 1.5rem var(--sl-content-pad-x); + } + .content-panel + .content-panel { + border-top: 1px solid var(--sl-color-hairline); + } + .sl-container.content-panel { + max-width: var(--sl-content-width); + } + + .sl-container.content-panel > :global(* + *) { + margin-top: 1.5rem; + } + + @media (min-width: 72rem) { + .sl-container.content-panel { + margin-inline: var(--sl-content-margin-inline, auto); + } + } + } + ```, +) diff --git a/packages/preview/shiroa-starlight/0.4.0/head.typ b/packages/preview/shiroa-starlight/0.4.0/head.typ new file mode 100644 index 0000000000..9b865b90a6 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/head.typ @@ -0,0 +1,33 @@ + +#import "mod.typ": * + +#let is-debug = false; + +// --- + +#head({ + meta(charset: "utf-8") + meta( + name: "viewport", + content: "width=device-width, initial-scale=1.0", + ) + virt-slot("sa:head-meta") + meta(name: "generator", content: "Shiroa") + + inline-assets(context ( + ```css @layer starlight.base, starlight.reset, starlight.core, starlight.content, starlight.components, starlight.utils;```, + raw(lang: "css", read("styles/props.css")), + raw(lang: "css", read("styles/reset.css")), + raw(lang: "css", read("styles/asides.css")), + raw(lang: "css", read("styles/markdown.css")), + raw(lang: "css", read("styles/utils.css")), + if is-debug { + raw(lang: "js", read("/assets/artifacts/elasticlunr.min.js")) + raw(lang: "js", read("/assets/artifacts/mark.min.js")) + raw(lang: "js", read("/assets/artifacts/searcher.js")) + }, + ..shiroa-assets.final().values(), + ).join()) + virt-slot("sl:book-meta") + include "theme-provider.typ" +}) diff --git a/packages/preview/shiroa-starlight/0.4.0/html.typ b/packages/preview/shiroa-starlight/0.4.0/html.typ new file mode 100644 index 0000000000..722b84c5e5 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/html.typ @@ -0,0 +1,3 @@ +#import "@preview/shiroa:0.4.0": html-support +#import html-support: * +#import supports-html-internal: * diff --git a/packages/preview/shiroa-starlight/0.4.0/icons.typ b/packages/preview/shiroa-starlight/0.4.0/icons.typ new file mode 100644 index 0000000000..b220f042ff --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/icons.typ @@ -0,0 +1,39 @@ +/// Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. + +#let viewbox = ( + sun: "0 0 512 512", + search: "0 0 512 512", + moon: "0 0 384 512", + cross-mark: "0 0 384 512", + menu: "0 0 448 512", +) +#let icons = ( + download: "M8.29 13.29a1 1 0 0 0 0 1.42l3 3a1 1 0 0 0 1.42 0l3-3a1 1 0 0 0-1.42-1.42L13 14.59V3a1 1 0 0 0-2 0v11.59l-1.29-1.3a1 1 0 0 0-1.42 0ZM18 9h-2a1 1 0 0 0 0 2h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h2a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-7a3 3 0 0 0-3-3Z", + github: "M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z", + gitlab: "m22.63 9.8-.03-.09-3-7.81a.78.78 0 0 0-.76-.5.8.8 0 0 0-.46.18.8.8 0 0 0-.26.4L16.1 8.17H7.9l-2-6.19a.79.79 0 0 0-1.5-.08l-3 7.81-.02.08a5.56 5.56 0 0 0 1.84 6.43h.01l.03.02 4.56 3.42 2.26 1.7 1.37 1.05a.92.92 0 0 0 1.12 0l1.38-1.04 2.25-1.71 4.6-3.44a5.56 5.56 0 0 0 1.84-6.43Z", + discord: "M20.32 4.37a19.8 19.8 0 0 0-4.93-1.51 13.78 13.78 0 0 0-.64 1.28 18.27 18.27 0 0 0-5.5 0 12.64 12.64 0 0 0-.64-1.28h-.05A19.74 19.74 0 0 0 3.64 4.4 20.26 20.26 0 0 0 .11 18.09l.02.02a19.9 19.9 0 0 0 6.04 3.03l.04-.02a14.24 14.24 0 0 0 1.23-2.03.08.08 0 0 0-.05-.07 13.1 13.1 0 0 1-1.9-.92.08.08 0 0 1 .02-.1 10.2 10.2 0 0 0 .41-.31h.04a14.2 14.2 0 0 0 12.1 0l.04.01a9.63 9.63 0 0 0 .4.32.08.08 0 0 1-.03.1 12.29 12.29 0 0 1-1.9.91.08.08 0 0 0-.02.1 15.97 15.97 0 0 0 1.27 2.01h.04a19.84 19.84 0 0 0 6.03-3.05v-.03a20.12 20.12 0 0 0-3.57-13.69ZM8.02 15.33c-1.18 0-2.16-1.08-2.16-2.42 0-1.33.96-2.42 2.16-2.42 1.21 0 2.18 1.1 2.16 2.42 0 1.34-.96 2.42-2.16 2.42Zm7.97 0c-1.18 0-2.15-1.08-2.15-2.42 0-1.33.95-2.42 2.15-2.42 1.22 0 2.18 1.1 2.16 2.42 0 1.34-.94 2.42-2.16 2.42Z", + sun: "M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z", + moon: "M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z", + search: "M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z", + right-caret: "m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z", + anchor: "m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z", + menu: "M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z", + cross-mark: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z", +) + +#let builtin-icon(name, class: none) = { + html.elem( + "svg", + attrs: ( + ..(if class != none { (class: class) }), + aria-hidden: "true", + width: "16", + height: "16", + style: "width: 1em; height: 1em", + viewBox: viewbox.at(name, default: "0 0 24 24"), + fill: "currentColor", + ), + )[ + #html.elem("path", attrs: (d: icons.at(name, default: ""))) + ] +} diff --git a/packages/preview/shiroa-starlight/0.4.0/index.typ b/packages/preview/shiroa-starlight/0.4.0/index.typ new file mode 100644 index 0000000000..9fec56f482 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/index.typ @@ -0,0 +1,64 @@ + +#import "mod.typ": * + +#let cssList = (); + +// --- + +#h.html.with( + lang: "en", + dir: "ltr", + data-has-sidebar: "", + data-has-toc: "", +)({ + include "head.typ" + h.body({ + include "page.typ" + }) +}) + +#add-styles( + ```css + @layer starlight.core { + .main-pane { + isolation: isolate; + } + + @media (min-width: 72rem) { + .right-sidebar-container { + order: 2; + position: relative; + width: calc( + var(--sl-sidebar-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2 + ); + } + + .right-sidebar { + position: fixed; + top: 0; + border-inline-start: 1px solid var(--sl-color-hairline); + padding-top: var(--sl-nav-height); + width: 100%; + height: 100vh; + overflow-y: auto; + scrollbar-width: none; + } + + .main-pane { + width: 100%; + } + + :root[data-has-sidebar][data-has-toc] .main-pane { + --sl-content-margin-inline: auto 0; + + order: 1; + width: calc( + var(--sl-content-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2 + ); + } + } + } + ```, +) + +// todo: global([data-has-sidebar][data-has-toc]) v.s. :root[data-has-sidebar][data-has-toc] diff --git a/packages/preview/shiroa-starlight/0.4.0/lib.typ b/packages/preview/shiroa-starlight/0.4.0/lib.typ new file mode 100644 index 0000000000..c5e91f558e --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/lib.typ @@ -0,0 +1,120 @@ + +#import "mod.typ": set-slot +#import "page-header.typ": right-group-item +#import "icons.typ": builtin-icon + +#let social-links( + github: none, + discord: none, +) = { + if github != none { ((href: github, label: "GitHub", icon: "github"),) } + if discord != none { ((href: discord, label: "Discord", icon: "discord"),) } +} + +#let title-text(it) = { + import "@preview/shiroa:0.4.0": plain-text + if it == none { + "" + } else { + plain-text(it).trim() + } +} + +#let default-meta-title(title, site-title) = { + let title = title-text(title) + let site-title = title-text(site-title) + if title != "" and site-title != "" { + title-text([#title -- #site-title]) + } else if title != "" { + title + } else if site-title != "" { + site-title + } else { + "" + } +} + +#let book-site-title(it) = { + let title = "" + if it != none { + if "raw-title" in it { + title = if it.raw-title == none { "" } else { it.raw-title } + } else if "title" in it { + title = if type(it.title) == str { + it.title + } else { + it.title.content + } + } + } + title +} + +#let starlight( + book, + body, + title: "", + description: none, + plain-body: auto, + enable-search: true, + extra-assets: (), + meta-title: default-meta-title, + social-links: social-links, + social-icons: { + import "social-icons.typ": social-icons + social-icons + }, + right-group: none, +) = { + import "@preview/shiroa:0.4.0": get-book-meta, is-html-target, paged-load-trampoline, plain-text, prepare-description, x-current, x-target + import "html.typ": inline-assets, meta, span + import "mod.typ": replace-raw + + if not is-html-target() { + panic( + "Starlight theme is only available with `--mode=static-html`. Either change theme to mdbook or turn mode into `static-html`.", + ) + return body + } + + let trampoline = paged-load-trampoline() + let plain-body = if plain-body == auto { body } else { plain-body } + let description = prepare-description(description, plain-body: plain-body) + + let site-title() = get-book-meta(mapper: book-site-title) + + let default-right-group() = get-book-meta(mapper: it => if it != none { + let github-link = it.at("repository", default: none) + let discord-link = it.at("discord", default: none) + + right-group-item(class: "social-icons", social-icons(social-links(github: github-link, discord: discord-link))) + right-group-item(include "theme-select.typ") + right-group-item(class: "md:sl-hidden", include "page-sidebar-mobile.typ") + }) + + show: set-slot("sa:head-meta", { + // + get-book-meta(mapper: it => { + let resolved-site-title = book-site-title(it) + html.elem("title", plain-text(meta-title(title, resolved-site-title)).trim()) + }) + // + if description != none { meta(name: "description", content: description) } + }) + + show: set-slot("main-title", html.elem("h1", title)) + // todo: determine a good name of html wrapper + show: set-slot("main-content", if x-target.starts-with("html-wrapper") { trampoline } else { body }) + + show: set-slot("header", include "page-header.typ") + show: set-slot("site-title", context span(class: "site-title", site-title())) + show: set-slot("sl:book-meta", book + inline-assets(extra-assets.join())) + show: set-slot("sl:search", if enable-search { include "site-search.typ" }) + show: set-slot("sl:search-results", if enable-search { include "site-search-results.typ" }) + show: set-slot("sl:right-group", if right-group != none { right-group } else { default-right-group() }) + + // div(class: "sl-flex social-icons", virt-slot("social-icons")), + // // virt-slot("theme-select"), + // // virt-slot("language-select"), + include "index.typ" +} diff --git a/packages/preview/shiroa-starlight/0.4.0/mod.typ b/packages/preview/shiroa-starlight/0.4.0/mod.typ new file mode 100644 index 0000000000..33a67ce5bf --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/mod.typ @@ -0,0 +1,22 @@ + + +#import "html.typ": * +#import "@preview/shiroa:0.4.0": plain-text, templates +#import templates: get-label-disambiguator, label-disambiguator, make-unique-label, static-heading-link + +#let has-toc = true; + +#let replace-raw(it, vars: (:)) = { + raw( + lang: it.lang, + { + let body = it.text + + for (key, value) in vars.pairs() { + body = body.replace("{{ " + key + " }}", value) + } + + body + }, + ) +} diff --git a/packages/preview/shiroa-starlight/0.4.0/page-header.typ b/packages/preview/shiroa-starlight/0.4.0/page-header.typ new file mode 100644 index 0000000000..88112fcf3d --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/page-header.typ @@ -0,0 +1,82 @@ + +#import "mod.typ": * + +#let right-group-item(body, class: none) = div(class: if class != none { class + " " } + "right-group sl-flex", body) + +// --- + +#div.with(class: "header")({ + div(class: "title-wrapper sl-flex", virt-slot("site-title")) + div(class: "sl-flex", virt-slot("sl:search")) + div(class: "sl-flex", virt-slot("sl:right-group")) +}) + +#add-styles( + ```css + @layer starlight.core { + .header { + display: flex; + gap: var(--sl-nav-gap); + justify-content: space-between; + align-items: center; + height: 100%; + } + + .title-wrapper { + /* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */ + overflow: clip; + /* Avoid clipping focus ring around link inside title wrapper. */ + padding: 0.25rem; + margin: -0.25rem; + min-width: 0; + } + + .right-group, + .social-icons { + align-items: center; + } + .social-icons { + gap: 1rem; + } + .right-group + + .right-group::before { + content: ''; + margin: 0 0.7rem; + height: 2rem; + border-inline-end: 1px solid var(--sl-color-gray-5); + } + + @media (min-width: 50rem) { + :global(:root[data-has-sidebar]) { + --__sidebar-pad: calc(2 * var(--sl-nav-pad-x)); + } + :global(:root:not([data-has-toc])) { + --__toc-width: 0rem; + } + .header { + --__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x)); + --__main-column-fr: calc( + ( + 100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) - + (2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) - + var(--sl-content-width) + ) / 2 + ); + display: grid; + grid-template-columns: + /* 1 (site title): runs up until the main content column’s left edge or the width of the title, whichever is the largest */ + minmax( + calc(var(--__sidebar-width) + max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))), + auto + ) + /* 2 (search box): all free space that is available. */ + 1fr + /* 3 (right items): use the space that these need. */ + auto; + align-content: center; + } + } + } + ```, +) + diff --git a/packages/preview/shiroa-starlight/0.4.0/page-main.typ b/packages/preview/shiroa-starlight/0.4.0/page-main.typ new file mode 100644 index 0000000000..165ed38b66 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/page-main.typ @@ -0,0 +1,19 @@ + +#import "mod.typ": * + +// --- + +#main({ + div({ + // banner + virt-slot("sl:search-results") + { + show: set-slot("body", div(class: "sl-markdown-content", virt-slot("main-title"))) + include "content-panel.typ" + } + { + show: set-slot("body", div(class: "sl-markdown-content", virt-slot("main-content"))) + include "content-panel.typ" + } + }) +}) diff --git a/packages/preview/shiroa-starlight/0.4.0/page-right-sidebar.typ b/packages/preview/shiroa-starlight/0.4.0/page-right-sidebar.typ new file mode 100644 index 0000000000..daf877ace8 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/page-right-sidebar.typ @@ -0,0 +1,53 @@ + +#import "mod.typ": * + +// --- + +#div.with(class: "lg:sl-hidden")({ + if has-toc { + include "table-of-contents-mobile.typ" + } +}) +#div.with(class: "right-sidebar-panel sl-hidden lg:sl-block")({ + div.with(class: "sl-container page-sidebar")({ + if has-toc { + // data-min-h={toc.minHeadingLevel} data-max-h={toc.maxHeadingLevel} + h2(id: "starlight__on-this-page")[On this page] + // + include "table-of-contents.typ" + } + }) +}) + +#add-styles( + ```css + @layer starlight.core { + .sl-container.page-sidebar { + width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x)); + } + .right-sidebar-panel { + padding: 1rem var(--sl-sidebar-pad-x); + } + .right-sidebar-panel h2 { + color: var(--sl-color-white); + font-size: var(--sl-text-h5); + font-weight: 600; + line-height: var(--sl-line-height-headings); + margin: 0; + margin-bottom: 0.5rem; + } + @media (min-width: 72rem) { + .sl-container.page-sidebar { + max-width: calc( + ( + ( + 100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) - 2 * + var(--sl-sidebar-pad-x) + ) * 0.25 /* MAGIC NUMBER 🥲 */ + ) + ); + } + } + } + ```, +) diff --git a/packages/preview/shiroa-starlight/0.4.0/page-sidebar-mobile.typ b/packages/preview/shiroa-starlight/0.4.0/page-sidebar-mobile.typ new file mode 100644 index 0000000000..41629f3266 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/page-sidebar-mobile.typ @@ -0,0 +1,52 @@ +#import "mod.typ": * + +#import "icons.typ": builtin-icon + +#let links = ( + (id: "open", label: "Open Sidebar Menu", icon: "menu"), + (id: "close", label: "Close Sidebar Menu", icon: "cross-mark"), +) + +// --- + +#div( + id: "sidebar-mobile-toggle", + aria-controls: "starlight__sidebar", + aria-expanded: "false", +)[ + #for (id: id, label: theme-label, icon: icon) in links { + button.with( + id: "sidebar-" + id, + class: "sl-flex sidebar-toggle-button", + onclick: "this.parentElement.setAttribute('aria-expanded', " + + if id == "open" { "'true'" } else { "'false'" } + + "); document.body.toggleAttribute('data-mobile-menu-expanded', " + + if id == "open" { "true" } else { "false" } + + ");", + )({ + span(class: "sr-only", theme-label) + if type(icon) == str { builtin-icon(icon) } else { icon } + }) + } +] + +#add-styles( + ```css + #sidebar-mobile-toggle[aria-expanded="true"] #sidebar-open { + display: none; + } + #sidebar-mobile-toggle[aria-expanded="false"] #sidebar-close { + display: none; + } + + .sidebar-toggle-button { + background: none; + border: none; + padding: 0.5em; + margin: -0.2em; + } + .sidebar-toggle-button:hover { + opacity: 0.66; + } + ```, +) diff --git a/packages/preview/shiroa-starlight/0.4.0/page-sidebar.typ b/packages/preview/shiroa-starlight/0.4.0/page-sidebar.typ new file mode 100644 index 0000000000..356a5d8f59 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/page-sidebar.typ @@ -0,0 +1,191 @@ + +#import "mod.typ": * +#import "icons.typ": builtin-icon +#import "@preview/shiroa:0.4.0": cross-link-path-label, get-book-meta, x-url-base + +#let render-sidebar(summary-items, visit) = { + let part = none + let items = () + for summary-item in summary-items { + if summary-item.kind == "chapter" { + let v = none + + let link = summary-item.link + if link != none { + items.push( + visit.at("inc")("/" + link, { + if "raw-title" in summary-item { + summary-item.raw-title + } else { + summary-item.title.content + } + }), + ) + } + + if "sub" in summary-item { + items.push(visit.at("sub")(render-sidebar(summary-item.sub, visit))) + } + } else if summary-item.kind == "part" { + // todo: more than plain text + + if part != none or items.len() > 0 { + visit.at("part")(part, items) + } + + part = summary-item.at("title").at("content") + items = () + } else if summary-item.kind == "partbreak" { + if part != none or items.len() > 0 { + visit.at("part")(part, items) + } + + part = none + items = () + } else { + // repr(x) + } + } + + + if part != none or items.len() > 0 { + visit.at("part")(part, items) + } +} + +#let cross-link2(current, dest, it) = { + // todo: url-base + let aria-current = if dest == current { + (aria-current: "page") + } else { + (:) + } + + assert( + type(it) == str or type(it) == content, + message: "invalid type of sidebar item, want str or content, got " + repr(it), + ) + + + let dest = cross-link-path-label(dest) + if dest.starts-with("/") { + dest = dest.slice(1) + } + dest = x-url-base + dest + + a(..aria-current, href: dest, it) +} + +#let onclick = ```js +this.parentElement.classList.toggle("open"); +``` + +// --- + +#let current = sys.inputs.at("x-current", default: none) +#context { + let book-meta = query().at(0, default: none) + if book-meta != none { + let sm = book-meta.value.summary + + let styles = ( + inc: (link, it) => cross-link2(current, link, it), + sub: it => li(ol(it)), + part: (part, items) => if part != none { + li(class: "sidebar-part open", { + div.with(class: "sidebar-part-header", onclick: "javascript:" + onclick.text)({ + div(class: "sidebar-part-title", span(part)) + builtin-icon("right-caret", class: "sidebar-part-caret") + }) + ol(class: "sidebar-part-chapters", items.sum(default: [])) + }) + } else { + items.sum(default: []) + }, + ) + + ul(render-sidebar(sm, styles)) + } +} + +#add-styles( + ```css + .sidebar-content { + --sl-sidebar-item-padding-inline: 0.5rem; + } + .sidebar-content ul > li { + padding: 0; + } + .sidebar-content .sidebar-part li { + margin-inline-start: var(--sl-sidebar-item-padding-inline); + border-inline-start: 1px solid var(--sl-color-hairline-light); + padding-inline-start: var(--sl-sidebar-item-padding-inline); + } + + .sidebar-part-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: .2em var(--sl-sidebar-item-padding-inline); + background-color: var(--sl-color-gray-7); + line-height: 1.4; + cursor: pointer; + } + + .sidebar-part-caret { + transition: transform 0.2s ease-in-out; + flex-shrink: 0; + font-size: 1.25rem; + } + .sidebar-part.open > .sidebar-part-header .sidebar-part-caret { + transform: rotateZ(90deg); + } + .sidebar-part.open > .sidebar-part-chapters { + display: block; + } + .sidebar-part-chapters { + display: none; + } + + .sidebar-content ul, .sidebar-content ol { + list-style: none; + padding: 0; + } + .sidebar-content li { + overflow-wrap: anywhere; + } + + li.sidebar-part { + margin-top: 0.5rem; + padding: .2em var(--sl-sidebar-item-padding-inline); + } + + .sidebar-part-title { + font-weight: 600; + color: var(--sl-color-white); + } + + .sidebar-content a { + font-size: var(--sl-text-sm); + display:block; + border-radius: .25rem; + text-decoration: none; + color: var(--sl-color-gray-2); + padding: .3em var(--sl-sidebar-item-padding-inline); + line-height: 1.4 + } + + .sidebar-content a:hover, + .sidebar-content a:focus { + color: var(--sl-color-white); + } + + .sidebar-content a[aria-current='page'], + .sidebar-content a[aria-current='page']:hover, + .sidebar-content a[aria-current='page']:focus { + font-weight: 600; + color: var(--sl-color-text-invert); + background-color: var(--sl-color-text-accent); + } + ```, +) diff --git a/packages/preview/shiroa-starlight/0.4.0/page.typ b/packages/preview/shiroa-starlight/0.4.0/page.typ new file mode 100644 index 0000000000..ae59cc4b43 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/page.typ @@ -0,0 +1,131 @@ + +#import "mod.typ": * + +// --- + +#div({ + header(class: "header", virt-slot("header")) + nav.with(class: "sidebar")({ + div.with(id: "starlight__sidebar", class: "sidebar-pane")({ + div(class: "sidebar-content sl-flex", include "page-sidebar.typ") + }) + }) + div(class: "main-frame", div.with(class: "lg:sl-flex")({ + { + if has-toc { + h.aside.with( + class: "right-sidebar-container", + data-has-toc: "", + )({ + div.with(class: "right-sidebar")({ + include "page-right-sidebar.typ" + }) + }) + } + + div(class: "main-pane", include "page-main.typ") + } + })) +}) + +#add-styles( + ```css + html:not([data-has-toc]) { + --sl-mobile-toc-height: 0rem; + } + html:not([data-has-sidebar]) { + --sl-content-width: 67.5rem; + } + /* Add scroll padding to ensure anchor headings aren't obscured by nav */ + html { + /* Additional padding is needed to account for the mobile TOC */ + scroll-padding-top: calc(1.5rem + var(--sl-nav-height) + var(--sl-mobile-toc-height)); + } + main { + padding-bottom: 3vh; + } + @media (min-width: 50em) { + [data-has-sidebar] { + --sl-content-inline-start: var(--sl-sidebar-width); + } + } + @media (min-width: 72em) { + html { + scroll-padding-top: calc(1.5rem + var(--sl-nav-height)); + } + } + + @layer starlight.core { + .page { + flex-direction: column; + min-height: 100vh; + } + + .header { + z-index: var(--sl-z-index-navbar); + position: fixed; + inset-inline-start: 0; + inset-block-start: 0; + width: 100%; + height: var(--sl-nav-height); + border-bottom: 1px solid var(--sl-color-hairline-shade); + padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x); + padding-inline-end: var(--sl-nav-pad-x); + background-color: var(--sl-color-bg-nav); + } + + :global([data-has-sidebar]) .header { + padding-inline-end: calc( + var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size) + ); + } + + .sidebar-pane { + visibility: var(--sl-sidebar-visibility, hidden); + position: fixed; + z-index: var(--sl-z-index-menu); + inset-block: var(--sl-nav-height) 0; + inset-inline-start: 0; + width: 100%; + background-color: var(--sl-color-black); + overflow-y: auto; + } + + [data-mobile-menu-expanded] .sidebar-pane { + --sl-sidebar-visibility: visible; + } + + .sidebar-content { + height: 100%; + min-height: max-content; + padding: 1rem var(--sl-sidebar-pad-x) 0; + flex-direction: column; + gap: 1rem; + } + + @media (min-width: 50rem) { + .sidebar-content::after { + content: ''; + padding-bottom: 1px; + } + } + + .main-frame { + padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height)); + padding-inline-start: var(--sl-content-inline-start); + } + + @media (min-width: 50rem) { + :global([data-has-sidebar]) .header { + padding-inline-end: var(--sl-nav-pad-x); + } + .sidebar-pane { + --sl-sidebar-visibility: visible; + width: var(--sl-sidebar-width); + background-color: var(--sl-color-bg-sidebar); + border-inline-end: 1px solid var(--sl-color-hairline-shade); + } + } + } + ```, +) diff --git a/packages/preview/shiroa-starlight/0.4.0/site-search-results.typ b/packages/preview/shiroa-starlight/0.4.0/site-search-results.typ new file mode 100644 index 0000000000..1eff83031c --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/site-search-results.typ @@ -0,0 +1,32 @@ + +#import "mod.typ": * +#import "@preview/shiroa:0.4.0": x-url-base + +// --- + +#add-styles(raw(lang: "css", read("styles/search.css"))) +#inline-assets(raw(lang: "js", { + "window.path_to_root = " + json.encode(x-url-base) +})) + +#div.with(id: "search-wrapper", class: "hidden")({ + form.with(id: "searchbar-outer", class: "searchbar-outer")({ + input( + type: "search", + id: "searchbar", + name: "searchbar", + placeholder: "Search this book ...", + aria_controls: "searchresults-outer", + aria_describedby: "searchresults-header", + )[] + }) + div.with(id: "searchresults-outer", class: "searchresults-outer hidden")({ + div(id: "searchresults-header", class: "searchresults-header")[] + ul(id: "searchresults")[] + }) +}) + +#script(src: { x-url-base + "internal/elasticlunr.min.js" })[] +#script(src: { x-url-base + "internal/mark.min.js" })[] +#script(src: { x-url-base + "internal/searcher.js" })[] diff --git a/packages/preview/shiroa-starlight/0.4.0/site-search.typ b/packages/preview/shiroa-starlight/0.4.0/site-search.typ new file mode 100644 index 0000000000..a2ef3606f3 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/site-search.typ @@ -0,0 +1,17 @@ + +#import "mod.typ": * +#import "icons.typ": builtin-icon + +// --- + +#button( + id: "search-toggle", + class: "sl-flex theme-button", + aria-expanded: "false", + aria-keyshortcuts: "S", + aria-controls: "searchbar", + { + span(class: "sr-only", "Toggle Searchbar") + builtin-icon("search") + }, +) diff --git a/packages/preview/shiroa-starlight/0.4.0/social-icons.typ b/packages/preview/shiroa-starlight/0.4.0/social-icons.typ new file mode 100644 index 0000000000..16a33f3f5d --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/social-icons.typ @@ -0,0 +1,29 @@ + +#import "mod.typ": * + +#let social-icons(links) = { + import "icons.typ": builtin-icon + // --- + + for (href: href, label: link-label, icon: icon) in links { + a.with(href: href, rel: "me", class: "sl-flex social-icon")({ + span(class: "sr-only", link-label) + if type(icon) == str { builtin-icon(icon) } else { icon } + }) + } + + add-styles.with(cond: links.len() > 0)( + ```css + @layer starlight.core { + a.social-icon { + color: var(--sl-color-text-accent); + padding: 0.5em; + margin: -0.5em; + } + a.social-icon:hover { + opacity: 0.66; + } + } + ```, + ) +} diff --git a/packages/preview/shiroa-starlight/0.4.0/styles/asides.css b/packages/preview/shiroa-starlight/0.4.0/styles/asides.css new file mode 100644 index 0000000000..d2b234b150 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/styles/asides.css @@ -0,0 +1,51 @@ +@layer starlight.components { + .starlight-aside { + padding: 1rem; + border-inline-start: 0.25rem solid var(--sl-color-asides-border); + color: var(--sl-color-white); + } + .starlight-aside--note { + --sl-color-asides-text-accent: var(--sl-color-blue-high); + --sl-color-asides-border: var(--sl-color-blue); + background-color: var(--sl-color-blue-low); + } + .starlight-aside--tip { + --sl-color-asides-text-accent: var(--sl-color-purple-high); + --sl-color-asides-border: var(--sl-color-purple); + background-color: var(--sl-color-purple-low); + } + .starlight-aside--caution { + --sl-color-asides-text-accent: var(--sl-color-orange-high); + --sl-color-asides-border: var(--sl-color-orange); + background-color: var(--sl-color-orange-low); + } + .starlight-aside--danger { + --sl-color-asides-text-accent: var(--sl-color-red-high); + --sl-color-asides-border: var(--sl-color-red); + background-color: var(--sl-color-red-low); + } + + .starlight-aside__title { + display: flex; + gap: 0.5rem; + align-items: center; + font-size: var(--sl-text-h5); + font-weight: 600; + line-height: var(--sl-line-height-headings); + color: var(--sl-color-asides-text-accent); + } + + .starlight-aside__icon { + font-size: 1.333em; + width: 1em; + height: 1em; + } + + .starlight-aside__title + .starlight-aside__content { + margin-top: 0.5rem; + } + + .starlight-aside__content a { + color: var(--sl-color-asides-text-accent); + } +} \ No newline at end of file diff --git a/packages/preview/shiroa-starlight/0.4.0/styles/markdown.css b/packages/preview/shiroa-starlight/0.4.0/styles/markdown.css new file mode 100644 index 0000000000..4f77ce5162 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/styles/markdown.css @@ -0,0 +1,292 @@ +@layer starlight.content { + .sl-markdown-content .sl-heading-wrapper { + display: flex; + --sl-anchor-icon-size: .8275em; + --sl-anchor-icon-gap: .25em; + --sl-anchor-icon-space: calc(var(--sl-anchor-icon-size) + var(--sl-anchor-icon-gap)); + line-height: var(--sl-line-height-headings) + } + + .sl-markdown-content .sl-heading-wrapper.level-h1 { + font-size: var(--sl-text-h1) + } + .sl-markdown-content .sl-heading-wrapper.level-h2 { + font-size: var(--sl-text-h2) + } + .sl-markdown-content .sl-heading-wrapper.level-h3 { + font-size: var(--sl-text-h3) + } + .sl-markdown-content .sl-heading-wrapper.level-h4 { + font-size: var(--sl-text-h4) + } + .sl-markdown-content .sl-heading-wrapper.level-h5 { + font-size: var(--sl-text-h5) + } + .sl-markdown-content .sl-heading-wrapper.level-h6 { + font-size: var(--sl-text-h6) + } + + .sl-heading-anchor { + padding-left: 0.5rem; + } + + .sl-heading-wrapper .sl-heading-anchor a { + opacity: 0%; + } + + .sl-heading-wrapper a:target, + .sl-heading-wrapper:hover .sl-heading-anchor a { + opacity: 100%; + } + + .sl-markdown-content li + li:not(:where(.not-content *)), + .sl-markdown-content dt + dt:not(:where(.not-content *)), + .sl-markdown-content dt + dd:not(:where(.not-content *)), + .sl-markdown-content dd + dd:not(:where(.not-content *)) { + margin-block-start: 0.25rem; + } + + /* Headings after non-headings have more spacing. */ + .sl-markdown-content + :is(h1, h2, h3, h4, h5, h6, .sl-heading-wrapper) + + :is(h1, h2, h3, h4, h5, h6, .sl-heading-wrapper):not(.not-content):not(:where(.not-content *)) { + margin-top: 0.5em; + } + + .sl-markdown-content li:not(:where(.not-content *)) { + overflow-wrap: anywhere; + } + + .sl-markdown-content + li + > :is( + :last-child:not( + li, + ul, + ol, + a, + strong, + em, + del, + span, + input, + code, + br, + script, + :where(.not-content *) + ), + /** + * For list items ending with 1 or multiple script elements (`:has(~ script:last-child)`), we + * need to style the last non-script element (`:not(script)`) that doesn't have a subsequent + * sibling that is not a script (`:not(:has(~ :not(script)))`). + */ + :not(script):has(~ script:last-child):not(:has(~ :not(script))) + ) { + margin-bottom: 1.25rem; + } + + .sl-markdown-content dt:not(:where(.not-content *)) { + font-weight: 700; + } + .sl-markdown-content dd:not(:where(.not-content *)) { + padding-inline-start: 1rem; + } + + .sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) { + color: var(--sl-color-white); + line-height: var(--sl-line-height-headings); + font-weight: 600; + } + + .sl-markdown-content :is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *)) { + display: block; + max-width: 100%; + height: auto; + } + + .sl-markdown-content h1:not(:where(.not-content *)) { + font-size: var(--sl-text-h1); + } + .sl-markdown-content h2:not(:where(.not-content *)) { + font-size: var(--sl-text-h2); + } + .sl-markdown-content h3:not(:where(.not-content *)) { + font-size: var(--sl-text-h3); + } + .sl-markdown-content h4:not(:where(.not-content *)) { + font-size: var(--sl-text-h4); + } + .sl-markdown-content h5:not(:where(.not-content *)) { + font-size: var(--sl-text-h5); + } + .sl-markdown-content h6:not(:where(.not-content *)) { + font-size: var(--sl-text-h6); + } + + .sl-markdown-content a:not(:where(.not-content *)) { + color: var(--sl-color-text-accent); + } + .sl-markdown-content a:hover:not(:where(.not-content *)) { + color: var(--sl-color-white); + } + + .sl-markdown-content code:not(:where(.not-content *)) { + background-color: var(--sl-color-bg-inline-code); + margin-block: -0.125rem; + padding: 0.125rem 0.375rem; + font-size: var(--sl-text-code-sm); + } + .sl-markdown-content :is(h1, h2, h3, h4, h5, h6) code { + font-size: inherit; + } + + .sl-markdown-content pre:not(:where(.not-content *)) { + font-size: var(--sl-text-code); + tab-size: 2; + } + + .sl-markdown-content pre code:not(:where(.not-content *)) { + all: unset; + font-family: var(--__sl-font-mono); + } + + .sl-markdown-content blockquote:not(:where(.not-content *)) { + border-inline-start: 1px solid var(--sl-color-gray-5); + padding-inline-start: 1rem; + } + + /* Table styling */ + .sl-markdown-content table:not(:where(.not-content *)) { + display: block; + overflow: auto; + border-spacing: 0; + } + .sl-markdown-content :is(th, td):not(:where(.not-content *)) { + border-bottom: 1px solid var(--sl-color-gray-5); + padding: 0.5rem 1rem; + /* Align text to the top of the row in multiline tables. */ + vertical-align: baseline; + } + .sl-markdown-content :is(th:first-child, td:first-child):not(:where(.not-content *)) { + padding-inline-start: 0; + } + .sl-markdown-content :is(th:last-child, td:last-child):not(:where(.not-content *)) { + padding-inline-end: 0; + } + .sl-markdown-content th:not(:where(.not-content *)) { + color: var(--sl-color-white); + font-weight: 600; + } + /* Align headings to the start of the line unless set by the `align` attribute. */ + .sl-markdown-content th:not([align]):not(:where(.not-content *)) { + text-align: start; + } + /* s,
s, and
s inside asides */ + .sl-markdown-content .starlight-aside :is(th, td, hr, blockquote):not(:where(.not-content *)) { + border-color: var(--sl-color-gray-4); + } + @supports ( + border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 30%, transparent) + ) { + .sl-markdown-content .starlight-aside :is(th, td, hr, blockquote):not(:where(.not-content *)) { + border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 30%, transparent); + } + } + + /* inside asides */ + @supports ( + border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent) + ) { + .sl-markdown-content .starlight-aside code:not(:where(.not-content *)) { + background-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent); + } + } + + .sl-markdown-content hr:not(:where(.not-content *)) { + border: 0; + border-bottom: 1px solid var(--sl-color-hairline); + } + + /*
and styles */ + .sl-markdown-content details:not(:where(.not-content *)) { + --sl-details-border-color: var(--sl-color-gray-5); + --sl-details-border-color--hover: var(--sl-color-text-accent); + + border-inline-start: 2px solid var(--sl-details-border-color); + padding-inline-start: 1rem; + } + .sl-markdown-content details:not([open]):hover:not(:where(.not-content *)), + .sl-markdown-content details:has(> summary:hover):not(:where(.not-content *)) { + border-color: var(--sl-details-border-color--hover); + } + .sl-markdown-content summary:not(:where(.not-content *)) { + color: var(--sl-color-white); + cursor: pointer; + display: block; /* Needed to hide the default marker in some browsers. */ + font-weight: 600; + /* Expand the outline so that the marker cannot distort it. */ + margin-inline-start: -0.5rem; + padding-inline-start: 0.5rem; + } + .sl-markdown-content details[open] > summary:not(:where(.not-content *)) { + margin-bottom: 1rem; + } + + /* marker styles */ + .sl-markdown-content summary:not(:where(.not-content *))::marker, + .sl-markdown-content summary:not(:where(.not-content *))::-webkit-details-marker { + display: none; + } + .sl-markdown-content summary:not(:where(.not-content *))::before { + --sl-details-marker-size: 1.25rem; + + background-color: currentColor; + content: ''; + display: inline-block; + height: var(--sl-details-marker-size); + width: var(--sl-details-marker-size); + margin-inline: calc((var(--sl-details-marker-size) / 4) * -1) 0.25rem; + vertical-align: middle; + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + } + @media (prefers-reduced-motion: no-preference) { + .sl-markdown-content summary:not(:where(.not-content *))::before { + transition: transform 0.2s ease-in-out; + } + } + .sl-markdown-content details[open] > summary:not(:where(.not-content *))::before { + transform: rotateZ(90deg); + } + [dir='rtl'] .sl-markdown-content summary:not(:where(.not-content *))::before, + .sl-markdown-content [dir='rtl'] summary:not(:where(.not-content *))::before { + transform: rotateZ(180deg); + } + /* with only a paragraph automatically added when using MDX */ + .sl-markdown-content summary:not(:where(.not-content *)) p:only-child { + display: inline; + } + + /*
styles inside asides */ + .sl-markdown-content .starlight-aside details:not(:where(.not-content *)) { + --sl-details-border-color: var(--sl-color-asides-border); + --sl-details-border-color--hover: var(--sl-color-asides-text-accent); + } + + .code-image.themed .light { + display: none; + } + .code-image.themed .dark { + display: initial; + } + :root[data-theme='light'] .code-image.themed .light{ + display: initial; + } + + :root[data-theme='light'] .code-image.themed .dark { + display: none; + } + +} \ No newline at end of file diff --git a/packages/preview/shiroa-starlight/0.4.0/styles/props.css b/packages/preview/shiroa-starlight/0.4.0/styles/props.css new file mode 100644 index 0000000000..45c0a31032 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/styles/props.css @@ -0,0 +1,205 @@ +@layer starlight.base { + :root, + ::backdrop { + /* Colors (dark mode) */ + --sl-color-white: hsl(0, 0%, 100%); /* “white” */ + --sl-color-gray-1: hsl(224, 20%, 94%); + --sl-color-gray-2: hsl(224, 6%, 77%); + --sl-color-gray-3: hsl(224, 6%, 56%); + --sl-color-gray-4: hsl(224, 7%, 36%); + --sl-color-gray-5: hsl(224, 10%, 23%); + --sl-color-gray-6: hsl(224, 14%, 16%); + --sl-color-black: hsl(224, 10%, 10%); + + --sl-hue-orange: 41; + --sl-color-orange-low: hsl(var(--sl-hue-orange), 39%, 22%); + --sl-color-orange: hsl(var(--sl-hue-orange), 82%, 63%); + --sl-color-orange-high: hsl(var(--sl-hue-orange), 82%, 87%); + --sl-hue-green: 101; + --sl-color-green-low: hsl(var(--sl-hue-green), 39%, 22%); + --sl-color-green: hsl(var(--sl-hue-green), 82%, 63%); + --sl-color-green-high: hsl(var(--sl-hue-green), 82%, 80%); + --sl-hue-blue: 234; + --sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 20%); + --sl-color-blue: hsl(var(--sl-hue-blue), 100%, 60%); + --sl-color-blue-high: hsl(var(--sl-hue-blue), 100%, 87%); + --sl-hue-purple: 281; + --sl-color-purple-low: hsl(var(--sl-hue-purple), 39%, 22%); + --sl-color-purple: hsl(var(--sl-hue-purple), 82%, 63%); + --sl-color-purple-high: hsl(var(--sl-hue-purple), 82%, 89%); + --sl-hue-red: 339; + --sl-color-red-low: hsl(var(--sl-hue-red), 39%, 22%); + --sl-color-red: hsl(var(--sl-hue-red), 82%, 63%); + --sl-color-red-high: hsl(var(--sl-hue-red), 82%, 87%); + + --sl-color-accent-low: hsl(224, 54%, 20%); + --sl-color-accent: hsl(224, 100%, 60%); + --sl-color-accent-high: hsl(224, 100%, 85%); + + --sl-color-text: var(--sl-color-gray-2); + --sl-color-text-accent: var(--sl-color-accent-high); + --sl-color-text-invert: var(--sl-color-accent-low); + --sl-color-bg: var(--sl-color-black); + --sl-color-bg-nav: var(--sl-color-gray-6); + --sl-color-bg-sidebar: var(--sl-color-gray-6); + --sl-color-bg-inline-code: var(--sl-color-gray-5); + --sl-color-bg-accent: var(--sl-color-accent-high); + --sl-color-hairline-light: var(--sl-color-gray-5); + --sl-color-hairline: var(--sl-color-gray-6); + --sl-color-hairline-shade: var(--sl-color-black); + + --sl-color-backdrop-overlay: hsla(223, 13%, 10%, 0.66); + + /* Shadows (dark mode) */ + --sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.12), 0px 2px 1px hsla(0, 0%, 0%, 0.24); + --sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.08), 0px 5px 2px hsla(0, 0%, 0%, 0.08), + 0px 3px 2px hsla(0, 0%, 0%, 0.12), 0px 1px 1px hsla(0, 0%, 0%, 0.15); + --sl-shadow-lg: 0px 25px 7px hsla(0, 0%, 0%, 0.03), 0px 16px 6px hsla(0, 0%, 0%, 0.1), + 0px 9px 5px hsla(223, 13%, 10%, 0.33), 0px 4px 4px hsla(0, 0%, 0%, 0.75), + 0px 4px 2px hsla(0, 0%, 0%, 0.25); + + /* Text size and line height */ + --sl-text-2xs: 0.75rem; /* 12px */ + --sl-text-xs: 0.8125rem; /* 13px */ + --sl-text-sm: 0.875rem; /* 14px */ + --sl-text-base: 1rem; /* 16px */ + --sl-text-lg: 1.125rem; /* 18px */ + --sl-text-xl: 1.25rem; /* 20px */ + --sl-text-2xl: 1.5rem; /* 24px */ + --sl-text-3xl: 1.8125rem; /* 29px */ + --sl-text-4xl: 2.1875rem; /* 35px */ + --sl-text-5xl: 2.625rem; /* 42px */ + --sl-text-6xl: 4rem; /* 64px */ + + --sl-text-body: var(--sl-text-base); + --sl-text-body-sm: var(--sl-text-xs); + --sl-text-code: var(--sl-text-sm); + --sl-text-code-sm: var(--sl-text-xs); + --sl-text-h1: var(--sl-text-4xl); + --sl-text-h2: var(--sl-text-3xl); + --sl-text-h3: var(--sl-text-2xl); + --sl-text-h4: var(--sl-text-xl); + --sl-text-h5: var(--sl-text-lg); + + --sl-line-height: 1.75; + --sl-line-height-headings: 1.2; + + --sl-font-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', + Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --sl-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', + 'Courier New', monospace; + --__sl-font: var(--sl-font, var(--sl-font-system)), var(--sl-font-system); + --__sl-font-mono: var(--sl-font-mono, var(--sl-font-system-mono)), var(--sl-font-system-mono); + + /** Key layout values */ + --sl-nav-height: 3.5rem; + --sl-nav-pad-x: 1rem; + --sl-nav-pad-y: 0.75rem; + --sl-mobile-toc-height: 3rem; + --sl-sidebar-width: 18.75rem; + --sl-sidebar-pad-x: 1rem; + --sl-content-width: 45rem; + --sl-content-pad-x: 1rem; + --sl-menu-button-size: 2rem; + --sl-nav-gap: var(--sl-content-pad-x); + /* Offset required to show outline inside an element instead of round the outside */ + --sl-outline-offset-inside: -0.1875rem; + + /* Global z-index values */ + --sl-z-index-toc: 4; + --sl-z-index-menu: 5; + --sl-z-index-navbar: 10; + --sl-z-index-skiplink: 20; + + + --searchbar-border-color: #848484; + --searchbar-bg: #424242; + --searchbar-fg: #fff; + --searchbar-shadow-color: #d4c89f; + --searchresults-header-fg: #666; + --searchresults-border-color: #888; + --searchresults-li-bg: #252932; + --search-mark-bg: #e3b171; + } + + :root[data-theme='light'], + [data-theme='light'] ::backdrop { + /* Colours (light mode) */ + --sl-color-white: hsl(224, 10%, 10%); + --sl-color-gray-1: hsl(224, 14%, 16%); + --sl-color-gray-2: hsl(224, 10%, 23%); + --sl-color-gray-3: hsl(224, 7%, 36%); + --sl-color-gray-4: hsl(224, 6%, 56%); + --sl-color-gray-5: hsl(224, 6%, 77%); + --sl-color-gray-6: hsl(224, 20%, 94%); + --sl-color-gray-7: hsl(224, 19%, 97%); + --sl-color-black: hsl(0, 0%, 100%); + + --sl-color-orange-high: hsl(var(--sl-hue-orange), 80%, 25%); + --sl-color-orange: hsl(var(--sl-hue-orange), 90%, 60%); + --sl-color-orange-low: hsl(var(--sl-hue-orange), 90%, 88%); + --sl-color-green-high: hsl(var(--sl-hue-green), 80%, 22%); + --sl-color-green: hsl(var(--sl-hue-green), 90%, 46%); + --sl-color-green-low: hsl(var(--sl-hue-green), 85%, 90%); + --sl-color-blue-high: hsl(var(--sl-hue-blue), 80%, 30%); + --sl-color-blue: hsl(var(--sl-hue-blue), 90%, 60%); + --sl-color-blue-low: hsl(var(--sl-hue-blue), 88%, 90%); + --sl-color-purple-high: hsl(var(--sl-hue-purple), 90%, 30%); + --sl-color-purple: hsl(var(--sl-hue-purple), 90%, 60%); + --sl-color-purple-low: hsl(var(--sl-hue-purple), 80%, 90%); + --sl-color-red-high: hsl(var(--sl-hue-red), 80%, 30%); + --sl-color-red: hsl(var(--sl-hue-red), 90%, 60%); + --sl-color-red-low: hsl(var(--sl-hue-red), 80%, 90%); + + --sl-color-accent-high: hsl(234, 80%, 30%); + --sl-color-accent: hsl(234, 90%, 60%); + --sl-color-accent-low: hsl(234, 88%, 90%); + + --sl-color-text-accent: var(--sl-color-accent); + --sl-color-text-invert: var(--sl-color-black); + --sl-color-bg-nav: var(--sl-color-gray-7); + --sl-color-bg-sidebar: var(--sl-color-bg); + --sl-color-bg-inline-code: var(--sl-color-gray-6); + --sl-color-bg-accent: var(--sl-color-accent); + --sl-color-hairline-light: var(--sl-color-gray-6); + --sl-color-hairline-shade: var(--sl-color-gray-6); + + --sl-color-backdrop-overlay: hsla(225, 9%, 36%, 0.66); + + /* Shadows (light mode) */ + --sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.06), 0px 2px 1px hsla(0, 0%, 0%, 0.06); + --sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.03), 0px 5px 2px hsla(0, 0%, 0%, 0.03), + 0px 3px 2px hsla(0, 0%, 0%, 0.06), 0px 1px 1px hsla(0, 0%, 0%, 0.06); + --sl-shadow-lg: 0px 25px 7px rgba(0, 0, 0, 0.01), 0px 16px 6px hsla(0, 0%, 0%, 0.03), + 0px 9px 5px hsla(223, 13%, 10%, 0.08), 0px 4px 4px hsla(0, 0%, 0%, 0.16), + 0px 4px 2px hsla(0, 0%, 0%, 0.04); + + --searchbar-border-color: #aaa; + --searchbar-bg: #fafafa; + --searchbar-fg: #000; + --searchbar-shadow-color: #aaa; + --searchresults-header-fg: #666; + --searchresults-border-color: #888; + --searchresults-li-bg: #e4f2fe; + --search-mark-bg: #a2cff5; + } + + @media (min-width: 50em) { + :root { + --sl-nav-height: 4rem; + --sl-nav-pad-x: 1.5rem; + --sl-text-h1: var(--sl-text-5xl); + --sl-text-h2: var(--sl-text-4xl); + --sl-text-h3: var(--sl-text-3xl); + --sl-text-h4: var(--sl-text-2xl); + } + } + + @media (min-width: 72rem) { + :root { + --sl-content-pad-x: 1.5rem; + --sl-mobile-toc-height: 0rem; + } + } +} \ No newline at end of file diff --git a/packages/preview/shiroa-starlight/0.4.0/styles/reset.css b/packages/preview/shiroa-starlight/0.4.0/styles/reset.css new file mode 100644 index 0000000000..632820fc94 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/styles/reset.css @@ -0,0 +1,53 @@ +@layer starlight.reset { + *, + *::before, + *::after { + box-sizing: border-box; + } + + * { + margin: 0; + } + + html { + color-scheme: dark; + accent-color: var(--sl-color-accent); + } + + html[data-theme='light'] { + color-scheme: light; + } + + body { + font-family: var(--__sl-font); + line-height: var(--sl-line-height); + -webkit-font-smoothing: antialiased; + color: var(--sl-color-text); + background-color: var(--sl-color-bg); + } + + h1, h2, h3, h4, h5 { + margin-block-start: 1em; + margin-block-end: 0.5em; + margin-inline-start: 0px; + margin-inline-end: 0px; + } + + h1 { + margin-block-start: 1rem; + margin-block-end: 0em; + line-height: 1; + } + h2 { + line-height: 1.3333333; + } + h3 { + line-height: 1.45; + } + h4 { + line-height: 1.6; + } + h5 { + line-height: 1.5; + } +} diff --git a/packages/preview/shiroa-starlight/0.4.0/styles/search.css b/packages/preview/shiroa-starlight/0.4.0/styles/search.css new file mode 100644 index 0000000000..1f096de48b --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/styles/search.css @@ -0,0 +1,78 @@ + +/* Search */ + +#searchresults a { + text-decoration: none; +} + +mark { + border-radius: 2px; + padding: 0 3px 1px 3px; + margin: 0 -3px -1px -3px; + background-color: var(--search-mark-bg); + transition: background-color 300ms linear; + cursor: pointer; +} + +mark.fade-out { + background-color: rgba(0, 0, 0, 0) !important; + cursor: auto; +} + +.searchbar-outer { + margin-left: auto; + margin-right: auto; + max-width: var(--content-max-width); +} + +#searchbar { + width: 100%; + margin: 5px auto 0px auto; + padding: 10px 16px; + transition: box-shadow 300ms ease-in-out; + border: 1px solid var(--searchbar-border-color); + border-radius: 3px; + background-color: var(--searchbar-bg); + color: var(--searchbar-fg); +} +#searchbar:focus, +#searchbar.active { + box-shadow: 0 0 3px var(--searchbar-shadow-color); +} + +.searchresults-header { + font-weight: bold; + font-size: 1em; + padding: 18px 0 0 5px; + color: var(--searchresults-header-fg); +} + +.searchresults-outer { + margin-left: auto; + margin-right: auto; + max-width: var(--content-max-width); + border-bottom: 1px dashed var(--searchresults-border-color); +} + +ul#searchresults { + list-style: none; + padding-left: 20px; +} +ul#searchresults li { + margin: 10px 0px; + padding: 2px; + border-radius: 2px; +} +ul#searchresults li.focus { + background-color: var(--searchresults-li-bg); +} +ul#searchresults span.teaser { + display: block; + clear: both; + margin: 5px 0 0 20px; + font-size: 0.8em; +} +ul#searchresults span.teaser em { + font-weight: bold; + font-style: normal; +} diff --git a/packages/preview/shiroa-starlight/0.4.0/styles/utils.css b/packages/preview/shiroa-starlight/0.4.0/styles/utils.css new file mode 100644 index 0000000000..018ca36c2b --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/styles/utils.css @@ -0,0 +1,67 @@ +@layer starlight.utils { + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } + + .sl-hidden { + display: none; + } + .sl-flex { + display: flex; + } + .sl-block { + display: block; + } + @media (min-width: 50rem) { + .md\:sl-hidden { + display: none; + } + .md\:sl-flex { + display: flex; + } + .md\:sl-block { + display: block; + } + } + @media (min-width: 72rem) { + .lg\:sl-hidden { + display: none; + } + .lg\:sl-flex { + display: flex; + } + .lg\:sl-block { + display: block; + } + } + [data-theme='light'] .light\:sl-hidden { + display: none; + } + [data-theme='dark'] .dark\:sl-hidden { + display: none; + } + + /** + * Flip an element around the y-axis when in an RTL context. + * Primarily useful for things where we can’t rely on writing direction like icons. + * + * + * + * In a LTR context: → In a RTL context: ← + */ + [dir='rtl'] .rtl\:flip:not(:where([dir='rtl'] [dir='ltr'] *)) { + transform: matrix(-1, 0, 0, 1, 0, 0); + } + + .hidden { + display: none !important; + } +} diff --git a/packages/preview/shiroa-starlight/0.4.0/table-of-contents-mobile.typ b/packages/preview/shiroa-starlight/0.4.0/table-of-contents-mobile.typ new file mode 100644 index 0000000000..c409577e45 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/table-of-contents-mobile.typ @@ -0,0 +1,5 @@ + +#import "mod.typ": * + +// --- + diff --git a/packages/preview/shiroa-starlight/0.4.0/table-of-contents.typ b/packages/preview/shiroa-starlight/0.4.0/table-of-contents.typ new file mode 100644 index 0000000000..55031cee61 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/table-of-contents.typ @@ -0,0 +1,85 @@ + +#import "mod.typ": * + +// --- + +#ul.with(class: "toc")(context { + if query(heading).len() == 0 { + return + } + + let outline-counter = counter("html-outline") + outline-counter.update(0) + show outline.entry: it => div(class: "outline-item", style: "--depth: " + str(it.level - 1), { + outline-counter.step(level: it.level) + // #sym.section#context outline-counter.display("1.") + static-heading-link(it.element, body: it.element.body) + }) + div(class: "outline", outline(title: none)) +}) + + +#add-styles( + ```css + @layer starlight.core { + .toc a { + display: block; + font-size: var(--sl-text-xs); + text-decoration: none; + color: var(--sl-color-gray-3); + overflow-wrap: anywhere; + } + .toc a:hover { + color: var(--sl-color-white); + } + ul.toc { + padding: 0; + list-style: none; + } + .toc a { + --pad-inline: 0.5rem; + display: block; + border-radius: 0.25rem; + padding-block: 0.25rem; + padding-inline: calc(1rem * var(--depth) + var(--pad-inline)) var(--pad-inline); + line-height: 1.25; + } + .toc a[aria-current='true'] { + color: var(--sl-color-text-accent); + } + .toc .isMobile a { + --pad-inline: 1rem; + display: flex; + justify-content: space-between; + gap: var(--pad-inline); + border-top: 1px solid var(--sl-color-gray-6); + border-radius: 0; + padding-block: 0.5rem; + color: var(--sl-color-text); + font-size: var(--sl-text-sm); + text-decoration: none; + outline-offset: var(--sl-outline-offset-inside); + } + .toc .isMobile:first-child > li:first-child > a { + border-top: 0; + } + .toc .isMobile a[aria-current='true'], + .toc .isMobile a[aria-current='true']:hover, + .toc .isMobile a[aria-current='true']:focus { + color: var(--sl-color-white); + background-color: unset; + } + .toc .isMobile a[aria-current='true']::after { + content: ''; + width: 1rem; + background-color: var(--sl-color-text-accent); + /* Check mark SVG icon */ + -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg=='); + mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg=='); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + flex-shrink: 0; + } + } + ```, +) diff --git a/packages/preview/shiroa-starlight/0.4.0/theme-provider.typ b/packages/preview/shiroa-starlight/0.4.0/theme-provider.typ new file mode 100644 index 0000000000..c409577e45 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/theme-provider.typ @@ -0,0 +1,5 @@ + +#import "mod.typ": * + +// --- + diff --git a/packages/preview/shiroa-starlight/0.4.0/theme-select.typ b/packages/preview/shiroa-starlight/0.4.0/theme-select.typ new file mode 100644 index 0000000000..310568a680 --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/theme-select.typ @@ -0,0 +1,108 @@ + +#import "mod.typ": * +#import "icons.typ": builtin-icon + +#let links = ( + (id: "dark", label: "Dark Theme", icon: "moon"), + (id: "light", label: "Light Theme", icon: "sun"), +) + +// --- + +#for (id: id, label: theme-label, icon: icon) in links { + button.with(id: "theme-" + id, class: "sl-flex theme-button")({ + span(class: "sr-only", theme-label) + if type(icon) == str { builtin-icon(icon) } else { icon } + }) +} + +#inline-assets({ + ```js + + // type Theme = 'auto' | 'dark' | 'light'; + + /** Key in `localStorage` to store color theme preference at. */ + const storageKey = 'starlight-theme'; + + /** Get a typesafe theme string from any JS value (unknown values are coerced to `'auto'`). */ + const parseTheme = (theme) => theme === 'dark' || theme === 'light' ? theme : 'auto'; + + /** Load the user’s preference from `localStorage`. */ + const loadTheme = () => + parseTheme(typeof localStorage !== 'undefined' && localStorage.getItem(storageKey)); + + /** Store the user’s preference in `localStorage`. */ + function storeTheme(theme) { + if (typeof localStorage !== 'undefined') { + localStorage.setItem(storageKey, theme === 'light' || theme === 'dark' ? theme : ''); + } + } + + /** Get the preferred system color scheme. */ + const getPreferredColorScheme = () => + matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'; + + /** Update select menu UI, document theme, and local storage state. */ + function onThemeChange(theme) { + document.documentElement.dataset.themeActive = theme; + document.documentElement.dataset.theme = theme === 'auto' ? getPreferredColorScheme() : theme; + storeTheme(theme); + } + + // React to changes in system color scheme. + matchMedia(`(prefers-color-scheme: light)`).addEventListener('change', () => { + if (loadTheme() === 'auto') onThemeChange('auto'); + }); + + // customElements.define('starlight-theme-select', StarlightThemeSelect); + + const lightButton = document.getElementById('theme-light'); + const darkButton = document.getElementById('theme-dark'); + const themes = ['light', 'dark']; + const buttons = themes.map(theme => document.getElementById('theme-' + theme)); + + buttons.forEach((button, idx) => { + button.addEventListener('click', () => { + const newTheme = themes[idx]; + const isActive = button.classList.contains('active'); + buttons.forEach((_, i) => { + if (i === idx) { + button.classList.toggle('active'); + } else { + buttons[i].classList.remove('active'); + } + }); + onThemeChange(isActive ? 'auto' : newTheme); + }); + }); + + onThemeChange(loadTheme()); + // this.querySelector('select')?.addEventListener('change', (e) => { + // if (e.currentTarget instanceof HTMLSelectElement) { + // onThemeChange(parseTheme(e.currentTarget.value)); + // } + // }); + + + + ``` +}) + +#add-styles.with(cond: links.len() > 0)( + ```css + @layer starlight.core { + .theme-button { + background: none; + border: none; + padding: 0.5em; + margin: -0.2em; + } + :root[data-theme-active='light'] #theme-light, :root[data-theme-active='dark'] #theme-dark { + color: var(--sl-color-text-accent); + } + .theme-button:hover { + opacity: 0.66; + } + } + ```, +) diff --git a/packages/preview/shiroa-starlight/0.4.0/typst.toml b/packages/preview/shiroa-starlight/0.4.0/typst.toml new file mode 100644 index 0000000000..513c9409ce --- /dev/null +++ b/packages/preview/shiroa-starlight/0.4.0/typst.toml @@ -0,0 +1,11 @@ +[package] +name = "shiroa-starlight" +version = "0.4.0" +entrypoint = "lib.typ" +authors = ["Myriad-Dreamin "] +license = "Apache-2.0" +homepage = "https://myriad-dreamin.github.io/shiroa" +repository = "https://github.com/Myriad-Dreamin/shiroa" +keywords = ["book", "web"] +categories = ["book"] +description = "The starlight theme is a modern, responsive theme for [Shiroa](https://github.com/Myriad-Dreamin/shiroa/), inspired by the Astro Starlight." From 4e5100588cbf5e7f67dd7a13081086d7be289544 Mon Sep 17 00:00:00 2001 From: Myriad-Dreamin <35292584+Myriad-Dreamin@users.noreply.github.com> Date: Mon, 13 Jul 2026 15:47:26 +0800 Subject: [PATCH 2/3] fix: use plain-text shiroa-starlight description --- packages/preview/shiroa-starlight/0.4.0/typst.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/preview/shiroa-starlight/0.4.0/typst.toml b/packages/preview/shiroa-starlight/0.4.0/typst.toml index 513c9409ce..a76dbdf0b1 100644 --- a/packages/preview/shiroa-starlight/0.4.0/typst.toml +++ b/packages/preview/shiroa-starlight/0.4.0/typst.toml @@ -8,4 +8,4 @@ homepage = "https://myriad-dreamin.github.io/shiroa" repository = "https://github.com/Myriad-Dreamin/shiroa" keywords = ["book", "web"] categories = ["book"] -description = "The starlight theme is a modern, responsive theme for [Shiroa](https://github.com/Myriad-Dreamin/shiroa/), inspired by the Astro Starlight." +description = "The starlight theme is a modern, responsive theme for Shiroa, inspired by the Astro Starlight." From 6d824585630b4ed57418c58787d4f322c1041461 Mon Sep 17 00:00:00 2001 From: Myriad-Dreamin <35292584+Myriad-Dreamin@users.noreply.github.com> Date: Mon, 13 Jul 2026 16:11:28 +0800 Subject: [PATCH 3/3] fix: guard Starlight HTML-only import --- packages/preview/shiroa-starlight/0.4.0/lib.typ | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/preview/shiroa-starlight/0.4.0/lib.typ b/packages/preview/shiroa-starlight/0.4.0/lib.typ index c5e91f558e..6382e1e882 100644 --- a/packages/preview/shiroa-starlight/0.4.0/lib.typ +++ b/packages/preview/shiroa-starlight/0.4.0/lib.typ @@ -1,6 +1,5 @@ #import "mod.typ": set-slot -#import "page-header.typ": right-group-item #import "icons.typ": builtin-icon #let social-links( @@ -77,6 +76,8 @@ return body } + import "page-header.typ": right-group-item + let trampoline = paged-load-trampoline() let plain-body = if plain-body == auto { body } else { plain-body } let description = prepare-description(description, plain-body: plain-body)