feat: implement barebone zola templates
This commit is contained in:
parent
9c20f5ed2e
commit
f99a9ae2ac
198 changed files with 2434 additions and 227991 deletions
10
_src/pages/es/404.astro
Normal file
10
_src/pages/es/404.astro
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
import { changeLanguage } from "i18next";
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
|
||||
changeLanguage("es");
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Astro.">
|
||||
<h1>not found</h1>
|
||||
</Layout>
|
||||
10
_src/pages/es/blog.astro
Normal file
10
_src/pages/es/blog.astro
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
import { changeLanguage } from "i18next";
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
|
||||
changeLanguage("es");
|
||||
---
|
||||
|
||||
<Layout title="Blog">
|
||||
<h1>Blog</h1>
|
||||
</Layout>
|
||||
26
_src/pages/es/blog/[...slug].astro
Normal file
26
_src/pages/es/blog/[...slug].astro
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
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";
|
||||
|
||||
changeLanguage("es");
|
||||
|
||||
export const getStaticPaths = (async () => {
|
||||
const entries = await getCollection("blog");
|
||||
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}>
|
||||
<Toc headings={headings} />
|
||||
|
||||
<Content />
|
||||
</Layout>
|
||||
44
_src/pages/es/blog/index.astro
Normal file
44
_src/pages/es/blog/index.astro
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
---
|
||||
import { changeLanguage } from "i18next";
|
||||
import { getCollection } from "astro:content";
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import Table from "@components/Table";
|
||||
import { HeaderType, type Header } from "@components/Table/types";
|
||||
|
||||
changeLanguage("es");
|
||||
|
||||
const rawEntries = await getCollection("blog", ({ data }) => {
|
||||
return import.meta.env.PROD ? data.draft !== true : true;
|
||||
});
|
||||
const entries = rawEntries.map((item, idx) => ({
|
||||
...item.data,
|
||||
id: idx + 1,
|
||||
slug: item.slug,
|
||||
}));
|
||||
const headers: Header[] = [
|
||||
{
|
||||
key: "id",
|
||||
header: "index",
|
||||
type: HeaderType.Index,
|
||||
},
|
||||
{
|
||||
key: "title",
|
||||
header: "Title",
|
||||
formatter: (data) => `<a href="blog/${data.slug}">${data.title}</a>`,
|
||||
type: HeaderType.String,
|
||||
},
|
||||
{
|
||||
key: "tags",
|
||||
header: "Tags",
|
||||
type: HeaderType.Multiple,
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<Layout title="List of blog entries">
|
||||
<h1>Blog's entries</h1>
|
||||
|
||||
<section>
|
||||
<Table client:load data={entries} headers={headers} />
|
||||
</section>
|
||||
</Layout>
|
||||
253
_src/pages/es/index.astro
Normal file
253
_src/pages/es/index.astro
Normal file
|
|
@ -0,0 +1,253 @@
|
|||
---
|
||||
import { getCollection, getEntry } from "astro:content";
|
||||
import { t, changeLanguage } from "i18next";
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Card from "../../components/Card.astro";
|
||||
import LocalizedMarkdown from "@components/LocalizedMarkdown.astro";
|
||||
import Button from "../../components/Button/Button.astro";
|
||||
import { Image } from "astro:assets";
|
||||
import portrait from "../../assets/images/portrait.jpg";
|
||||
|
||||
changeLanguage("es");
|
||||
|
||||
const blog = await getCollection("blog", ({ data }) => import.meta.env.PROD ? data.draft !== true : true);
|
||||
const portafolio = [
|
||||
await getEntry("portafolio", "piloto-go"),
|
||||
await getEntry("portafolio", "destino-temuco"),
|
||||
await getEntry("portafolio", "sercotec"),
|
||||
];
|
||||
---
|
||||
|
||||
<Layout title="aleidk">
|
||||
<section
|
||||
id="hero"
|
||||
class="bg-image flex-center"
|
||||
style="--bg-image: url(https://placehold.co/600x400)"
|
||||
>
|
||||
<div class="vstack gap-0 align-items-center">
|
||||
<Image
|
||||
id="portrait"
|
||||
src={portrait}
|
||||
alt="portrait of Alexander Navarro"
|
||||
loading="eager"
|
||||
width={200}
|
||||
/>
|
||||
<div>
|
||||
<h1 class="text-center my-0">Alexander Navarro</h1>
|
||||
<div class="text-center" class="">
|
||||
<LocalizedMarkdown path="brief.md" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="text-center">{t('titles.featuredWork')}</h2>
|
||||
|
||||
<div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
|
||||
{
|
||||
portafolio.map(({ data, slug }) => (
|
||||
<div>
|
||||
<Card className="anim-hover-zoom h-100">
|
||||
<a class="clean" href={`/projects/${slug}`}>
|
||||
<Image
|
||||
src={data.thumbnail}
|
||||
alt="project img"
|
||||
class="border-radius respect-width"
|
||||
/>
|
||||
<h3 class="fs-4 text-center my-1">{data.title}</h3>
|
||||
<p class="text-justify">{data.brief}</p>
|
||||
</a>
|
||||
<div class="text-end" slot="footer">
|
||||
<a href={`/projects/${slug}`}>{t('misc.seeMore')}</a>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<Button className="px-4 py-2 fs-5" href="/projects">
|
||||
{t('home.moreProjects')}
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class:list={[{ 'd-none': import.meta.env.PROD }]}>
|
||||
<h2 class="mb-4">{t('titles.whatIveBeenUpTo')}</h2>
|
||||
|
||||
<div class="hstack flex-eq flex-wrap flex-md-nowrap">
|
||||
<div class="vstack justify-content-center">
|
||||
<h4 class="text-center text-capitalize">{t('blog')}</h4>
|
||||
<ol class="list-unstyle mt-0 fs-5">
|
||||
<li class="mb-3">
|
||||
<a href="#"
|
||||
>Qui minim labore adipisicing minim sint cillum sint consectetur
|
||||
cupidatat.</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a href="#"
|
||||
>Qui minim labore adipisicing minim sint cillum sint consectetur
|
||||
cupidatat.</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a href="#"
|
||||
>Qui minim labore adipisicing minim sint cillum sint consectetur
|
||||
cupidatat.</a
|
||||
>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-center mb-2">
|
||||
<img class="" src="https://placehold.co/400x200" alt="project img" />
|
||||
</div>
|
||||
<p class="text-justify">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
|
||||
consequatur iste molestiae blanditiis eligendi consectetur ullam.
|
||||
Excepturi quasi sed est animi laudantium necessitatibus, tempore
|
||||
delectus nulla aspernatur quod nesciunt fugiat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hstack-reverse flex-eq flex-wrap flex-md-nowrap">
|
||||
<div class="vstack justify-content-center">
|
||||
<h4 class="text-center text-capitalize">{t('games')}</h4>
|
||||
<ol class="list-unstyle mt-0 fs-5">
|
||||
<li class="mb-3">
|
||||
<a href="#"
|
||||
>Qui minim labore adipisicing minim sint cillum sint consectetur
|
||||
cupidatat.</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a href="#"
|
||||
>Qui minim labore adipisicing minim sint cillum sint consectetur
|
||||
cupidatat.</a
|
||||
>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a href="#"
|
||||
>Qui minim labore adipisicing minim sint cillum sint consectetur
|
||||
cupidatat.</a
|
||||
>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-center mb-2">
|
||||
<img class="" src="https://placehold.co/400x200" alt="project img" />
|
||||
</div>
|
||||
<p class="text-justify">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
|
||||
consequatur iste molestiae blanditiis eligendi consectetur ullam.
|
||||
Excepturi quasi sed est animi laudantium necessitatibus, tempore
|
||||
delectus nulla aspernatur quod nesciunt fugiat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="bg-image"
|
||||
style="--bg-image: url(https://placehold.co/600x400)"
|
||||
>
|
||||
<h2 class="text-center">{t('titles.whoAmI')}</h2>
|
||||
<p class="w-95 w-lg-70 mx-auto text-justify">
|
||||
<LocalizedMarkdown path="about-me.md" />
|
||||
</p>
|
||||
|
||||
<div class="text-center fs-4 mb-0">
|
||||
<a href="">
|
||||
<Button>{t('home.viewCurriculum')}</Button>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Contact</h2>
|
||||
|
||||
<div class="grid grid-cols-1 grid-lg-cols-2">
|
||||
<div>
|
||||
<div class="text-center">
|
||||
<img
|
||||
class="respect-width border-radius"
|
||||
src="https://placehold.co/500x300"
|
||||
alt="project img"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-justify">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
|
||||
reprehenderit, porro dolorem cumque suscipit accusantium officiis eius
|
||||
exercitationem harum itaque perferendis praesentium asperiores vitae
|
||||
pariatur ad culpa mollitia necessitatibus hic!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="vstack justify-content-center">
|
||||
<ul
|
||||
class="list-unstyle fs-5 ml-lg-5 mt-3 d-flex d-lg-block justify-content-around anim-idle-hover-group anim-group-lg-none"
|
||||
>
|
||||
{
|
||||
[
|
||||
{
|
||||
link: '#',
|
||||
img: 'https://placehold.co/60',
|
||||
alt: '',
|
||||
text: 'Github',
|
||||
},
|
||||
{
|
||||
link: '#',
|
||||
img: 'https://placehold.co/60',
|
||||
alt: '',
|
||||
text: 'Linkedin',
|
||||
},
|
||||
{
|
||||
link: '#',
|
||||
img: 'https://placehold.co/60',
|
||||
alt: '',
|
||||
text: 'Email',
|
||||
},
|
||||
].map((item) => (
|
||||
<li class="mb-3">
|
||||
<a
|
||||
href={item.link}
|
||||
class="hstack flex-column flex-lg-row gap-2"
|
||||
>
|
||||
<>
|
||||
<img src={item.img} alt={item.alt} />
|
||||
<span>{item.text}</span>
|
||||
</>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
#portrait {
|
||||
border-radius: 50%;
|
||||
/* border: 5px solid var(--prj-accent); */
|
||||
}
|
||||
#hero {
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
a.clean {
|
||||
color: var(--prj-text);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</Layout>out> out>
|
||||
81
_src/pages/es/projects/[...slug].astro
Normal file
81
_src/pages/es/projects/[...slug].astro
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
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>
|
||||
65
_src/pages/es/projects/[page].astro
Normal file
65
_src/pages/es/projects/[page].astro
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
---
|
||||
import type { InferGetStaticPropsType, GetStaticPaths } from "astro";
|
||||
import { changeLanguage } from "i18next";
|
||||
import { getCollection } from "astro:content";
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import Card from "@components/Card.astro";
|
||||
import Pagination from "@components/Pagination.astro";
|
||||
import { Image } from "astro:assets";
|
||||
|
||||
changeLanguage("es");
|
||||
|
||||
export const getStaticPaths = (async ({ paginate }) => {
|
||||
const rawEntries = await getCollection("portafolio", ({ data }) => {
|
||||
return import.meta.env.PROD ? data.draft !== true : true;
|
||||
});
|
||||
const entries = rawEntries.map((item, idx) => ({
|
||||
...item.data,
|
||||
id: idx + 1,
|
||||
slug: item.slug,
|
||||
}));
|
||||
return paginate(entries, { pageSize: 6 });
|
||||
}) satisfies GetStaticPaths;
|
||||
type Props = InferGetStaticPropsType<typeof getStaticPaths>;
|
||||
const { page } = Astro.props;
|
||||
---
|
||||
|
||||
<Layout title="List of blog entries">
|
||||
<h1 class="text-center">Projects</h1>
|
||||
|
||||
<section class="clean">
|
||||
<div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
|
||||
{
|
||||
page.data.map((item) => (
|
||||
<div>
|
||||
<Card className="anim-hover-zoom h-100">
|
||||
<a class="clean" href={`/projects/${item.slug}`}>
|
||||
<Image
|
||||
src={item.thumbnail}
|
||||
alt="project img"
|
||||
class="border-radius respect-width"
|
||||
/>
|
||||
<h3 class="fs-4 text-center my-1">{item.title}</h3>
|
||||
<p class="text-justify">{item.brief}</p>
|
||||
</a>
|
||||
<div class="text-end" slot="footer">
|
||||
<a href={`/projects/${item.slug}`}>See more...</a>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<Pagination page={page} urlPattern="/projects/{}" />
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style lang="scss">
|
||||
a.clean {
|
||||
color: var(--prj-text);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue