81 lines
2.1 KiB
Text
81 lines
2.1 KiB
Text
---
|
|
import { changeLanguage } from "i18next";
|
|
import type { InferGetStaticPropsType, GetStaticPaths } from "astro";
|
|
import { getCollection } from "astro:content";
|
|
import Layout from "@layouts/Layout.astro";
|
|
import Toc from "@components/Toc/Toc";
|
|
import Card from "@components/Card.astro";
|
|
import Button from "@components/Button/Button.astro";
|
|
|
|
changeLanguage("es");
|
|
|
|
export const getStaticPaths = (async () => {
|
|
const entries = await getCollection("portafolio");
|
|
return entries.map((entry) => ({
|
|
params: { slug: entry.slug },
|
|
props: entry,
|
|
}));
|
|
}) satisfies GetStaticPaths;
|
|
type Props = InferGetStaticPropsType<typeof getStaticPaths>;
|
|
const entry = Astro.props;
|
|
const { Content, headings } = await entry.render();
|
|
---
|
|
|
|
<Layout title={entry.data.title}>
|
|
<h1>{entry.data.title}</h1>
|
|
<Card className="w-lg-50 mx-auto">
|
|
<div class="project-specs grid">
|
|
<div class="project-spec-property">Timeframe:</div>
|
|
<div class="project-spec-value">{entry.data.timeframe}</div>
|
|
|
|
<div class="project-spec-property">Repo:</div>
|
|
<div class="project-spec-value">{entry.data.links?.url ?? 'Private'}</div>
|
|
|
|
<div class="project-spec-property">Website:</div>
|
|
<div class="project-spec-value">
|
|
{entry.data.links?.repo ?? 'Private'}
|
|
</div>
|
|
|
|
<div class="project-spec-property">Technologies:</div>
|
|
<div class="project-spec-value">
|
|
<ul>
|
|
{entry.data.technologies.map((item) => <li>{item}</li>)}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Toc headings={headings} />
|
|
|
|
<Content />
|
|
|
|
<div
|
|
class="position-fixed bottom-0"
|
|
style={{ top: 'unset', left: 'unset', bottom: '5%', right: '5%' }}
|
|
>
|
|
<Button className="btn-back">Go back</Button>
|
|
</div>
|
|
</Layout>
|
|
|
|
<style is:global lang="scss">
|
|
img {
|
|
margin: 0 auto var(--prj-spacing-2) auto;
|
|
display: block;
|
|
}
|
|
|
|
.project-specs.grid {
|
|
--prj-columns: 0.2fr 1fr;
|
|
|
|
.project-spec-property {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('astro:page-load', () => {
|
|
document.querySelector('.btn-back')?.addEventListener('click', () => {
|
|
history.back();
|
|
});
|
|
});
|
|
</script>
|