Skip to content

Commit 53922af

Browse files
bitsgenixbitsgenix
authored
Merge pull request #12 from glandjs/develop
feat(docs): initial site structure, layout, and landing section setup
2 parents 8df84aa + 7c44100 commit 53922af

18 files changed

+862
-361
lines changed

‎astro.config.mjs

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,52 @@
11
// @ts-check
2-
import { defineConfig } from "astro/config";
3-
import starlight from "@astrojs/starlight";
4-
import tailwind from "@astrojs/tailwind";
2+
import { defineConfig } from 'astro/config'
3+
import starlight from '@astrojs/starlight'
4+
import tailwind from '@astrojs/tailwind'
55

66
// https://astro.build/config
77
export default defineConfig({
8-
site: "https://glandjs.github.io/docs",
9-
base: "/docs/",
8+
site: 'https://glandjs.github.io/docs',
9+
base: '/docs/',
1010
integrations: [
1111
starlight({
1212
expressiveCode: {
13-
themes: ["vesper"],
13+
themes: ['vesper'],
1414
},
15-
title: "Gland",
15+
title: 'Gland',
1616
social: {
17-
github: "https://github.com/glandjs/gland",
17+
github: 'https://github.com/glandjs/gland',
1818
},
19-
sidebar: [
19+
customCss: ['./src/tailwind.css'],
20+
components: {
21+
Header: '@components/Header.astro',
22+
ContentPanel: '@components/ContentPanel.astro',
23+
PageTitle: '@components/PageTitle.astro',
24+
},
25+
head: [
26+
{
27+
tag: 'link',
28+
attrs: {
29+
rel: 'preconnect',
30+
href: 'https://fonts.googleapis.com',
31+
},
32+
},
2033
{
21-
label: "Guides",
22-
items: [{ label: "Example Guide", slug: "guides/example" }],
34+
tag: 'link',
35+
attrs: {
36+
rel: 'preconnect',
37+
href: 'https://fonts.gstatic.com',
38+
crossorigin: true,
39+
},
2340
},
2441
{
25-
label: "Reference",
26-
autogenerate: { directory: "reference" },
42+
tag: 'link',
43+
attrs: {
44+
rel: 'stylesheet',
45+
href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
46+
},
2747
},
2848
],
29-
customCss: ["./src/tailwind.css"],
3049
}),
3150
tailwind({ applyBaseStyles: false }),
3251
],
33-
});
52+
})

‎src/assets/houston.webp

-96.2 KB
Binary file not shown.

‎src/assets/logo.png

130 KB
Loading

‎src/components/ContentPanel.astro

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<slot />

