Skip to content

Commit c5dd7d5

Browse files
jacomyaljacomyal
committed
Drafts plugin page
1 parent 34ad66c commit c5dd7d5

7 files changed

Lines changed: 254 additions & 81 deletions

File tree

‎package-lock.json‎

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

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,17 @@
1111
},
1212
"dependencies": {
1313
"@astrojs/check": "^0.9.4",
14-
"@iconify-json/bi": "^1.2.6",
15-
"@iconify-json/ph": "^1.2.2",
1614
"@astrojs/react": "^4.3.0",
1715
"@astropub/md": "^1.0.0",
1816
"@cospired/i18n-iso-languages": "^4.2.0",
17+
"@iconify-json/bi": "^1.2.6",
18+
"@iconify-json/ph": "^1.2.2",
1919
"@ouestware/hooks": "^0.0.1-alpha.6",
2020
"astro": "^5.13.2",
2121
"astro-icon": "^1.1.5",
2222
"bootstrap": "^5.3.7",
2323
"lodash-es": "^4.17.21",
24+
"marked": "^16.2.0",
2425
"prettier": "^3.6.2",
2526
"prettier-plugin-astro": "^0.14.1",
2627
"sass": "^1.90.0",

‎src/layouts/Layout.astro‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22
import "../styles/main.scss";
33
import { Image } from "astro:assets";
44
import { Icon } from "astro-icon/components";
5+
6+
interface Props {
7+
class?: string;
8+
}
9+
10+
const { class: className } = Astro.props;
511
---
612

713
<!doctype html>
@@ -20,7 +26,7 @@ import { Icon } from "astro-icon/components";
2026
/>
2127
<title>Gephi - The Open Graph Viz Platform</title>
2228
</head>
23-
<body>
29+
<body class={className}>
2430
<nav class="navbar navbar-expand">
2531
<div class="container">
2632
<a href="/" class="navbar-brand mr-auto mb-0">

‎src/pages/desktop/plugins/[id].astro‎

Lines changed: 177 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
---
2-
import { reverse, sortBy, toPairs } from "lodash-es";
2+
import { divide, isEmpty } from "lodash-es";
33
import Layout from "../../../layouts/Layout.astro";
44
import type { Plugin } from "./type";
5+
import { Icon } from "astro-icon/components";
6+
import { marked } from "marked";
57
68
interface Props {
79
plugin: Plugin;
@@ -21,70 +23,183 @@ export async function getStaticPaths() {
2123
2224
const { id } = Astro.params;
2325
const { plugin } = Astro.props;
24-
const gephiVersionsChrono = reverse(
25-
sortBy(toPairs(plugin.versions), ([v, version]) => new Date(version.last_update)),
26-
).map(([v]) => v);
27-
const latestGephiVersion = gephiVersionsChrono[0];
26+
27+
let readme = "";
28+
try {
29+
readme = marked(plugin.readme);
30+
} catch (err) {
31+
console.log(`README.md markdown generation failed for plugin ${plugin.name}.`);
32+
}
2833
---
2934

30-
<Layout>
31-
<header><h1>{plugin.name}</h1></header>
32-
<main class="plugin-page">
33-
<!-- author -->
34-
{
35-
(
36-
<h2 class="authors">
37-
by{" "}
38-
{plugin.authors.map((a) =>
39-
a.link ? (
40-
<a class="author" href={a.link}>
41-
{a.name}
42-
</a>
43-
) : (
44-
<span class="author">a.name</span>
45-
),
46-
)}
47-
</h2>
48-
)
49-
}
50-
<div class="info-box">
51-
<div>
52-
<a class="btn btn-primary" href={plugin.versions[latestGephiVersion].url}
53-
>Download for Gephi {latestGephiVersion}</a
54-
>
35+
<Layout class="plugin-page">
36+
<header class="banner">
37+
<div class="container">
38+
<div class="py-3">
39+
<a class="text-white" href="/desktop">Gephi</a> > <a class="text-white" href="/desktop/plugins">Gephi plugins</a
40+
> > <a class="text-white" href={`/desktop/plugins?categories=${plugin.category}`}>{plugin.category} plugins</a>
41+
</div>
42+
43+
<div class="content my-3 pb-5 pt-3">
44+
{
45+
!!plugin.images?.length && (
46+
<img
47+
class="flex-shrink-0"
48+
src={`https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${plugin.images[0].image}`}
49+
/>
50+
)
51+
}
52+
53+
<section class="flex-grow-1">
54+
<div class="">
55+
<h1>{plugin.name}</h1>
56+
<div class="fs-4">last updated on {plugin.last_update}</div>
57+
<p class="fs-4 mt-3">{plugin.short_description}</p>
58+
</div>
59+
</section>
5560
</div>
56-
{
57-
gephiVersionsChrono.length > 1 && (
58-
<details>
59-
<summary>For older versions</summary>
60-
<ul class="list-unstyled">
61-
{gephiVersionsChrono.slice(1).map((vId) => (
62-
<li>
63-
<a class="btn btn-secondary" href={plugin.versions[vId].url}>
64-
for Gephi {vId}
65-
</a>
66-
</li>
67-
))}
68-
</ul>
69-
</details>
70-
)
71-
}
72-
<div>Last release on {plugin.last_update}</div>
73-
<div><a href={plugin.sourcecode}>source code</a> ({plugin.license})</div>
7461
</div>
75-
<article>
76-
<!-- cover -->
77-
{
78-
plugin.images && plugin.images[0] && (
79-
<img
80-
class="cover"
81-
src={`https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${plugin.images[0].image}`}
82-
/>
83-
)
84-
}
85-
<!-- Description -->
86-
87-
<p class="description" set:html={plugin.long_description} />
88-
</article>
62+
</header>
63+
64+
<main class="pt-5">
65+
<section class="container pb-5 plugin-page">
66+
<div class="row">
67+
<div>
68+
<section class="mb-3">
69+
<h2 class="fs-4">
70+
<Icon name="ph:article" />
71+
Description:
72+
</h2>
73+
<div class="fs-5 plugin-description"><div set:html={plugin.long_description} /></div>
74+
</section>
75+
76+
<section class="mb-3">
77+
<h2 class="fs-4">
78+
<Icon name={plugin.authors.length > 1 ? "ph:users" : "ph:user"} />
79+
{plugin.authors.length > 1 ? "Authors" : "Author"}:
80+
</h2>
81+
{
82+
plugin.authors?.length > 0 ? (
83+
<ul class="list-unstyled">
84+
{plugin.authors.flatMap((author) => (
85+
<li>
86+
{author.email && [
87+
<a class="text-decoration-none" href={`mailto:${author.email}`}>
88+
<Icon name="ph:envelope" />
89+
</a>,
90+
" ",
91+
]}
92+
{author.link && [
93+
<a class="text-decoration-none" href={author.link}>
94+
<Icon name="ph:link" />
95+
</a>,
96+
" ",
97+
]}
98+
{author.name}
99+
</li>
100+
))}
101+
</ul>
102+
) : (
103+
<div class="text-muted">No author specified.</div>
104+
)
105+
}
106+
</section>
107+
108+
<section class="mb-3">
109+
<h2 class="fs-4">
110+
<Icon name="ph:code" /> Sources:
111+
</h2>
112+
{
113+
plugin.sourcecode ? (
114+
<a href={plugin.sourcecode}>{plugin.sourcecode.replace(/^https?:\/\//, "")}</a>
115+
) : (
116+
<div class="text-muted">No link specified.</div>
117+
)
118+
}
119+
</section>
120+
121+
<section class="mb-3">
122+
<h2 class="fs-4">
123+
<Icon name="ph:scales" /> License:
124+
</h2>
125+
{plugin.license ? <div>{plugin.license}</div> : <div class="text-muted">No link specified.</div>}
126+
</section>
127+
128+
<section class="mb-3">
129+
<h2 class="fs-4">
130+
<Icon name="ph:tag" /> Compatible Gephi versions:
131+
</h2>
132+
<div class="alert alert-primary" role="alert">
133+
When possible, you should directly install this plugin from Gephi{" "}
134+
<strong>
135+
<pre class="d-inline">Tools > Plugins</pre>
136+
</strong>
137+
menu. The following download links may be useful to spread this plugin to people with no internet access, for
138+
instance.
139+
</div>
140+
{
141+
!isEmpty(plugin.versions) ? (
142+
<ul class="list-unstyled">
143+
{Object.keys(plugin.versions)
144+
.reverse()
145+
.map((v) => (
146+
<li>
147+
<a href={plugin.versions[v].url} class="text-decoration-none">
148+
<Icon name="ph:download" />
149+
Download plugin for Gephi v{v}
150+
</a>
151+
</li>
152+
))}
153+
</ul>
154+
) : (
155+
<div class="text-muted">No compatible version specified.</div>
156+
)
157+
}
158+
</section>
159+
</div>
160+
161+
{
162+
plugin.images?.length > 1 && (
163+
<section class="mb-4">
164+
<h2 class="fs-4">
165+
<Icon name="ph:image" /> Related images:
166+
</h2>
167+
<div class="thumbnails">
168+
{plugin.images.map(({ image }) => (
169+
<a
170+
href={`https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${image}`}
171+
class=""
172+
>
173+
<img
174+
class="border img-fluid"
175+
src={`https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${image}`}
176+
/>
177+
</a>
178+
))}
179+
</div>
180+
</section>
181+
)
182+
}
183+
184+
{
185+
readme && (
186+
<Fragment>
187+
<hr class="my-5" />
188+
189+
<section id="readme">
190+
<h2 class="fs-4">
191+
<a class="text-decoration-none" href="#readme">
192+
<Icon name="ph:hash" />
193+
</a>{" "}
194+
README:
195+
</h2>
196+
197+
<div set:html={readme} class="plugin-readme" />
198+
</section>
199+
</Fragment>
200+
)
201+
}
202+
</div>
203+
</section>
89204
</main>
90205
</Layout>

‎src/pages/desktop/plugins/index.astro‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,16 +43,28 @@ const pluginsData: Plugin[] | null = pluginsDataRequest.ok
4343
<div class="d-flex flex-column gap-1">
4444
<img
4545
alt=""
46-
class="card-img-top plugin-image mb-2"
46+
class="card-img-top plugin-image mb-2 border"
4747
src={
4848
p.images && p.images[0]
4949
? `https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${p.images[0].image}`
5050
: "/plugins/default-screenshot.jpg"
5151
}
5252
/>
53+
<div>
54+
<small class="small badge text-bg-light border border-primary text-primary">
55+
{p.category}
56+
</small>
57+
</div>
5358
<h3 class="text-primary m-0 text-truncate fs-4">{p.name}</h3>
5459
<p class="fs-5 m-0">{p.short_description}</p>
5560
<div class="text-muted">last updated on {p.last_update}</div>
61+
<div class="d-flex flex-wrap gap-1">
62+
{Object.keys(p.versions)
63+
.reverse()
64+
.map((v) => (
65+
<span class="badge text-bg-primary">{v}</span>
66+
))}
67+
</div>
5668
</div>
5769
</a>
5870
</article>

0 commit comments

Comments
 (0)