Skip to content

Commit b560a6d

Browse files
xkeshavxkeshav
committed
[RZB-250021]: fix glossary link and HTML
1 parent 5eece0d commit b560a6d

File tree

9 files changed

+63
-68
lines changed

9 files changed

+63
-68
lines changed

‎src/assets/styles/letter-card.css‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,9 @@
3434
margin: 0;
3535
line-height: 1.2;
3636
/* Adjusted line-height */
37-
background: linear-gradient(
38-
135deg,
39-
var(--character-gradient-start, var(--primary)) 0%,
40-
var(--character-gradient-end, var(--primary-light)) 100%
41-
);
37+
background: linear-gradient(135deg,
38+
var(--character-gradient-start, var(--primary)) 0%,
39+
var(--character-gradient-end, var(--primary-light)) 100%);
4240
-webkit-background-clip: text;
4341
background-clip: text;
4442
color: transparent;
@@ -47,6 +45,10 @@
4745
/* Adjusted text-align */
4846
}
4947

48+
.flag {
49+
color: initial;
50+
}
51+
5052
& .flipped__text {
5153
font-size: 3.5rem;
5254
}
@@ -190,11 +192,9 @@
190192
& .card__glow {
191193
position: absolute;
192194
inset: 0;
193-
background: radial-gradient(
194-
circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
195-
color-mix(in srgb, var(--primary) 10%, transparent) 0%,
196-
transparent 60%
197-
);
195+
background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
196+
color-mix(in srgb, var(--primary) 10%, transparent) 0%,
197+
transparent 60%);
198198
opacity: 0;
199199
transition: opacity 0.3s ease;
200200
pointer-events: none;
@@ -213,4 +213,4 @@
213213
font-size: 0.875rem;
214214
}
215215
}
216-
}
216+
}

‎src/components/LetterCard.astro‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,14 @@ import { type AlphabetEntry } from "@/types/alphabet.ts";
44
import "@/assets/styles/letter-card.css";
55
66
interface Props {
7+
class?: string;
78
item: AlphabetEntry;
89
category: string;
910
}
1011
11-
const { item, category } = Astro.props;
12+
const { class: className, ...rest } = Astro.props;
13+
14+
const { item, category } = rest as Props;
1215
---
1316

1417
<div class="flip__card">
@@ -18,18 +21,15 @@ const { item, category } = Astro.props;
1821
<span class="flip__button__text" title="Flip Card">Flip Card</span>
1922
</div>
2023
<div class="letter__header">
21-
<p class="character">{item.letter}</p>
24+
<p class={`character ${className}`}>{item.letter}</p>
2225
</div>
2326
<div class="letter__content">
2427
<h2 class="text">{item.text}</h2>
2528
<p class="description">{item.description}</p>
2629
</div>
2730
<div class="card__glow"></div>
2831
</div>
29-
<div
30-
class="card card__back"
31-
style={category === "colours" && item.cssColor ? `background: ${item.cssColor}` : ""}
32-
>
32+
<div class="card card__back" style={category === "colours" && item.cssColor ? `background: ${item.cssColor}` : ""}>
3333
<div class="flip__button">
3434
<span class="flip__button__text" title="Click to flip">Flip Card</span>
3535
</div>

