feat: harden portfolio and add SEO foundations
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
b079afdd73
commit
62bcfbd8fa
121 files changed
+7769
-10469
No files matched your search
+161
-57
@@ -2,12 +2,25 @@ import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { safeJsonLd } from "@/lib/jsonld";
|
||||
import { caseStudies, siteName, siteUrl } from "@/lib/site-content";
|
||||
import { buildBreadcrumbList } from "@/lib/seo";
|
||||
import {
|
||||
caseStudies,
|
||||
getRelatedServices,
|
||||
intentCtas,
|
||||
siteName,
|
||||
siteUrl,
|
||||
} from "@/lib/site-content";
|
||||
|
||||
interface CasePageProps {
|
||||
params: Promise<{ slug: string }>;
|
||||
}
|
||||
|
||||
const sourceShaPattern = /\/blob\/([0-9a-f]{40})\//;
|
||||
|
||||
function getSourceSha(url: string) {
|
||||
return sourceShaPattern.exec(url)?.[1];
|
||||
}
|
||||
|
||||
export function generateStaticParams() {
|
||||
return caseStudies.map((caseStudy) => ({ slug: caseStudy.id }));
|
||||
}
|
||||
@@ -45,36 +58,16 @@ export default async function CasePage({ params }: CasePageProps) {
|
||||
const caseStudy = caseStudies.find((item) => item.id === slug);
|
||||
if (!caseStudy) notFound();
|
||||
|
||||
const url = `${siteUrl}/cases/${caseStudy.id}`;
|
||||
const pageUrl = `${siteUrl}/cases/${caseStudy.id}`;
|
||||
const relatedServices = getRelatedServices(caseStudy.id);
|
||||
const jsonLd = {
|
||||
"@context": "https://schema.org",
|
||||
"@graph": [
|
||||
{
|
||||
"@type": "Article",
|
||||
headline: caseStudy.title,
|
||||
description: caseStudy.summary,
|
||||
mainEntityOfPage: url,
|
||||
author: { "@id": `${siteUrl}/#person` },
|
||||
about: caseStudy.stack,
|
||||
},
|
||||
{
|
||||
"@type": "BreadcrumbList",
|
||||
itemListElement: [
|
||||
{ "@type": "ListItem", position: 1, name: "Início", item: siteUrl },
|
||||
{
|
||||
"@type": "ListItem",
|
||||
position: 2,
|
||||
name: "Cases",
|
||||
item: `${siteUrl}/cases`,
|
||||
},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
position: 3,
|
||||
name: caseStudy.title,
|
||||
item: url,
|
||||
},
|
||||
],
|
||||
},
|
||||
buildBreadcrumbList(pageUrl, [
|
||||
["Início", siteUrl],
|
||||
["Cases", `${siteUrl}/cases`],
|
||||
[caseStudy.title, pageUrl],
|
||||
] as const),
|
||||
],
|
||||
};
|
||||
|
||||
@@ -84,18 +77,52 @@ export default async function CasePage({ params }: CasePageProps) {
|
||||
<article>
|
||||
<section className="ds-section ds-section-dark">
|
||||
<div className="ds-section-shell max-w-[960px]">
|
||||
<nav aria-label="Breadcrumb" className="mb-sp-6">
|
||||
<ol className="flex flex-wrap items-center gap-sp-2 text-sm">
|
||||
<li>
|
||||
<Link className="ds-link ds-link-muted" href="/">
|
||||
Início
|
||||
</Link>
|
||||
</li>
|
||||
<li className="flex items-center gap-sp-2">
|
||||
<span aria-hidden="true">/</span>
|
||||
<Link className="ds-link ds-link-muted" href="/cases">
|
||||
Cases
|
||||
</Link>
|
||||
</li>
|
||||
<li className="flex items-center gap-sp-2">
|
||||
<span aria-hidden="true">/</span>
|
||||
<Link
|
||||
aria-current="page"
|
||||
className="ds-link ds-link-muted"
|
||||
href={`/cases/${caseStudy.id}`}
|
||||
>
|
||||
{caseStudy.title}
|
||||
</Link>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<p className="ds-eyebrow">Case de engenharia de software</p>
|
||||
<h1 className="ds-section-title text-white">
|
||||
{caseStudy.title}: {caseStudy.subtitle}
|
||||
</h1>
|
||||
<p className="ds-copy max-w-[68ch] !text-[rgba(255,255,255,.78)]">
|
||||
{caseStudy.summary}
|
||||
</p>
|
||||
<p className="mt-sp-6 text-[15px] leading-8 text-white">
|
||||
{caseStudy.impact}
|
||||
{caseStudy.detail?.answer.text ?? caseStudy.summary}
|
||||
</p>
|
||||
{!caseStudy.detail ? (
|
||||
<p className="mt-sp-6 text-[15px] leading-8 text-white">
|
||||
{caseStudy.impact}
|
||||
</p>
|
||||
) : null}
|
||||
<ul className="ds-tags mt-sp-6">
|
||||
{caseStudy.stack.map((item) => (
|
||||
<li key={item} className="ds-tag">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="mt-sp-8 flex flex-wrap gap-sp-3">
|
||||
{caseStudy.demoUrl && (
|
||||
{caseStudy.demoUrl ? (
|
||||
<a
|
||||
className="ds-link ds-link-accent"
|
||||
href={caseStudy.demoUrl}
|
||||
@@ -104,8 +131,8 @@ export default async function CasePage({ params }: CasePageProps) {
|
||||
>
|
||||
Abrir demonstração
|
||||
</a>
|
||||
)}
|
||||
{caseStudy.githubUrl && (
|
||||
) : null}
|
||||
{caseStudy.githubUrl ? (
|
||||
<a
|
||||
className="ds-link ds-link-muted"
|
||||
href={caseStudy.githubUrl}
|
||||
@@ -114,33 +141,110 @@ export default async function CasePage({ params }: CasePageProps) {
|
||||
>
|
||||
Ver código
|
||||
</a>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="ds-section">
|
||||
|
||||
{caseStudy.detail ? (
|
||||
<section className="ds-section">
|
||||
<div className="ds-section-shell max-w-[960px] space-y-sp-10">
|
||||
<section aria-labelledby="case-challenge">
|
||||
<h2 id="case-challenge" className="ds-section-title">
|
||||
Desafio verificável
|
||||
</h2>
|
||||
<p className="ds-section-description">
|
||||
{caseStudy.detail.challenge.text}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="case-implementation">
|
||||
<h2 id="case-implementation" className="ds-section-title">
|
||||
Decisões de implementação
|
||||
</h2>
|
||||
<ul className="ds-list mt-sp-5 pl-[1.15rem]">
|
||||
{caseStudy.detail.implementation.map((statement) => (
|
||||
<li key={statement.text}>{statement.text}</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="case-boundaries">
|
||||
<h2 id="case-boundaries" className="ds-section-title">
|
||||
Limites desta evidência
|
||||
</h2>
|
||||
<ul className="ds-list mt-sp-5 pl-[1.15rem]">
|
||||
{caseStudy.detail.boundaries.map((boundary) => (
|
||||
<li key={boundary.text}>{boundary.text}</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="case-sources">
|
||||
<h2 id="case-sources" className="ds-section-title">
|
||||
Fontes
|
||||
</h2>
|
||||
<ul className="mt-sp-5 space-y-sp-4">
|
||||
{caseStudy.detail.sources.map((source) => {
|
||||
const sha = getSourceSha(source.url);
|
||||
return (
|
||||
<li key={source.id}>
|
||||
<a
|
||||
className="ds-link ds-link-muted"
|
||||
href={source.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Fonte: {source.label}
|
||||
</a>
|
||||
{sha ? (
|
||||
<span className="mt-sp-2 block text-[12px] text-[var(--meta)]">
|
||||
Commit: <code className="break-all">{sha}</code>
|
||||
</span>
|
||||
) : null}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
{relatedServices.length > 0 ? (
|
||||
<section className="ds-section">
|
||||
<div className="ds-section-shell max-w-[960px]">
|
||||
<h2 className="ds-section-title">Serviços relacionados</h2>
|
||||
<div className="mt-sp-6 flex flex-wrap gap-sp-3">
|
||||
{relatedServices.map((service) => (
|
||||
<Link
|
||||
key={service.slug}
|
||||
className="ds-link ds-link-muted"
|
||||
href={`/servicos/${service.slug}`}
|
||||
>
|
||||
Ver serviço relacionado: {service.navLabel}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
<section className="ds-section ds-section-dark pb-sp-6">
|
||||
<div className="ds-section-shell max-w-[960px]">
|
||||
<h2 className="ds-section-title !leading-snug">
|
||||
Tecnologias e contexto técnico
|
||||
</h2>
|
||||
<p className="ds-section-description">
|
||||
Este case demonstra como aplico engenharia de software a produtos
|
||||
com requisitos de performance, integração e operação, para
|
||||
empresas do Norte de Santa Catarina, Curitiba e atuação remota.
|
||||
</p>
|
||||
<ul className="ds-tags mt-sp-6">
|
||||
{caseStudy.stack.map((item) => (
|
||||
<li key={item} className="ds-tag">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="mt-sp-10 flex flex-wrap gap-sp-3">
|
||||
<Link className="ds-link ds-link-accent" href="/curriculo">
|
||||
Ver currículo profissional
|
||||
<h2 className="ds-card-title text-white">Próximos caminhos</h2>
|
||||
<div className="mt-sp-6 flex flex-wrap gap-sp-3">
|
||||
<Link
|
||||
className="ds-link ds-link-accent"
|
||||
href={intentCtas.hiring.href}
|
||||
>
|
||||
{intentCtas.hiring.label}
|
||||
</Link>
|
||||
<Link className="ds-link ds-link-muted" href="/servicos">
|
||||
Ver serviços de engenharia
|
||||
<Link
|
||||
className="ds-link ds-link-muted"
|
||||
href={intentCtas.consulting.href}
|
||||
>
|
||||
{intentCtas.consulting.label}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user