Skip to content

Commit cd543ce

Browse files
AttAdityaAttAditya
committed
feat: Visual About Section
1 parent a6077ed commit cd543ce

14 files changed

Lines changed: 209 additions & 50 deletions

File tree

‎portable/src/assets/assets.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ const assetData = {
77
} as const;
88

99
export type AssetName = (keyof typeof assetData);
10-
1110
export function useAsset(assetName: AssetName): string {
1211
return assetData[assetName];
1312
}

‎portable/src/components/block/about.tsx‎

Lines changed: 23 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import { CodeFile } from "@components/block/code-file";
12
import { Section } from "@components/kit/section";
3+
import { Container } from "@components/ui/structure/container";
24
import { Heading } from "@components/ui/text/heading";
3-
import { LineBreak } from "@components/ui/text/line-break";
45
import { Text } from "@components/ui/text/text";
56
import { useClasses } from "@styles";
67

@@ -11,36 +12,29 @@ export function About() {
1112
What's GraphScript?
1213
</Heading>
1314

14-
<Text>
15-
<Text>
16-
Software development is about solving problems and building
17-
solutions, not just writing code. It's more inclined towards
18-
building logical workflows and processes, rather than just
19-
writing lines of code.
20-
</Text>
15+
<Container className={useClasses("about-content")}>
16+
<Container className={useClasses("about-visual")}>
17+
<CodeFile
18+
fileName="AI-Chatbot-Logic.gsam"
2119

22-
<LineBreak />
23-
<Text>
24-
GraphScript is a visual scripting ecosystem that focuses on
25-
the logical and flow aspects of software development rather than
26-
the typical code-centric approach.
27-
</Text>
20+
code={[
21+
"Wait for input",
22+
"Send input to AI",
23+
"Receive output from AI",
24+
"Send output to user",
25+
"Go to Start and repeat",
26+
]}
27+
/>
28+
</Container>
2829

29-
<LineBreak />
30-
<Text>
31-
It provides a visual interface where developers can create
32-
complex workflows and processes by creating and connecting nodes
33-
that represent different operations, data transformations, and
34-
control flow elements.
35-
</Text>
36-
37-
<LineBreak />
38-
<Text>
39-
This allows developers to focus on the logical structure of their
40-
applications without getting bogged down in the syntax and details
41-
of writing code.
42-
</Text>
43-
</Text>
30+
<Container className={useClasses("about-description")}>
31+
<Text className={useClasses("about-text")}>
32+
Instead of Syntax that only computer, god and for a small
33+
period of time a few humans can understand, use flowcharts
34+
to write your code.
35+
</Text>
36+
</Container>
37+
</Container>
4438
</Section>
4539
);
4640
}

‎portable/src/components/block/code-file.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Xmark, XRegular } from "@attaditya/iconoir-preact";
2+
import { CodeBlock } from "@components/kit/code-block";
3+
import { Container } from "@components/ui/structure/container";
4+
import { Text } from "@components/ui/text/text";
5+
import { useClasses } from "@styles";
6+
7+
interface CodeFileProps {
8+
fileName?: string;
9+
code?: string[];
10+
}
11+
12+
export function CodeFile({
13+
fileName,
14+
code
15+
}: CodeFileProps) {
16+
return (
17+
<Container className={useClasses("code-file")}>
18+
<Container className={useClasses("code-file-tab")}>
19+
<Text className={useClasses("code-file-tab-text")}>
20+
{fileName || "code.gsam"}
21+
</Text>
22+
23+
<Xmark className={useClasses("code-file-tab-close")} />
24+
</Container>
25+
26+
<Container className={useClasses("code-file-content")}>
27+
{code?.map((line, index) => (
28+
<CodeBlock key={index} content={line} />
29+
))}
30+
</Container>
31+
</Container>
32+
)
33+
}
34+

