diff --git a/astro.config.mjs b/astro.config.mjs index 78078c3..1b08ec0 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,27 +1,55 @@ import { defineConfig } from 'astro/config'; import starlight from '@astrojs/starlight'; +import axios from 'axios'; + +async function fetchGrammar() { + const url = 'https://raw.githubusercontent.com/kneorain/helix-highlighter/main/syntaxes/helix.tmLanguage.json'; + const response = await axios.get(url); + return response.data; +} + +const grammar = await fetchGrammar(); // https://astro.build/config export default defineConfig({ integrations: [ starlight({ - title: 'My Docs', - social: { - github: 'https://github.com/withastro/starlight', - }, + title: 'Helix', + + logo: { + src: "/public/favicon.svg", + replacesTitle: false, + }, + editLink: { + baseUrl: 'https://github.com/kneorain/helix-api-docs/edit/main/src/content/docs', + }, + social: { + github: 'https://github.com/kneorain/helix', + }, + customCss: ["/src/styles/docstyle.css"], + expressiveCode: { + themes: ['one-dark-pro', 'one-light'], + shiki: { + langs: [ + grammar + ], + }, + styleOverrides: { borderRadius: '0.2rem' }, + }, sidebar: [ { - label: 'Guides', - items: [ - // Each item here is one entry in the navigation menu. - { label: 'Example Guide', slug: 'guides/example' }, - ], + label: 'Internal Reference', + badge: 'New', + autogenerate: { directory: 'internal' }, }, { - label: 'Reference', - autogenerate: { directory: 'reference' }, + label: 'Toolchain API', + badge: 'Wip', + autogenerate: { directory: 'toolchain' }, }, ], }), ], }); + + diff --git a/bun.lockb b/bun.lockb index b5204b8..13f3a39 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 308d1f5..f6d7de9 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,11 @@ "astro": "astro" }, "dependencies": { + "@astrojs/check": "^0.8.2", "@astrojs/starlight": "^0.25.1", "astro": "^4.10.2", + "axios": "^1.7.2", "sharp": "^0.32.5", - "@astrojs/check": "^0.8.2", "typescript": "^5.5.3" } } \ No newline at end of file diff --git a/public/favicon.svg b/public/favicon.svg index cba5ac1..b02e6e8 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1 +1,18 @@ - \ No newline at end of file + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/helix.svg b/src/assets/helix.svg new file mode 100644 index 0000000..b02e6e8 --- /dev/null +++ b/src/assets/helix.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/houston.webp b/src/assets/houston.webp deleted file mode 100644 index 930c164..0000000 Binary files a/src/assets/houston.webp and /dev/null differ diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx index 117179d..c0a60b5 100644 --- a/src/content/docs/index.mdx +++ b/src/content/docs/index.mdx @@ -1,19 +1,25 @@ --- -title: Welcome to Starlight -description: Get started building your docs site with Starlight. +title: Helix 🔌 Docs +head: + - tag: title + content: Helix 🔌 Docs +description: Helix API Documentaion is a place to read up on the internal docs or the the docs regarding the compiler toolchain. template: splash +editUrl: false +lastUpdated: false hero: - tagline: Congrats on setting up a new Starlight project! + title: Helix 🔌 Docs + tagline: Api Documentation image: - file: ../../assets/houston.webp + file: ../../assets/helix.svg actions: - - text: Example Guide - link: /guides/example/ + - text: Internal Docs icon: right-arrow variant: primary - - text: Read the Starlight docs - link: https://starlight.astro.build + link: /internal/example/ + - text: View on GitHub icon: external + link: https://github.com/kneorain/helix-api-docs --- import { Card, CardGrid } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/example.md b/src/content/docs/internal/example.mdx similarity index 78% rename from src/content/docs/guides/example.md rename to src/content/docs/internal/example.mdx index ebd0f3b..7e6d305 100644 --- a/src/content/docs/guides/example.md +++ b/src/content/docs/internal/example.mdx @@ -9,3 +9,4 @@ Writing a good guide requires thinking about what your users are trying to do. ## Further reading - Read [about how-to guides](https://diataxis.fr/how-to-guides/) in the Diátaxis framework +- Read [starlight](https://starlight.astro.build/guides/components/) to read about starlight components diff --git a/src/content/docs/reference/example.md b/src/content/docs/toolchain/example.mdx similarity index 100% rename from src/content/docs/reference/example.md rename to src/content/docs/toolchain/example.mdx diff --git a/src/styles/docstyle.css b/src/styles/docstyle.css new file mode 100644 index 0000000..2df10d7 --- /dev/null +++ b/src/styles/docstyle.css @@ -0,0 +1,189 @@ +/* Dark mode colors. */ +:root { + --sl-color-accent-low: #0C0A09; + --sl-color-accent: hsl(281, 90%, 60%); + --sl-color-accent-high: hsl(287, 100%, 85%); + --sl-color-white: #ffffff; + --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(225, 10%, 23%); + --sl-color-gray-6: #0C0A09; + --sl-color-black: #0C0A09; + --sl-color-text-accent: hsl(0, 0%, 100%); + + /** icon */ + --sl-nav-height: 3.5rem; + --sl-nav-pad-x: 1.5rem; + --sl-nav-pad-y: 1rem; + + /** sidebar */ + --sl-sidebar-width: 20rem; + --sl-sidebar-pad-x: 1rem; + + /** content */ + --sl-content-width: 50rem; + --sl-content-pad-x: 1.2rem; + + --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; + --sl-color-hairline-light: 0; +} + +/* Light mode colors. */ +:root[data-theme='light'] { + --sl-color-accent-low: hsl(234, 88%, 90%); + --sl-color-accent: hsl(0, 0%, 0%); + --sl-color-accent-high: hsl(0, 0%, 0%); + --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-text-accent: hsl(0, 0%, 0%); + + /** icon */ + --sl-nav-height: 3.5rem; + --sl-nav-pad-x: 1.5rem; + --sl-nav-pad-y: 1rem; + + /** sidebar */ + --sl-sidebar-width: 20rem; + --sl-sidebar-pad-x: 1rem; + + /** content */ + --sl-content-width: 50rem; + --sl-content-pad-x: 1.2rem; + + --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; + --sl-color-hairline-light: 0; +} + +table td code[dir="auto"] { + white-space: nowrap; +} + +dl.type-declaration-list dt { + display: list-item; + list-style-type: disc; + margin-inline-start: 2.5rem; + margin-block-end: 1rem; + color: var(--sl-color-white); + line-height: var(--sl-line-height-headings); + font-weight: 600; +} + +dl.type-declaration-list dd { + margin-inline-start: 1.5rem; +} + +.property-signature { + display: grid; + grid-template-columns: max-content auto; + justify-items: start; + align-items: baseline; + grid-gap: 0.2rem 0.5rem; +} + +.property-signature .name { + font-weight: bold; + grid-column: 1; +} + +.property-signature .value { + grid-column: 2; + font-family: var(--__sl-font-mono); + font-size: var(--sl-text-code-sm); + background-color: rgba(128, 128, 128, 0.12); + padding: 0.125rem 0.375rem; +} + +.property-signature a { + color: var(--sl-color-text-accent); +} + +.property-signature a:hover { + color: var(--sl-color-white); +} + +/* Integrate custom scrollbars from index.css */ +::-webkit-scrollbar-track { + border: none; + background-color: var(--sl-color-black); +} + +::-webkit-scrollbar { + width: 10px; + background-color: var(--sl-color-black); +} + +::-webkit-scrollbar-thumb { + background-color: var(--sl-color-white); +} + +.dark ::-webkit-scrollbar-track { + border: none; + background-color: var(--sl-color-white); +} + +.dark ::-webkit-scrollbar { + width: 10px; + background-color: var(--sl-color-white); +} + +.dark ::-webkit-scrollbar-thumb { + background-color: var(--sl-color-black); +} + +::-moz-selection { + color: var(--sl-color-white); + background: var(--sl-color-black); +} + +::selection { + color: var(--sl-color-white); + background: var(--sl-color-black); +} + +.dark ::-moz-selection { + color: var(--sl-color-black); + background: var(--sl-color-white); +} + +.dark ::selection { + color: var(--sl-color-black); + background: var(--sl-color-white); +} + +/* Heading wrapper from index.css */ +.heading-wrapper { + display: flex; + align-items: baseline; + gap: 6px; +} + +@media (min-width: 50em) { + .heading-wrapper { + flex-direction: row-reverse; + justify-content: flex-end; + margin-inline-start: calc(-1 * 25px); + } + + .heading-wrapper .anchor-link { + visibility: hidden; + } + + .heading-wrapper:hover .anchor-link { + visibility: visible; + } +} \ No newline at end of file