Skip to content

Commit 37f100d

Browse files
arcticicestudioarcticicestudio
committed
Implement landing and doc page for "Nord dircolors"
This includes the initial sections for features and basic documentation pages. GH-159
1 parent fde14fc commit 37f100d

File tree

19 files changed

+679
-39
lines changed

19 files changed

+679
-39
lines changed

‎src/components/organisms/page/docs/ports/dircolors/SectionContents/SectionContents.jsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/*
2+
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
3+
* Copyright (C) 2018-present Sven Greb <[email protected]>
4+
*
5+
* Project: Nord Docs
6+
* Repository: https://github.com/arcticicestudio/nord-docs
7+
* License: MIT
8+
*/
9+
10+
import React from "react";
11+
12+
import { WaveFooter } from "atoms/core/vectors/divider";
13+
import Section, { Content } from "containers/core/Section";
14+
import { BookOpen, Zap } from "atoms/core/vectors/icons";
15+
import { ROUTE_DOCS_PORTS_DIRCOLORS } from "config/routes/mappings";
16+
import { topicsGettingStarted, topicsReferences } from "data/components/organisms/page/docs/ports/dircolors/topics";
17+
import { sectionIdFor } from "utils";
18+
import { colors } from "styles/theme";
19+
20+
import { ContentsCard, CardGrid } from "../../../shared";
21+
22+
const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_DIRCOLORS, 1);
23+
24+
/**
25+
* The component that represents the contents section of the docs page for the "Nord dircolors" port project.
26+
*
27+
* @author Arctic Ice Studio <[email protected]>
28+
* @author Sven Greb <[email protected]>
29+
* @since 0.18.0
30+
*/
31+
const SectionContents = () => (
32+
<Section id={SECTION_ID} variant="tertiary">
33+
<Content centered>
34+
<CardGrid>
35+
<ContentsCard
36+
accentColor={colors.nord8}
37+
logoComponent={Zap}
38+
svgType="stroke"
39+
title="Getting Started"
40+
topics={topicsGettingStarted}
41+
>
42+
Learn how to install and activate the theme.
43+
</ContentsCard>
44+
<ContentsCard accentColor={colors.nord10} logoComponent={BookOpen} title="References" topics={topicsReferences}>
45+
Learn about supported file and node types and how to deal with occurring problems.
46+
</ContentsCard>
47+
</CardGrid>
48+
</Content>
49+
<WaveFooter />
50+
</Section>
51+
);
52+
53+
export default SectionContents;

‎src/components/organisms/page/docs/ports/dircolors/SectionContents/index.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/*
2+
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
3+
* Copyright (C) 2018-present Sven Greb <[email protected]>
4+
*
5+
* Project: Nord Docs
6+
* Repository: https://github.com/arcticicestudio/nord-docs
7+
* License: MIT
8+
*/
9+
10+
export { default } from "./SectionContents";

‎src/components/organisms/page/docs/ports/dircolors/SectionHero/SectionHero.jsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/*
2+
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
3+
* Copyright (C) 2018-present Sven Greb <[email protected]>
4+
*
5+
* Project: Nord Docs
6+
* Repository: https://github.com/arcticicestudio/nord-docs
7+
* License: MIT
8+
*/
9+
10+
import React from "react";
11+
12+
import Section, { Content } from "containers/core/Section";
13+
import { ROUTE_DOCS_PORTS_DIRCOLORS } from "config/routes/mappings";
14+
import { sectionIdFor } from "utils";
15+
16+
import { Headline, Subline } from "../../../shared";
17+
18+
const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_DIRCOLORS, 0);
19+
20+
/**
21+
* The component that represents the hero section of the docs page for the "Nord dircolors" port project.
22+
*
23+
* @author Arctic Ice Studio <[email protected]>
24+
* @author Sven Greb <[email protected]>
25+
* @since 0.18.0
26+
*/
27+
const SectionHero = () => (
28+
<Section id={SECTION_ID} variant="tertiary">
29+
<Content centered>
30+
<Headline>Nord dircolors</Headline>
31+
<Subline>
32+
Documentations to get to know the theme, supported features, how to use the theme and find solution for possible
33+
problems.
34+
</Subline>
35+
</Content>
36+
</Section>
37+
);
38+
39+
export default SectionHero;

‎src/components/organisms/page/docs/ports/dircolors/SectionHero/index.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/*
2+
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
3+
* Copyright (C) 2018-present Sven Greb <[email protected]>
4+
*
5+
* Project: Nord Docs
6+
* Repository: https://github.com/arcticicestudio/nord-docs
7+
* License: MIT
8+
*/
9+
10+
export { default } from "./SectionHero";

‎src/components/organisms/page/docs/ports/dircolors/index.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*
2+
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
3+
* Copyright (C) 2018-present Sven Greb <[email protected]>
4+
*
5+
* Project: Nord Docs
6+
* Repository: https://github.com/arcticicestudio/nord-docs
7+
* License: MIT
8+
*/
9+
10+
import SectionContents from "./SectionContents";
11+
import SectionHero from "./SectionHero";
12+
13+
export { SectionContents, SectionHero };

‎src/components/organisms/page/ports/dircolors/SectionHero/SectionHero.jsx

+68-29
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,26 @@
88
*/
99

1010
import React from "react";
11-
import { css } from "styled-components";
1211

