migrate web to new design and sveltekit

This commit is contained in:
Rolands 2022-12-30 19:14:38 +02:00
parent a4c4043f34
commit bb4508a0a9
42 changed files with 6898 additions and 4668 deletions

10
demos/full-stack_framework/.gitignore vendored Normal file
View file

@ -0,0 +1,10 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

View file

@ -0,0 +1 @@
engine-strict=true

View file

@ -0,0 +1 @@
# Socio Full-Stack Framework demo in SvelteKit

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,28 @@
{
"name": "full-stack-framework",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev --port 5000",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
},
"devDependencies": {
"@originjs/vite-plugin-commonjs": "^1.0.3",
"@sveltejs/adapter-auto": "^1.0.0",
"@sveltejs/kit": "^1.0.0",
"socio": "file:../../core",
"svelte": "^3.54.0",
"svelte-check": "^2.9.2",
"tslib": "^2.4.1",
"typescript": "^4.9.3",
"vite": "^4.0.0"
},
"type": "module",
"dependencies": {
"sequelize": "^6.28.0",
"sqlite3": "^5.1.4"
}
}

View file

@ -0,0 +1,9 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
// and what to do when importing types
declare namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface Platform {}
}

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<script>
export let style='', tb=false;
</script>
<div {style} class="bloom_wrap" class:tb>
<slot></slot>
<div class="bloom">
<slot></slot>
</div>
</div>
<style>
:root{
--b: var(--bloom);
}
.tb{--b:var(--bloom_thin);}
.bloom_wrap{
position: relative;
}
.bloom{
z-index: -1;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
filter: brightness(0.6) blur(var(--b));
}
</style>

View file

@ -0,0 +1,21 @@
<script>
import Bloom from "./bloom.svelte";
</script>
<nav>
<h1>Socio</h1>
<Bloom tb><a href="https://github.com/Rolands-Laucis/Socio" target="_blank">github</a></Bloom>
<Bloom tb><a href="https://www.npmjs.com/package/socio" target="_blank">npm</a></Bloom>
</nav>
<style>
nav{
display: flex;
align-items:baseline;
gap: 24px;
}
a{
color: var(--acc2);
}
</style>

View file

@ -0,0 +1,5 @@
<script>
import './global.css'
</script>
<slot></slot>

View file

@ -0,0 +1,29 @@
<script lang="ts">
import Nav from "$lib/nav.svelte";
import Bloom from "$lib/bloom.svelte";
</script>
<main>
<Nav></Nav>
<h4 class="horiz" style="gap:12px;">
A WebSocket based
<Bloom tb><span class="acc1">realtime</span></Bloom>
duplex Front-End and Back-End
<Bloom tb><span class="acc2">syncing</span></Bloom>
API paradigm framework
</h4>
</main>
<style>
main{
padding: 64px;
}
.acc1{color: var(--acc1);}
.acc2{color: var(--acc2);}
.horiz{
display: flex;
flex-wrap: wrap;
}
</style>

View file

@ -0,0 +1,42 @@
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;700&display=swap');
html{
/* color palette */
--dark: #07070C;
--gray1: #0D0D0E;
--light: #FFFFFF;
--acc1: #FCF300;
--acc2: #FF1074;
--acc1_grad: linear-gradient(180deg, #FF1074 0%, rgba(13, 11, 113, 0) 100%);
--acc2_grad: linear-gradient(180deg, #FCF300 0%, rgba(142, 137, 4, 0) 100%);
/* variables */
--bloom: 64px;
--bloom_thin: 6px;
background: radial-gradient(50% 50% at 50% 50%, #07071D 0%, #07070C 100%);
color: var(--light);
font-family: 'Jost', sans-serif;
font-weight: 300;
font-size: 24px;
width: 100vw;
height: 100vh;
}
h1, h2, h3, h4,h5,h6,a, html, body{
padding: 0;
margin: 0;
margin-block-start:0px;
margin-block-end:0px;
font-weight: 300;
white-space:normal;
}
h1{font-size: 73.24px; font-weight: bold;}
h2{font-size: 46.88px;}
h3{font-size: 30px;}
h4,a{font-size: 24px;}
h5{font-size: 19.2px;}
h6{font-size: 15.36px; font-weight: 400;}

View file

@ -0,0 +1,16 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
adapter: adapter(),
files: { lib: "src/lib" }
}
};
export default config;

View file

@ -0,0 +1,17 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
}

View file

@ -0,0 +1,10 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
import { SocioSecurityPlugin } from 'socio/dist/secure';
/** @type {import('vite').UserConfig} */
const config = {
plugins: [SocioSecurityPlugin({ secure_private_key: 'skk#$U#Y$7643GJHKGDHJH#$K#$HLI#H$KBKDBDFKU34534', verbose: true }), viteCommonjs(), sveltekit()]
};
export default config;