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.
86 lines
4.1 KiB
86 lines
4.1 KiB
<template>
|
|
<div class="project-detail">
|
|
<div class="back-button">
|
|
<NuxtLink :to="navigationItems.find((item: any) => item.finder === 'projects')?.path" class="back-link">
|
|
<span>←</span> {{ TEXTS.COMMON.BACK_TO_PROJECTS }}
|
|
</NuxtLink>
|
|
</div>
|
|
<div v-if="isLoading" class="loading">
|
|
<div class="loading-spinner"></div>
|
|
<p>{{ TEXTS.COMMON.LOADING }}</p>
|
|
</div>
|
|
<div v-else-if="currentProject" class="project-content">
|
|
<div class="project-header">
|
|
<h1>{{ currentProject.title }}</h1>
|
|
<div class="project-technologies">
|
|
<span v-for="tech in currentProject.technologies" :key="tech" class="tech-tag">
|
|
{{ tech }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="project-image">
|
|
<NuxtImg v-if="projectImage" :src="projectImage" :alt="currentProject.title" loading="lazy" @error="handleImageError" :placeholder="true" placeholder-class="image-placeholder" />
|
|
</div>
|
|
<div class="project-description">
|
|
<h2>{{ TEXTS.PROJECTS.DESCRIPTION.TITLE }}</h2>
|
|
<p>{{ currentProject.longDescription || currentProject.description }}</p>
|
|
</div>
|
|
<div class="project-features">
|
|
<h2>{{ TEXTS.PROJECTS.DESCRIPTION.FEATURES }}</h2>
|
|
<ul>
|
|
<li v-for="feature in currentProject.features" :key="feature">
|
|
{{ feature }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="project-resources">
|
|
<h2>{{ TEXTS.PROJECTS.DESCRIPTION.RESOURCES }}</h2>
|
|
<div class="resources-grid">
|
|
<a v-if="currentProject.github" :href="currentProject.github" target="_blank" rel="noopener noreferrer" class="resource-link">
|
|
<NuxtImg v-if="projectResources.github?.icon" :src="projectResources.github?.icon" :alt="TEXTS.PROJECTS.RESOURCES.GITHUB" class="resource-icon" @error="handleIconError" :placeholder="true" placeholder-class="icon-placeholder" />
|
|
<span>{{ TEXTS.PROJECTS.RESOURCES.GITHUB }}</span>
|
|
</a>
|
|
<a v-if="currentProject.demo" :href="currentProject.demo" target="_blank" rel="noopener noreferrer" class="resource-link" >
|
|
<NuxtImg v-if="projectResources.demo?.icon" :src="projectResources.demo?.icon" :alt="TEXTS.PROJECTS.RESOURCES.DEMO" class="resource-icon" @error="handleIconError" :placeholder="true" placeholder-class="icon-placeholder" />
|
|
<span>{{ TEXTS.PROJECTS.RESOURCES.DEMO }}</span>
|
|
</a>
|
|
<NuxtLink :to="`/projects/${currentProject.id}/docs`" class="resource-link">
|
|
<NuxtImg v-if="projectResources.documentation?.icon" :src="projectResources.documentation?.icon" :alt="TEXTS.PROJECTS.RESOURCES.DOCUMENTATION" class="resource-icon" @error="handleIconError" :placeholder="true" placeholder-class="icon-placeholder" />
|
|
<span>{{ TEXTS.PROJECTS.RESOURCES.DOCUMENTATION }}</span>
|
|
</NuxtLink>
|
|
<a v-if="currentProject.youtube" :href="currentProject.youtube" target="_blank" rel="noopener noreferrer" class="resource-link" >
|
|
<NuxtImg v-if="projectResources.youtube?.icon" :src="projectResources.youtube?.icon" :alt="TEXTS.PROJECTS.RESOURCES.YOUTUBE" class="resource-icon" @error="handleIconError" :placeholder="true" placeholder-class="icon-placeholder" />
|
|
<span>{{ TEXTS.PROJECTS.RESOURCES.YOUTUBE }}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</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 { useProjectDetail } from '~/composables/useProjectDetail';
|
|
import { TEXTS } from '~/config/content';
|
|
import { navigationItems } from '~/config/navigation';
|
|
|
|
const {
|
|
currentProject,
|
|
projectImage,
|
|
projectResources,
|
|
isLoading,
|
|
handleImageError,
|
|
handleIconError
|
|
} = useProjectDetail();
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import '~/assets/css/pages/project-detail.css';
|
|
</style>
|