Skip to content

Commit ff6f7cb

Browse files
EbonJaegerEbonJaeger
committed
editions: Split edition definitions to own file
Right now, the data for our website is a bit spread out. People and teams live in `src/data`, but others like our editions and top-level categories live in the component and page files. Let's make everything easier to find. This moves the edition definitions to a file under `src/data`, making the component responsible only for the actual UI of the site. ~~I did this all jumbled up with #641, so it might be a good idea to merge this PR *after* that one, just in case I missed something when trying to separate all of my changes.~~ Depends on #660 Signed-off-by: Evan Maddock <maddock.evan@vivaldi.net>
1 parent 4b7996b commit ff6f7cb

File tree

3 files changed

+80
-66
lines changed

3 files changed

+80
-66
lines changed

‎src/components/editions/index.tsx‎

Lines changed: 12 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,31 @@
11
import React from "react";
2+
23
import clsx from "clsx";
4+
35
import Translate, { translate } from "@docusaurus/Translate";
46
import Link from "@docusaurus/Link";
57
import Image from "@theme/IdealImage";
68
import Heading from "@theme/Heading";
79
import { Button, ButtonGroup, Grid, Stack, useMediaQuery, useTheme } from "@mui/material";
810
import SettingsIcon from "@mui/icons-material/Settings";
911
import TipsAndUpdatesIcon from "@mui/icons-material/TipsAndUpdates";
10-
1112
import useBaseUrl from "@docusaurus/useBaseUrl";
1213

13-
const Editions = [
14-
{
15-
name: "Budgie",
16-
url: "budgie",
17-
urlConfig: "budgie/configuration",
18-
urlTips: "budgie/tips-and-tricks",
19-
description: (
20-
<Translate id="edition.budgie.description">
21-
A feature-rich, luxurious desktop using the most modern technologies.
22-
</Translate>
23-
),
24-
},
25-
{
26-
name: "Plasma",
27-
url: "plasma",
28-
urlConfig: "plasma/configuration",
29-
urlTips: "plasma/tips-and-tricks",
30-
description: (
31-
<Translate id="edition.plasma.description">
32-
A sophisticated desktop experience for the tinkerers. Simple by default, powerful when needed.
33-
</Translate>
34-
),
35-
},
36-
{
37-
name: "GNOME",
38-
url: "gnome",
39-
urlConfig: "gnome/configuration",
40-
urlTips: "gnome/tips-and-tricks",
41-
description: (
42-
<Translate id="edition.gnome.description">A simple, streamlined desktop for more modern hardware.</Translate>
43-
),
44-
},
45-
{
46-
name: "MATE",
47-
url: "mate",
48-
urlConfig: "mate/configuration",
49-
urlTips: "mate/tips-and-tricks",
50-
description: (
51-
<Translate id="edition.mate.description">A traditional desktop for advanced users and older hardware.</Translate>
52-
),
53-
},
54-
{
55-
name: "Xfce",
56-
url: "xfce",
57-
urlConfig: "xfce/configuration",
58-
urlTips: "xfce/tips-and-tricks",
59-
description: (
60-
<Translate id="edition.xfce.description">
61-
A lightweight desktop that aims to be fast while still being friendly.
62-
</Translate>
63-
),
64-
},
65-
];
14+
import FaSettingsIcon from "@mui/icons-material/Settings";
15+
import FaTipsAndUpdatesIcon from "@mui/icons-material/TipsAndUpdates";
6616

67-
type EditionCardProps = {
68-
name: string;
69-
url: string;
70-
urlConfig: string;
71-
urlTips: string;
72-
description: JSX.Element;
73-
};
17+
import Editions from "@site/src/data/editions";
18+
import { Edition } from "@site/src/types";
19+
20+
type EditionCardProps = Edition;
7421