‎src/pages/glossary/colours.astro‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import "@/assets/styles/glossary/glossary.css";
2+
import "@/assets/styles/glossary/glossary.css";
33
import BackButton from "@/components/BackButton.astro";
44
import LetterCard from "@/components/LetterCard.astro";
55
import glossaryData from "@/data/glossary.json";
@@ -11,7 +11,7 @@ const {
1111
---
1212

1313
<BaseLayout meta={{ title: "Glossary" }}>
14-
<BackButton href="/Glossary" />
14+
<BackButton href="/glossary" />
1515
<div class="container__page">
1616
<div class="page__header">
1717
<h1 class="page__title">{title}</h1>
@@ -20,7 +20,8 @@ const {
2020

2121
<div class="container__glossary">
2222
<div class="glossary__grid">
23-
{data.map((entry) => <LetterCard item={entry} category={category} />)}
23+
{data.map((entry) => <LetterCard item={entry} category={category} />)}
2424
</div>
2525
</div>
26-
</BaseLayout>
26+
</div></BaseLayout
27+
>

‎src/pages/glossary/days.astro‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import "@/assets/styles/glossary/glossary.css";
2+
import "@/assets/styles/glossary/glossary.css";
33
import BackButton from "@/components/BackButton.astro";
44
import LetterCard from "@/components/LetterCard.astro";
55
import glossaryData from "@/data/glossary.json";
@@ -11,16 +11,17 @@ const {
1111
---
1212

1313
<BaseLayout meta={{ title: "Glossary" }}>
14-
<BackButton href="/Glossary" />
14+
<BackButton href="/glossary" />
1515
<div class="container__page">
1616
<div class="page__header">
1717
<h1 class="page__title">{title}</h1>
1818
<button id="flip-all-button" class="btn__flip__all">Flip All Cards</button>
1919
</div>
2020

2121
<div class="container__glossary">
22-
<div class="glossary__grid">
23-
{data.map((entry) => <LetterCard item={entry} category={category} />)}
22+
<div class="glossary__grid">
23+
{data.map((entry) => <LetterCard item={entry} category={category} />)}
2424
</div>
2525
</div>
26+
</div>
2627
</BaseLayout>

‎src/pages/glossary/flags.astro‎

Lines changed: 14 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,30 @@
11
---
2-
import BaseLayout from "@/layouts/Base";
2+
import "@/assets/styles/glossary/glossary.css";
33
import BackButton from "@/components/BackButton.astro";
44
import LetterCard from "@/components/LetterCard.astro";
5-
import "@/assets/styles/glossary/glossary.css";
65
import glossaryData from "@/data/glossary.json";
6+
import BaseLayout from "@/layouts/Base";
7+
import { getFlagEmoji } from "@/utils";
78
8-
const pageTitle = glossaryData.flags.title;
9-
const flagsData = glossaryData.flags.data;
10-
11-
const getFlagEmoji = (countryCode: string = "IN") => {
12-
const codePoints = countryCode
13-
.toUpperCase()
14-
.split("")
15-
.map((char) => 127397 + char.charCodeAt(0));
16-
return String.fromCodePoint(...codePoints);
17-
};
9+
const {
10+
flags: { title, data }
11+
} = glossaryData;
1812
13+
const flagsData = data.map((entry) => ({ ...entry, letter: getFlagEmoji(entry.countryCode) }));
1914
---
2015

21-
<BaseLayout meta={{ title: pageTitle }}>
22-
<BackButton href="/Glossary" />
23-
<article class="container__page">
16+
<BaseLayout meta={{ title }}>
17+
<BackButton href="/glossary" />
18+
<div class="container__page">
2419
<div class="page__header">
25-
<h1 class="page__title">{pageTitle}</h1>
26-
<button id="flip-all-button-page" class="btn__flip__all">Flip All Cards</button>
20+
<h1 class="page__title">{title}</h1>
21+
<button id="flip-all-button" class="btn__flip__all">Flip All Cards</button>
2722
</div>
2823

2924
<div class="container__glossary">
3025
<div class="glossary__grid">
31-
{
32-
flagsData.map((entry) => (
33-
<LetterCard
34-
item={{
35-
...entry,
36-
letter: getFlagEmoji(entry.countryCode),
37-
text: entry.text,
38-
description: entry.description,
39-
}}
40-
category="flags"
41-
/>
42-
))
43-
}
26+
{flagsData.map((entry) => <LetterCard item={entry} category="flags" class="flag" />)}
4427
</div>
4528
</div>
29+
</div>
4630
</BaseLayout>

‎src/pages/glossary/shapes.astro‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import "@/assets/styles/glossary/glossary.css";
2+
import "@/assets/styles/glossary/glossary.css";
33
import BackButton from "@/components/BackButton.astro";
44
import LetterCard from "@/components/LetterCard.astro";
55
import glossaryData from "@/data/glossary.json";
@@ -11,7 +11,7 @@ const {
1111
---
1212

1313
<BaseLayout meta={{ title: "Glossary" }}>
14-
<BackButton href="/Glossary" />
14+
<BackButton href="/glossary" />
1515
<div class="container__page">
1616
<div class="page__header">
1717
<h1 class="page__title">{title}</h1>
@@ -20,7 +20,8 @@ const {
2020

2121
<div class="container__glossary">
2222
<div class="glossary__grid">
23-
{data.map((entry) => <LetterCard item={entry} category={category} />)}
23+
{data.map((entry) => <LetterCard item={entry} category={category} />)}
2424
</div>
2525
</div>
26+
</div>
2627
</BaseLayout>

‎src/pages/glossary/sunsign.astro‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,18 @@ import SunSignCard, { type SunSignEntry } from "@/components/SunSignCards.astro"
66
import glossaryData from "@/data/glossary.json";
77
import BaseLayout from "@/layouts/Base";
88
9-
const pageTitle = glossaryData.sunsign.title;
10-
const sunSignsDataRaw: Omit<SunSignEntry, "parsedHindiLetters" | "parsedEnglishLetters">[] = glossaryData.sunsign.data;
9+
const { sunsign: {title,data} } = glossaryData;
1110
---
1211

13-
<BaseLayout meta={{ title: pageTitle }}>
12+
<BaseLayout meta={{ title }}>
1413
<BackButton href="/glossary" />
1514
<div class="container__page sun-sign-page-container">
1615
<div class="page-header">
17-
<h1 class="page-main-title">{pageTitle}</h1>
16+
<h1 class="page-main-title">{title}</h1>
1817
<button id="flip-all-sunsigns-button" class="flip__all__button">Flip All Cards</button>
1918
</div>
2019
<div class="grid-container sun-signs-grid">
21-
{sunSignsDataRaw.map((sign) => <SunSignCard item={sign} />)}
20+
{data.map((sign) => <SunSignCard item={sign} />)}
2221
</div>
2322
</div>
2423
</BaseLayout>

‎src/pages/glossary/waqt.astro‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,23 @@ import "@/assets/styles/glossary/glossary.css"; // General styles, adjust if nee
55
import "@/assets/styles/glossary/waqt.css";
66
import glossaryData from "@/data/glossary.json";
77
8-
const pageTitle = glossaryData.waqt.title;
9-
const waqtData = glossaryData.waqt.data;
8+
const {
9+
waqt: { title, data }
10+
} = glossaryData;
1011
---
1112

12-
<BaseLayout meta={{ title: pageTitle }}>
13+
<BaseLayout meta={{ title }}>
1314
<BackButton href="/Glossary" />
1415
<article class="container__page alphabet-page-container">
1516
<div class="page-header">
16-
<h1 class="page-main-title">{pageTitle}</h1>
17+
<h1 class="page-main-title">{title}</h1>
1718
<button id="flip-all-button-waqt" class="flip__all__button">Flip All Cards</button>
1819
</div>
1920

2021
<div class="grid-container alphabet-grid waqt-grid">
2122
{/* Added waqt-grid class */}
2223
{
23-
waqtData.map((entry) => (
24+
data.map((entry) => (
2425
<div class="flip__card" data-id={entry.id}>
2526
<div class="flip__card__inner">
2627
<div class="card card__front">

‎src/utils/common.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,11 @@ export const getRandomColor = () => {
1818
};
1919

2020
export const generateRandomLetter = () => String.fromCharCode(65 + Math.floor(Math.random() * 26));
21+
22+
export const getFlagEmoji = (countryCode: string = "IN") => {
23+
const codePoints = countryCode
24+
.toUpperCase()
25+
.split("")
26+
.map((char) => 127397 + char.charCodeAt(0));
27+
return String.fromCodePoint(...codePoints);
28+
};

0 commit comments

Comments
 (0)