Add new blink + lesbi badge + 88x31 badge components

Author: spearcat

components.d.ts

@@ -7,15 +7,21 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    88x31Badge: typeof import('./src/components/custom-elements/88x31Badge.vue')['default']
     'AtAnchor.ce': typeof import('./src/components/custom-elements/AtAnchor.ce.vue')['default']
     'AtImg.ce': typeof import('./src/components/custom-elements/AtImg.ce.vue')['default']
     'AtLink.ce': typeof import('./src/components/custom-elements/AtLink.ce.vue')['default']
     'AtStyle.ce': typeof import('./src/components/custom-elements/AtStyle.ce.vue')['default']
     'AtWebStylesheet.ce': typeof import('./src/components/custom-elements/AtWebStylesheet.ce.vue')['default']
     'AtWebTitle.ce': typeof import('./src/components/custom-elements/AtWebTitle.ce.vue')['default']
+    copy: typeof import('./src/components/custom-elements/LesbiBadge.ce copy.vue')['default']
+    EightyEightThirtyOneBadge: typeof import('./src/components/custom-elements/EightyEightThirtyOneBadge.vue')['default']
+    'EightyEightThirtyOneBadge.ce': typeof import('./src/components/custom-elements/EightyEightThirtyOneBadge.ce.vue')['default']
+    'LesbiBadge.ce': typeof import('./src/components/custom-elements/LesbiBadge.ce.vue')['default']
     MarkdownRenderer: typeof import('./src/components/MarkdownRenderer.vue')['default']
     MModal: typeof import('./src/components/MModal.vue')['default']
     MonacoEditor: typeof import('./src/components/MonacoEditor.vue')['default']
+    'NewBlink.ce': typeof import('./src/components/custom-elements/NewBlink.ce.vue')['default']
     'OmitVanillaCss.ce': typeof import('./src/components/custom-elements/OmitVanillaCss.ce.vue')['default']
     'OnekoKitty.ce': typeof import('./src/components/custom-elements/OnekoKitty.ce.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { badgeUrls } from '@/lib/badges';
+
+const props = defineProps<{
+    name: string;
+}>();
+
+// console.log(badgeUrls);
+
+</script>
+
+<template>
+    <img v-bind="$attrs" :src="badgeUrls['/src/assets/badges/' + props.name]?.default">
+</template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps<{
+    clip?: string;
+    flag1?: string;
+    flag2?: string;
+    overlay?: string;
+    svg?: boolean;
+}>();
+
+</script>
+
+<template>
+    <a href="https://badge.les.bi"><img :title="`${props.flag1} ${props.flag2}`" style="image-rendering: pixelated;" :src="`https://badge.les.bi/88x31/${props.flag1}/${props.flag2}/${props.clip}/${props.overlay}.${props.svg ? 'svg' : 'png'}`"></a>
+</template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+</script>
+<template>
+    <span v-bind="$attrs">
+        <slot></slot>
+    </span>
+</template>
+
+<style lang="css" scoped>
+/* https://github.com/krusynth/blink-polyfill */
+span {
+    animation: 4s linear infinite html4_blink;
+}
+@keyframes html4_blink {
+    0% {
+        visibility: visible;
+    }
+    50% {
+        visibility: hidden;
+    }
+    100% {
+        visibility: hidden;
+    }
+}
+</style>

src/lib/badges.ts

@@ -0,0 +1,4 @@
+// badges from 88x31.nl
+const globbed = import.meta.glob('@/assets/badges/*', {query: '?url', eager: true});
+
+export const badgeUrls = globbed as Record<string, { default: string }>;

src/lib/markdown/components.tsx

@@ -4,18 +4,22 @@ import 'bluesky-profile-feed-embed';
 
 import type { MDXComponents } from './mdx-types';
 
+import type { Slot } from 'vue';
+import type { JSX } from 'vue/jsx-runtime';
+
 import AtImg from '@/components/custom-elements/AtImg.ce.vue';
 import AtLink from '@/components/custom-elements/AtLink.ce.vue';
 import AtAnchor from '@/components/custom-elements/AtAnchor.ce.vue';
 import AtWebStylesheet from '@/components/custom-elements/AtWebStylesheet.ce.vue';
 import OmitVanillaCss from '@/components/custom-elements/OmitVanillaCss.ce.vue';
 import AtStyle from '@/components/custom-elements/AtStyle.ce.vue';
 import AtWebTitle from '@/components/custom-elements/AtWebTitle.ce.vue';
-import { type Slot } from 'vue';
-import type { JSX } from 'vue/jsx-runtime';
 import WebampPlayer from '@/components/custom-elements/WebampPlayer.ce.vue';
 import SpotifyPlayer from '@/components/custom-elements/SpotifyPlayer.vue';
 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';
 
 type Props = Record<string, any>;
 
@@ -66,5 +70,8 @@ export const components: MDXComponents = {
     Webamp: WebampPlayer,
     Spotify: SpotifyPlayer,
     Oneko: OnekoKitty,
+    blink: NewBlink,
+    LesbiBadge: LesbiBadge,
+    Badge: EightyEightThirtyOneBadge,
     ...(extraComponents as unknown as MDXComponents)
 };