Merge branch 'v2-unpress'

.eslintrc

 {
-  "extends": "@nuxtjs/eslint-config-typescript",
+  "root": true,
+  "extends": [ "@nuxt/eslint-config" ],
   "rules": {
-    "arrow-parens": [
-      "error",
-      "always"
+    "space-before-function-paren": [ "error", {
+        "anonymous": "never",
+        "named": "never",
+        "asyncArrow": "always"
+      }
+    ],
+    "comma-dangle": [ "error", {
+        "arrays": "only-multiline",
+        "objects": "only-multiline",
+        "imports": "never",
+        "exports": "never",
+        "functions": "never"
+      }
     ]
   }
-}
+}
\ No newline at end of file

.markdownlint.yaml

@@ -77,7 +77,7 @@ MD021: true
 # MD022/blanks-around-headings : Headings should be surrounded by blank lines : https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md022.md
 MD022:
   # Blank lines above heading
-  lines_above: 1
+  lines_above: 0
   # Blank lines below heading
   lines_below: 0
 

.npmrc

 auto-install-peers=true
-shamefully-hoist=true
+shamefully-hoist=true
\ No newline at end of file
+
+@unpress:registry=https://verdaccio.manutopik.fr
\ No newline at end of file

app.vue

@@ -17,4 +17,48 @@
 .prose p+ol {
   margin-top: -10px;
 }
+
+.unwrap-p>div>p,
+.prosemirror-flat-list>div>p {
+  margin: 0;
+  line-height: inherit;
+}
+
+.prosemirror-flat-list {
+  /* font-family: var(--typography-font-body);
+  list-style-type: var(--prose-ul-listStyleType) !important;
+  padding-inline-start: var(--prose-ul-paddingInlineStart);
+  margin: var(--prose-ul-margin) !important; */
+
+  font-family: var(--typography-font-body);
+  font-size: var(--prose-li-fontSize);
+  margin: var(--prose-li-margin) !important;
+  list-style-position: var(--prose-li-listStylePosition) !important;
+  padding-left: 1.25em !important;
+}
+
+.prosemirror-flat-list::before {
+  /* Unicode for bullet point */
+  content: "•";
+  position: absolute;
+  left: 0;
+  font-size: var(--prose-li-fontSize, 1.25rem);
+  color: var(--prose-ul-li-markerColor);
+}
+
+.EDITOR_CONTENT p a {
+  font-family: var(--typography-font-body);
+  font-weight: var(--prose-a-fontWeight);
+  -webkit-text-decoration: var(--prose-a-textDecoration);
+  text-decoration: var(--prose-a-textDecoration);
+  border-bottom-width: var(--prose-a-border-width);
+  border-bottom-style: var(--prose-a-border-style-static);
+  border-bottom-color: var(--prose-a-border-color-static);
+  padding-bottom: var(--prose-a-border-distance);
+  color: var(--prose-a-color-static);
+}
+
+.EDITOR_VIEWPORT {
+  overflow: visible !important;
+}
 </style>

components/content/Alert.vue

