Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 27134c3

Browse files
index: Make homepage layout match category index pages (#634)
Signed-off-by: Evan Maddock <maddock.evan@vivaldi.net>
1 parent 7f5aac5 commit 27134c3

File tree

5 files changed

+103
-78
lines changed

5 files changed

+103
-78
lines changed

‎src/components/home/Doc.tsx‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎src/components/home/Header.tsx‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/pages/index.tsx‎

Lines changed: 68 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,96 @@
11
import React from "react";
2+
3+
import Heading from "@theme/Heading";
24
import Layout from "@theme/Layout";
5+
import Link from "@docusaurus/Link";
36

4-
import Container from "@mui/material/Container";
5-
import Grid2 from "@mui/material/Unstable_Grid2";
67
import { DocSection } from "../types";
78

9+
import { Container, Stack } from "@mui/material";
810
import Groups2OutlinedIcon from "@mui/icons-material/Groups2Outlined";
911
import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
1012
import Inventory2OutlinedIcon from "@mui/icons-material/Inventory2Outlined";
1113
import EngineeringOutlinedIcon from "@mui/icons-material/EngineeringOutlined";
12-
import Doc from "../components/home/Doc";
13-
import Header from "../components/home/Header";
1414

15-
const DocList: DocSection[] = [
15+
import clsx from "clsx";
16+
17+
import styles from "./styles.module.css";
18+
19+
const sections: DocSection[] = [
1620
{
17-
title: "Users",
18-
description: <>Installing, software, boot management, troubleshooting and more.</>,
19-
link: "docs/user/intro",
20-
img: <PersonOutlineOutlinedIcon sx={{ fontSize: 96 }} />,
21+
type: "link",
22+
label: "Users",
23+
description: "Installing, software, boot management, troubleshooting and more.",
24+
href: "docs/user/intro",
25+
icon: PersonOutlineOutlinedIcon,
2126
},
2227
{
23-
title: "Packaging",
24-
description: <>Get to grips with our advanced packaging features using easy to follow guides.</>,
25-
link: "docs/packaging",
26-
img: <Inventory2OutlinedIcon sx={{ fontSize: 96 }} />,
28+
type: "link",
29+
label: "Packaging",
30+
description: "Get to grips with our advanced packaging features using easy to follow guides.",
31+
href: "docs/packaging",
32+
icon: Inventory2OutlinedIcon,
2733
},
2834
{
29-
title: "Organization",
30-
description: <>Learn about the Solus Project organization, and how to contribute.</>,
31-
link: "docs/organization/intro",
32-
img: <Groups2OutlinedIcon sx={{ fontSize: 96 }} />,
35+
type: "link",
36+
label: "Organization",
37+
description: "Learn about the Solus Project organization, and how to contribute.",
38+
href: "docs/organization/intro",
39+
icon: Groups2OutlinedIcon,
3340
},
3441
{
35-
title: "Dev Log",
36-
description: <>Learn what our developers have been up to, and preview upcoming changes.</>,
37-
link: "blog",
38-
img: <EngineeringOutlinedIcon sx={{ fontSize: 96 }} />,
42+
type: "link",
43+
label: "Dev Log",
44+
description: "Learn what our developers have been up to, and preview upcoming changes.",
45+
href: "blog",
46+
icon: EngineeringOutlinedIcon,
3947
},
4048
];
4149

50+
const Card = (item: DocSection) => {
51+
return (
52+
<Link to={item.href} className={clsx("card padding--lg", styles.cardContainer)}>
53+
<Heading as="h2" className={clsx("text--truncate", styles.cardTitle)} title={item.label}>
54+
<item.icon fontSize="large" sx={{ marginRight: 1 }} /> {item.label}
55+
</Heading>
56+
{item.description && (
57+
<p className={clsx("text--truncate", styles.cardDescription)} title={item.description}>
58+
{item.description}
59+
</p>
60+
)}
61+
</Link>
62+
);
63+
};
64+
4265
const Docs = () => {
4366
return (
4467
<Layout title="Documentation" description="Solus">
45-
<Header />
46-
<Container sx={{ marginBlock: "4vh", maxWidth: 1920 }}>
47-
<Grid2
48-
columns={{
49-
xs: 6,
50-
sm: 18,
51-
md: 18,
52-
}}
53-
container
54-
margin={0}
55-
spacing={4}
56-
width={1}
68+
<Container sx={{ marginBlock: "4vh" }}>
69+
<Stack
70+
className="hero hero--secondary"
71+
alignItems="center"
72+
justifyContent="center"
73+
padding="5vh 10vw"
74+
spacing={2}
5775
>
58-
{DocList.map((d) => (
59-
<Doc {...d} key={`Doc-${d.title}`} />
76+
<Heading as="h1" className="hero__title">
77+
Solus Help Center
78+
</Heading>
79+
<p className="hero__subtitle">Documentation for Solus</p>
80+
</Stack>
81+
<section className="row">
82+
{sections.map((section, index) => (
83+
<article key={index} className="col col--6 margin-bottom--lg">
84+
<Card
85+
type="link"
86+
href={section.href}
87+
label={section.label}
88+
description={section.description}
89+
icon={section.icon}
90+
/>
91+
</article>
6092
))}
61-
</Grid2>
93+
</section>
6294
</Container>
6395
</Layout>
6496
);

‎src/pages/styles.module.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.cardContainer {
2+
--ifm-link-color: var(--ifm-color-emphasis-800);
3+
--ifm-link-hover-color: var(--ifm-color-emphasis-700);
4+
--ifm-link-hover-decoration: none;
5+
6+
box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
7+
border: 1px solid var(--ifm-color-emphasis-200);
8+
transition: all var(--ifm-transition-fast) ease;
9+
transition-property: border, box-shadow;
10+
}
11+
12+
.cardContainer:hover {
13+
border-color: var(--ifm-color-primary);
14+
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
15+
}
16+
17+
.cardContainer *:last-child {
18+
margin-bottom: 0;
19+
}
20+
21+
.cardTitle {
22+
align-items: center;
23+
display: flex;
24+
font-size: 1.2rem;
25+
}
26+
27+
.cardDescription {
28+
font-size: 0.8rem;
29+
}

‎src/types.ts‎

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

56
export enum WebsiteType {
67
GITHUB,
78
MASTODON,
89
WEBSITE,
910
}
1011

11-
export type DocSection = {
12-
description: JSX.Element;
13-
img: JSX.Element;
14-
link: string;
15-
title: string;
12+
type DocImg = {
13+
icon: OverridableComponent<SvgIconTypeMap<{}, "svg">> | ComponentType<SVGProps<SVGSVGElement>>;
1614
};
1715

16+
export type DocSection = PropSidebarItemLink & DocImg;
17+
1818
export type Person = {
1919
description: string;
2020
matrix?: string;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /