Skip to content

Commit

Permalink
added sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChayceJRoss
ChayceJRoss committed Dec 21, 2024
1 parent c005f57 commit c14aace
Show file tree
Hide file tree
Showing 8 changed files with 153 additions and 8 deletions.
4 changes: 3 additions & 1 deletion astro.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ import { defineConfig } from 'astro/config';

import tailwind from '@astrojs/tailwind';

import alpinejs from '@astrojs/alpinejs';

// https://astro.build/config
export default defineConfig({
integrations: [tailwind()]
integrations: [tailwind(), alpinejs()]
});
43 changes: 43 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,11 @@
"astro": "astro"
},
"dependencies": {
"@astrojs/alpinejs": "^0.4.1",
"@astrojs/tailwind": "^5.1.4",
"@fontsource-variable/jetbrains-mono": "^5.1.1",
"@types/alpinejs": "^3.13.11",
"alpinejs": "^3.14.7",
"astro": "^5.1.1",
"tailwindcss": "^3.4.17"
}
Expand Down
1 change: 1 addition & 0 deletions src/assets/hamburger.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 21 additions & 3 deletions src/components/SideBar.astro
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,27 @@
---
import Hamburger from "../assets/hamburger.svg";
---

<nav class="flex flex-col gap-2 p-4 w-60 sticky top-0">
<a href="/" class="font-bold text-lg hover:cursor-pointer">Chayce Ross</a>
<nav
class="z-10 inset-2 absolute lg:relative lg:inset-0 flex flex-col gap-2 p-4 w-60 rounded-lg bg-opacity-50 bg-gray-100 lg:bg-white backdrop-blur-sm transition-transform"
:class="open ? '' : '-translate-x-full -left-10 lg:translate-x-0 lg:inset-0'"
x-transition
>
<div class="flex flex-row justify-start items-center gap-2">
<button
x-on:click="open = !open"
class="text-left font-bold text-lg hover:cursor-pointer"
>
<img
class="transition-transform lg:hidden"
src={Hamburger.src}
width="20"
:class="open ? 'rotate-90' : ''"
/>
</button>
<a href="/">Chayce Ross </a>
</div>

<hr class="mb-10 border border-b-2 border-black rounded-sm" />
<a href="/projects" class="">Projects</a>
<a href="/about" class="">About</a>
Expand Down
24 changes: 22 additions & 2 deletions src/layouts/Layout.astro
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
import "@fontsource-variable/jetbrains-mono";
import SideBar from "../components/SideBar.astro";
import Hamburger from "../assets/hamburger.svg";
---

<!doctype html>
Expand All @@ -12,9 +13,28 @@ import SideBar from "../components/SideBar.astro";
<meta name="generator" content={Astro.generator} />
<title>Chayce Ross Blog</title>
</head>
<body class="flex flex-row overflow-hidden">
<body
class="flex flex-col lg:flex-row overflow-hidden"
x-data="{ open : true }"
>
<SideBar />
<main class="w-full overflow-y-scroll flex flex-col items-center">
<div
class="sticky top-0 lg:hidden w-full h-16 flex flex-row z-5 justify-start items-center px-4"
>
<button
x-on:click="open = !open"
class="text-left font-bold text-lg hover:cursor-pointer w-10"
>
<img
class="transition-transform"
src={Hamburger.src}
width="20"
:class="open ? 'rotate-90' : ''"
/>
</button>
<h1 class="text-center grow pr-[20px]">Chayce Ross</h1>
</div>
<main class="w-full overflow-y-scroll flex flex-col items-center p-6">
<slot />
</main>
</body>
Expand Down
45 changes: 43 additions & 2 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,55 @@ const projects = await getCollection("projects");
---

<Layout>
<div class="w-full md:w-[80%] h-full flex flex-col gap-8">
<section class="mt-40">
<div class="w-full md:w-[90%] h-full flex flex-col gap-8">
<section class="lg:mt-40">
<h1 class="text-xl font-bold">Hi! I'm Chayce</h1>
<p>
I am a UBC Student studying <b>Engineering Physics</b>. I am
interested in Full Stack Web Development.
</p>
</section>

<section>
<h1 class="font-bold text-xl mb-1">Projects</h1>
<ul class="flex flex-col gap-2">
{
projects.map((project) => (
<li id={project.id}>
<a
href={`/projects/${project.id}`}
class="font-bold hover:underline hover:text-blue-800"
>
{project.data.title}
</a>
<p class="text-sm font-light">
{project.data.blurb}
</p>
</li>
))
}
</ul>
</section>
<section>
<h1 class="font-bold text-xl mb-1">Projects</h1>
<ul class="flex flex-col gap-2">
{
projects.map((project) => (
<li id={project.id}>
<a
href={`/projects/${project.id}`}
class="font-bold"
>
{project.data.title}
</a>
<p class="text-sm font-light">
{project.data.blurb}
</p>
</li>
))
}
</ul>
</section>
<section>
<h1 class="font-bold text-xl mb-1">Projects</h1>
<ul class="flex flex-col gap-2">
Expand Down
17 changes: 17 additions & 0 deletions src/pages/projects/[id].astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
import { getCollection, render } from "astro:content";
// 1. Generate a new path for every collection entry
export async function getStaticPaths() {
const posts = await getCollection("projects");
return posts.map((post) => ({
params: { id: post.id },
props: { post },
}));
}
// 2. For your template, you can get the entry directly from the prop
const { post } = Astro.props;
const { Content } = await render(post);
---

<h1>{post.data.title}</h1>
<Content />

0 comments on commit c14aace

Please sign in to comment.