Use Vuepress for documentation

.gitignore

@@ -2,7 +2,6 @@
 node_modules
 
 /lib
-/docs
 
 # local env files
 .env.local
@@ -26,4 +25,10 @@ lerna-debug.log*
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?
+
+# For Vuepress
+.cache
+.temp
+docs/api
+dist

docs/.vuepress/config.ts

@@ -0,0 +1,60 @@
+import {defineUserConfig} from 'vuepress'
+import {path} from '@vuepress/utils'
+import {defaultTheme} from '@vuepress/theme-default'
+import {viteBundler} from '@vuepress/bundler-vite'
+
+export default defineUserConfig({
+	title: 'Linearly',
+	base: '/linearly/',
+	head: [
+		['link', {rel: 'icon', href: './logo.svg'}],
+		['link', {rel: 'preconnect', href: 'https://fonts.googleapis.com'}],
+		[
+			'link',
+			{rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: true},
+		],
+		[
+			'link',
+			{
+				rel: 'stylesheet',
+				href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap',
+			},
+		],
+		['link', {rel: 'icon', href: '/logo.svg'}],
+		[
+			'link',
+			{
+				rel: 'stylesheet',
+				href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200',
+			},
+		],
+	],
+	theme: defaultTheme({
+		navbar: [
+			{
+				text: 'Home',
+				link: '/',
+			},
+			{
+				text: 'API',
+				link: '/api',
+			},
+		],
+		logo: '/logo.svg',
+		repo: 'baku89/linearly',
+	}),
+	locales: {
+		'/': {
+			lang: 'English',
+			title: 'Lineraly',
+			description:
+				'A collection of utility functions that relates to linear algebra and graphics programming',
+		},
+	},
+	bundler: viteBundler({}),
+	markdown: {
+		//@ts-ignore
+		linkify: true,
+		typographer: true,
+	},
+})

docs/.vuepress/styles/index.scss