‎portable/src/components/block/parallax.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export function Parallax() {
77
<Container
88
className={useClasses("parallax")}
99
children={null}
10+
1011
attributes={{
1112
"img-l-src": `url("${useAsset("parallax-l.svg")}")`,
1213
"img-d-src": `url("${useAsset("parallax-d.svg")}")`,

‎portable/src/components/kit/code-block.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { ArrowDown } from "@attaditya/iconoir-preact";
2+
import { Container } from "@components/ui/structure/container";
3+
import { useClasses } from "@styles";
4+
5+
interface CodeBlockProps {
6+
content: string;
7+
}
8+
9+
export function CodeBlock({ content }: CodeBlockProps) {
10+
return (<>
11+
<Container className={useClasses("code-block")}>
12+
{content}
13+
</Container>
14+
15+
<Container className={useClasses("code-block-next")}>
16+
<ArrowDown />
17+
</Container>
18+
</>);
19+
}
20+

‎portable/src/components/kit/scroll-top-button.tsx‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,31 +11,17 @@ export function ScrollTopButton() {
1111
}, []);
1212

1313
useEffect(() => {
14-
const topElement = document.getElementById("top");
15-
let scrollableParent = topElement?.parentElement;
16-
17-
while (scrollableParent) {
18-
const scrollHeight = scrollableParent.scrollHeight;
19-
const clientHeight = scrollableParent.clientHeight;
20-
21-
if (scrollHeight > clientHeight)
22-
break;
23-
24-
scrollableParent = scrollableParent.parentElement;
25-
}
14+
let scrollableParent = document.documentElement;
2615

2716
const handleScroll = () => {
2817
setCanScroll(!!scrollableParent?.scrollTop);
29-
};
18+
}
3019

3120
handleScroll();
32-
33-
scrollableParent?.addEventListener(
34-
"scroll", handleScroll
35-
);
21+
document.addEventListener("scroll", handleScroll);
3622

3723
return () => {
38-
scrollableParent?.removeEventListener(
24+
document.removeEventListener(
3925
"scroll", handleScroll
4026
);
4127
};

‎portable/src/routes/home.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ function Layout({ forwarded, dynamic, children }: LayoutProps) {
1616

1717
return <>
1818
<Parallax />
19-
2019
<Container>
2120
<Menu position="top-left">
2221
<MenuBrand />

‎portable/src/styles/styles.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
// AUTO GENERATED FILE - DO NOT EDIT
22

33
const classNames = {
4+
'about-content': 'about-content',
5+
'about-description': 'about-description',
6+
'about-text': 'about-text',
7+
'about-visual': 'about-visual',
48
'audience-infolets': 'audience-infolets',
59
'clickable': 'clickable',
10+
'code-block': 'code-block',
11+
'code-block-next': 'code-block-next',
12+
'code-file': 'code-file',
13+
'code-file-content': 'code-file-content',
14+
'code-file-tab': 'code-file-tab',
15+
'code-file-tab-close': 'code-file-tab-close',
16+
'code-file-tab-text': 'code-file-tab-text',
617
'dark': 'dark',
718
'ecosystem-textlets': 'ecosystem-textlets',
819
'error-code': 'error-code',
@@ -68,10 +79,10 @@ const classNames = {
6879

6980
export type ClassName = (keyof typeof classNames);
7081
export type PossibleClassName = ClassName | false | null | undefined;
71-
7282
export function useClasses(...args: PossibleClassName[]): string {
7383
const validClass = (arg: PossibleClassName) => !!(arg && arg in classNames);
7484
const validClasses = args.filter(validClass) as ClassName[];
85+
7586
return validClasses.map(arg => classNames[arg]).join(' ');
7687
}
7788

‎portable/styles/app/block/about.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.about-content {
2+
display: flex;
3+
gap: 2rem;
4+
}
5+
6+
.about-visual {
7+
flex: 4;
8+
}
9+
10+
.about-description {
11+
padding-top: 4rem;
12+
flex: 3;
13+
}
14+
15+
.about-text {
16+
font-size: 1.25rem;
17+
}
18+
19+
@media (max-width: 950px) {
20+
.about-content {
21+
flex-direction: column-reverse;
22+
}
23+
24+
.about-description {
25+
padding-top: 0;
26+
}
27+
28+
.about-text {
29+
font-size: 1.25rem;
30+
}
31+
}
32+

‎portable/styles/app/block/code-file.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.code-file {
2+
color: var(--color-white);
3+
}
4+
5+
.code-file-tab {
6+
width: fit-content;
7+
background-color: var(--color-focus);
8+
border: 0.25rem solid var(--color-focus);
9+
border-bottom: 0;
10+
border-top-left-radius: 1rem;
11+
border-top-right-radius: 1rem;
12+
padding: 0.5rem;
13+
padding-left: 1rem;
14+
display: flex;
15+
align-items: center;
16+
gap: 0.5rem;
17+
max-width: calc(100% - 2rem);
18+
}
19+
20+
.code-file-tab-text {
21+
font-family: var(--font-mono);
22+
font-size: 1rem;
23+
text-overflow: ellipsis;
24+
text-wrap: nowrap;
25+
overflow: hidden;
26+
}
27+
28+
.code-file-tab-close {
29+
font-size: 1.5rem;
30+
min-width: 1.5rem;
31+
}
32+
33+
.code-file-content {
34+
background-color: var(--color-shine);
35+
border: 0.25rem solid var(--color-focus);
36+
padding: 2rem;
37+
border-radius: 2rem;
38+
display: flex;
39+
flex-direction: column;
40+
border-top-left-radius: 0;
41+
}
42+
43+
@media (max-width: 650px) {
44+
.code-file-tab {
45+
padding: 0.5rem;
46+
padding-left: 0.75rem;
47+
gap: 0.5rem;
48+
}
49+
50+
.code-file-tab-text {
51+
font-size: 0.75rem;
52+
}
53+
54+
.code-file-tab-close {
55+
font-size: 1rem;
56+
min-width: 1rem;
57+
}
58+
}
59+

0 commit comments

Comments
 (0)