‎src/components/FeatureCard.astro

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎src/components/Header.astro

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
---
2+
import { Icon } from '@astrojs/starlight/components';
3+
4+
const navItems = [
5+
{ name: "Gland_", href: "/help" },
6+
{ name: "docs", href: "/docs" },
7+
{ name: "Changelogs", href: "/changelogs" },
8+
{ name: "Community", href: "/community" }
9+
];
10+
---
11+
12+
<div class="logo-section">
13+
<img src="src/assets/logo.png" alt="Gland Logo" class="h-10 mr-3" />
14+
<span>GLAND</span>
15+
</div>
16+
17+
<div class="middle-section"></div>
18+
19+
<nav class="nav-links">
20+
{navItems.map((item) => (
21+
<div class="nav-item">
22+
<a href={item.href} class="nav-link">
23+
{item.name}
24+
</a>
25+
</div>
26+
))}
27+
28+
<a
29+
href="https://github.com/glandjs/gland"
30+
target="_blank"
31+
rel="noopener noreferrer"
32+
class="github-icon"
33+
aria-label="GitHub Repository"
34+
>
35+
<Icon name="github" class="w-5 h-5" />
36+
</a>
37+
</nav>
38+
39+
<button
40+
class="mobile-menu-button"
41+
aria-label="Toggle navigation menu"
42+
>
43+
<div class="relative w-5 h-5 flex items-center justify-center">
44+
<div class="flex flex-col gap-1 w-5">
45+
<span class="block h-0.5 w-full bg-gray-300 rounded-full"></span>
46+
<span class="block h-0.5 w-full bg-gray-300 rounded-full"></span>
47+
<span class="block h-0.5 w-3/4 ml-auto bg-gray-300 rounded-full"></span>
48+
</div>
49+
</div>
50+
</button>
51+
52+
<div class="mobile-menu">
53+
{navItems.map((item) => (
54+
<a
55+
href={item.href}
56+
class="block px-6 py-3 text-gray-400 hover:text-gray-200"
57+
>
58+
{item.name}
59+
</a>
60+
))}
61+
<a
62+
href="https://github.com/glandjs/gland"
63+
target="_blank"
64+
rel="noopener noreferrer"
65+
class="flex items-center px-6 py-3 text-gray-400 hover:text-gray-200"
66+
>
67+
<Icon name="github" class="w-5 h-5 mr-3" />
68+
GitHub
69+
</a>
70+
</div>
71+
</div>
72+
73+
<script>
74+
document.addEventListener('DOMContentLoaded', () => {
75+
// Mobile menu toggle
76+
const mobileMenuButton = document.querySelector('.mobile-menu-button');
77+
const mobileMenu = document.querySelector('.mobile-menu');
78+
79+
if (mobileMenuButton && mobileMenu) {
80+
mobileMenuButton.addEventListener('click', () => {
81+
mobileMenu.classList.toggle('active');
82+
});
83+
}
84+
85+
// Theme toggle functionality
86+
const themeToggle = document.getElementById('theme-toggle');
87+
if (themeToggle) {
88+
themeToggle.addEventListener('click', () => {
89+
document.documentElement.classList.toggle('dark');
90+
localStorage.setItem('theme',
91+
document.documentElement.classList.contains('dark') ? 'dark' : 'light'
92+
);
93+
});
94+
}
95+
96+
// Set initial theme based on localStorage or system preference
97+
if (
98+
localStorage.getItem('theme') === 'dark' ||
99+
(!localStorage.getItem('theme') &&
100+
window.matchMedia('(prefers-color-scheme: dark)').matches)
101+
) {
102+
document.documentElement.classList.add('dark');
103+
} else {
104+
document.documentElement.classList.remove('dark');
105+
}
106+
107+
// Close mobile menu on window resize
108+
window.addEventListener('resize', () => {
109+
if (window.innerWidth >= 768 && mobileMenu.classList.contains('active')) {
110+
mobileMenu.classList.remove('active');
111+
}
112+
});
113+
});
114+
</script>

‎src/components/PageTitle.astro

Whitespace-only changes.

