anatolykopyl/kopyl.dev
1
0
Fork 0
Code Issues Pull Requests Actions Wiki Activity

Added state management

Browse Source
This commit is contained in:
Anatoly Kopyl
2022-05-19 22:57:38 +03:00
parent 68f9600e08
commit b3aa31a3f6
12 changed files with 111 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" /> <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<title>Solid App</title> <title>Anatoly Kopyl</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

34
package-lock.json generated
View File

@@ -10,6 +10,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@solid-primitives/i18n": "^1.1.0", "@solid-primitives/i18n": "^1.1.0",
"@solid-primitives/intersection-observer": "^1.3.0",
"solid-js": "^1.3.13" "solid-js": "^1.3.13"
}, },
"devDependencies": { "devDependencies": {
@@ -527,6 +528,25 @@
"solid-js": "^1.3.1" "solid-js": "^1.3.1"
} }
}, },
"node_modules/@solid-primitives/intersection-observer": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@solid-primitives/intersection-observer/-/intersection-observer-1.3.0.tgz",
"integrity": "sha512-A0I/fmx7qBx4z7m7a1gEwdjlpDeRIu/OHMnZ6DKvuwV07r58bSAJ5LHdrkR4dPRa4U9HO359JRUKVUfe4l4ZUA==",
"dependencies": {
"@solid-primitives/utils": "^1.0.0"
},
"peerDependencies": {
"solid-js": "^1.3.1"
}
},
"node_modules/@solid-primitives/utils": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-1.5.2.tgz",
"integrity": "sha512-dZUHjzasuqS2lDO+PQCY1+jFmtWHlaP3tUvkX1Jr06LI/Ipa2P/ZNVSvuIoqQ0Bg+Ny27LvtrXxflZNeGtptvA==",
"peerDependencies": {
"solid-js": "^1.3.1"
}
},
"node_modules/ansi-styles": { "node_modules/ansi-styles": {
"version": "3.2.1", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -1806,6 +1826,20 @@
"integrity": "sha512-aqJttEb8rmsQTU5VqfBfaeHFMIqKu1eXHVEahtW4DGKYBz/CDis5V25psQEyspuVTmPs7RpX99Whe9jV7ib4pg==", "integrity": "sha512-aqJttEb8rmsQTU5VqfBfaeHFMIqKu1eXHVEahtW4DGKYBz/CDis5V25psQEyspuVTmPs7RpX99Whe9jV7ib4pg==",
"requires": {} "requires": {}
}, },
"@solid-primitives/intersection-observer": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@solid-primitives/intersection-observer/-/intersection-observer-1.3.0.tgz",
"integrity": "sha512-A0I/fmx7qBx4z7m7a1gEwdjlpDeRIu/OHMnZ6DKvuwV07r58bSAJ5LHdrkR4dPRa4U9HO359JRUKVUfe4l4ZUA==",
"requires": {
"@solid-primitives/utils": "^1.0.0"
}
},
"@solid-primitives/utils": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-1.5.2.tgz",
"integrity": "sha512-dZUHjzasuqS2lDO+PQCY1+jFmtWHlaP3tUvkX1Jr06LI/Ipa2P/ZNVSvuIoqQ0Bg+Ny27LvtrXxflZNeGtptvA==",
"requires": {}
},
"ansi-styles": { "ansi-styles": {
"version": "3.2.1", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",

1
package.json
View File

@@ -16,6 +16,7 @@
}, },
"dependencies": { "dependencies": {
"@solid-primitives/i18n": "^1.1.0", "@solid-primitives/i18n": "^1.1.0",
"@solid-primitives/intersection-observer": "^1.3.0",
"solid-js": "^1.3.13" "solid-js": "^1.3.13"
} }
} }

BIN
src/assets/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

3
src/assets/icons/grid-fill.svg
View File

@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-grid-3x3-gap-fill" viewBox="0 0 16 16">
<path d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 778 B

8
src/components/Controls.tsx
View File

