intial commit
commit
d997295848
@ -0,0 +1,24 @@
|
||||
# build output
|
||||
dist/
|
||||
# generated types
|
||||
.astro/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
||||
# editors
|
||||
.vscode
|
||||
@ -0,0 +1,33 @@
|
||||
# phCD
|
||||
|
||||
Continuous Deployment for PHC projects.
|
||||
|
||||
## Development
|
||||
|
||||
```bash
|
||||
# First install the dependencies
|
||||
$ pnpm install
|
||||
|
||||
# Run the app
|
||||
$ pnpm run dev
|
||||
```
|
||||
|
||||
## Architecture
|
||||
|
||||
Everything is stored in the `config.yaml` file. This file contains a list of projects to deploy and the configuration for each one.
|
||||
|
||||
```yaml
|
||||
deploys:
|
||||
- name: project1
|
||||
url: https://github.com/username/project1
|
||||
branch: main
|
||||
type: dockerfile
|
||||
options:
|
||||
path: ./Dockerfile
|
||||
- name: project2
|
||||
url: ssh://example.org/username/project2.git
|
||||
commit: 04c540647a
|
||||
type: docker-compose
|
||||
options:
|
||||
path: ./docker-compose.yml
|
||||
```
|
||||
@ -0,0 +1,13 @@
|
||||
import { defineConfig } from 'astro/config'
|
||||
import preact from '@astrojs/preact'
|
||||
|
||||
import node from '@astrojs/node'
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [preact()],
|
||||
output: 'server',
|
||||
adapter: node({
|
||||
mode: 'standalone',
|
||||
}),
|
||||
})
|
||||
@ -0,0 +1,27 @@
|
||||
deploys:
|
||||
- name: project1
|
||||
url: https://github.com/username/project1
|
||||
branch: main
|
||||
type: dockerfile
|
||||
options:
|
||||
port: 80:8080
|
||||
volumes:
|
||||
- /var/www/html:/var/www/html
|
||||
- name: project2
|
||||
url: ssh://example.org/username/project2.git
|
||||
commit: 04c540647a
|
||||
type: docker-compose
|
||||
options:
|
||||
path: ./docker-compose.yml
|
||||
- name: project3
|
||||
url: https://github.com/username/project3
|
||||
type: shell
|
||||
options:
|
||||
path: ./deploy.sh
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "phcd",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro check && astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.5.2",
|
||||
"@astrojs/node": "^8.2.0",
|
||||
"@astrojs/preact": "^3.1.0",
|
||||
"@fontsource-variable/material-symbols-outlined": "^5.0.22",
|
||||
"@fontsource/jetbrains-mono": "^5.0.18",
|
||||
"@fontsource/lato": "^5.0.18",
|
||||
"astro": "^4.3.5",
|
||||
"async-mutex": "^0.4.1",
|
||||
"dockerode": "^4.0.2",
|
||||
"js-yaml": "^4.1.0",
|
||||
"nodegit": "^0.27.0",
|
||||
"preact": "^10.19.4",
|
||||
"typescript": "^5.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/dockerode": "^3.3.23",
|
||||
"@types/js-yaml": "^4.0.9",
|
||||
"sass": "^1.70.0"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||
<style>
|
||||
path { fill: #000; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: #FFF; }
|
||||
}
|
||||
</style>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 749 B |
@ -0,0 +1,98 @@
|
||||
import { useState } from 'preact/hooks'
|
||||
|
||||
export const NewDeployForm = () => {
|
||||
const [refType, setRefType] = useState('default')
|
||||
const [deployType, setDeployType] = useState('initial')
|
||||
|
||||
return (
|
||||
<form action="/deploys/new" method="post">
|
||||
<label for="deploy-name">Name</label>
|
||||
<input id="deploy-name" name="deploy-name" type="text" placeholder="Project name..." />
|
||||
|
||||
<label for="deploy-url">Url</label>
|
||||
<input id="deploy-url" name="deploy-url" type="text" placeholder="Valid git clone url..." />
|
||||
|
||||
<label for="deploy-ref-type">Ref</label>
|
||||
<div class="compound">
|
||||
<select id="deploy-ref-type" name="deploy-ref-type" value={refType} onChange={e => setRefType(e.target.value)}>
|
||||
<option value="default">Default</option>
|
||||
<option value="branch">Branch</option>
|
||||
<option value="tag">Tag</option>
|
||||
<option value="commit">Commit</option>
|
||||
</select>
|
||||
<input class="fill" id="deploy-ref-value" name="deploy-ref-value" disabled={refType === 'default'} type="text" placeholder="Ref value..." />
|
||||
</div>
|
||||
|
||||
<label for="deploy-type">Type</label>
|
||||
<select id="deploy-type" name="deploy-type" value={deployType} onChange={e => setDeployType(e.target.value)}>
|
||||
<option value="initial" disabled>
|
||||
Select a deploy type...
|
||||
</option>
|
||||
<option value="shell">Shell</option>
|
||||
<option value="dockerfile">Dockerfile</option>
|
||||
<option value="docker-compose">Docker Compose</option>
|
||||
</select>
|
||||
|
||||
<DeployOptions type={deployType} />
|
||||
|
||||
<div class="row right">
|
||||
<button type="submit">Create</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
export const DeployOptions = ({ type }) => {
|
||||
switch (type) {
|
||||
case 'shell':
|
||||
return <ShellDeploy />
|
||||
case 'dockerfile':
|
||||
return <DockerDeploy />
|
||||
case 'docker-compose':
|
||||
return <DockerComposeDeploy />
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const DockerDeploy = () => {
|
||||
return (
|
||||
<>
|
||||
<label for="deploy-options-path">Path</label>
|
||||
<input id="deploy-options-path" name="deploy-options-path" type="text" placeholder="Default is ./Dockerfile..." />
|
||||
|
||||
<label for="deploy-options-image">Image</label>
|
||||
<input id="deploy-options-image" name="deploy-options-image" type="text" placeholder="organization/image:latest" />
|
||||
|
||||
<label for="deploy-options-ports">Ports</label>
|
||||
<textarea id="deploy-options-ports" name="deploy-options-ports" rows={2} placeholder="80:8080" />
|
||||
|
||||
<label for="deploy-options-env">Environment</label>
|
||||
<textarea id="deploy-options-env" name="deploy-options-env" rows={2} placeholder="FOO=bar" />
|
||||
|
||||
<label for="deploy-options-volumes">Volumes</label>
|
||||
<textarea id="deploy-options-volumes" name="deploy-options-volumes" rows={2} placeholder="/var/www/example:/data" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const ShellDeploy = () => {
|
||||
return (
|
||||
<>
|
||||
<label for="deploy-options-path">Path</label>
|
||||
<input id="deploy-options-path" name="deploy-options-path" type="text" placeholder="./deploy.sh" />
|
||||
|
||||
<label for="deploy-options-env">Environment</label>
|
||||
<textarea id="deploy-options-env" name="deploy-options-env" rows={2} placeholder="FOO=bar" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const DockerComposeDeploy = () => {
|
||||
return (
|
||||
<>
|
||||
<label for="deploy-options-path">Path</label>
|
||||
<input id="deploy-options-path" name="deploy-options-path" type="text" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
<div class="sidebar">
|
||||
<div class="header">phCD</div>
|
||||
<nav>
|
||||
<div class="nav-item group">
|
||||
<a class="label" href="/"> <span class="material-symbols-outlined">home</span> Home</a>
|
||||
</div>
|
||||
<div class="nav-item group">
|
||||
<a class="label" href="/containers"><span class="material-symbols-outlined">view_list</span> Containers</a>
|
||||
<div class="children">
|
||||
<div class="nav-item"><div class="label">Container 1</div></div>
|
||||
<div class="nav-item"><div class="label">Container 2</div></div>
|
||||
<div class="nav-item"><div class="label">Container 3</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-item group">
|
||||
<a class="label" href="/deploys"><span class="material-symbols-outlined">deployed_code</span> Deploys</a>
|
||||
<div class="children">
|
||||
<div class="nav-item"><div class="label">Deploy 1</div></div>
|
||||
<div class="nav-item"><div class="label">Deploy 2</div></div>
|
||||
<div class="nav-item"><div class="label">Deploy 3</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
@ -0,0 +1,66 @@
|
||||
import yaml from 'js-yaml'
|
||||
|
||||
import { readFile, writeFile } from 'fs/promises'
|
||||
import { Mutex } from 'async-mutex'
|
||||
|
||||
type GitRef = { commit: string } | { branch: string } | { tag: string }
|
||||
|
||||
type BaseDeploy = {
|
||||
name: string
|
||||
url: string
|
||||
} & GitRef
|
||||
|
||||
type DockerDeploy = BaseDeploy & {
|
||||
type: 'docker'
|
||||
options: {
|
||||
path?: string
|
||||
image: string
|
||||
volumes?: string[]
|
||||
ports?: string[]
|
||||
env?: Record<string, string>
|
||||
}
|
||||
}
|
||||
|
||||
type DockerComposeDeploy = BaseDeploy & {
|
||||
type: 'docker-compose'
|
||||
options: {
|
||||
path?: string
|
||||
}
|
||||
}
|
||||
|
||||
type ShellDeploy = BaseDeploy & {
|
||||
type: 'shell'
|
||||
options: {
|
||||
path?: string
|
||||
}
|
||||
}
|
||||
|
||||
type Deploy = DockerDeploy | DockerComposeDeploy | ShellDeploy
|
||||
|
||||
type Config = {
|
||||
deploys: Deploy[]
|
||||
}
|
||||
|
||||
export const refToString = (ref: GitRef) => {
|
||||
return 'commit' in ref ? ref.commit : 'branch' in ref ? ref.branch : 'tag' in ref ? ref.tag : '<default>'
|
||||
}
|
||||
|
||||
const mutex = new Mutex()
|
||||
|
||||
export function loadConfig(): Promise<Config> {
|
||||
return mutex.runExclusive(async () => {
|
||||
const data = await readFile('./config.yaml', 'utf8')
|
||||
return yaml.load(data) as Config
|
||||
})
|
||||
}
|
||||
|
||||
export function updateConfig(fn: (config: Config) => Promise<Config>) {
|
||||
return mutex.runExclusive(async () => {
|
||||
const data = await readFile('./config.yaml', 'utf8')
|
||||
const config = yaml.load(data) as Config
|
||||
|
||||
const newConfig = await fn(config)
|
||||
|
||||
await writeFile('./config.yaml', yaml.dump(newConfig))
|
||||
})
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
/// <reference types="astro/client" />
|
||||
@ -0,0 +1,29 @@
|
||||
---
|
||||
import '@fontsource/lato/latin.css'
|
||||
import '@fontsource/jetbrains-mono/latin.css'
|
||||
|
||||
import '@fontsource-variable/material-symbols-outlined/full.css'
|
||||
|
||||
import '../styles/main.scss'
|
||||
|
||||
import Sidebar from '../components/Sidebar.astro'
|
||||
|
||||
const { title } = Astro.props
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
||||
<title>{title ?? 'phCD'}</title>
|
||||
</head>
|
||||
<body>
|
||||
<Sidebar />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,34 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import Docker from 'dockerode'
|
||||
|
||||
const docker = new Docker({ socketPath: '/var/run/docker.sock' })
|
||||
|
||||
const containers = await docker.listContainers({ all: true })
|
||||
---
|
||||
|
||||
<Layout title="Containers | phCD">
|
||||
<h1>Containers</h1>
|
||||
<ul>
|
||||
{
|
||||
containers.map(container => (
|
||||
<li>
|
||||
<strong>Name:</strong> {container.Names[0]} <br />
|
||||
<strong>Command:</strong> <code>{container.Command}</code> <br />
|
||||
<strong>Image:</strong> <code>{container.Image}</code> <br />
|
||||
<strong>Status:</strong> {container.Status} <br />
|
||||
<strong>Mounts:</strong>
|
||||
<ul>
|
||||
{container.Mounts.map(mount => (
|
||||
<li>
|
||||
<strong>Type:</strong> {mount.Type} <br />
|
||||
<strong>From:</strong> <code>{mount.Source}</code> <br />
|
||||
<strong>To:</strong> <code>{mount.Destination}</code> <br />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</Layout>
|
||||
@ -0,0 +1,36 @@
|
||||
---
|
||||
import { loadConfig, refToString } from '../../config'
|
||||
import Layout from '../../layouts/Layout.astro'
|
||||
|
||||
const { deploys } = await loadConfig()
|
||||
---
|
||||
|
||||
<Layout title="Deplots | phCD">
|
||||
<h1>Deploys</h1>
|
||||
<a class="button" href="/deploys/new">New Deploy</a>
|
||||
<ul>
|
||||
{
|
||||
deploys.map(deploy => (
|
||||
<li>
|
||||
<strong>Name: </strong>
|
||||
{deploy.name} <br />
|
||||
<strong>URL: </strong>
|
||||
{deploy.url.startsWith('http') ? (
|
||||
<a href={deploy.url} target="_blank">
|
||||
{deploy.url}
|
||||
</a>
|
||||
) : (
|
||||
deploy.url
|
||||
)}
|
||||
<br />
|
||||
<strong>Ref: </strong>
|
||||
{refToString(deploy)} <br />
|
||||
<strong>Type: </strong>
|
||||
{deploy.type} <br />
|
||||
<strong>Path: </strong>
|
||||
{deploy.options.path} <br />
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</Layout>
|
||||
@ -0,0 +1,19 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro'
|
||||
|
||||
import { NewDeployForm } from '../../client/NewDeployForm.jsx'
|
||||
|
||||
if (Astro.request.method === 'POST') {
|
||||
const body = await Astro.request.formData()
|
||||
const formData = Object.fromEntries(body.entries())
|
||||
|
||||
console.log(formData)
|
||||
|
||||
return Astro.redirect('/deploys')
|
||||
}
|
||||
---
|
||||
|
||||
<Layout title="New Deploy | phCD">
|
||||
<h1>New Deploy</h1>
|
||||
<NewDeployForm client:load />
|
||||
</Layout>
|
||||
@ -0,0 +1,7 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="Homepage">
|
||||
<h1>Astro</h1>
|
||||
</Layout>
|
||||
@ -0,0 +1,49 @@
|
||||
.flex {
|
||||
display: flex;
|
||||
|
||||
&.horizontal {
|
||||
flex-direction: row;
|
||||
|
||||
&.top-left {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&.top-right {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&.bottom-left {
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&.bottom-right {
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
&.vertical {
|
||||
flex-direction: column;
|
||||
|
||||
&.top-left {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&.top-right {
|
||||
align-items: flex-end;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&.bottom-left {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&.bottom-right {
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&.center-center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,322 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
$base-font-size: 18px;
|
||||
$heading-scale: 1.33;
|
||||
|
||||
@function pow($number, $exponent) {
|
||||
$value: 1;
|
||||
|
||||
@if $exponent > 0 {
|
||||
@for $i from 1 through $exponent {
|
||||
$value: $value * $number;
|
||||
}
|
||||
}
|
||||
|
||||
@return $value;
|
||||
}
|
||||
|
||||
@for $i from 1 through 5 {
|
||||
h#{$i} {
|
||||
$factor: pow($heading-scale, 5 - $i);
|
||||
font-size: $base-font-size * $factor;
|
||||
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #f0f0f0;
|
||||
padding: 0 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
|
||||
font-family: 'Material Symbols Outlined Variable';
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 150ms ease-in-out;
|
||||
|
||||
border: 1px solid #e0e0e0;
|
||||
|
||||
&:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
select,
|
||||
textarea {
|
||||
width: auto;
|
||||
|
||||
&:not(textarea) {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
|
||||
background: #fff;
|
||||
|
||||
border: none;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
|
||||
padding: 5px 0.25rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
resize: vertical;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
|
||||
display: grid;
|
||||
padding: 2rem;
|
||||
|
||||
border-radius: 1rem;
|
||||
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
grid-template-columns: minmax(7rem, auto) 1fr;
|
||||
gap: 0.75rem 1rem;
|
||||
|
||||
align-items: start;
|
||||
|
||||
.row {
|
||||
grid-column: span 2;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
&.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.compound {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
|
||||
& > .fill {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
textarea {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
height: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Structure
|
||||
//
|
||||
|
||||
body {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 1.25;
|
||||
|
||||
color: #333;
|
||||
background: #f4f4f4;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: 'sidebar main';
|
||||
|
||||
.sidebar {
|
||||
grid-area: sidebar;
|
||||
|
||||
min-width: 20vw;
|
||||
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
box-shadow: 0 0 1rem 0 #0002, 0 0 0.25rem 0 #0002;
|
||||
|
||||
.header {
|
||||
padding: 1rem;
|
||||
font-weight: 700;
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
gap: 0.5rem;
|
||||
|
||||
padding: 0 1rem;
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.label {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
gap: 0.25rem;
|
||||
|
||||
cursor: pointer;
|
||||
transition: background 150ms ease-in-out;
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.children {
|
||||
flex-direction: column;
|
||||
padding-left: 2rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.nav-item {
|
||||
padding: 5px;
|
||||
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background: #666;
|
||||
|
||||
position: absolute;
|
||||
left: -0.25rem;
|
||||
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
||||
border-radius: 100%;
|
||||
|
||||
top: 50%;
|
||||
transform: translate(0, calc(-50% + 1px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.group {
|
||||
& > .label {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
grid-area: main;
|
||||
padding: 2rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
gap: 2rem;
|
||||
|
||||
justify-self: center;
|
||||
|
||||
width: 80ch;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "preact"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue