Skip to content

Commit 4b9fcd2

Browse files
haydncomleyhaydncomley
committed
Some Content
1 parent a71041c commit 4b9fcd2

23 files changed

+562
-154
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"author": "Haydn Comley",
1111
"license": "MIT",
1212
"scripts": {
13-
"dev": "vite",
13+
"dev": "cd src/example && yarn dev",
1414
"build:example": "cd src/example && yarn build",
1515
"make": "yarn make:types && yarn make:lib:cjs && yarn make:lib:esm",
1616
"make:types": "tsc --project ./tsconfig.out.json",

‎src/example/src/app.ts

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
import { app, render, store } from "../../nice";
2+
import { Navigation } from "./components/nav";
23
import { ThemeWidget } from "./components/theme-widget";
4+
import { CalloutSection } from "./sections/callout";
35
import { HeroSection } from "./sections/hero";
46

5-
export const [ globalStore ] = store({
7+
export const globalStore = store({
68
appName: 'haydn',
7-
isMenuOpen: false,
9+
isNavOpen: false,
10+
globalCount: 0,
811
});
912

1013
export const myApp = app(() => {
1114
return render`
1215
<main>
1316
${ThemeWidget()}
14-
15-
${HeroSection({})}
17+
${Navigation()}
18+
19+
${HeroSection()}
20+
${CalloutSection({ header: 'Hello World', subheader: 'This is some more content' })}
21+
${HeroSection()}
1622
</main>
1723
`;
1824
});

‎src/example/src/components/bar.module.scss

-29
This file was deleted.

‎src/example/src/components/bar.ts

-32
This file was deleted.

‎src/example/src/components/button.module.scss

+15-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.button {
22
font-family: inherit;
33
padding: 0.8rem 1.4rem;
4-
font-size: 1.2rem;
4+
font-size: 1rem;
55
font-weight: 400;
66
background: rgb(var(--theme-primary));
77
background: linear-gradient(to bottom right, rgb(var(--theme-primary)), rgb(var(--theme-secondary)));
@@ -53,4 +53,18 @@
5353
color: rgb(var(--theme-primary));
5454
}
5555
}
56+
57+
&:active {
58+
transform: scale(0.95);
59+
box-shadow: 0 0.15rem 1.5rem rgba(var(--theme-primary), .85);
60+
61+
62+
&::before {
63+
opacity: 0.9;
64+
}
65+
66+
span {
67+
transform: scale(0.98);
68+
}
69+
}
5670
}

‎src/example/src/components/link.module.scss

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
.link {
2+
color: rgb(var(--theme-contrast));
3+
display: inline-block;
4+
position: relative;
5+
text-decoration: none;
6+
animation-duration: 2s;
7+
transition: .1s ease;
8+
-webkit-tap-highlight-color: transparent;
9+
10+
&:hover {
11+
color: rgb(var(--theme-secondary));
12+
transform: scale(0.95);
13+
14+
.linkWiggle {
15+
transform: translateY(calc(55% - .1em)) scaleY(0.75);
16+
17+
&::after {
18+
opacity: 0.5;
19+
}
20+
}
21+
}
22+
23+
.linkWiggle {
24+
&::after {
25+
animation: slideLeft 0.5s infinite linear;
26+
}
27+
}
28+
}
29+
30+
@keyframes slideLeft {
31+
0% {
32+
transform: translateY(-50%) translateX(0%);
33+
}
34+
100% {
35+
transform: translateY(-50%) translateX(-0.6em);
36+
}
37+
}
38+
39+
.linkWiggle {
40+
position: absolute;
41+
top: 0;
42+
left: 0;
43+
right: 0;
44+
bottom: 0;
45+
transform: translateY(55%) scaleY(1);
46+
overflow: hidden;
47+
transition: .1s ease;
48+
display: inline-block;
49+
50+
&::after {
51+
pointer-events: none;
52+
position: absolute;
53+
left: 0;
54+
top: 0;
55+
color: transparent;
56+
content: attr(data-label)attr(data-label);
57+
text-decoration: underline;
58+
text-decoration-style: wavy;
59+
text-decoration-color: rgb(var(--theme-secondary));
60+
text-decoration-skip-ink: none;
61+
transform: translateY(-50%);
62+
opacity: 0.75;
63+
transition: .1s ease;
64+
}
65+
}

‎src/example/src/components/link.ts

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { type NiceProp, component, computed, render, valueOf } from "../../../nice";
2+
3+
import styles from './link.module.scss'
4+
5+
export const Link = component<{
6+
label: NiceProp<string>
7+
url: NiceProp<string>
8+
isExternal: NiceProp<boolean>
9+
}>(({
10+
label,
11+
url,
12+
isExternal
13+
}) => {
14+
const linkTarget = computed(() => {
15+
return isExternal ? '_blank' : '_self';
16+
}, [isExternal])
17+
18+
const labelText = computed(() => {
19+
return valueOf(label).trim();
20+
}, [label])
21+
22+
const labelTextWhole = computed(() => {
23+
return valueOf(label).trim().replaceAll(' ', '_');
24+
}, [label])
25+
26+
return render`
27+
<a class=${styles.link} target=${linkTarget} href=${url}>
28+
${labelText}
29+
<span class=${styles.linkWiggle} data-label=${labelTextWhole}></span>
30+
</a>`
31+
});

‎src/example/src/components/nav.module.scss

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
@use 'easy-theme' as theme;
2+
3+
.nav {
4+
position: fixed;
5+
top: 1rem;
6+
right: 1rem;
7+
padding: 1rem;
8+
border-radius: 1rem;
9+
background-color: rgba(var(--theme-background), 1);
10+
border: .2rem solid rgb(var(--theme-primary));
11+
z-index: 5;
12+
display: flex;
13+
14+
@include theme.Mobile {
15+
right: 0;
16+
border-radius: 1rem 0 0 1rem;
17+
border-right: none;
18+
padding: 0.75rem;
19+
padding-left: 1rem;
20+
21+
&::after {
22+
content: '';
23+
position: fixed;
24+
left: 0;
25+
top: 0;
26+
height: 100%;
27+
width: 100%;
28+
background-color: rgba(0,0,0, 0);
29+
pointer-events: none;
30+
transition: .2s ease;
31+
}
32+
33+
&[data-is-open="true"]::after {
34+
background-color: rgba(0,0,0, .5);
35+
backdrop-filter: blur(0.2rem);
36+
pointer-events: auto;
37+
}
38+
}
39+
}
40+
41+
.navButton {
42+
height: 2rem;
43+
width: 2rem;
44+
padding: 0;
45+
margin: 0;
46+
background: transparent;
47+
border: none;
48+
cursor: pointer;
49+
border-radius: 50%;
50+
-webkit-tap-highlight-color: transparent;
51+
z-index: 1;
52+
53+
svg {
54+
height: 100%;
55+
width: 100%;
56+
57+
path {
58+
stroke: rgb(var(--theme-contrast));
59+
}
60+
}
61+
62+
@include theme.NotMobile {
63+
display: none
64+
};
65+
}
66+
67+
.navContent {
68+
display: flex;
69+
gap: .5rem;
70+
z-index: 10;
71+
72+
@include theme.Mobile {
73+
position: fixed;
74+
top: 6rem;
75+
right: 0;
76+
flex-direction: column;
77+
align-items: center;
78+
gap: 0.5rem;
79+
border-radius: 1rem 0 0 1rem;
80+
background-color: rgba(var(--theme-background), 1);
81+
border: .2rem solid rgb(var(--theme-secondary));
82+
border-right: none;
83+
padding: 1.25rem;
84+
transform: translateX(100%);
85+
transition: .2s ease;
86+
87+
[data-is-open="true"] & {
88+
transform: translateX(0%);
89+
}
90+
};
91+
}
92+
93+
.navDivide {
94+
opacity: 0.5;
95+
}

‎src/example/src/components/nav.ts

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { component, computed, render } from "../../../nice";
2+
import { globalStore } from "../app";
3+
import { Link } from "./link";
4+
5+
import styles from './nav.module.scss'
6+
7+
export const Navigation = component(() => {
8+
const isNavOpen = globalStore('isNavOpen');
9+
10+
const toggleNav = computed(() => {
11+
isNavOpen.set(!isNavOpen.get());
12+
});
13+
14+
return render`
15+
<nav class=${styles.nav} data-is-open=${isNavOpen}>
16+
<button class=${styles.navButton} on-click=${toggleNav}>
17+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
18+
<path d="M4 18L20 18" stroke-width="2" stroke-linecap="round"/>
19+
<path d="M4 12L20 12" stroke-width="2" stroke-linecap="round"/>
20+
<path d="M4 6L20 6" stroke-width="2" stroke-linecap="round"/>
21+
</svg>
22+
</button>
23+
24+
<div class=${styles.navContent}>
25+
${Link({ isExternal: true, label: 'About', url: "https://github.com/haydncomley" })}
26+
<span class=${styles.navDivide}>•</span>
27+
${Link({ isExternal: true, label: 'GitHub', url: "https://github.com/haydncomley" })}
28+
</div>
29+
</nav>
30+
`
31+
});

0 commit comments

Comments
 (0)