Compare commits

...

4 Commits

Author SHA1 Message Date
885742e792 wip 2024-03-01 12:03:30 +01:00
5588be4d86 wip 2024-02-16 13:05:13 +01:00
fb1b750ebf wip 2024-02-09 11:15:21 +01:00
a53504bd86 wip 2024-02-08 16:13:43 +01:00
29 changed files with 1295 additions and 11 deletions

View File

@ -1,8 +1,12 @@
.gitea
.vscode
assets
.editorconfig
.gitatributes
.gitattributes
.gitea
.gitignore
.gitlocal
.prettierrc
.vscode
assets
LICENSE
node_modules
README.md
renovate.json

3
.gitignore vendored
View File

@ -13,6 +13,7 @@ data/*.csv
coverage.xml
testResults.xml
# Ignore NodeJS stuff
# docs / vitepress related ignores
node_modules
docs/.vitepress/cache
docs/.vitepress/dist

10
.prettierrc Normal file
View File

@ -0,0 +1,10 @@
{
"arrowParens": "always",
"bracketSpacing": true,
"editorconfig": true,
"printWidth": 116,
"semi": false,
"singleQuote": true,
"trailingComma": "all",
"vueIndentScriptAndStyle": true
}

View File

@ -6,9 +6,7 @@
"editor.renderWhitespace": "boundary",
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.rulers": [
116
],
"editor.rulers": [116],
// powershell general
"powershell.startAutomatically": true,
"powershell.enableProfileLoading": true,
@ -67,5 +65,9 @@
"addWords": true
},
"custom": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}

6
Caddyfile Normal file
View File

@ -0,0 +1,6 @@
:80 {
root * /arkanum-docs
encode gzip zstd
try_files {path}.html {path} /
file_server
}

View File

@ -17,21 +17,22 @@ LABEL org.opencontainers.image.url="https://gitea.ocram85.com/CodeServer/arkanum
LABEL org.opencontainers.image.source="https://gitea.ocram85.com/CodeServer/arkanum.git"
LABEL org.opencontainers.image.documentation="https://gitea.ocram85.com/CodeServer/arkanum"
#region starship
RUN \
echo "**** install starship prompt ****" && \
curl -sS https://starship.rs/install.sh | sh -s -- -f && \
echo "eval \"\$(starship init bash)\"" >> /etc/bash.bashrc
ENV STARSHIP_CONFIG=/etc/starship.toml
COPY starship.toml /etc/starship.toml
#endregion starship
#region git
ADD gitconfig-system /etc/gitconfig
RUN \
echo "**** setup git ****" && \
# using prepared systemwide config file instead.
#git config --system credential.helper store && \
echo 'source /usr/share/bash-completion/completions/git' >> /etc/bash.bashrc
#endregion git
ADD arkanum /usr/bin/
ADD arkanum-completion /etc/bash_completion.d/

15
Dockerfile.vitepress Normal file
View File

@ -0,0 +1,15 @@
FROM oven/bun:1 as builder
USER bun
WORKDIR /app
COPY --chown=bun:bun package*.json bun.lockdb ./
ENV NODE_ENV=production
RUN bun install --frozen-lockfile --production \
&& bun run --bun docs:build
FROM caddy:2.7.6-alpine as prod
COPY --from=builder /app/dist /arkanum-docs/
COPY Caddyfile /etc/caddy
HEALTHCHECK --interval=15s --timeout=3s \
CMD wget --no-verbose --tries=1 --spider http://localhost:80/ || exit 1

View File

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 106 KiB

BIN
bun.lockb Executable file

Binary file not shown.

View File

@ -0,0 +1,40 @@
import { defineConfig } from 'vitepress'
import { devDependencies, version } from '../../package.json'
import navbar from './navbar.mjs'
import { SidebarItems } from './sidebar.mjs'
// https://vitepress.dev/reference/site-config
export default defineConfig({
title: 'Arkanum',
titleTemplate: '🧙 Arkanum',
description: 'An opinionated Code-Server distribution.',
lang: 'en-US',
head: [['link', { rel: 'icon', href: '/favicon.png' }]],
cleanUrls: true,
appearance: 'force-dark',
markdown: {
image: {
lazyLoading: true,
},
},
themeConfig: {
logo: '/logo.png',
outline: 'deep',
search: {
provider: 'local'
},
// https://vitepress.dev/reference/default-theme-config
nav: navbar.getItems(version),
sidebar: SidebarItems,
socialLinks: [{ icon: 'github', link: 'https://gitea.ocram85.com/CodeServer/arkanum' }],
footer: {
message: 'Released under the AGPLv3 License.',
copyright: 'Copyright © 2022-present OCram85 <me@ocram85.com>'
},
editLink: {
pattern: 'https://gitea.ocram85.com/CodeServer/arkanum/_edit/main/docs/:path',
text: 'Edit this page on Gitea'
}
},
})

View File

@ -0,0 +1,27 @@
function getItems(version) {
const ci = process.env.ci
const pr = process.env.CI_COMMIT_PULL_REQUEST
let nver = undefined
if (ci === 'woodpecker') {
if (pr !== null) {
nver = `${version}#${pr}`
}
} else {
nver = version
}
return [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/about' },
{
text: nver,
items: [{ text: 'Changelog', link: '/changelog' }],
},
]
}
export default {
getItems,
}

View File

@ -0,0 +1,25 @@
export const SidebarItems = {
'/guide/': { base: '/guide/', items: getGuide() },
}
function getGuide() {
return [
{
text: 'Guide',
//collapsed: false,
items: [
{ text: 'About', link: 'about' },
{ text: 'Getting Started', link: 'getting-started' },
{
text: 'Components',
items: [
{ text: 'Base Images', link: 'components/base-images' },
{ text: 'Included Packages', link: 'components/packages' },
{ text: 'Starship Prompt', link: 'components/starship' },
{ text: 'Git', link: 'components/git' },
],
},
],
},
]
}

View File

@ -0,0 +1,17 @@
// https://vitepress.dev/guide/custom-theme
import { h } from 'vue'
import DefaultTheme from 'vitepress/theme'
import './style.css'
/** @type {import('vitepress').Theme} */
export default {
extends: DefaultTheme,
Layout: () => {
return h(DefaultTheme.Layout, null, {
// https://vitepress.dev/guide/extending-default-theme#layout-slots
})
},
enhanceApp({ app, router, siteData }) {
// ...
}
}

