Skip to content

Commit

Permalink
docs
Browse files Browse the repository at this point in the history
  • Loading branch information
userdocs committed Mar 17, 2024
1 parent 27c15b7 commit 13bcf02
Show file tree
Hide file tree
Showing 11 changed files with 310 additions and 282 deletions.
5 changes: 3 additions & 2 deletions .editorconfig
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,6 @@ indent_style = space
indent_size = 2

[**.astro]
indent_size = 2
indent_style = space
indent_size = 4
indent_style = tab
end_of_line = lf
196 changes: 100 additions & 96 deletions docs/src/components/Header.astro
Original file line number Diff line number Diff line change
@@ -1,96 +1,100 @@
---
import type { Props } from "@astrojs/starlight/props";
import LanguageSelect from "@astrojs/starlight/components/LanguageSelect.astro";
import Search from "@astrojs/starlight/components/Search.astro";
import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
const shouldRenderSearch = true;
// import App from "./react/advancedButton.jsx";
import App from "./advancedButton.astro";
---

<div class="header sl-flex">
<div class="title-wrapper sl-flex">
<div class="toggle-global">
<App />
</div>
<SiteTitle {...Astro.props} />
</div>
<div class="sl-flex">
{shouldRenderSearch && <Search {...Astro.props} />}
</div>
<div class="sl-hidden md:sl-flex right-group">
<div class="sl-flex social-icons">
<SocialIcons {...Astro.props} />
</div>
<ThemeSelect {...Astro.props} />
<LanguageSelect {...Astro.props} />
</div>
</div>

<style>
.header {
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: hidden;
}

.right-group,
.social-icons {
gap: 1rem;
align-items: center;
}
.social-icons::after {
content: "";
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;
}
}
</style>
---
import type { Props } from "@astrojs/starlight/props";
import LanguageSelect from "@astrojs/starlight/components/LanguageSelect.astro";
import Search from "@astrojs/starlight/components/Search.astro";
import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
const shouldRenderSearch = true;
// import App from "./react/advancedButton.jsx";
import App from "./advancedButton.astro";
---

<div class="header sl-flex">
<div class="title-wrapper sl-flex">
<div class="toggle-global">
<App />
</div>
<SiteTitle {...Astro.props} />
</div>
<div class="sl-flex">
{shouldRenderSearch && <Search {...Astro.props} />}
</div>
<div class="sl-hidden md:sl-flex right-group">
<div class="sl-flex social-icons">
<SocialIcons {...Astro.props} />
</div>
<ThemeSelect {...Astro.props} />
<LanguageSelect {...Astro.props} />
</div>
</div>

<style>
.header {
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: hidden;
}

.right-group,
.social-icons {
gap: 1rem;
align-items: center;
}
.social-icons::after {
content: "";
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;
}
}
</style>
2 changes: 1 addition & 1 deletion docs/src/components/advancedMarkdown.astro
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
---

<div class="Advanced-class advanced-title" style="display: none;" ;>
<slot />
<slot />
</div>
33 changes: 18 additions & 15 deletions docs/src/components/charts.astro
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
---
const { class: className, id, summary } = Astro.props;
import Radarr from "/src/charts/radarr.html?raw"
import Example from "/src/charts/example.html?raw"
---

<div class:list={['custom-details-container', className]} {... Astro.props}>
<details class="custom-details">
<summary class="custom-summary">{summary}</summary>
<div class="custom-content"'>
<div set:html={Radarr} data-mxgraph={JSON.stringify({"auto-fit":"true"})}/>
</div>
</details>
</div>
---
const { class: className, id, summary } = Astro.props;
import Radarr from "/src/charts/radarr.html?raw";
import Example from "/src/charts/example.html?raw";
---

<div class:list={["custom-details-container", className]} {...Astro.props}>
<details class="custom-details">
<summary class="custom-summary">{summary}</summary>
<div class="custom-content" '>
<div
set:html={Radarr}
data-mxgraph={JSON.stringify({ "auto-fit": "true" })}
/>
</div>
</details>
</div>
24 changes: 12 additions & 12 deletions docs/src/components/details.astro
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
const { class: className, id, summary } = Astro.props;
---

<div class:list={['custom-details-container', className]} {... Astro.props}>
<details class="custom-details" >
<summary class="custom-summary">{summary}</summary>
<div class="custom-content">
<slot />
</div>
</details>
</div>
---
const { class: className, id, summary } = Astro.props;
---

<div class:list={["custom-details-container", className]} {...Astro.props}>
<details class="custom-details">
<summary class="custom-summary">{summary}</summary>
<div class="custom-content">
<slot />
</div>
</details>
</div>
16 changes: 8 additions & 8 deletions docs/src/components/global.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import Details from "/src/components/details.astro";
import Modal from '/src/components/modal.astro';
import Tooltip from '/src/components/tooltipTippy.astro';
import Charts from "/src/components/charts.astro"
import Important from "/src/components/important.astro"
import Advanced from "/src/components/advancedMarkdown.astro"

export { Advanced, Details, Modal, Tooltip, Charts, Important };
import Details from "/src/components/details.astro";
import Modal from '/src/components/modal.astro';
import Tooltip from '/src/components/tooltipTippy.astro';
import Charts from "/src/components/charts.astro"
import Important from "/src/components/important.astro"
import Advanced from "/src/components/advancedMarkdown.astro"

export { Advanced, Details, Modal, Tooltip, Charts, Important };
38 changes: 25 additions & 13 deletions docs/src/components/glossary.astro
Original file line number Diff line number Diff line change
@@ -1,13 +1,25 @@
---
const posts = await Astro.glob('/src/content/docs/glossary/*.md');
const basePath = "/" + Astro.url.pathname.split("/")[1] + "/";
const Test = Astro.url.pathname;
// const Test2 = thePath.substring(thePath.lastIndexOf('/') + 1);
---

<ul>
{posts.map(post =>
<li>
<a href= {"glossary/" + post.file.substring(post.file.lastIndexOf('/') + 1).replace(".md", "")}>{post.frontmatter.title}</a>
</li>)}
</ul>
---
const posts = await Astro.glob("/src/content/docs/glossary/*.md");
const basePath = "/" + Astro.url.pathname.split("/")[1] + "/";
const Test = Astro.url.pathname;
// const Test2 = thePath.substring(thePath.lastIndexOf('/') + 1);
---

<ul>
{
posts.map((post) => (
<li>
<a
href={
"glossary/" +
post.file
.substring(post.file.lastIndexOf("/") + 1)
.replace(".md", "")
}
>
{post.frontmatter.title}
</a>
</li>
))
}
</ul>
12 changes: 6 additions & 6 deletions docs/src/components/lightbox.astro
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
import LightBox from '/src/components/react/lightbox.jsx'
const {path, width, height} = Astro.props;
---

<LightBox path={path} width={width} height={height} client:only/>
---
import LightBox from "/src/components/react/lightbox.jsx";
const { path, width, height } = Astro.props;
---

<LightBox path={path} width={width} height={height} client:only />
Loading

0 comments on commit 13bcf02

Please sign in to comment.