Skip to content

Commit 084089b

Browse files
shawn-mcgeeshawn-mcgee
committed
Adding ideas page
1 parent 1cea244 commit 084089b

File tree

8 files changed

+94
-68
lines changed

8 files changed

+94
-68
lines changed

‎src/assets/astro.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/assets/background.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/layouts/Drawer.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import { BookMarked, CircleHelp, House, LibraryBig, Moon, Sun } from 'lucide-ast
1010
<!-- Page content here -->
1111
<slot />
1212

13-
<label for="my-drawer" class="btn btn-xl btn-ghost btn-circle absolute top-4 left-4 sm:btn-xl">
13+
<label for="my-drawer" class="btn btn-xl btn-ghost btn-circle absolute top-4 left-4 sm:btn-xl bg-base-100">
1414
<BookMarked class="w-10 h-10" />
1515
</label>
1616

17-
<button class="btn btn-xl btn-ghost btn-circle absolute top-4 right-4" data-toggle-theme="valentine,dracula" data-act-class="ACTIVECLASS">
17+
<button class="btn btn-xl btn-ghost btn-circle absolute top-4 right-4 bg-base-100" data-toggle-theme="valentine,dracula" data-act-class="ACTIVECLASS">
1818
<label class="swap dark:swap-active">
1919
<Sun class="swap-off w-10 h-10" />
2020
<Moon class="swap-on w-10 h-10" />

‎src/pages/idea/[...slug].astro‎

