Skip to content

Commit 3303e20

Browse files
kriszypkriszyp
committed
Initial prototype
0 parents  commit 3303e20

File tree

15 files changed

+865
-0
lines changed

15 files changed

+865
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
This is an example/prototype of running a NextJS inside of HarperDB. This can be installed or run as a HarperDB application by git cloning this, npm installing and running `harperdb run /path/to/next-template`. You can then visit http://localhost:9926/ and see the entry page.

‎app/favicon.ico‎

25.3 KB
Binary file not shown.

‎app/globals.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
:root {
2+
--max-width: 1100px;
3+
--border-radius: 12px;
4+
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
5+
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
6+
'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
7+
8+
--foreground-rgb: 0, 0, 0;
9+
--background-start-rgb: 214, 219, 220;
10+
--background-end-rgb: 255, 255, 255;
11+
12+
--primary-glow: conic-gradient(
13+
from 180deg at 50% 50%,
14+
#16abff33 0deg,
15+
#0885ff33 55deg,
16+
#54d6ff33 120deg,
17+
#0071ff33 160deg,
18+
transparent 360deg
19+
);
20+
--secondary-glow: radial-gradient(
21+
rgba(255, 255, 255, 1),
22+
rgba(255, 255, 255, 0)
23+
);
24+
25+
--tile-start-rgb: 239, 245, 249;
26+
--tile-end-rgb: 228, 232, 233;
27+
--tile-border: conic-gradient(
28+
#00000080,
29+
#00000040,
30+
#00000030,
31+
#00000020,
32+
#00000010,
33+
#00000010,
34+
#00000080
35+
);
36+
37+
--callout-rgb: 238, 240, 241;
38+
--callout-border-rgb: 172, 175, 176;
39+
--card-rgb: 180, 185, 188;
40+
--card-border-rgb: 131, 134, 135;
41+
}
42+
43+
@media (prefers-color-scheme: dark) {
44+
:root {
45+
--foreground-rgb: 255, 255, 255;
46+
--background-start-rgb: 0, 0, 0;
47+
--background-end-rgb: 0, 0, 0;
48+
49+
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
50+
--secondary-glow: linear-gradient(
51+
to bottom right,
52+
rgba(1, 65, 255, 0),
53+
rgba(1, 65, 255, 0),
54+
rgba(1, 65, 255, 0.3)
55+
);
56+
57+
--tile-start-rgb: 2, 13, 46;
58+
--tile-end-rgb: 2, 5, 19;
59+
--tile-border: conic-gradient(
60+
#ffffff80,
61+
#ffffff40,
62+
#ffffff30,
63+
#ffffff20,
64+
#ffffff10,
65+
#ffffff10,
66+
#ffffff80
67+
);
68+
69+
--callout-rgb: 20, 20, 20;
70+
--callout-border-rgb: 108, 108, 108;
71+
--card-rgb: 100, 100, 100;
72+
--card-border-rgb: 200, 200, 200;
73+
}
74+
}
75+
76+
* {
77+
box-sizing: border-box;
78+
padding: 0;
79+
margin: 0;
80+
}
81+
82+
html,
83+
body {
84+
max-width: 100vw;
85+
overflow-x: hidden;
86+
}
87+
88+
body {
89+
color: rgb(var(--foreground-rgb));
90+
background: linear-gradient(
91+
to bottom,
92+
transparent,
93+
rgb(var(--background-end-rgb))
94+
)
95+
rgb(var(--background-start-rgb));
96+
}
97+
98+
a {
99+
color: inherit;
100+
text-decoration: none;
101+
}
102+
103+
@media (prefers-color-scheme: dark) {
104+
html {
105+
color-scheme: dark;
106+
}
107+
}

‎app/layout.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Inter } from 'next/font/google'
2+
import './globals.css'
3+
4+
const inter = Inter({ subsets: ['latin'] })
5+
6+
export const metadata = {
7+
title: 'Create Next App',
8+
description: 'Generated by create next app',
9+
}
10+
11+
export default function RootLayout({ children }) {
12+
return (
13+
<html lang="en">
14+
<body className={inter.className}>{children}</body>
15+
</html>
16+
)
17+
}

‎app/page.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import styles from './page.module.css'
2+
const { Dog } = tables;
3+
4+
export default async function Home() {
5+
let dogs = [];
6+
// get a list of dogs to render. note that nextjs's rendering doesn't (yet) support async iterators, so
7+
// we have to accumulate these first
8+
for await (let dog of Dog.search({})) {
9+
dogs.push(dog);
10+
}
11+
return (
12+
<main className={styles.main}>
13+
<div className={styles.description}>
14+
<p>
15+
Here are some dogs:
16+
<ul>
17+
{dogs.map((dog) => (
18+
<li>{dog.name}</li>
19+
))}
20+
</ul>
21+
</p>
22+
</div>
23+
</main>
24+
)
25+
}

