Skip to content

Commit f0f7bb7

Browse files
tonyaellietonyaellie
committed
feat: switch to use layout
1 parent eaed5ba commit f0f7bb7

File tree

4 files changed

+170
-202
lines changed

4 files changed

+170
-202
lines changed

‎src/components/Layout.astro

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
import { Image } from '@astrojs/image/components';
3+
const { title } = Astro.props;
4+
---
5+
6+
<html lang="en">
7+
<head>
8+
<meta charset="utf-8" />
9+
<link rel="icon" type="image/ico" href="/favicon.ico" />
10+
<meta name="viewport" content="width=device-width" />
11+
<meta name="generator" content="Rustular 0.0.0" />
12+
<title>{title} - Rustular</title>
13+
</head>
14+
<body class="bg-slate-950 font-sans text-white">
15+
<header class="mb-16 flex h-16 items-center border-b border-slate-700">
16+
<Image
17+
class="ml-2 w-10"
18+
src="/assets/rustular.png"
19+
alt="Rust Logo"
20+
width={128}
21+
height={128}
22+
/>
23+
<a class="pl-2 font-mono text-3xl font-bold" href="/">Rustular</a>
24+
</header>
25+
<slot />
26+
</body>
27+
</html>

‎src/pages/docs.astro

Lines changed: 42 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,47 @@
11
---
2-
import { Image } from '@astrojs/image/components';
2+
import Layout from '../components/Layout.astro';
33
---
44

5-
<html lang="en">
6-
<head>
7-
<meta charset="utf-8" />
8-
<link rel="icon" type="image/ico" href="/favicon.ico" />
9-
<meta name="viewport" content="width=device-width" />
10-
<meta name="generator" content="Rustular 0.0.0" />
11-
<title>Rustular</title>
12-
</head>
13-
<body class="bg-slate-950 font-sans text-white">
14-
<div class="mb-16 flex h-16 items-center border-b border-slate-700">
15-
<Image
16-
class="ml-2 w-10"
17-
src="/assets/rustular.png"
18-
alt="Rust Logo"
19-
width={128}
20-
height={128}
21-
/>
22-
<a class="pl-2 font-mono text-3xl font-bold" href="/">Rustular</a>
23-
</div>
24-
<div class="mx-auto max-w-xl space-y-4 font-thin">
25-
<h2 class="text-3xl font-normal">Overview</h2>
26-
<p>
27-
Rustular is designed to revolutionize the way web applications are
28-
developed. By leveraging Rust's performance and memory safety,
29-
WebAssembly's efficient execution, and Angular's powerful UI framework,
30-
Rustular provides a robust and high-performing solution for building web
31-
applications.
32-
</p>
5+
<Layout title="Docs">
6+
<div class="mx-auto max-w-xl space-y-4 font-thin">
7+
<h2 class="text-3xl font-normal">Overview</h2>
8+
<p>
9+
Rustular is designed to revolutionize the way web applications are
10+
developed. By leveraging Rust's performance and memory safety,
11+
WebAssembly's efficient execution, and Angular's powerful UI framework,
12+
Rustular provides a robust and high-performing solution for building web
13+
applications.
14+
</p>
3315

