[WEBSITE] Sidebar

app.vue

@@ -1,6 +1,9 @@
 <script setup>
-  import Roadmap from './components/Roadmap.vue'
-  import HeroSection from './layouts/hero.vue'
+  import { useRoute } from 'vue-router'
+
+  const route = useRoute()
+  const nodeId = route.params.slug
+
   const title = 'Hoja de Ruta Definitiva para Aprender Rust: Desde Principiante hasta Experto'
   const description = `
 ¿Estás listo para dominar uno de los lenguajes de programación más potentes y eficientes? Nuestra hoja de ruta te guiará paso a paso en tu viaje de aprendizaje de Rust, desde los conceptos básicos hasta las técnicas avanzadas. Diseñada para principiantes y desarrolladores experimentados, esta guía exhaustiva te ayudará a construir una sólida base en Rust y a aprovechar al máximo su rendimiento, seguridad y concurrencia.
@@ -9,7 +12,7 @@ Ya sea que desees desarrollar aplicaciones de sistemas, videojuegos, criptomoned
     `
   useHead({
     bodyAttrs: {
-      class: 'bg-orange-200 dark:bg-[#131313]/90 w-screen min-h-screen bg-center bg-fixed dark:bg-kaku dark:bg-cover dark:bg-blend-darken dark:backdrop-blur-xl overflow-x-hidden dark:text-[#e2cea9]'
+      class: 'bg-orange-200 dark:bg-[#131313]/90 w-screen min-h-screen bg-center bg-fixed dark:bg-kaku dark:bg-cover dark:bg-blend-darken overflow-x-hidden dark:text-[#e2cea9]' + ((nodeId && !route.query.fromClick) ? ' overflow-hidden' : '')
     }
   })
 
@@ -31,7 +34,5 @@ Ya sea que desees desarrollar aplicaciones de sistemas, videojuegos, criptomoned
 </script>
 
 <template>
-  <Header />
-  <HeroSection />
-  <Roadmap />
+  <NuxtPage />
 </template>

components/NodeCard.vue

@@ -1,5 +1,6 @@
 <script setup>
   import Card from './Card.vue'
+  import { useRouter } from 'vue-router'
   import { useVueFlow } from '@vue-flow/core'
   import { Handle, Position } from '@vue-flow/core'
 
@@ -11,6 +12,7 @@
       bottom: Position.Bottom,
   }
 
+  const router = useRouter()
   const props = defineProps({
     data: Object,
     withoutIcon: {
@@ -30,6 +32,7 @@
   // TODO: open side content
   onNodeClick(({ node }) => {
     if (ignoreTypes.includes(node.type)) return
+    router.push({ path: `/${node.id}`, query: { fromClick: true } })
     console.log(node)
   })
   // TODO: animate all path if have event.node.data.topicLevel.eq()

components/Roadmap.vue

@@ -12,7 +12,7 @@
   const roadmapNodes = ref([
     { id: 'topics', type: 'topics', position: { x: 0, y: -150 }, data: { topicLevel: 'start' } },
     ...data.value.map(({ title, _path, data: { position, width, sourcePosition, targetPosition, topicLevel, type, align } }) => (
-    { id: _path.substring(1).replaceAll('/', "-").replaceAll('_', ''), type, position, width, label: title, data: { align, topicLevel, sourcePosition, targetPosition } }
+    { id: _path.substring(1), type, position, width, label: title, data: { align, topicLevel, sourcePosition, targetPosition } }
   ))
   ])
 
@@ -41,7 +41,10 @@
     :apply-changes="false"
     :nodes-draggable="false"
     :edges-updatable="false"
-    class="min-h-screen min-w-full"
+    :min-zoom="0.65"
+    :zoom-on-scroll="false"
+    :prevent-scrolling="false"
+    class="min-h-[220vh] min-w-full"
     >
     <MiniMap
       pannable zoomable

index.vue

@@ -0,0 +1,10 @@
+<template>
+  <Header />
+  <HeroSection />
+  <Roadmap />
+</template>
+
+<script setup>
+import Roadmap from '@/components/Roadmap.vue'
+import HeroSection from '@/layouts/hero.vue'
+</script>

nuxt.config.ts

@@ -29,4 +29,15 @@ Ya sea que desees desarrollar aplicaciones de sistemas, videojuegos, criptomoned
       ]
     }
   },
+  content: {
+    highlight: {
+      langs: ['c', 'cpp', 'rs', 'java', 'js', 'cs', 'asm', 'toml', 'console', 'sh', 'bash', "vim"],
+      // Themes from https://github.com/shikijs/textmate-grammars-themes/tree/main/packages/tm-themes
+      theme: {
+        default: 'vitesse-dark',
+        dark: 'vitesse-dark',
+        sepia: 'monokai'
+      }
+    },
+  },
 })

package.json

@@ -21,6 +21,7 @@
   "devDependencies": {
     "@nuxtjs/seo": "^2.0.0-rc.10",
     "@nuxtjs/tailwindcss": "^6.12.0",
+    "@tailwindcss/typography": "^0.5.13",
     "@unocss/nuxt": "^0.60.0"
   },
   "trustedDependencies": [

pages/[...slug].vue

@@ -0,0 +1,61 @@
+<template>
+  <Header />
+  <HeroSection />
+  <Roadmap />
+  <Teleport to="body">
+  <div v-if="content" :class="['fixed top-0 right-0 h-screen', sidebarClass]">
+    <div
+        class="flex overflow-y-auto overflow-x-none h-full w-full flex-col items-center bg-white p-4 focus:outline-0 sm:p-6"
+    >
+      <div class="w-full flex flex-row justify-between text-black px-4 pb-2">
+        <span class="hover:cursor-pointer" @click="closeSidebar">X</span>
+      </div>
+      <ContentRenderer :key="content._id" :value="content">
+        <ContentRendererMarkdown class="prose flex flex-col w-full m:max-w-[800px] sm:max-w-[600px]" tag="article" :value="content" />
+        <div class="flex flex-col items-start w-full m:max-w-[800px] sm:max-w-[600px]">
+          <h4 id="related-content" class="text-black mb-3">
+            <a href="#related-content">Contenido Extra Relacionado</a>
+          </h4>
+          <a
+            class="gap-x-2 mb-1"
+            v-for="(link, i) in content.data.externalLinks"
+            :key="i"
+            :href="link.link"
+            >
+              <Card moreTransparency >
+                <strong v-if="link.english">[Contenido en Ingles]</strong>
+                {{link.name}}
+              </Card>
+          </a>
+        </div>
+      </ContentRenderer>
+    </div>
+  </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router'
+import { ref, onMounted } from 'vue'
+import Roadmap from '@/components/Roadmap.vue'
+import HeroSection from '@/layouts/hero.vue'
+// import DropDown from '@/components/dropdown/container.vue'
+
+const route = useRoute()
+const nodeId = route.params.slug
+const showSidebar = ref(true)
+const content = ref(null)
+
+onMounted(async () => {
+  if (!nodeId) return
+  const contentResult = await queryContent(nodeId.join("/")).findOne()
+  content.value = contentResult
+  showSidebar.value = contentResult && (route.query.fromClick || false)
+})
+
+const closeSidebar = () => {
+  content.value = null;
+  document.body.classList.remove('overflow-hidden')
+}
+const sidebarClass = computed(() => showSidebar.value ? 'w-2/4' : 'w-screen')
+</script>

tailwind.config.js

@@ -1,5 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
   theme: {
     fontFamily: {
       "alfa-slab": ["Alfa Slab One", "sans-serif"],