Skip to content

Commit 76a9eed

Browse files
arivveraarivvera
committed
Rework Usage and Installation sections
Move the `Usage` and `Installation` sections from the `GetStarted` componet into their own components. Update the design of each of these sections.
1 parent c8af75b commit 76a9eed

File tree

6 files changed

+125
-137
lines changed

6 files changed

+125
-137
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
"@types/react": "^19.0.10",
1515
"@types/react-dom": "^19.0.4",
1616
"astro": "^5.3.1",
17-
"cascarilla": "^1.1.3",
1817
"lucide-astro": "^0.473.0",
1918
"react": "^19.0.0",
2019
"react-dom": "^19.0.0",

‎src/components/landing/Mascot.astro‎

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

‎src/components/landing/Usage.astro‎

Lines changed: 58 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -3,68 +3,69 @@ import { Scroll } from "lucide-astro";
33
---
44

55
<div
6-
class="flex flex-col gap-6 rounded-2xl border border-purple-500/20 bg-purple-500/[0.02] p-6"
6+
class="flex flex-col gap-6 rounded-2xl border border-purple-500/20 bg-purple-500/[0.02] p-6"
77
>
8-
<h3 class="text-xl font-semibold text-purple-200">Usage</h3>
8+
<h3 class="text-xl font-semibold text-purple-200">Usage</h3>
99

10-
<div class="flex flex-col gap-4">
11-
<p class="text-purple-200/70">
12-
Locate your application's root component, then just import <code
13-
><b>cascarilla</b></code
14-
> as a regular node package. That's it 😎!
15-
</p>
10+
<div class="flex flex-col gap-4">
11+
<p class="text-purple-200/70">
12+
Locate your application's root component, then just import <code
13+
><b>cascarilla</b></code
14+
> as a regular node package. That's it 😎!
15+
</p>
1616

17-
<p class="text-purple-200/70">
18-
This way your blessing will be displayed on your server logs or in the
19-
browser's console, depending on where is your root component being
20-
rendered.
21-
</p>
17+
<p class="text-purple-200/70">
18+
This way your blessing will be displayed on your server logs or in
19+
the browser's console, depending on where is your root component
20+
being rendered.
21+
</p>
2222

23-
<div class="rounded-lg bg-black/50 p-4">
24-
<div class="flex items-center justify-between">
25-
<code class="text-pink-400">
26-
<span class="text-purple-400">import</span>
27-
<span class="text-green-400">'cascarilla'</span>;
28-
</code>
29-
<button
30-
class="ml-2 rounded-md p-1 text-purple-400 hover:bg-purple-500/10 hover:text-purple-300"
31-
id="copy-import"
32-
>
33-
<Scroll class="h-4 w-4" />
34-
<span class="sr-only">Copy to clipboard</span>
35-
</button>
36-
</div>
23+
<div class="rounded-lg bg-black/50 p-4">
24+
<div class="flex items-center justify-between">
25+
<code class="text-pink-400">
26+
<span class="text-purple-400">import</span>
27+
<span class="text-green-400">'cascarilla'</span>;
28+
</code>
29+
<button
30+
class="ml-2 rounded-md p-1 text-purple-400 hover:bg-purple-500/10 hover:text-purple-300"
31+
id="copy-import"
32+
>
33+
<Scroll class="h-4 w-4" />
34+
<span class="sr-only">Copy to clipboard</span>
35+
</button>
36+
</div>
37+
</div>
3738
</div>
38-
</div>
3939

40-
<div class="flex flex-col gap-4">
41-
<p class="text-purple-200/70">
42-
Alternatively you can also add an old school <b
43-
><code>{"<script>"}</code></b
44-
> tag 📼 to your application's entry point, with a link to the <code
45-
>cascarilla</code
46-
> script, as shown below.
47-
</p>
48-
<p class="text-purple-200/70">
49-
This ensure the blessings stay in the browser 😉.
50-
</p>
51-
<div class="rounded-lg bg-black/50 p-4">
52-
<div class="flex items-center justify-between">
53-
<code class="text-pink-400">
54-
<span class="text-purple-400">{"<script"}</span>
55-
<span class="text-green-400 break-all">
56-
src='https://cdn.jsdelivr.net/gh/CuCodersCommunity/cascarilla.js@script/cascarilla.js'
57-
</span>
58-
<span class="text-purple-400">{"/>"}</span>
59-
</code>
60-
<button
61-
class="ml-2 rounded-md p-1 text-purple-400 hover:bg-purple-500/10 hover:text-purple-300"
62-
id="copy-import"
63-
>
64-
<Scroll class="h-4 w-4" />
65-
<span class="sr-only">Copy to clipboard</span>
66-
</button>
67-
</div>
40+
<div class="flex flex-col gap-4">
41+
<p class="text-purple-200/70">
42+
Alternatively you can also add an old school <b
43+
><code>{"<script>"}</code></b
44+
> tag 📼 to your application's entry point, with a link to the <code
45+
>cascarilla</code
46+
> script, as shown below.
47+
</p>
48+
<p class="text-purple-200/70">
49+
This ensure the blessings stay in the browser 😉.
50+
</p>
51+
<div class="rounded-lg bg-black/50 p-4">
52+
<div class="flex items-center justify-between">
53+
<code class="text-pink-400">
54+
<span class="text-purple-400">{"<script"}</span>
55+
<span class="text-green-400 break-all">
56+
src='https://cdn.jsdelivr.net/gh/CuCodersCommunity/cascarilla.js@script/index.js'
57+
defer
58+
</span>
59+
<span class="text-purple-400">{"/>"}</span>
60+
</code>
61+
<button
62+
class="ml-2 rounded-md p-1 text-purple-400 hover:bg-purple-500/10 hover:text-purple-300"
63+
id="copy-import"
64+
>
65+
<Scroll class="h-4 w-4" />
66+
<span class="sr-only">Copy to clipboard</span>
67+
</button>
68+
</div>
69+
</div>
6870
</div>
69-
</div>
7071
</div>

