Skip to content

Commit 1379764

Browse files
fritxfritx
committed
feat: add moon-star-single-div demo
1 parent 5aa5f5e commit 1379764

File tree

7 files changed

+194
-9
lines changed

7 files changed

+194
-9
lines changed

‎public/code/index.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
- moon-star-single-div.js
12
- vue-3d-model.js
23
- turtle.py
34
- crank-todomvc.jsx

‎public/code/moon-star-single-div.js‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
/**
2+
* 🌙 & ⭐️ (Single <div>) - @davejs
3+
* https://codepen.io/davejs/pen/mdeWdaL
4+
*/
5+
6+
appendHtml('<div id="demo"></div>')
7+
8+
appendCss(`
9+
#mountNode {
10+
perspective: 300px;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
/* height: 100vh; */
15+
overflow: hidden;
16+
background-image: radial-gradient(navy, #002);
17+
}
18+
19+
#demo {
20+
--color: lightgoldenrodyellow;
21+
position: relative;
22+
font-size: 2rem;
23+
height: 5em;
24+
width: 5em;
25+
border-radius: 50%;
26+
box-shadow: inset -0.4em -0.55em 0.5em -0.25em #0007, inset -0.75em -0.5em 0.075em 0.25em var(--color), 2em 0.05em 3em -1.5em var(--color);
27+
}
28+
29+
@keyframes orbit {
30+
0% {
31+
transform: rotateZ(0deg);
32+
}
33+
100% {
34+
transform: rotateZ(360deg);
35+
}
36+
}
37+
38+
#demo::before, #demo::after {
39+
position: absolute;
40+
top: 200%;
41+
left: -1000%;
42+
display: block;
43+
height: 200rem;
44+
width: 200rem;
45+
content: '';
46+
border-radius: 50%;
47+
z-index: -1;
48+
animation: orbit 300s infinite linear;
49+
box-shadow:
50+
-40rem -106rem 1rem -99.5rem #fff6,
51+
-40rem -106rem 1px -99.65rem #c568,
52+
-32rem -96rem 1.5rem -99.5rem #ffe8,
53+
-32rem -96rem 1px -99.9rem #ffc9,
54+
-31rem -110rem 1.5rem -99.5rem #ffe6,
55+
-31rem -110rem 1px -99.9rem #ffc6,
56+
-11rem -115rem 1.5rem -99.5rem #ffe8,
57+
-11rem -115rem 1px -99.9rem #ffc6,
58+
11rem -105rem 1.5rem -99.5rem #ffe6,
59+
11rem -105rem 1px -99.9rem #ffc6,
60+
-11rem -135rem 1.5rem -99.5rem #ffe4,
61+
-11rem -135rem 1px -99.9rem #ffc5,
62+
31rem -115rem 1.5rem -99.5rem #ffe6,
63+
31rem -115rem 1px -99.9rem #ffc6,
64+
-51rem -115rem 1.5rem -99.5rem #ffe9,
65+
-51rem -115rem 1px -99.9rem #ffc6,
66+
21rem -125rem 1.5rem -99.5rem #ffe6,
67+
21rem -125rem 1px -99.9rem #ffc6,
68+
5rem -115rem 1.5rem -99.5rem #ffe9,
69+
5rem -115rem 1px -99.9rem #ffc6,
70+
71+
-96rem -32rem 1.5rem -99.5rem #ffe8,
72+
-96rem -32rem 1px -99.9rem #ffc9,
73+
-110rem -31rem 1.5rem -99.5rem #ffe6,
74+
-110rem -31rem 1px -99.9rem #ffc6,
75+
-115rem -11rem 1.5rem -99.5rem #ffe8,
76+
-115rem -11rem 1px -99.9rem #ffc6,
77+
-105rem 11rem 1.5rem -99.5rem #ffe6,
78+
-105rem 11rem 1px -99.9rem #ffc6,
79+
-135rem -11rem 1.5rem -99.5rem #ffe4,
80+
-135rem -11rem 1px -99.9rem #ffc5,
81+
-115rem 31rem 1.5rem -99.5rem #ffe6,
82+
-115rem 31rem 1px -99.9rem #ffc6,
83+
-115rem -51rem 1.5rem -99.5rem #ffe9,
84+
-115rem -51rem 1px -99.9rem #ffc6,
85+
-125rem 21rem 1.5rem -99.5rem #ffe6,
86+
-125rem 21rem 1px -99.9rem #ffc6,
87+
-115rem 5rem 1.5rem -99.5rem #ffe9,
88+
-115rem 5rem 1px -99.9rem #ffc6,
89+
90+
96rem 32rem 1.5rem -99.5rem #ffe8,
91+
96rem 32rem 1px -99.9rem #ffc9,
92+
110rem 31rem 1.5rem -99.5rem #ffe6,
93+
110rem 31rem 1px -99.9rem #ffc6,
94+
115rem 11rem 1.5rem -99.5rem #ffe8,
95+
115rem 11rem 1px -99.9rem #ffc6,
96+
105rem -11rem 1.5rem -99.5rem #ffe6,
97+
105rem -11rem 1px -99.9rem #ffc6,
98+
135rem 11rem 1.5rem -99.5rem #ffe4,
99+
135rem 11rem 1px -99.9rem #ffc5,
100+
115rem -31rem 1.5rem -99.5rem #ffe6,
101+
115rem -31rem 1px -99.9rem #ffc6,
102+
115rem 51rem 1.5rem -99.5rem #ffe9,
103+
115rem 51rem 1px -99.9rem #ffc6,
104+
125rem -21rem 1.5rem -99.5rem #ffe6,
105+
125rem -21rem 1px -99.9rem #ffc6,
106+
115rem -5rem 1.5rem -99.5rem #ffe9,
107+
115rem -5rem 1px -99.9rem #ffc6,
108+
109+
-21rem -125rem 1.5rem -99.5rem #ffe8,
110+
-21rem -125rem 1px -99.9rem #ffc6,
111+
-61rem -105rem 1.5rem -99.5rem #ffe3,
112+
-61rem -105rem 1px -99.9rem #ffc6,
113+
-61rem -95rem 1.5rem -99.5rem #ffe4,
114+
-61rem -95rem 1px -99.9rem #ffc6,
115+
-71rem -75rem 1.5rem -99.5rem #ffe7,
116+
-71rem -75rem 1px -99.9rem #ffc6,
117+
-55rem -85rem 1.5rem -99.5rem #ffe6,
118+
-55rem -85rem 1px -99.9rem #ffc6,
119+
-125rem -21rem 1.5rem -99.5rem #ffe8,
120+
-125rem -21rem 1px -99.9rem #ffc6,
121+
-105rem -61rem 1.5rem -99.5rem #ffe3,
122+
-105rem -61rem 1px -99.9rem #ffc6,
123+
-95rem -61rem 1.5rem -99.5rem #ffe4,
124+
-95rem -61rem 1px -99.9rem #ffc6,
125+
75rem 71rem 1.5rem -99.5rem #ffe7,
126+
75rem 71rem 1px -99.9rem #ffc6,
127+
85rem 55rem 1.5rem -99.5rem #ffe6,
128+
85rem 55rem 1px -99.9rem #ffc6,
129+
125rem 21rem 1.5rem -99.5rem #ffe8,
130+
125rem 21rem 1px -99.9rem #ffc6,
131+
105rem 61rem 1.5rem -99.5rem #ffe3,
132+
105rem 61rem 1px -99.9rem #ffc6,
133+
95rem 61rem 1.5rem -99.5rem #ffe4,
134+
95rem 61rem 1px -99.9rem #ffc6,
135+
75rem 71rem 1.5rem -99.5rem #ffe7,
136+
75rem 71rem 1px -99.9rem #ffc6,
137+
85rem 55rem 1.5rem -99.5rem #ffe6,
138+
85rem 55rem 1px -99.9rem #ffc6,
139+
32rem 96rem 1.5rem -99.5rem #ffe8,
140+
32rem 96rem 1px -99.9rem #ffc9,
141+
31rem 110rem 1.5rem -99.5rem #ffe6,
142+
31rem 110rem 1px -99.9rem #ffc6,
143+
11rem 115rem 1.5rem -99.5rem #ffe8,
144+
11rem 115rem 1px -99.9rem #ffc6,
145+
-11rem 105rem 1.5rem -99.5rem #ffe6,
146+
-11rem 105rem 1px -99.9rem #ffc6,
147+
11rem 135rem 1.5rem -99.5rem #ffe4,
148+
11rem 135rem 1px -99.9rem #ffc5,
149+
-31rem 115rem 1.5rem -99.5rem #ffe6,
150+
-31rem 115rem 1px -99.9rem #ffc6,
151+
51rem 115rem 1.5rem -99.5rem #ffe9,
152+
51rem 115rem 1px -99.9rem #ffc6,
153+
-21rem 125rem 1.5rem -99.5rem #ffe6,
154+
-21rem 125rem 1px -99.9rem #ffc6,
155+
-5rem 115rem 1.5rem -99.5rem #ffe9,
156+
-5rem 115rem 1px -99.9rem #ffc6,
157+
21rem 125rem 1.5rem -99.5rem #ffe8,
158+
21rem 125rem 1px -99.9rem #ffc6,
159+
61rem 105rem 1.5rem -99.5rem #ffe3,
160+
61rem 105rem 1px -99.9rem #ffc6,
161+
61rem 95rem 1.5rem -99.5rem #ffe4,
162+
61rem 95rem 1px -99.9rem #ffc6,
163+
71rem 75rem 1.5rem -99.5rem #ffe7,
164+
71rem 75rem 1px -99.9rem #ffc6,
165+
55rem 85rem 1.5rem -99.5rem #ffe6,
166+
55rem 85rem 1px -99.9rem #ffc6;
167+
}
168+
169+
#demo::after {
170+
opacity: 0.35;
171+
animation-delay: -100s;
172+
animation-duration: 600s;
173+
top: 10vh;
174+
}
175+
`)

