Skip to content

Commit 2497ffb

Browse files
paoloricciutipaoloricciuti
committed
Add homepage
1 parent 077c371 commit 2497ffb

11 files changed

+263
-1087
lines changed

Diff for: ‎package-lock.json

+49-1,010
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+24-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,24 @@
11
{
22
"name": "sveltekit-search-params",
3-
"version": "0.1.3",
3+
"version": "0.1.4",
4+
"repository": "git+https://github.com/paoloricciuti/sveltekit-search-params.git",
5+
"author": "Paolo Ricciuti",
6+
"license": "MIT",
7+
"homepage": "https://sveltekit-search-params.netlify.app",
8+
"keywords": [
9+
"sveltekit",
10+
"svelte",
11+
"reactive",
12+
"search-params",
13+
"search params",
14+
"search-parameters",
15+
"search parameters",
16+
"query",
17+
"query parameters",
18+
"query-parameters",
19+
"query params",
20+
"query-params"
21+
],
422
"scripts": {
523
"dev": "vite dev",
624
"version:patch": "npm version patch",
@@ -12,7 +30,7 @@
1230
"lint": "eslint ."
1331
},
1432
"devDependencies": {
15-
"@sveltejs/adapter-auto": "next",
33+
"@sveltejs/adapter-static": "^1.0.0-next.47",
1634
"@sveltejs/kit": "next",
1735
"@sveltejs/package": "next",
1836
"@types/lz-string": "^1.3.34",
@@ -22,7 +40,9 @@
2240
"eslint-plugin-svelte3": "^4.0.0",
2341
"svelte": "^3.44.0",
2442
"svelte-check": "^2.7.1",
43+
"svelte-material-icons": "^2.0.4",
2544
"svelte-preprocess": "^4.10.6",
45+
"svelte-typewriter-store": "^0.0.4",
2646
"tslib": "^2.3.1",
2747
"typescript": "^4.7.4",
2848
"vite": "^3.1.0"
@@ -32,8 +52,8 @@
3252
},
3353
"type": "module",
3454
"peerDependencies": {
55+
"@sveltejs/kit": "next",
3556
"lz-string": "^1.4.4",
36-
"svelte": "^3.44.0",
37-
"@sveltejs/kit": "next"
57+
"svelte": "^3.44.0"
3858
}
3959
}

Diff for: ‎src/assets/fonts.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* #### Generated By: http://www.cufonfonts.com #### */
2+
3+
@font-face {
4+
font-family: 'Segoe UI Regular';
5+
font-style: normal;
6+
font-weight: normal;
7+
src: local('Segoe UI Regular'), url('Segoe UI.woff') format('woff');
8+
}
9+
10+
@font-face {
11+
font-family: 'Segoe UI Bold';
12+
font-style: normal;
13+
font-weight: normal;
14+
src: local('Segoe UI Bold'), url('Segoe UI Bold.woff') format('woff');
15+
}

Diff for: ‎src/lib/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ export {
33
ssp,
44
queryParameters,
55
queryParam,
6-
} from "./sveltekit-search-params";
6+
} from "./sveltekit-search-params.js";

Diff for: ‎src/routes/+layout.server.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const prerender = true;

Diff for: ‎src/routes/+page.svelte

+44-60
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,46 @@
1-
<script lang="ts">
2-
import { ssp, queryParameters, queryParam } from "sveltekit-search-params";
3-
4-
const store = queryParameters({
5-
name: ssp.string(),
6-
count: ssp.number(),
7-
bool: ssp.boolean(),
8-
obj: ssp.object<{test: string}>(),
9-
arr: ssp.array(),
10-
lz: ssp.lz<string>(),
11-
});
12-
13-
const x = queryParam("x", ssp.lz());
1+
<script>
2+
import BrowserWindow from "./BrowserWindow.svelte";
3+
import "../assets/fonts.css";
4+
import { typewriter } from "svelte-typewriter-store";
5+
const store = typewriter(["pablopang", "rich_harris", "albert_einstein"], 30);
146
</script>
157

