Use a single layout for side projects
This commit is contained in:
parent
ef16d69514
commit
c4d7a7ad35
@ -2,6 +2,8 @@
|
||||
import GithubIcon from "../components/Sideprojects/GithubIcon.astro";
|
||||
import GlobeIcon from "../components/Sideprojects/GlobeIcon.astro";
|
||||
import NavigationLayout from "./NavigationLayout.astro";
|
||||
|
||||
const { project_title, git_url, page_url, previous, next } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
@ -30,32 +32,58 @@ import NavigationLayout from "./NavigationLayout.astro";
|
||||
<body>
|
||||
<NavigationLayout>
|
||||
<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
|
||||
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
|
||||
class="font-display font-semibold text-xl text-center"
|
||||
>
|
||||
Typed Hyperscript Processor (webpage)
|
||||
{project_title}
|
||||
</h1>
|
||||
|
||||
<p class="pt-8">
|
||||
Descripción del proyecto :D (carita feliz) en 240
|
||||
palabras o menos
|
||||
<slot />
|
||||
</p>
|
||||
|
||||
<div class="pt-8">
|
||||
<GithubIcon color="var(--c-on-bg)" />
|
||||
<a href="" class="underline">Source code</a>
|
||||
<a href={git_url} class="underline">Source code</a>
|
||||
<br />
|
||||
<GlobeIcon color="var(--c-on-bg)" />
|
||||
<a href="" class="underline"
|
||||
>https://webpage.araozu.dev/</a
|
||||
>
|
||||
{
|
||||
page_url && (
|
||||
<>
|
||||
<GlobeIcon color="var(--c-on-bg)" />
|
||||
<a href={page_url} class="underline">
|
||||
Webpage
|
||||
</a>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</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>
|
||||
|
||||
|
||||
@ -1,84 +1,17 @@
|
||||
---
|
||||
import GithubIcon from "../../components/Sideprojects/GithubIcon.astro";
|
||||
import GlobeIcon from "../../components/Sideprojects/GlobeIcon.astro";
|
||||
import NavigationLayout from "../../layouts/NavigationLayout.astro";
|
||||
import SideProject from "../../layouts/SideProject.astro";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<link rel="stylesheet" href="/global.css" />
|
||||
<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 />
|
||||
It is written with Astro and Markdown, highlights the
|
||||
syntax in the code snippets using said compiler, and
|
||||
has some interactive code snippets.
|
||||
</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>
|
||||
<SideProject
|
||||
project_title="Typed Hyperscript Processor (webpage)"
|
||||
git_url="https://git.araozu.dev/fernando/thp-web"
|
||||
page_url="https://thp.araozu.dev"
|
||||
next="thp"
|
||||
>
|
||||
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>
|
||||
|
||||
17
src/pages/side-projects/thp.astro
Normal file
17
src/pages/side-projects/thp.astro
Normal file
@ -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
Block a user