‎public/code/moon-star-single-div.js.png‎

246 KB
Loading

‎src/components/GentleSpin.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ let useGentle: UseGentle = _value => {
2121
} else {
2222
debouncedSetValue(_value);
2323
}
24+
return () => {
25+
debouncedSetValue.cancel();
26+
};
2427
}, [_value, debouncedSetValue]);
2528

2629
return value;

‎src/playground/Playground.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import * as Antd from 'antd';
2+
import Axios from 'axios';
23
import 'codemirror/lib/codemirror.css';
34
// import 'codemirror/mode/javascript/javascript';
45
import 'codemirror/mode/jsx/jsx';
56
import 'codemirror/mode/python/python';
67
import 'codemirror/theme/material.css';
8+
import immer from 'immer';
79
import _ from 'lodash';
10+
import moment from 'moment';
811
import React, { useCallback, useEffect, useState } from 'react';
912
import { Controlled as CodeMirror } from 'react-codemirror2';
1013
import ReactDOM from 'react-dom';
@@ -13,9 +16,6 @@ import Helmet from 'react-helmet';
1316
import { useHistory, useParams } from 'react-router';
1417
import styled from 'styled-components';
1518
import useMedia from 'use-media';
16-
import immer from 'immer';
17-
import Axios from 'axios';
18-
import moment from 'moment';
1919
import { GentleSpin } from '../components/GentleSpin';
2020
import { useApi } from '../hooks/useApi';
2121
import { useFormBinding } from '../hooks/useFormBinding';
@@ -26,12 +26,13 @@ import { codeTransform } from './codeTransform';
2626
import './page.css';
2727
import { MainCol, MainRow, MountNode } from './styled';
2828
import {
29+
appendCss,
30+
appendHtml,
31+
appendJs,
2932
displayError,
30-
loadJsForceUmd,
31-
loadJs,
3233
loadCss,
33-
appendJs,
34-
appendCss,
34+
loadJs,
35+
loadJsForceUmd,
3536
} from './util';
3637

