Skip to content

Commit 4bbf391

Browse files
paulgirardpaulgirard
committed
[home] add direct links to tool pages for both desktop and lite
buttons are both link to the tool itself, i.e. download for desktop refacto to isolate download gephi button in an astro component added a.no-decoration class to add the link without changing the card style Motivation: homogenize and add link to lite page from home card
1 parent 3e42d0c commit 4bbf391

4 files changed

Lines changed: 182 additions & 163 deletions

File tree

‎src/components/DownloadGephiDesktop.astro‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
---
2+
import { Icon } from "astro-icon/components";
3+
import { fromPairs, map, mapValues, toPairs } from "lodash-es";
4+
5+
const BROWSERS = {
6+
windows64: {
7+
label: "Windows",
8+
dlSuffix: "windows-x64.exe",
9+
icon: "ph:windows-logo-fill",
10+
},
11+
windows32: {
12+
label: "Windows (32 bits)",
13+
dlSuffix: "windows-x32.exe",
14+
icon: "ph:windows-logo-fill",
15+
},
16+
macSilicon: {
17+
label: "Mac OS",
18+
dlSuffix: "macos-aarch64.dmg",
19+
icon: "ph:apple-logo-fill",
20+
},
21+
macIntel: {
22+
label: "Mac OS (Intel)",
23+
dlSuffix: "macos-x64.dmg",
24+
icon: "ph:apple-logo-fill",
25+
},
26+
linux: {
27+
label: "Linux",
28+
dlSuffix: "linux-x64.tar.gz",
29+
icon: "ph:linux-logo-fill",
30+
},
31+
} as const;
32+
33+
type Browser = keyof typeof BROWSERS;
34+
35+
36+
async function getDownloadLinks() {
37+
try {
38+
const resp = await fetch("https://api.github.com/repos/gephi/gephi/releases/latest");
39+
const data = (await resp.json()) as { tag_name: string; assets: { browser_download_url: string }[] };
40+
const version = data.tag_name.replace(/^v/, "");
41+
const res = {
42+
version,
43+
links: mapValues(
44+
BROWSERS,
45+
({ dlSuffix }) => `https://github.com/gephi/gephi/releases/download/v${version}/gephi-${version}-${dlSuffix}`,
46+
) as Partial<Record<Browser, string>>,
47+
};
48+
49+
const suffixes = fromPairs(toPairs(BROWSERS).map(([browser, { dlSuffix }]) => [dlSuffix, browser]));
50+
data.assets.forEach(({ browser_download_url }) => {
51+
const suffix = (browser_download_url.split("/").at(-1) || "").replace(`gephi-${version}-`, "");
52+
if (suffixes[suffix]) {
53+
res.links[suffixes[suffix] as Browser] = browser_download_url;
54+
}
55+
});
56+
57+
return res;
58+
} catch (e) {
59+
const version = "1.0.0";
60+
return {
61+
version,
62+
links: mapValues(
63+
BROWSERS,
64+
({ dlSuffix }) => `https://github.com/gephi/gephi/releases/download/v${version}/gephi-${version}-${dlSuffix}`,
65+
) as Partial<Record<Browser, string>>,
66+
};
67+
}
68+
}
69+
70+
export interface Props {
71+
withAlternativeLinks?:boolean
72+
buttonClass?: string
73+
}
74+
75+
const {withAlternativeLinks, buttonClass} = Astro.props;
76+
const DOWNLOAD_LINKS = await getDownloadLinks();
77+
78+
---
79+
80+
<div class="d-flex flex-column align-items-start">
81+
<a href="https://github.com/gephi/gephi/releases"
82+
id="download-gephi"
83+
class={buttonClass || "btn btn-white fs-4 fw-bold mb-2"}
84+
><Icon name="ph:download-simple-bold" /> <span class="text">Download Gephi</span></a
85+
>
86+
{withAlternativeLinks && <>{
87+
map(
88+
BROWSERS,
89+
({ label, icon }, browser: Browser) =>
90+
DOWNLOAD_LINKS.links[browser] && (
91+
<a class="text-light" data-browser={browser} href={DOWNLOAD_LINKS.links[browser]}>
92+
<Icon name={icon} /> Download for {label}
93+
</a>
94+
),
95+
)
96+
}</>
97+
<a class="text-light" href="https://github.com/gephi/gephi/releases">
98+
<Icon name="ph:clock-counter-clockwise" /> Download Older Versions
99+
</a>}
100+
</div>
101+
<script define:vars={{ DOWNLOAD_LINKS, BROWSERS }}>
102+
let currentBrowser = "windows64";
103+
104+
if (navigator.appVersion.indexOf("Win") !== -1) {
105+
currentBrowser = "windows64";
106+
} else if (navigator.appVersion.indexOf("Mac") !== -1) {
107+
currentBrowser = "macSilicon";
108+
} else if (navigator.userAgent.indexOf("Ubuntu") !== -1) {
109+
currentBrowser = "linux";
110+
} else if (navigator.appVersion.indexOf("X11") !== -1) {
111+
currentBrowser = "linux";
112+
}
113+
114+
const link = document.getElementById("download-gephi");
115+
const linkText = link.querySelector(".text");
116+
if (DOWNLOAD_LINKS.links[currentBrowser]) {
117+
link.href = DOWNLOAD_LINKS.links[currentBrowser];
118+
linkText.innerHTML = `Download Gephi for ${BROWSERS[currentBrowser].label}`;
119+
}
120+
121+
const smallLink = document.querySelector(`a[data-browser='${currentBrowser}']`);
122+
if (smallLink) smallLink.remove();
123+
</script>

‎src/pages/desktop/index.astro‎