View File

@ -0,0 +1,139 @@
/**
* Customize default theme styling by overriding CSS variables:
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
*/
/**
* Colors
*
* Each colors have exact same color scale system with 3 levels of solid
* colors with different brightness, and 1 soft color.
*
* - `XXX-1`: The most solid color used mainly for colored text. It must
* satisfy the contrast ratio against when used on top of `XXX-soft`.
*
* - `XXX-2`: The color used mainly for hover state of the button.
*
* - `XXX-3`: The color for solid background, such as bg color of the button.
* It must satisfy the contrast ratio with pure white (#ffffff) text on
* top of it.
*
* - `XXX-soft`: The color used for subtle background such as custom container
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
* on top of it.
*
* The soft color must be semi transparent alpha channel. This is crucial
* because it allows adding multiple "soft" colors on top of each other
* to create a accent, such as when having inline code block inside
* custom containers.
*
* - `default`: The color used purely for subtle indication without any
* special meanings attched to it such as bg color for menu hover state.
*
* - `brand`: Used for primary brand colors, such as link text, button with
* brand theme, etc.
*
* - `tip`: Used to indicate useful information. The default theme uses the
* brand color for this by default.
*
* - `warning`: Used to indicate warning to the users. Used in custom
* container, badges, etc.
*
* - `danger`: Used to show error, or dangerous message to the users. Used
* in custom container, badges, etc.
* -------------------------------------------------------------------------- */
:root {
--vp-c-default-1: var(--vp-c-gray-1);
--vp-c-default-2: var(--vp-c-gray-2);
--vp-c-default-3: var(--vp-c-gray-3);
--vp-c-default-soft: var(--vp-c-gray-soft);
--vp-c-brand-1: #10b981;
--vp-c-brand-2: #0e9d6e;
--vp-c-brand-3: #11bc84;
--vp-c-brand-soft: rgba(16, 185, 129, 0.14);
--vp-c-tip-1: var(--vp-c-brand-1);
--vp-c-tip-2: var(--vp-c-brand-2);
--vp-c-tip-3: var(--vp-c-brand-3);
--vp-c-tip-soft: var(--vp-c-brand-soft);
--vp-c-warning-1: var(--vp-c-yellow-1);
--vp-c-warning-2: var(--vp-c-yellow-2);
--vp-c-warning-3: var(--vp-c-yellow-3);
--vp-c-warning-soft: var(--vp-c-yellow-soft);
--vp-c-danger-1: var(--vp-c-red-1);
--vp-c-danger-2: var(--vp-c-red-2);
--vp-c-danger-3: var(--vp-c-red-3);
--vp-c-danger-soft: var(--vp-c-red-soft);
}
/**
* Component: Button
* -------------------------------------------------------------------------- */
:root {
--vp-button-brand-border: transparent;
--vp-button-brand-text: var(--vp-c-white);
--vp-button-brand-bg: var(--vp-c-brand-3);
--vp-button-brand-hover-border: transparent;
--vp-button-brand-hover-text: var(--vp-c-white);
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
--vp-button-brand-active-border: transparent;
--vp-button-brand-active-text: var(--vp-c-white);
--vp-button-brand-active-bg: var(--vp-c-brand-1);
}
/**
* Component: Home
* -------------------------------------------------------------------------- */
:root {
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(
120deg,
#41d1ff 30%,
#10b981
);
--vp-home-hero-image-background-image: linear-gradient(
-45deg,
#47caff 50%,
#10b981 50%
);
--vp-home-hero-image-filter: blur(44px);
}
@media (min-width: 640px) {
:root {
--vp-home-hero-image-filter: blur(56px);
}
}
@media (min-width: 960px) {
:root {
--vp-home-hero-image-filter: blur(68px);
}
}
/**
* Component: Custom Block
* -------------------------------------------------------------------------- */
:root {
--vp-custom-block-tip-border: transparent;
--vp-custom-block-tip-text: var(--vp-c-text-1);
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
}
/**
* Component: Algolia
* -------------------------------------------------------------------------- */
.DocSearch {
--docsearch-primary-color: var(--vp-c-brand-1) !important;
}

View File