@@ -40,9 +40,9 @@ const iconName = computed(() => {
   <div class="alert" :class="[type]">
     <div class="alert-content-wrapper">
       <Icon v-if="icon" :name="iconName" class="alert-icon" />
-      <span class="content">
+      <div class="content">
         <ContentSlot :use="$slots.default" unwrap="p" />
-      </span>
+      </div>
     </div>
     <button v-if="closable" @click="emit('close')">
       <Icon name="tabler:x" />

components/content/AlertEditor.vue

+<script lang="ts" setup>
+import type { VueNodeViewProps } from 'prosekit/vue'
+
+const props = defineProps<VueNodeViewProps>()
+const { getComponentProps } = useMdcEditor()
+
+const options = ['info', 'success', 'warning', 'danger', 'primary', 'secondary', 'neutral']
+const { model, mdcAttrs } = getComponentProps(props, {
+  id: {
+    type: String,
+  },
+  class: {
+    type: String,
+  },
+  type: {
+    type: String,
+    default: 'neutral',
+    validator(value: string) {
+      return options.includes(value)
+    },
+  },
+  /**
+   * if false, no icon will be shown
+   * if true, the default icons will be shown
+   * if string, the custom icon will be shown
+   */
+  icon: {
+    type: [String, Boolean],
+    default: false
+  }
+})
+// console.log(model)
+onMounted(() => {
+  // console.log('mounted', model)
+})
+</script>
+
+<template>
+  <div relative>
+    <Alert :type="model.type" :icon="model.icon" :closable="model.closable">
+      <div :ref="props.contentRef" class="unwrap-p" />
+    </Alert>
+
+    <UiEditorDropdown absolute right-1 top-1 v-model="mdcAttrs.type" chevron tooltip="Type" :items="options">
+      <span class="font-mono text-sm capitalize mt-[-1px]">{{ mdcAttrs.type }}</span>
+    </UiEditorDropdown>
+  </div>
+</template>

components/content/CarteEditor.vue

+<script setup lang="ts">
+import { LMap, LTileLayer, LMarker } from '@vue-leaflet/vue-leaflet'
+import 'leaflet/dist/leaflet.css'
+
+import type { VueNodeViewProps } from 'prosekit/vue'
+// import type { EditorExtension } from '../prosekit/extensions'
+import { useEditor } from 'prosekit/vue'
+import { useMdcEditor } from '#imports'
+
+const { getComponentProps } = useMdcEditor()
+const props = defineProps<VueNodeViewProps>()
+
+const { model, original } = getComponentProps(props, {
+  lat: {
+    type: String,
+    default: "46.227638"
+  },
+  lng: {
+    type: String,
+    default: "2.213749"
+  },
+  zoom: {
+    type: String,
+    default: "6"
+  }
+})
+</script>
+
+<template>
+  <div class="relative">
+    TEST
+    <l-map :zoom="+model.zoom" :center="[+model.lat, +model.lng]">
+      <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
+      <!-- <l-marker :lat-lng="[+model.lat, +model.lng]" /> -->
+    </l-map>
+  </div>
+</template>
+
+<style scoped></style>

components/content/ContainerComponent.vue

+<script lang="ts" setup>
+const props = defineProps({
+  /**
+   * @values info, success, warning, danger, primary
+   */
+  type: {
+    type: String,
+    default: 'info',
+    // validator(value: string) {
+    //   return ['info', 'success', 'warning', 'danger', 'primary'].includes(value)
+    // }
+  },
+})
+
+defineSlots<{
+  default: string
+  foo: string
+  bar: string
+}>()
+
+// const slots = useSlots()
+// console.log('slot', slots)
+</script>
+
+<template>
+  <div :class="[type]">
+    <slot />
+
+    <div border-t>
+      <slot name="foo">
+        Empty foo
+      </slot>
+
+      <div border-t />
+
+      <slot name="bar">
+        Empty bar
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style style="postcss" scoped>
+.info {
+  --at-apply: "bg-blue-200 dark:bg-blue-900";
+}
+
+.success {
+  --at-apply: "bg-green-200 dark:bg-green-900";
+}
+
+.warning {
+  --at-apply: "bg-yellow-200 dark:bg-yellow-900";
+}
+
+.danger {
+  --at-apply: "bg-red-200 dark:bg-red-900";
+}
+
+.primary {
+  --at-apply: "bg-primary dark:bg-primary";
+}
+</style>

components/content/ContainerComponentEditor.vue

+<script lang="ts" setup>
+import type { VueNodeViewProps } from 'prosekit/vue'
+import { useMdcEditor } from '#imports'
+
+const { frontmatterKeys, getComponentProps } = useMdcEditor()
+const props = defineProps<VueNodeViewProps>()
+
+const options = ['info', 'success', 'warning', 'danger', 'primary']
+const { model, original } = getComponentProps(props, {
+  type: {
+    type: String,
+    default: 'info',
+    validator(value: string) {
+      return options.includes(value)
+    },
+  },
+  foo: {
+    type: String,
+    default: 'test',
+  },
+  qux: {
+    type: String,
+  },
+})
+</script>
+
+<template>
+  <div relative>
+    <ContainerComponent :type="model.type" data-testid="child">
+      <div :ref="props.contentRef" />
+      <!-- <template #foo>
+        <slot name="foo" />
+      </template>
+
+<template #bar>
+        <slot name="bar" />
+      </template> -->
+    </ContainerComponent>
+
+    <!-- <ComponentFixture :original :model /> -->
+
+    <select id="dropdown" v-model="original.type" contenteditable="false" absolute top-1 right-1>
+      <option v-for="key of options" :key="key" :value="key">
+        {{ key }}
+      </option>
+      <hr>
+      <option v-for="key of frontmatterKeys" :key="key" :value="':' + key">
+        {{ ':' + key }}
+      </option>
+      <option value="bad">
+        bad
+      </option>
+      <option value=":bad">
+        :bad
+      </option>
+    </select>
+  </div>
+</template>
+
+<style style="postcss" scoped></style>

components/content/GridEditor.vue

+<script lang="ts" setup>
+import type { VueNodeViewProps } from 'prosekit/vue'
+
+const props = defineProps<VueNodeViewProps>()
+const { getComponentProps } = useMdcEditor()
+
+const { model, mdcAttrs } = getComponentProps(props, {
+  id: {
+    type: String,
+  },
+  class: {
+    type: String,
+  },
+  collection: {
+    type: String,
+    required: true,
+  },
+  items: {
+    type: [String, Number],
+    default: 3,
+  },
+  fullWidth: {
+    type: Boolean,
+    default: false,
+  },
+})
+// console.log(model)
+onMounted(() => {
+  // console.log('mounted', model)
+})
+</script>
+
+<template>
+  <div relative>
+    <UiEditorHorizontalControls>
+      <UiEditorInput v-model="mdcAttrs.collection" placeholder="Chemin de la collection" label="Chemin" />
+      <UiEditorInput v-model="mdcAttrs.items" type="number" placeholder="" label="Nbr de colonnes"
+        input-classes="INPUT w-12!" />
+      <UiEditorSwitch label="Pleine largeur" @click="mdcAttrs.fullWidth = !mdcAttrs.fullWidth"
+        :pressed="mdcAttrs.fullWidth || false" />
+    </UiEditorHorizontalControls>
+
+    <Grid :collection="model.collection" :items="model.items" :fullwidth="model.fullWidth" contenteditable="false" />
+  </div>
+</template>

components/content/Liste.vue

@@ -44,9 +44,10 @@ const props = defineProps({
     default: undefined
   }
 })
-
 const filterList = (list) => list.filter(
-  (item) => !item._file.includes('index.md')
+  (item) => {
+    return !item._file.includes('index.md') && item._file !== props.path + '.md'
+  }
 )
 
 const sortedList = (list) => {

components/content/ListeEditor.vue

+<script lang="ts" setup>
+import type { VueNodeViewProps } from 'prosekit/vue'
+
+const props = defineProps<VueNodeViewProps>()
+const { getComponentProps } = useMdcEditor()
+
+const { model, mdcAttrs } = getComponentProps(props, {
+  id: {
+    type: String,
+  },
+  class: {
+    type: String,
+  },
+  path: {
+    type: String,
+  }
+})
+// console.log(model)
+onMounted(() => {
+  // console.log('mounted', model)
+})
+</script>
+
+<template>
+  <div relative>
+    <UiEditorHorizontalControls>
+      <UiEditorInput v-model="mdcAttrs.path" flex-1 :focus placeholder="Path to folder" label="Chemin" />
+    </UiEditorHorizontalControls>
+
+    <Liste :path="model.path" contenteditable="false" />
+  </div>
+</template>

components/content/ProseSection.vue

+<script setup lang="ts">
+// const props = defineProps({
+//   style: {
+//     type: [String, Object],
+//     default: '',
+//   },
+// })
+defineProps<{
+  color?: string
+}>()
+</script>
+
+<template>
+  <section :class="color">
+    <div>
+      <div>
+        <slot />
+      </div>
+      <div>
+        <slot name="section" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped></style>

components/content/ProseSectionEditor.vue

+<script setup lang="ts">
+import type { VueNodeViewProps } from 'prosekit/vue'
+import type { EditorExtension } from '../prosekit/extensions'
+import { useEditor } from 'prosekit/vue'
+import { useMdcEditor } from '#imports'
+
+const { getComponentProps } = useMdcEditor()
+const props = defineProps<VueNodeViewProps>()
+
+const { model, original } = getComponentProps(props, {
+  id: {
+    type: String,
+  },
+  class: {
+    type: String,
+    default: ''
+  },
+  color: {
+    type: String
+  }
+})
+
+const isClassActive = ref(false)
+
+function toggleClass(classList: string, className: string) {
+  if (!classList || !className) return '' // Check if classList and className are provided
+
+  // Split the classList string into an array of classes
+  const classes = classList.split(' ')
+
+  // Check if the class is already present
+  const index = classes.indexOf(className)
+  if (index !== -1) {
+    // If it is, remove it
+    classes.splice(index, 1)
+  } else {
+    // If not, add it
+    classes.push(className)
+  }
+
+  // Join the array back into a string and return it
+  return classes.join(' ')
+}
+
+function onSetColor(color: string) {
+  original.color = color
+}
+
+const isFullWidth = computed(() => original.class.includes('full-width'))
+const isBreakout = computed(() => original.class.includes('breakout'))
+const isDisabled = ref(false)
+
+function onSetBreakout() {
+  original.class = toggleClass(original.class, 'breakout')
+}
+function onSetFullWidth() {
+  original.class = toggleClass(original.class, 'full-width')
+}
+
+const colorPopoverOpen = ref(false)
+const closeColorPopover = () => {
+  colorPopoverOpen.value = false
+}
+const toggleColorPopover = () => {
+  colorPopoverOpen.value = !colorPopoverOpen.value
+}
+</script>
+
+<template>
+  <ProseSection v-bind="model" class="relative group">
+    <div class="absolute h-4 opacity-0 hover:opacity-100 transition-opacity top-[-1px] left-0 right-0 flex">
+      <div class="grow-1 border-t" />
+      <div class="SECTION_MENU -mt-3 mx-2 h-6 overflow-hidden shadow-none flex items-stretch">
+        <MdcEditorUIToggle :pressed="isBreakout" :disabled="isDisabled" class="TOGGLE_BUTTON py-1 min-w-10"
+          @click="onSetBreakout">
+          <svg width="24" height="12" viewBox="0 0 24 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <path opacity="0.3"
+              d="M18.6667 2C18.6667 2.35362 18.5262 2.69276 18.2761 2.94281C18.0261 3.19286 17.687 3.33333 17.3333 3.33333H6.66667C6.31304 3.33333 5.97391 3.19286 5.72386 2.94281C5.47381 2.69276 5.33333 2.35362 5.33333 2C5.33333 1.64638 5.47381 1.30724 5.72386 1.05719C5.97391 0.807142 6.31304 0.666666 6.66667 0.666666H17.3333C17.687 0.666666 18.0261 0.807142 18.2761 1.05719C18.5262 1.30724 18.6667 1.64638 18.6667 2ZM17.3333 14C17.687 14 18.0261 13.8595 18.2761 13.6095C18.5262 13.3594 18.6667 13.0203 18.6667 12.6667C18.6667 12.313 18.5262 11.9739 18.2761 11.7239C18.0261 11.4738 17.687 11.3333 17.3333 11.3333H6.66667C6.31304 11.3333 5.97391 11.4738 5.72386 11.7239C5.47381 11.9739 5.33333 12.313 5.33333 12.6667C5.33333 13.0203 5.47381 13.3594 5.72386 13.6095C5.97391 13.8595 6.31304 14 6.66667 14H17.3333Z"
+              fill="currentColor" />
+            <path fill-rule="evenodd" clip-rule="evenodd"
+              d="M24 7.33333C24 7.68695 23.8595 8.02609 23.6095 8.27614C23.3594 8.52619 23.0203 8.66667 22.6667 8.66667H1.33333C0.979711 8.66667 0.640573 8.52619 0.390524 8.27614C0.140476 8.02609 0 7.68695 0 7.33333C0 6.97971 0.140476 6.64057 0.390524 6.39052C0.640573 6.14047 0.979711 6 1.33333 6H22.6667C23.0203 6 23.3594 6.14047 23.6095 6.39052C23.8595 6.64057 24 6.97971 24 7.33333Z"
+              fill="currentColor" />
+          </svg>
+        </MdcEditorUIToggle>
+
+        <div class="border-l border-border" />
+
+        <MdcEditorUIToggle :pressed="isFullWidth" :disabled="isDisabled" class="TOGGLE_BUTTON py-1 min-w-10"
+          @click="onSetFullWidth">
+          <svg width="24" height="12" viewBox="0 0 24 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <rect width="24" height="12" fill="currentColor" fill-opacity="0.15" />
+            <path d="M16.2 3L19 6M19 6L16.2 9M19 6H5M7.8 3L5 6M5 6L7.8 9" stroke="currentColor" stroke-width="1.2"
+              stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </MdcEditorUIToggle>
+
+        <div class="border-l border-border" />
+
+        <!-- <MdcEditorUIToggle
+          :pressed="isFullWidth"
+          :disabled="isDisabled"
+          class="TOGGLE_BUTTON py-1 w-10"
+          @click="onSetFullWidth"
+        >
+          <div class="i-lucide-paintbrush text-sm" />
+        </MdcEditorUIToggle> -->
+        <MdcEditorUIDropdown :open="colorPopoverOpen" :on-close="closeColorPopover" :positioning="{
+    onEscapeKeyDown: () => {
+      console.log()
+    }
+  }">
+          <MdcEditorUIToggle :pressed="original.class.includes('bg-primary')" :disabled="isDisabled"
+            class="TOGGLE_BUTTON py-1 min-w-10" @click="toggleColorPopover">
+            <div class="i-lucide-paintbrush text-sm" />
+          </MdcEditorUIToggle>
+
+          <template #menu>
+            <label>Couleur de fond :</label>
+            <div class="flex gap-2">
+              <MdcEditorUIToggle v-for="color in ['bg-primary-500', 'bg-secondary-500', 'bg-gray-100']" :key="color"
+                :pressed="original.color === color"
+                classes="TOGGLE_BUTTON p-0 min-w-8 bg-transparent! data-[state=on]:ring-2" @click="onSetColor(color)">
+                <div class="h-4 w-8" :class="color" />
+              </MdcEditorUIToggle>
+            </div>
+          </template>
+        </MdcEditorUIDropdown>
+      </div>
+
+      <div class="grow-1 border-t" />
+    </div>
+
+    <div :ref="props.contentRef" />
+
+    <template #section>
+      <slot name="section" />
+    </template>
+  </ProseSection>
+</template>
+
+<style scoped></style>

components/content/XTable.vue

+<script lang="ts" setup>
+const client = useNuxtCms()
+
+const props = defineProps({
+  source: {
+    type: String,
+    required: true
+  }
+})
+
+// const { data } = await useAsyncData('test', () => queryContent(props.source).findOne())
+// console.log(data)
+
+const { branch, currentSource } = client.value.nuxt.payload.config.public.nuxtCms
+const base = `${currentSource}:${branch}`.replace('/', ':')
+const data = ref({ header: '' })
+setInterval(async () => {
+  data.value = await client.value.cms.storage.getItem(`websites/axiom-team-fr:main:content:menus.json`)
+}, 300)
+
+</script>
+
+<template>
+  <pre>{{ data.header }}</pre>
+</template>
+
+<style style="postcss" scoped></style>

components/content/XTableEditor.vue

+<script lang="ts" setup>
+import type { VueNodeViewProps } from 'prosekit/vue'
+import { useMdcEditor } from '#imports'
+
+const { frontmatterKeys, getComponentProps } = useMdcEditor()
+const props = defineProps<VueNodeViewProps>()
+
+const { model, original } = getComponentProps(props, {
+  source: {
+    type: String,
+  },
+})
+</script>
+
+<template>
+  <div>
+    <XTable :source="model.source" />
+  </div>
+</template>
+
+<style style="postcss" scoped></style>

components/layout/LayoutMenu.vue

 <script setup>
 const showMenu = ref(false)
-const menus = ref([])
 
 const props = defineProps({
   menu: {
@@ -9,12 +8,10 @@ const props = defineProps({
   },
 })
 
-const { data } = await useAsyncData('menus', () =>
-  queryContent('menus').findOne()
-)
-menus.value = data.value[props.menu]
+const { data } = await useAsyncData('menus', () => queryContent('menus').findOne())
+const menus = computed(() => data.value[props.menu])
 
-function onClick() {
+function openNetlifyCms() {
   window.open('/admin/', '_blank').focus();
 }
 </script>
@@ -43,8 +40,15 @@ function onClick() {
         </nuxt-link>
       </li>
       <li v-if="menu === 'footer'" class="flex items-center">
-        <a @click="onClick" class="menu-item cursor-pointer">
-          <span>Admin</span>
+        <CmsAuth>
+          <template #default="{ login }">
+            <a class="menu-item cursor-pointer" @click="login()">Admin</a>
+          </template>
+        </CmsAuth>
+      </li>
+      <li v-if="menu === 'footer'" class="flex items-center">
+        <a @click="openNetlifyCms()" class="menu-item cursor-pointer">
+          <span>Admin (old)</span>
         </a>
       </li>
     </ul>
@@ -53,6 +57,6 @@ function onClick() {
 
 <style lang="postcss" scoped>
 .menu-item {
-  @apply "flex items-center w-full py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-primary hover:bg-opacity-25 md:hover:bg-transparent md:border-0 md:hover:text-primary md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition";
+  --at-apply: "flex items-center w-full py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-primary hover:bg-opacity-25 md:hover:bg-transparent md:border-0 md:hover:text-primary md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition";
 }
 </style>

content/test.csv

+header1,header2
+value1,value2
+value3,value4
\ No newline at end of file