Lines changed: 4 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,9 @@
11
---
2+
import { Icon } from "astro-icon/components";
3+
import { Image } from "astro:assets";
4+
import DownloadGephiDesktop from "../../components/DownloadGephiDesktop.astro";
25
import LangSwitcher from "../../components/LangSwitcher.astro";
36
import Layout from "../../layouts/Layout.astro";
4-
import { Image } from "astro:assets";
5-
import { Icon } from "astro-icon/components";
6-
import { fromPairs, map, mapValues, toPairs } from "lodash-es";
7-
8-
const BROWSERS = {
9-
windows64: {
10-
label: "Windows",
11-
dlSuffix: "windows-x64.exe",
12-
icon: "ph:windows-logo-fill",
13-
},
14-
windows32: {
15-
label: "Windows (32 bits)",
16-
dlSuffix: "windows-x32.exe",
17-
icon: "ph:windows-logo-fill",
18-
},
19-
macSilicon: {
20-
label: "Mac OS",
21-
dlSuffix: "macos-aarch64.dmg",
22-
icon: "ph:apple-logo-fill",
23-
},
24-
macIntel: {
25-
label: "Mac OS (Intel)",
26-
dlSuffix: "macos-x64.dmg",
27-
icon: "ph:apple-logo-fill",
28-
},
29-
linux: {
30-
label: "Linux",
31-
dlSuffix: "linux-x64.tar.gz",
32-
icon: "ph:linux-logo-fill",
33-
},
34-
} as const;
35-
36-
type Browser = keyof typeof BROWSERS;
37-
38-
async function getDownloadLinks() {
39-
try {
40-
const resp = await fetch("https://api.github.com/repos/gephi/gephi/releases/latest");
41-
const data = (await resp.json()) as { tag_name: string; assets: { browser_download_url: string }[] };
42-
const version = data.tag_name.replace(/^v/, "");
43-
const res = {
44-
version,
45-
links: mapValues(
46-
BROWSERS,
47-
({ dlSuffix }) => `https://github.com/gephi/gephi/releases/download/v${version}/gephi-${version}-${dlSuffix}`,
48-
) as Partial<Record<Browser, string>>,
49-
};
50-
51-
const suffixes = fromPairs(toPairs(BROWSERS).map(([browser, { dlSuffix }]) => [dlSuffix, browser]));
52-
data.assets.forEach(({ browser_download_url }) => {
53-
const suffix = (browser_download_url.split("/").at(-1) || "").replace(`gephi-${version}-`, "");
54-
if (suffixes[suffix]) {
55-
res.links[suffixes[suffix] as Browser] = browser_download_url;
56-
}
57-
});
58-
59-
return res;
60-
} catch (e) {
61-
const version = "1.0.0";
62-
return {
63-
version,
64-
links: mapValues(
65-
BROWSERS,
66-
({ dlSuffix }) => `https://github.com/gephi/gephi/releases/download/v${version}/gephi-${version}-${dlSuffix}`,
67-
) as Partial<Record<Browser, string>>,
68-
};
69-
}
70-
}
71-
72-
const DOWNLOAD_LINKS = await getDownloadLinks();
737
---
748

759
<Layout>
@@ -92,51 +26,7 @@ const DOWNLOAD_LINKS = await getDownloadLinks();
9226
Gephi is an <strong>open-source</strong> desktop application to <strong>visually analyze networks</strong>.
9327
</p>
9428

95-
<div class="d-flex flex-column align-items-start">
96-
<a
97-
href="https://github.com/gephi/gephi/releases"
98-
id="download-gephi"
99-
class="btn btn-white fs-4 fw-bold mb-2"
100-
><Icon name="ph:download-simple-bold" /> <span class="text">Download Gephi</span></a
101-
>
102-
{
103-
map(
104-
BROWSERS,
105-
({ label, icon }, browser: Browser) =>
106-
DOWNLOAD_LINKS.links[browser] && (
107-
<a class="text-light" data-browser={browser} href={DOWNLOAD_LINKS.links[browser]}>
108-
<Icon name={icon} /> Download for {label}
109-
</a>
110-
),
111-
)
112-
}
113-
<a class="text-light" href="https://github.com/gephi/gephi/releases">
114-
<Icon name="ph:clock-counter-clockwise" /> Download Older Versions
115-
</a>
116-
</div>
117-
<script define:vars={{ DOWNLOAD_LINKS, BROWSERS }}>
118-
let currentBrowser = "windows64";
119-
120-
if (navigator.appVersion.indexOf("Win") !== -1) {
121-
currentBrowser = "windows64";
122-
} else if (navigator.appVersion.indexOf("Mac") !== -1) {
123-
currentBrowser = "macSilicon";
124-
} else if (navigator.userAgent.indexOf("Ubuntu") !== -1) {
125-
currentBrowser = "linux";
126-
} else if (navigator.appVersion.indexOf("X11") !== -1) {
127-
currentBrowser = "linux";
128-
}
129-
130-
const link = document.getElementById("download-gephi");
131-
const linkText = link.querySelector(".text");
132-
if (DOWNLOAD_LINKS.links[currentBrowser]) {
133-
link.href = DOWNLOAD_LINKS.links[currentBrowser];
134-
linkText.innerHTML = `Download Gephi for ${BROWSERS[currentBrowser].label}`;
135-
}
136-
137-
const smallLink = document.querySelector(`a[data-browser='${currentBrowser}']`);
138-
if (smallLink) smallLink.remove();
139-
</script>
29+
<DownloadGephiDesktop withAlternativeLinks />
14030
</div>
14131
<div class="col-5 text-end">
14232
<Image

0 commit comments

Comments
 (0)