@ -0,0 +1,571 @@
/**
* Colors: Solid
* -------------------------------------------------------------------------- */
:root {
--vp-c-white: #ffffff;
--vp-c-black: #000000;
--vp-c-neutral: var(--vp-c-black);
--vp-c-neutral-inverse: var(--vp-c-white);
}
.dark {
--vp-c-neutral: var(--vp-c-white);
--vp-c-neutral-inverse: var(--vp-c-black);
}
/**
* Colors: Palette
*
* The primitive colors used for accent colors. These colors are referenced
* by functional colors such as "Text", "Background", or "Brand".
*
* Each colors have exact same color scale system with 3 levels of solid
* colors with different brightness, and 1 soft color.
*
* - `XXX-1`: The most solid color used mainly for colored text. It must
* satisfy the contrast ratio against when used on top of `XXX-soft`.
*
* - `XXX-2`: The color used mainly for hover state of the button.
*
* - `XXX-3`: The color for solid background, such as bg color of the button.
* It must satisfy the contrast ratio with pure white (#ffffff) text on
* top of it.
*
* - `XXX-soft`: The color used for subtle background such as custom container
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
* on top of it.
*
* The soft color must be semi transparent alpha channel. This is crucial
* because it allows adding multiple "soft" colors on top of each other
* to create a accent, such as when having inline code block inside
* custom containers.
* -------------------------------------------------------------------------- */
:root {
--vp-c-gray-1: #dddde3;
--vp-c-gray-2: #e4e4e9;
--vp-c-gray-3: #ebebef;
--vp-c-gray-soft: rgba(142, 150, 170, 0.14);
--vp-c-indigo-1: #3451b2;
--vp-c-indigo-2: #3a5ccc;
--vp-c-indigo-3: #5672cd;
--vp-c-indigo-soft: rgba(100, 108, 255, 0.14);
--vp-c-purple-1: #6f42c1;
--vp-c-purple-2: #7e4cc9;
--vp-c-purple-3: #8e5cd9;
--vp-c-purple-soft: rgba(159, 122, 234, 0.14);
--vp-c-green-1: #18794e;
--vp-c-green-2: #299764;
--vp-c-green-3: #30a46c;
--vp-c-green-soft: rgba(16, 185, 129, 0.14);
--vp-c-yellow-1: #915930;
--vp-c-yellow-2: #946300;
--vp-c-yellow-3: #9f6a00;
--vp-c-yellow-soft: rgba(234, 179, 8, 0.14);
--vp-c-red-1: #b8272c;
--vp-c-red-2: #d5393e;
--vp-c-red-3: #e0575b;
--vp-c-red-soft: rgba(244, 63, 94, 0.14);
--vp-c-sponsor: #db2777;
}
.dark {
--vp-c-gray-1: #515c67;
--vp-c-gray-2: #414853;
--vp-c-gray-3: #32363f;
--vp-c-gray-soft: rgba(101, 117, 133, 0.16);
--vp-c-indigo-1: #a8b1ff;
--vp-c-indigo-2: #5c73e7;
--vp-c-indigo-3: #3e63dd;
--vp-c-indigo-soft: rgba(100, 108, 255, 0.16);
--vp-c-purple-1: #c8abfa;
--vp-c-purple-2: #a879e6;
--vp-c-purple-3: #8e5cd9;
--vp-c-purple-soft: rgba(159, 122, 234, 0.16);
--vp-c-green-1: #3dd68c;
--vp-c-green-2: #30a46c;
--vp-c-green-3: #298459;
--vp-c-green-soft: rgba(16, 185, 129, 0.16);
--vp-c-yellow-1: #f9b44e;
--vp-c-yellow-2: #da8b17;
--vp-c-yellow-3: #a46a0a;
--vp-c-yellow-soft: rgba(234, 179, 8, 0.16);
--vp-c-red-1: #f66f81;
--vp-c-red-2: #f14158;
--vp-c-red-3: #b62a3c;
--vp-c-red-soft: rgba(244, 63, 94, 0.16);
}
/**
* Colors: Background
*
* - `bg`: The bg color used for main screen.
*
* - `bg-alt`: The alternative bg color used in places such as "sidebar",
* or "code block".
*
* - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
* such as "dialog".
*
* - `bg-soft`: The bg color to slightly distinguish some components from
* the page. Used for things like "carbon ads" or "table".
* -------------------------------------------------------------------------- */
:root {
--vp-c-bg: #ffffff;
--vp-c-bg-alt: #f6f6f7;
--vp-c-bg-elv: #ffffff;
--vp-c-bg-soft: #f6f6f7;
}
.dark {
--vp-c-bg: #1b1b1f;
--vp-c-bg-alt: #161618;
--vp-c-bg-elv: #202127;
--vp-c-bg-soft: #202127;
}
/**
* Colors: Borders
*
* - `divider`: This is used for separators. This is used to divide sections
* within the same components, such as having separator on "h2" heading.
*
* - `border`: This is designed for borders on interactive components.
* For example this should be used for a button outline.
*
* - `gutter`: This is used to divide components in the page. For example
* the header and the lest of the page.
* -------------------------------------------------------------------------- */
:root {
--vp-c-border: #c2c2c4;
--vp-c-divider: #e2e2e3;
--vp-c-gutter: #e2e2e3;
}
.dark {
--vp-c-border: #3c3f44;
--vp-c-divider: #2e2e32;
--vp-c-gutter: #000000;
}
/**
* Colors: Text
*
* - `text-1`: Used for primary text.
*
* - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
*
* - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
* -------------------------------------------------------------------------- */
:root {
--vp-c-text-1: rgba(60, 60, 67);
--vp-c-text-2: rgba(60, 60, 67, 0.78);
--vp-c-text-3: rgba(60, 60, 67, 0.56);
}
.dark {
--vp-c-text-1: rgba(255, 255, 245, 0.86);
--vp-c-text-2: rgba(235, 235, 245, 0.6);
--vp-c-text-3: rgba(235, 235, 245, 0.38);
}
/**
* Colors: Function
*
* - `default`: The color used purely for subtle indication without any
* special meanings attached to it such as bg color for menu hover state.
*
* - `brand`: Used for primary brand colors, such as link text, button with
* brand theme, etc.
*
* - `tip`: Used to indicate useful information. The default theme uses the
* brand color for this by default.
*
* - `warning`: Used to indicate warning to the users. Used in custom
* container, badges, etc.
*
* - `danger`: Used to show error, or dangerous message to the users. Used
* in custom container, badges, etc.
*
* To understand the scaling system, refer to "Colors: Palette" section.
* -------------------------------------------------------------------------- */
:root {
--vp-c-default-1: var(--vp-c-gray-1);
--vp-c-default-2: var(--vp-c-gray-2);
--vp-c-default-3: var(--vp-c-gray-3);
--vp-c-default-soft: var(--vp-c-gray-soft);
--vp-c-brand-1: var(--vp-c-indigo-1);
--vp-c-brand-2: var(--vp-c-indigo-2);
--vp-c-brand-3: var(--vp-c-indigo-3);
--vp-c-brand-soft: var(--vp-c-indigo-soft);
/* DEPRECATED: Use `--vp-c-brand-1` instead. */
--vp-c-brand: var(--vp-c-brand-1);
--vp-c-tip-1: var(--vp-c-brand-1);
--vp-c-tip-2: var(--vp-c-brand-2);
--vp-c-tip-3: var(--vp-c-brand-3);
--vp-c-tip-soft: var(--vp-c-brand-soft);
--vp-c-note-1: var(--vp-c-brand-1);
--vp-c-note-2: var(--vp-c-brand-2);
--vp-c-note-3: var(--vp-c-brand-3);
--vp-c-note-soft: var(--vp-c-brand-soft);
--vp-c-success-1: var(--vp-c-green-1);
--vp-c-success-2: var(--vp-c-green-2);
--vp-c-success-3: var(--vp-c-green-3);
--vp-c-success-soft: var(--vp-c-green-soft);
--vp-c-important-1: var(--vp-c-purple-1);
--vp-c-important-2: var(--vp-c-purple-2);
--vp-c-important-3: var(--vp-c-purple-3);
--vp-c-important-soft: var(--vp-c-purple-soft);
--vp-c-warning-1: var(--vp-c-yellow-1);
--vp-c-warning-2: var(--vp-c-yellow-2);
--vp-c-warning-3: var(--vp-c-yellow-3);
--vp-c-warning-soft: var(--vp-c-yellow-soft);
--vp-c-danger-1: var(--vp-c-red-1);
--vp-c-danger-2: var(--vp-c-red-2);
--vp-c-danger-3: var(--vp-c-red-3);
--vp-c-danger-soft: var(--vp-c-red-soft);
--vp-c-caution-1: var(--vp-c-red-1);
--vp-c-caution-2: var(--vp-c-red-2);
--vp-c-caution-3: var(--vp-c-red-3);
--vp-c-caution-soft: var(--vp-c-red-soft);
}
/**
* Typography
* -------------------------------------------------------------------------- */
:root {
--vp-font-family-base: 'Chinese Quotes', 'Inter var', 'Inter', ui-sans-serif,
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--vp-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco,
Consolas, 'Liberation Mono', 'Courier New', monospace;
}
/**
* Shadows
* -------------------------------------------------------------------------- */
:root {
--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
}
/**
* Z-indexes
* -------------------------------------------------------------------------- */
:root {
--vp-z-index-footer: 10;
--vp-z-index-local-nav: 20;
--vp-z-index-nav: 30;
--vp-z-index-layout-top: 40;
--vp-z-index-backdrop: 50;
--vp-z-index-sidebar: 60;
}
@media (min-width: 960px) {
:root {
--vp-z-index-sidebar: 25;
}
}
/**
* Icons
* -------------------------------------------------------------------------- */
:root {
--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
}
/**
* Layouts
* -------------------------------------------------------------------------- */
:root {
--vp-layout-max-width: 1440px;
}
/**
* Component: Header Anchor
* -------------------------------------------------------------------------- */
:root {
--vp-header-anchor-symbol: '#';
}
/**
* Component: Code
* -------------------------------------------------------------------------- */
:root {
--vp-code-line-height: 1.7;
--vp-code-font-size: 0.875em;
--vp-code-color: var(--vp-c-brand-1);
--vp-code-link-color: var(--vp-c-brand-1);
--vp-code-link-hover-color: var(--vp-c-brand-2);
--vp-code-bg: var(--vp-c-default-soft);
--vp-code-block-color: var(--vp-c-text-2);
--vp-code-block-bg: var(--vp-c-bg-alt);
--vp-code-block-divider-color: var(--vp-c-gutter);
--vp-code-lang-color: var(--vp-c-text-3);
--vp-code-line-highlight-color: var(--vp-c-default-soft);
--vp-code-line-number-color: var(--vp-c-text-3);
--vp-code-line-diff-add-color: var(--vp-c-success-soft);
--vp-code-line-diff-add-symbol-color: var(--vp-c-success-1);
--vp-code-line-diff-remove-color: var(--vp-c-danger-soft);
--vp-code-line-diff-remove-symbol-color: var(--vp-c-danger-1);
--vp-code-line-warning-color: var(--vp-c-warning-soft);
--vp-code-line-error-color: var(--vp-c-danger-soft);
--vp-code-copy-code-border-color: var(--vp-c-divider);
--vp-code-copy-code-bg: var(--vp-c-bg-soft);
--vp-code-copy-code-hover-border-color: var(--vp-c-divider);
--vp-code-copy-code-hover-bg: var(--vp-c-bg);
--vp-code-copy-code-active-text: var(--vp-c-text-2);
--vp-code-copy-copied-text-content: 'Copied';
--vp-code-tab-divider: var(--vp-code-block-divider-color);
--vp-code-tab-text-color: var(--vp-c-text-2);
--vp-code-tab-bg: var(--vp-code-block-bg);
--vp-code-tab-hover-text-color: var(--vp-c-text-1);
--vp-code-tab-active-text-color: var(--vp-c-text-1);
--vp-code-tab-active-bar-color: var(--vp-c-brand-1);
}
/**
* Component: Button
* -------------------------------------------------------------------------- */
:root {
--vp-button-brand-border: transparent;
--vp-button-brand-text: var(--vp-c-white);
--vp-button-brand-bg: var(--vp-c-brand-3);
--vp-button-brand-hover-border: transparent;
--vp-button-brand-hover-text: var(--vp-c-white);
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
--vp-button-brand-active-border: transparent;
--vp-button-brand-active-text: var(--vp-c-white);
--vp-button-brand-active-bg: var(--vp-c-brand-1);
--vp-button-alt-border: transparent;
--vp-button-alt-text: var(--vp-c-text-1);
--vp-button-alt-bg: var(--vp-c-default-3);
--vp-button-alt-hover-border: transparent;
--vp-button-alt-hover-text: var(--vp-c-text-1);
--vp-button-alt-hover-bg: var(--vp-c-default-2);
--vp-button-alt-active-border: transparent;
--vp-button-alt-active-text: var(--vp-c-text-1);
--vp-button-alt-active-bg: var(--vp-c-default-1);
--vp-button-sponsor-border: var(--vp-c-text-2);
--vp-button-sponsor-text: var(--vp-c-text-2);
--vp-button-sponsor-bg: transparent;
--vp-button-sponsor-hover-border: var(--vp-c-sponsor);
--vp-button-sponsor-hover-text: var(--vp-c-sponsor);
--vp-button-sponsor-hover-bg: transparent;
--vp-button-sponsor-active-border: var(--vp-c-sponsor);
--vp-button-sponsor-active-text: var(--vp-c-sponsor);
--vp-button-sponsor-active-bg: transparent;
}
/**
* Component: Custom Block
* -------------------------------------------------------------------------- */
:root {
--vp-custom-block-font-size: 14px;
--vp-custom-block-code-font-size: 13px;
--vp-custom-block-info-border: transparent;
--vp-custom-block-info-text: var(--vp-c-text-1);
--vp-custom-block-info-bg: var(--vp-c-default-soft);
--vp-custom-block-info-code-bg: var(--vp-c-default-soft);
--vp-custom-block-note-border: transparent;
--vp-custom-block-note-text: var(--vp-c-text-1);
--vp-custom-block-note-bg: var(--vp-c-default-soft);
--vp-custom-block-note-code-bg: var(--vp-c-default-soft);
--vp-custom-block-tip-border: transparent;
--vp-custom-block-tip-text: var(--vp-c-text-1);
--vp-custom-block-tip-bg: var(--vp-c-tip-soft);
--vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);
--vp-custom-block-important-border: transparent;
--vp-custom-block-important-text: var(--vp-c-text-1);
--vp-custom-block-important-bg: var(--vp-c-important-soft);
--vp-custom-block-important-code-bg: var(--vp-c-important-soft);
--vp-custom-block-warning-border: transparent;
--vp-custom-block-warning-text: var(--vp-c-text-1);
--vp-custom-block-warning-bg: var(--vp-c-warning-soft);
--vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);
--vp-custom-block-danger-border: transparent;
--vp-custom-block-danger-text: var(--vp-c-text-1);
--vp-custom-block-danger-bg: var(--vp-c-danger-soft);
--vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);
--vp-custom-block-caution-border: transparent;
--vp-custom-block-caution-text: var(--vp-c-text-1);
--vp-custom-block-caution-bg: var(--vp-c-caution-soft);
--vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);
--vp-custom-block-details-border: var(--vp-custom-block-info-border);
--vp-custom-block-details-text: var(--vp-custom-block-info-text);
--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
--vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg);
}
/**
* Component: Input
* -------------------------------------------------------------------------- */
:root {
--vp-input-border-color: var(--vp-c-border);
--vp-input-bg-color: var(--vp-c-bg-alt);
--vp-input-switch-bg-color: var(--vp-c-default-soft);
}
/**
* Component: Nav
* -------------------------------------------------------------------------- */
:root {
--vp-nav-height: 64px;
--vp-nav-bg-color: var(--vp-c-bg);
--vp-nav-screen-bg-color: var(--vp-c-bg);
--vp-nav-logo-height: 24px;
}
.hide-nav {
--vp-nav-height: 0px;
}
.hide-nav .VPSidebar {
--vp-nav-height: 22px;
}
/**
* Component: Local Nav
* -------------------------------------------------------------------------- */
:root {
--vp-local-nav-bg-color: var(--vp-c-bg);
}
/**
* Component: Sidebar
* -------------------------------------------------------------------------- */
:root {
--vp-sidebar-width: 272px;
--vp-sidebar-bg-color: var(--vp-c-bg-alt);
}
/**
* Colors Backdrop
* -------------------------------------------------------------------------- */
:root {
--vp-backdrop-bg-color: rgba(0, 0, 0, 0.6);
}
/**
* Component: Home
* -------------------------------------------------------------------------- */
:root {
--vp-home-hero-name-color: var(--vp-c-brand-1);
--vp-home-hero-name-background: transparent;
--vp-home-hero-image-background-image: none;
--vp-home-hero-image-filter: none;
}
/**
* Component: Badge
* -------------------------------------------------------------------------- */
:root {
--vp-badge-info-border: transparent;
--vp-badge-info-text: var(--vp-c-text-2);
--vp-badge-info-bg: var(--vp-c-default-soft);
--vp-badge-tip-border: transparent;
--vp-badge-tip-text: var(--vp-c-tip-1);
--vp-badge-tip-bg: var(--vp-c-tip-soft);
--vp-badge-warning-border: transparent;
--vp-badge-warning-text: var(--vp-c-warning-1);
--vp-badge-warning-bg: var(--vp-c-warning-soft);
--vp-badge-danger-border: transparent;
--vp-badge-danger-text: var(--vp-c-danger-1);
--vp-badge-danger-bg: var(--vp-c-danger-soft);
}
/**
* Component: Carbon Ads
* -------------------------------------------------------------------------- */
:root {
--vp-carbon-ads-text-color: var(--vp-c-text-1);
--vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
--vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
--vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);
--vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
}
/**
* Component: Local Search
* -------------------------------------------------------------------------- */
:root {
--vp-local-search-bg: var(--vp-c-bg);
--vp-local-search-result-bg: var(--vp-c-bg);
--vp-local-search-result-border: var(--vp-c-divider);
--vp-local-search-result-selected-bg: var(--vp-c-bg);
--vp-local-search-result-selected-border: var(--vp-c-brand-1);
--vp-local-search-highlight-bg: var(--vp-c-brand-1);
--vp-local-search-highlight-text: var(--vp-c-neutral-inverse);
}