Lines changed: 43 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,35 @@
22
import { getCollection, render } from "astro:content";
33
import Layout from "@layouts/Layout.astro";
44
import Drawer from "@layouts/Drawer.astro";
5+
import { Idea } from "@tool/idea";
56
67
import Tags from "@components/Tags.astro";
7-
import { ArrowLeft, ArrowRight } from "lucide-astro";
8-
9-
function slugOf(idea: any) {
10-
let slug = idea.filePath
11-
slug = slug?.replace(/^idea\//, "");
12-
slug = slug?.replace(/\.mdx?$/, "");
13-
return slug;
14-
}
8+
import { ArrowLeft, ArrowRight, Ellipsis } from "lucide-astro";
159
1610
export async function getStaticPaths() {
1711
const ideas = (await getCollection("ideas"))
1812
.filter(idea => idea.data.pubDate)
19-
.sort((a, b) => a.data.pubDate!.valueOf() - b.data.pubDate!.valueOf())
20-
21-
return ideas.map(idea => {
22-
function slugOf(idea: any) {
23-
let slug = idea.filePath
24-
slug = slug?.replace(/^idea\//, "");
25-
slug = slug?.replace(/\.mdx?$/, "");
26-
return slug;
27-
}
13+
.sort ((a, b) => (
14+
a.data.pubDate!.valueOf() -
15+
b.data.pubDate!.valueOf()
16+
))
2817
29-
const i = ideas.findIndex(each => slugOf(each) === slugOf(idea))
30-
const prev = i > 0 ? ideas[i - 1] : undefined
31-
const next = i < ideas.length - 1 ? ideas[i + 1] : undefined
32-
const slug = slugOf(idea)
18+
return ideas.map(idea => {
19+
const
20+
where = ideas.findIndex(each => Idea.slug(each) === Idea.slug(idea)),
21+
prevIdea = ideas[(where + ideas.length - 1) % ideas.length],
22+
nextIdea = ideas[(where + ideas.length + 1) % ideas.length],
23+
slug = Idea.slug(idea);
3324
3425
return {
35-
params: { slug },
36-
props : { idea, prev, next },
26+
params: { slug },
27+
props : { idea, prevIdea, nextIdea },
3728
}
3829
});
3930
}
4031
41-
const { idea, prev, next } = Astro.props;
42-
const { Content } = await render(idea);
32+
const { idea, prevIdea, nextIdea } = Astro.props;
33+
const { Content } = await render(idea);
4334
---
4435

4536
<Layout>
@@ -68,7 +59,7 @@ const { Content } = await render(idea);
6859
</div>
6960

7061
<!-- Article -->
71-
<div class="flex flex-col w-full flex-1 sm:max-w-2xl sm:shadow-lg prose prose-sm sm:prose-lg break-words sm:break-normal p-8">
62+
<div class="flex flex-col w-full flex-1 sm:max-w-2xl sm:shadow-lg prose prose-sm sm:prose-lg break-words sm:break-normal p-4 sm:p-8">
7263
<Content/>
7364
</div>
7465
</div>
@@ -78,34 +69,36 @@ const { Content } = await render(idea);
7869
<!-- Spacing -->
7970
<div class="h-4"></div>
8071

81-
<div class="flex flex-row w-3xs sm:w-2xl justify-center gap-2">
82-
{ prev && (
83-
<a href={`/idea/${slugOf(prev)}`} class="flex flex-row flex-1 items-center rounded-lg hover:bg-base-200">
84-
<ArrowLeft class="w-10 h-10"/>
85-
<div class="divider divider-horizontal"></div>
86-
<div class="flex flex-col flex-1 items-start">
87-
<span class="text-lg sm:text-xl font-bold">
88-
{ prev.data.title }
89-
</span>
90-
</div>
91-
</a>
92-
)}
93-
94-
{ next && (
95-
<a href={`/idea/${slugOf(next)}`} class="flex flex-row flex-1 items-center rounded-lg hover:bg-base-200">
96-
<div class="flex flex-col flex-1 items-end">
97-
<span class="text-lg sm:text-xl font-bold">
98-
{ next.data.title }
99-
</span>
100-
</div>
101-
<div class="divider divider-horizontal"></div>
102-
<ArrowRight class="w-10 h-10"/>
72+
<div class="flex flex-row w-fit sm:w-2xl justify-center items-center gap-2">
73+
74+
<a href={`/idea/${Idea.slug(prevIdea)}`} class="flex flex-row flex-1 p-2 self-stretch items-center justify-center rounded-lg hover:bg-base-200">
75+
<ArrowLeft class="w-10 h-10"/>
76+
<div class="hidden sm:flex divider divider-horizontal"></div>
77+
<span class="hidden sm:inline text-lg font-bold flex-1 text-center">
78+
{ prevIdea.data.title }
79+
</span>
80+
</a>
81+
82+
<span class="tooltip tooltip-bottom" data-tip="More Ideas">
83+
<a href="/idea" class="btn btn-xl btn-ghost btn-circle">
84+
<Ellipsis class="w-10 h-10"/>
10385
</a>
104-
)}
86+
</span>
87+
88+
89+
<a href={`/idea/${Idea.slug(nextIdea)}`} class="flex flex-row flex-1 p-2 self-stretch items-center justify-center rounded-lg hover:bg-base-200">
90+
<span class="hidden sm:inline text-lg font-bold flex-1 text-center">
91+
{ nextIdea.data.title }
92+
</span>
93+
<div class="hidden sm:flex divider divider-horizontal"></div>
94+
<ArrowRight class="w-10 h-10"/>
95+
</a>
96+
97+
10598
</div>
10699

107100
<!-- Spacing -->
108-
<div class="h-4"></div>
101+
<div class="h-12"></div>
109102
</div>
110103
</Drawer>
111104
</Layout>

‎src/pages/idea/index.astro‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,41 @@
11
---
22
import Layout from "@layouts/Layout.astro";
33
import Drawer from "@layouts/Drawer.astro";
4+
import { getCollection } from "astro:content";
5+
import { Lightbulb } from "lucide-astro";
6+
import { Idea } from "@tool/idea";
7+
8+
const ideas = (await getCollection("ideas"))
9+
.sort((a, b) => (
10+
b.data.pubDate!.valueOf() -
11+
a.data.pubDate!.valueOf()
12+
))
13+
414
---
515

616
<Layout>
717
<Drawer>
8-
This is the idea page
18+
<div class="flex flex-col w-full h-full items-center">
19+
<div class="h-4"></div>
20+
<span class="text-6xl font-bold text-center">Ideas</span>
21+
<div class="h-4"></div>
22+
<div class="grid grid-cols-1 lg:grid-cols-2 sm:max-w-sm lg:max-w-4xl">
23+
{ ideas.map(idea => (
24+
<a href={`/idea/${Idea.slug(idea)}`} class="flex flex-row items-center p-4 rounded-lg hover:bg-base-200">
25+
<Lightbulb class="hidden sm:inline w-10 h-10"/>
26+
<div class="hidden sm:flex divider divider-horizontal"></div>
27+
<div class="flex flex-col flex-1 items-start">
28+
<span class="text-lg lg:text-xl font-bold">{idea.data.title }</span>
29+
<div class="text-sm lg:text-lg flex flex-row gap-1 ">
30+
<span>{idea.data.author }</span>
31+
{ idea.data.author && "|" }
32+
<span>{idea.data.pubDate?.toDateString()}</span>
33+
</div>
34+
</div>
35+
</a>
36+
))}
37+
</div>
38+
39+
</div>
940
</Drawer>
1041
</Layout>

‎src/pages/index.astro‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,16 @@ import Github from "@icons/Github.astro";
33
import Itchio from "@icons/Itchio.astro";
44
import Drawer from "@layouts/Drawer.astro";
55
import Layout from "@layouts/Layout.astro";
6-
import { CircleHelp, Ellipsis, LibraryBig, Lightbulb } from "lucide-astro";
7-
8-
import Tags from "@components/Tags.astro";
96
import { getCollection } from "astro:content";
7+
import { CircleHelp, Ellipsis, LibraryBig, Lightbulb } from "lucide-astro";
108
11-
function slug(idea: any) {
12-
let slug = idea.filePath
13-
slug = slug?.replace(/^idea\//, "");
14-
slug = slug?.replace(/\.mdx?$/, "");
15-
return slug;
16-
}
9+
import { Idea } from "@tool/idea";
1710
1811
const ideas = (await getCollection("ideas"))
19-
.filter(idea => idea.data.pubDate)
20-
.sort((a, b) => a.data.pubDate!.valueOf() - b.data.pubDate!.valueOf())
12+
.sort((a, b) => (
13+
b.data.pubDate!.valueOf() -
14+
a.data.pubDate!.valueOf()
15+
))
2116
.slice(0, 3)
2217
---
2318

@@ -63,7 +58,7 @@ const ideas = (await getCollection("ideas"))
6358
Recent Ideas
6459
</span>
6560
{ideas.map(idea => (
66-
<a href={`/idea/${slug(idea)}`} class="w-sm sm:w-md flex flex-row items-center p-4 rounded-lg hover:bg-base-200">
61+
<a href={`/idea/${Idea.slug(idea)}`} class="w-sm sm:w-md flex flex-row items-center p-4 rounded-lg hover:bg-base-200">
6762
<Lightbulb class="w-10 h-10"/>
6863
<div class="divider divider-horizontal"></div>
6964
<div class="flex flex-col flex-1 items-start">

‎src/tool/idea.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export namespace Idea {
2+
export function slug(idea: any) {
3+
let slug = idea.filePath
4+
slug = slug?.replace(/^idea\//, "");
5+
slug = slug?.replace(/\.mdx?$/, "");
6+
return slug;
7+
}
8+
}

‎tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
"@layouts/*": ["src/layouts/*"],
1818
"@components/*": ["src/components/*"],
1919
"@icons/*": ["src/components/icons/*"],
20-
"@fun/*": ["src/components/fun/*"]
20+
"@fun/*": ["src/components/fun/*"],
21+
"@tool/*": ["src/tool/*"]
2122
}
2223
}
2324
}

0 commit comments

Comments
 (0)