wip: clean up - tufte style on editor -d

Author: arpowers

@fiction/admin/el/ElSavingSignal.vue

@@ -7,7 +7,6 @@ import XDropDown from '@fiction/ui/common/XDropDown.vue'
 const {
   isDirty,
   navItems = [],
-  changeType,
   classes = {},
 } = defineProps<{
   isDirty: boolean
@@ -16,9 +15,7 @@ const {
   classes?: { text?: string, icon?: string }
 }>()
 
-const isOpen = vue.ref(false)
-
-const savedText = vue.computed(() => changeType === 'draft' ? 'Draft Saved' : 'Changes Saved')
+const savedText = vue.computed(() => 'Saved')
 
 const statusText = vue.computed(() => isDirty ? 'Saving' : savedText.value)
 const statusColor = vue.computed(() => isDirty ? 'fill-orange-500' : 'fill-green-500')

@fiction/cards/CardNavLink.vue

@@ -67,7 +67,7 @@ const hoverClass = 'group-hover/nav-link:text-theme-500 dark:group-hover/nav-lin
         v-else-if="item.icon"
         :media="item.icon"
         :class="hoverClass"
-        class="size-[1.1em]"
+        class="size-[1.05em]"
       />
 
       <!-- Text Content -->
@@ -98,9 +98,14 @@ const hoverClass = 'group-hover/nav-link:text-theme-500 dark:group-hover/nav-lin
         v-html="item.label"
       />
 
-      <!-- External Link Indicator -->
+      <XIcon
+        v-if="item.iconAfter"
+        :media="item.iconAfter"
+        :class="hoverClass"
+        class="size-[1.05em]"
+      />
       <span
-        v-if="item.target === '_blank'"
+        v-else-if="item.target === '_blank'"
         class="block opacity-30 group-hover:translate-x-[1px] group-hover:-translate-y-[1px] transition-all"
       >
         <span class="block i-heroicons-arrow-up-right-20-solid" />

@fiction/cards/content-profile/ElCard.vue

@@ -9,6 +9,7 @@ import EffectFitText from '@fiction/ui/effect/EffectFitText.vue'
 import EffectGlare from '@fiction/ui/effect/EffectGlare.vue'
 import XIcon from '@fiction/ui/media/XIcon.vue'
 import XMedia from '@fiction/ui/media/XMedia.vue'
+import XEntry from '@fiction/ui/prose/XEntry.vue'
 import CardText from '../CardText.vue'
 import CardActionArea from '../el/CardActionArea.vue'
 import NavDots from '../el/NavDots.vue'
@@ -101,13 +102,15 @@ const hoverClasses = 'group-hover/item:text-primary-600 dark:group-hover/item:te
                 <CardText :card tag="span" path="title" animate="rise" />
               </EffectFitText>
 
-              <CardText
-                tag="div"
-                :card
-                class="sub-heading mt-6 prose prose-lg md:prose-2xl leading-normal dark:prose-invert prose-theme"
-                path="content"
-                animate="rise"
-              />
+              <XEntry class="text-lg sm:text-xl">
+                <CardText
+                  tag="div"
+                  :card
+                  class="sub-heading mt-6"
+                  path="content"
+                  animate="rise"
+                />
+              </XEntry>
             </div>
 
             <div class="list space-y-4 text-base xl:text-lg @container">

@fiction/site/plugin-builder/SiteEditor.vue

@@ -131,28 +131,16 @@ async function resetToPublished() {
         <template #headerLeft>
           <div>
             <CardButton
-              respond="icon:sm"
               :card
-              theme="primary"
-              design="outline"
+              size="sm"
               href="/sites"
-              icon="i-tabler-arrow-left"
-            >
-              Back
-            </CardButton>
+              icon="i-tabler-home"
+            />
           </div>
-          <div class="flex space-x-1 font-medium">
-            <CardLink
-              :card
-              class="whitespace-nowrap  dark:text-theme-300 pr-1 hover:text-primary-500 dark:hover:text-theme-0 hidden lg:flex items-center gap-1"
-              href="/"
-            >
-              <span class="i-tabler-browser-plus text-xl inline-block dark:text-theme-500" />
-              <span>Edit Site</span>
-              <span class="i-tabler-slash text-xl dark:text-theme-500" />
-            </CardLink>
-
-            <XText v-if="site" v-model="site.title.value" :is-editable="true" class="hover:bg-theme-100 hover:dark:bg-theme-700 whitespace-nowrap" />
+          <div class="flex space-x-1 font-semibold items-center">
+            <XText title="Site Title" v-if="site" v-model="site.title.value" :is-editable="true" class="hover:bg-theme-100 hover:dark:bg-theme-700 whitespace-nowrap" />
+            <span class="i-tabler-slash text-xl dark:text-theme-500" />
+            <XText title="Page Title" v-if="site.currentPage.value.slug.value" v-model="site.currentPage.value.title.value" :is-editable="false" class="whitespace-nowrap" />
           </div>
         </template>
         <template v-if="site" #headerRight>
@@ -185,8 +173,9 @@ async function resetToPublished() {
                 :card
                 theme="default"
                 target="_blank"
-                size="md"
+                size="sm"
                 icon="i-tabler-eye"
+                design="ghost"
                 icon-after="i-tabler-chevron-down"
                 data-test-id="viewSiteButton"
               >
@@ -199,12 +188,12 @@ async function resetToPublished() {
             :card
             theme="primary"
             :loading="sending === 'save'"
-            icon="i-tabler-arrow-big-up-lines"
-            size="md"
+            icon="i-tabler-upload"
+            size="sm"
             data-test-id="publishChangesButton"
             @click.prevent="save()"
           >
-            Publish Changes
+            Publish
           </CardButton>
           <CardButton
             v-else
@@ -213,11 +202,11 @@ async function resetToPublished() {
             design="outline"
             :loading="sending === 'save'"
             icon="i-tabler-check"
-            size="md"
+            size="sm"
             data-test-id="changesPublishedButton"
             @click.prevent="save()"
           >
-            Changes Published
+            Published
           </CardButton>
         </template>
         <template #default>

@fiction/site/plugin-builder/SiteEditorFrame.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
+import type { NavListItem } from '@fiction/core'
 import type { FrameUtility } from '@fiction/ui/frame/elBrowserFrameUtil'
 import type { Site } from '../site'
 import type { FramePostMessageList } from '../utils/frame'
 import { toLabel, vue } from '@fiction/core'
 import XButton from '@fiction/ui/buttons/XButton.vue'
 import ElTooltip from '@fiction/ui/common/ElTooltip.vue'
+import XDropDown from '@fiction/ui/common/XDropDown.vue'
 import ElBrowserFrameDevice from '@fiction/ui/frame/ElBrowserFrameDevice.vue'
 
 const props = defineProps({
@@ -13,16 +15,20 @@ const props = defineProps({
 
 const frameRef = vue.ref<HTMLElement & { frameUtility: FrameUtility<FramePostMessageList> }>() // Reference to the child component
 
-const deviceModes = [
-  { name: 'desktop', icon: 'i-tabler-device-desktop', wrapClass: 'w-full' },
-  { name: 'mobile', icon: 'i-tabler-device-mobile', wrapClass: 'w-[60%] max-w-sm' },
-  { name: 'tablet', icon: 'i-tabler-device-ipad', wrapClass: 'w-[85%] max-w-xl' },
-  { name: 'landscape', icon: 'i-tabler-device-ipad-horizontal', wrapClass: 'w-[90%] max-w-2xl' },
-] as const
+type DeviceModeKeys = 'desktop' | 'mobile' | 'tablet' | 'landscape'
+const activeDeviceModeKey = vue.ref<DeviceMode>('desktop')
+const deviceModes: (NavListItem & { wrapClass: string, value: DeviceModeKeys })[] = [
+  { value: 'desktop', icon: { class: 'i-tabler-device-desktop' }, wrapClass: 'w-full' },
+  { value: 'mobile', icon: { class: 'i-tabler-device-mobile' }, wrapClass: 'w-[60%] max-w-sm' },
+  { value: 'tablet', icon: { class: 'i-tabler-device-ipad' }, wrapClass: 'w-[85%] max-w-xl' },
+  { value: 'landscape', icon: { class: 'i-tabler-device-ipad-horizontal' }, wrapClass: 'w-[90%] max-w-2xl' },
+]
 
-type DeviceMode = typeof deviceModes[number]['name']
-const activeDeviceMode = vue.ref<DeviceMode>('desktop')
-const deviceModeConfig = vue.computed(() => deviceModes.find(mode => mode.name === activeDeviceMode.value))
+const activeDeviceMode = vue.computed(() => deviceModes.find(mode => mode.value === activeDeviceModeKey.value) || deviceModes[0])
+
+type DeviceMode = typeof deviceModes[number]['value']
+
+const deviceModeConfig = vue.computed(() => deviceModes.find(mode => mode.value === activeDeviceModeKey.value))
 
 // Watch for changes in frameRef and assign frameUtility
 vue.watch(
@@ -60,18 +66,21 @@ function toggleEditingStyle() {
       class=" flex justify-between space-x-2 "
     >
       <div class="flex items-center gap-2">
-        <XButton
-          v-for="(mode, i) in deviceModes"
-          :key="i"
-          rounding="full"
-          respond="icon:xl"
-          :theme="activeDeviceMode === mode.name ? 'theme' : 'default'"
-          :icon="mode.icon"
-          size="xs"
-          @click.stop="activeDeviceMode = mode.name"
+
+        <XDropDown
+          mode="click"
+          :items="deviceModes"
+          v-model="activeDeviceModeKey"
         >
-          {{ toLabel(mode.name) }}
-        </XButton>
+          <XButton
+            rounding="full"
+            :icon="activeDeviceMode?.icon"
+            size="xs"
+            icon-after="i-tabler-chevron-down"
+          >
+            {{ toLabel(activeDeviceMode?.value) }}
+          </XButton>
+        </XDropDown>
       </div>
 
       <div class="flex items-center gap-2">
@@ -142,7 +151,7 @@ function toggleEditingStyle() {
     <div v-if="site" class="min-h-0 h-full relative mx-auto pb-10 flex flex-col" :class="deviceModeConfig?.wrapClass">
       <ElBrowserFrameDevice
         ref="frameRef"
-        :device-mode="activeDeviceMode"
+        :device-mode="activeDeviceModeKey"
         class="rounded-md shadow-lg border border-theme-200"
         :url="site.frame.frameUrl.value"
         frame-id="site-builder-iframe"

@fiction/site/plugin-builder/tools/tools.ts

@@ -70,7 +70,7 @@ export function getTools(args: { site: Site }) {
       toolId: 'history',
       title: 'Revision History',
       icon: { class: 'i-tabler-history' },
-      isPrimary: 'bottom',
+      isPrimary: true,
       el: vue.defineAsyncComponent(async () => import('./ToolPageHistory.vue')),
     },
     {

@fiction/themes/fiction/config.ts

@@ -299,10 +299,17 @@ export async function getConfig(args: {
                   { label: 'Demos', href: '/demos' },
                 ],
                 utility: [
+                  {
+                    label: 'Sign In',
+                    href: '/app/auth?_reload=1',
+                    onAuthState: 'loggedOut',
+                    iconAfter: { class: 'i-tabler-arrow-right' },
+                  },
                   {
                     label: 'Account',
                     href: '/app?_reload=1',
                     variant: 'avatar',
+                    onAuthState: 'loggedIn',
                     list: {
                       items: [
                         { label: 'Sign In', href: '/app/auth?_reload=1', onAuthState: 'loggedOut' },

@fiction/ui/common/XDropDown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { NavListItem, StandardSize } from '@fiction/core'
-import { onResetUi, resetUi, useService, vue } from '@fiction/core'
+import { normList, onResetUi, resetUi, useService, vue } from '@fiction/core'
 import { twMerge } from 'tailwind-merge'
 import TransitionSlide from '../anim/TransitionSlide.vue'
 import XIcon from '../media/XIcon.vue'
@@ -13,14 +13,16 @@ const {
   uiSize = 'md',
   classes = {},
 } = defineProps<{
-  items: NavListItem[]
+  items?: NavListItem[]
   placement?: 'top' | 'bottom' | 'left' | 'right'
   dropdownAlignment?: 'start' | 'center' | 'end'
   mode?: 'hover' | 'click'
   uiSize?: StandardSize
   classes?: { wrapper?: string, width?: string }
 }>()
 
+const normalizedItems = vue.computed(() => normList(items))
+
 const emit = defineEmits<{
   (event: 'update:model-value', value: string): void
 }>()
@@ -30,7 +32,7 @@ const isHovered = vue.ref(false)
 const dropdownRef = vue.ref<HTMLDivElement | null>(null)
 const service = useService()
 
-const visibleItems = vue.computed(() => items.filter(item => !item.isHidden))
+const visibleItems = vue.computed(() => normalizedItems.value.filter(item => !item.isHidden))
 
 function toggleClicked() {
   resetUi({ scope: 'inputs', cause: 'dropdown', trigger: 'elementClick' })
@@ -148,7 +150,7 @@ const wrapperClass = vue.computed(() => {
 
     <TransitionSlide>
       <div
-        v-if="isActive && items?.length"
+        v-if="isActive && normalizedItems?.length"
         :class="menuClasses"
         role="menu"
         aria-orientation="vertical"

@fiction/ui/entry.less

@@ -234,9 +234,7 @@
     line-height: 1.75;
 
     li {
-      @apply my-2 pl-2;
-
-
+      @apply pl-2;
     }
     p {
       margin: 0;

@fiction/ui/lib/systemIcons.ts

@@ -84,6 +84,8 @@ export const recommendedIcons = [
   { class: 'i-tabler-asterisk', category: 'interface' },
   { class: 'i-tabler-north-star', category: 'interface' },
   { class: 'i-tabler-world', category: 'interface' },
+  { class: 'i-tabler-login', category: 'interface' },
+  { class: 'i-tabler-logout', category: 'interface' },
 
   // Content - Text editing and content management
   { class: 'i-tabler-file', category: 'content' },

docs/.vitepress/config.ts

@@ -52,26 +52,6 @@ export default defineConfig({
             { text: 'Introduction', link: '/guide/introduction' },
           ],
         },
-        {
-          text: 'Essentials',
-          items: [
-            { text: 'Editing Your Site', link: '/guide/editing' },
-          ],
-        },
-      ],
-      '/developer/': [
-        {
-          text: 'Getting Started',
-          items: [
-            { text: 'Introduction', link: '/developer/introduction' },
-          ],
-        },
-        {
-          text: 'Essentials',
-          items: [
-            { text: 'Create a Site', link: '/developer/site' },
-          ],
-        },
       ],
       '/resources/': [
         {