mirror of
https://github.com/Techtonic-Fault/homepage.git
synced 2026-01-23 05:26:30 +00:00
Initial commit
This commit is contained in:
Francesco
32
app/portfolio/[slug]/not-found.tsx
Normal file
32
app/portfolio/[slug]/not-found.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Navbar } from "@/components/navbar"
|
||||
import { Footer } from "@/components/footer"
|
||||
import { ArrowLeft } from "lucide-react"
|
||||
|
||||
export default function ProjectNotFound() {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col">
|
||||
<Navbar />
|
||||
|
||||
<main className="flex-1 flex items-center justify-center">
|
||||
<div className="container px-4 md:px-6 py-24 flex flex-col items-center text-center">
|
||||
<h1 className="text-4xl font-bold tracking-tighter sm:text-5xl text-primary-900 dark:text-primary-300 mb-4">
|
||||
Progetto non trovato
|
||||
</h1>
|
||||
<p className="max-w-[600px] text-gray-500 dark:text-gray-400 md:text-xl/relaxed mb-8">
|
||||
Il progetto che cercavi potrebbe essere stato eliminato o spostato.
|
||||
</p>
|
||||
<Link href="/portfolio">
|
||||
<Button className="bg-primary-900 hover:bg-primary-800 dark:bg-primary-700 dark:hover:bg-primary-600">
|
||||
<ArrowLeft />
|
||||
Portfolio
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
129
app/portfolio/[slug]/page.tsx
Normal file
129
app/portfolio/[slug]/page.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
import { notFound } from "next/navigation"
|
||||
import { Navbar } from "@/components/navbar"
|
||||
import { Footer } from "@/components/footer"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { ArrowLeft, Calendar, Clock } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import type { Metadata } from "next"
|
||||
import { MDXRemote } from "next-mdx-remote/rsc"
|
||||
import rehypePrism from "rehype-prism-plus"
|
||||
import projects from "@/data/portfolio"
|
||||
|
||||
interface BlogPostPageProps {
|
||||
params: {
|
||||
slug: string
|
||||
}
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: BlogPostPageProps): Promise<Metadata> {
|
||||
const p = await params;
|
||||
const post = projects.find((post) => post._meta.path === p.slug)
|
||||
|
||||
if (!post) {
|
||||
return {
|
||||
title: "Progetto non trovato",
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${post.title} | TECHTONIC FAULT Blog`,
|
||||
description: post.description,
|
||||
}
|
||||
}
|
||||
|
||||
export default async function BlogPostPage({ params }: BlogPostPageProps) {
|
||||
const p = await params;
|
||||
const post = projects.find((post) => post._meta.path === p.slug)
|
||||
|
||||
if (!post) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col">
|
||||
<Navbar />
|
||||
|
||||
<main className="flex-1">
|
||||
{/* Hero Section */}
|
||||
<section className="w-full py-12 md:py-24 lg:py-32 bg-primary-50 dark:bg-gray-900">
|
||||
<div className="container px-4 md:px-6 mx-auto">
|
||||
<div className="flex flex-col items-center text-center space-y-4 max-w-3xl mx-auto">
|
||||
<h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl text-primary-900 dark:text-primary-300">
|
||||
{post.title}
|
||||
</h1>
|
||||
<div className="flex items-center justify-center gap-4 text-gray-500 dark:text-gray-400">
|
||||
<div className="flex items-center">
|
||||
<Calendar className="h-4 w-4 mr-2" />
|
||||
{post.year}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 max-w-3xl mx-auto mt-12 mb-12">
|
||||
{post.tags.map((tag, index) => (
|
||||
<Badge
|
||||
key={index}
|
||||
variant="secondary"
|
||||
className="bg-primary-100 text-primary-900 dark:bg-primary-900 dark:text-primary-100"
|
||||
>
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-gray-500 dark:text-gray-400 mb-4">
|
||||
{post.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Image */}
|
||||
<div className="relative w-full h-[300px] md:h-[500px] lg:h-[600px]">
|
||||
<Image src={post.image || "/placeholder.svg"} alt={post.title} fill className="object-cover" priority />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<article className="container px-4 md:px-6 mx-auto py-12 md:py-24">
|
||||
<div className="prose prose-purple dark:prose-invert max-w-3xl mx-auto">
|
||||
<MDXRemote
|
||||
source={post.content}
|
||||
options={{
|
||||
mdxOptions: {
|
||||
rehypePlugins: [rehypePrism],
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{!!post.links && Object.values(post.links).some(v => !!v) && <div>
|
||||
<h2>Scarica ora</h2>
|
||||
<div className="flex flex-col sm:flex-row items-center gap-8">
|
||||
{!!post.links.apple && <a href={post.links.apple} className="my-auto" target="_blank">
|
||||
<Image alt="Download on the App Store" className="block dark:hidden h-16 w-auto" width={200} height={200} src="/appstore-light.svg" />
|
||||
<Image alt="Download on the App Store" className="hidden dark:block h-16 w-auto" width={200} height={200} src="/appstore-dark.svg" />
|
||||
</a>}
|
||||
{!!post.links.play && <a href={post.links.play} className="my-auto" target="_blank"><Image alt="Download on Google Play Store" className="h-16 w-auto" width={200} height={200} src="/playstore.svg" /></a>}
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="max-w-3xl mx-auto mt-12 pt-12 border-t border-gray-200 dark:border-gray-800">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<Link href="/portfolio">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-primary-200 text-primary-900 dark:border-primary-800 dark:text-primary-300"
|
||||
>
|
||||
<ArrowLeft />
|
||||
Portfolio
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user