@@ -1,16 +1,18 @@
import { For, createSignal } from 'solid-js'; import { For, createSignal } from 'solid-js';
import { useStore } from '../store/index';
import styles from './Controls.module.css'; import styles from './Controls.module.css';
import homeIcon from '../assets/icons/home.svg' import homeIcon from '../assets/icons/home.svg'
import gridIcon from '../assets/icons/grid.svg' import gridIcon from '../assets/icons/grid.svg'
export default () => { export default () => {
const [store] = useStore();
const [selected, setSelected] = createSignal(0); const [selected, setSelected] = createSignal(0);
const [blobby, setBlobby] = createSignal([0]); const [blobby, setBlobby] = createSignal([0]);
const controls = [ const controls = [
{ icon: homeIcon }, { name: 'home', icon: homeIcon },
{ icon: gridIcon }, { name: 'projects', icon: gridIcon },
{ icon: homeIcon }, { name: 'whatever', icon: homeIcon },
] ]
return ( return (

14
src/components/Hero.tsx
View File

@@ -1,12 +1,24 @@
import { useI18n } from "@solid-primitives/i18n"; import { useI18n } from "@solid-primitives/i18n";
import { createViewportObserver } from '@solid-primitives/intersection-observer';
import { useStore } from '../store/index';
import styles from './Hero.module.css'; import styles from './Hero.module.css';
export default () => { export default () => {
const [t] = useI18n(); const [t] = useI18n();
const [add] = createViewportObserver();
const [, { setVisibleChapter }] = useStore();
return ( return (
<header class={styles.Hero}> <header
ref={el => {
add(el, (event) => {
console.log(event.isIntersecting);
setVisibleChapter('home');
});
}}
class={styles.Hero}
>
<div> <div>
<h1 class={styles.gradientText}> <h1 class={styles.gradientText}>
{t('my_name')} {t('my_name')}

7
src/components/Projects/Projects.module.css
View File

@@ -0,0 +1,7 @@
.Projects {
padding: 32px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

16
src/components/Projects/Projects.tsx
View File

@@ -1,8 +1,22 @@
import { createViewportObserver } from '@solid-primitives/intersection-observer';
import { useStore } from '../../store/index';
import styles from './Projects.module.css'; import styles from './Projects.module.css';
export default () => { export default () => {
const [, { setVisibleChapter }] = useStore();
const [add] = createViewportObserver();
return ( return (
<div class={styles.Projects}> <div
ref={el => {
add(el, (event) => {
console.log(event.isIntersecting);
setVisibleChapter('projects');
});
}}
class={styles.Projects}
>
</div> </div>
) )

3
src/index.tsx
View File

@@ -3,15 +3,18 @@ import { render } from 'solid-js/web';
import { I18nContext } from "@solid-primitives/i18n"; import { I18nContext } from "@solid-primitives/i18n";
import { StoreProvider } from "./store/index";
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import localization from './localization'; import localization from './localization';
render( render(
() => ( () => (
<StoreProvider>
<I18nContext.Provider value={localization}> <I18nContext.Provider value={localization}>
<App /> <App />
</I18nContext.Provider> </I18nContext.Provider>
</StoreProvider>
), ),
document.getElementById('root') as HTMLElement document.getElementById('root') as HTMLElement
); );

2
src/localization/en.json
View File

@@ -1,4 +1,4 @@
{ {
"my_name": "rerererere", "my_name": "Anatoly Kopyl",
"tagline": "Professional fullstack developer with standards" "tagline": "Professional fullstack developer with standards"
} }

31
src/store/index.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { createSignal, createContext, useContext } from "solid-js";
import type { Accessor, Setter } from 'solid-js';
type Store = [
{ visibleChapter: Accessor<string> },
{ setVisibleChapter: Setter<string> }
]
const StoreContext = createContext<Store>();
export function StoreProvider(props) {
const [visibleChapter, setVisibleChapter] = createSignal('home');
const store: Store = [
{
visibleChapter
},
{
setVisibleChapter
}
];
return (
<StoreContext.Provider value={store}>
{props.children}
</StoreContext.Provider>
);
}
export function useStore() {
return useContext(StoreContext);
}