Skip to content
This repository was archived by the owner on Feb 15, 2025. It is now read-only.

Commit a22f7da

Browse files
bennobuilderbennobuilder
authored
Merge pull request #62 from agile-ts/develop
Develop
2 parents 9af5a11 + 498ac9d commit a22f7da

File tree

32 files changed

+1226
-89
lines changed

32 files changed

+1226
-89
lines changed

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 bennodev19
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎docusaurus.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,9 @@ const config = {
6262
colorMode: {
6363
defaultMode: 'dark',
6464
disableSwitch: false,
65-
respectPrefersColorScheme: true,
65+
respectPrefersColorScheme: false,
6666
},
67-
// image: '/img/meta.png', // Gets used in Head
67+
// image: '/img/meta.png', // Gets used in Head as Meta Image (og:image)
6868
announcementBar: {
6969
id: 'github-star',
7070
content: customFields.announcementBarContent,

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -34,17 +34,18 @@
3434
"react-icons": "^4.1.0",
3535
"react-live": "^2.2.3",
3636
"react-spring": "^8.0.27",
37+
"react-swipeable": "^6.0.1",
3738
"react-toastify": "^6.2.0",
3839
"styled-components": "^5.2.1"
3940
},
4041
"devDependencies": {
42+
"@types/jest": "^26.0.15",
4143
"@types/node": "^12.0.0",
4244
"@types/react": "^17.0.0",
4345
"@types/react-dom": "^16.9.8",
4446
"@types/react-helmet": "^6.1.0",
4547
"@types/react-router-dom": "^5.1.6",
4648
"@types/styled-components": "^5.1.0",
47-
"@types/jest": "^26.0.15",
4849
"@typescript-eslint/eslint-plugin": "^4.12.0",
4950
"@typescript-eslint/parser": "^4.12.0",
5051
"eslint": "^7.17.0",

‎src/_pages/LandingPage/components/GiveItATriyView/styles.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
align-items: center;
55
width: 100%;
66
padding: 5rem 0;
7-
background-color: var(--ifm-color-background);
7+
background-color: var(--ifm-color-background-3);
88
}
99

1010
.Title {

‎src/_pages/LandingPage/components/HeaderView/components/Astronaut/index.tsx

+34-48
Original file line numberDiff line numberDiff line change
@@ -11,71 +11,57 @@ type Props = { className?: string };
1111

1212
const Astronaut: React.FC<Props> = (props) => {
1313
const { className } = props;
14-
const [timing] = useState(200);
1514
const [isRaised, setIsRaised] = useState(false);
16-
const [isOnAstronaut, setIsOnAstronaut] = useState(false);
17-
const animated_Astronaut = useSpring({
18-
transform: isRaised ? `translateY(-${30}px)` : `translateY(0px)`,
15+
const [inAnimation, setInAnimation] = useState(false);
16+
const [triggeredAnimationColor, setTriggeredAnimationColor] = useState(false);
17+
const dark = useAgile(core.ui.ASTRONAUT_DARK);
18+
const animatedAstronautProps = useSpring({
19+
to: { x: isRaised ? 0 : 1 },
1920
config: {
2021
mass: 1,
2122
tension: 400,
2223
friction: 15,
24+
duration: 500,
25+
},
26+
onRest: () => {
27+
if (inAnimation) {
28+
setInAnimation(false);
29+
setTriggeredAnimationColor(false);
30+
}
31+
},
32+
onFrame: (frame) => {
33+
if (frame.x >= 0.45 && frame.x <= 0.5 && !triggeredAnimationColor) {
34+
core.ui.toggleAstronautColor(!dark);
35+
setTriggeredAnimationColor(true);
36+
}
2337
},
2438
});
25-
const dark = useAgile(core.ui.ASTRONAUT_DARK);
26-
27-
const [mounted, setMounted] = useState(false);
28-
// The astronaut theme on SSR is always the default theme but the site theme
29-
// can be in a different mode. React hydration doesn't update DOM styles
30-
// that come from SSR. Hence force a re-render after mounting to apply the
31-
// current relevant styles. There will be a flash seen of the original
32-
// styles seen using this current approach but that's probably ok. Fixing
33-
// the flash will require changing the theming approach and is not worth it
34-
// at this point.
35-
useEffect(() => {
36-
setMounted(true);
37-
}, []);
38-
39-
useEffect(() => {
40-
if (!isRaised) return;
41-
42-
const timeoutId = setTimeout(() => {
43-
core.ui.toggleAstronautColor(!dark);
44-
setIsRaised(false);
45-
}, timing);
46-
47-
return () => clearTimeout(timeoutId);
48-
}, [isRaised, timing]);
4939

5040
const onMouseEnter = () => {
51-
if (!isOnAstronaut) {
52-
setIsOnAstronaut(true);
53-
setIsRaised(true);
41+
if (!inAnimation) {
42+
setInAnimation(true);
43+
setIsRaised(!isRaised);
5444
}
5545
};
5646

57-
const onMouseLeave = () => {
58-
// to prevent endless bouncer
59-
setTimeout(() => {
60-
setIsOnAstronaut(false);
61-
}, 1100);
62-
};
63-
6447
return (
65-
<div key={String(mounted)} className={clsx(styles.Container, className)}>
48+
<div className={clsx(styles.Container, className)}>
6649
<animated.div
67-
style={animated_Astronaut}
50+
style={{
51+
transform: animatedAstronautProps.x.interpolate({
52+
range: [0, 0.5, 1],
53+
output: [
54+
`translateY(${0}px)`,
55+
`translateY(-${30}px)`,
56+
`translateY(${0}px)`,
57+
],
58+
}),
59+
}}
6860
className={styles.ImageContainer}>
6961
{dark ? (
70-
<AstronautDark
71-
onMouseEnter={onMouseEnter}
72-
onMouseLeave={onMouseLeave}
73-
/>
62+
<AstronautDark onMouseEnter={onMouseEnter} />
7463
) : (
75-
<AstronautLight
76-
onMouseEnter={onMouseEnter}
77-
onMouseLeave={onMouseLeave}
78-
/>
64+
<AstronautLight onMouseEnter={onMouseEnter} />
7965
)}
8066
</animated.div>
8167
<div className={styles.Text}>Poke me 👆 to mutate my color State.</div>

‎src/_pages/LandingPage/components/HeaderView/index.tsx

+12-10
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,23 @@ import GithubButton from '../../../../components/buttons/GithubButton';
77
import styles from './styles.module.css';
88
import { useWindowSize } from '../../../../hooks/useWindowSize';
99
import MouseScroller from './components/MouseScroller';
10-
import { animated, useSpring } from 'react-spring';
1110
import Astronaut from './components/Astronaut';
11+
import { shuffle } from '../../../../utils';
1212

1313
const HeaderView: React.FC = () => {
1414
const { siteConfig } = useDocusaurusContext();
1515
const { windowHeight } = useWindowSize();
16-
const [toTypeWords] = useState([
17-
'simple',
18-
'straightforward',
19-
'fast',
20-
'understandable',
21-
'boilerplate free',
22-
'spacy',
23-
'fun',
24-
]);
16+
const [toTypeWords] = useState(
17+
shuffle([
18+
'simple',
19+
'straightforward',
20+
'fast',
21+
'understandable',
22+
'boilerplate free',
23+
'spacy',
24+
'fun',
25+
])
26+
);
2527

2628
return (
2729
<div className={styles.Container}>

‎src/_pages/LandingPage/components/OtherFeaturesView/components/Cards/components/BulletItem/index.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import styles from './styles.module.css';
3+
import clsx from 'clsx';
4+
5+
type Props = {
6+
className?: string;
7+
active: boolean;
8+
onClick: () => void;
9+
};
10+
11+
const BulletItem: React.FC<Props> = (props) => {
12+
const { className, active, onClick } = props;
13+
return (
14+
<div
15+
className={clsx(styles.Container, className, {
16+
[styles.Container__Active]: active,
17+
})}
18+
onClick={onClick}
19+
/>
20+
);
21+
};
22+
23+
export default BulletItem;

‎src/_pages/LandingPage/components/OtherFeaturesView/components/Cards/components/BulletItem/styles.module.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.Container {
2+
border-radius: 100%;
3+
width: 0.75rem;
4+
height: 0.75rem;
5+
background-color: var(--ifm-color-on-background-2);
6+
margin: 50px 5px 0 5px;
7+
8+
cursor: pointer;
9+
10+
transform: scale(0.75);
11+
opacity: 0.2;
12+
transition: transform 100ms cubic-bezier(0.17, 0.67, 0.83, 0.67),
13+
opacity 100ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
14+
}
15+
16+
.Container:hover {
17+
opacity: 0.9;
18+
background-color: var(--ifm-color-primary-lightest);
19+
}
20+
21+
.Container__Active {
22+
opacity: 1;
23+
transform: scale(1);
24+
background-color: var(--ifm-color-primary-light);
25+
}

‎src/_pages/LandingPage/components/OtherFeaturesView/components/Cards/components/Card/index.tsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react';
2+
import { CardInterface } from '../../index';
3+
import styles from './styles.module.css';
4+
import PlainButton from '../../../../../../../../components/buttons/PlainButton';
5+
import clsx from 'clsx';
6+
7+
type Props = {
8+
data: CardInterface;
9+
active: boolean;
10+
className?: string;
11+
width?: number | string;
12+
height?: number;
13+
};
14+
15+
const Card: React.FC<Props> = (props) => {
16+
const { data, className, active, width, height } = props;
17+
18+
return (
19+
<div
20+
className={clsx(styles.Container, className, {
21+
[styles.Container_Active]: active,
22+
})}
23+
style={{ maxWidth: width, height }}>
24+
<div className={styles.ContentContainer}>
25+
<img
26+
alt={data.imagePath}
27+
src={data.imagePath}
28+
className={styles.Image}
29+
/>
30+
<div className={styles.TextContainer}>
31+
<div className={styles.Title}>{data.title}</div>
32+
<div className={styles.Description}>{data.description}</div>
33+
</div>
34+
</div>
35+
<PlainButton
36+
className={styles.MoreButton}
37+
to={data.to}
38+
name={'Learn more'}
39+
/>
40+
</div>
41+
);
42+
};
43+
44+
export default Card;

‎src/_pages/LandingPage/components/OtherFeaturesView/components/Cards/components/Card/styles.module.css

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
.Container {
2+
position: relative;
3+
display: flex;
4+
flex-direction: column;
5+
padding: 2rem;
6+
background-color: var(--ifm-color-background-2);
7+
border-radius: 8px;
8+
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
9+
border: 2px solid var(--ifm-color-surface);
10+
pointer-events: none;
11+
}
12+
13+
.Container_Active {
14+
border: 2px solid var(--ifm-color-primary);
15+
pointer-events: all;
16+
}
17+
18+
.ContentContainer {
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
height: 100%;
23+
width: 100%;
24+
}
25+
26+
.Image {
27+
width: 80%;
28+
flex: 1;
29+
height: 50%;
30+
}
31+
32+
.TextContainer {
33+
display: flex;
34+
flex: 1;
35+
padding-top: 10px;
36+
flex-direction: column;
37+
align-items: center;
38+
text-align: center;
39+
}
40+
41+
.Title {
42+
color: var(--ifm-color-on-background);
43+
font-size: var(--ifm-font-size-32);
44+
font-weight: bold;
45+
}
46+
47+
.Description {
48+
color: var(--ifm-color-on-background-2);
49+
font-size: var(--ifm-font-size-16);
50+
}
51+
52+
.MoreButton {
53+
align-self: flex-end;
54+
justify-self: flex-end;
55+
}

0 commit comments

Comments
 (0)