Skip to content

Commit bceec95

Browse files
paulgirardpaulgirard
committed
[Layout] Banner optimization
1 parent fbef2f4 commit bceec95

File tree

13 files changed

+203
-183
lines changed

13 files changed

+203
-183
lines changed

‎src/components/Banner.astro‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
import { Image } from "astro:assets";
3+
import classNames from "classnames";
4+
import banner from "../images/homepage/banner.png";
5+
interface Props {
6+
className?: string;
7+
containerClass?: string;
8+
}
9+
const { containerClass, className } = Astro.props;
10+
---
11+
12+
<header class={classNames("banner", className)}>
13+
<Image src={banner} alt="banner picture showing nodes" class="banner-background" layout="full-width" />
14+
<section class={classNames("container", containerClass)}>
15+
<slot />
16+
</section>
17+
</header>

‎src/components/UnderConstructionPage.astro‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import { Icon } from "astro-icon/components";
33
import Layout from "../layouts/Layout.astro";
4+
import Banner from "./Banner.astro";
45
56
interface Props {
67
title: string;
@@ -9,23 +10,21 @@ const { title } = Astro.props;
910
---
1011

1112
<Layout>
12-
<header class="banner">
13-
<section class="container">
14-
<div class="d-flex gap-3 fs-1 w-100">
15-
<Icon name="ph:barricade" />
16-
<Icon name="ph:shovel" />
17-
<Icon name="ph:toolbox" />
18-
<Icon name="ph:screwdriver" />
19-
<Icon name="ph:hammer" />
20-
<Icon name="ph:crane-tower" />
21-
<Icon name="ph:pencil-ruler" />
22-
<Icon name="ph:pipe" />
23-
</div>
24-
<h1>
25-
{title} page not ready yet!
26-
</h1>
27-
</section>
28-
</header>
13+
<Banner>
14+
<div class="d-flex gap-3 fs-1 w-100">
15+
<Icon name="ph:barricade" />
16+
<Icon name="ph:shovel" />
17+
<Icon name="ph:toolbox" />
18+
<Icon name="ph:screwdriver" />
19+
<Icon name="ph:hammer" />
20+
<Icon name="ph:crane-tower" />
21+
<Icon name="ph:pencil-ruler" />
22+
<Icon name="ph:pipe" />
23+
</div>
24+
<h1>
25+
{title} page not ready yet!
26+
</h1>
27+
</Banner>
2928

3029
<main class="container py-5">
3130
<section class="fs-2">

‎public/homepage/banner.png‎ renamed to ‎src/images/homepage/banner.png‎

File renamed without changes.

‎src/pages/404.astro‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
---
22
import { Icon } from "astro-icon/components";
3+
import Banner from "../components/Banner.astro";
34
import Layout from "../layouts/Layout.astro";
45
---
56

67
<Layout>
7-
<header class="banner">
8-
<section class="container">
9-
<h1><Icon name="ph:link-break" /> Something about Gephi could not be found!</h1>
10-
</section>
11-
</header>
8+
<Banner>
9+
<h1><Icon name="ph:link-break" /> Something about Gephi could not be found!</h1>
10+
</Banner>
1211

1312
<main class="container py-5">
1413
<h2>Please visit <a href="/">Gephi.org</a> homepage to find the information you were looking for.</h2>

‎src/pages/about/index.astro‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { Icon } from "astro-icon/components";
33
import { Image } from "astro:assets";
44
5+
import Banner from "../../components/Banner.astro";
56
import Layout from "../../layouts/Layout.astro";
67
78
type TeamMember = { image: string; name: string; role?: string };
@@ -20,11 +21,9 @@ const TEAM: TeamMember[] = [
2021
---
2122

2223
<Layout pageId="about">
23-
<header class="banner">
24-
<section class="container">
25-
<h1>About Gephi</h1>
26-
</section>
27-
</header>
24+
<Banner>
25+
<h1>About Gephi</h1>
26+
</Banner>
2827

2928
<main class="py-5">
3029
<section class="feature-container pb-5">

‎src/pages/desktop/index.astro‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import { Icon } from "astro-icon/components";
33
import { Image } from "astro:assets";
4+
import Banner from "../../components/Banner.astro";
45
import DownloadGephiDesktop from "../../components/DownloadGephiDesktop.astro";
56
import LangSwitcher from "../../components/LangSwitcher.astro";
67
import Layout from "../../layouts/Layout.astro";
@@ -14,26 +15,24 @@ import Layout from "../../layouts/Layout.astro";
1415
--bs-link-color-rgb: var(--bs-gephi-desktop-logo-rgb);
1516
}
1617
</style>
17-
<header class="banner">
18-
<section class="container">
19-
<div class="banner-contents">
20-
<div class="banner-texts">
21-
<div>
22-
<h1 class="gephi-font">Gephi</h1>
23-
</div>
18+
<Banner>
19+
<div class="banner-contents">
20+
<div class="banner-texts">
21+
<div>
22+
<h1 class="gephi-font">Gephi</h1>
23+
</div>
2424

25-
<p class="fs-3">
26-
Gephi is an <strong>open-source</strong> desktop application to <strong>visually analyze networks</strong>.
27-
</p>
25+
<p class="fs-3">
26+
Gephi is an <strong>open-source</strong> desktop application to <strong>visually analyze networks</strong>.
27+
</p>
2828

29-
<DownloadGephiDesktop withAlternativeLinks />
30-
</div>
31-
<div class="banner-image banner-logo">
32-
<Image src="/icons/gephi-desktop-logo-inverted.svg" alt="Gephi logo" width="400" height="400" />
33-
</div>
29+
<DownloadGephiDesktop withAlternativeLinks />
3430
</div>
35-
</section>
36-
</header>
31+
<div class="banner-image banner-logo">
32+
<Image src="/icons/gephi-desktop-logo-inverted.svg" alt="Gephi logo" width="400" height="400" />
33+
</div>
34+
</div>
35+
</Banner>
3736

3837
<main class="pt-5">
3938
<section class="container">

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

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { Icon } from "astro-icon/components";
33
import { isEmpty } from "lodash-es";
44
import { marked } from "marked";
55
6+
import Banner from "../../../components/Banner.astro";
67
import Layout from "../../../layouts/Layout.astro";
78
import type { Plugin } from "./type";
8-
import { Image } from "astro:assets";
99
1010
interface Props {
1111
plugin: Plugin;
@@ -34,34 +34,32 @@ try {
3434
---
3535

3636
<Layout class="plugin-page">
37-
<header class="banner py-4">
38-
<div class="container">
39-
<div class="banner-top">
40-
<a class="text-white" href="/desktop">Gephi</a> > <a class="text-white" href="/desktop/plugins">Gephi plugins</a
41-
> > <a class="text-white" href={`/desktop/plugins?categories=${plugin.category}`}>{plugin.category} plugins</a>
42-
</div>
37+
<Banner className="py-4">
38+
<div class="banner-top">
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>
4342

44-
<div class="banner-contents">
45-
<div class="banner-texts gap-3">
46-
<h1 class="fs-2">{plugin.name}</h1>
43+
<div class="banner-contents">
44+
<div class="banner-texts gap-3">
45+
<h1 class="fs-2">{plugin.name}</h1>
4746

48-
<p class="fs-4">{plugin.short_description}</p>
49-
<p class="fs-5 opacity-75">last updated on {plugin.last_update}</p>
50-
</div>
51-
{
52-
!!plugin.images?.length && (
53-
<div class="banner-image">
54-
<img
55-
class="flex-shrink-0 bg-white"
56-
src={`https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${plugin.images[0].image}`}
57-
alt=""
58-
/>
59-
</div>
60-
)
61-
}
47+
<p class="fs-4">{plugin.short_description}</p>
48+
<p class="fs-5 opacity-75">last updated on {plugin.last_update}</p>
6249
</div>
50+
{
51+
!!plugin.images?.length && (
52+
<div class="banner-image">
53+
<img
54+
class="flex-shrink-0 bg-white"
55+
src={`https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${plugin.images[0].image}`}
56+
alt=""
57+
/>
58+
</div>
59+
)
60+
}
6361
</div>
64-
</header>
62+
</Banner>
6563

6664
<main class="pt-5">
6765
<section class="container pb-5 plugin-page">

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
import { reverse, sortBy } from "lodash-es";
3+
import Banner from "../../../components/Banner.astro";
34
import Layout from "../../../layouts/Layout.astro";
45
import { PluginsFilters } from "./PluginsFilters";
56
import type { Plugin } from "./type";
@@ -15,11 +16,9 @@ const pluginsData: Plugin[] | null = pluginsDataRequest.ok
1516
---
1617

1718
<Layout pageId="desktop-plugins">
18-
<header class="banner">
19-
<section class="container">
20-
<h1>Gephi plugins</h1>
21-
</section>
22-
</header>
19+
<Banner>
20+
<h1>Gephi plugins</h1>
21+
</Banner>
2322

2423
<main class="plugins-main">
2524
{

‎src/pages/faq/index.astro‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
2-
import Layout from "../../layouts/Layout.astro";
3-
import Question from "../../components/faq/Question.astro";
2+
import Banner from "../../components/Banner.astro";
43
import IconOrImage from "../../components/faq/IconOrImage.astro";
4+
import Question from "../../components/faq/Question.astro";
5+
import Layout from "../../layouts/Layout.astro";
56
67
type Question = { question: string; answer: string };
78
type Group<T> = { label: string; slug: string; children: T[]; icon?: string; image?: string };
@@ -288,22 +289,20 @@ const QUESTIONS: Group<Question | Group<Question>>[] = [
288289
---
289290

290291
<Layout class="faq-page" pageId="faq">
291-
<header class="banner">
292-
<section class="container my-5 py-4">
293-
<h1>Frequently Asked Questions</h1>
294-
<p class="fs-5 mb-1">
295-
The questions list has been curated by <a href="https://www.veronicaespinoza.org/" class="fw-bold text-white"
296-
>Dr. Verónica Espinoza</a
297-
> and <a href="https://www.martingrandjean.ch/" class="fw-bold text-white">Martin Grandjean</a>.
298-
</p>
299-
<p class="fs-5">
300-
Missing questions can be suggested by <a
301-
href="https://github.com/gephi/gephi.github.io/issues/new"
302-
class="text-white">opening a ticket</a
303-
> in the website's GitHub repository.
304-
</p>
305-
</section>
306-
</header>
292+
<Banner containerClass="my-5 py-4">
293+
<h1>Frequently Asked Questions</h1>
294+
<p class="fs-5 mb-1">
295+
The questions list has been curated by <a href="https://www.veronicaespinoza.org/" class="fw-bold text-white"
296+
>Dr. Verónica Espinoza</a
297+
> and <a href="https://www.martingrandjean.ch/" class="fw-bold text-white">Martin Grandjean</a>.
298+
</p>
299+
<p class="fs-5">
300+
Missing questions can be suggested by <a
301+
href="https://github.com/gephi/gephi.github.io/issues/new"
302+
class="text-white">opening a ticket</a
303+
> in the website's GitHub repository.
304+
</p>
305+
</Banner>
307306

308307
<main class="container py-5">
309308
<section class="row mt-5 justify-content-center">

0 commit comments

Comments
 (0)