34-
<h2 class="text-3xl font-normal">Key Features</h2>
35-
<ul class="list-disc">
36-
<li>
37-
<strong>Enhanced Performance:</strong> Rustular harnesses the power of
38-
Rust and WebAssembly to deliver lightning-fast web applications. The use
39-
of highly performant Rust build servers and WebAssembly modules ensures
40-
optimal performance and efficient resource utilization.
41-
</li>
42-
<li>
43-
<strong>Modular Architecture:</strong> Rustular embraces modularity by
44-
converting each individual component of a web app into its own dedicated
45-
Angular application. This approach allows for easy maintenance, code reuse,
46-
and independent updates to specific components without the need for recompiling
47-
the entire application.
48-
</li>
49-
<li>
50-
<strong>Seamless Integration:</strong> With Rustular, integrating WebAssembly
51-
modules into your Angular application is a breeze. The use of <code
52-
>WebAssembly.instantiateStreaming()</code
53-
> enables effortless integration and dynamic loading of the component modules,
54-
resulting in a seamless and efficient development experience.
55-
</li>
56-
<li>
57-
<strong>CSS Optimization:</strong> Rustular optimizes CSS styling by converting
58-
key-value pairs into respective hexadecimal values. This approach streamlines
59-
the rendering process and improves overall application performance.
60-
</li>
61-
</ul>
16+
<h2 class="text-3xl font-normal">Key Features</h2>
17+
<ul class="list-disc">
18+
<li>
19+
<strong>Enhanced Performance:</strong> Rustular harnesses the power of Rust
20+
and WebAssembly to deliver lightning-fast web applications. The use of highly
21+
performant Rust build servers and WebAssembly modules ensures optimal performance
22+
and efficient resource utilization.
23+
</li>
24+
<li>
25+
<strong>Modular Architecture:</strong> Rustular embraces modularity by converting
26+
each individual component of a web app into its own dedicated Angular application.
27+
This approach allows for easy maintenance, code reuse, and independent updates
28+
to specific components without the need for recompiling the entire application.
29+
</li>
30+
<li>
31+
<strong>Seamless Integration:</strong> With Rustular, integrating WebAssembly
32+
modules into your Angular application is a breeze. The use of <code
33+
>WebAssembly.instantiateStreaming()</code
34+
> enables effortless integration and dynamic loading of the component modules,
35+
resulting in a seamless and efficient development experience.
36+
</li>
37+
<li>
38+
<strong>CSS Optimization:</strong> Rustular optimizes CSS styling by converting
39+
key-value pairs into respective hexadecimal values. This approach streamlines
40+
the rendering process and improves overall application performance.
41+
</li>
42+
</ul>
6243

63-
<h2 class="text-3xl font-normal">Getting Started</h2>
64-
<p>Rustular is currently under development. Please check back later.</p>
65-
</div>
66-
</body>
67-
</html>
44+
<h2 class="text-3xl font-normal">Getting Started</h2>
45+
<p>Rustular is currently under development. Please check back later.</p>
46+
</div>
47+
</Layout>

‎src/pages/index.astro

Lines changed: 97 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,109 @@
11
---
22
import { Image } from '@astrojs/image/components';
3+
import Layout from '../components/Layout.astro';
34
---
45

