git.iko.soy/urbit.org
on master help sign in
pages: add queries for blog, events pages for tags
commit2c85488aaf9ec6451fa2ff3c71a5d5d30acfe3de authorMatilde Park <matilde.park@urbit.org> dateTue 15 Nov 2022, 18:03 (4 years ago) parent0b92a1c
3 files changed+44−16
compare with master
unifiedsplit
lib/constants.js+1 pages/blog.js+26−13 pages/events.js+17−3
lib/constants.js+1
@@ -24,6 +24,7 @@ export const eventKeys = [
2424 "dark",
2525 "timezone",
2626 "darken_image",
27+ "tags"
2728];
2829
2930export const postKeys = [
pages/blog.js+26−13
@@ -14,8 +14,14 @@ import Footer from "../components/Footer";
1414import Header from "../components/Header";
1515import BackgroundImage from "../components/BackgroundImage";
1616import { contact } from "../lib/constants";
17+import { useRouter } from "next/router";
1718
1819export default function Blog({ posts, search }) {
20+ const router = useRouter();
21+ const { tag } = router.query;
22+
23+ const filteredPosts = tag ? posts.filter((e) => e?.tags?.includes(tag)) : posts;
24+
1925 const post = {
2026 title: "Blog",
2127 description:
@@ -31,20 +37,27 @@ export default function Blog({ posts, search }) {
3137 <SingleColumn>
3238 <Header search={search} />
3339 <Section>
34− <h1 className="pb-16">Blog</h1>
35− <div className="md:columns-2 gap-x-8">
36− <p className="pb-6 md:pb-0">
37− Stories from the broader Urbit community, the Urbit Foundation,
38− and the many people contributing to Urbit.
39− </p>
40− <p>
41− <a href={contact.newsletter}>Subscribe</a> to the Urbit Newsletter
42− for regular updates, including new blog posts and events.
43− </p>
44− </div>
40+ {tag ?
41+ <><h1 className="pb-16">{filteredPosts.length} posts tagged "{tag}"</h1>
42+ <p>
43+ For more posts, return to the <Link href="/blog">blog index</Link>.
44+ </p>
45+ </>
46+ : <><h1 className="pb-16">Blog</h1>
47+ <div className="md:columns-2 gap-x-8">
48+ <p className="pb-6 md:pb-0">
49+ Stories from the broader Urbit community, the Urbit Foundation,
50+ and the many people contributing to Urbit.
51+ </p>
52+ <p>
53+ <a href={contact.newsletter}>Subscribe</a> to the Urbit Newsletter
54+ for regular updates, including new blog posts and events.
55+ </p>
56+ </div>
57+ </>}
4558 </Section>
4659 <Section>
47− {posts.map((post) => {
60+ {filteredPosts.map((post) => {
4861 const date = generateDisplayDate(post.date);
4962 return (
5063 <div key={post.slug} className="mb-20 cursor-pointer">
@@ -107,7 +120,7 @@ export default function Blog({ posts, search }) {
107120
108121export async function getStaticProps() {
109122 const posts = getAllPosts(
110− ["title", "slug", "date", "description", "extra"],
123+ ["title", "slug", "date", "description", "tags", "extra"],
111124 "blog",
112125 "date"
113126 );
pages/events.js+17−3
@@ -15,11 +15,15 @@ import Footer from "../components/Footer";
1515import Header from "../components/Header";
1616import EventPreview from "../components/EventPreview";
1717import { getAllEvents, pair } from "../lib/lib";
18+import { useRouter } from "next/router";
1819
1920import { eventKeys } from "../lib/constants";
2021
2122export default function Events({ events, search }) {
2223 const [selected, setSelected] = useState("All");
24+ const router = useRouter();
25+ const { tag } = router.query;
26+
2327 const post = {
2428 title: "Events",
2529 description: "In-person, remote, and recorded events about Urbit.",
@@ -27,6 +31,13 @@ export default function Events({ events, search }) {
2731
2832 const now = DateTime.now();
2933
34+ const tagFilter = (event) => {
35+ if (tag) {
36+ return event?.tags?.includes(tag)
37+ } else {
38+ return true;
39+ }
40+ }
3041 const selectionFilter = (event) => {
3142 if (selected === "All") {
3243 return true;
@@ -38,7 +49,7 @@ export default function Events({ events, search }) {
3849 };
3950
4051 const pastEvents = pair(
41− events.filter(selectionFilter).filter((event) => {
52+ events.filter(selectionFilter).filter(tagFilter).filter((event) => {
4253 const ends = generateRealtimeDate(event.ends);
4354 return ends < now;
4455 })
@@ -47,6 +58,7 @@ export default function Events({ events, search }) {
4758 const futureEvents = pair(
4859 events
4960 .filter(selectionFilter)
61+ .filter(tagFilter)
5062 .filter((event) => {
5163 const starts = generateRealtimeDate(event.starts);
5264 return starts > now;
@@ -64,7 +76,7 @@ export default function Events({ events, search }) {
6476 );
6577
6678 const happeningNow = pair(
67− events.filter(selectionFilter).filter((event) => {
79+ events.filter(selectionFilter).filter(tagFilter).filter((event) => {
6880 const starts = generateRealtimeDate(event.starts);
6981 const ends = generateRealtimeDate(event.ends);
7082 return starts < DateTime.now() && ends > now;
@@ -96,7 +108,9 @@ export default function Events({ events, search }) {
96108 <Header search={search} />
97109 <Section>
98110 <div className="measure">
99− <h1 className="pb-16">Events</h1>
111+ {tag
112+ ? <h1 className="pb-16">{events.filter(tagFilter).length} events tagged "{tag}"</h1>
113+ : <h1 className="pb-16">Events</h1>}
100114 <div className="flex space-x-2">
101115 <SelectedButton selection="All" text="All Events" />
102116 <SelectedButton selection="In-person" text="In-person" />