Add userbars

Author: spearcat

components.d.ts

@@ -28,6 +28,8 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     SignInGate: typeof import('./src/components/SignInGate.vue')['default']
     SpotifyPlayer: typeof import('./src/components/custom-elements/SpotifyPlayer.vue')['default']
+    'Userbar.ce': typeof import('./src/components/custom-elements/Userbar.ce.vue')['default']
+    'UserbarBadge.ce': typeof import('./src/components/custom-elements/UserbarBadge.ce.vue')['default']
     VaButton: typeof import('vuestic-ui')['VaButton']
     'WebampPlayer.ce': typeof import('./src/components/custom-elements/WebampPlayer.ce.vue')['default']
   }

src/components/custom-elements/UserbarBadge.ce.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const props = defineProps<{
+    width?: number;
+    height?: number;
+    text?: string;
+    textColor?: string;
+
+    backgroundType?: "gradient" | "plain";
+    backgroundPositionX?: number;
+    backgroundPositionY?: number;
+    backgroundEndPositionX?: number;
+    backgroundEndPositionY?: number;
+    backgroundColor?: string;
+    backgroundColors?: string[];
+
+    textAlign?: "left" | "center" | "right";
+    textBorder?: boolean;
+    textBorderWidth?: number;
+    textBorderColor?: string;
+    pattern?: "none" | "dots" | "stripes";
+    topShadow?: boolean;
+}>();
+
+import userbarGenerator from '@/external/userbar-generator/src/index';
+import { useObjectUrl } from '@vueuse/core';
+
+const blob = await userbarGenerator({
+    width: props.width,
+    height: props.height,
+    text: props.text,
+    textColor: props.textColor,
+
+    background: props.backgroundType !== undefined ? {
+        type: props.backgroundType,
+        positionX: props.backgroundPositionX,
+        positionY: props.backgroundPositionY,
+        endPositionX: props.backgroundEndPositionX,
+        endPositionY: props.backgroundEndPositionY,
+        colors: props.backgroundColors ?? (props.backgroundColor ? [props.backgroundColor] : undefined) ?? [],
+    } : undefined,
+
+    textAlign: props.textAlign,
+    textBorder: props.textBorder,
+    textBorderWidth: props.textBorderWidth,
+    textBorderColor: props.textBorderColor,
+    pattern: props.pattern,
+    topShadow: props.topShadow,
+});
+
+const objectUrl = useObjectUrl(blob);
+</script>
+
+<template>
+    <img v-bind="$attrs" :src="objectUrl" >
+</template>

src/external/userbar-generator

@@ -20,6 +20,7 @@ import OnekoKitty from '@/components/custom-elements/OnekoKitty.ce.vue';
 import NewBlink from '@/components/custom-elements/NewBlink.ce.vue';
 import LesbiBadge from '@/components/custom-elements/LesbiBadge.ce.vue';
 import EightyEightThirtyOneBadge from '@/components/custom-elements/EightyEightThirtyOneBadge.ce.vue';
+import UserbarBadge from '@/components/custom-elements/UserbarBadge.ce.vue';
 
 type Props = Record<string, any>;
 
@@ -73,5 +74,6 @@ export const components: MDXComponents = {
     blink: NewBlink,
     LesbiBadge: LesbiBadge,
     Badge: EightyEightThirtyOneBadge,
+    Userbar: UserbarBadge,
     ...(extraComponents as unknown as MDXComponents)
 };

src/lib/markdown/components.tsx

@@ -1,7 +1,7 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "cli/**/*.ts"],
-  "exclude": ["src/**/__tests__/*", "node_modules", "src/external"],
+  "exclude": ["src/**/__tests__/*", "node_modules", "src/external/webamp"],
   "compilerOptions": {
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",