1  ---
 2  import "../styles/article-list.css";
 3  
 4  import { getCollection } from "astro:content";
 5  import { openGraph } from "kshell:globals";
 6  import Card from "../components/Card.astro";
 7  import Icon from "../components/Icon.astro";
 8  import Layout from "../layouts/Layout.astro";
 9  
10  const projects = await getCollection("projects");
11  ---
12  <Layout
13  	title={openGraph.projects.title || "Projects"}
14  	description={openGraph.projects.description}
15  	pagefindIgnore
16  >
17    <div class="layout-grid-left" slot="left">
18      <Card class="flex-col-card">
19        <h2 class="no-mt">Stats</h2>
20  			<div class="stats-div">
21  				<div class="stat">
22  					<h3 class="text-glow">{projects.length}</h3>
23  					<span>Project{projects.length === 1 ? '' : 's'}</span>
24  				</div>
25  			</div>
26      </Card>
27    </div>
28    <div class="layout-grid-right" slot="right">
29  		<Card>
30  			<div class="header-container">
31  				<Icon type='lucide' name="folder-git" width={24} height={24} class='glow-icon' />
32  				<h2>Latest Projects</h2>
33  			</div>
34  			<div class="content-container">
35  				{projects.sort((a, b) => b.data.date.getTime() - a.data.date.getTime()).map((post) => (
36  					<a href={`/projects/${post.id}`} class="post-container">
37  						<div class="post-header">
38  							<h3>{post.data.title}</h3>
39  							<span class="post-date">{post.data.date.toLocaleDateString()}</span>
40  						</div>
41  						<span>{post.data.description}</span>
42  					</a>
43  				))}
44  			</div>
45  		</Card>
46    </div>
47  </Layout>
48  <style>
49  	.stats-div {
50  		display: flex;
51  		flex-direction: column;
52  		gap: 1rem;
53  	}
54  
55  	.stat {
56  		display: flex;
57  		flex-direction: column;
58  	}
59  
60  	.stat h3 {
61  		font-size: 2em;
62  		margin: 0;
63  		margin-bottom: .5rem;
64  	}
65  
66  </style>