‎src/components/home/HeroSection.astro

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<section class="relative overflow-hidden pb-2 md:pb-4 lg:pb-6">
2+
<div class="container mx-auto px-4 md:px-8 xl:px-12">
3+
<div class="lg:max-w-8xl mx-auto grid max-w-full grid-cols-1 items-center gap-x-8 gap-y-12 lg:grid-cols-2 xl:gap-x-16">
4+
5+
<!-- Content Side -->
6+
<div class="relative z-10 md:text-center lg:text-left">
7+
<div class="relative">
8+
<div class="flex flex-col items-start gap-2">
9+
<div class="flex items-end gap-1 mt-2">
10+
<div class="flex items-center gap-1">
11+
<!-- Logo Icon -->
12+
<svg xmlns="http://www.w3.org/2000/svg" width="0.8em" height="0.8em" viewBox="0 0 24 24">
13+
<path fill="currentColor" d="M13 4V2c4.66.5 8.33 4.19 8.85 8.85c.6 5.49-3.35 10.43-8.85 11.03v-2c3.64-.45 6.5-3.32 6.96-6.96A7.994 7.994 0 0 0 13 4m-7.33.2A9.8 9.8 0 0 1 11 2v2.06c-1.43.2-2.78.78-3.9 1.68zM2.05 11a9.8 9.8 0 0 1 2.21-5.33L5.69 7.1A8 8 0 0 0 4.05 11zm2.22 7.33A10.04 10.04 0 0 1 2.06 13h2c.18 1.42.75 2.77 1.63 3.9zm1.4 1.41l1.39-1.37h.04c1.13.88 2.48 1.45 3.9 1.63v2c-1.96-.21-3.82-1-5.33-2.26M12 17l1.56-3.42L17 12l-3.44-1.56L12 7l-1.57 3.44L7 12l3.43 1.58z"></path>
14+
</svg>
15+
<span class="text-xs text-opacity-75">Gland</span>
16+
</div>
17+
18+
<!-- Version Tag -->
19+
<a href="/changelogs/1-0">
20+
<span class="bg-gradient-to-tr dark:from-stone-800/50 dark:to-black from-stone-200 to-white px-2 rounded-none">
21+
<span class="text-xs dark:text-zinc-200 tracking-tighter font-mono mb-0 underline underline-offset-4">v1.0.0 is out</span>
22+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-corner-right-up inline ml-1 w-3 h-3">
23+
<polyline points="10 9 15 4 20 9"></polyline>
24+
<path d="M4 20h7a4 4 0 0 0 4-4V4"></path>
25+
</svg>
26+
</span>
27+
</a>
28+
</div>
29+
</div>
30+
31+
<!-- Main Headline -->
32+
<h1 class="text-5xl md:text-6xl font-bold tracking-tight mt-4">
33+
<span class="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">Gland</span>
34+
</h1>
35+
<p class="text-zinc-300 mt-3 tracking-tight text-2xl md:text-3xl">
36+
A lightweight, modular framework for event-driven applications.
37+
</p>
38+
39+
<!-- NPM Install Command -->
40+
<div class="relative mt-6 md:flex items-center gap-2 w-full md:w-10/12 hidden lg:flex border border-white/5">
41+
<div class="relative flex content-center transition duration-500 items-center flex-col flex-nowrap gap-10 h-min justify-center overflow-visible p-px decoration-clone w-full">
42+
<div class="z-10 px-4 py-2 rounded-none w-full flex items-center justify-between">
43+
<div class="w-full flex items-center gap-2">
44+
<p class="md:text-sm text-xs font-mono select-none">
45+
<span><span class="text-blue-400">git(main):</span>
46+
<span class="text-pink-400"> $ </span></span>
47+
<span class="italic text-amber-600"></span>
48+
</p>
49+
<p class="relative inline tracking-tight opacity-90 mb-3 md:text-sm text-xs dark:text-white font-mono text-black">
50+
npm install
51+
<span class="relative dark:text-fuchsia-100 text-fuchsia-950">
52+
@glandjs/core
53+
<span class="absolute h-2 bg-gradient-to-tr from-white via-stone-200 to-stone-300 blur-3xl w-full top-0 left-2"></span>
54+
</span>
55+
</p>
56+
</div>
57+
<div class="flex gap-2 items-center">
58+
<a target="_blank" href="https://www.npmjs.com/">
59+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128">
60+
<path fill="#cb3837" d="M0 7.062C0 3.225 3.225 0 7.062 0h113.88c3.838 0 7.063 3.225 7.063 7.062v113.88c0 3.838-3.225 7.063-7.063 7.063H7.062c-3.837 0-7.062-3.225-7.062-7.063zm23.69 97.518h40.395l.05-58.532h19.494l-.05 58.581h19.543l.05-78.075l-78.075-.1l-.1 78.126z"></path>
61+
<path fill="#fff" d="M25.105 65.52V26.512H40.96c8.72 0 26.274.034 39.008.075l23.153.075v77.866H83.645v-58.54H64.057v58.54H25.105z"></path>
62+
</svg>
63+
</a>
64+
<a target="_blank" href="https://github.com/glandjs/gland">
65+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256">
66+
<g fill="none">
67+
<rect width="256" height="256" fill="#242938" rx="60"></rect>
68+
<path fill="#fff" d="M128.001 30C72.779 30 28 74.77 28 130.001c0 44.183 28.653 81.667 68.387 94.89c4.997.926 6.832-2.169 6.832-4.81c0-2.385-.093-10.262-.136-18.618c-27.82 6.049-33.69-11.799-33.69-11.799c-4.55-11.559-11.104-14.632-11.104-14.632c-9.073-6.207.684-6.079.684-6.079c10.042.705 15.33 10.305 15.33 10.305c8.919 15.288 23.394 10.868 29.1 8.313c.898-6.464 3.489-10.875 6.349-13.372c-22.211-2.529-45.56-11.104-45.56-49.421c0-10.918 3.906-19.839 10.303-26.842c-1.039-2.519-4.462-12.69.968-26.464c0 0 8.398-2.687 27.508 10.25c7.977-2.215 16.531-3.326 25.03-3.364c8.498.038 17.06 1.149 25.051 3.365c19.087-12.939 27.473-10.25 27.473-10.25c5.443 13.773 2.019 23.945.98 26.463c6.412 7.003 10.292 15.924 10.292 26.842c0 38.409-23.394 46.866-45.662 49.341c3.587 3.104 6.783 9.189 6.783 18.519c0 13.38-.116 24.149-.116 27.443c0 2.661 1.8 5.779 6.869 4.797C199.383 211.64 228 174.169 228 130.001C228 74.771 183.227 30 128.001 30M65.454 172.453c-.22.497-1.002.646-1.714.305c-.726-.326-1.133-1.004-.898-1.502c.215-.512.999-.654 1.722-.311c.727.326 1.141 1.01.89 1.508m4.919 4.389c-.477.443-1.41.237-2.042-.462c-.654-.697-.777-1.629-.293-2.078c.491-.442 1.396-.235 2.051.462c.654.706.782 1.631.284 2.078m3.374 5.616c-.613.426-1.615.027-2.234-.863c-.613-.889-.613-1.955.013-2.383c.621-.427 1.608-.043 2.236.84c.611.904.611 1.971-.015 2.406m5.707 6.504c-.548.604-1.715.442-2.57-.383c-.874-.806-1.118-1.95-.568-2.555c.555-.606 1.729-.435 2.59.383c.868.804 1.133 1.957.548 2.555m7.376 2.195c-.242.784-1.366 1.14-2.499.807c-1.13-.343-1.871-1.26-1.642-2.052c.235-.788 1.364-1.159 2.505-.803c1.13.341 1.871 1.252 1.636 2.048m8.394.932c.028.824-.932 1.508-2.121 1.523c-1.196.027-2.163-.641-2.176-1.452c0-.833.939-1.51 2.134-1.53c1.19-.023 2.163.639 2.163 1.459m8.246-.316c.143.804-.683 1.631-1.864 1.851c-1.161.212-2.236-.285-2.383-1.083c-.144-.825.697-1.651 1.856-1.865c1.183-.205 2.241.279 2.391 1.097"></path>
69+
</g>
70+
</svg>
71+
</a>
72+
</div>
73+
</div>
74+
<div class="flex-none inset-0 overflow-hidden absolute z-0 rounded-none bg-gradient-to-tl dark:from-amber-100/30 dark:via-zinc-900 dark:to-black blur-md opacity-50"></div>
75+
<div class="bg-zinc-950 absolute z-1 flex-none inset-[2px]"></div>
76+
</div>
77+
</div>
78+
79+
<!-- CTA Buttons -->
80+
<div class="mt-8 flex w-fit flex-col gap-4 font-sans md:flex-row md:justify-center lg:justify-start items-center">
81+
<a class="hover:shadow-sm dark:border-stone-100 dark:hover:shadow-sm border-2 border-white bg-transparent px-4 py-1.5 text-sm uppercase text-white shadow-[1px_1px_rgba(255,255,255),2px_2px_rgba(255,255,255),3px_3px_rgba(255,255,255),4px_4px_rgba(255,255,255),5px_5px_0px_0px_rgba(255,255,255)] transition duration-200 md:px-8" href="/docs">
82+
Get Started
83+
</a>
84+
85+
<button class="bg-stone-950 no-underline group cursor-pointer relative p-px text-xs font-semibold leading-6 text-white md:inline-block hidden" type="button">
86+
<span class="absolute inset-0 overflow-hidden rounded-sm">
87+
<span class="absolute inset-0 rounded-sm bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100"></span>
88+
</span>
89+
<div class="relative flex space-x-2 items-center z-10 rounded-none bg-zinc-950 py-2 px-4 ring-1 ring-white/10">
90+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus">
91+
<path d="M5 12h14"></path>
92+
<path d="M12 5v14"></path>
93+
</svg>
94+
<span>Create App</span>
95+
</div>
96+
<span class="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-stone-800/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40"></span>
97+
</button>
98+
</div>
99+
</div>
100+
</div>
101+
102+
<!-- Code window -->
103+
<div class="relative w-full h-full rounded-lg shadow-lg ">
104+
<!-- Copy button -->
105+
<button
106+
class="absolute top-6 right-6 text-gray-300 bg-gray-700 hover:bg-gray-600 rounded p-1 transition"
107+
onclick="navigator.clipboard.writeText(document.querySelector('#gland-code').innerText)"
108+
>
109+
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
110+
<rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
111+
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
112+
</svg>
113+
<span class="sr-only">Copy code</span>
114+
</button>
115+
<div class="absolute inset-0 z-0 rounded-lg blur-2xl opacity-30 "></div>
116+
<pre id="gland-code" class="language-typescript line-numbers !bg-transparent h-full w-full text-sm overflow-auto" is:raw>
117+
<code>import { Broker } from '@glandjs/events';
118+
const gland = new Broker();
119+
gland.on("great", (text) => {
120+
console.log("Hello", text);
121+
});
122+
gland.emit("great", 'world');
123+
</code>
124+
</pre>
125+
</div>
126+
127+
</div>
128+
</div>
129+
</section>

0 commit comments

Comments
 (0)