Use a single layout for side projects
parent
ef16d69514
commit
c4d7a7ad35
|
|
@ -2,6 +2,8 @@
|
||||||
import GithubIcon from "../components/Sideprojects/GithubIcon.astro";
|
import GithubIcon from "../components/Sideprojects/GithubIcon.astro";
|
||||||
import GlobeIcon from "../components/Sideprojects/GlobeIcon.astro";
|
import GlobeIcon from "../components/Sideprojects/GlobeIcon.astro";
|
||||||
import NavigationLayout from "./NavigationLayout.astro";
|
import NavigationLayout from "./NavigationLayout.astro";
|
||||||
|
|
||||||
|
const { project_title, git_url, page_url, previous, next } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
|
|
@ -30,32 +32,58 @@ import NavigationLayout from "./NavigationLayout.astro";
|
||||||
<body>
|
<body>
|
||||||
<NavigationLayout>
|
<NavigationLayout>
|
||||||
<div class="grid grid-cols-[30rem_auto] gap-2">
|
<div class="grid grid-cols-[30rem_auto] gap-2">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center justify-center gap-4 flex-col">
|
||||||
<div
|
<div
|
||||||
class="bg-c-bg-2 my-4 rounded p-4 dark:shadow-black shadow"
|
class="bg-c-bg-2 rounded p-4 shadow shadow-zinc-500 dark:shadow-black"
|
||||||
>
|
>
|
||||||
<h1
|
<h1
|
||||||
class="font-display font-semibold text-xl text-center"
|
class="font-display font-semibold text-xl text-center"
|
||||||
>
|
>
|
||||||
Typed Hyperscript Processor (webpage)
|
{project_title}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p class="pt-8">
|
<p class="pt-8">
|
||||||
Descripción del proyecto :D (carita feliz) en 240
|
<slot />
|
||||||
palabras o menos
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="pt-8">
|
<div class="pt-8">
|
||||||
<GithubIcon color="var(--c-on-bg)" />
|
<GithubIcon color="var(--c-on-bg)" />
|
||||||
<a href="" class="underline">Source code</a>
|
<a href={git_url} class="underline">Source code</a>
|
||||||
<br />
|
<br />
|
||||||
|
{
|
||||||
|
page_url && (
|
||||||
|
<>
|
||||||
<GlobeIcon color="var(--c-on-bg)" />
|
<GlobeIcon color="var(--c-on-bg)" />
|
||||||
<a href="" class="underline"
|
<a href={page_url} class="underline">
|
||||||
>https://webpage.araozu.dev/</a
|
Webpage
|
||||||
>
|
</a>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
<div class="pt-8">logos</div>
|
<div class="pt-8">logos</div>
|
||||||
|
-->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 w-full gap-6">
|
||||||
|
<a
|
||||||
|
class={`inline-block w-full bg-c-bg-2 rounded p-4 shadow shadow-zinc-500
|
||||||
|
dark:shadow-black transition-colors
|
||||||
|
${previous? "hover:bg-zinc-300": "opacity-50 cursor-default"}`}
|
||||||
|
href={previous? `/side-projects/${previous}` : `#`}
|
||||||
|
>
|
||||||
|
← <span class="underline">Previous project</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class={`inline-block w-full bg-c-bg-2 rounded p-4 shadow shadow-zinc-500
|
||||||
|
dark:shadow-black transition-colors
|
||||||
|
${next? "hover:bg-zinc-300": "opacity-50 cursor-default"}`}
|
||||||
|
href={next? `/side-projects/${next}` : `#`}
|
||||||
|
>
|
||||||
|
<span class="underline">Next project</span> →
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,84 +1,17 @@
|
||||||
---
|
---
|
||||||
import GithubIcon from "../../components/Sideprojects/GithubIcon.astro";
|
import SideProject from "../../layouts/SideProject.astro";
|
||||||
import GlobeIcon from "../../components/Sideprojects/GlobeIcon.astro";
|
|
||||||
import NavigationLayout from "../../layouts/NavigationLayout.astro";
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<SideProject
|
||||||
<html lang="en">
|
project_title="Typed Hyperscript Processor (webpage)"
|
||||||
<head>
|
git_url="https://git.araozu.dev/fernando/thp-web"
|
||||||
<meta charset="utf-8" />
|
page_url="https://thp.araozu.dev"
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
next="thp"
|
||||||
<meta name="viewport" content="width=device-width" />
|
>
|
||||||
<meta name="generator" content={Astro.generator} />
|
This is a static webpage that contains documentation for my other project,
|
||||||
<link rel="stylesheet" href="/global.css" />
|
the THP compiler.
|
||||||
<link rel="stylesheet" href="/blog.css" />
|
|
||||||
<title>Side projects - Fernando Araoz</title>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
||||||
<link
|
|
||||||
href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
type="text/css"
|
|
||||||
href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css"
|
|
||||||
/>
|
|
||||||
<script src="//unpkg.com/alpinejs" is:inline defer></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<NavigationLayout>
|
|
||||||
<div class="grid grid-cols-[30rem_auto] gap-2">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div
|
|
||||||
class="bg-c-bg-2 my-4 rounded p-4 dark:shadow-black shadow"
|
|
||||||
>
|
|
||||||
<h1
|
|
||||||
class="font-display font-semibold text-xl text-center"
|
|
||||||
>
|
|
||||||
Typed Hyperscript Processor (webpage)
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="pt-8 text-sm">
|
|
||||||
This is a static webpage that contains documentation
|
|
||||||
for my other project, the THP compiler.
|
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
It is written with Astro and Markdown, highlights the
|
It is written with Astro and Markdown, highlights the syntax in the code snippets
|
||||||
syntax in the code snippets using said compiler, and
|
using said compiler, and has some interactive code snippets.
|
||||||
has some interactive code snippets.
|
</SideProject>
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="pt-8">
|
|
||||||
<GithubIcon color="var(--c-on-bg)" />
|
|
||||||
<a
|
|
||||||
href="https://git.araozu.dev/fernando/araozu.dev"
|
|
||||||
class="underline">Source code</a
|
|
||||||
>
|
|
||||||
<br />
|
|
||||||
<GlobeIcon color="var(--c-on-bg)" />
|
|
||||||
<a
|
|
||||||
href="https://thp.araozu.dev/"
|
|
||||||
target="_blank"
|
|
||||||
class="underline">https://thp.araozu.dev/</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pt-8">logos</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="w-full h-screen flex items-center justify-center p-16"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="inline-block shadow-sm dark:shadow-black rounded"
|
|
||||||
src="/img/projects/thp/01.png"
|
|
||||||
alt="Project image"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</NavigationLayout>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
---
|
||||||
|
import SideProject from "../../layouts/SideProject.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<SideProject
|
||||||
|
project_title="Typed Hyperscript Processor (webpage)"
|
||||||
|
git_url="https://git.araozu.dev/fernando/thp-web"
|
||||||
|
page_url="https://thp.araozu.dev"
|
||||||
|
previous="#"
|
||||||
|
>
|
||||||
|
This is a static webpage that contains documentation for my other project,
|
||||||
|
the THP compiler.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
It is written with Astro and Markdown, highlights the syntax in the code snippets
|
||||||
|
using said compiler, and has some interactive code snippets.
|
||||||
|
</SideProject>
|
||||||
Loading…
Reference in New Issue