‎src/layouts/Layout.astro‎

Lines changed: 66 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,76 @@
11
---
22
import "../styles/global.css";
3-
import "cascarilla";
43
---
54

65
<!doctype html>
76
<html lang="en">
8-
<head>
9-
<link rel="preconnect" href="https://fonts.googleapis.com" />
10-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11-
<link
12-
href="https://fonts.googleapis.com/css2?family=Knewave&display=swap"
13-
rel="stylesheet"
14-
/>
15-
<meta charset="UTF-8" />
16-
<meta name="viewport" content="width=device-width" />
17-
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
18-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
19-
<link rel="shortcut icon" href="/favicon.ico" />
20-
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
21-
<link rel="manifest" href="/site.webmanifest" />
22-
<meta name="generator" content={Astro.generator} />
23-
<meta
24-
name="keywords"
25-
content="cascarilla, javascript, library, vibes, aché, npm, package, cuban, typescript"
26-
/>
27-
<meta
28-
property="description"
29-
content="Give Your Website Good Vibes and Aché with Cascarilla.js"
30-
/>
31-
<meta property="og:title" content="Cascarilla.js | The Vibes Library" />
32-
<meta
33-
property="og:description"
34-
content="Give Your Website Good Vibes and Aché with Cascarilla.js"
35-
/>
36-
<meta
37-
property="og:image"
38-
content="https://cascarilla.pages.dev/cascarilla.js-social.webp"
39-
/>
40-
<meta property="og:url" content="https://cascarilla.pages.dev/" />
41-
<meta property="og:site_name" content="Cascarilla.js" />
42-
<meta property="og:type" content="website" />
43-
<title>Cascarilla.js</title>
44-
<script
45-
src="https://cdn.jsdelivr.net/gh/CuCodersCommunity/cascarilla.js@vvia-script/index.js"
46-
></script>
47-
<script type="application/ld+json">
48-
{
49-
"@context": "https://schema.org",
50-
"@type": "Organization",
51-
"name": "Cascarilla.js",
52-
"url": "https://cascarilla.pages.dev/",
53-
"logo": "/src/assets/images/favicon.svg",
54-
"description": "Give Your Website Good Vibes and Aché with Cascarilla.js",
55-
"sameAs": ["https://github.com/CuCodersCommunity/cascarilla.js"]
56-
}
57-
</script>
58-
</head>
59-
<body>
60-
<slot />
61-
</body>
7+
<head>
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Knewave&display=swap"
12+
rel="stylesheet"
13+
/>
14+
<meta charset="UTF-8" />
15+
<meta name="viewport" content="width=device-width" />
16+
<link
17+
rel="icon"
18+
type="image/png"
19+
href="/favicon-96x96.png"
20+
sizes="96x96"
21+
/>
22+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
23+
<link rel="shortcut icon" href="/favicon.ico" />
24+
<link
25+
rel="apple-touch-icon"
26+
sizes="180x180"
27+
href="/apple-touch-icon.png"
28+
/>
29+
<link rel="manifest" href="/site.webmanifest" />
30+
<meta name="generator" content={Astro.generator} />
31+
<meta
32+
name="keywords"
33+
content="cascarilla, javascript, library, vibes, aché, npm, package, cuban, typescript"
34+
/>
35+
<meta
36+
property="description"
37+
content="Give Your Website Good Vibes and Aché with Cascarilla.js"
38+
/>
39+
<meta property="og:title" content="Cascarilla.js | The Vibes Library" />
40+
<meta
41+
property="og:description"
42+
content="Give Your Website Good Vibes and Aché with Cascarilla.js"
43+
/>
44+
<meta
45+
property="og:image"
46+
content="https://cascarilla.pages.dev/cascarilla.js-social.webp"
47+
/>
48+
<meta property="og:url" content="https://cascarilla.pages.dev/" />
49+
<meta property="og:site_name" content="Cascarilla.js" />
50+
<meta property="og:type" content="website" />
51+
<title>Cascarilla.js</title>
52+
<script type="application/ld+json">
53+
{
54+
"@context": "https://schema.org",
55+
"@type": "Organization",
56+
"name": "Cascarilla.js",
57+
"url": "https://cascarilla.pages.dev/",
58+
"logo": "/src/assets/images/favicon.svg",
59+
"description": "Give Your Website Good Vibes and Aché with Cascarilla.js",
60+
"sameAs": ["https://github.com/CuCodersCommunity/cascarilla.js"]
61+
}
62+
</script>
63+
</head>
64+
<body>
65+
<slot />
66+
</body>
6267
</html>
6368

6469
<style>
65-
html,
66-
body {
67-
margin: 0;
68-
width: 100%;
69-
height: 100%;
70-
}
70+
html,
71+
body {
72+
margin: 0;
73+
width: 100%;
74+
height: 100%;
75+
}
7176
</style>

‎src/pages/index.astro‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
---
2-
import "cascarilla";
32
import Landing from "../components/landing/Landing.astro";
43
import Layout from "../layouts/Layout.astro";
54
---
65

76
<Layout>
8-
<Landing />
7+
<Landing />
98
</Layout>

0 commit comments

Comments
 (0)