[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.data.path, 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).replaceAll('/', "-").replaceAll('_', ''), type, position, width, label: title, data: { align, topicLevel, sourcePosition, targetPosition, path: _path } }
   ))
   ])
 
@@ -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

@@ -15,12 +15,14 @@
     "@vue-flow/core": "^1.33.6",
     "@vue-flow/minimap": "^1.4.0",
     "nuxt": "^3.11.2",
+    "v-dropdown": "^3.0.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },
   "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,114 @@
+<template>
+  <Header />
+  <HeroSection />
+  <Roadmap />
+  <Teleport to="body">
+  <div v-if="content" :class="['fixed top-0 h-screen', sidebarClass]">
+    <div
+        class="prose dark:prose-invert max-w-full flex overflow-y-auto overflow-x-hidden h-full w-full flex-col items-center p-4 focus:outline-0 sm:p-6 bg-orange-50 dark:bg-gray-800"
+    >
+      <div class="w-full flex flex-row justify-between px-4 pb-2">
+        <Dropdown
+          ref="statusDropDown"
+          :customTriggerClass="['px-4 py-2 border-black border', status.toLowerCase()]"
+          :border="false"
+        >
+          <!-- trigger element -->
+          <template #trigger>
+            <button type="button" v-text="status"/>
+          </template>
+
+          <!-- contents display in dropdown -->
+          <ul class="flex flex-col bg-orange-100 dark:bg-gray-600">
+            <li
+              v-for="(s, i) in allStatus"
+              :key="'status-' + i"
+              @click="changeStatus(s)"
+              :class="['px-4 py-2 hover:cursor-pointer border-b border-black hover:bg-orange-50 dark:hover:bg-gray-500', s.toLowerCase()]"
+              v-text="s"
+            >
+            </li>
+          </ul>
+        </Dropdown>
+        <span class="hover:cursor-pointer" @click="closeSidebar">X</span>
+      </div>
+      <ContentRenderer :key="content._id" :value="content">
+        <ContentRendererMarkdown class="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="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.sort((a, b) => a.english - b.english)"
+            :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 lang="ts">
+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 'v-dropdown'
+
+const { $locally } = useNuxtApp()
+
+const allStatus = [ 'Pendiente', 'Leyendo', 'Completado', 'Omitir' ]
+const route = useRoute()
+const nodeId = route.params.slug
+const showSidebar = ref(true)
+const content = ref(null)
+const statusDropDown = ref(null)
+const status = ref($locally.get(nodeId) ?? 'Pendiente')
+
+
+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 ? 'right-0 w-screen lg:w-2/4' : 'w-screen')
+
+function changeStatus(val) {
+  if (val == status.value) return
+  if (!statusDropDown.value) return
+  status.value = val
+  $locally.set(nodeId, val)
+  statusDropDown.value.close()
+}
+</script>
+
+<style>
+.pendiente::before,
+.leyendo::before,
+.completado::before,
+.omitir::before {
+  content: '•';
+  margin-right: 5px;
+}
+
+.pendiente::before { color: var(--tw-text-gray-950); }
+.leyendo::before { color: var(--tw-text-orange-500); }
+.completado::before { color: var(--tw-text-green-600); }
+.omitir::before { color: var(--tw-text-slate-500); }
+
+.v-dropdown-container.v-dropdown-no-border { border-radius: 0px !important }
+</style>

plugins/locally.js

@@ -0,0 +1,15 @@
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      locally: {
+        get(item) {
+          return localStorage.getItem(item)
+        },
+
+        set(item, value) {
+          return localStorage.setItem(item, value)
+        }
+      }
+    }
+  }
+})

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"],