Skip to content

Commit bdc6cd9

Browse files
jacomyaljacomyal
committed
[layout] Makes header responsive
Details: - Upgrades all dependencies (should have been in a different commit, but hey) - Implements JavaScript-less burger menu for mobile for the header - Renames "How to" as "Quickstart" - Adds link to Quickstart in the header
1 parent 499bc5f commit bdc6cd9

11 files changed

Lines changed: 747 additions & 263 deletions

File tree

‎package-lock.json‎

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

‎package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,22 @@
1111
},
1212
"dependencies": {
1313
"@astrojs/check": "^0.9.4",
14-
"@astrojs/markdown-remark": "^6.3.6",
15-
"@astrojs/react": "^4.3.0",
14+
"@astrojs/markdown-remark": "^6.3.7",
15+
"@astrojs/react": "^4.4.0",
1616
"@astropub/md": "^1.0.0",
1717
"@cospired/i18n-iso-languages": "^4.2.0",
1818
"@iconify-json/bi": "^1.2.6",
1919
"@iconify-json/ph": "^1.2.2",
2020
"@ouestware/hooks": "^0.0.1-alpha.6",
21-
"astro": "^5.13.2",
21+
"astro": "^5.14.1",
2222
"astro-icon": "^1.1.5",
23-
"bootstrap": "^5.3.7",
23+
"bootstrap": "^5.3.8",
24+
"classnames": "^2.5.1",
2425
"lodash-es": "^4.17.21",
25-
"marked": "^16.2.0",
26+
"marked": "^16.3.0",
2627
"prettier": "^3.6.2",
2728
"prettier-plugin-astro": "^0.14.1",
28-
"sass": "^1.90.0",
29+
"sass": "^1.93.2",
2930
"typescript": "^5.9.2"
3031
},
3132
"devDependencies": {

‎src/layouts/Layout.astro‎

Lines changed: 86 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,31 @@
22
import "../styles/main.scss";
33
import { Image } from "astro:assets";
44
import { Icon } from "astro-icon/components";
5+
import cx from "classnames";
56
67
interface Props {
78
class?: string;
9+
pageId?: string;
810
}
911
10-
const { class: className } = Astro.props;
12+
const { class: className, pageId } = Astro.props;
13+
14+
const pages = [
15+
{ id: "about", href: "/about", title: "About" },
16+
{ id: "quickstart", href: "/quickstart", title: "Quickstart" },
17+
{ id: "faq", href: "/faq", title: "FAQ" },
18+
{ id: "blog", href: "https://gephi.wordpress.com", title: "Blog" },
19+
{ id: "github", href: "https://github.com/gephi", title: "GitHub" },
20+
// { id: "help", href: "/help", title: "Help" },
21+
// { id: "contribute", href: "/contribute", title: "Contribute" },
22+
];
23+
const appPages = [
24+
{ id: "desktop", href: "/desktop", title: "Gephi" },
25+
{ id: "desktop-plugins", href: "/desktop/plugins", title: "Gephi plugins" },
26+
{ id: "lite", href: "/lite", title: "Gephi Lite" },
27+
// { id: "toolkit", href: "/toolkit", title: "Gephi Toolkit" },
28+
{ id: "gephisto", href: "https://jacomyma.github.io/gephisto", title: "Gephisto" },
29+
];
1130
---
1231

1332
<!doctype html>
@@ -27,53 +46,77 @@ const { class: className } = Astro.props;
2746
<title>Gephi - The Open Graph Viz Platform</title>
2847
</head>
2948
<body class={className}>
30-
<nav class="navbar navbar-expand">
49+
<nav class="navbar navbar-expand-md">
3150
<div class="container">
32-
<a href="/" class="navbar-brand mr-auto mb-0">
51+
<a href="/" class="navbar-brand mr-auto mb-0 flex-grow-1">
3352
<Image src="/gephi-logo.svg" alt="Gephi logo" width="50" height="50" />
3453
<span class="ms-2 gephi-font" style="font-weight: 600;">Gephi</span>
3554
</a>
36-
<ul class="navbar-nav">
37-
<li class="nav-item">
38-
<a class="nav-link" href="/about">About</a>
39-
</li>
40-
<li class="nav-item">
41-
<a class="nav-link" href="https://gephi.wordpress.com">Blog</a>
42-
</li>
43-
<li class="nav-item">
44-
<a class="nav-link" href="/faq">FAQ</a>
45-
</li>
46-
<li class="nav-item">
47-
<a class="nav-link" href="https://github.com/gephi">GitHub</a>
48-
</li>
49-
<!--<li class="nav-item">-->
50-
<!-- <a class="nav-link" href="/help">Help</a>-->
51-
<!--</li>-->
52-
<!--<li class="nav-item">-->
53-
<!-- <a class="nav-link" href="/contribute">Contribute</a>-->
54-
<!--</li>-->
55-
<li class="nav-item">
56-
<details class="nav-dropdown">
57-
<summary aria-haspopup="true" aria-expanded="false"
58-
>Applications <span class="caret"><Icon name="ph:caret-down" /></span></summary
59-
>
60-
<ul class="dropdown-menu list-unstyled">
61-
<li><a class="dropdown-item" href="/desktop">Gephi</a></li>
62-
<li><a class="dropdown-item" href="/desktop/plugins">Gephi plugins</a></li>
63-
<li><a class="dropdown-item" href="/lite">Gephi Lite</a></li>
64-
<!--<li><a class="dropdown-item" href="/toolkit">Gephi Toolkit</a></li>-->
65-
<li><a class="dropdown-item" href="https://jacomyma.github.io/gephisto">Gephisto</a></li>
55+
<input type="checkbox" class="d-none" id="navbar-toggler-checkbox" />
56+
<label for="navbar-toggler-checkbox" class="cursor-pointer">
57+
<div class="navbar-toggler" tabindex="1">
58+
<span class="navbar-toggler-icon"></span>
59+
</div>
60+
</label>
61+
<div class="collapse navbar-collapse flex-grow-0">
62+
<ul class="navbar-nav">
63+
{
64+
pages.map(({ id, href, title }) => (
65+
<li class="nav-item" aria-current={id === pageId ? "page" : undefined}>
66+
<a class={cx("nav-link", id === pageId && "active")} href={id === pageId ? "#" : href}>
67+
{title}
68+
</a>
69+
</li>
70+
))
71+
}
72+
73+
<!-- App links for mobile only -->
74+
<li class="nav-item d-md-none mt-2">
75+
<a class="nav-link text-muted">Applications:</a>
76+
<ul class="ps-3">
77+
{
78+
appPages.map(({ id, href, title }) => (
79+
<li class="nav-item d-md-none" aria-current={id === pageId ? "page" : undefined}>
80+
<a class={cx("nav-link", id === pageId && "active")} href={id === pageId ? "#" : href}>
81+
{title}
82+
</a>
83+
</li>
84+
))
85+
}
6686
</ul>
67-
</details>
68-
</li>
69-
<li class="nav-item">
70-
<a
71-
class="btn btn-dark fw-bold"
72-
href="https://opencollective.com/gephi/donate?interval=oneTime&amount=5&name=&legalName=&email="
73-
><Icon name="ph:heart-fill" /> Donate 5€</a
74-
>
75-
</li>
76-
</ul>
87+
</li>
88+
89+
<!-- App links for desktop only -->
90+
<li class="nav-item d-none d-md-block">
91+
<details class="nav-dropdown">
92+
<summary aria-haspopup="true" aria-expanded="false"
93+
>Applications <span class="caret"><Icon name="ph:caret-down" /></span></summary
94+
>
95+
<ul class="dropdown-menu list-unstyled">
96+
{
97+
appPages.map(({ id, href, title }) => (
98+
<li class="nav-item" aria-current={id === pageId ? "page" : undefined}>
99+
<a
100+
class={cx("nav-link py-1 px-3", id === pageId && "active")}
101+
href={id === pageId ? "#" : href}
102+
>
103+
{title}
104+
</a>
105+
</li>
106+
))
107+
}
108+
</ul>
109+
</details>
110+
</li>
111+
<li class="nav-item">
112+
<a
113+
class="btn btn-dark fw-bold w-100 w-md-auto"
114+
href="https://opencollective.com/gephi/donate?interval=oneTime&amount=5&name=&legalName=&email="
115+
><Icon name="ph:heart-fill" /> Donate 5€</a
116+
>
117+
</li>
118+
</ul>
119+
</div>
77120
</div>
78121

79122
<script>

‎src/pages/about/index.astro‎

Lines changed: 60 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const TEAM: TeamMember[] = [
1919
];
2020
---
2121

22-
<Layout>
22+
<Layout pageId="about">
2323
<header class="banner py-5">
2424
<section class="container my-5 py-4">
2525
<h1>About Gephi</h1>
@@ -40,7 +40,10 @@ const TEAM: TeamMember[] = [
4040
>University of Technology of Compiègne</a
4141
>, in France. It has been selected for the <a href="https://summerofcode.withgoogle.com/"
4242
>Google Summer of Code</a
43-
> from 2009 to 2013. It received the <a href=https://www.oracle.com/technical-resources/articles/java/dukeschoicewinners.html">Duke's Choice Award</a> at JavaOne 2010.
43+
> from 2009 to 2013. It received the <a
44+
href='https://www.oracle.com/technical-resources/articles/java/dukeschoicewinners.html"'
45+
>Duke's Choice Award</a
46+
> at JavaOne 2010.
4447
</p>
4548
<p>
4649
After a less active period of development, the Gephi team gathers <a
@@ -52,7 +55,9 @@ const TEAM: TeamMember[] = [
5255
to maintain the codebase, meets users, and discuss and design new features.
5356
</p>
5457
<p>
55-
For more information about the evolution of the project, check our <a href="https://gephi.wordpress.com">blog</a>.
58+
For more information about the evolution of the project, check our <a href="https://gephi.wordpress.com"
59+
>blog</a
60+
>.
5661
</p>
5762
</div>
5863
</section>
@@ -65,22 +70,37 @@ const TEAM: TeamMember[] = [
6570
<Icon name="ph:road-horizon" class="text-primary" />
6671
<span>Project roadmap</span>
6772
</h2>
68-
73+
6974
<p>
7075
Beyond the codebase, we also work on the project’s structure and other aspects. Next up we aim at this:
7176
</p>
7277
<ul class="fs-4 ps-md-0 mt-0">
73-
<li><strong>Consolidate governance.</strong> Clarify roles, add content to our Open Collective platform, and improve onboarding.</li>
74-
<li><strong>Raise funds and facilitate donations.</strong> We need funds for the Gephi Weeks and ultimately, for recurrent contributors.</li>
75-
<li><strong>Recruit core contributors.</strong> Having developers familiar with the codebases is key to the sustainability of the project.</li>
76-
<li><strong>Gephi Weeks.</strong> We meet for an entire week every year, and that’s a great moment to care for and contribute to the project.</li>
78+
<li>
79+
<strong>Consolidate governance.</strong> Clarify roles, add content to our Open Collective platform, and
80+
improve onboarding.
81+
</li>
82+
<li>
83+
<strong>Raise funds and facilitate donations.</strong> We need funds for the Gephi Weeks and ultimately,
84+
for recurrent contributors.
85+
</li>
86+
<li>
87+
<strong>Recruit core contributors.</strong> Having developers familiar with the codebases is key to the sustainability
88+
of the project.
89+
</li>
90+
<li>
91+
<strong>Gephi Weeks.</strong> We meet for an entire week every year, and that’s a great moment to care for
92+
and contribute to the project.
93+
</li>
7794
</ul>
7895
<p>
79-
Follow the evolution of the project on our <a href="https://gephi.wordpress.com/">blog</a>,
80-
and notably the Gephi Weeks:
81-
<a href="https://gephi.wordpress.com/2021/12/06/gephi-code-sustainability-retreat-2021-debriefing/">2021</a>,
82-
<a href="https://gephi.wordpress.com/2022/10/16/gephi-week-2022-debriefing/">2022</a>,
83-
and <a href="https://gephi.wordpress.com/2024/06/13/gephi-week-2024-peek-from-the-inside/">2024</a>. (2025 upcoming)
96+
Follow the evolution of the project on our <a href="https://gephi.wordpress.com/">blog</a>, and notably
97+
the Gephi Weeks:
98+
<a href="https://gephi.wordpress.com/2021/12/06/gephi-code-sustainability-retreat-2021-debriefing/"
99+
>2021</a
100+
>,
101+
<a href="https://gephi.wordpress.com/2022/10/16/gephi-week-2022-debriefing/">2022</a>, and <a
102+
href="https://gephi.wordpress.com/2024/06/13/gephi-week-2024-peek-from-the-inside/">2024</a
103+
>. (2025 upcoming)
84104
</p>
85105
</div>
86106
</section>
@@ -121,15 +141,33 @@ const TEAM: TeamMember[] = [
121141
</div>
122142
</div>
123143
<div class="feature-text">
124-
<p>We thank the following contributors, who have improved the code or added new features: Clément Levallois, Anna Kharitonova, Antonin Delpeuch, Côme Brocas, Sukankana Chakraborty, Walton Goga.</p>
125-
<p>Plugin developers meaningfully contribute to the community, and we want to thank all of their contributions. You can directly find plugin authors in <a href="desktop/plugins">Plugins</a>.
126-
<p>The years Gephi participated in the Google Summer of Code was rich in collaboration and contributions.
127-
We thank mentors Eytan Adar, Christian Tominski, Cezary Bartosiak, Julian Bilcke, Antonio Patriarca and Eduardo Ramos Ibáñez.
128-
We also thank Helder Suzuki, Jeremy Subtil, Patrick McSweeney, André Panisson, Antonio Patriarca, Martin Škurla, Yi Du, Yudi Xue, Vojtech Bardiovsky, Ernesto Aneiros, Urban Škudnik, Keheliya Gallaba, Daniel Bernardes, Luiz Ribeiro, Min Wu, Vikash Anand, Taras Klaskovsky, Romain Yon, Eduardo Espinoza, Vijesh M. and Nitesh Bhargava for their student contributions.</p>
129-
<p>Gephi is a multilingual software thanks to its many translators. We are grateful for their work. You can find them directly on our <a href="https://hosted.weblate.org/projects/gephi/">Weblate</a>.
130-
<p>Finally, we thank key early-days contributors and supporters Sébastien Heymann, Guillaume Lebourgeois, Dana Diminescu, Camille Maussang, Aurélien Beltrame, Stéphane Raux, Alain Le Berre, Guilhem Fouetillou and Franck Ghitalla.</p>
144+
<p>
145+
We thank the following contributors, who have improved the code or added new features: Clément Levallois,
146+
Anna Kharitonova, Antonin Delpeuch, Côme Brocas, Sukankana Chakraborty, Walton Goga.
147+
</p>
148+
<p>
149+
Plugin developers meaningfully contribute to the community, and we want to thank all of their contributions.
150+
You can directly find plugin authors in <a href="desktop/plugins">Plugins</a>.
151+
<p>
152+
The years Gephi participated in the Google Summer of Code was rich in collaboration and contributions. We
153+
thank mentors Eytan Adar, Christian Tominski, Cezary Bartosiak, Julian Bilcke, Antonio Patriarca and
154+
Eduardo Ramos Ibáñez. We also thank Helder Suzuki, Jeremy Subtil, Patrick McSweeney, André Panisson,
155+
Antonio Patriarca, Martin Škurla, Yi Du, Yudi Xue, Vojtech Bardiovsky, Ernesto Aneiros, Urban Škudnik,
156+
Keheliya Gallaba, Daniel Bernardes, Luiz Ribeiro, Min Wu, Vikash Anand, Taras Klaskovsky, Romain Yon,
157+
Eduardo Espinoza, Vijesh M. and Nitesh Bhargava for their student contributions.
158+
</p>
159+
<p>
160+
Gephi is a multilingual software thanks to its many translators. We are grateful for their work. You can
161+
find them directly on our <a href="https://hosted.weblate.org/projects/gephi/">Weblate</a>.
162+
<p>
163+
Finally, we thank key early-days contributors and supporters Sébastien Heymann, Guillaume Lebourgeois,
164+
Dana Diminescu, Camille Maussang, Aurélien Beltrame, Stéphane Raux, Alain Le Berre, Guilhem Fouetillou
165+
and Franck Ghitalla.
166+
</p>
167+
</p>
168+
</p>
131169
</div>
132170
</section>
133171
</section>
134-
</main>
135-
</Layout>
172+
</main></Layout
173+
>

‎src/pages/desktop/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import LangSwitcher from "../../components/LangSwitcher.astro";
66
import Layout from "../../layouts/Layout.astro";
77
---
88

9-
<Layout>
9+
<Layout pageId="desktop">
1010
<style>
1111
:root {
1212
--bs-primary: var(--bs-gephi-desktop-logo);

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const pluginsData: Plugin[] | null = pluginsDataRequest.ok
1414
: null;
1515
---
1616

17-
<Layout>
17+
<Layout pageId="desktop-plugins">
1818
<header class="banner py-5">
1919
<section class="container my-5 py-4">
2020
<h1>Gephi plugins</h1>
@@ -51,9 +51,7 @@ const pluginsData: Plugin[] | null = pluginsDataRequest.ok
5151
}
5252
/>
5353
<div>
54-
<small class="small badge text-bg-light border border-primary text-primary">
55-
{p.category}
56-
</small>
54+
<small class="small badge text-bg-light border border-primary text-primary">{p.category}</small>
5755
</div>
5856
<h3 class="text-primary m-0 text-truncate fs-4">{p.name}</h3>
5957
<p class="fs-5 m-0">{p.short_description}</p>

‎src/pages/faq/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ const QUESTIONS: Group<Question | Group<Question>>[] = [
287287
];
288288
---
289289

290-
<Layout class="faq-page">
290+
<Layout class="faq-page" pageId="faq">
291291
<header class="banner py-5">
292292
<section class="container my-5 py-4">
293293
<h1>Frequently Asked Questions</h1>

‎src/pages/lite/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import LangSwitcher from "../../components/LangSwitcher.astro";
55
import Layout from "../../layouts/Layout.astro";
66
---
77

8-
<Layout>
8+
<Layout pageId="lite">
99
<style>
1010
:root {
1111
--bs-primary: var(--bs-gephi-lite-bg);

src/pages/how-to/index.astro renamed to src/pages/quickstart/index.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import GephiLite from "../../components/how-to/GephiLite.md";
66
import Layout from "../../layouts/Layout.astro";
77
---
88

9-
<Layout class="no-sticky-nav">
9+
<Layout class="no-sticky-nav" pageId="quickstart">
1010
<header class="banner py-5">
1111
<section class="container my-5 py-4">
12-
<h1>How to?</h1>
12+
<h1>Quickstart</h1>
1313
</section>
1414
</header>
1515

src/pages/how-to/old.astro renamed to src/pages/quickstart/old.astro

File renamed without changes.

0 commit comments

Comments
 (0)