You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.4 KiB
73 lines
2.4 KiB
<template>
|
|
<div class="project-docs">
|
|
<div class="back-button">
|
|
<NuxtLink :to="`${navigationItems.find((item: any) => item.finder === 'projects')?.path}/${route.params.id}`" class="back-link">
|
|
<span>←</span> {{ TEXTS.COMMON.BACK_TO_PROJECTS }}
|
|
</NuxtLink>
|
|
</div>
|
|
<div class="docs-header">
|
|
<h1>Documentation - {{ project?.title || 'Projet non trouvé' }}</h1>
|
|
</div>
|
|
|
|
<div v-if="project" class="docs-container">
|
|
<aside class="docs-sidebar">
|
|
<nav class="docs-nav">
|
|
<ul>
|
|
<li v-for="(resource, index) in project.resources" :key="index">
|
|
<a :href="`#${resource.title.toLowerCase().replace(/\s+/g, '-')}`" class="nav-link">
|
|
{{ resource.title }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="docs-content">
|
|
<div v-for="(resource, index) in project.resources" :key="index" :id="resource.title.toLowerCase().replace(/\s+/g, '-')" class="docs-section">
|
|
<h2>{{ resource.title }}</h2>
|
|
<p>{{ resource.description }}</p>
|
|
<div class="resource-actions">
|
|
<a v-if="resource.link" :href="resource.link" target="_blank" rel="noopener" class="resource-link">
|
|
<span class="link-icon">📄</span>
|
|
Accéder à la ressource
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<div v-else class="error">
|
|
<h2>{{ TEXTS.COMMON.ERROR.NOT_FOUND }}</h2>
|
|
<p>{{ TEXTS.COMMON.ERROR.PROJECT_NOT_FOUND }}</p>
|
|
<NuxtLink :to="navigationItems.find((item: any) => item.finder === 'projects')?.path" class="back-link">
|
|
{{ TEXTS.COMMON.BACK_TO_PROJECTS }}
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { projects } from '~/config/projects'
|
|
import { TEXTS } from '~/config/content'
|
|
import { navigationItems } from '~/config/navigation'
|
|
const route = useRoute()
|
|
console.log(route.params.id)
|
|
const project = computed(() => {
|
|
const projectId = Number(route.params.id)
|
|
if (isNaN(projectId)) return null
|
|
return projects.find(item => item.id === projectId)
|
|
})
|
|
|
|
onMounted(() => {
|
|
const hash = window.location.hash
|
|
if (hash) {
|
|
const element = document.querySelector(hash)
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: 'smooth' })
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import '~/assets/css/pages/docs.css';
|
|
</style> |