16-
Test
17-
<section>
18-
{$x}
19-
<input bind:value={$x} />
20-
<pre>{JSON.stringify($store, null, 2)}</pre>
21-
<hr />
22-
<input
23-
bind:value={$store.name}
24-
/>
25-
<hr />
26-
<input
27-
value={$store.count}
28-
on:input={(e) => {
29-
$store.count = e.currentTarget.valueAsNumber;
30-
}}
31-
type="number"
32-
/>
33-
<hr />
34-
<input
35-
checked={$store.bool}
36-
on:change={(e) => {
37-
$store.bool = e.currentTarget.checked;
38-
}}
39-
type="checkbox"
40-
/>
41-
<hr />
42-
<pre>{JSON.stringify($store.obj, null, 2)}</pre>
43-
<hr />
44-
<button
45-
on:click={() => {
46-
$store.arr = [...($store.arr ?? []), Math.random()];
47-
}}>Add</button
48-
>
49-
{#each $store.arr ?? [] as elem}
50-
<div>{elem}</div>
51-
{:else}
52-
No elements
53-
{/each}
54-
<hr />
55-
{JSON.stringify($store.lz)}
56-
<input
57-
value={$store.lz ?? ""}
58-
on:input={(e) => {
59-
$store.lz = e.currentTarget.value;
60-
}}
61-
/>
62-
</section>
8+
<svelte:head>
9+
<title>sveltekit-search-params</title>
10+
</svelte:head>
11+
<h1>sveltekit-search-params</h1>
12+
<div class="wrapper">
13+
<BrowserWindow title="" url={`https://my.app?username=${$store}`}>
14+
<div class="content">
15+
<input readonly value={$store} /> <br />
16+
Your username is {$store}
17+
</div>
18+
</BrowserWindow>
19+
</div>
20+
21+
<style>
22+
:global(body) {
23+
overflow: hidden;
24+
margin: 0;
25+
background: #222;
26+
color: white;
27+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
28+
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
29+
}
30+
h1 {
31+
text-align: center;
32+
max-width: 100vw;
33+
}
34+
.wrapper {
35+
width: 60rem;
36+
margin: auto;
37+
padding: 1rem;
38+
}
39+
.content {
40+
background-color: white;
41+
width: 100%;
42+
height: 100%;
43+
padding: 2rem;
44+
color: black;
45+
}
46+
</style>

Diff for: ‎src/routes/BrowserWindow.svelte

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<script>
2+
import Lock from "svelte-material-icons/Lock.svelte";
3+
export let title = "Title";
4+
export let url = "";
5+
</script>
6+
7+
<div class="browser">
8+
<div class="topbar">
9+
<button class="close" />
10+
<button class="minimize" />
11+
<button class="enlarge" />
12+
<span class="title">{title}</span>
13+
</div>
14+
<div class="url-bar">
15+
<div class="url">
16+
<button><Lock /></button>
17+
{url}
18+
</div>
19+
</div>
20+
<div class="content">
21+
<slot />
22+
</div>
23+
</div>
24+
25+
<style>
26+
button {
27+
display: flex;
28+
margin-bottom: 0;
29+
}
30+
31+
.browser {
32+
width: var(--width);
33+
aspect-ratio: 9 / 6;
34+
background-color: #222;
35+
border-radius: 0.5rem;
36+
overflow: hidden;
37+
--gap: 0.7%;
38+
--padding: 1%;
39+
font-family: sans-serif;
40+
}
41+
42+
.topbar {
43+
display: flex;
44+
gap: var(--gap);
45+
padding: var(--padding);
46+
background: var(--topbar, #555);
47+
color: var(--topbar-color, white);
48+
align-items: center;
49+
position: relative;
50+
font-size: 1.8vw;
51+
}
52+
53+
.topbar > :where(button) {
54+
border: 0;
55+
aspect-ratio: 1;
56+
width: 1.6%;
57+
background-color: #ff605c;
58+
border-radius: 50%;
59+
}
60+
61+
.minimize {
62+
background-color: #ffbd44;
63+
}
64+
65+
.enlarge {
66+
background-color: #00ca4e;
67+
}
68+
69+
.title {
70+
position: absolute;
71+
inset: 0;
72+
display: grid;
73+
place-items: center;
74+
font-weight: 600;
75+
}
76+
77+
.url-bar {
78+
background: var(--url-bar, #555);
79+
display: flex;
80+
align-items: center;
81+
gap: var(--gap);
82+
padding: var(--padding);
83+
}
84+
85+
.url-bar button {
86+
border: 0;
87+
background: transparent;
88+
color: black;
89+
aspect-ratio: 1;
90+
}
91+
92+
.url {
93+
background: white;
94+
flex-basis: 100%;
95+
padding-block: calc(var(--padding) / 2);
96+
padding-inline: var(--padding);
97+
border-radius: 50vmax;
98+
font-size: 0.85rem;
99+
display: flex;
100+
align-items: center;
101+
gap: var(--gap);
102+
overflow: hidden;
103+
white-space: nowrap;
104+
color: black;
105+
}
106+
107+
.url > button {
108+
background: transparent;
109+
border: none;
110+
align-items: center;
111+
}
112+
113+
.content {
114+
width: 100%;
115+
height: 100%;
116+
}
117+
</style>

Diff for: ‎static/Segoe UI Bold.woff

20 KB
Binary file not shown.

Diff for: ‎static/Segoe UI.woff

19.4 KB
Binary file not shown.

Diff for: ‎svelte.config.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import adapter from '@sveltejs/adapter-auto';
1+
import adapter from '@sveltejs/adapter-static';
22
import preprocess from 'svelte-preprocess';
33

44
/** @type {import('@sveltejs/kit').Config} */
55
const config = {
6-
// Consult https://github.com/sveltejs/svelte-preprocess
7-
// for more information about preprocessors
8-
preprocess: preprocess(),
6+
// Consult https://github.com/sveltejs/svelte-preprocess
7+
// for more information about preprocessors
8+
preprocess: preprocess(),
99

10-
kit: {
11-
adapter: adapter()
12-
}
10+
kit: {
11+
adapter: adapter()
12+
}
1313
};
1414

1515
export default config;

Diff for: ‎vite.config.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import type { UserConfig } from 'vite';
33

44
const config: UserConfig = {
55
plugins: [sveltekit()],
6-
server: {
7-
fs: {
8-
allow: ['package']
9-
}
10-
}
6+
// server: {
7+
// fs: {
8+
// allow: ['package']
9+
// }
10+
// }
1111
};
1212

1313
export default config;

0 commit comments

Comments
 (0)