@@ -0,0 +1,284 @@
+:root {
+	--c-brand: #26adba;
+	--c-brand-light: #26adba;
+	--c-tip: var(--c-brand);
+	--c-text: black;
+	--c-text-lighter: #525368;
+	--c-text-lightest: var(--c-brand);
+	--c-border: var(--c-text);
+	--c-border-dark: var(--c-border);
+	--code-bg-color: black;
+	--code-ln-color: white;
+	--font-family: 'Work Sans', sans-serif;
+	--font-family-code: 'IBM Plex Mono', monospace;
+
+	--border-radius: 6px;
+}
+
+html.dark {
+	--c-brand: #6dcdd6;
+	--c-text: white;
+	--c-border: white;
+	--c-border-dark: white;
+	--c-bg: #000;
+	--c-tip: var(--c-brand);
+	--c-tip-bg: var(--code-bg-color);
+	--c-text-lightest: var(--c-brand);
+}
+
+a {
+	font-weight: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: 500;
+}
+
+#main-title,
+.site-name {
+	letter-spacing: -0.06em;
+}
+
+.theme-default-content {
+	h2 {
+		border-top: 2px solid var(--c-border);
+		margin-top: var(--navbar-height);
+		padding: 0.2em 0 0;
+		border-bottom: none;
+	}
+
+	img.diagram {
+		html.dark & {
+			filter: invert(1) hue-rotate(180deg);
+		}
+	}
+}
+
+// Navbar
+.navbar {
+	background-color: transparent;
+	background-repeat: repeat-x;
+	border-bottom: none;
+
+	.site-name {
+		font-size: 1.4rem;
+		font-weight: 400;
+		background: var(--c-bg);
+		width: min-content !important;
+	}
+
+	padding-top: calc(var(--navbar-padding-v) + 2px);
+}
+
+.navbar-item a,
+.navbar-dropdown-wrapper .navbar-dropdown-title,
+.navbar-dropdown-wrapper .navbar-dropdown-title-mobile {
+	background: var(--c-bg);
+	font-size: 1rem;
+	font-weight: 400;
+}
+
+.navbar-item a {
+	.external-link-icon {
+		display: none;
+	}
+}
+
+.navbar-item a[aria-label='GitHub'] {
+	width: 1.4em;
+	overflow: hidden;
+	vertical-align: middle;
+	background: none;
+
+	&:before {
+		display: inline-block;
+		content: '';
+		width: 1.4em;
+		height: 1.4em;
+		background: currentColor;
+		margin-bottom: 0.2em;
+		mask: url('/linearly/github-mark.svg') no-repeat;
+		mask-size: 100% 100%;
+		vertical-align: middle;
+	}
+
+	@media (max-width: 719px) {
+		width: auto;
+
+		&:before {
+			display: none;
+		}
+	}
+}
+.navbar-dropdown-title[aria-label='Select language'] {
+	font-size: 1.5em;
+	width: 1em;
+	overflow: hidden;
+	vertical-align: middle;
+	background: none;
+
+	&:before {
+		display: inline-block;
+		font-family: 'Material Symbols Outlined';
+		content: '\e8e2';
+		font-feature-settings: 'liga';
+		-webkit-font-feature-settings: 'liga';
+		font-variation-settings:
+			'FILL' 0,
+			'wght' 400,
+			'GRAD' 0,
+			'opsz' 24;
+		vertical-align: middle;
+	}
+}
+
+.toggle-color-mode-button {
+	opacity: 1;
+}
+
+.custom-container {
+	border: none !important;
+	padding-left: 2rem !important;
+	border-radius: var(--border-radius);
+
+	// Make the border gradient
+	background-image: linear-gradient(
+		to right,
+		var(--border-color) 0rem,
+		color-mix(in srgb, var(--border-color) 50%, transparent) 0.75rem,
+		color-mix(in srgb, var(--border-color) 20%, transparent) 1.5rem,
+		color-mix(in srgb, var(--border-color) 5%, transparent) 2rem,
+		transparent 3rem
+	);
+
+	&.tip {
+		--border-color: var(--c-tip);
+	}
+
+	&.warning {
+		--border-color: var(--c-warning);
+	}
+}
+
+// Code Blocks
+div[class*='language-']::before {
+	font-size: 1rem;
+	font-feature-settings: 'salt';
+}
+
+main {
+	margin-bottom: 2rem !important;
+
+	// List
+	li {
+		list-style: none;
+
+		&:before {
+			content: '❊';
+			color: var(--c-text-quote);
+			display: inline-block;
+			width: 1em;
+			margin-left: -1em;
+		}
+	}
+}
+
+// Sidebar
+.sidebar {
+	border-right: none;
+
+	.navbar-items {
+		border: none;
+	}
+
+	.navbar-items a {
+		font-weight: 500;
+	}
+}
+
+.sidebar-item.sidebar-heading {
+	font-weight: 500;
+}
+
+// Code
+code {
+	border-radius: var(--border-radius);
+}
+
+p strong code {
+	font-size: 1.15rem;
+	background: none;
+	color: var(--c-text);
+	padding: 0;
+}
+
+// Home
+.home {
+	.hero {
+		text-align: left;
+
+		h1 {
+			font-weight: 400;
+			font-size: 4rem;
+		}
+
+		.description {
+			max-width: unset;
+			margin-bottom: 2.5rem;
+		}
+	}
+
+	.badges {
+		margin-bottom: 2rem;
+	}
+}
+
+// Table
+tr:nth-child(2n) {
+	background-color: transparent;
+}
+
+th:nth-child(3) {
+	min-width: 15em;
+}
+
+table {
+	border-collapse: separate;
+	border-spacing: 0;
+}
+th:not(:last-child),
+td:not(:last-child) {
+	border-right: 0;
+}
+th:not(:first-child),
+td:not(:first-child) {
+	border-left: 0;
+}
+th,
+tr:not(:last-child) td {
+	border-bottom: 0;
+}
+th:first-child {
+	border-radius: 18px 0 0 0;
+}
+th:last-child {
+	border-radius: 0 18px 0 0;
+}
+tr:last-child td:first-child {
+	border-radius: 0 0 0 18px;
+}
+tr:last-child td:last-child {
+	border-radius: 0 0 18px 0;
+}
+
+td code {
+	background-color: transparent !important;
+	padding-left: 0;
+	padding-right: 0;
+	color: var(--c-text);
+}