networkException/nwex.de
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added CopyrightNotice

Browse source 
ToDo: Fix VisibilitySensor
This commit is contained in:
Niklas Schrötler 2021-04-04 22:21:31 +02:00
parent 750e6d73ad
commit 853a713ad6
4 changed files with 141 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -18,11 +18,13 @@
"build-storybook": "build-storybook -s public"
},
"dependencies": {
"framer-motion": "^4.1.2",
"fs": "^0.0.1-security",
"next": "10.0.5",
"react": "17.0.1",
"react-calendar-heatmap": "^1.8.1",
"react-dom": "17.0.1",
"react-visibility-sensor": "^5.1.1",
"swr": "^0.5.5"
},
"devDependencies": {

83
src/components/CopyrightNotice/index.tsx Normal file
View file

@ -0,0 +1,83 @@
import React from "react";
import 'react-calendar-heatmap/dist/styles.css';
import {AnimatePresence, motion} from "framer-motion";
import VisibilitySensor from "react-visibility-sensor";
export default class CopyrightNotice extends React.Component<null, {currentStep: number}> {
constructor(props) {
super(props);
this.state = {
currentStep: 0
}
}
render() {
let content;
switch (this.state.currentStep) {
case 0:
content = (
<>
copyright networkException $&#123;new Date().getFullYear()&#125;
</>
);
break;
case 1:
content = (
<>
copyright networkException&nbsp;
<span style={{color: "rgb(96, 104, 114)"}}>$</span>
<span style={{color: "rgb(120, 129, 141)"}}>&#123;</span>
<span style={{color: "rgb(73, 79, 86)"}}>new&nbsp;</span>
<span style={{color: "rgb(96, 104, 114)"}}>Date</span>
<span style={{color: "rgb(120, 129, 141)"}}>(</span>
<span style={{color: "rgb(120, 129, 141)"}}>)</span>
<span style={{color: "rgb(114, 119, 124)"}}>.</span>
<span style={{color: "rgb(96, 104, 114)"}}>getFullYear</span>
<span style={{color: "rgb(120, 129, 141)"}}>(</span>
<span style={{color: "rgb(120, 129, 141)"}}>)</span>
<span style={{color: "rgb(120, 129, 141)"}}>&#125;</span>
</>
);
break;
case 2:
content = (
<>copyright networkException {new Date().getFullYear()};</>
);
break;
}
return (
<div className={"relative"}>
<VisibilitySensor partialVisibility onChange={(visible) => {
console.log(visible);
if(visible) {
setTimeout(() => {
this.setState({currentStep: 1});
}, 4000);
setTimeout(() => {
this.setState({currentStep: 2});
}, 8000);
}
}}>
<AnimatePresence initial={false}>
<motion.div
className={"absolute inset-0 text-center"}
key={this.state.currentStep}
initial={{opacity: 0}}
animate={{opacity: 1}}
exit={{opacity: 0}}
>
{content}
</motion.div>
</AnimatePresence>
</VisibilitySensor>
</div>
);
}
}

6
src/pages/index.tsx
View file

@ -1,5 +1,5 @@
import Head from "next/head"
import {GitActivity} from "../components/GitActivity";
import CopyrightNotice from "../components/CopyrightNotice";
export default function Home() {
return (
@ -8,7 +8,9 @@ export default function Home() {
<title>nwex.de</title>
</Head>
<GitActivity />
<div style={{marginTop: 3000}}>
<CopyrightNotice />
</div>
</>
)
}

54
yarn.lock
View file

@ -1127,7 +1127,7 @@
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.6":
"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.6":
version "0.8.8"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
@ -6259,6 +6259,26 @@ fragment-cache@^0.2.1:
dependencies:
map-cache "^0.2.2"
framer-motion@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-4.1.2.tgz#2fffb7700ca1c3405e697294d155b1aae51c1031"
integrity sha512-nVieffLWWmK5gog46PsoecgJCsFV+n6A5GOqoGXkWtvB9jWcscRVIdGzAaPKo2uiJHkGSyXUHU8+lt6YOQVRqw==
dependencies:
framesync "5.3.0"
hey-listen "^1.0.8"
popmotion "9.3.5"
style-value-types "4.1.4"
tslib "^2.1.0"
optionalDependencies:
"@emotion/is-prop-valid" "^0.8.2"
framesync@5.3.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.3.0.tgz#0ecfc955e8f5a6ddc8fdb0cc024070947e1a0d9b"
integrity sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==
dependencies:
tslib "^2.1.0"
fresh@0.5.2:
version "0.5.2"
resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@ -6822,6 +6842,11 @@ he@1.2.0, he@^1.2.0:
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
hey-listen@^1.0.8:
version "1.0.8"
resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
highlight.js@^10.1.1, highlight.js@~10.5.0:
version "10.5.0"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.5.0.tgz#3f09fede6a865757378f2d9ebdcbc15ba268f98f"
@ -9805,6 +9830,16 @@ polished@^3.4.4:
dependencies:
"@babel/runtime" "^7.9.2"
popmotion@9.3.5:
version "9.3.5"
resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.3.5.tgz#e821aff3424a021b0f2c93922db31c55cfe64149"
integrity sha512-Lr2rq8OP0j8D7CO2/6eO17ALeFCxjx1hfTGbMg+TLqFj+KZSGOoj6gRBVTzDINGqo6LQrORQSSSDaCL5OrB3bw==
dependencies:
framesync "5.3.0"
hey-listen "^1.0.8"
style-value-types "4.1.4"
tslib "^2.1.0"
posix-character-classes@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@ -10588,6 +10623,13 @@ react-textarea-autosize@^8.1.1:
use-composed-ref "^1.0.0"
use-latest "^1.0.0"
react-visibility-sensor@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz#5238380960d3a0b2be0b7faddff38541e337f5a9"
integrity sha512-cTUHqIK+zDYpeK19rzW6zF9YfT4486TIgizZW53wEZ+/GPBbK7cNS0EHyJVyHYacwFEvvHLEKfgJndbemWhB/w==
dependencies:
prop-types "^15.7.2"
react@17.0.1:
version "17.0.1"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
@ -11946,6 +11988,14 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
dependencies:
inline-style-parser "0.1.1"
style-value-types@4.1.4:
version "4.1.4"
resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-4.1.4.tgz#80f37cb4fb024d6394087403dfb275e8bb627e75"
integrity sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==
dependencies:
hey-listen "^1.0.8"
tslib "^2.1.0"
styled-jsx@3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.2.tgz#2474601a26670a6049fb4d3f94bd91695b3ce018"
@ -12390,7 +12440,7 @@ tslib@^1.9.0:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3:
tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==