Skip to content

Commit 83551d0

Browse files
gdlbogdlbo
committed
website: Update design
1 parent c247b93 commit 83551d0

4 files changed

Lines changed: 361 additions & 141 deletions

File tree

‎website/app.js‎

Lines changed: 68 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,11 @@ const root = document.documentElement;
99
const topBar = document.querySelector(".top-bar");
1010
const revealNodes = document.querySelectorAll("[data-reveal]");
1111
const latestReleaseNodes = document.querySelectorAll("[data-latest-release]");
12-
const releaseMeta = document.querySelector(".release-meta");
13-
const releaseVersionNodes = document.querySelectorAll("[data-release-version]");
14-
const releaseDateNodes = document.querySelectorAll("[data-release-date]");
15-
const releaseChannelNodes = document.querySelectorAll("[data-release-channel]");
12+
const releasesBlock = document.querySelector("[data-releases]");
1613
const langButtons = document.querySelectorAll("[data-lang]");
1714

1815
let currentLang = "en";
19-
let currentRelease = null;
16+
let currentReleases = [];
2017
let hasAnimatedRelease = false;
2118

2219
function safeStorageGet(key) {
@@ -69,6 +66,16 @@ function setLatestReleaseTargets(url) {
6966
});
7067
}
7168

69+
function getReleaseSlotNodes(slot) {
70+
return {
71+
container: document.querySelector(`[data-release-slot="${slot}"]`),
72+
label: document.querySelector(`[data-release-slot-label="${slot}"]`),
73+
link: document.querySelector(`[data-release-slot-link="${slot}"]`),
74+
version: document.querySelector(`[data-release-slot-version="${slot}"]`),
75+
date: document.querySelector(`[data-release-slot-date="${slot}"]`)
76+
};
77+
}
78+
7279
function formatReleaseDate(value, lang) {
7380
const date = new Date(value);
7481

@@ -116,43 +123,63 @@ function applyTranslations(lang) {
116123
document.title = dictionary["meta.title"];
117124
}
118125

119-
function renderRelease() {
120-
if (!releaseMeta || !currentRelease) {
126+
function renderReleaseCards() {
127+
if (!releasesBlock) {
121128
return;
122129
}
123130

124-
const dictionary = getDictionary(currentLang);
125-
const formattedDate = formatReleaseDate(currentRelease.publishedAt, currentLang);
126-
const stateKey = currentRelease.prerelease ? "release.preview" : "release.latest";
131+
const slots = [
132+
{ key: "latest", release: currentReleases[0] || null, labelKey: "release.latestCard" },
133+
{ key: "previous", release: currentReleases[1] || null, labelKey: "release.previousCard" }
134+
];
127135

128-
releaseVersionNodes.forEach((node) => {
129-
node.textContent = currentRelease.version;
130-
});
136+
slots.forEach(({ key, release, labelKey }) => {
137+
const slotNodes = getReleaseSlotNodes(key);
131138

132-
releaseDateNodes.forEach((node) => {
133-
node.textContent = formattedDate;
134-
node.setAttribute("datetime", currentRelease.publishedAt);
135-
});
139+
if (!slotNodes.container) {
140+
return;
141+
}
142+
143+
const isVisible = Boolean(release);
144+
slotNodes.container.hidden = !isVisible;
145+
146+
if (!isVisible) {
147+
return;
148+
}
136149

137-
releaseChannelNodes.forEach((node) => {
138-
node.textContent = dictionary[stateKey];
150+
if (slotNodes.label) {
151+
slotNodes.label.textContent = getDictionary(currentLang)[labelKey];
152+
}
153+
154+
if (slotNodes.link instanceof HTMLAnchorElement) {
155+
slotNodes.link.href = release.url || RELEASE_URL;
156+
}
157+
158+
if (slotNodes.version) {
159+
slotNodes.version.textContent = release.version;
160+
}
161+
162+
if (slotNodes.date) {
163+
slotNodes.date.textContent = formatReleaseDate(release.publishedAt, currentLang);
164+
slotNodes.date.setAttribute("datetime", release.publishedAt);
165+
}
139166
});
140167
}
141168

142169
function setReleaseVisibility(isVisible) {
143-
if (!releaseMeta) {
170+
if (!releasesBlock) {
144171
return;
145172
}
146173

147-
releaseMeta.hidden = !isVisible;
174+
releasesBlock.hidden = !isVisible;
148175

149176
if (isVisible) {
150-
releaseMeta.classList.add("is-visible");
177+
releasesBlock.classList.add("is-visible");
151178

152179
if (!hasAnimatedRelease) {
153-
releaseMeta.classList.remove("is-appearing");
154-
void releaseMeta.offsetWidth;
155-
releaseMeta.classList.add("is-appearing");
180+
releasesBlock.classList.remove("is-appearing");
181+
void releasesBlock.offsetWidth;
182+
releasesBlock.classList.add("is-appearing");
156183
hasAnimatedRelease = true;
157184
}
158185
}
@@ -169,7 +196,7 @@ function updateLanguageButtons(lang) {
169196
function applyLanguage(lang) {
170197
currentLang = translations[lang] ? lang : "en";
171198
applyTranslations(currentLang);
172-
renderRelease();
199+
renderReleaseCards();
173200
updateLanguageButtons(currentLang);
174201
safeStorageSet(LANG_KEY, currentLang);
175202
}
@@ -227,25 +254,27 @@ async function loadLatestRelease() {
227254
throw new Error("GitHub API returned an unexpected payload.");
228255
}
229256

230-
const release = releases
257+
const publishedReleases = releases
231258
.filter((item) => item && !item.draft && item.published_at)
232-
.sort((left, right) => new Date(right.published_at) - new Date(left.published_at))[0];
233-
234-
if (!release) {
259+
.sort((left, right) => new Date(right.published_at) - new Date(left.published_at))
260+
.slice(0, 2)
261+
.map((release) => ({
262+
version: (release.tag_name || release.name || "").replace(/^v/i, ""),
263+
publishedAt: release.published_at,
264+
prerelease: Boolean(release.prerelease),
265+
url: release.html_url || RELEASE_URL
266+
}));
267+
268+
if (publishedReleases.length === 0) {
235269
throw new Error("No published releases were found.");
236270
}
237271

238-
currentRelease = {
239-
version: (release.tag_name || release.name || "").replace(/^v/i, ""),
240-
publishedAt: release.published_at,
241-
prerelease: Boolean(release.prerelease)
242-
};
243-
244-
setLatestReleaseTargets(release.html_url || RELEASE_URL);
272+
currentReleases = publishedReleases;
273+
setLatestReleaseTargets(publishedReleases[0].url || RELEASE_URL);
245274
setReleaseVisibility(true);
246-
renderRelease();
275+
renderReleaseCards();
247276
} catch (error) {
248-
currentRelease = null;
277+
currentReleases = [];
249278
setLatestReleaseTargets(RELEASE_URL);
250279
setReleaseVisibility(false);
251280
console.warn("Unable to load latest release metadata.", error);

‎website/index.html‎

Lines changed: 51 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -40,17 +40,21 @@
4040
</span>
4141
</a>
4242

43-
<div class="top-bar__controls">
44-
<div class="top-bar__utilities">
45-
<a class="mw-button mw-button--tonal top-bar__button" href="https://github.com/monogram-android/monogram" target="_blank" rel="noopener noreferrer" data-i18n="cta.github">
46-
GitHub
47-
</a>
43+
<nav class="top-nav" aria-label="Primary navigation" data-i18n-attr="aria-label:nav.primary">
44+
<a class="top-nav__link" href="#releases" data-i18n="nav.releases">Releases</a>
45+
<a class="top-nav__link" href="#screenshots" data-i18n="nav.screenshots">Screenshots</a>
46+
<a class="top-nav__link" href="https://t.me/monogram_discuss" target="_blank" rel="noopener noreferrer" data-i18n="nav.community">Community</a>
47+
</nav>
4848

49-
<div class="lang-switch" aria-label="Language switcher" data-i18n-attr="aria-label:lang.switcher">
50-
<button class="lang-switch__button is-active" type="button" data-lang="en">EN</button>
51-
<button class="lang-switch__button" type="button" data-lang="ru">RU</button>
52-
<button class="lang-switch__button" type="button" data-lang="zh">中文</button>
53-
</div>
49+
<div class="top-bar__actions">
50+
<a class="mw-button mw-button--tonal top-bar__button" href="https://github.com/monogram-android/monogram" target="_blank" rel="noopener noreferrer" data-i18n="cta.github">
51+
GitHub
52+
</a>
53+
54+
<div class="lang-switch" aria-label="Language switcher" data-i18n-attr="aria-label:lang.switcher">
55+
<button class="lang-switch__button is-active" type="button" data-lang="en">EN</button>
56+
<button class="lang-switch__button" type="button" data-lang="ru">RU</button>
57+
<button class="lang-switch__button" type="button" data-lang="zh">中文</button>
5458
</div>
5559
</div>
5660
</div>
@@ -74,17 +78,43 @@ <h1 data-i18n="hero.title">Monogram</h1>
7478
</a>
7579
</div>
7680

77-
<div class="release-meta" data-reveal hidden>
78-
<div class="release-meta__item">
79-
<span class="release-meta__label" data-i18n="release.versionLabel">Version</span>
80-
<strong data-release-version></strong>
81+
<section class="release-strip" id="releases" data-releases data-reveal hidden>
82+
<div class="release-strip__header">
83+
<p class="release-strip__eyebrow" data-i18n="release.eyebrow">Builds</p>
84+
<h2 class="release-strip__title" data-i18n="release.heading">Latest two releases</h2>
8185
</div>
82-
<div class="release-meta__item">
83-
<span class="release-meta__label" data-i18n="release.updatedLabel">Updated</span>
84-
<time data-release-date datetime=""></time>
86+
87+
<div class="release-strip__grid">
88+
<article class="release-card" data-release-slot="latest">
89+
<div class="release-card__row">
90+
<span class="release-card__badge" data-release-slot-label="latest" data-i18n="release.latestCard">Latest</span>
91+
<a class="release-card__link" href="https://github.com/monogram-android/monogram/releases" data-release-slot-link="latest" target="_blank" rel="noopener noreferrer" data-i18n="release.download">
92+
Open release
93+
</a>
94+
</div>
95+
<strong class="release-card__version" data-release-slot-version="latest"></strong>
96+
<div class="release-card__meta">
97+
<span class="release-card__label" data-i18n="release.updatedLabel">Updated</span>
98+
<time data-release-slot-date="latest" datetime=""></time>
99+
</div>
100+
</article>
101+
102+
<article class="release-card" data-release-slot="previous">
103+
<div class="release-card__row">
104+
<span class="release-card__badge release-card__badge--muted" data-release-slot-label="previous" data-i18n="release.previousCard">Previous</span>
105+
<a class="release-card__link" href="https://github.com/monogram-android/monogram/releases" data-release-slot-link="previous" target="_blank" rel="noopener noreferrer" data-i18n="release.download">
106+
Open release
107+
</a>
108+
</div>
109+
<strong class="release-card__version" data-release-slot-version="previous"></strong>
110+
<div class="release-card__meta">
111+
<span class="release-card__label" data-i18n="release.updatedLabel">Updated</span>
112+
<time data-release-slot-date="previous" datetime=""></time>
113+
</div>
114+
</article>
85115
</div>
86-
<p class="release-meta__state" data-release-channel data-i18n="release.latest">Latest release</p>
87-
</div>
116+
</section>
117+
88118
</div>
89119

90120
<div class="hero__visual" aria-hidden="true" data-reveal>
@@ -113,6 +143,7 @@ <h1 data-i18n="hero.title">Monogram</h1>
113143
</div>
114144
</div>
115145
</div>
146+
116147
</section>
117148

118149
<section class="section screenshots" id="screenshots">
@@ -154,7 +185,7 @@ <h1 data-i18n="hero.title">Monogram</h1>
154185
</main>
155186

156187
<footer class="footer">
157-
<p data-i18n="footer.text">Unofficial Telegram client for Android</p>
188+
<p data-i18n="footer.text">MonoGram</p>
158189
<div class="footer__links">
159190
<a href="https://github.com/monogram-android/monogram" target="_blank" rel="noopener noreferrer">GitHub</a>
160191
<a href="https://t.me/monogram_android" target="_blank" rel="noopener noreferrer">Telegram</a>

0 commit comments

Comments
 (0)