Skip to content

Commit 00cbd14

Browse files
mkaputmkaput
committed
Initial version of Scarb website
1 parent f584b27 commit 00cbd14

32 files changed

+8215
-0
lines changed

‎website/.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["next/core-web-vitals", "prettier"]
3+
}

‎website/.gitignore

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
.pnpm-debug.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎website/.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.next

‎website/.prettierrc.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"plugins": [
3+
"@trivago/prettier-plugin-sort-imports",
4+
"prettier-plugin-tailwindcss"
5+
]
6+
}

‎website/README.md

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Scarb Website
2+
3+
This is a [Next.js](https://nextjs.org/) project bootstrapped
4+
with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
5+
6+
## Getting Started
7+
8+
First, run the development server:
9+
10+
```bash
11+
npm run dev
12+
```
13+
14+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
15+
16+
You can start editing the page by modifying `pages/index.mdx`. The page auto-updates as you edit the file.
17+
18+
## Learn More
19+
20+
To learn more about Next.js, take a look at the following resources:
21+
22+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
23+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
24+
25+
## Credits
26+
27+
Because Scarb is greatly a copy of Cargo's design, this website includes portions of content of [Cargo] documentation,
28+
developed by the Rust project contributors.
29+
30+
[Cargo]: https://github.com/rust-lang/cargo

‎website/components/bigLink.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Link from "next/link";
2+
import { ComponentProps, ReactElement, ReactNode } from "react";
3+
4+
interface BigLinkProps extends ComponentProps<typeof Link> {
5+
text?: ReactNode;
6+
}
7+
8+
export function BigLink({ text, ...linkProps }: BigLinkProps): ReactElement {
9+
return (
10+
<p className="nx-mt-6 nx-leading-7 first:nx-mt-0 text-center text-lg">
11+
<Link
12+
rel="noreferrer"
13+
target="_blank"
14+
className="nx-text-primary-600 decoration-from-font [text-underline-position:from-font] hover:underline focus:underline"
15+
{...linkProps}
16+
>
17+
{text} →
18+
</Link>
19+
</p>
20+
);
21+
}

‎website/components/home/features.tsx

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { ReactElement, ReactNode } from "react";
2+
3+
const ICON_FILL = "fill-blue-100 dark:fill-darksea-80 opacity-20";
4+
const ICON_STROKE = "stroke-blue-100 dark:stroke-darksea-40";
5+
6+
const features: FeatureProps[] = [
7+
{
8+
icon: (
9+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
10+
<path
11+
fillRule="evenodd"
12+
clipRule="evenodd"
13+
d="M11 3C10.4477 3 10 3.44772 10 4V4.56876C10 4.99658 9.71288 5.36825 9.31776 5.53229C8.9225 5.6964 8.46228 5.63386 8.15966 5.33123L7.75734 4.92891C7.36681 4.53839 6.73365 4.53839 6.34312 4.92891L4.92891 6.34313C4.53838 6.73365 4.53838 7.36681 4.92891 7.75734L5.33123 8.15966C5.63386 8.46229 5.6964 8.9225 5.53229 9.31776C5.36825 9.71288 4.99658 10 4.56877 10L4 10C3.44772 10 3 10.4477 3 11V13C3 13.5523 3.44772 14 4 14H4.56879C4.99659 14 5.36825 14.2871 5.53228 14.6822C5.69638 15.0775 5.63384 15.5377 5.33123 15.8403L4.92889 16.2426C4.53837 16.6331 4.53837 17.2663 4.92889 17.6568L6.34311 19.071C6.73363 19.4616 7.36679 19.4616 7.75732 19.071L8.1596 18.6688C8.46223 18.3661 8.92247 18.3036 9.31774 18.4677C9.71287 18.6317 10 19.0034 10 19.4313V20C10 20.5523 10.4477 21 11 21H13C13.5523 21 14 20.5523 14 20V19.4312C14 19.0034 14.2871 18.6318 14.6822 18.4677C15.0775 18.3036 15.5377 18.3661 15.8403 18.6688L16.2426 19.071C16.6331 19.4616 17.2663 19.4616 17.6568 19.071L19.071 17.6568C19.4616 17.2663 19.4616 16.6331 19.071 16.2426L18.6688 15.8403C18.3661 15.5377 18.3036 15.0775 18.4677 14.6822C18.6318 14.2871 19.0034 14 19.4312 14H20C20.5523 14 21 13.5523 21 13V11C21 10.4477 20.5523 10 20 10L19.4313 10C19.0034 10 18.6317 9.71287 18.4677 9.31774C18.3036 8.92247 18.3661 8.46223 18.6688 8.1596L19.071 7.75734C19.4615 7.36681 19.4616 6.73365 19.071 6.34312L17.6568 4.92891C17.2663 4.53838 16.6331 4.53838 16.2426 4.92891L15.8403 5.33123C15.5377 5.63384 15.0775 5.69638 14.6822 5.53228C14.2871 5.36825 14 4.99659 14 4.56879V4C14 3.44772 13.5523 3 13 3H11ZM12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z"
14+
className={ICON_FILL}
15+
/>
16+
<path
17+
d="M11 3H13C13.5523 3 14 3.44772 14 4V4.56879C14 4.99659 14.2871 5.36825 14.6822 5.53228C15.0775 5.69638 15.5377 5.63384 15.8403 5.33123L16.2426 4.92891C16.6331 4.53838 17.2663 4.53838 17.6568 4.92891L19.071 6.34312C19.4616 6.73365 19.4615 7.36681 19.071 7.75734L18.6688 8.1596C18.3661 8.46223 18.3036 8.92247 18.4677 9.31774C18.6317 9.71287 19.0034 10 19.4313 10L20 10C20.5523 10 21 10.4477 21 11V13C21 13.5523 20.5523 14 20 14H19.4312C19.0034 14 18.6318 14.2871 18.4677 14.6822C18.3036 15.0775 18.3661 15.5377 18.6688 15.8403L19.071 16.2426C19.4616 16.6331 19.4616 17.2663 19.071 17.6568L17.6568 19.071C17.2663 19.4616 16.6331 19.4616 16.2426 19.071L15.8403 18.6688C15.5377 18.3661 15.0775 18.3036 14.6822 18.4677C14.2871 18.6318 14 19.0034 14 19.4312V20C14 20.5523 13.5523 21 13 21H11C10.4477 21 10 20.5523 10 20V19.4313C10 19.0034 9.71287 18.6317 9.31774 18.4677C8.92247 18.3036 8.46223 18.3661 8.1596 18.6688L7.75732 19.071C7.36679 19.4616 6.73363 19.4616 6.34311 19.071L4.92889 17.6568C4.53837 17.2663 4.53837 16.6331 4.92889 16.2426L5.33123 15.8403C5.63384 15.5377 5.69638 15.0775 5.53228 14.6822C5.36825 14.2871 4.99659 14 4.56879 14H4C3.44772 14 3 13.5523 3 13V11C3 10.4477 3.44772 10 4 10L4.56877 10C4.99658 10 5.36825 9.71288 5.53229 9.31776C5.6964 8.9225 5.63386 8.46229 5.33123 8.15966L4.92891 7.75734C4.53838 7.36681 4.53838 6.73365 4.92891 6.34313L6.34312 4.92891C6.73365 4.53839 7.36681 4.53839 7.75734 4.92891L8.15966 5.33123C8.46228 5.63386 8.9225 5.6964 9.31776 5.53229C9.71288 5.36825 10 4.99658 10 4.56876V4C10 3.44772 10.4477 3 11 3Z"
18+
className={ICON_STROKE}
19+
strokeWidth="1.5"
20+
/>
21+
<path
22+
d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z"
23+
className={ICON_STROKE}
24+
strokeWidth="1.5"
25+
/>
26+
</svg>
27+
),
28+
title: "Compile",
29+
desc: "Comes with built-in Cairo and StarkNet compiler, no need for setting up extra tooling.",
30+
},
31+
{
32+
icon: (
33+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
34+
<path
35+
d="M4 7H20V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V7Z"
36+
className={ICON_FILL}
37+
/>
38+
<path
39+
d="M15 11C15 12.6569 13.6569 14 12 14C10.3431 14 9 12.6569 9 11M20 7L18 3H6L4 7M20 7H4M20 7V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V7"
40+
className={ICON_STROKE}
41+
strokeWidth="1.5"
42+
strokeLinecap="round"
43+
strokeLinejoin="round"
44+
/>
45+
</svg>
46+
),
47+
title: "Install",
48+
desc: "Add, update and remove dependencies from the growing family of Cairo packages.",
49+
},
50+
{
51+
icon: (
52+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
53+
<path
54+
d="M7 4H17V12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12V4Z"
55+
className={ICON_FILL}
56+
/>
57+
<path
58+
d="M8 21H16M12 21V17M12 17C9.23858 17 7 14.7614 7 12V4H17V12C17 14.7614 14.7614 17 12 17ZM17 6H18.5C19.8807 6 21 7.11929 21 8.5C21 9.88071 19.8807 11 18.5 11H17M7 11H5.5C4.11929 11 3 9.88071 3 8.5C3 7.11929 4.11929 6 5.5 6H7"
59+
className={ICON_STROKE}
60+
strokeWidth="1.5"
61+
strokeLinecap="round"
62+
strokeLinejoin="round"
63+
/>
64+
</svg>
65+
),
66+
title: "Develop",
67+
desc: "Great support in the rest of Cairo ecosystem. Out of the box works with Cairo Language Server and Protostar.",
68+
},
69+
];
70+
71+
export function Features(): ReactElement {
72+
return (
73+
<section className="mb-16 grid gap-8 rounded-3xl bg-sea-40 p-12 text-blue-100 shadow-xl shadow-sea-20 dark:bg-black-40 dark:text-darksea-20 dark:shadow-black sm:grid-cols-2 md:grid-cols-3">
74+
{features.map((feature, i) => (
75+
<Feature key={i} {...feature} />
76+
))}
77+
</section>
78+
);
79+
}
80+
81+
interface FeatureProps {
82+
icon: ReactNode;
83+
title: ReactNode;
84+
desc: ReactNode;
85+
}
86+
87+
function Feature({ icon, title, desc }: FeatureProps): ReactElement {
88+
return (
89+
<div className="flex flex-col justify-center space-y-4 text-center">
90+
<div className="mx-auto w-24">{icon}</div>
91+
<p className="mx-auto w-32 rounded-xl bg-sea-20 p-1 text-lg font-bold dark:bg-black-60">
92+
{title}
93+
</p>
94+
<p>{desc}</p>
95+
</div>
96+
);
97+
}

‎website/components/home/jumbo.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { Terminal } from "@/components/terminal";
2+
import Link from "next/link";
3+
import { ReactElement } from "react";
4+
5+
export function Jumbo(): ReactElement {
6+
return (
7+
<div className="flex flex-col items-center justify-center gap-20 py-16 text-center lg:flex-row">
8+
<div className="flex max-w-[30em] flex-col space-y-8">
9+
<p className="text-4xl font-light text-blue-60 dark:text-darkblue-20">
10+
The build toolchain and package manager for Cairo and Starknet
11+
ecosystems
12+
</p>
13+
<Download />
14+
</div>
15+
<Terminal
16+
lines={[
17+
"scarb init --name hello_world",
18+
<>
19+
scarb add quaireaux --git{" "}
20+
<span style={{ userSelect: "none" }}>
21+
\<br />
22+
&nbsp;&nbsp;&nbsp;&nbsp;
23+
</span>
24+
https://github.com/keep-starknet-strange/quaireaux.git
25+
</>,
26+
"scarb build",
27+
]}
28+
/>
29+
</div>
30+
);
31+
}
32+
33+
function Download(): ReactElement {
34+
return (
35+
<Link
36+
href="/download"
37+
className="mx-auto flex bg-blue-80 px-6 py-4 text-xl font-medium text-white transition hover:bg-blue-100 focus:bg-blue-100"
38+
>
39+
<DownloadIcon />
40+
Download
41+
</Link>
42+
);
43+
}
44+
45+
function DownloadIcon() {
46+
return (
47+
<svg
48+
viewBox="0 0 24 24"
49+
fill="none"
50+
xmlns="http://www.w3.org/2000/svg"
51+
className="mr-[.5em] w-[1em]"
52+
>
53+
<path
54+
d="M20 15V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18L4 15M8 11L12 15M12 15L16 11M12 15V3"
55+
className="stroke-white"
56+
strokeWidth="1.5"
57+
strokeLinecap="round"
58+
strokeLinejoin="round"
59+
/>
60+
</svg>
61+
);
62+
}

‎website/components/logo.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React, { ReactElement } from "react";
2+
3+
export function Logo(): ReactElement {
4+
return (
5+
<span className="bg-gradient-to-br from-sea-80 to-blue-80 bg-clip-text text-xl font-extrabold uppercase tracking-wide text-transparent dark:from-darksea-60 dark:to-darkblue-60">
6+
Scarb
7+
</span>
8+
);
9+
}

‎website/components/swm.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import swm from "../public/swm.svg";
2+
import Image from "next/image";
3+
import React, { ReactElement } from "react";
4+
5+
export function SWM(): ReactElement {
6+
return (
7+
<a
8+
href="https://swmansion.com/"
9+
target="_blank"
10+
rel="noopener noreferrer"
11+
className="opacity-25 transition-opacity hover:opacity-100 focus:opacity-100 active:opacity-100"
12+
>
13+
<Image src={swm} alt="Software Mansion" />
14+
</a>
15+
);
16+
}

‎website/components/terminal.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { ReactElement, ReactNode } from "react";
2+
3+
export interface TerminalProps {
4+
lines: ReactNode[];
5+
}
6+
7+
export function Terminal({ lines }: TerminalProps): ReactElement {
8+
return (
9+
<div className="h-full overflow-hidden rounded-lg bg-black-40 px-5 pt-4 pb-6 text-left font-mono text-sm leading-normal text-white-40 subpixel-antialiased shadow-xl">
10+
<div className="top mb-2 flex gap-2">
11+
<div className="h-3 w-3 rounded-full bg-red-100" />
12+
<div className="h-3 w-3 rounded-full bg-yellow-100" />
13+
<div className="h-3 w-3 rounded-full bg-green-100" />
14+
</div>
15+
<div className="mt-4 flex flex-col">
16+
{lines.map((prompt, i) => (
17+
<p key={i} className="typing flex-1 items-center">
18+
<span className="text-green-100" style={{ userSelect: "none" }}>
19+
${" "}
20+
</span>
21+
{prompt}
22+
<br />
23+
</p>
24+
))}
25+
</div>
26+
</div>
27+
);
28+
}

‎website/globals.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@tailwind utilities;

‎website/next-env.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎website/next.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
reactStrictMode: true,
4+
};
5+
6+
const withNextra = require("nextra")({
7+
theme: "nextra-theme-docs",
8+
themeConfig: "./theme.config.tsx",
9+
});
10+
11+
module.exports = withNextra(nextConfig);

0 commit comments

Comments
 (0)