Merge branch 'main' into chore/better-content-integration

Author: farnabaz

src/app/src/assets/css/main.css

@@ -2,7 +2,6 @@
 @import "@nuxt/ui";
 @plugin "@tailwindcss/typography";
 
-@source "@farnabaz/mdc-editor";
 @source "../../**";
 
 @source inline('ring-orange-200 hover:ring-orange-300 hover:dark:ring-orange-700');

src/app/src/components/AppFooter.vue

@@ -6,6 +6,14 @@ const { ui, host } = useStudio()
 
 const uiConfig = ui.config
 const user = host.user.get()
+
+const showTechnicalMode = computed({
+  get: () => uiConfig.value.showTechnicalMode,
+  set: (value) => {
+    uiConfig.value.showTechnicalMode = value
+  },
+})
+
 const repositoryUrl = computed(() => {
   switch (host.repository.provider) {
     case 'github':
@@ -18,14 +26,17 @@ const repositoryUrl = computed(() => {
 })
 
 const userMenuItems = computed(() => [
-  repositoryUrl.value
-    ? [{
+  [{
+    slot: 'view-mode' as const,
+  }, repositoryUrl.value
+    ? {
         label: `${host.repository.owner}/${host.repository.repo}`,
         icon: 'i-simple-icons:github',
         to: repositoryUrl.value,
         target: '_blank',
-      }]
-    : [],
+      }
+    : undefined
+  ].filter(Boolean),
   [{
     label: 'Sign out',
     icon: 'i-lucide-log-out',
@@ -35,7 +46,7 @@ const userMenuItems = computed(() => [
       })
     },
   }],
-].filter(group => group.length > 0))
+])
 </script>
 
 <template>
@@ -47,6 +58,19 @@ const userMenuItems = computed(() => [
       :items="userMenuItems"
       :ui="{ content: 'w-full' }"
     >
+      <template #view-mode>
+        <div
+          class="w-full"
+          @click.stop
+        >
+          <USwitch
+            v-model="showTechnicalMode"
+            label="Technical view"
+            size="xs"
+            :ui="{ root: 'w-full flex-row-reverse justify-between', wrapper: 'ms-0' }"
+          />
+        </div>
+      </template>
       <UButton
         color="neutral"
         variant="ghost"

src/app/src/composables/useUI.ts

@@ -1,10 +1,10 @@
 import { createSharedComposable, useStorage } from '@vueuse/core'
 import { ref, watch } from 'vue'
-import { type StudioHost, StudioFeature } from '../types'
+import { type StudioHost, StudioFeature, type UIConfig } from '../types'
 import { useSidebar } from './useSidebar'
 
 export const useUI = createSharedComposable((host: StudioHost) => {
-  const config = useStorage('studio-ui-config', { syncEditorAndRoute: true })
+  const config = useStorage<UIConfig>('studio-ui-config', { syncEditorAndRoute: true, showTechnicalMode: false })
   const sidebar = useSidebar()
   const isOpen = ref(false)
   const currentPanel = ref<StudioFeature | null>(null)

src/app/src/main.ts

@@ -7,6 +7,7 @@ import styles from './assets/css/main.css?inline'
 
 import { createHead } from '@unhead/vue/client'
 import { generateColors, tailwindColors } from './utils/colors'
+import { refineTailwindStyles } from './utils/styles.ts'
 
 import App from './app.vue'
 import Content from './pages/content.vue'
@@ -53,9 +54,7 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
       styles: [
         tailwindColors,
         generateColors(),
-        styles.replace(/:root/g, ':host')
-          .replace(/([^-])html/g, '$1:host')
-          .replace(/([^-])body/g, '$1:host'),
+        refineTailwindStyles(styles),
       ],
     },
   ) as VueElementConstructor

src/app/src/pages/content.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { useStudio } from '../composables/useStudio'
 import { StudioItemActionId, TreeStatus } from '../types'
 
-const { documentTree, context } = useStudio()
+const { documentTree, context, ui } = useStudio()
 
 const folderTree = computed(() => (documentTree.current.value || []).filter(f => f.type === 'directory'))
 const fileTree = computed(() => (documentTree.current.value || []).filter(f => f.type === 'file'))
@@ -35,6 +35,12 @@ const showFileForm = computed(() => {
       :draft-item="documentTree.draft.current.value!"
       :read-only="documentTree.currentItem.value.status === TreeStatus.Deleted"
     />
+    <div
+      v-else-if="ui.config.value.showTechnicalMode"
+      class="flex flex-col p-4"
+    >
+      Developer tree
+    </div>
     <div
       v-else
       class="flex flex-col p-4"

src/app/src/types/index.ts

@@ -15,6 +15,7 @@ export * from './git'
 export * from './context'
 export * from './content'
 export * from './component'
+export * from './ui'
 
 export interface StudioHost {
   meta: {

src/app/src/types/ui.ts

@@ -0,0 +1,4 @@
+export interface UIConfig {
+  syncEditorAndRoute: boolean
+  showTechnicalMode: boolean
+}

src/app/src/utils/styles.ts

@@ -0,0 +1,34 @@
+export function refineTailwindStyles(styles: string) {
+  styles = convertPropertyToVar(styles)
+  // Replace :root, html, and body with :host
+  styles = styles.replace(/:root/g, ':host')
+    .replace(/([^-])html/g, '$1:host')
+    .replace(/([^-])body/g, '$1:host')
+
+  return styles
+}
+
+export function convertPropertyToVar(cssText: string) {
+  const propertyRegex = /@property\s+(--[\w-]+)\s*\{([^}]*)\}/g
+  const cssVars: string[] = []
+
+  const result = cssText.replace(propertyRegex, (_, propertyName, propertyContent) => {
+    const initialValueMatch = propertyContent.match(/initial-value\s*:([^;]+)(;|$)/)
+
+    if (initialValueMatch) {
+      let initialValue = initialValueMatch[1].trim()
+
+      if (propertyContent.includes('<length>') && !initialValue.endsWith('px')) {
+        initialValue = `${initialValue}px`
+      }
+
+      cssVars.push(`${propertyName}: ${initialValue};`)
+    }
+
+    return ''
+  })
+
+  const cssVarsBlock = cssVars.length > 0 ? `:host {\n  ${cssVars.join('\n  ')}\n}` : ''
+
+  return cssVarsBlock + (cssVarsBlock && result.trim() ? '\n\n' : '') + result.trim()
+}

src/module/src/runtime/utils/content.ts

@@ -3,7 +3,7 @@ import { parseMarkdown } from '@nuxtjs/mdc/runtime'
 import { omit } from './object'
 import type { DatabaseItem } from 'nuxt-studio/app'
 import { compressTree } from '@nuxt/content/runtime'
-import { ContentFileExtension } from '../../../../app/src/types'
+import { ContentFileExtension } from 'nuxt-studio/app'
 import { parseFrontMatter } from 'remark-mdc'
 import { destr } from 'destr'
 import { visit } from 'unist-util-visit'

src/module/src/runtime/utils/serialization.ts

@@ -6,7 +6,7 @@ export const yamlToJson = (data: string) => {
       new yaml.Type('tag:yaml.org,2002:timestamp', {
         kind: 'scalar',
         resolve: () => false,
-        construct: data => data,
+        construct: (data: unknown) => data,
       }),
     ],
   })