5-
<html lang="en">
6-
<head>
7-
<meta charset="utf-8" />
8-
<link rel="icon" type="image/ico" href="/favicon.ico" />
9-
<meta name="viewport" content="width=device-width" />
10-
<meta name="generator" content="Rustular 0.0.0" />
11-
<title>Rustular</title>
12-
</head>
13-
<body class="bg-slate-950 font-sans text-white">
14-
<div class="h-screen">
15-
<div class="mb-16 flex h-16 items-center border-b border-slate-700">
16-
<Image
17-
class="ml-2 w-10"
18-
src="/assets/rustular.png"
19-
alt="Rust Logo"
20-
width={128}
21-
height={128}
22-
/>
23-
<a class="pl-2 font-mono text-3xl font-bold" href="/">Rustular</a>
24-
</div>
25-
<div class="mx-auto flex max-w-xl flex-col space-y-16 text-center">
26-
<div class="text-5xl">Blazingly fast</div>
27-
<div class="font-thin">
28-
Rustular is a revolutionary web development tool that harnesses the
29-
immense power of Rust, WebAssembly, and Angular. By leveraging these
30-
cutting-edge technologies, Rustular empowers developers to create
31-
lightning-fast and highly modular web applications. With its advanced
32-
performance optimizations and seamless integration capabilities,
33-
Rustular sets a new standard for building efficient and scalable web
34-
experiences.
35-
</div>
36-
<div class="mx-auto flex space-x-8">
37-
<a
38-
class="rounded-full border-2 border-white bg-white px-8 py-4 text-fuchsia-600 hover:border-slate-200 hover:bg-slate-200"
39-
href="/docs"
40-
>
41-
Get Started
42-
</a>
43-
<div
44-
class="cursor-copy select-none border-2 border-fuchsia-600 p-4"
45-
onclick="navigator.clipboard.writeText('pnpm create rustular-app')"
46-
>
47-
{'> pnpm create rustular-app'}
48-
</div>
49-
</div>
50-
<div>
51-
Powered by:
52-
<Image
53-
class="mx-auto w-1/4"
54-
src="/assets/angular.png"
55-
alt="Angular Logo"
56-
width={269}
57-
height={72}
58-
/>
59-
<Image
60-
class="mx-auto w-1/4"
61-
src="/assets/rust.png"
62-
alt="Rust Logo"
63-
width={265}
64-
height={164}
65-
/>
66-
<Image
67-
class="mx-auto w-1/4"
68-
src="/assets/webassembly.png"
69-
alt="Web Assembly Logo"
70-
width={211}
71-
height={120}
72-
/>
73-
</div>
74-
</div>
6+
<Layout title="Home">
7+
<div class="mx-auto flex max-w-xl flex-col space-y-16 text-center">
8+
<div class="text-5xl">Blazingly fast</div>
9+
<div class="font-thin">
10+
Rustular is a revolutionary web development tool that harnesses the
11+
immense power of Rust, WebAssembly, and Angular. By leveraging these
12+
cutting-edge technologies, Rustular empowers developers to create
13+
lightning-fast and highly modular web applications. With its advanced
14+
performance optimizations and seamless integration capabilities, Rustular
15+
sets a new standard for building efficient and scalable web experiences.
7516
</div>
76-
<div class="mb-8 space-y-4 text-center">
77-
<div class="text-2xl">
78-
Faster than any other <span class="text-[0.4rem]">tested</span> framework!
79-
</div>
80-
<div class="mx-auto max-w-xl font-thin">
81-
We believe speed is crucial for all websites. Faster website loading
82-
leads to increased revenue. That's why Rustular is designed to
83-
prioritize speed. With its exceptionally fast loading times, your
84-
customers won't have to wait.
85-
</div>
86-
<Image
87-
class="mx-auto"
88-
src="/assets/speed.png"
89-
alt="Rustular"
90-
width={476}
91-
height={479}
92-
/>
93-
<div class="text-2xl">Fully open-source and community-driven!</div>
94-
<div class="mx-auto max-w-xl font-thin">
95-
Rustular is fully open-source and community-driven. We believe that
96-
open-source software is the future of web development. That's why we
97-
made Rustular open-source. We want to empower developers to create
98-
amazing web experiences. The Rustular community is always growing, and
99-
we'd love for you to join us! Visit our{' '}
100-
<a class="underline" href="https://github.com/lofimichael/rustular">
101-
GitHub</a
102-
> and even <a
103-
class="underline"
104-
href="https://github.com/tonyaellie/rustular">this website's github</a
105-
>! to learn more.
106-
</div>
107-
<div class="text-2xl">The idea!</div>
108-
<div class="mx-auto max-w-xl font-thin">
109-
Take your standard web app (i.e. React, Vue, Next, Angular, etc.) and
110-
convert each individual component (button, div, etc.) into it's own
111-
dedicated Angular application. Convert each component application into
112-
individual WASM modules via wasm-bindgen (using a highly performant Rust
113-
build server), and import each module application into a mothership
114-
Angular application using WebAssembly.instantiateStreaming()., where the
115-
target is all your WASM modules. CSS becomes optimized by converting
116-
every key-value into respective hexadecimal values. If you ever change a
117-
single element, you dont have to recompile your entire application --
118-
just the individual WASM module.
119-
</div>
120-
<div class="pb-8 text-5xl">Start building with Rustular today</div>
17+
<div class="mx-auto flex space-x-8">
12118
<a
12219
class="rounded-full border-2 border-white bg-white px-8 py-4 text-fuchsia-600 hover:border-slate-200 hover:bg-slate-200"
12320
href="/docs"
12421
>
12522
Get Started
12623
</a>
24+
<div
25+
class="cursor-copy select-none border-2 border-fuchsia-600 p-4"
26+
onclick="navigator.clipboard.writeText('pnpm create rustular-app')"
27+
>
28+
{'> pnpm create rustular-app'}
29+
</div>
30+
</div>
31+
<div>
32+
Powered by:
33+
<Image
34+
class="mx-auto w-1/4"
35+
src="/assets/angular.png"
36+
alt="Angular Logo"
37+
width={269}
38+
height={72}
39+
/>
40+
<Image
41+
class="mx-auto w-1/4"
42+
src="/assets/rust.png"
43+
alt="Rust Logo"
44+
width={265}
45+
height={164}
46+
/>
47+
<Image
48+
class="mx-auto w-1/4"
49+
src="/assets/webassembly.png"
50+
alt="Web Assembly Logo"
51+
width={211}
52+
height={120}
53+
/>
54+
</div>
55+
</div>
56+
57+
<div class="mb-8 space-y-4 text-center">
58+
<div class="text-2xl">
59+
Faster than any other <span class="text-[0.4rem]">tested</span> framework!
60+
</div>
61+
<div class="mx-auto max-w-xl font-thin">
62+
We believe speed is crucial for all websites. Faster website loading leads
63+
to increased revenue. That's why Rustular is designed to prioritize speed.
64+
With its exceptionally fast loading times, your customers won't have to
65+
wait.
66+
</div>
67+
<Image
68+
class="mx-auto"
69+
src="/assets/speed.png"
70+
alt="Rustular"
71+
width={476}
72+
height={479}
73+
/>
74+
<div class="text-2xl">Fully open-source and community-driven!</div>
75+
<div class="mx-auto max-w-xl font-thin">
76+
Rustular is fully open-source and community-driven. We believe that
77+
open-source software is the future of web development. That's why we made
78+
Rustular open-source. We want to empower developers to create amazing web
79+
experiences. The Rustular community is always growing, and we'd love for
80+
you to join us! Visit our{' '}
81+
<a class="underline" href="https://github.com/lofimichael/rustular">
82+
GitHub</a
83+
> and even <a
84+
class="underline"
85+
href="https://github.com/tonyaellie/rustular">this website's github</a
86+
>! to learn more.
87+
</div>
88+
<div class="text-2xl">The idea!</div>
89+
<div class="mx-auto max-w-xl font-thin">
90+
Take your standard web app (i.e. React, Vue, Next, Angular, etc.) and
91+
convert each individual component (button, div, etc.) into it's own
92+
dedicated Angular application. Convert each component application into
93+
individual WASM modules via wasm-bindgen (using a highly performant Rust
94+
build server), and import each module application into a mothership
95+
Angular application using WebAssembly.instantiateStreaming(), where the
96+
target is all your WASM modules. CSS becomes optimized by converting every
97+
key-value into respective hexadecimal values. If you ever change a single
98+
element, you dont have to recompile your entire application -- just the
99+
individual WASM module.
127100
</div>
128-
</body>
129-
</html>
101+
<div class="pb-8 text-5xl">Start building with Rustular today</div>
102+
<a
103+
class="rounded-full border-2 border-white bg-white px-8 py-4 text-fuchsia-600 hover:border-slate-200 hover:bg-slate-200"
104+
href="/docs"
105+
>
106+
Get Started
107+
</a>
108+
</div>
109+
</Layout>

‎src/pages/standup.astro

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,8 @@
11
---
2-
import { Image } from '@astrojs/image/components';
32
import StandUp from '../components/Standup';
3+
import Layout from '../components/Layout.astro';
44
---
55

6-
<html lang="en">
7-
<head>
8-
<meta charset="utf-8" />
9-
<link rel="icon" type="image/ico" href="/favicon.ico" />
10-
<meta name="viewport" content="width=device-width" />
11-
<meta name="generator" content="Rustular 0.0.0" />
12-
<title>Rustular</title>
13-
</head>
14-
<body class="bg-slate-950 font-sans text-white">
15-
<div class="mb-16 flex h-16 items-center border-b border-slate-700">
16-
<Image
17-
class="ml-2 w-10"
18-
src="/assets/rustular.png"
19-
alt="Rust Logo"
20-
width={128}
21-
height={128}
22-
/>
23-
<a class="pl-2 font-mono text-3xl font-bold" href="/">Rustular</a>
24-
</div>
25-
<StandUp client:load />
26-
</body>
27-
</html>
6+
<Layout slot="Stand Up">
7+
<StandUp client:load />
8+
</Layout>

0 commit comments

Comments
 (0)