Skip to content

Commit 10fcc4a

Browse files
birkskyumbirkskyum
committed
format
1 parent 407e88b commit 10fcc4a

File tree

3 files changed

+146
-96
lines changed

3 files changed

+146
-96
lines changed

‎src/content/roadmap/maplibre-gl-js/writing-systems/index.mdx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,6 @@ import { Image } from "astro:assets";
4747
</p>
4848
</div>
4949

50-
51-
5250
See [#4564](https://github.com/maplibre/maplibre-gl-js/pull/4564) which will allow rendering local (web) fonts with TinySDF.
5351

5452
Also see [maplibre-gl-complex-text](https://github.com/wipfli/maplibre-gl-complex-text) for a plugin-based approach for rendering complex texts.

‎src/pages/roadmap/[project]/index.astro‎

Lines changed: 92 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,26 @@ import { Image } from "astro:assets";
55
import { getCollection } from "astro:content";
66
77
export const PROJECTS = [
8-
{ id: "general", label: "General", description: "Organizational initiatives." },
9-
{ id: "maplibre-native", label: "MapLibre Native", description: "Roadmap items for the native SDKs." },
10-
{ id: "maplibre-gl-js", label: "MapLibre GL JS", description: "Roadmap items for the web SDKs." },
11-
{ id: "maplibre-tiles", label: "MapLibre Tiles", description: "Work on the MapLibre Tiles specification and tooling." },
8+
{
9+
id: "general",
10+
label: "General",
11+
description: "Organizational initiatives.",
12+
},
13+
{
14+
id: "maplibre-native",
15+
label: "MapLibre Native",
16+
description: "Roadmap items for the native SDKs.",
17+
},
18+
{
19+
id: "maplibre-gl-js",
20+
label: "MapLibre GL JS",
21+
description: "Roadmap items for the web SDKs.",
22+
},
23+
{
24+
id: "maplibre-tiles",
25+
label: "MapLibre Tiles",
26+
description: "Work on the MapLibre Tiles specification and tooling.",
27+
},
1228
{ id: "martin", label: "Martin", description: "Tile server roadmap items." },
1329
];
1430
@@ -25,7 +41,8 @@ export async function getStaticPaths() {
2541
}
2642
2743
const projectId = Astro.params.project ?? "general";
28-
const projectMeta = PROJECTS.find((project) => project.id === projectId) ?? PROJECTS[0];
44+
const projectMeta =
45+
PROJECTS.find((project) => project.id === projectId) ?? PROJECTS[0];
2946
3047
const roadmapItems = await getCollection("roadmapItems");
3148
const projectItems = roadmapItems.filter(
@@ -34,8 +51,10 @@ const projectItems = roadmapItems.filter(
3451
3552
function sortByReleaseDateDesc(items) {
3653
return items.slice().sort((a, b) => {
37-
const timeA = a.data.released instanceof Date ? a.data.released.getTime() : 0;
38-
const timeB = b.data.released instanceof Date ? b.data.released.getTime() : 0;
54+
const timeA =
55+
a.data.released instanceof Date ? a.data.released.getTime() : 0;
56+
const timeB =
57+
b.data.released instanceof Date ? b.data.released.getTime() : 0;
3958
return timeB - timeA;
4059
});
4160
}
@@ -52,9 +71,9 @@ function formatDate(dateValue) {
5271
}
5372
---
5473

55-
<Layout title={`${projectMeta.label} Roadmap`}>
56-
<TitleHeader>{projectMeta.label} Roadmap</TitleHeader>
57-
<style>
74+
<Layout title={`${projectMeta.label} Roadmap`}>
75+
<TitleHeader>{projectMeta.label} Roadmap</TitleHeader>
76+
<style>
5877
.project-tabs {
5978
display: flex;
6079
flex-wrap: wrap;
@@ -70,7 +89,9 @@ function formatDate(dateValue) {
7089
background-color: #102036;
7190
color: inherit;
7291
text-decoration: none;
73-
transition: background-color 0.2s ease, border-color 0.2s ease,
92+
transition:
93+
background-color 0.2s ease,
94+
border-color 0.2s ease,
7495
color 0.2s ease;
7596
}
7697

@@ -119,63 +140,70 @@ function formatDate(dateValue) {
119140
</style>
120141
<div class="container roadmap">
121142
<nav class="project-tabs" aria-label="Roadmap sections">
122-
{PROJECTS.map((tab) => (
123-
<a
124-
href={`/roadmap/${tab.id}`}
125-
class={`project-tab ${tab.id === projectMeta.id ? "active" : ""}`}
126-
>
127-
{tab.label}
128-
</a>
129-
))}
143+
{
144+
PROJECTS.map((tab) => (
145+
<a
146+
href={`/roadmap/${tab.id}`}
147+
class={`project-tab ${tab.id === projectMeta.id ? "active" : ""}`}
148+
>
149+
{tab.label}
150+
</a>
151+
))
152+
}
130153
</nav>
131154

132155
<p>{projectMeta.description}</p>
133156

134-
{projectItems.length ? (
135-
sections.map((section) => {
136-
const items = sortByReleaseDateDesc(
137-
projectItems.filter((item) => item.data.status === section.status),
138-
);
139-
140-
if (!items.length) {
141-
return null;
142-
}
143-
144-
return (
145-
<section>
146-
<h2>{section.title}</h2>
147-
<div class="cards-grid">
148-
{items.map((item) => {
149-
const slug = item.id.split("/").slice(-1)[0];
150-
151-
return (
152-
<div class="card">
153-
<Image
154-
class="card-img-top"
155-
src={item.data.heroImage}
156-
alt={item.data.title}
157-
style={`width: 100%; height: 250px; object-fit: ${item.data.heroImageFit || "cover"};`}
158-
/>
159-
<div class="card-body">
160-
<h5 class="card-title">{item.data.title}</h5>
161-
<a href={`/roadmap/${projectMeta.id}/${slug}`} class="btn btn-primary">
162-
Read more...
163-
</a>
164-
{item.data.released ? (
165-
<p class="card-release">
166-
Released: {formatDate(item.data.released)}
167-
</p>
168-
) : null}
157+
{
158+
projectItems.length ? (
159+
sections.map((section) => {
160+
const items = sortByReleaseDateDesc(
161+
projectItems.filter((item) => item.data.status === section.status),
162+
);
163+
164+
if (!items.length) {
165+
return null;
166+
}
167+
168+
return (
169+
<section>
170+
<h2>{section.title}</h2>
171+
<div class="cards-grid">
172+
{items.map((item) => {
173+
const slug = item.id.split("/").slice(-1)[0];
174+
175+
return (
176+
<div class="card">
177+
<Image
178+
class="card-img-top"
179+
src={item.data.heroImage}
180+
alt={item.data.title}
181+
style={`width: 100%; height: 250px; object-fit: ${item.data.heroImageFit || "cover"};`}
182+
/>
183+
<div class="card-body">
184+
<h5 class="card-title">{item.data.title}</h5>
185+
<a
186+
href={`/roadmap/${projectMeta.id}/${slug}`}
187+
class="btn btn-primary"
188+
>
189+
Read more...
190+
</a>
191+
{item.data.released ? (
192+
<p class="card-release">
193+
Released: {formatDate(item.data.released)}
194+
</p>
195+
) : null}
196+
</div>
169197
</div>
170-
</div>
171-
);
172-
})}
173-
</div>
174-
</section>
175-
);
176-
})
177-
) : (
178-
<p class="empty-state">No roadmap items yet.</p>
179-
)}
198+
);
199+
})}
200+
</div>
201+
</section>
202+
);
203+
})
204+
) : (
205+
<p class="empty-state">No roadmap items yet.</p>
206+
)
207+
}
180208
</div>
181209
</Layout>

‎src/pages/roadmap/index.astro‎

Lines changed: 54 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,31 @@ import { getCollection } from "astro:content";
55
title: "Roadmap";
66
77
const projectTabs = [
8-
{ id: "general", label: "General", description: "Cross-project efforts and organizational initiatives." },
9-
{ id: "maplibre-native", label: "MapLibre Native", description: "Roadmap for the native SDKs." },
10-
{ id: "maplibre-gl-js", label: "MapLibre GL JS", description: "Progress and ideas for the web SDK." },
11-
{ id: "maplibre-tiles", label: "MapLibre Tiles", description: "Evolution of the MapLibre Tiles specification and tooling." },
12-
{ id: "martin", label: "Martin", description: "Planned work for the Martin tile server." },
8+
{
9+
id: "general",
10+
label: "General",
11+
description: "Cross-project efforts and organizational initiatives.",
12+
},
13+
{
14+
id: "maplibre-native",
15+
label: "MapLibre Native",
16+
description: "Roadmap for the native SDKs.",
17+
},
18+
{
19+
id: "maplibre-gl-js",
20+
label: "MapLibre GL JS",
21+
description: "Progress and ideas for the web SDK.",
22+
},
23+
{
24+
id: "maplibre-tiles",
25+
label: "MapLibre Tiles",
26+
description: "Evolution of the MapLibre Tiles specification and tooling.",
27+
},
28+
{
29+
id: "martin",
30+
label: "Martin",
31+
description: "Planned work for the Martin tile server.",
32+
},
1333
];
1434
1535
const sections = [
@@ -65,7 +85,9 @@ const projectStats = Object.fromEntries(
6585
text-decoration: none;
6686
height: 100%;
6787
border: 1px solid rgba(255, 255, 255, 0.1);
68-
transition: transform 0.2s ease, border-color 0.2s ease;
88+
transition:
89+
transform 0.2s ease,
90+
border-color 0.2s ease;
6991
}
7092

7193
.project-card:hover,
@@ -108,34 +130,36 @@ const projectStats = Object.fromEntries(
108130
</style>
109131
<div class="container roadmap">
110132
<p class="roadmap-intro">
111-
Pick a project to explore its roadmap. Each page breaks down initiatives by
112-
status so you can see what is underway, under consideration, or already
133+
Pick a project to explore its roadmap. Each page breaks down initiatives
134+
by status so you can see what is underway, under consideration, or already
113135
released.
114136
</p>
115137

116138
<div class="project-grid">
117-
{projectTabs.map((tab) => {
118-
const stats = projectStats[tab.id];
119-
const hasItems = stats.total > 0;
120-
121-
return (
122-
<a class="project-card" href={`/roadmap/${tab.id}`}>
123-
<h2>{tab.label}</h2>
124-
<p>{tab.description}</p>
125-
{hasItems ? (
126-
<ul class="status-list">
127-
{stats.byStatus.map(({ section, count }) => (
128-
<li>
129-
<strong>{count}</strong> {section.label}
130-
</li>
131-
))}
132-
</ul>
133-
) : (
134-
<span class="empty-tag">No roadmap items yet</span>
135-
)}
136-
</a>
137-
);
138-
})}
139+
{
140+
projectTabs.map((tab) => {
141+
const stats = projectStats[tab.id];
142+
const hasItems = stats.total > 0;
143+
144+
return (
145+
<a class="project-card" href={`/roadmap/${tab.id}`}>
146+
<h2>{tab.label}</h2>
147+
<p>{tab.description}</p>
148+
{hasItems ? (
149+
<ul class="status-list">
150+
{stats.byStatus.map(({ section, count }) => (
151+
<li>
152+
<strong>{count}</strong> {section.label}
153+
</li>
154+
))}
155+
</ul>
156+
) : (
157+
<span class="empty-tag">No roadmap items yet</span>
158+
)}
159+
</a>
160+
);
161+
})
162+
}
139163
</div>
140164
</div>
141165
</Layout>

0 commit comments

Comments
 (0)