New logo, starting account handling

app.vue

@@ -22,23 +22,32 @@ onMounted(() => {
     <div class="site-nav-bar">
       <div>
         <div class="clickable-icon">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-menu">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                <line x1="4" y1="12" x2="20" y2="12"></line>
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                <line x1="4" y1="6" x2="20" y2="6"></line>
+            class="svg-icon lucide-menu">
-                <line x1="4" y1="18" x2="20" y2="18"></line>
+            <line x1="4" y1="12" x2="20" y2="12"></line>
-            </svg>
+            <line x1="4" y1="6" x2="20" y2="6"></line>
+            <line x1="4" y1="18" x2="20" y2="18"></line>
+          </svg>
         </div>
-        <div class="gap-3">
+        <div class="gap-3 flex align-stretch">
-          <NuxtLink class="site-nav-bar-text" aria-label="Accueil" :href="'/'" ><img src="" /></NuxtLink>
+          <NuxtLink class="site-nav-bar-text" aria-label="Accueil" :href="'/'">
-          <NuxtLink class="site-nav-bar-text" aria-label="Systeme" :href="'/explorer'" :class="{'mod-active': $route.path.startsWith('/explorer')}">Systeme</NuxtLink>
+            <ThemeIcon icon="logo" :width=40 :height=40 />
-          <NuxtLink class="site-nav-bar-text" aria-label="Outils" :href="'/tools'"  :class="{'mod-active': $route.path.startsWith('/tools')}">Outils</NuxtLink>
+          </NuxtLink>
+          <NuxtLink class="site-nav-bar-text" aria-label="Systeme" :href="'/explorer'"
+            :class="{'mod-active': $route.path.startsWith('/explorer')}">Systeme</NuxtLink>
+          <NuxtLink class="site-nav-bar-text" aria-label="Outils" :href="'/tools'"
+            :class="{'mod-active': $route.path.startsWith('/tools')}">Outils</NuxtLink>
         </div>
       </div>
       <div>
         <SearchView />
       </div>
-      <div class="ps-1">
+      <div class="ps-1 gap-1 flex align-center">
         <ThemeSwitch />
+        <div class="site-login">
+          <ThemeIcon icon="user" :width=32 :height=32 />
+        </div>
       </div>
     </div>
     <div class="site-body">

assets/common.css

@@ -71,4 +71,33 @@
 {
     margin-left: 1.2em;
     margin-right: 1.2em;
+}
+
+html.dark-mode .dark-hidden {
+    display: none;
+}
+
+html.dark-mode .dark-block {
+    display: block;
+}
+
+html.light-mode .light-hidden {
+    display: none;
+}
+
+html.light-mode .light-block {
+    display: block;
+}
+
+.flex {
+    display: flex;
+}
+.align-baseline {
+    align-items: baseline;
+}
+.align-center {
+    align-items: center;
+}
+.align-stretch {
+    align-items: stretch;
 }

assets/global.css

@@ -4079,15 +4079,6 @@ body {
     color: var(--text-muted);
 }
 
-.not-found-image {
-    display: block;
-    background-image: url(/public/images/10a4c7dfa70cedab4d48.png);
-    width: 103px;
-    height: 132px;
-    background-size: 103px 132px;
-    margin-bottom: 12px;
-}
-
 /* Outline view */
 .outline-view-outer {
     width: 100%;
@@ -4293,6 +4284,9 @@ body {
     font-weight: var(--site-name-weight);
     flex: 1 0 0;
     text-decoration: none;
+    position: relative;
+    display: flex;
+    align-items: center;
 }
 
 .site-nav-bar-text:hover {
@@ -4984,7 +4978,20 @@ body {
     justify-content: end;
 }
 
-.site-nav-bar-text.mod-active {
+.site-nav-bar-text.mod-active:after {
-    padding-bottom: .5em;
+    content: "";
-    border-bottom: 3px solid var(--nav-item-border-color-active);
+    background-color: var(--nav-item-border-color-active);
+    height: 3px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: calc(-0.5em + 2px);
+}
+
+.site-login {
+    cursor: pointer;
+}
+
+.site-login:hover {
+    opacity: 0.7;
 }

components/ThemeIcon.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+interface Prop
+{
+    icon: string;
+    width: number;
+    height: number;
+}
+defineProps<Prop>();
+</script>
+
+<template>
+    <NuxtImg :src="`icons/${icon}.light.svg`" class="dark-hidden light-block" :width="width" :height="height" />
+    <NuxtImg :src="`icons/${icon}.dark.svg`" class="dark-block light-hidden" :width="width" :height="height" />
+</template>

components/canvas/CanvasRenderer.client.vue

@@ -213,7 +213,7 @@ function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r:
 </script>
 
 <template>
-    <div ref="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart.prevent="onTouchStart" @dragstart.prevent=""
+    <div ref="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart.passive="onTouchStart" @dragstart.prevent=""
         class="canvas-wrapper node-insert-event mod-zoomed-out"
         :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
         <div class="canvas-controls" style="z-index: 999;">

components/content/prose/ProseA.vue

@@ -2,7 +2,7 @@
 import type { MarkdownRoot, ParsedContent, TocLink } from '@nuxt/content/dist/runtime/types';
 import type { Canvas, CanvasContent } from '~/types/canvas';
 
-import { stringifyParsedURL, type ParsedURL } from 'ufo';
+import { stringifyParsedURL } from 'ufo';
 
 interface ParsedContentExtended extends Omit<ParsedContent, 'body'> {
     body: MarkdownRoot | CanvasContent | null;
@@ -33,7 +33,6 @@ function flatten(val: TocLink[]): TocLink[] {
     return val.flatMap ? val?.flatMap((e: TocLink) => e.children ? [e, ...flatten(e.children)] : e) : val;
 }
 function handleResult(result: ParsedContentExtended, tag: boolean = false) {
-    console.log();
     loading.value = false;
     let body: MarkdownRoot | CanvasContent | null = JSON.parse(JSON.stringify(result.body));
 
@@ -119,18 +118,23 @@ function hidePreview(e: Event) {
 
 <template >
     <template v-if="href !== ''">
-        <a @mouseenter="(e) => showPreview(e, true)" @mouseleave="hidePreview" v-bind="$attrs" :href="stringifyParsedURL({ host: '/explorer', pathname: (content?._path ?? href) + (anchor ? '/' + anchor.substring(1) : ''), hash: '', search: '' })" :target="target">
+        <a @mouseenter="(e) => showPreview(e, true)" @mouseleave="hidePreview" v-bind="$attrs"
+            :href="stringifyParsedURL({ host: '/explorer', pathname: (content?._path ?? href) + (isTag && anchor ? '/' + anchor.substring(1) : ''), hash: !isTag ? anchor : '', search: '' })"
+            :target="target">
             <slot></slot>
         </a>
         <Teleport to="body" v-if="hovered && (loading || !!content)">
-            <div class="popover hover-popover is-loaded" :style="pos" @mouseenter="(e) => showPreview(e, false)" @mouseleave="hidePreview">
+            <div class="popover hover-popover is-loaded" :style="pos" @mouseenter="(e) => showPreview(e, false)"
+                @mouseleave="hidePreview">
                 <template v-if="!!content">
-                    <div class="markdown-embed" :class="{'tag-embed': isTag}" v-if="content._type == 'markdown' && ((content as ParsedContent)?.body?.children?.length ?? 0) > 0">
+                    <div class="markdown-embed" :class="{'tag-embed': isTag}"
+                        v-if="content._type == 'markdown' && ((content as ParsedContent)?.body?.children?.length ?? 0) > 0">
                         <div class="markdown-embed-content">
                             <div class="markdown-preview-view markdown-rendered node-insert-event hide-title">
-                                <div class="markdown-preview-sizer markdown-preview-section" style="padding-bottom: 0px;">
+                                <div class="markdown-preview-sizer markdown-preview-section"
+                                    style="padding-bottom: 0px;">
                                     <h1 v-if="content?.title && !isTag">{{ content?.title }}</h1>
-                                    <ContentRenderer :key="content._id" :value="content"/>
+                                    <ContentRenderer :key="content._id" :value="content" />
                                 </div>
                             </div>
                         </div>
@@ -142,17 +146,21 @@ function hidePreview(e: Event) {
                         <div class="not-found-container">
                             <div class="not-found-image"></div>
                             <div class="not-found-title">Impossible de prévisualiser</div>
-                            <div v-if="!isTag" class="not-found-description">Cliquez sur le lien pour accéder au contenu</div>
+                            <div v-if="!isTag" class="not-found-description">Cliquez sur le lien pour accéder au contenu
+                            </div>
                         </div>
                     </div>
                 </template>
                 <div v-else class="preload" style="text-align:center">
                     <svg style="width:50px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-                        <path style="transform-origin:50px 50px;animation:1s linear infinite rotate" fill="currentColor" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"/>
+                        <path style="transform-origin:50px 50px;animation:1s linear infinite rotate" fill="currentColor"
+                            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50" />
                     </svg>
                 </div>
             </div>
         </Teleport>
     </template>
-    <a v-bind="$attrs" v-else><slot></slot></a>
+    <a v-bind="$attrs" v-else>
+        <slot></slot>
+    </a>
 </template>

components/explorer/NavigationLink.vue

@@ -1,11 +1,6 @@
 <script setup lang="ts">
-interface NavItem {
+import type { NavItem } from '@nuxt/content';
-    title: string
+
-    _path: string
-    _id?: string
-    _draft?: boolean
-    children?: NavItem[]
-}
 interface Props {
     link: NavItem;
 }

nuxt.config.ts

@@ -2,7 +2,7 @@
 import CanvasModule from './transformer/canvas/module'
 
 export default defineNuxtConfig({
-  modules: [CanvasModule, "@nuxt/content", "@nuxtjs/color-mode"],
+  modules: [CanvasModule, "@nuxt/content", "@nuxtjs/color-mode", "@nuxt/image"],
 
   components: [
     {

package.json

@@ -1,5 +1,5 @@
 {
-  "devDependencies": { "@nuxt/content": "^2.13.2", "@nuxtjs/color-mode": "^3.4.2", "nuxt": "^3.12.4", "vue": "^3.4.34", "vue-router": "^4.4.0" },
+  "devDependencies": { "@nuxt/content": "^2.13.2", "@nuxt/image": "^1.7.0", "@nuxtjs/color-mode": "^3.4.2", "nuxt": "^3.12.4", "vue": "^3.4.34", "vue-router": "^4.4.0" },
   "patchedDependencies": {
     "unstorage@1.10.2": "patches/unstorage@1.10.2.patch",
     "@nuxt/content@2.13.2": "patches/@nuxt%2Fcontent@2.13.2.patch"

pages/index.vue

@@ -2,7 +2,8 @@
     <div class="site-body-center-column">
         <div class="render-container">
             <div class="not-found-container">
-                <div class="not-found-title">:)</div>
+                <ThemeIcon icon="logo" :width=128 :height=128 />
+                <div class="not-found-title">Coucou :) :) :) :)</div>
             </div>
         </div>
     </div>

public/icons/user.dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="white" d="M128 28a100 100 0 1 0 100 100A100.11 100.11 0 0 0 128 28M68.87 198.42a68 68 0 0 1 118.26 0a91.8 91.8 0 0 1-118.26 0m124.3-5.55a75.6 75.6 0 0 0-44.51-34a44 44 0 1 0-41.32 0a75.6 75.6 0 0 0-44.51 34a92 92 0 1 1 130.34 0M128 156a36 36 0 1 1 36-36a36 36 0 0 1-36 36"/></svg>

public/icons/user.light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="black" d="M128 28a100 100 0 1 0 100 100A100.11 100.11 0 0 0 128 28M68.87 198.42a68 68 0 0 1 118.26 0a91.8 91.8 0 0 1-118.26 0m124.3-5.55a75.6 75.6 0 0 0-44.51-34a44 44 0 1 0-41.32 0a75.6 75.6 0 0 0-44.51 34a92 92 0 1 1 130.34 0M128 156a36 36 0 1 1 36-36a36 36 0 0 1-36 36"/></svg>