Skip to content

Commit f817117

Browse files
AVGVSTVS96AVGVSTVS96
authored
Merge pull request #11 from AVGVSTVS96/contentCollection
Add content collection for projects, Projects component, add types, upgrade Astro
2 parents f5c1549 + f753a41 commit f817117

File tree

14 files changed

+174
-51
lines changed

14 files changed

+174
-51
lines changed

‎package-lock.json

Lines changed: 34 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
},
1212
"dependencies": {
1313
"@astrojs/tailwind": "^5.0.3",
14-
"astro": "^4.0.6",
14+
"astro": "^4.1.2",
1515
"astro-expressive-code": "^0.30.1",
1616
"astro-icon": "^1.0.2",
1717
"remark-sectionize": "^2.0.0"

‎src/components/Card.astro

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,29 @@ interface Props {
55
heading?: string;
66
variant: 'bordered' | 'borderless';
77
displayHr?: boolean;
8+
padding?: string;
9+
class?: string;
810
}
911
10-
let { variant, displayHr } = Astro.props;
12+
let {
13+
variant,
14+
displayHr,
15+
title,
16+
subtitle,
17+
heading,
18+
padding = 'p-6',
19+
class: className,
20+
} = Astro.props;
1121
---
1222

1323
<div
14-
class={`prose prose-slate dark:prose-invert max-w-3xl mx-4 p-6 prose-h2:font-semibold prose-h2:opacity-80 dark:prose-h2:opacity-60 ${
24+
class={`prose prose-slate dark:prose-invert max-w-3xl mx-4 ${padding} ${className} prose-h2:font-semibold prose-h2:opacity-80 dark:prose-h2:opacity-60 ${
1525
variant === 'borderless' ? '' : 'border-card'
1626
}`}>
17-
<h1 class="mb-2">{Astro.props.title}</h1>
18-
<h2 class="mt-0">{Astro.props.subtitle}</h2>
27+
{title && <h1 class="mb-2">{title}</h1>}
28+
{subtitle && <h2 class="mt-0">{subtitle}</h2>}
1929
{displayHr && <hr class="mb-8 border-sky-500" />}
20-
<h3 class="mb-1">{Astro.props.heading}</h3>
30+
{heading && <h3 class="mb-1">{heading}</h3>}
2131
<slot name="content" />
2232
</div>
2333
<style>

‎src/components/Footer.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ const name = 'Bassim Shahidy';
44
---
55

66
<div
7-
class="footer-container mt-24 flex w-3/4 justify-center border-t-2 border-opacity-70 dark:border-slate-600">
7+
class="footer-container mt-24 flex w-full justify-center border-t border-slate-400/40 ">
88
<footer
9-
class="mb-6 mt-8 flex items-center gap-4 text-sm text-opacity-60 dark:text-slate-50">
9+
class="m-5 flex items-center gap-4 text-sm text-opacity-60 dark:text-slate-50">
1010
<p>© {new Date().getFullYear()} {name}. All rights reserved.</p>
1111
<Social platform="github" username="avgvstvs96" />
1212
<Social platform="linkedin" variant="linkedIn" username="bassimshahidy" />

‎src/components/Projects.astro

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
import { getCollection } from 'astro:content';
3+
const projects = await getCollection('projects');
4+
import Card from '../components/Card.astro';
5+
import { Icon } from 'astro-icon/components';
6+
---
7+
8+
<div class="mx-4 mt-8 px-6">
9+
<div class="prose mb-6 dark:prose-invert">
10+
<h1 class="mb-4">Projects</h1>
11+
</div>
12+
<ul class="list-none pl-0 sm:flex">
13+
{
14+
projects.map((project) => (
15+
<Card variant="bordered" padding="p-3.5" class="my-4 sm:my-0 sm:w-1/2">
16+
<div slot="content">
17+
<a
18+
class="flex items-center justify-between text-[1.2rem] font-semibold no-underline"
19+
href={project.data.url}>
20+
<span class="dark:text-slate-50 hover:dark:text-slate-200/75">
21+
{project.data.title}
22+
</span>
23+
<Icon
24+
name="github"
25+
class="mx-2 size-5 opacity-70 hover:opacity-100"
26+
/>
27+
</a>
28+
<p class="mt-2.5 line-clamp-2 text-[0.925rem]">
29+
{project.data.description}
30+
</p>
31+
<div class="flex gap-2">
32+
{project.data.tags.map((tag) => (
33+
<div class="rounded-xl border border-sky-200 bg-sky-50 px-2 py-1 text-sm text-sky-700/85 dark:border-sky-500/15 dark:bg-sky-500/10 dark:text-sky-300">
34+
{tag}
35+
</div>
36+
))}
37+
</div>
38+
</div>
39+
</Card>
40+
))
41+
}
42+
</ul>
43+
</div>

‎src/components/TableOfContents.astro

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,16 @@ const { headings } = Astro.props;
33
const toc = buildToc(headings);
44
import TableOfContentsHeading from './TableOfContentsHeading.astro';
55
6-
function buildToc(headings: string[]) {
7-
const toc = [];
8-
const parentHeadings = new Map();
9-
headings.forEach((h: any) => {
10-
const heading = { ...h, subheadings: [] };
6+
interface Heading {
7+
depth: number;
8+
subheadings: Heading[];
9+
}
10+
11+
function buildToc(headings: Heading[]) {
12+
const toc: Heading[] = [];
13+
const parentHeadings = new Map<number, Heading>();
14+
headings.forEach((h: Heading) => {
15+
const heading: Heading = { ...h, subheadings: [] };
1116
parentHeadings.set(heading.depth, heading);
1217
// Change 2 to 1 if your markdown includes your <h1>
1318
if (heading.depth === 2) {

‎src/components/subComponents/DropdownMenu.astro

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,24 @@ interface Props {
1111
icon: boolean;
1212
}
1313
14-
const { name = 'Dropdown', links = [], showCaret = false, icon = false } = Astro.props;
14+
const {
15+
name = 'Dropdown',
16+
links = [],
17+
showCaret = false,
18+
icon = false,
19+
} = Astro.props;
1520
import Button from './Button.astro';
1621
---
1722

18-
<div class="relative dropdown">
19-
<Button name={name} class="dropdown-button" showCaret={showCaret} icon={icon} />
23+
<div class="dropdown relative">
24+
<Button
25+
name={name}
26+
class="dropdown-button"
27+
showCaret={showCaret}
28+
icon={icon}
29+
/>
2030
<div
21-
class="dropdown-content absolute mt-1 hidden text-balance rounded-md bg-slate-200/50 p-[0.5px] backdrop-blur-md sm:ml-2 md:w-40 dark:bg-slate-800">
31+
class="dropdown-content absolute mt-1 hidden text-balance rounded-md bg-slate-100 p-[0.5px] backdrop-blur-md sm:ml-2 md:w-40 dark:bg-slate-800">
2232
{
2333
links.map((link) => (
2434
<a
@@ -34,21 +44,23 @@ import Button from './Button.astro';
3444
<script>
3545
const dropdowns = document.querySelectorAll('.dropdown');
3646

37-
dropdowns.forEach((dropdown) => {
38-
const button = dropdown.querySelector('.dropdown-button');
39-
const content = dropdown.querySelector('.dropdown-content');
47+
dropdowns.forEach((dropdown) => {
48+
const button = dropdown.querySelector('.dropdown-button');
49+
const content = dropdown.querySelector('.dropdown-content');
4050

41-
button.addEventListener('click', (event) => {
42-
content.classList.toggle('hidden');
43-
button.classList.toggle('dropdown-active');
44-
event.stopPropagation();
45-
});
51+
if (button && content) {
52+
button.addEventListener('click', (event) => {
53+
content.classList.toggle('hidden');
54+
button.classList.toggle('dropdown-active');
55+
event.stopPropagation();
56+
});
4657

47-
document.addEventListener('click', () => {
48-
if (!dropdown.contains(event.target as Node)) {
49-
button.classList.remove('dropdown-active');
50-
content.classList.add('hidden');
58+
document.addEventListener('click', (event) => {
59+
if (!dropdown.contains(event.target as Node)) {
60+
button.classList.remove('dropdown-active');
61+
content.classList.add('hidden');
62+
}
63+
});
5164
}
5265
});
53-
});
5466
</script>

‎src/content/config.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { z, defineCollection } from 'astro:content';
2+
3+
const projectsCollection = defineCollection({
4+
type: 'data',
5+
schema: z.object({
6+
title: z.string(),
7+
description: z.string(),
8+
tags: z.array(z.string()),
9+
url: z.string().url(),
10+
}),
11+
});
12+
13+
export const collections = {
14+
projects: projectsCollection,
15+
};

‎src/content/projects/project-1.yaml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
title: FlaskGPT
2+
description: A customizable GPT-3.5/4 chat application built with Flask and plain HTML, CSS, and JavaScript
3+
tags: [ Flask, OpenAI, Python ]
4+
url: https://github.com/AVGVSTVS96/flaskGPT

‎src/content/projects/project-2.yaml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
title: FastGPT
2+
description: A high performance OpenAI GPT-4 chat app built with FastAPI. Featuring asynchronous requests, streaming responses, syntax highlighting, and more!
3+
tags: [ FastAPI, OpenAI, Python ]
4+
url: https://github.com/AVGVSTVS96/FastGPT

‎src/pages/flaskSite.astro

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -433,14 +433,16 @@ import '/src/styles/global.css';
433433
.split('')
434434
.map((letter: string, index: number) => {
435435
if (index < iteration) {
436-
return element.dataset.value[index];
436+
if (element.dataset.value) {
437+
return element.dataset.value[index];
438+
}
437439
}
438440

439441
return letters[Math.floor(Math.random() * 26)];
440442
})
441443
.join('');
442444

443-
if (iteration >= element.dataset.value.length) {
445+
if (element.dataset.value && iteration >= element.dataset.value.length) {
444446
clearInterval(interval);
445447
intervals.delete(element);
446448
animationInProgress.set(element, false);

‎src/pages/index.astro

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@ import MainLayout from '../layouts/MainLayout.astro';
33
import Footer from '../components/Footer.astro';
44
import Card from '../components/Card.astro';
55
import BlogIndex from '../components/BlogIndex.astro';
6+
import Projects from '../components/Projects.astro';
67
---
78

89
<MainLayout
910
title="Bassim Shahidy"
1011
description="Bassim Shahidy's personal website">
1112
<body>
12-
<div>
13+
<div class="max-w-3xl">
1314
<Card
1415
title="Bassim Shahidy"
1516
subtitle="IT Specialist at the New York City BAR Association"
@@ -31,12 +32,13 @@ import BlogIndex from '../components/BlogIndex.astro';
3132
pilot high-performance drones.
3233
</p>
3334
</Card>
34-
<div class="mt-8 p-6 mx-4">
35+
<div class="mx-4 mt-8 p-6">
3536
<div class="prose mb-3 dark:prose-invert">
3637
<h1 class="">Latest Posts</h1>
3738
</div>
3839
<BlogIndex postCount={3} />
3940
</div>
41+
<Projects />
4042
</div>
4143
</body>
4244
<Footer />

0 commit comments

Comments
 (0)