Add wiki

.gitignore

@@ -119,4 +119,90 @@ gradle-app.setting
 # End of https://www.toptal.com/developers/gitignore/api/intellij+all,gradle
 
 # run-paper
-run/**
+run/**
+
+# Bun
+bun.lock
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# database
+*.sqlite
+
+# package-json
+bun.lock
+
+# bun deploy file
+node_modules.bun
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test

docs/.gitignore

@@ -0,0 +1 @@
+.vitepress/cache

docs/.vitepress/config.mts

@@ -0,0 +1,42 @@
+import {defineConfig} from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+    title: "KikoAPI docs",
+    description: "KikoAPI is a lightweight helper library for our Paper plugins that speeds up development.",
+    vite: {
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    api: "modern-compiler"
+                }
+            }
+        }
+    },
+    srcDir: './pages',
+    appearance: 'force-dark',
+    themeConfig: {
+        search: {
+            provider: 'local'
+        },
+        // https://vitepress.dev/reference/default-theme-config
+        nav: [
+            {text: 'Home', link: '/'},
+            {text: 'Examples', link: '/markdown-examples'}
+        ],
+
+        sidebar: [
+            {
+                text: 'Examples',
+                items: [
+                    {text: 'Markdown Examples', link: '/markdown-examples'},
+                    {text: 'Runtime API Examples', link: '/api-examples'}
+                ]
+            }
+        ],
+
+        socialLinks: [
+            {icon: 'github', link: 'https://github.com/KikoPlugins/KikoAPI'}
+        ]
+    }
+})

docs/.vitepress/theme/components/CachedImage.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+
+const props = defineProps<{
+    src?: string;
+    placeholder?: string;
+    alt?: string;
+}>();
+
+const imgSrc = ref<string>('');
+const isLoading = ref(true);
+const hasError = ref(false);
+
+const CACHE_PREFIX = 'cached_image_';
+const CACHE_EXPIRY = 7 * 24 * 60 * 60 * 1000;
+
+interface CachedImageData {
+    data: string;
+    timestamp: number;
+}
+
+const getCachedImage = (url: string): string | null => {
+    try {
+        const key = CACHE_PREFIX + btoa(url);
+        const cached = localStorage.getItem(key);
+        if (cached) {
+            const data: CachedImageData = JSON.parse(cached);
+            if (Date.now() - data.timestamp < CACHE_EXPIRY) {
+                return data.data;
+            } else {
+                localStorage.removeItem(key);
+            }
+        }
+    } catch (e) {
+        console.warn('Failed to get cached image:', e);
+    }
+    return null;
+};
+
+const setCachedImage = (url: string, dataUrl: string): void => {
+    try {
+        if (dataUrl.length > 5 * 1024 * 1024) { // 5MB limit
+            console.warn('Image is too large to cache:', url);
+            return;
+        }
+        const key = CACHE_PREFIX + btoa(url);
+        const data: CachedImageData = {
+            data: dataUrl,
+            timestamp: Date.now()
+        };
+        localStorage.setItem(key, JSON.stringify(data));
+    } catch (e) {
+        if (e instanceof DOMException && e.name === 'QuotaExceededError') {
+            console.warn('LocalStorage quota exceeded, cannot cache image:', e);
+        } else {
+            console.warn('Failed to retrieve cached image:', e);
+        }
+    }
+};
+
+const loadImage = (url: string): void => {
+    if (!url) {
+        imgSrc.value = props.placeholder || '';
+        isLoading.value = false;
+        return;
+    }
+
+    const cached = getCachedImage(url);
+    if (cached) {
+        imgSrc.value = cached;
+        isLoading.value = false;
+        hasError.value = false;
+        return;
+    }
+
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+
+    img.onload = () => {
+        try {
+            const canvas = document.createElement('canvas');
+            canvas.width = img.naturalWidth;
+            canvas.height = img.naturalHeight;
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                ctx.drawImage(img, 0, 0);
+                const dataUrl = canvas.toDataURL('image/png');
+                setCachedImage(url, dataUrl);
+                imgSrc.value = dataUrl;
+            } else {
+                imgSrc.value = url;
+            }
+        } catch (e) {
+            console.warn('Failed to cache image, using original URL:', e);
+            imgSrc.value = url;
+        }
+        isLoading.value = false;
+        hasError.value = false;
+    };
+
+    img.onerror = () => {
+        hasError.value = true;
+        isLoading.value = false;
+        imgSrc.value = props.placeholder || '';
+    };
+
+    img.src = url;
+};
+
+onMounted(() => {
+    if (props.src) {
+        loadImage(props.src);
+    } else if (props.placeholder) {
+        imgSrc.value = props.placeholder;
+        isLoading.value = false;
+    } else {
+        isLoading.value = false;
+    }
+});
+});
+
+watch(() => props.src, (newSrc) => {
+    if (newSrc) {
+        isLoading.value = true;
+        hasError.value = false;
+        loadImage(newSrc);
+    }
+});
+</script>
+
+<template>
+    <div class="cached-image-wrapper">
+        <img
+            v-if="imgSrc"
+            :src="imgSrc"
+            :alt="alt || ''"
+            :class="{ loading: isLoading, error: hasError }"
+            v-bind="$attrs"
+        />
+        <div v-else-if="isLoading" class="loading-placeholder">
+            <span>Loading...</span>
+        </div>
+        <div v-else-if="hasError" class="error-placeholder">
+            <span>Failed to load image</span>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.cached-image-wrapper {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    transition: opacity 0.3s ease;
+}
+
+img.loading {
+    opacity: 0.5;
+}
+
+img.error {
+    opacity: 0.3;
+}
+
+.loading-placeholder,
+.error-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+    background: rgba(128, 128, 128, 0.1);
+    border-radius: 8px;
+}
+
+.loading-placeholder span {
+    color: var(--vp-c-text-2);
+    font-size: 14px;
+}
+
+.error-placeholder span {
+    color: var(--vp-c-danger);
+    font-size: 14px;
+}
+</style>