diff --git a/docusaurus.config.js b/docusaurus.config.js index a9b6441d..4cad078a 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -14,9 +14,10 @@ module.exports = { respectPrefersColorScheme: true, }, announcementBar: { - id: 'supportus', + id: 'github-star', content: '⭐️ If you like AgileTs, give it a star on GitHub! ⭐️', + backgroundColor: "#9c9abf" }, navbar: { title: 'AgileTs', diff --git a/package.json b/package.json index 9d12000c..68195e3d 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "clsx": "^1.1.1", "react": "^16.8.4", "react-dom": "^16.8.4", + "react-lazy-load-image-component": "^1.5.1", "react-spring": "^8.0.27", "styled-components": "^5.1.1" }, diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 231c654a..1815d284 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -1,16 +1,17 @@ import React, {useCallback} from "react"; import { useSpring, animated } from "react-spring"; import styled from "styled-components"; +import { LazyLoadImage } from 'react-lazy-load-image-component'; export interface Props { - src: string, + image: string, width?: number, height?: number, onClick?: () => void } const Card: React.FC = (props) => { - const {src, width, height, onClick} = props; + const {image, width, height, onClick} = props; const [spring, setSpring] = useSpring(() => ({ xys: [0, 0, 1], @@ -25,7 +26,9 @@ const Card: React.FC = (props) => { return ( - setSpring({ xys: calculateRotation(x, y, width, height), @@ -56,7 +59,7 @@ const Container = styled.div<{width: number, height: number, isClickable: boolea cursor: ${props => props.isClickable ? "pointer" : "auto"}; `; -const AnimatedCard = styled(animated.img)` +const AnimatedCard = styled(animated(LazyLoadImage))` border-radius: 5px; box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3); transition: box-shadow 0.5s; diff --git a/src/page-parts/LandingPage/parts/CodeExample1View.tsx b/src/page-parts/LandingPage/parts/CodeExample1View.tsx index 2d9238e4..a2aeb81e 100644 --- a/src/page-parts/LandingPage/parts/CodeExample1View.tsx +++ b/src/page-parts/LandingPage/parts/CodeExample1View.tsx @@ -4,14 +4,13 @@ import styled from "styled-components"; import RandomComponent from "../../../components/RandomComponent"; import {useWindowSize} from "../../../hooks/useWindowSize"; - const CodeExample1View: React.FC = () => { const windowSize = useWindowSize(); return ( - { window.open("https://codesandbox.io/s/agilets-first-state-f12cz?file=/src/RandomComponent.js"); }}/> diff --git a/src/page-parts/LandingPage/parts/FeatureView.tsx b/src/page-parts/LandingPage/parts/FeatureView.tsx index 6899f054..76f48825 100644 --- a/src/page-parts/LandingPage/parts/FeatureView.tsx +++ b/src/page-parts/LandingPage/parts/FeatureView.tsx @@ -2,7 +2,7 @@ import {featuresData} from "../../../data/featuresData"; import React from "react"; import styled from "styled-components"; import useBaseUrl from '@docusaurus/useBaseUrl'; - +import { LazyLoadImage } from 'react-lazy-load-image-component'; const FeatureView: React.FC = () => { @@ -11,7 +11,7 @@ const FeatureView: React.FC = () => { return ( {imgUrl && ( - + )}

{title}

{description}

@@ -35,7 +35,7 @@ const FeatureView: React.FC = () => { export default FeatureView; -const FeatureImage = styled.img<{ width?: number, height?: number }>` +const FeatureImage = styled(LazyLoadImage)<{ width?: number, height?: number }>` width: ${props => props.width || 250}px; height: ${props => props.height || 150}px; margin-bottom: 20px; diff --git a/src/page-parts/LandingPage/parts/HeaderView.tsx b/src/page-parts/LandingPage/parts/HeaderView.tsx index 252535d8..a66ec4d3 100644 --- a/src/page-parts/LandingPage/parts/HeaderView.tsx +++ b/src/page-parts/LandingPage/parts/HeaderView.tsx @@ -1,9 +1,10 @@ -import React from "react"; +import React, {useState} from "react"; import styled from "styled-components"; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useBaseUrl from '@docusaurus/useBaseUrl'; import {useWindowSize} from "../../../hooks/useWindowSize"; import Button from "../../../components/Button"; +import { LazyLoadImage } from 'react-lazy-load-image-component'; const HeaderView: React.FC = () => { const windowSize = useWindowSize(); @@ -29,7 +30,16 @@ const HeaderView: React.FC = () => { return ( windowSize.windowWidth > 1300 ?
- {"Header + } + /> @@ -50,11 +60,6 @@ const Container = styled.div` text-align: center; `; -const Image = styled.img` - width: 100%; - height: 100%; -`; - const ImageContent = styled.div` position: absolute; top: 150px; diff --git a/src/page-parts/LandingPage/parts/IncludesView.tsx b/src/page-parts/LandingPage/parts/IncludesView.tsx index ed87f4cd..7c821e52 100644 --- a/src/page-parts/LandingPage/parts/IncludesView.tsx +++ b/src/page-parts/LandingPage/parts/IncludesView.tsx @@ -8,15 +8,15 @@ import {useWindowSize} from "../../../hooks/useWindowSize"; const IncludesView: React.FC = () => { const [open, setOpen] = useState(false); - const [showContent, setShowContent] = useState(false); + const [showItems, setShowItems] = useState(false); const windowSize = useWindowSize(); useEffect(() => { if (open) { - setShowContent(true) + setShowItems(true) } else { setTimeout(() => { - setShowContent(false); + setShowItems(false); }, 800) } }, [open]); @@ -49,7 +49,7 @@ const IncludesView: React.FC = () => { return ( -
`scale(${s})`)}} onClick={() => setOpen(open => !open)} onMouseMove={() => @@ -64,7 +64,7 @@ const IncludesView: React.FC = () => { } > { - showContent ? + showItems ? transitions.map(({item, key, props}) => @@ -77,7 +77,7 @@ const IncludesView: React.FC = () => { {"Header }
- {showContent && setOpen(false)} height={windowSize.scrollHeight}/>} + {showItems && setOpen(false)} height={windowSize.scrollHeight}/>} ) } @@ -91,14 +91,14 @@ const Container = styled.div` height: 200px; `; -const Main = styled(animated.div)<{ showContent: boolean }>` +const Main = styled(animated.div)<{ showItems: boolean }>` position: absolute; display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); - grid-gap: ${props => props.showContent ? 25 : 0}px; - padding: ${props => props.showContent ? 25 : 0}px; + grid-gap: ${props => props.showItems ? 25 : 0}px; + padding: ${props => props.showItems ? 25 : 0}px; border-radius: 25px; - cursor: ${props => props.showContent ? "auto" : "pointer"}; + cursor: ${props => props.showItems ? "auto" : "pointer"}; box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3); will-change: width, height; z-index: 100; diff --git a/src/page-parts/LoadingPage/index.tsx b/src/page-parts/LoadingPage/index.tsx deleted file mode 100644 index beb188df..00000000 --- a/src/page-parts/LoadingPage/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react"; -import styled from "styled-components"; - -const LoadingPage: React.FC = () => { - return ( - - {"Header - - ) -} - -export default LoadingPage; - -const Container = styled.div` - display: flex; - flex: 1; -`; - -const Image = styled.img` - width: 100%; - height: 100%; - object-fit: cover; -`; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index d9d4f6ba..7ce264ef 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6466,6 +6466,11 @@ lodash.curry@^4.0.1: resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170" integrity sha1-JI42By7ekGUB11lmIAqG2riyMXA= +lodash.debounce@^4.0.8: + version "4.0.8" + resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" + integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= + lodash.defaults@^4.0.1: version "4.2.0" resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c" @@ -6586,6 +6591,11 @@ lodash.templatesettings@^4.0.0: dependencies: lodash._reinterpolate "^3.0.0" +lodash.throttle@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" + integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ= + lodash.toarray@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561" @@ -8699,6 +8709,14 @@ react-json-view@^1.19.1: react-lifecycles-compat "^3.0.4" react-textarea-autosize "^6.1.0" +react-lazy-load-image-component@^1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/react-lazy-load-image-component/-/react-lazy-load-image-component-1.5.1.tgz#59cc92326ba5604e9c4a86805a2cf1667fafbc71" + integrity sha512-grTEZzURLHPkq7JoipcBBQU44ijdF4fH3Cb+eSD5eSAaMsjugbXqTaVWm5ruPUNLduoNR9KKQF6bOR9h2WphEg== + dependencies: + lodash.debounce "^4.0.8" + lodash.throttle "^4.1.1" + react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"