15
docs/changelog.md Normal file
View File

@ -0,0 +1,15 @@
---
title: 'Changelog'
description: 'Project changelog'
layout: doc
sidebar: false
aside: right
navbar: true
editLink: false
---
::: details
Sourced from automatically generated CHANGELOG.md project file.
:::
<!--@include: ../CHANGELOG.md-->

107
docs/guide/about.md Normal file
View File

@ -0,0 +1,107 @@
# What is Arkanum
### 🚀 Starship prompt
We added the [Starship](starship.rs) prompt is as default in the integrated terminal. The default config uses Emojis and FiraCode icons.
### 🔱 git config
Added default git system config file with:
- code-server as default editor.
- disabled `aurocrlf`.
- enabled plain credential store for remote.
- added git log helper `lg1` + `lg2`.
- enabled bash completion for git command in integrated bash terminal.
> 💡 See [gitconfig-system](./gitconfig-system) for details.
### 🧙 `arkanum` helper
Added `arkanum` to help installing common runtimes in container.
This helps reducing the image size.
```
🧙 arkanum ✨🌌☄️💥 is used to install optional tools for developing in a
code-server container environment.
Syntax: arkanum <flags> COMMAND OPTION ARGUMENT
COMMAND
config The config command is used to modify arkanum itself.
git The git command is a wrapper for git helpers.
install The install command is used to add different tools
help Shows this help text.
OPTION
config:
disable-motd Disables hint in new bash terminal.
install extensions Installs predefined recommended extensions.
reset-codesettings Sets VS Code user setting with basic (Fira Code).
git:
setup Takes two arguments to setup the git client:
1) Username
2) Email address
install:
docker-cli Installs the latest docker-cli.
dotnet Installs latest LTS dotnet core sdk + runtime.
gitea Installs gitea tools like the changelog generator.
golang Installs golang 1.19.3.
bun Installs latest bun version.
nodejs Installs latest NodeJs LTS version using Volta.
volta Installs Volta as NodeJS version manager.
powershell Installs latest PowerShell LTS version.
Example 1: arkanum git setup "my-name" "my-email"
Example 2: arkanum install golang
Example 3: arkanum config disable-motd
```
### 📝 Fira Code (NerdFont patched)
Added FiraCode as default font in editor and integrated terminal. The font files are embedded and can be used without local installation.
### 🦸 VSCode default settings
If your start the container or log in the first time, a default config file is deployed.
This user setting defines the following stuff:
- Use compact menu bar to avoid users with multiple menu bars.
- Use _One Dark Pro Darker_ theme
- Use _vscode-icons_ icon set
- Set FiraCode as default font in editor.
- Tries to use alternate font names for FiraCode if its locally available.
- Sets FiraCode mono variant in terminal to enable icons used by starship prompt.
- Enables font ligatures
- Enables _auto save_ and _format on save_.
- Disables auto update for extension.
- Disables VSCode telemetry
- Disable confirm message for sync branches.
Additionally we install these extensions on container startup:
- [One Dark Pro](https://open-vsx.org/extension/zhuangtongfa/material-theme) theme
- [vscode-icons](https://open-vsx.org/extension/vscode-icons-team/vscode-icons) icon set
- [Gitlens](https://open-vsx.org/extension/eamodio/gitlens)
## 💣 Known Issues
### Starship.rs
Starship detects workspaces as active python projects. It always appends the prompt
fragment `via 🐍 (lsiopy)`. For now I disabled the python module in starship.
### 🐛 Default extensions installation timing error
If the automatic installation of the default extension fails, you can always retry he installation with the
following command:
```bash
# restart the installation
arkanum config install-extensions
# Optional: reset the vscode user setting
arkanum config reset-codesettings
# Reload with command F1 + Developer: Reload Window
```

View File

@ -0,0 +1,19 @@
# Base Images
## Coder/code-server
Arkanum is build on top of the [code-server](https://github.com/coder/code-server) project. This project
provides the base ability to run VS Code remotely and accessible by any browser instead of the need for a local
installation.
The folks from [linuxserver.io](https://www.linuxserver.io/) build and maintainer super reliable container images
for all kind of software. And so they also did for the code-server project.
We also took their [code-server image](https://hub.docker.com/r/linuxserver/code-server) as our base for further
customizing and tailoring arkanum.
## gitpod-io/openvscode-server <Badge type="info" text="planned for arkanum v2++" />
> [!NOTE] 💬 NOTE
> We plan to also build Arkanum with the openvscode-server base. This could enable us to install Arkanum as
> PWA with our own branding like the product logo.

View File

@ -0,0 +1,52 @@
# Git
## 🔱 Config files
The git configuration is usually done in these 3 different contexts:
- system wide config
- `/etc/gitconfig`
- global _(per user)_ config
- `~/.gitconfig`
- local _(per repository)_
- `<repo-root>/.git/config`
The final config will be merged in this order.
> [!TIP] 💡 TIP
> You can display the final values with `git config --list`
## 📄 Included Config
We already modified the default system config file:
| Key | Section | Description |
| --------------- | ---------------- | ------------------------------------------------------------------------------------ |
| `editor` | **[core]** | Defines code-server as git edit to open files. |
| `autcrlf` | **[core]** | Disables automatic line ending conversion. Should be handeled by the editor |
| `helper` | **[credential]** | Enables saving plain credentials for git remotes. |
| `filesEncoding` | **[i18n]** | Sets _utf-8_ as default encoding. |
| `default` | **[push]** | Uses _simple_ branch name matching strategy. |
| `lg1` | **[alias]** | Adds alternate log output layout in graph style |
| `lg2` | **[alias]** | Adds extended graph log layout. |
| `cfetch` | **[alias]** | Adds alias for fetch with _--prune_ and _--tags_ . _cfetch_ stands for _clean fetch_ |
There are also some [Phabricator](https://en.wikipedia.org/wiki/Phabricator) workflow inspired helpers:
| Key | Section | Description |
| ------------------ | ----------- | ------------------------------------------------------------------------------ |
| `feature <branch>` | **[alias]** | Starts a new feature branch from updates master and checks out the new branch. |
| `wip` | **[alias]** | Stages all current changes and creates a wip _(work in progress)_ commit. |
| `squish` | **[alias]** | Takes all open workdir changes and add them to the latest commit. |
| `pod` | **[alias]** | Tries to push current branch to _origin/dev_. |
| `poc <branch>` | **[alias]** | Takes current branch and tries to push it to a new remote one. |
::: details **/etc/gitconfig**
<<< @/../gitconfig-system{ini:line-numbers}
:::
## Git bash Completion
Git bash completion is already enabled in the arkanum image:
<<< @/../Dockerfile#git{Dockerfile}

View File

@ -0,0 +1,7 @@
# Packages
We already include the following packages while building the Arkanum image:
| Name | Description |
| ----- | ----------- |
| `git` | Git VCS |

View File

@ -0,0 +1,5 @@
# :rocket: Starship Prompt
##
<<< @/../Dockerfile#starship{Dockerfile:line-numbers}

View File

@ -0,0 +1,141 @@
# Getting Started
## 🚧 Prerequisites
### ⚙️ Container Runtime
You need any host with either
- Docker CE / EE running
- or Docker-CE and configured 'swarm' mode.
### 📦 Get the image
You can download the image from the gitea embedded container registry: `gitea.ocram85.com/codeserver/arkanum` with these tags:
- `latest` - Is based on the lasted master branch commit.
- `next` - Is a test build based on the pull request
- `1`, `0.1`, `0.1.0`, `1.0.0` - tag based version.
> **💡 NOTE: See the [packages page](https://gitea.ocram85.com/CodeServer/-/packages/container/arkanum/latest) for latest version and all other available tags.**
The container images are also published to these registries:
- [Docker Hub](https://hub.docker.com/r/ocram85/arkanum)
- Pull Endpoint: `ocram85/arkanum`
- [GitHub Container Registry](https://github.com/OCram85/arkanum/pkgs/container/arkanum)
- Pull Endpoint: `ghcr.io/ocram85/arkanum`
- [Codeberg Packages](https://codeberg.org/codeserver/-/packages/container/arkanum/next)
- Pull Endpoint: `codeberg.org/codeserver/arkanum`
## 🏗️ Installation
### Run as Docker Swarm Stack
This example shows how to run arkanum as an additional swarm stack.
Therefore you need
- an already running docker swarm cluster,
- a running traefik instance handling the http and https routes,
- configured to expose services in the a ingress overlay network called `traefik-public`.
> ❗ **Warning:** Make sure to secure the access to arkanum with proper **authentication method** and use
> a trusted + **secure https connection**.
```yaml
version: "3.8"
services:
arkanum:
image: gitea.ocram85.com/codeserver/arkanum:1.0.0
environment:
- PUID=1000
- PGID=1000
- TZ=Europe/Berlin
- PASSWORD=foo #optional
#- HASHED_PASSWORD= #optional
- SUDO_PASSWORD=foobar #optional
#- SUDO_PASSWORD_HASH= #optional
#- PROXY_DOMAIN=code-server.my.domain #optional
- DEFAULT_WORKSPACE=/config/workspace
deploy:
replicas: 1
labels:
- "traefik.enable=true"
- "traefik.docker.network=traefik-public"
- "traefik.http.routers.arkanum.rule=Host(`vscode.mydomain.com`)"
- "traefik.http.routers.arkanum.tls.certresolver=myresolver"
- "traefik.http.services.arkanum-srv.loadbalancer.server.port=8443"
volumes:
# store workspace and use config in volume.
- codedata:/config
# mount docker socket to manage host docker
- /var/run/docker.sock:/var/run/docker.sock
# no need to expose the port. traefik acts as reverse proxy and handles the https access.
#ports:
# - 8443:8443
networks:
- arkanum-sphere
- traefik-public
volumes:
codedata:
networks:
arkanum-sphere:
traefik-public:
external: true
```
> 💡 NOTE: For advanced config with additional environment variables see [linuxserver/docker-code-server](https://github.com/linuxserver/docker-code-server) help.
### Use Docker-Compose
This is a basic example for a `docker-compose` file from the [linuxserver/docker-code-server](https://github.com/linuxserver/docker-code-server) project.
See their [docs](https://github.com/linuxserver/docker-code-server#parameters) about a detailed help for advanced config parameters.
```yaml
---
version: "3.8"
services:
arkanum:
image: gitea.ocram85.com/codeserver/arkanum:1.0.0
container_name: code-server
environment:
- PUID=1000
- PGID=1000
- TZ=Europe/London
- PASSWORD=password #optional
- HASHED_PASSWORD= #optional
- SUDO_PASSWORD=password #optional
- SUDO_PASSWORD_HASH= #optional
- PROXY_DOMAIN=code-server.my.domain #optional
- DEFAULT_WORKSPACE=/config/workspace #optional
volumes:
- /path/to/appdata/config:/config
ports:
- 8443:8443
restart: unless-stopped
```
## 🦶 First Steps
After summon Arkanum your first steps should be to set your username and email in the git config:
```bash
arkanum git setup "my-name" "my-email"
```
And that's it. Now you're ready use arkanum as your daily remote code editor. 😄
## 📖 Content
<p align="center">
<a href="https://gitea.ocram85.com/CodeServer/arkanum/">
<img
src="https://gitea.ocram85.com/CodeServer/arkanum/raw/branch/master/assets/screen1.png"
alt="Screenshot1"
>
</a>
</p>

33
docs/index.md Normal file
View File

@ -0,0 +1,33 @@
---
# https://vitepress.dev/reference/default-theme-home-page
layout: home
hero:
name: "Arkanum"
text: 'An opinionated VS Code distribution'
tagline: 'Start coding remotely with a containerized editor.'
image:
src: /logo.png
alt: Arkanum
actions:
- theme: brand
text: 🧙 Get Started
link: /guide/about
- theme: alt
text: View on Gitea
link: https://gitea.ocram85.com/CodeServer/arkanum
features:
- title: Beginner Friendly
icon: ✨
details: Already contains basic extensions and theme setup for quick start.
- title: Access Anywhere
icon: 🌎
details: Access your dev environment from anywhere.
- title: arkanum cli
icon: 🧙
details: Includes <code>arkanum cli</code> to install additional languages and frameworks.
- title: Gitea + CI/CD
icon: 🚧
details: Optimized tooling for Gitea + Woodpecker-CI workflows.
---

BIN
docs/public/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

BIN
docs/public/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

1
index.ts Normal file
View File

@ -0,0 +1 @@
console.log("Hello via Bun!");

24
package.json Normal file
View File

@ -0,0 +1,24 @@
{
"name": "arkanum-docs",
"version": "1.0.0",
"type": "module",
"repository": {
"type": "git",
"url": "https://gitea.ocram85.com/CodeServer/arkanum.git"
},
"devDependencies": {
"@types/bun": "latest",
"prettier": "^3.1.1",
"rimraf": "^5.0.5",
"vitepress": "^1.0.0-rc.44"
},
"peerDependencies": {
"typescript": "^5.0.0"
},
"scripts": {
"docs:clean": "rimraf docs/.vitepress/dist docs/.vitepress/dist",
"docs:dev": "bun run docs:clean && vitepress dev docs --host --port 1313",
"docs:build": "vitepress build docs",
"docs:preview": "vitepress preview docs"
}
}

22
tsconfig.json Normal file
View File

@ -0,0 +1,22 @@
{
"compilerOptions": {
"lib": ["ESNext"],
"target": "ESNext",
"module": "ESNext",
"moduleDetection": "force",
"jsx": "react-jsx",
"allowJs": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"noEmit": true,
/* Linting */
"skipLibCheck": true,
"strict": true,
"noFallthroughCasesInSwitch": true,
"forceConsistentCasingInFileNames": true
}
}