Skip to content

Ramsey/nan 39 file and video reader for notion page #100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ramseycoder wants to merge 8 commits into
base: master
Choose a base branch
from
Draft

Ramsey/nan 39 file and video reader for notion page #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f245043
add markdown file
ramseycoder Nov 2, 2021
a18350f
update
ramseycoder Nov 2, 2021
51520b3
add notion page
ramseycoder Oct 27, 2021
514cd88
add link to notion
ramseycoder Oct 28, 2021
6c502f6
rebase on markdown-file and update
ramseycoder Nov 2, 2021
3c98dbf
add videoReader
ramseycoder Oct 29, 2021
dfdaea7
update video reader
ramseycoder Nov 2, 2021
bd80d1d
update video reader
ramseycoder Nov 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ import { P, divider } from './component/elements.jsx'
import { Router } from './lib/router.js'
import { Profile } from './page/profile.jsx'
import { Home } from './page/home.jsx'
import { Exercise } from './page/exercise.jsx'
import { Notion } from './page/notion.jsx'

const App = () => (
<>
<Header />
<Router>
<Profile path="/profile" />
<Notion path="/notion" />
<Home path="*" />
<Exercise path="/exercise" />
</Router>
<footer>
{divider}
Expand Down
7 changes: 6 additions & 1 deletion component/header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const LinkMatch = ({ match, children, path, ...props }) => (
const clearStorage = () => localStorage.clear()

// prettier-ignore
const NavLink = (props) => <li> - <Link {...props} /></li>
export const NavLink = (props) => <li>{!props.removeTiret && ' - '}<Link {...props} /></li>
const LogAction = () => {
if (!user) {
return (
Expand Down Expand Up @@ -78,6 +78,11 @@ export const Header = ({ page, title, children }) => {
return (
<header>
<Nav path={path} />
{'\n'}
<Title>Page</Title>
{'\n'}
<h1>{` ${path}`} </h1>
{'\n'}
{children}
</header>
)
Expand Down
199 changes: 199 additions & 0 deletions component/icons.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,202 @@ export const Discord = Icon(
'M13.914 14.58a8.998 8.998 0 0 1-.484.104 7.06 7.06 0 0 1-2.664-.01c-.154-.03-.372-.083-.653-.158l-.921 1.197c-2.273-.073-3.137-1.596-3.137-1.596 0-3.381 1.481-6.122 1.481-6.122 1.481-1.133 2.89-1.102 2.89-1.102l.403.525a1.12 1.12 0 0 1 .112-.01 8.527 8.527 0 0 1 2.314.01l.442-.525s1.41-.031 2.89 1.103c0 0 1.482 2.74 1.482 6.121 0 0-.875 1.522-3.148 1.596l-1.007-1.134zM10.076 11C9.475 11 9 11.45 9 12s.485 1 1.076 1c.6 0 1.075-.45 1.075-1 .01-.55-.474-1-1.075-1zm3.848 0c-.6 0-1.075.45-1.075 1s.485 1 1.075 1c.601 0 1.076-.45 1.076-1s-.475-1-1.076-1zM21 23l-4.99-5H19V4H5v14h11.003l.57 2H5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v19z',
{ fill: 'currentColor' },
)

export const NaN = ({ size }) => {
return (
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width={size}
height={size}
viewBox="0, 0, 400,400"
>
<g id="svgg">
<path
id="path0"
d="M101.000 101.200 L 2.201 200.000 21.301 219.100 L 40.400 238.199 119.700 158.800 L 199.000 79.400 119.700 158.600 L 40.400 237.799 21.500 218.899 L 2.601 200.000 101.300 101.300 L 200.000 2.600 298.700 101.300 L 397.399 200.000 378.500 218.899 L 359.600 237.799 280.300 158.600 L 201.000 79.400 280.300 158.800 L 359.600 238.199 378.699 219.100 L 397.799 200.000 299.000 101.200 C 244.660 46.860,200.110 2.400,200.000 2.400 C 199.890 2.400,155.340 46.860,101.000 101.200 M140.800 220.600 L 81.801 279.600 101.101 298.900 L 120.400 318.199 159.700 278.800 L 199.000 239.401 159.700 278.600 L 120.400 317.799 101.300 298.699 L 82.201 279.600 141.100 220.700 L 200.000 161.800 258.900 220.700 L 317.799 279.600 298.700 298.699 L 279.600 317.799 240.300 278.600 L 201.000 239.401 240.300 278.800 L 279.600 318.199 298.899 298.900 L 318.199 279.600 259.200 220.600 C 226.751 188.150,200.111 161.600,200.000 161.600 C 199.889 161.600,173.249 188.150,140.800 220.600 M180.799 340.601 L 161.802 359.601 180.901 378.700 L 200.000 397.799 219.099 378.700 L 238.198 359.601 219.201 340.601 C 208.752 330.150,200.112 321.600,200.000 321.600 C 199.888 321.600,191.248 330.150,180.799 340.601 M219.001 340.801 L 237.798 359.601 218.899 378.500 L 200.000 397.399 181.101 378.500 L 162.202 359.601 180.999 340.801 C 191.338 330.460,199.888 322.000,200.000 322.000 C 200.112 322.000,208.662 330.460,219.001 340.801 "
stroke="none"
fill="#747cfc"
fill-rule="evenodd"
></path>
<path
id="path1"
d="M100.500 100.500 C 46.105 154.895,1.600 199.671,1.600 200.002 C 1.600 200.333,10.285 209.242,20.900 219.802 L 40.200 239.000 21.100 219.798 C 10.595 209.238,2.000 200.327,2.000 199.998 C 2.000 199.214,199.217 2.000,200.001 2.000 C 200.784 2.000,398.000 199.215,398.000 199.999 C 398.000 200.328,389.405 209.238,378.900 219.798 L 359.800 239.000 379.100 219.802 C 389.715 209.242,398.400 200.332,398.400 200.001 C 398.400 199.215,200.785 1.600,199.999 1.600 C 199.669 1.600,154.895 46.105,100.500 100.500 M140.050 220.283 L 80.700 279.699 100.501 299.500 L 120.302 319.301 159.951 279.649 C 181.758 257.840,199.600 239.863,199.600 239.699 C 199.600 239.535,181.734 257.266,159.899 279.101 L 120.198 318.801 100.699 299.299 L 81.201 279.798 140.601 220.399 L 200.000 161.001 259.399 220.399 L 318.799 279.798 299.301 299.299 L 279.802 318.801 240.101 279.101 C 218.266 257.266,200.400 239.535,200.400 239.699 C 200.400 239.863,218.242 257.840,240.049 279.649 L 279.698 319.301 299.499 299.500 L 319.300 279.699 259.850 220.250 C 227.153 187.552,200.176 160.815,199.900 160.833 C 199.625 160.851,172.693 187.604,140.050 220.283 M180.198 379.100 C 190.758 389.715,199.668 398.400,200.000 398.400 C 200.332 398.400,209.242 389.715,219.802 379.100 L 239.000 359.800 219.798 378.900 C 209.238 389.405,200.328 398.000,200.000 398.000 C 199.672 398.000,190.762 389.405,180.202 378.900 L 161.000 359.800 180.198 379.100 "
stroke="none"
fill="#7484fc"
fill-rule="evenodd"
></path>
<path
id="path2"
d="M99.859 99.941 C 33.723 166.077,0.366 199.703,0.459 200.141 C 0.589 200.749,39.919 240.400,40.393 240.400 C 40.509 240.400,76.468 204.535,120.302 160.700 L 200.000 81.000 279.698 160.700 C 323.532 204.535,359.491 240.400,359.607 240.400 C 360.081 240.400,399.411 200.749,399.541 200.141 C 399.707 199.360,200.947 0.400,200.000 0.400 C 199.670 0.400,154.606 45.193,99.859 99.941 M299.500 100.500 C 353.895 154.895,398.400 199.670,398.400 200.001 C 398.400 200.332,389.670 209.332,378.999 220.001 L 359.599 239.398 279.799 159.599 L 200.000 79.801 120.201 159.599 L 40.401 239.398 21.001 220.001 C 10.330 209.332,1.600 200.333,1.600 200.002 C 1.600 199.216,199.214 1.600,199.999 1.600 C 200.329 1.600,245.105 46.105,299.500 100.500 M139.400 219.600 L 79.401 279.600 99.900 300.099 L 120.400 320.599 160.200 280.800 L 200.000 241.002 239.800 280.800 L 279.600 320.599 300.100 300.099 L 320.599 279.600 260.600 219.600 C 227.601 186.600,200.331 159.600,200.000 159.600 C 199.669 159.600,172.399 186.600,139.400 219.600 M259.850 220.250 L 319.300 279.699 299.500 299.499 L 279.700 319.299 240.047 279.650 C 218.239 257.842,200.217 240.000,200.000 240.000 C 199.783 240.000,181.761 257.842,159.953 279.650 L 120.300 319.299 100.500 299.499 L 80.700 279.699 140.050 220.283 C 172.693 187.604,199.625 160.851,199.900 160.833 C 200.176 160.815,227.153 187.552,259.850 220.250 M179.500 339.483 C 168.555 350.428,159.600 359.481,159.600 359.601 C 159.600 360.278,199.313 399.400,200.000 399.400 C 200.688 399.400,240.400 360.278,240.400 359.600 C 240.400 359.074,200.730 319.789,200.100 319.691 C 199.635 319.619,192.720 326.263,179.500 339.483 M220.000 340.200 L 239.397 359.600 220.000 379.000 C 209.332 389.670,200.332 398.400,200.000 398.400 C 199.668 398.400,190.668 389.670,180.000 379.000 L 160.603 359.600 180.000 340.200 C 190.668 329.530,199.668 320.800,200.000 320.800 C 200.332 320.800,209.332 329.530,220.000 340.200 "
stroke="none"
fill="#8c94fc"
fill-rule="evenodd"
></path>
<path
id="path3"
d="M100.700 100.700 C 46.415 154.985,2.000 199.671,2.000 200.002 C 2.000 200.333,10.640 209.242,21.201 219.801 L 40.401 238.998 120.201 159.199 L 200.000 79.401 279.799 159.199 L 359.599 238.998 378.799 219.801 C 389.360 209.242,398.000 200.332,398.000 200.001 C 398.000 199.215,200.785 2.000,199.999 2.000 C 199.669 2.000,154.985 46.415,100.700 100.700 M299.000 101.200 L 397.799 200.000 378.699 219.100 L 359.600 238.199 280.300 158.800 L 201.000 79.400 280.300 158.600 L 359.600 237.799 378.500 218.899 L 397.399 200.000 298.700 101.300 L 200.000 2.600 101.300 101.300 L 2.601 200.000 21.500 218.899 L 40.400 237.799 119.700 158.600 L 199.000 79.400 119.700 158.800 L 40.400 238.199 21.301 219.100 L 2.201 200.000 101.000 101.200 C 155.340 46.860,199.890 2.400,200.000 2.400 C 200.110 2.400,244.660 46.860,299.000 101.200 M140.499 220.501 L 81.199 279.802 100.701 299.301 L 120.202 318.799 159.601 279.300 L 199.000 239.800 159.700 278.999 L 120.400 318.199 101.100 298.899 L 81.801 279.600 140.900 220.500 L 200.000 161.400 259.100 220.500 L 318.199 279.600 298.900 298.899 L 279.600 318.199 240.300 278.999 L 201.000 239.800 240.399 279.300 L 279.798 318.799 299.299 299.301 L 318.801 279.802 259.501 220.501 C 226.886 187.885,200.111 161.200,200.000 161.200 C 199.889 161.200,173.114 187.885,140.499 220.501 M141.000 220.800 L 82.201 279.600 101.300 298.699 L 120.400 317.799 159.500 278.773 C 197.777 240.567,198.632 239.747,200.104 239.777 C 201.553 239.808,203.012 241.214,240.604 278.804 L 279.600 317.799 298.700 298.699 L 317.799 279.600 259.000 220.800 C 226.661 188.460,200.111 162.000,200.000 162.000 C 199.889 162.000,173.339 188.460,141.000 220.800 M180.200 340.400 L 161.003 359.600 180.200 378.800 C 190.758 389.360,199.668 398.000,200.000 398.000 C 200.332 398.000,209.242 389.360,219.800 378.800 L 238.997 359.600 219.800 340.400 C 209.242 329.840,200.332 321.200,200.000 321.200 C 199.668 321.200,190.758 329.840,180.200 340.400 M219.201 340.601 L 238.198 359.601 219.099 378.700 L 200.000 397.799 180.901 378.700 L 161.802 359.601 180.799 340.601 C 191.248 330.150,199.888 321.600,200.000 321.600 C 200.112 321.600,208.752 330.150,219.201 340.601 M180.999 340.801 L 162.202 359.601 181.101 378.500 L 200.000 397.399 218.899 378.500 L 237.798 359.601 219.001 340.801 C 208.662 330.460,200.112 322.000,200.000 322.000 C 199.888 322.000,191.338 330.460,180.999 340.801 "
stroke="none"
fill="#787cfc"
fill-rule="evenodd"
></path>
<path
id="path4"
d=""
stroke="none"
fill="#7c7cfc"
fill-rule="evenodd"
></path>
</g>
</svg>
)
}

export const Pause = ({ size, color, ...props }) => {
return (
<svg
version="1.1"
width={size}
height={size}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill={color}
{...props}
>
<g>
<path
d="M181.333,0H74.667c-17.643,0-32,14.357-32,32v448c0,17.643,14.357,32,32,32h106.667c17.643,0,32-14.357,32-32V32
C213.333,14.357,198.976,0,181.333,0z"
/>
<path
d="M437.333,0H330.667c-17.643,0-32,14.357-32,32v448c0,17.643,14.357,32,32,32h106.667c17.643,0,32-14.357,32-32V32
C469.333,14.357,454.976,0,437.333,0z"
/>
</g>
</svg>
)
}

export const Play = ({ size, color, ...props }) => {
return (
<svg
version="1.1"
width={size}
height={size}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 494.148 494.148"
fill={color}
{...props}
>
<path
d="M405.284,201.188L130.804,13.28C118.128,4.596,105.356,0,94.74,0C74.216,0,61.52,16.472,61.52,44.044v406.124
c0,27.54,12.68,43.98,33.156,43.98c10.632,0,23.2-4.6,35.904-13.308l274.608-187.904c17.66-12.104,27.44-28.392,27.44-45.884
C432.632,229.572,422.964,213.288,405.284,201.188z"
/>
</svg>
)
}

export const Stack = ({ size, color, ...props }) => {
return (
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 32.508 32.508"
fill={color}
{...props}
>
<g>
<path d="M0,11.257l16.254-9.075l16.254,9.075l-16.254,9.074L0,11.257z" />
<path d="M0,16.255l1.908-1.614l14.346,7.715l14.32-7.748l1.934,1.647l-16.254,9.072L0,16.255z" />
<path d="M0,21.254l1.908-1.615l14.346,7.716l14.32-7.75l1.934,1.649l-16.254,9.072L0,21.254z" />
</g>
</svg>
)
}

export const Volume = ({ size, color, ...props }) => {
return (
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 475.082 475.081"
fill={color}
{...props}
>
<g>
<path
d="M200.999,63.952c-4.946,0-9.229,1.812-12.847,5.426l-95.074,95.075H18.276c-4.952,0-9.234,1.812-12.85,5.424
C1.809,173.493,0,177.778,0,182.726v109.63c0,4.949,1.809,9.233,5.426,12.848c3.619,3.617,7.902,5.427,12.85,5.427h74.798
l95.074,95.078c3.617,3.61,7.9,5.424,12.847,5.424c4.952,0,9.234-1.813,12.85-5.424c3.617-3.614,5.426-7.901,5.426-12.847V82.228
c0-4.948-1.809-9.234-5.422-12.85C210.23,65.764,205.951,63.952,200.999,63.952z"
/>
<path
d="M316.769,277.936c8.093-12.467,12.135-25.93,12.135-40.395s-4.042-27.992-12.135-40.556
c-8.094-12.562-18.791-21.41-32.121-26.551c-1.902-0.949-4.284-1.427-7.139-1.427c-4.944,0-9.232,1.762-12.847,5.282
c-3.61,3.521-5.427,7.852-5.427,12.99c0,3.997,1.143,7.376,3.432,10.137c2.283,2.762,5.041,5.142,8.282,7.139
c3.23,1.998,6.468,4.188,9.708,6.567c3.238,2.38,5.996,5.758,8.278,10.135c2.276,4.38,3.426,9.804,3.426,16.277
c0,6.471-1.143,11.896-3.426,16.276c-2.282,4.381-5.04,7.755-8.278,10.14c-3.24,2.379-6.478,4.569-9.708,6.567
c-3.241,1.992-5.999,4.377-8.282,7.132c-2.282,2.765-3.432,6.143-3.432,10.14c0,5.144,1.816,9.47,5.427,12.99
c3.614,3.521,7.902,5.288,12.847,5.288c2.854,0,5.236-0.479,7.139-1.424C297.978,299.304,308.679,290.403,316.769,277.936z"
/>
<path
d="M377.728,318.194c16.18-24.646,24.273-51.531,24.273-80.654c0-29.124-8.094-56.005-24.273-80.666
c-16.177-24.645-37.6-42.583-64.241-53.815c-2.471-0.95-4.948-1.427-7.416-1.427c-4.948,0-9.236,1.809-12.854,5.426
c-3.613,3.616-5.424,7.898-5.424,12.847c0,7.424,3.713,13.039,11.139,16.849c10.657,5.518,17.888,9.705,21.693,12.559
c14.089,10.28,25.077,23.173,32.976,38.686c7.898,15.514,11.848,32.026,11.848,49.537c0,17.512-3.949,34.023-11.848,49.536
c-7.898,15.516-18.894,28.407-32.976,38.684c-3.806,2.857-11.036,7.043-21.693,12.563c-7.426,3.809-11.139,9.424-11.139,16.847
c0,4.948,1.811,9.236,5.424,12.847c3.617,3.621,7.991,5.432,13.131,5.432c2.286,0,4.668-0.483,7.139-1.428
C340.128,360.783,361.551,342.844,377.728,318.194z"
/>
<path
d="M438.824,116.92c-24.171-36.638-56.343-63.622-96.505-80.943c-2.471-0.95-4.948-1.425-7.416-1.425
c-4.948,0-9.236,1.811-12.847,5.424c-3.621,3.615-5.432,7.902-5.432,12.85c0,6.851,3.714,12.469,11.14,16.846
c1.335,0.756,3.467,1.755,6.42,2.996c2.95,1.232,5.089,2.231,6.427,2.993c8.754,4.755,16.56,9.611,23.418,14.56
c23.407,17.318,41.682,38.922,54.816,64.809c13.134,25.885,19.697,53.388,19.697,82.512c0,29.129-6.563,56.626-19.697,82.512
c-13.131,25.889-31.409,47.496-54.816,64.809c-6.858,4.948-14.664,9.801-23.418,14.562c-1.338,0.756-3.477,1.752-6.427,2.99
c-2.953,1.232-5.085,2.231-6.42,2.998c-7.426,4.374-11.14,9.993-11.14,16.844c0,4.949,1.811,9.233,5.432,12.848
c3.61,3.617,7.898,5.427,12.847,5.427c2.468,0,4.945-0.476,7.416-1.431c40.162-17.315,72.334-44.3,96.505-80.94
c24.174-36.638,36.258-76.849,36.258-120.625S463.001,153.554,438.824,116.92z"
/>
</g>
</svg>
)
}

export const Expand = ({ size, color, ...props }) => {
return (
<svg
height={size}
viewBox="0 0 482.239 482.239"
width={size}
xmlns="http://www.w3.org/2000/svg"
fill={color}
{...props}
>
<path d="m447.793 447.793h-413.347v-413.347h206.674v-34.446h-223.897c-9.52 0-17.223 7.703-17.223 17.223v447.793c0 9.52 7.703 17.223 17.223 17.223h447.793c9.52 0 17.223-7.703 17.223-17.223v-223.896h-34.446z" />
<path d="m310.011 0v34.446h113.428l-194.496 194.496 24.354 24.354 194.496-194.496v113.428h34.446v-172.228z" />
</svg>
)
}

export const Reduce = ({ size, color, ...props }) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 512 512"
width={size}
height={size}
fill={color}
{...props}
>
<path d="M198,354L198,354h-40v-40l0,0C180.091,314,198,331.909,198,354z M79,354h40v-40H79V354z M0,354L0,354h40v-40l0,0 C17.909,314,0,331.909,0,354z M158,512L158,512c22.091,0,40-17.909,40-40h-40V512z M79,512h40v-40H79V512z M0,433h40v-40H0V433z M158,433h40v-40h-40V433z M40,512L40,512v-40H0C0,494.091,17.909,512,40,512z M452,0H60C26.916,0,0,26.916,0,60v214h40V60 c0-11.028,8.972-20,20-20h384.715L277,207.715V141h-40v135h135v-40h-66.715L472,69.285V452c0,11.028-8.972,20-20,20H238v40h214 c33.084,0,60-26.916,60-60V60C512,26.916,485.084,0,452,0z" />
</svg>
)
}
65 changes: 65 additions & 0 deletions component/markdown.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { Span, Color, P, Div } from './elements.jsx'
import { css } from '../lib/dom.js'
import { NavLink } from './header.jsx'

css(`
.warn{
outline:1px dashed red;
padding:0.8rem;
}

`)

export const MTitle = Object.fromEntries(
['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map((el) => [
el,
({ children, ...props }) =>
h(
el,
props,
<>
<Span fg="red">{'#'.repeat(Number(el.slice(1)))}</Span>&nbsp;
</>,
children,
),
]),
)

export const MItalicWord = ({ children, color, type }) => {
return (
<P>
<Color.Orange>{'>'}</Color.Orange>
<Color.CommentLighter>*</Color.CommentLighter>
<Span fg={color} style={{ fontStyle: 'italic' }}>
{children}
</Span>
<Color.CommentLighter>*</Color.CommentLighter>
{type === 'ps' && <Color.Orange>{'<'}</Color.Orange>}
</P>
)
}

export const MLi = ({ children, link, ...props }) => {
let ColorIze = link ? Color.CyanDarker : Color.CommentLighter
console.log('props', props)
return (
<NavLink class={`mli`} href={link ? link : '#'} {...props}>
<Span
style={{
padding: '0.1rem',
background: !link && 'rgba(75, 75, 75, 0.63)',
textDecoration: link && 'underline',
}}
fg={link ? 'cyan-darker' : 'white'}
>
<ColorIze>{link ? '[' : '`'}</ColorIze>
{children}
<ColorIze>{link ? ']' : '`'}</ColorIze>
</Span>
</NavLink>
)
}

export const Warning = ({ children }) => {
return <Div class="warn">{children}</Div>
}
Loading