Skip to content

Commit 2b98cf7

Browse files
ackwellackwell
committed
Bit of home page work
1 parent c56fde1 commit 2b98cf7

File tree

4 files changed

+152
-17
lines changed

4 files changed

+152
-17
lines changed

‎astro.config.mjs

+3
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ export default defineConfig({
3030
autogenerate: { directory: 'reference' },
3131
},
3232
],
33+
components: {
34+
Hero: './src/components/Hero.astro'
35+
},
3336
customCss: [
3437
'./src/styles/custom.css'
3538
]

‎src/assets/houston.webp

-96.2 KB
Binary file not shown.

‎src/components/Hero.astro

+119
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
---
2+
import { Image } from 'astro:assets';
3+
import type { Props } from '@astrojs/starlight/props';
4+
import { LinkButton } from '@astrojs/starlight/components';
5+
6+
const { data } = Astro.props.entry;
7+
const { title = data.title, tagline, image, actions = [] } = data.hero || {};
8+
9+
const imageAttrs = {
10+
loading: 'eager' as const,
11+
decoding: 'async' as const,
12+
alt: image?.alt || '',
13+
};
14+
15+
let darkImage: ImageMetadata | undefined;
16+
let lightImage: ImageMetadata | undefined;
17+
let rawHtml: string | undefined;
18+
if (image) {
19+
if ('file' in image) {
20+
darkImage = image.file;
21+
} else if ('dark' in image) {
22+
darkImage = image.dark;
23+
lightImage = image.light;
24+
} else {
25+
rawHtml = image.html;
26+
}
27+
}
28+
---
29+
30+
<div class="hero">
31+
<div class="copy">
32+
<h1 id="_top" data-page-title set:html={title} />
33+
{tagline && <div class="tagline" set:html={tagline} />}
34+
</div>
35+
36+
{actions.length > 0 && (
37+
<div class="actions">
38+
{actions.map(
39+
({ attrs: { class: className, ...attrs } = {}, icon, link: href, text, variant }) => (
40+
<LinkButton {href} {variant} icon={icon?.name} class:list={[className]} {...attrs}>
41+
{text}
42+
{icon?.html && <Fragment set:html={icon.html} />}
43+
</LinkButton>
44+
)
45+
)}
46+
</div>
47+
)}
48+
49+
{darkImage && (
50+
<Image
51+
src={darkImage}
52+
{...imageAttrs}
53+
class:list={{ 'light:sl-hidden': Boolean(lightImage) }}
54+
/>
55+
)}
56+
{lightImage && <Image src={lightImage} {...imageAttrs} class="dark:sl-hidden" />}
57+
{rawHtml && <div class="hero-html sl-flex" set:html={rawHtml} />}
58+
</div>
59+
60+
<style>
61+
.hero::before {
62+
content: '';
63+
position: absolute;
64+
z-index: -1;
65+
top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
66+
left: 0;
67+
width: 100vw;
68+
height: calc(20rem + clamp(2.5rem, calc(1rem + 10vmin), 10rem));
69+
70+
/* Dark gradient */
71+
background-image:
72+
radial-gradient(at 96% 3%, hsla(20,100%,15%,1) 0px, transparent 50%),
73+
radial-gradient(at 20% 36%, hsla(22,100%,15%,1) 0px, transparent 50%),
74+
radial-gradient(at 7% 3%, hsla(334,100%,15%,1) 0px, transparent 50%),
75+
radial-gradient(at 53% 10%, hsla(325,100%,15%,1) 0px, transparent 50%),
76+
radial-gradient(at 85% 25%, hsla(342,100%,15%,1) 0px, transparent 50%);
77+
}
78+
79+
:root[data-theme='light'] .hero::before {
80+
/* Light gradient */
81+
background-image:
82+
radial-gradient(at 21% 36%, hsla(15,100%,80%,1) 0px, transparent 50%),
83+
radial-gradient(at 79% 35%, hsla(359,100%,80%,1) 0px, transparent 50%),
84+
radial-gradient(at 49% 0%, hsla(45,100%,80%,1) 0px, transparent 50%),
85+
radial-gradient(at 7% 3%, hsla(311,100%,80%,1) 0px, transparent 50%),
86+
radial-gradient(at 92% 3%, hsla(275,72%,80%,1) 0px, transparent 50%);
87+
}
88+
89+
.hero {
90+
display: flex;
91+
flex-direction: column;
92+
align-items: center;
93+
gap: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);
94+
padding-block: clamp(2.5rem, calc(1rem + 10vmin), 10rem);
95+
}
96+
97+
h1 {
98+
font-size: clamp(var(--sl-text-3xl), calc(0.25rem + 5vw), var(--sl-text-6xl));
99+
line-height: var(--sl-line-height-headings);
100+
font-weight: 600;
101+
color: var(--sl-color-white);
102+
}
103+
104+
.tagline {
105+
font-size: clamp(var(--sl-text-base), calc(0.0625rem + 2vw), var(--sl-text-xl));
106+
color: var(--sl-color-gray-2);
107+
}
108+
109+
h1, .tagline {
110+
text-align: center;
111+
}
112+
113+
.actions {
114+
display: flex;
115+
gap: 1rem 2rem;
116+
flex-wrap: wrap;
117+
justify-content: center;
118+
}
119+
</style>