7522
const EditionCard = ({ name, url, urlConfig, urlTips, description }: EditionCardProps) => {
7623
const theme = useTheme();
7724
const hideIcons = useMediaQuery(theme.breakpoints.down("xl"));
7825
const image = useBaseUrl(`/img/${name}.jpg`);
7926

8027
return (
81-
<Grid xs={6}>
28+
<Grid size={{ xs: 6 }}>
8229
<Stack className={clsx("card")} height={1}>
8330
<Stack className={clsx("card__image")}>
8431
<Link to={url}>
@@ -107,14 +54,14 @@ const EditionCard = ({ name, url, urlConfig, urlTips, description }: EditionCard
10754
>
10855
<Button
10956
href={urlConfig}
110-
startIcon={!hideIcons ? <SettingsIcon /> : undefined}
57+
startIcon={!hideIcons ? <FaSettingsIcon /> : undefined}
11158
sx={{ borderRadius: "10px", paddingInline: 2 }}
11259
>
11360
<Translate id="edition.card.configuration">Configuration</Translate>
11461
</Button>
11562
<Button
11663
href={urlTips}
117-
startIcon={!hideIcons ? <TipsAndUpdatesIcon /> : undefined}
64+
startIcon={!hideIcons ? <FaTipsAndUpdatesIcon /> : undefined}
11865
sx={{ borderRadius: "10px", paddingInline: 2 }}
11966
>
12067
<Translate id="edition.card.tipsntricks">Tips & Tricks</Translate>
@@ -129,7 +76,7 @@ const EditionCard = ({ name, url, urlConfig, urlTips, description }: EditionCard
12976
export const EditionCardsRow = () => {
13077
return (
13178
<Grid container columns={{ xs: 6, sm: 6, md: 6, lg: 12 }} spacing={2}>
132-
{Editions.map((edition) => (
79+
{Editions.map((edition: Edition) => (
13380
<EditionCard key={edition.name} {...edition} />
13481
))}
13582
</Grid>

‎src/data/editions.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Edition } from "../types";
2+
3+
import Translate from "@docusaurus/Translate";
4+
5+
const Editions: Edition[] = [
6+
{
7+
name: "Budgie",
8+
url: "budgie",
9+
urlConfig: "budgie/configuration",
10+
urlTips: "budgie/tips-and-tricks",
11+
description: (
12+
<Translate id="edition.budgie.description">
13+
A feature-rich, luxurious desktop using the most modern technologies.
14+
</Translate>
15+
),
16+
},
17+
{
18+
name: "Plasma",
19+
url: "plasma",
20+
urlConfig: "plasma/configuration",
21+
urlTips: "plasma/tips-and-tricks",
22+
description: (
23+
<Translate id="edition.plasma.description">
24+
A sophisticated desktop experience for the tinkerers. Simple by default, powerful when needed.
25+
</Translate>
26+
),
27+
},
28+
{
29+
name: "GNOME",
30+
url: "gnome",
31+
urlConfig: "gnome/configuration",
32+
urlTips: "gnome/tips-and-tricks",
33+
description: (
34+
<Translate id="edition.gnome.description">A simple, streamlined desktop for more modern hardware.</Translate>
35+
),
36+
},
37+
{
38+
name: "MATE",
39+
url: "mate",
40+
urlConfig: "mate/configuration",
41+
urlTips: "mate/tips-and-tricks",
42+
description: (
43+
<Translate id="edition.mate.description">A traditional desktop for advanced users and older hardware.</Translate>
44+
),
45+
},
46+
{
47+
name: "Xfce",
48+
url: "xfce",
49+
urlConfig: "xfce/configuration",
50+
urlTips: "xfce/tips-and-tricks",
51+
description: (
52+
<Translate id="edition.xfce.description">
53+
A lightweight desktop that aims to be fast while still being friendly.
54+
</Translate>
55+
),
56+
},
57+
];
58+
59+
export default Editions;

‎src/types.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { SvgIconTypeMap } from "@mui/material";
22
import { OverridableComponent } from "@mui/material/OverridableComponent";
3-
import { ComponentType, JSXElementConstructor, SVGProps } from "react";
3+
import { ComponentType, ReactNode, SVGProps } from "react";
44
import { PropSidebarItemLink } from "@docusaurus/plugin-content-docs";
55

66
export enum WebsiteType {
@@ -15,6 +15,14 @@ type DocImg = {
1515

1616
export type DocSection = PropSidebarItemLink & DocImg;
1717

18+
export type Edition = {
19+
name: string;
20+
url: string;
21+
urlConfig: string;
22+
urlTips: string;
23+
description: ReactNode;
24+
};
25+
1826
export type Person = {
1927
description: string;
2028
matrix?: string;

0 commit comments

Comments
 (0)