Skip to content

Commit e4b6c14

Browse files
SnaveSutitSnaveSutit
committed
🎨 Clean up and improve home page, layout, and CSS.
1 parent b2ebec7 commit e4b6c14

File tree

6 files changed

+237
-161
lines changed

6 files changed

+237
-161
lines changed

‎src/components/HeadMeta.svelte

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script lang="ts">
2+
import { page } from '$app/stores'
3+
4+
export let title: string | undefined
5+
export let description: string | undefined
6+
</script>
7+
8+
<svelte:head>
9+
{#key $page.url.pathname}
10+
{#if title}
11+
<title>{title}</title>
12+
{/if}
13+
{#if description}
14+
<meta name="description" content={description} />
15+
{/if}
16+
<meta property="og:type" content="website" />
17+
<meta content={title} property="og:title" />
18+
<meta content={description} property="og:description" />
19+
<meta content={$page.url} property="og:url" />
20+
<meta
21+
content="https://animated-java.github.io/img/animated_java_animated_icon.png"
22+
property="og:image"
23+
/>
24+
<meta content="#00ACED" data-react-helmet="true" name="theme-color" />
25+
{/key}
26+
</svelte:head>

‎src/lib/scrollAnim.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ export function scrollAnimator(element: HTMLElement, options: IScrollAnimatorOpt
4040

4141
const observer = () => {
4242
const scroll = window.scrollY
43-
4443
const localScroll = Math.min(Math.max(scroll - top, 0), rect.height)
4544
const percent = Math.min(Math.max(localScroll / (rect.height * rate), 0), 1)
4645
updateTransform(percent)
@@ -50,9 +49,7 @@ export function scrollAnimator(element: HTMLElement, options: IScrollAnimatorOpt
5049
let intervalID: number | undefined
5150
const setObserver = ({}: IScrollAnimatorOptions) => {
5251
if (intervalID) clearInterval(intervalID)
53-
// if (observer) removeEventListener('scroll', observer)
5452
intervalID = setInterval(observer, 16)
55-
// addEventListener('scroll', observer, { passive: true })
5653
observer()
5754
}
5855

@@ -64,7 +61,7 @@ export function scrollAnimator(element: HTMLElement, options: IScrollAnimatorOpt
6461
},
6562

6663
destroy() {
67-
if (observer) removeEventListener('scroll', observer)
64+
if (intervalID) clearInterval(intervalID)
6865
},
6966
}
7067
}

‎src/lib/styles/kit-docs.css

Lines changed: 83 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,3 @@
1-
:root,
2-
.prefers-light-scheme {
3-
--kd-color-brand: 0 172 237;
4-
--kd-color-focus: 0 172 237 !important;
5-
--kd-color-soft: 68 78 94;
6-
--kd-color-body: 250 250 250;
7-
--kd-color-elevate: 243 244 246;
8-
--kd-color-inverse: 5 11 23;
9-
--kd-color-border: 209 213 219;
10-
11-
--kd-color-subtle: rgb(103 111 124);
12-
13-
--kd-code-fence-bg: rgb(212 217 251);
14-
--kd-code-fence-fg: rgb(26, 29, 36);
15-
}
16-
171
:root {
182
font-size: 16px;
193
scroll-padding-top: 8rem;
@@ -66,14 +50,14 @@
6650
}
6751
}
6852

69-
:root.dark,
70-
.prefers-dark-scheme {
53+
:root {
7154
color-scheme: dark;
55+
--kd-color-focus: 0 172 237 !important;
7256
--kd-color-brand: 0 172 237;
7357
--kd-color-soft: 181 186 199;
7458
--kd-color-inverse: 245 245 245;
7559
--kd-color-border: 38 48 64;
76-
--kd-color-elevate: 43 44 50;
60+
--kd-color-elevate: 48 52 65;
7761
--kd-color-body: 31 33 40;
7862
--kd-color-focus: 129 140 248;
7963

@@ -98,6 +82,14 @@ code::after {
9882
content: '' !important;
9983
}
10084

85+
.code-fence {
86+
border-radius: 4px 4px 4px 4px;
87+
}
88+
89+
.kit-docs .code-fence .code pre {
90+
margin-bottom: 4px;
91+
}
92+
10193
code:not(pre code) {
10294
background-color: #16171b !important;
10395
padding: 4px 6px !important;
@@ -108,10 +100,81 @@ code:not(pre code) {
108100
text-wrap: nowrap !important;
109101
}
110102

103+
a.link {
104+
color: var(--tw-prose-links) !important;
105+
text-decoration: none;
106+
font-weight: 400;
107+
border-bottom: 1px solid rgb(var(--kd-color-brand));
108+
}
109+
111110
td {
112111
text-wrap: balance !important;
113112
}
114113

115-
.on-this-page {
114+
p > img {
115+
max-width: 75% !important;
116+
}
117+
118+
#main-sidebar {
119+
width: 64px !important;
120+
max-width: 64px !important;
121+
}
122+
123+
.on-this-page:not(:has(*)) {
116124
display: none !important;
117125
}
126+
.on-this-page {
127+
width: 25%;
128+
padding-left: 1rem;
129+
}
130+
.on-this-page li {
131+
list-style: disc;
132+
font-size: small;
133+
}
134+
135+
* {
136+
scrollbar-width: unset !important;
137+
}
138+
139+
.scrollbar::-webkit-scrollbar {
140+
width: 8px !important;
141+
height: 8px !important;
142+
}
143+
.scrollbar::-webkit-scrollbar-thumb {
144+
background-color: rgb(var(--kd-color-brand)) !important;
145+
border-radius: 2px !important;
146+
}
147+
.scrollbar::-webkit-scrollbar-track {
148+
background-color: rgb(var(--kd-color-elevate)) !important;
149+
border-radius: 2px !important;
150+
}
151+
152+
::-webkit-scrollbar {
153+
width: 8px !important;
154+
height: 8px !important;
155+
}
156+
157+
::-webkit-scrollbar-thumb {
158+
background-color: rgb(var(--kd-color-brand)) !important;
159+
border-radius: 2px !important;
160+
}
161+
162+
::-webkit-scrollbar-track {
163+
background-color: rgb(var(--kd-color-elevate)) !important;
164+
border-radius: 2px !important;
165+
margin: 0 4px !important;
166+
}
167+
168+
::-webkit-scrollbar-thumb:hover {
169+
background-color: rgb(var(--kd-color-brand)) !important;
170+
}
171+
172+
table {
173+
box-shadow: inset 0 0 0 1px rgb(var(--kd-color-border));
174+
background-color: #1c1e24;
175+
}
176+
177+
th {
178+
padding: 0.3rem 0.6rem !important;
179+
vertical-align: middle !important;
180+
}

‎src/routes/+layout.svelte

Lines changed: 61 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -15,50 +15,58 @@
1515
import KofiIcon from '../kit-docs/kofiLogo.svelte'
1616
import { Button, KitDocs, KitDocsLayout, createSidebarContext } from '@svelteness/kit-docs'
1717
import { SLOGAN } from '$lib/strings'
18+
import HeadMeta from '../components/HeadMeta.svelte'
1819
1920
export let data
2021
21-
$: ({ meta, sidebar } = data)
22-
2322
const links = [
24-
{ title: 'Home', slug: '/', icon: false },
25-
{ title: 'Documentation', slug: '/docs', icon: false },
26-
{ title: 'Discord', slug: '/discord', icon: DiscordIcon },
27-
{ title: 'Source', slug: '/source', icon: GithubIcon },
28-
{ title: 'Ko-fi', slug: 'https://ko-fi.com/snavesutit', icon: KofiIcon },
23+
{ label: 'Home', title: 'Home', slug: '/', match: /^\/$/, icon: false },
24+
{
25+
label: 'Documentation',
26+
title: 'Documentation',
27+
slug: '/docs',
28+
match: /^\/docs\S*/,
29+
icon: false,
30+
},
31+
{ icon: DiscordIcon, title: 'Join our Discord!', slug: '/discord', match: /^\/discord$/ },
32+
{
33+
icon: GithubIcon,
34+
title: 'View Source Code (Github)',
35+
slug: '/source',
36+
match: /^\/source$/,
37+
},
38+
{ icon: KofiIcon, title: 'Support Us!', slug: '/support-us', match: /^\/support-us$/ },
2939
]
3040
31-
console.log(KofiIcon)
41+
let currentRelease = '1.X.X'
42+
43+
const PACKAGE_URL =
44+
'https://raw.githubusercontent.com/Animated-Java/animated-java/refs/heads/main/package.json'
45+
46+
function getCurrentRelease() {
47+
try {
48+
fetch(PACKAGE_URL)
49+
.then(res => res.json())
50+
.then(data => {
51+
currentRelease = data.version
52+
})
53+
} catch (error) {
54+
console.error(error)
55+
}
56+
}
3257
33-
const { activeCategory } = createSidebarContext(sidebar)
58+
getCurrentRelease()
3459
35-
$: category = $activeCategory ? `${$activeCategory}: ` : ''
36-
$: title = meta ? `Animated Java | ${category}${meta.title}` : 'Animated Java'
37-
$: description = meta?.description || SLOGAN
60+
const { activeCategory } = createSidebarContext(data.sidebar)
61+
$: category = $activeCategory ? `${$activeCategory} — ` : ''
62+
$: title = data.meta ? `Animated Java | ${category}${data.meta.title}` : 'Animated Java'
63+
$: description = data.meta?.description || SLOGAN
3864
</script>
3965

40-
<svelte:head>
41-
{#key $page.url.pathname}
42-
{#if title}
43-
<title>{title}</title>
44-
{/if}
45-
{#if description}
46-
<meta name="description" content={description} />
47-
{/if}
48-
<meta property="og:type" content="website" />
49-
<meta content={title} property="og:title" />
50-
<meta content={description} property="og:description" />
51-
<meta content={$page.url} property="og:url" />
52-
<meta
53-
content="https://animated-java.github.io/img/animated_java_animated_icon.png"
54-
property="og:image"
55-
/>
56-
<meta content="#00ACED" data-react-helmet="true" name="theme-color" />
57-
{/key}
58-
</svelte:head>
66+
<HeadMeta {title} {description} />
5967

60-
<KitDocs {meta}>
61-
<KitDocsLayout navbar={{ links: [] }} {sidebar} search>
68+
<KitDocs meta={data.meta}>
69+
<KitDocsLayout navbar={{ links: [] }} sidebar={data.sidebar} search>
6270
<Algolia
6371
appId={PUBLIC_ALGOLIA_ID}
6472
apiKey={PUBLIC_ALGOLIA_SEARCH_KEY}
@@ -70,8 +78,12 @@
7078
<ul slot="navbar-right" class="nav-links">
7179
{#each links as link}
7280
<li>
73-
<a class={link.slug === $page.url.pathname ? 'active' : ''} href={link.slug}>
74-
{link.title}
81+
<a
82+
class={!!link.match.exec($page.url.pathname) ? 'active' : ''}
83+
title={link.title}
84+
href={link.slug}
85+
>
86+
{link.label ?? ''}
7587
<svelte:component this={link.icon} />
7688
</a>
7789
</li>
@@ -102,28 +114,14 @@
102114

103115
<div class="footer" slot="main-bottom">
104116
{#if $page.url.pathname !== '/'}
105-
<div class="footer-wip-warning" style="margin-top: 16px;">
106-
⚠️ This site only contains the documentation for the latest release of Animated
107-
Java. ⚠️
117+
<div class="footer-version-warning">
118+
This documentation is for the latest release of Animated Java.
108119
<br />
109-
Older versions may have different features or behavior.
120+
Versions older than {currentRelease}, or
121+
<a class="link" href="/docs/legacy-releases/versions">legacy</a> versions may have
122+
different features or behavior.
110123
</div>
111124
{/if}
112-
<div class="footer-social">
113-
<div class="social-container">
114-
<Button title="Join our Discord Server!" href="/discord">
115-
<svelte:component this={DiscordIcon} class="social-icon" />
116-
</Button>
117-
<Button title="Check out our Source Code!" href="/source">
118-
<svelte:component this={GithubIcon} class="social-icon" />
119-
</Button>
120-
<Button title="Support Us on Ko-fi!" href="https://ko-fi.com/snavesutit">
121-
<div class="social-icon">
122-
<KofiIcon />
123-
</div>
124-
</Button>
125-
</div>
126-
</div>
127125
<p class="footer-copywrite">
128126
© 2025 Titus Evans. All rights reserved. <br />Animated Java is not affiliated with
129127
Mojang Studios.
@@ -157,6 +155,7 @@
157155
}
158156
.nav-links > li {
159157
list-style: none;
158+
display: flex;
160159
color: rgb(var(--kd-color-soft) / var(--tw-text-opacity));
161160
}
162161
.nav-links > li > a {
@@ -258,21 +257,20 @@
258257
align-items: center;
259258
}
260259
261-
.footer-wip-warning {
260+
.footer-version-warning {
262261
text-align: center;
263-
}
264-
265-
.footer-social {
266-
display: flex;
267-
flex-direction: column;
268-
justify-content: center;
269-
margin-top: 2rem;
270-
margin-bottom: 2rem;
262+
border: 2px dashed #facc15aa;
263+
padding: 4px 8px;
264+
border-radius: 8px;
265+
font-style: italic;
266+
margin-top: -32px;
267+
color: var(--kd-color-subtle);
271268
}
272269
273270
.footer-copywrite {
274271
margin: 32px;
275272
color: var(--kd-color-subtle);
273+
text-align: center;
276274
}
277275
278276
.header-container {
@@ -288,15 +286,4 @@
288286
justify-content: center;
289287
margin-left: 1rem;
290288
}
291-
292-
.social-container {
293-
display: flex;
294-
flex-direction: row;
295-
justify-content: center;
296-
gap: 2rem;
297-
}
298-
299-
.social-container > :global(a) {
300-
font-size: 2rem;
301-
}
302289
</style>

0 commit comments

Comments
 (0)