rimelight-components 2.0.98 → 2.1.1

package/README.md

@@ -51,56 +51,55 @@ Thank you for considering contributing to Rimelight Components. Here are a few w
 
 ## Local Development
 
-  ```bash [bun]
-  # Install dependencies
-  bun install
-  ```
-  
-  ```bash [bun]
-  # Generate type stubs
-  bun dev:prepare
-  ```
-  
-  ```bash [bun]
-  # Develop with the playground
-  bun dev
-  ```
-  
-  ```bash [bun]
-  # Build the playground
-  bun dev:build
-  ```
-  
-  ```bash [bun]
-  # Run Typecheck
-  bun typecheck
-  ```
-  
-  ```bash [bun]
-  # Run Oxlint
-  bun lint
-  ```
-  
-  ```bash [bun]
-  # Run Prettier
-  bun format
-  ```
-  
-  ```bash [bun]
-  # Run Vitest
-  npm run test
-  ```
-  
-  ```bash [bun]
-  # Release new version
-  bun release
-  ```
+```bash [bun]
+# Install dependencies
+bun install
+```
+
+```bash [bun]
+# Generate type stubs
+bun dev:prepare
+```
+
+```bash [bun]
+# Develop with the playground
+bun dev
+```
+
+```bash [bun]
+# Build the playground
+bun dev:build
+```
+
+```bash [bun]
+# Run Typecheck
+bun typecheck
+```
+
+```bash [bun]
+# Run Oxlint
+bun lint
+```
+
+```bash [bun]
+# Run Prettier
+bun format
+```
+
+```bash [bun]
+# Run Vitest
+npm run test
+```
+
+```bash [bun]
+# Release new version
+bun release
+```
 
 Learn more in the [development guide](https://ui.nuxt.com/docs/getting-started/contribution#local-development).
 
 ## Sponshorship
 
-
 ## License
 
 Licensed under the [MIT license](https://github.com/nuxt/ui/blob/v4/LICENSE.md).

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.0.98",
+  "version": "2.1.1",
   "docs": "https://rimelight.com/tools/rimelight-components",
   "configKey": "rimelightComponents",
   "compatibility": {

package/dist/module.mjs

@@ -4,7 +4,7 @@ import { readdirSync } from 'node:fs';
 import { basename } from 'node:path';
 
 const name = "rimelight-components";
-const version = "2.0.98";
+const version = "2.1.1";
 const homepage = "https://rimelight.com/tools/rimelight-components";
 
 const defaultOptions = {
@@ -197,20 +197,21 @@ const module$1 = defineNuxtModule().with({
     addImportsDir(resolve("./runtime/composables"));
     addImportsDir(resolve("./runtime/types"));
     addImportsDir(resolve("./runtime/utils"));
+    addServerImportsDir(resolve("./runtime/composables"));
     addServerImportsDir(resolve("./runtime/types"));
     addServerImportsDir(resolve("./runtime/utils"));
-    const blockRendererFiles = readdirSync(
-      resolve("./runtime/components/blocks/renderer")
-    ).filter((name2) => name2.endsWith(".vue"));
+    const blockRendererFiles = readdirSync(resolve("./runtime/components/blocks/renderer")).filter(
+      (name2) => name2.endsWith(".vue")
+    );
     const blockRendererNames = blockRendererFiles.map((file) => {
       const baseName = basename(file, ".vue");
       return baseName.replace(/Renderer$/, "");
     });
     const blockRendererTemplate = addBlockMapTemplates(blockRendererNames);
     nuxt.options.alias["#build/rimelight-block-renderer-map"] = blockRendererTemplate.dst;
-    const blockEditorFiles = readdirSync(
-      resolve("./runtime/components/blocks/editor")
-    ).filter((name2) => name2.endsWith(".vue"));
+    const blockEditorFiles = readdirSync(resolve("./runtime/components/blocks/editor")).filter(
+      (name2) => name2.endsWith(".vue")
+    );
     const blockEditorNames = blockEditorFiles.map((file) => {
       const baseName = basename(file, ".vue");
       return baseName.replace(/Editor$/, "");

package/dist/runtime/app.config.d.ts

@@ -1,7 +1,9 @@
-declare module '#build/app.config' {
-  import type { AppConfig } from '@nuxt/schema'
+declare module "#build/app.config" {
+  import type { AppConfig } from "@nuxt/schema"
+  import type { PageType, PageDefinition } from "~/src/runtime/types"
 
   interface RimelightComponentsConfig {
+    pageDefinitions?: Partial<Record<PageType, PageDefinition>>
     [key: string]: any
   }
 

package/dist/runtime/components/app/ScrollToTop.vue

@@ -81,9 +81,7 @@ const durationInSeconds = computed(() => `${props.duration}s`);
               class="gauge-primary-stroke opacity-100"
             />
           </svg>
-          <div
-            class="absolute inset-0 flex items-center justify-center text-center"
-          >
+          <div class="absolute inset-0 flex items-center justify-center text-center">
             <UIcon name="lucide:arrow-up" class="size-6 text-white" />
           </div>
         </div>

package/dist/runtime/components/blocks/Block.vue

@@ -55,9 +55,7 @@ const items = ref([
 
 <template>
   <div class="group relative pl-12 flex flex-row gap-xs">
-    <div
-      class="top-0 left-0 z-10 opacity-0 transition-opacity group-hover:opacity-100"
-    >
+    <div class="top-0 left-0 z-10 opacity-0 transition-opacity group-hover:opacity-100">
       <UDropdownMenu :items="items">
         <UButton icon="lucide:grip-vertical" variant="ghost" color="neutral" />
       </UDropdownMenu>

package/dist/runtime/components/blocks/TextRenderer.vue

@@ -3,7 +3,7 @@ import {
 } from "../../types";
 import TextNode from "../nodes/TextNode.vue";
 import LinkNode from "../nodes/LinkNode.vue";
-import MentionNode from "../nodes/MentionNode.vue";
+import PageMention from "../page/PageMention.vue";
 defineOptions({
   name: "TextRenderer"
 });
@@ -17,7 +17,7 @@ const getTag = (item) => {
     case "link":
       return LinkNode;
     case "mention":
-      return MentionNode;
+      return PageMention;
     default:
       return TextNode;
   }
@@ -41,9 +41,7 @@ const getProps = (item) => {
     case "mention": {
       const mentionProps = item.props;
       return {
-        href: mentionProps.href,
-        target: mentionProps.target,
-        content: mentionProps.content
+        pageId: mentionProps.pageId
       };
     }
     default:

package/dist/runtime/components/blocks/editor/ImageBlockEditor.vue

@@ -90,9 +90,7 @@ watch(fileToUpload, (newFile) => {
           <template #default>
             <span class="text-xs text-muted">Alt</span>
           </template>
-          <template #content>
-            The text description for the image used by screen readers.
-          </template>
+          <template #content> The text description for the image used by screen readers. </template>
         </UTooltip>
       </template>
     </UInput>
@@ -109,9 +107,7 @@ watch(fileToUpload, (newFile) => {
           <template #default>
             <span class="text-xs text-muted">Caption</span>
           </template>
-          <template #content>
-            The text description for the image used by screen readers.
-          </template>
+          <template #content> The text description for the image used by screen readers. </template>
         </UTooltip>
       </template>
     </UTextarea>

package/dist/runtime/components/blocks/editor/ParagraphBlockEditor.vue

@@ -45,15 +45,14 @@ onMounted(() => {
 </script>
 
 <template>
-    <div
-        ref="editorRef"
-        contenteditable="true"
-        @blur="commitContentOnBlur"
-        :class="[
+  <div
+    ref="editorRef"
+    contenteditable="true"
+    @blur="commitContentOnBlur"
+    :class="[
   'p-2 outline-none min-h-6',
   'focus:ring-2 focus:ring-blue-500 rounded-md transition duration-150',
   'text-base'
 ]"
-    >
-    </div>
+  ></div>
 </template>

package/dist/runtime/components/blocks/editor/SectionBlockEditor.d.vue.ts

@@ -1,4 +1,4 @@
-import type { SectionBlockProps } from "../../../types/index.js";
+import { type SectionBlockProps } from "../../../types/index.js";
 type __VLS_Props = SectionBlockProps & {
     id: string;
 };

package/dist/runtime/components/blocks/editor/SectionBlockEditor.vue

@@ -1,5 +1,7 @@
 <script setup>
 import { inject, ref, computed, watch } from "vue";
+import {} from "../../../types";
+import {} from "@nuxt/ui/components/Select.vue";
 const { level, title, description, children, id } = defineProps({
   level: { type: Number, required: true },
   title: { type: String, required: true },
@@ -66,32 +68,27 @@ watch(
 
 <template>
   <div class="flex flex-col gap-sm">
-    <RCSection
-      :level="localLevel"
-      :title="localTitle"
-      :description="description"
-      is-editing
-    >
+    <RCSection :level="localLevel" :title="localTitle" :description="description" is-editing>
       <template #title>
         <div class="flex flex-row gap-xs">
-        <USelect
-          v-model="localLevel"
-          :items="levelItems"
-          value-key="value"
-          label-key="label"
-          variant="ghost"
-          placeholder="Select Heading Level"
-          size="sm"
-          color="neutral"
-        />
-        <UInput
-          :model-value="localTitle"
-          variant="ghost"
-          placeholder="Section Title..."
-          @input="updateLocalTitle"
-          @blur="commitTitleOnBlur"
-          class="w-full"
-        />
+          <USelect
+            v-model="localLevel"
+            :items="levelItems"
+            value-key="value"
+            label-key="label"
+            variant="ghost"
+            placeholder="Select Heading Level"
+            size="sm"
+            color="neutral"
+          />
+          <UInput
+            :model-value="localTitle"
+            variant="ghost"
+            placeholder="Section Title..."
+            @input="updateLocalTitle"
+            @blur="commitTitleOnBlur"
+            class="w-full"
+          />
         </div>
       </template>
       <template #description>

package/dist/runtime/components/blocks/editor/SectionBlockEditor.vue.d.ts

@@ -1,4 +1,4 @@
-import type { SectionBlockProps } from "../../../types/index.js";
+import { type SectionBlockProps } from "../../../types/index.js";
 type __VLS_Props = SectionBlockProps & {
     id: string;
 };

package/dist/runtime/components/blocks/renderer/SectionBlockRenderer.vue

@@ -12,12 +12,7 @@ const hasChildren = computed(() => children && children.length > 0);
 </script>
 
 <template>
-  <RCSection
-    :level="level"
-    :title="title"
-    :description="description"
-    :id="headingId"
-  >
+  <RCSection :level="level" :title="title" :description="description" :id="headingId">
     <RCBlockViewRenderer v-if="hasChildren" :blocks="children" />
   </RCSection>
 </template>

package/dist/runtime/components/blocks/renderer/TestBlockRenderer.vue

@@ -5,5 +5,5 @@ const { text } = defineProps({
 </script>
 
 <template>
-  <RCTest :text="text"/>
+  <RCTest :text="text" />
 </template>

package/dist/runtime/components/content/Callout.vue

@@ -39,10 +39,7 @@ const tooltip = computed(() => config.value.tooltip);
       </template>
       <template #close>
         <UTooltip v-if="tooltip" :text="t(tooltip)">
-          <UIcon
-            name="lucide:circle-question-mark"
-            class="pointer-events-auto size-5"
-          />
+          <UIcon name="lucide:circle-question-mark" class="pointer-events-auto size-5" />
         </UTooltip>
       </template>
     </UAlert>

package/dist/runtime/components/content/Section.vue

@@ -115,28 +115,26 @@ const fullSectionUrl = computed(() => {
 
 <template>
   <section :id="sectionId" :class="sectionSlot()" v-bind="$attrs">
-    <component
-      :id="sectionId"
-      :is="`h${level}`"
-      :class="headingSlot()"
-    >
+    <component :id="sectionId" :is="`h${level}`" :class="headingSlot()">
       <NuxtLink
         v-if="!isEditing"
         :href="`#${sectionId}`"
         :class="linkSlot()"
-        class="group lg:-ms-2 lg:ps-2"
+        class="group relative lg:-ms-2 lg:ps-2 inline-block w-full"
       >
         <ClientOnly>
           <UButton
             variant="soft"
             color="primary"
-            leading-icon="lucide:link"
+            icon="i-lucide-link"
             :to="`#${sectionId}`"
-            class="absolute top-1 -ms-8 hidden rounded-md p-1 opacity-0 transition group-hover:opacity-100 group-focus:opacity-100 lg:flex"
-            @click="copyToClipboard(fullSectionUrl)"
+            class="absolute top-1/2 -translate-y-1/2 -ms-8 hidden rounded-md p-1 opacity-0 transition group-hover:opacity-100 group-focus:opacity-100 lg:flex"
+            @click.prevent="copyToClipboard(fullSectionUrl)"
           />
           <template #fallback>
-            <div class="absolute top-1 -ms-8 w-6 h-6 rounded-md p-1 opacity-0 transition lg:flex" />
+            <div
+              class="absolute top-1/2 -translate-y-1/2 -ms-8 w-6 h-6 rounded-md p-1 opacity-0 transition lg:flex"
+            />
           </template>
         </ClientOnly>
         <slot name="title">{{ title }}</slot>

package/dist/runtime/components/page/PageEditor.d.vue.ts

@@ -1,8 +1,8 @@
 import type { Page } from "../../types/index.js";
-interface Props {
+interface PageEditorProps {
     isSaving: boolean;
 }
-type __VLS_Props = Props;
+type __VLS_Props = PageEditorProps;
 type __VLS_ModelProps = {
     modelValue: Page;
 };

package/dist/runtime/components/page/PageEditor.vue

@@ -1,8 +1,12 @@
 <script setup>
 import { ref, computed, useTemplateRef } from "vue";
 import { usePageEditor } from "../../composables";
+import { getLocalizedContent } from "../../utils";
 const page = defineModel({ type: null, ...{ required: true } });
 const { undo, redo, canUndo, canRedo, captureSnapshot } = usePageEditor(page);
+const { isSaving } = defineProps({
+  isSaving: { type: Boolean, required: true }
+});
 const emit = defineEmits(["save"]);
 const handleSave = () => {
   const dataToPersist = JSON.parse(JSON.stringify(page.value));
@@ -14,9 +18,6 @@ defineExpose({
   canUndo,
   canRedo
 });
-defineProps({
-  isSaving: { type: Boolean, required: true }
-});
 const editorRef = useTemplateRef("editor");
 const showPreview = ref(false);
 const editorPanelClass = computed(() => ({
@@ -71,33 +72,70 @@ const editorPanelClass = computed(() => ({
       </div>
     </template>
   </UHeader>
-
-  <div class="mt-24 grid gap-xl" :class="showPreview ? 'grid-cols-2' : 'grid-cols-1'">
-    <UPage :class="editorPanelClass">
-      <template #default>
-        <UPageHeader />
+  <UContainer
+    class="mt-24 grid gap-xl"
+    :class="showPreview ? 'grid-cols-2 max-w-full' : 'grid-cols-1'"
+  >
+    <div :class="editorPanelClass" class="grid grid-cols-1 lg:grid-cols-4 gap-8">
+      <UPageAside class="order-1 lg:order-2 lg:col-span-1">
+        <RCPagePropertiesEditor v-model="page" />
+      </UPageAside>
+      <div class="order-2 lg:order-1 lg:col-span-3">
+        <UPageHeader
+          :title="getLocalizedContent(page.title, 'en')"
+          :description="getLocalizedContent(page.description, 'en') ?? ''"
+        />
         <RCBlockEditor
           ref="editor"
           v-model="page.blocks"
           :class="editorPanelClass"
           @mutation="captureSnapshot"
         />
-      </template>
-      <template #right>
-        <UPageAside>
-          <RCPagePropertiesEditor v-model="page" />
-        </UPageAside>
-      </template>
-    </UPage>
-    <UPage v-if="showPreview">
-      <template #default>
-        <RCBlockViewRenderer :blocks="page.blocks" />
-      </template>
-      <template #right>
-        <UPageAside>
-          <RCPagePropertiesRenderer v-model="page"/>
-        </UPageAside>
-      </template>
-    </UPage>
-  </div>
+        <div class="flex flex-col gap-xs text-xs">
+          <h6>Metadata</h6>
+          <span>Page ID: {{ page.id }}</span>
+          <span
+            >Created At:
+            <NuxtTime
+              :datetime="page.created_at ?? ''"
+              year="numeric"
+              month="numeric"
+              day="numeric"
+              hour="numeric"
+              minute="numeric"
+              second="numeric"
+              time-zone-name="short"
+          /></span>
+          <span
+            >Posted At:
+            <NuxtTime
+              :datetime="page.created_at ?? ''"
+              year="numeric"
+              month="numeric"
+              day="numeric"
+              hour="numeric"
+              minute="numeric"
+              second="numeric"
+              time-zone-name="short"
+          /></span>
+          <span
+            >Updated At:
+            <NuxtTime
+              :datetime="page.created_at ?? ''"
+              year="numeric"
+              month="numeric"
+              day="numeric"
+              hour="numeric"
+              minute="numeric"
+              second="numeric"
+              time-zone-name="short"
+          /></span>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-row gap-xl">
+      <USeparator orientation="vertical" />
+      <RCPageRenderer v-if="showPreview" v-model="page" />
+    </div>
+  </UContainer>
 </template>

package/dist/runtime/components/page/PageEditor.vue.d.ts

@@ -1,8 +1,8 @@
 import type { Page } from "../../types/index.js";
-interface Props {
+interface PageEditorProps {
     isSaving: boolean;
 }
-type __VLS_Props = Props;
+type __VLS_Props = PageEditorProps;
 type __VLS_ModelProps = {
     modelValue: Page;
 };

package/dist/runtime/components/page/PageMention.d.vue.ts

@@ -0,0 +1,6 @@
+interface PageMentionProps {
+    pageId: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<PageMentionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageMentionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/page/PageMention.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { inject } from "vue";
+import { getLocalizedContent } from "../../utils";
+import { useI18n } from "vue-i18n";
+import {} from "../../types";
+import { useAsyncData } from "#imports";
+const { pageId } = defineProps({
+  pageId: { type: String, required: true }
+});
+const { locale } = useI18n();
+const resolver = inject("page-resolver");
+const { data: linkedPage, status } = await useAsyncData(`page-mention-${pageId}`, async () => {
+  if (!resolver) {
+    console.warn("RCPageMention: No page resolver provided in RCPageRenderer");
+    return null;
+  }
+  return await resolver(pageId);
+}, {
+  lazy: true,
+  server: false,
+  watch: [() => pageId]
+});
+</script>
+
+<template>
+  <NuxtLink
+    v-if="linkedPage"
+    :to="`/${linkedPage.slug}`"
+    class="inline-flex items-baseline gap-1 align-middle hover:text-primary transition-colors font-medium text-inherit"
+  >
+    <NuxtImg
+      v-if="linkedPage.icon?.src"
+      :src="linkedPage.icon.src"
+      :alt="linkedPage.icon.alt"
+      class="w-4 h-4 rounded-full object-cover shrink-0"
+    />
+    <span class="truncate font-medium">
+      {{ getLocalizedContent(linkedPage.title, locale) }}
+    </span>
+  </NuxtLink>
+  <USkeleton v-else-if="status === 'pending'" class="h-3 w-24" />
+</template>

package/dist/runtime/components/page/PageMention.vue.d.ts

@@ -0,0 +1,6 @@
+interface PageMentionProps {
+    pageId: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<PageMentionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageMentionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/page/PagePropertiesEditor.d.vue.ts

@@ -1,4 +1,4 @@
-import { type Page } from '../../types/index.js';
+import { type Page } from "../../types/index.js";
 type __VLS_ModelProps = {
     modelValue: Page;
 };