‎src/content/docs/index.mdx

+30-17
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,49 @@
11
---
2-
title: Welcome to Starlight
3-
description: Get started building your docs site with Starlight.
42
template: splash
3+
4+
title: XIVAPI
5+
description: The FFXIV web API - Search and explore comprehensive game data.
6+
head:
7+
- tag: title
8+
content: XIVAPI - The Final Fantasy 14 Web API
59
hero:
6-
tagline: Congrats on setting up a new Starlight project!
7-
image:
8-
file: ../../assets/houston.webp
10+
title: The Final Fantasy 14 Web API
11+
tagline: Search and explore comprehensive game data.
912
actions:
10-
- text: Example Guide
13+
- text: TODO
1114
link: /guides/example/
1215
icon: right-arrow
13-
- text: Read the Starlight docs
16+
- text: TODO
1417
link: https://starlight.astro.build
1518
icon: external
1619
variant: minimal
1720
---
1821

1922
import { Card, CardGrid } from '@astrojs/starlight/components';
2023

21-
## Next steps
24+
```json frame="terminal" title="/api/1/sheet/Item/37362?fields=Name,Description"
25+
{
26+
"row_id": 37362,
27+
"fields": {
28+
"Name": "Ironworks Tool Set",
29+
"Description": "A set of Garlond Ironworks' finest instruments."
30+
}
31+
}
32+
```
33+
34+
## Features
2235

23-
<CardGrid stagger>
24-
<Card title="Update content" icon="pencil">
25-
Edit `src/content/docs/index.mdx` to see this page change.
36+
<CardGrid>
37+
<Card title="Fast updates" icon="download">
38+
Updated patch data _automatically_ available shortly after it's available.
2639
</Card>
27-
<Card title="Add new content" icon="add-document">
28-
Add Markdown or MDX files to `src/content/docs` to create new pages.
40+
<Card title="Stable API" icon="puzzle">
41+
Pin schema and game versions to _guarantee_ stability until you're ready to update.
2942
</Card>
30-
<Card title="Configure your site" icon="setting">
31-
Edit your `sidebar` and other config in `astro.config.mjs`.
43+
<Card title="Time travel (backwards)" icon="rocket">
44+
Data for _every_ patch since 7.0 available and easily accessible.
3245
</Card>
33-
<Card title="Read the docs" icon="open-book">
34-
Learn more in [the Starlight Docs](https://starlight.astro.build/).
46+
<Card title="Search anything" icon="magnifier">
47+
Every sheet, in every patch, with any schema. It's _all_ there.
3548
</Card>
3649
</CardGrid>

0 commit comments

Comments
 (0)