3738
Object.assign(window, {
@@ -52,6 +53,7 @@ Object.assign(window, {
5253
loadCss,
5354
appendJs,
5455
appendCss,
56+
appendHtml,
5557
setRendering: _.noop, // noop placeholder
5658
});
5759

‎src/playground/codeTransform.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,8 @@ export let wrapJs = (code: string) => {
9090
a1.id = 'assetsNode'
9191
a0.parentNode.appendChild(a1)
9292
93-
// mountNode.innerHTML = '' // can cause error in react
9493
ReactDOM.unmountComponentAtNode(mountNode)
94+
mountNode.innerHTML = '' // put after, otherwise can cause error in react
9595
9696
try {
9797
let { useRef, useMemo, useState, useEffect, useLayoutEffect, useReducer, useContext, useCallback, useImperativeHandle } = React

‎src/playground/util.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import Axios from 'axios';
12
import React from 'react';
23
import ReactDOM from 'react-dom';
34
import { ErrorInfo } from './styled';
4-
import Axios from 'axios';
55

66
export let displayError = (err: Error) => {
77
let mountNode = document.querySelector('#mountNode');
@@ -86,3 +86,7 @@ export let appendCss = (code: string) => {
8686
el.innerHTML = code;
8787
window.assetsNode.appendChild(el);
8888
};
89+
90+
export let appendHtml = (code: string) => {
91+
window.mountNode.innerHTML += code;
92+
};

0 commit comments

Comments
 (0)