Updated
22
frontend/@dasig/components/Box.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { createMemo, type JSXElement } from "solid-js";
|
||||
import "../styles/Box.sass";
|
||||
|
||||
interface Props {
|
||||
thickness: number;
|
||||
color?: string;
|
||||
children: JSXElement;
|
||||
curved?: boolean;
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
const boxClass = createMemo(() => (props.curved ? "curvedbox" : "box"));
|
||||
|
||||
return (
|
||||
<section
|
||||
class={boxClass()}
|
||||
style={{ border: `${props.thickness}px solid ${props.color || "white"}` }}
|
||||
>
|
||||
{props.children}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
124
frontend/@dasig/components/Button.tsx
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
import { Match, Show, Switch } from "solid-js";
|
||||
import "../styles/Button.sass";
|
||||
|
||||
interface Props {
|
||||
label?: string;
|
||||
to?: string;
|
||||
onClick?: () => void;
|
||||
edges?: "curved" | "rounded" | "flat";
|
||||
design?:
|
||||
| "bu-primary"
|
||||
| "bu-link"
|
||||
| "bu-info"
|
||||
| "bu-success"
|
||||
| "bu-warning"
|
||||
| "bu-danger"
|
||||
| "bu-dark"
|
||||
| "bu-light"
|
||||
| "bu-text"
|
||||
| "bu-ghost"
|
||||
| "bo-primary"
|
||||
| "bo-secondary"
|
||||
| "bo-success"
|
||||
| "bo-danger"
|
||||
| "bo-warning"
|
||||
| "bo-info"
|
||||
| "bo-light"
|
||||
| "bo-dark"
|
||||
| "bo-link";
|
||||
submit?: boolean;
|
||||
newtab?: boolean;
|
||||
}
|
||||
|
||||
const getBorderRadius = (edge: Props["edges"]) => {
|
||||
switch (edge) {
|
||||
case "curved":
|
||||
return "border-radius: 6px";
|
||||
case "rounded":
|
||||
return "border-radius: 32px";
|
||||
case "flat":
|
||||
return "border-radius: 0";
|
||||
default:
|
||||
return "border-radius: 0";
|
||||
}
|
||||
};
|
||||
|
||||
export default (props: Props) => {
|
||||
const borderRadius = getBorderRadius(props.edges);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Show when={props.to}>
|
||||
<Switch>
|
||||
<Match when={props.design}>
|
||||
<a
|
||||
href={props.to}
|
||||
aria-label={props.label}
|
||||
rel="noopener"
|
||||
target={props.newtab ? "_blank" : "_self"}
|
||||
data-astro-prefetch
|
||||
>
|
||||
<button type="button" class={props.design} style={borderRadius}>
|
||||
{props.label || "Click Me!"}
|
||||
</button>
|
||||
</a>
|
||||
</Match>
|
||||
<Match when={!props.design}>
|
||||
<a
|
||||
href={props.to}
|
||||
aria-label={props.label}
|
||||
rel="noopener"
|
||||
target={props.newtab ? "_blank" : "_self"}
|
||||
data-astro-prefetch
|
||||
>
|
||||
<button type="button" class="button" style={borderRadius}>
|
||||
{props.label || "Click Me!"}
|
||||
</button>
|
||||
</a>
|
||||
</Match>
|
||||
</Switch>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.to}>
|
||||
<Switch>
|
||||
<Match when={props.design}>
|
||||
<Show when={props.submit}>
|
||||
<button class={props.design} type="submit" style={borderRadius}>
|
||||
{props.label || "Click Me!"}
|
||||
</button>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.submit}>
|
||||
<button
|
||||
type="button"
|
||||
class={props.design}
|
||||
onClick={props.onClick}
|
||||
style={borderRadius}
|
||||
>
|
||||
{props.label || "Click Me!"}
|
||||
</button>
|
||||
</Show>
|
||||
</Match>
|
||||
<Match when={!props.design}>
|
||||
<Show when={props.submit}>
|
||||
<button class="button" type="submit" style={borderRadius}>
|
||||
{props.label || "Click Me!"}
|
||||
</button>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.submit}>
|
||||
<button
|
||||
type="button"
|
||||
class="button"
|
||||
onClick={props.onClick}
|
||||
style={borderRadius}
|
||||
>
|
||||
{props.label || "Click Me!"}
|
||||
</button>
|
||||
</Show>
|
||||
</Match>
|
||||
</Switch>
|
||||
</Show>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import '../styles/Column.sass'
|
||||
import type { JSXElement } from 'solid-js'
|
||||
import type { JSXElement } from 'solid-js';
|
||||
import '../styles/Column.sass';
|
||||
|
||||
interface Props {
|
||||
children: JSXElement
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { $companyName, $copyRightYear } from "../../../configs/config.site"
|
||||
import { $companyName, $copyRightYear } from "../../configs/config.site.ts";
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { type JSXElement, Match, Switch } from 'solid-js'
|
||||
import '../styles/Display.sass'
|
||||
import { type JSXElement, Match, Switch } from 'solid-js';
|
||||
import '../styles/Display.sass';
|
||||
|
||||
interface Props {
|
||||
children: JSXElement
|
||||
|
|
@ -1,18 +1,24 @@
|
|||
import '../styles/HTML.sass'
|
||||
import { type JSXElement, Show } from 'solid-js'
|
||||
import background1 from '../images/background.avif'
|
||||
import background2 from '../images/background.webp'
|
||||
import { $fontSource } from '../../../configs/config.site'
|
||||
import { type JSXElement, Show } from "solid-js";
|
||||
import { $fontSource } from "../../configs/config.site.ts";
|
||||
import background1 from "../images/background.avif";
|
||||
import background2 from "../images/background.webp";
|
||||
import "../styles/HTML.sass";
|
||||
|
||||
interface Props {
|
||||
name: string
|
||||
description: string
|
||||
children: JSXElement
|
||||
font?: 'roboto' | 'inter' | 'montserrat' | 'open-sans' | 'public-sans' | string
|
||||
preloadBackground?: boolean
|
||||
author: string
|
||||
assets: JSXElement
|
||||
scripts: JSXElement
|
||||
name: string;
|
||||
description: string;
|
||||
children: JSXElement;
|
||||
font?:
|
||||
| "roboto"
|
||||
| "inter"
|
||||
| "montserrat"
|
||||
| "open-sans"
|
||||
| "public-sans"
|
||||
| string;
|
||||
preloadBackground?: boolean;
|
||||
author: string;
|
||||
assets: JSXElement;
|
||||
scripts: JSXElement;
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
|
|
@ -22,7 +28,10 @@ export default (props: Props) => {
|
|||
<head>
|
||||
<base href="/" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, viewport-fit=cover"
|
||||
/>
|
||||
<meta name="name" content={props.name} />
|
||||
<meta name="description" content={props.description} />
|
||||
<meta name="title" property="og:title" content={props.name} />
|
||||
|
|
@ -31,12 +40,22 @@ export default (props: Props) => {
|
|||
<meta property="og:description" content={props.description} />
|
||||
<meta property="og:type" content="website" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
|
||||
<Show when={$fontSource.get() === 'cdn'}>
|
||||
<Show when={$fontSource.get() === "cdn"}>
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
|
||||
</Show>
|
||||
<Show when={props.preloadBackground}>
|
||||
<link rel="preload" href={background1} as="image" type="image/svg+xml" />
|
||||
<link rel="preload" href={background2} as="image" type="image/svg+xml" />
|
||||
<link
|
||||
rel="preload"
|
||||
href={background1}
|
||||
as="image"
|
||||
type="image/svg+xml"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href={background2}
|
||||
as="image"
|
||||
type="image/svg+xml"
|
||||
/>
|
||||
</Show>
|
||||
{props.assets}
|
||||
</head>
|
||||
|
|
@ -49,5 +68,5 @@ export default (props: Props) => {
|
|||
</body>
|
||||
</html>
|
||||
</>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
28
frontend/@dasig/components/Page.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { Title } from "@solidjs/meta";
|
||||
import { type JSXElement, Show } from "solid-js";
|
||||
import "../styles/Page.sass";
|
||||
|
||||
interface Props {
|
||||
children?: JSXElement;
|
||||
alignment?: "row" | "column";
|
||||
title: string;
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<Show when={props.alignment}>
|
||||
<main class={props.alignment}>
|
||||
<Title>{props.title}</Title>
|
||||
{props.children}
|
||||
</main>
|
||||
</Show>
|
||||
<Show when={!props.alignment}>
|
||||
<main class="page">
|
||||
<Title>{props.title}</Title>
|
||||
{props.children}
|
||||
</main>
|
||||
</Show>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 140 KiB |
|
Before Width: | Height: | Size: 846 B After Width: | Height: | Size: 846 B |
|
Before Width: | Height: | Size: 626 B After Width: | Height: | Size: 626 B |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
4
frontend/@dasig/index.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export { default as Column } from "./components/Column.tsx";
|
||||
export { default as Display } from "./components/Display.tsx";
|
||||
export { default as HTML } from "./components/HTML.tsx";
|
||||
export { default as Page } from "./components/Page.tsx";
|
||||
13
frontend/@dasig/scripts/functions/encryptRsa.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { JSEncrypt } from "jsencrypt";
|
||||
import { $rsaPublicKey } from "../../../configs/config.security.ts";
|
||||
|
||||
const enc = new JSEncrypt();
|
||||
const PUBLIC_KEY = $rsaPublicKey.get();
|
||||
|
||||
export default (message: string) => {
|
||||
enc.setPublicKey(PUBLIC_KEY);
|
||||
const encrypted = enc.encrypt(message).toString();
|
||||
const fixedEncrypted = encrypted.replace(/\//g, "~");
|
||||
|
||||
return fixedEncrypted;
|
||||
};
|
||||
1
frontend/@dasig/scripts/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { default as encryptRsa } from "./functions/encryptRsa.ts";
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
dev:
|
||||
pnpm dev
|
||||
deno run dev
|
||||
|
||||
build:
|
||||
pnpm build
|
||||
deno run build
|
||||
|
||||
update:
|
||||
pnpm up -i
|
||||
deno update
|
||||
|
||||
docker:
|
||||
docker compose up -d
|
||||
|
|
@ -14,11 +14,11 @@ podman:
|
|||
podman-compose up -d
|
||||
|
||||
favicon:
|
||||
node ./src/@dasig/scripts/node/generateFavicon.js
|
||||
deno ./src/@dasig/scripts/node/generateFavicon.js
|
||||
|
||||
logo:
|
||||
node ./src/@dasig/scripts/node/optimizeLogo.js --size $(size)
|
||||
deno ./src/@dasig/scripts/node/optimizeLogo.js --size $(size)
|
||||
|
||||
image:
|
||||
node ./src/@dasig/scripts/node/optimizeImage.js --name $(name) --size $(size)
|
||||
deno ./src/@dasig/scripts/node/optimizeImage.js --name $(name) --size $(size)
|
||||
|
||||
|
|
|
|||
|
|
@ -45,8 +45,7 @@
|
|||
"noUselessFragments": "off"
|
||||
},
|
||||
"suspicious": {
|
||||
"noImplicitAnyLet": "off",
|
||||
"noImplicitAny": "off"
|
||||
"noImplicitAnyLet": "off"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3922
frontend/deno.lock
generated
Normal file
5807
frontend/pnpm-lock.yaml
generated
|
|
@ -1,19 +0,0 @@
|
|||
import '../styles/Box.sass'
|
||||
import { type JSXElement, createMemo } from 'solid-js'
|
||||
|
||||
interface Props {
|
||||
thickness: number
|
||||
color?: string
|
||||
children: JSXElement
|
||||
curved?: boolean
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))
|
||||
|
||||
return (
|
||||
<section class={boxClass()} style={{ border: `${props.thickness}px solid ${props.color || 'white'}` }}>
|
||||
{props.children}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
import '../styles/Button.sass'
|
||||
import { Show, Switch, Match } from 'solid-js'
|
||||
|
||||
interface Props {
|
||||
label?: string
|
||||
to?: string
|
||||
onClick?: () => void
|
||||
edges?: 'curved' | 'rounded' | 'flat'
|
||||
design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
|
||||
submit?: boolean
|
||||
newtab?: boolean
|
||||
}
|
||||
|
||||
const getBorderRadius = (edge: Props['edges']) => {
|
||||
switch (edge) {
|
||||
case 'curved':
|
||||
return 'border-radius: 6px'
|
||||
case 'rounded':
|
||||
return 'border-radius: 32px'
|
||||
case 'flat':
|
||||
return 'border-radius: 0'
|
||||
default:
|
||||
return 'border-radius: 0'
|
||||
}
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
const borderRadius = getBorderRadius(props.edges)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Show when={props.to}>
|
||||
<Switch>
|
||||
<Match when={props.design}>
|
||||
<a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
|
||||
<button class={props.design} style={borderRadius}>
|
||||
{props.label || 'Click Me!'}
|
||||
</button>
|
||||
</a>
|
||||
</Match>
|
||||
<Match when={!props.design}>
|
||||
<a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
|
||||
<button class="button" style={borderRadius}>
|
||||
{props.label || 'Click Me!'}
|
||||
</button>
|
||||
</a>
|
||||
</Match>
|
||||
</Switch>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.to}>
|
||||
<Switch>
|
||||
<Match when={props.design}>
|
||||
<Show when={props.submit}>
|
||||
<button class={props.design} type="submit" style={borderRadius}>
|
||||
{props.label || 'Click Me!'}
|
||||
</button>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.submit}>
|
||||
<button class={props.design} onClick={props.onClick} style={borderRadius}>
|
||||
{props.label || 'Click Me!'}
|
||||
</button>
|
||||
</Show>
|
||||
</Match>
|
||||
<Match when={!props.design}>
|
||||
<Show when={props.submit}>
|
||||
<button class="button" type="submit" style={borderRadius}>
|
||||
{props.label || 'Click Me!'}
|
||||
</button>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.submit}>
|
||||
<button class="button" onClick={props.onClick} style={borderRadius}>
|
||||
{props.label || 'Click Me!'}
|
||||
</button>
|
||||
</Show>
|
||||
</Match>
|
||||
</Switch>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import '../styles/Page.sass'
|
||||
import { Show } from 'solid-js'
|
||||
import { Title } from '@solidjs/meta'
|
||||
|
||||
interface Props {
|
||||
children?: any
|
||||
alignment?: 'row' | 'column'
|
||||
title: string
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<Show when={props.alignment}>
|
||||
<main class={props.alignment}><Title>{props.title}</Title>{props.children}</main>
|
||||
</Show>
|
||||
<Show when={!props.alignment}>
|
||||
<main class="page"><Title>{props.title}</Title>{props.children}</main>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export { default as Column } from './components/Column'
|
||||
export { default as Display } from './components/Display'
|
||||
export { default as HTML } from './components/HTML'
|
||||
export { default as Page } from './components/Page'
|
||||
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { JSEncrypt } from 'jsencrypt'
|
||||
import { $rsaPublicKey } from '../../../../configs/config.security'
|
||||
|
||||
const enc = new JSEncrypt()
|
||||
const PUBLIC_KEY = $rsaPublicKey.get()
|
||||
|
||||
export default async (message: string) => {
|
||||
enc.setPublicKey(PUBLIC_KEY)
|
||||
const encrypted = enc.encrypt(message).toString()
|
||||
const fixedEncrypted = encrypted.replace(/\//g, '~')
|
||||
|
||||
return fixedEncrypted
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default as encryptRsa } from './functions/encryptRsa'
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
// @refresh reload
|
||||
/** biome-ignore-all lint/style/noNonNullAssertion: <biome exception> */
|
||||
import { mount, StartClient } from "@solidjs/start/client";
|
||||
|
||||
mount(() => <StartClient />, document.getElementById("app")!);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { createHandler, StartServer } from '@solidjs/start/server'
|
||||
import { HTML } from '~/@dasig'
|
||||
import { $companyName, $font, $websiteDescription, $websiteName } from '../configs/config.site'
|
||||
// deno-lint-ignore-file jsx-no-children-prop
|
||||
import { createHandler, StartServer } from '@solidjs/start/server';
|
||||
import { HTML } from '../@dasig/index.ts';
|
||||
import { $companyName, $font, $websiteDescription, $websiteName } from '../configs/config.site.ts';
|
||||
|
||||
const websiteName = $websiteName.get()
|
||||
const websiteDescription = $websiteDescription.get()
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
import { Column, Page } from '~/@dasig'
|
||||
import Counter from '~/components/Counter'
|
||||
import './index.sass'
|
||||
import { Column, Page } from "../../@dasig/index.ts";
|
||||
import Counter from "../components/Counter.tsx";
|
||||
import "./index.sass";
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<Page title="Dasig - Index">
|
||||
<Column>
|
||||
<h1>DASIG</h1>
|
||||
<h4 class='text'>An architectural framework for pure speed fullstack development</h4>
|
||||
<h1>DASIG NODE</h1>
|
||||
<h4 class="text">
|
||||
An architectural framework for pure speed fullstack development
|
||||
</h4>
|
||||
<Counter />
|
||||
</Column>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
|
|
|||