Make current code library + add docs

docs/.vitepress/config.js

@@ -0,0 +1,54 @@
+import { resolve } from 'path'
+import svgLoader from 'vite-svg-loader'
+
+export default {
+  title: 'Omorphia',
+  description: 'A components library used for Modrinth.',
+  themeConfig: {
+    sidebar: [
+      {
+        items: [
+          { text: 'Introduction', link: '/' },
+          { text: 'Setup', link: '/setup' },
+        ]
+      },
+      {
+        text: 'Components',
+        items: [
+          { text: 'Icons', link: '/components/icons' },
+          { text: 'Button', link: '/components/button' },
+          { text: 'Card', link: '/components/card' },
+        ]
+      }
+    ],
+    footer: {
+      message: 'Released under the <a href="https://github.com/modrinth/omoprhia/blob/main/LICENSE">GPLv3 License</a>.',
+      copyright: 'Copyright © 2023-present <a href="https://modrinth.com">Rinth, Inc.</a>'
+    },
+  },
+  vite: {
+    plugins: [
+      svgLoader({
+        svgoConfig: {
+          plugins: [
+            {
+              name: 'preset-default',
+              params: {
+                overrides: {
+                  removeViewBox: false,
+                },
+              },
+            },
+          ],
+        }, }
+      ),
+    ],
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, '../../lib'),
+        'omorphia': resolve(__dirname, '../../lib'),
+      },
+      dedupe: ['vue'],
+    }
+  }
+}

docs/.vitepress/theme/DemoContainer.vue

@@ -0,0 +1,13 @@
+<template>
+<div class="demo bg-raised radius-lg padding-md"><slot /></div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.demo {
+  border: 1px solid var(--color-button-bg);
+}
+</style>

docs/.vitepress/theme/compat.scss

@@ -0,0 +1,17 @@
+body {
+  color: var(--vp-c-text-1);
+  background-color: var(--vp-c-bg);
+}
+
+.VPLink, .title, .pager-link, .link, .header-anchor {
+  color: inherit;
+  transition: none;
+
+  &:hover {
+     text-decoration: none;
+  }
+
+  &:active:not(&:disabled) {
+    scale: 1;
+  }
+}

docs/.vitepress/theme/index.js

@@ -0,0 +1,14 @@
+import DefaultTheme from 'vitepress/theme'
+import Omorphia from 'omorphia'
+import DemoContainer from './DemoContainer.vue'
+
+
+import './compat.scss'
+
+export default {
+  ...DefaultTheme,
+  enhanceApp(ctx) {
+    ctx.app.use(Omorphia)
+    ctx.app.component('DemoContainer', DemoContainer)
+  }
+}

docs/components/button.md

@@ -0,0 +1,13 @@
+# Button
+
+<DemoContainer>
+  <Button :action="() => {}" >
+  Test Button
+  </Button>
+</DemoContainer>
+
+```vue
+<Button :action="() => {}" >
+Test Button
+</Button>
+```

docs/components/card.md

@@ -0,0 +1,13 @@
+# Card
+
+<DemoContainer style="background-color: var(--color-bg)">
+  <Card>
+    This is a card!
+  </Card>
+</DemoContainer>
+
+```vue
+<Card>
+This is a card!
+</Card>
+```

docs/components/icons.md

@@ -0,0 +1,9 @@
+# Icons
+
+<DemoContainer>
+  <CheckIcon />
+</DemoContainer>
+
+```vue
+<CheckIcon />
+```

docs/favicon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;"><path d="M15.933,18.394c-3.261,-0.286 -11.074,-1.466 -14.644,-8.469m22.422,-0c-2.114,4.291 -10.8,11.927 -16.017,13.026m6.18,-21.87c-3.606,1.979 -8.378,8.639 -8.241,13.307m17.732,-5.664c-2.232,-1.888 -9.562,-5.15 -16.943,1.716m8.652,-3.947c1.888,1.087 5.492,3.288 4.806,8.369m-9.956,2.787c-0.286,-1.888 -0.103,-6.213 2.918,-8.41m4.12,4.977c-0.014,-0.135 -0.039,-0.269 -0.075,-0.4m-0,0c-0.528,-1.965 -2.354,-5.652 -6.963,-5.908m6.963,5.908c-2.856,2.601 -6.11,3.11 -7.65,2.975m7.65,-2.975c0.752,-0.685 1.702,-2.374 2.36,-3.376m-8.98,2.575c0.687,0.744 3.468,2.369 4.978,2.231m8.755,-2.746c0,6.351 -5.149,11.5 -11.5,11.5c-6.351,0 -11.5,-5.149 -11.5,-11.5c0,-6.351 5.149,-11.5 11.5,-11.5c6.351,0 11.5,5.149 11.5,11.5Z" style="fill:none;fill-rule:nonzero;stroke:#ff496e;stroke-width:2px;"/></svg>

docs/index.md

@@ -0,0 +1,14 @@
+# Introduction
+
+## Overview
+
+Omorphia is Modrinth's internal component and style library for its Vue projects. It includes:
+
+- 🧩 Typed components which enhance HTML elements and provide a consistent UI
+- 🎨 CSS classes to easily style elements with a coherent style
+
+Omorphia is used in [Knossos](https://github.com/modrinth/knossos) (modrinth.com) and [Theseus](https://github.com/modrinth/theseus) (Minecraft launcher).
+
+## Getting started
+
+Follow the instructions on the [➜ **setup page** 🛠️](/setup).

docs/setup.md

@@ -0,0 +1,5 @@
+# Setup
+
+```bash
+npm install omorphia
+```