Skip to content

Commit

Permalink
update styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@marvin-j97
marvin-j97 committed Jul 12, 2023
1 parent 16c319d commit 69b08bc
Show file tree
Hide file tree
Showing 5 changed files with 322 additions and 65 deletions.
8 changes: 7 additions & 1 deletion .vitepress/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,16 @@ export default defineConfig({
items: [
{ text: "Routes", link: "/concepts/routes" },
{ text: "Middlewares", link: "/concepts/middlewares" },
{ text: "Configuration", link: "/concepts/config" },
{ text: "Command line tool", link: "/concepts/cli" },
],
},
{
text: "API",
items: [
{ text: "Route", link: "/api/route" },
{ text: "Configuration", link: "/api/config" },
],
},
{
text: "Adapters",
items: [
Expand Down
133 changes: 79 additions & 54 deletions .vitepress/theme/custom.css
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,59 @@
:root {
/* Tailwind Cyan */
--vp-c-cyan: #06b6d4;
--vp-c-cyan-light: #22d3ee;
--vp-c-cyan-lighter: #67e8f9;
--vp-c-cyan-dark: #0891b2;
--vp-c-cyan-darker: #0e7490;
--tw-cyan-50: #ecfeff;
--tw-cyan-100: #cffafe;
--tw-cyan-200: #a5f3fc;
--tw-cyan-300: #67e8f9;
--tw-cyan-400: #22d3ee;
--tw-cyan-500: #06b6d4;
--tw-cyan-600: #0891b2;
--tw-cyan-700: #0e7490;
--tw-cyan-800: #155e75;
--tw-cyan-900: #164e63;
--tw-cyan-950: #083344;

--tw-zinc-50: #fafafa;
--tw-zinc-100: #f4f4f5;
--tw-zinc-200: #e4e4e7;
--tw-zinc-300: #d4d4d8;
--tw-zinc-400: #a1a1aa;
--tw-zinc-500: #71717a;
--tw-zinc-600: #52525b;
--tw-zinc-700: #3f3f46;
--tw-zinc-800: #27272a;
--tw-zinc-900: #18181b;
--tw-zinc-950: #09090b;

--vp-c-cyan: var(--tw-cyan-500);
--vp-c-cyan-light: var(--tw-cyan-400);
--vp-c-cyan-lighter: var(--tw-cyan-300);
--vp-c-cyan-dark: var(--tw-cyan-600);
--vp-c-cyan-darker: var(--tw-cyan-700);

--not-implemented: #ff23ed;
}

/**
* Colors Theme
* -------------------------------------------------------------------------- */

:root {
--vp-c-bg: #ffffff;
--vp-c-bg: var(--tw-zinc-50);

--vp-c-bg-elv: #ffffff;
--vp-c-bg-elv-up: #ffffff;
--vp-c-bg-elv-down: #f6f6f7;
--vp-c-bg-elv-mute: #f6f6f7;
--vp-c-bg-elv: var(--tw-zinc-100);
--vp-c-bg-elv-up: var(--not-implemented);
--vp-c-bg-elv-down: var(--not-implemented);
--vp-c-bg-elv-mute: var(--not-implemented);

--vp-c-bg-soft: #f6f6f7;
--vp-c-bg-soft-up: #ffffff;
--vp-c-bg-soft-down: #e3e3e5;
--vp-c-bg-soft-mute: #e3e3e5;
--vp-c-bg-soft: var(--tw-zinc-200);
--vp-c-bg-soft-up: var(--tw-zinc-200);
--vp-c-bg-soft-down: var(--not-implemented);
--vp-c-bg-soft-mute: var(--not-implemented);

--vp-c-bg-alt: #f6f6f7;
--vp-c-bg-alt: var(--not-implemented);

--vp-c-border: rgba(60, 60, 67, 0.29);
--vp-c-divider: rgba(60, 60, 67, 0.12);
--vp-c-gutter: rgba(60, 60, 67, 0.12);
--vp-c-border: var(--tw-zinc-300);
--vp-c-divider: var(--tw-zinc-300);
--vp-c-gutter: var(--tw-zinc-300);

--vp-c-neutral: var(--vp-c-black);
--vp-c-neutral-inverse: var(--vp-c-white);
Expand All @@ -41,21 +66,21 @@
--vp-c-text-inverse-2: var(--vp-c-text-dark-2);
--vp-c-text-inverse-3: var(--vp-c-text-dark-3);

--vp-c-text-code: #4a4a4a;
--vp-c-text-code: var(--tw-zinc-950);

--vp-c-brand: var(--vp-c-cyan);
--vp-c-brand-light: var(--vp-c-cyan-light);
--vp-c-brand-lighter: var(--vp-c-cyan-lighter);
--vp-c-brand-dark: var(--vp-c-cyan-dark);
--vp-c-brand-darker: var(--vp-c-cyan-darker);

--vp-c-mute: #f6f6f7;
--vp-c-mute-light: #f9f9fc;
--vp-c-mute-lighter: #ffffff;
--vp-c-mute-dark: #e3e3e5;
--vp-c-mute-darker: #d7d7d9;
--vp-c-mute: var(--tw-zinc-200);
--vp-c-mute-light: var(--not-implemented);
--vp-c-mute-lighter: var(--not-implemented);
--vp-c-mute-dark: var(--not-implemented);
--vp-c-mute-darker: var(--not-implemented);

--vp-c-bg-alt: #ffffff;
--vp-c-bg-alt: var(--tw-zinc-100);
--vp-sidebar-bg-color: var(--vp-c-bg-alt);
--vp-code-copy-code-bg: var(--vp-code-block-bg);
--vp-code-copy-code-hover-bg: var(--vp-code-block-bg);
Expand All @@ -66,39 +91,34 @@
* -------------------------------------------------------------------------- */
:root {
--vp-code-block-color: var(--vp-c-text-dark-1);
--vp-code-block-bg: rgb(246, 248, 250);
--vp-code-block-bg: var(--not-implemented);

--vp-code-tab-divider: var(--vp-c-text-light-3);
--vp-code-tab-text-color: var(--vp-c-text-light-2);
--vp-code-tab-bg: var(--vp-code-block-bg);
--vp-code-tab-hover-text-color: var(--vp-c-text-light-1);
--vp-code-tab-active-text-color: var(--vp-c-text-light-1);
--vp-code-tab-active-bar-color: var(--vp-c-brand);

--vp-code-line-highlight-color: #06b6d415;
}


.dark {
/* TODO: Use Tailwind colors */

--vp-c-bg: #1e1e20;
--vp-c-bg: var(--tw-zinc-800);

--vp-c-bg-elv: #252529;
--vp-c-bg-elv-up: #313136;
--vp-c-bg-elv-down: #1e1e20;
--vp-c-bg-elv-mute: #313136;
--vp-c-bg-elv: var(--tw-zinc-900);
--vp-c-bg-elv-up: #0400ff;
--vp-c-bg-elv-down: var(--not-implemented);
--vp-c-bg-elv-mute: var(--not-implemented);

--vp-c-bg-soft: #252529;
--vp-c-bg-soft-up: #313136;
--vp-c-bg-soft-down: #1e1e20;
--vp-c-bg-soft-mute: #313136;
--vp-c-bg-soft: var(--tw-zinc-900);
--vp-c-bg-soft-up: var(--tw-zinc-900);
--vp-c-bg-soft-down: var(--not-implemented);
--vp-c-bg-soft-mute: var(--not-implemented);

--vp-c-bg-alt: #161618;
--vp-c-bg-alt: var(--tw-zinc-900);

--vp-c-border: rgba(82, 82, 89, 0.68);
--vp-c-divider: rgba(82, 82, 89, 0.32);
--vp-c-gutter: #000000;
--vp-c-border: var(--tw-zinc-700);
--vp-c-divider: var(--tw-zinc-700);
--vp-c-gutter: var(--tw-zinc-700);

--vp-c-neutral: var(--vp-c-white);
--vp-c-neutral-inverse: var(--vp-c-black);
Expand All @@ -111,20 +131,25 @@
--vp-c-text-inverse-2: var(--vp-c-text-light-2);
--vp-c-text-inverse-3: var(--vp-c-text-light-3);

--vp-c-mute: #313136;
--vp-c-mute-light: #3a3a3c;
--vp-c-mute-lighter: #505053;
--vp-c-mute-dark: #2c2c30;
--vp-c-mute-darker: #252529;
--vp-c-mute: var(--tw-zinc-900);
--vp-c-mute-light: var(--not-implemented);
--vp-c-mute-lighter: var(--not-implemented);
--vp-c-mute-dark: var(--not-implemented);
--vp-c-mute-darker: var(--not-implemented);

--vp-code-block-bg: #212121;
--vp-code-block-bg: var(--tw-zinc-900);
--vp-code-tab-hover-text-color: var(--vp-c-text-dark-2);
--vp-code-tab-active-text-color: var(--vp-c-text-dark-1);
--vp-c-text-code: #e8e8e8;

--vp-c-text-code: var(--tw--zinc-50);
}

.vp-doc h1, .vp-doc h2, .vp-doc h3, .vp-doc h4, .vp-doc h5, .vp-doc h6 {
.vp-doc h1,
.vp-doc h2,
.vp-doc h3,
.vp-doc h4,
.vp-doc h5,
.vp-doc h6 {
font-weight: 700;
}

Expand Down
19 changes: 10 additions & 9 deletions content/adapters/standalone.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

- Package: `@svarta/adapter-standalone`

This is the default deployment target. It is powered by [tinyhttp](https://tinyhttp.v1rtl.site/), weighing in at only about 250 kB. Your routes will be bundled and minified into a single file using [esbuild](https://esbuild.github.io/).
This is the default deployment target. It is powered by [hono](https://hono.dev/), weighing in at only about 35 kB. Your routes will be bundled and minified into a single file using [esbuild](https://esbuild.github.io/).

::: code-group

Expand All @@ -13,12 +13,11 @@ import standaloneAdapter from "@svarta/adapter-standalone";
* @type {import("@svarta/cli").Config}
*/
const config = {
packageManager: "npm",
packageManager: "pnpm",
routeFolder: "routes",
minify: true,
adapter: standaloneAdapter({
defaultPort: 7777,
provider: "tinyhttp",
outputFile: ".output/server.mjs",
logger: {
enabled: true,
Expand All @@ -45,11 +44,13 @@ Check out the full standalone starter template [here](https://github.com/svartaj

The default port to bind to. The HTTP port can be dynamically adjusted using the environment variables `SVARTA_PORT` or `PORT`.

### `provider`
### `runtime`

- Default: `"tinyhttp"`
- Default: `"node"`

The server backend library. Currently, only `tinyhttp` is supported.
The server runtime. Currently, only `node` is supported.

<!-- TODO: deno, bun -->

### `outputFile`

Expand All @@ -75,15 +76,15 @@ If `logger.enabled` is true, a simple HTTP logger is installed before your route
::: code-group

```bash [pnpm]
pnpm i -D @svarta/adapter-standalone @tinyhttp/app
pnpm i -D @svarta/adapter-standalone hono
```

```bash [yarn]
yarn add -D @svarta/adapter-standalone @tinyhttp/app
yarn add -D @svarta/adapter-standalone hono
```

```bash [npm]
npx i -D @svarta/adapter-standalone @tinyhttp/app
npx i -D @svarta/adapter-standalone hono
```

:::
2 changes: 1 addition & 1 deletion content/concepts/config.md → content/api/config.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
* @type {import("@svarta/cli").Config}
*/
const config = {
packageManager: "npm",
packageManager: "pnpm",
routeFolder: "routes",
minify: true,
adapter: ADAPTER,
Expand Down
Loading

0 comments on commit 69b08bc

Please sign in to comment.