13-
import { WaveFooter } from "atoms/core/vectors/divider";
14-
import { P } from "atoms/core/html-elements";
12+
import Button from "atoms/core/Button";
1513
import Link from "atoms/core/Link";
16-
import Section, { Content } from "containers/core/Section";
17-
import EmptyState from "molecules/core/EmptyState";
14+
import { Code } from "atoms/core/html-elements";
15+
import { Image } from "atoms/core/mdx-elements";
16+
import { Content } from "containers/core/Section";
17+
import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo";
18+
import {
19+
ROUTE_DOCS_PORTS_DIRCOLORS,
20+
ROUTE_DOCS_PORTS_DIRCOLORS_INSTALLATION,
21+
ROUTE_PORTS_DIRCOLORS
22+
} from "config/routes/mappings";
23+
import { usePortsAssetsPropTypes } from "hooks/shared/propTypes";
24+
import { sectionIdFor } from "utils";
1825
import { usePortsMetadata } from "hooks";
1926

20-
import { emptyStateIllustrationStyles } from "../../../shared/styles";
27+
import { Section } from "../../../shared";
28+
import WaveDivider from "./styled/WaveDivider";
29+
30+
const SECTION_ID = sectionIdFor(ROUTE_PORTS_DIRCOLORS, 0);
2131

2232
/**
2333
* The component that represents the hero section for the landing page of the "Nord dircolors" port project.
@@ -26,32 +36,61 @@ import { emptyStateIllustrationStyles } from "../../../shared/styles";
2636
* @author Sven Greb <[email protected]>
2737
* @since 0.9.0
2838
*/
29-
export default function SectionHero() {
39+
const SectionHero = ({ assets }) => {
3040
const portMetadata = usePortsMetadata();
31-
const { gitHubRepositoryUrl } = portMetadata.find(port => port.name === "nord-dircolors");
41+
const { gitHubRepositoryUrl, projectUrl } = portMetadata.find(port => port.name === "nord-dircolors");
3242

3343
return (
34-
<Section>
35-
<Content centered>
36-
<EmptyState
37-
headline="Oh, there's nothing here yet"
38-
illustrationStyles={emptyStateIllustrationStyles}
39-
illustrationVariant="iglooHemisphere"
40-
subline="Please check back later, we're working hard on this page!"
41-
/>
42-
<P
43-
css={css`
44-
text-align: center;
45-
`}
46-
>
47-
In the meantime, please see the official{" "}
48-
<Link href={gitHubRepositoryUrl} target="_blank" variant="minimal">
49-
repository on GitHub
50-
</Link>{" "}
51-
for information about Nord dircolors.
52-
</P>
44+
<Section id={SECTION_ID}>
45+
<Content centered decorated>
46+
<FeatureDuo verticalOnly>
47+
<Text verticalOnly>
48+
<Headline large>Nord dircolors</Headline>
49+
<Subline>
50+
An arctic, north-bluish clean and elegant <Link href={projectUrl}>dircolors</Link> theme.
51+
</Subline>
52+
<Subline>
53+
Sets up colorized output for GNU core utils like{" "}
54+
<Link href="https://en.wikipedia.org/wiki/Ls">
55+
<Code>ls</Code>
56+
</Link>{" "}
57+
and{" "}
58+
<Link href="https://en.wikipedia.org/wiki/Tree_(command)">
59+
<Code>tree</Code>
60+
</Link>{" "}
61+
as well as other modern apps like{" "}
62+
<Link href="https://github.com/sharkdp/fd">
63+
<Code>fd</Code>
64+
</Link>{" "}
65+
that respect the <Code>LS_COLORS</Code> environment variable.
66+
</Subline>
67+
<Actions>
68+
<Button to={ROUTE_DOCS_PORTS_DIRCOLORS_INSTALLATION} variant="primary">
69+
Get Started
70+
</Button>
71+
<Button ghost outlined quiet to={ROUTE_DOCS_PORTS_DIRCOLORS} variant="primary">
72+
Documentation
73+
</Button>
74+
<Button ghost href={gitHubRepositoryUrl} outlined quiet variant="primary">
75+
GitHub
76+
</Button>
77+
</Actions>
78+
</Text>
79+
<Visualization>
80+
<Image
81+
alt="Screenshot showing an overview of various file and node types colorized by Nord"
82+
dropShadow
83+
fluid={assets.images["overview.png"]}
84+
rounded
85+
/>
86+
</Visualization>
87+
</FeatureDuo>
5388
</Content>
54-
<WaveFooter />
89+
<WaveDivider />
5590
</Section>
5691
);
57-
}
92+
};
93+
94+
SectionHero.propTypes = usePortsAssetsPropTypes;
95+
96+
export default SectionHero;

‎src/components/organisms/page/ports/dircolors/SectionHero/styled/WaveDivider.jsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
3+
* Copyright (C) 2018-present Sven Greb <[email protected]>
4+
*
5+
* Project: Nord Docs
6+
* Repository: https://github.com/arcticicestudio/nord-docs
7+
* License: MIT
8+
*/
9+
10+
import styled from "styled-components";
11+
12+
import { WaveSmooth2 } from "atoms/core/vectors/divider";
13+
import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
14+
15+
const fillColor = themedMode({
16+
[MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.secondary[MODE_BRIGHT_SNOW_FLURRY],
17+
[MODE_DARK_NIGHT_FROST]: colors.background.sectioning.secondary[MODE_DARK_NIGHT_FROST]
18+
});
19+
20+
/**
21+
* A "smooth" vector wave to render a visual differentiation to the next section.
22+
*
23+
* @author Arctic Ice Studio <[email protected]>
24+
* @author Sven Greb <[email protected]>
25+
* @since 0.18.0
26+
*/
27+
const WaveDivider = styled(WaveSmooth2)`
28+
fill: ${fillColor};
29+
transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
30+
`;
31+
32+
export default WaveDivider;

0 commit comments

Comments
 (0)