‎app/page.module.css‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
.main {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: space-between;
5+
align-items: center;
6+
padding: 6rem;
7+
min-height: 100vh;
8+
}
9+
10+
.description {
11+
display: inherit;
12+
justify-content: inherit;
13+
align-items: inherit;
14+
font-size: 0.85rem;
15+
max-width: var(--max-width);
16+
width: 100%;
17+
z-index: 2;
18+
font-family: var(--font-mono);
19+
}
20+
21+
.description a {
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
gap: 0.5rem;
26+
}
27+
28+
.description p {
29+
position: relative;
30+
margin: 0;
31+
padding: 1rem;
32+
background-color: rgba(var(--callout-rgb), 0.5);
33+
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
34+
border-radius: var(--border-radius);
35+
}
36+
37+
.code {
38+
font-weight: 700;
39+
font-family: var(--font-mono);
40+
}
41+
42+
.grid {
43+
display: grid;
44+
grid-template-columns: repeat(4, minmax(25%, auto));
45+
max-width: 100%;
46+
width: var(--max-width);
47+
}
48+
49+
.card {
50+
padding: 1rem 1.2rem;
51+
border-radius: var(--border-radius);
52+
background: rgba(var(--card-rgb), 0);
53+
border: 1px solid rgba(var(--card-border-rgb), 0);
54+
transition: background 200ms, border 200ms;
55+
}
56+
57+
.card span {
58+
display: inline-block;
59+
transition: transform 200ms;
60+
}
61+
62+
.card h2 {
63+
font-weight: 600;
64+
margin-bottom: 0.7rem;
65+
}
66+
67+
.card p {
68+
margin: 0;
69+
opacity: 0.6;
70+
font-size: 0.9rem;
71+
line-height: 1.5;
72+
max-width: 30ch;
73+
}
74+
75+
.center {
76+
display: flex;
77+
justify-content: center;
78+
align-items: center;
79+
position: relative;
80+
padding: 4rem 0;
81+
}
82+
83+
.center::before {
84+
background: var(--secondary-glow);
85+
border-radius: 50%;
86+
width: 480px;
87+
height: 360px;
88+
margin-left: -400px;
89+
}
90+
91+
.center::after {
92+
background: var(--primary-glow);
93+
width: 240px;
94+
height: 180px;
95+
z-index: -1;
96+
}
97+
98+
.center::before,
99+
.center::after {
100+
content: '';
101+
left: 50%;
102+
position: absolute;
103+
filter: blur(45px);
104+
transform: translateZ(0);
105+
}
106+
107+
.logo {
108+
position: relative;
109+
}
110+
/* Enable hover only on non-touch devices */
111+
@media (hover: hover) and (pointer: fine) {
112+
.card:hover {
113+
background: rgba(var(--card-rgb), 0.1);
114+
border: 1px solid rgba(var(--card-border-rgb), 0.15);
115+
}
116+
117+
.card:hover span {
118+
transform: translateX(4px);
119+
}
120+
}
121+
122+
@media (prefers-reduced-motion) {
123+
.card:hover span {
124+
transform: none;
125+
}
126+
}
127+
128+
/* Mobile */
129+
@media (max-width: 700px) {
130+
.content {
131+
padding: 4rem;
132+
}
133+
134+
.grid {
135+
grid-template-columns: 1fr;
136+
margin-bottom: 120px;
137+
max-width: 320px;
138+
text-align: center;
139+
}
140+
141+
.card {
142+
padding: 1rem 2.5rem;
143+
}
144+
145+
.card h2 {
146+
margin-bottom: 0.5rem;
147+
}
148+
149+
.center {
150+
padding: 8rem 0 6rem;
151+
}
152+
153+
.center::before {
154+
transform: none;
155+
height: 300px;
156+
}
157+
158+
.description {
159+
font-size: 0.8rem;
160+
}
161+
162+
.description a {
163+
padding: 1rem;
164+
}
165+
166+
.description p,
167+
.description div {
168+
display: flex;
169+
justify-content: center;
170+
position: fixed;
171+
width: 100%;
172+
}
173+
174+
.description p {
175+
align-items: center;
176+
inset: 0 0 auto;
177+
padding: 2rem 1rem 1.4rem;
178+
border-radius: 0;
179+
border: none;
180+
border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
181+
background: linear-gradient(
182+
to bottom,
183+
rgba(var(--background-start-rgb), 1),
184+
rgba(var(--callout-rgb), 0.5)
185+
);
186+
background-clip: padding-box;
187+
backdrop-filter: blur(24px);
188+
}
189+
190+
.description div {
191+
align-items: flex-end;
192+
pointer-events: none;
193+
inset: auto 0 0;
194+
padding: 2rem;
195+
height: 200px;
196+
background: linear-gradient(
197+
to bottom,
198+
transparent 0%,
199+
rgb(var(--background-end-rgb)) 40%
200+
);
201+
z-index: 1;
202+
}
203+
}
204+
205+
/* Tablet and Smaller Desktop */
206+
@media (min-width: 701px) and (max-width: 1120px) {
207+
.grid {
208+
grid-template-columns: repeat(2, 50%);
209+
}
210+
}
211+
212+
@media (prefers-color-scheme: dark) {
213+
.vercelLogo {
214+
filter: invert(1);
215+
}
216+
217+
.logo {
218+
filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
219+
}
220+
}
221+
222+
@keyframes rotate {
223+
from {
224+
transform: rotate(360deg);
225+
}
226+
to {
227+
transform: rotate(0deg);
228+
}
229+
}

0 commit comments

Comments
 (0)