Skip to content

Commit 802a1ab

Browse files
arcticicestudioarcticicestudio
committed
Implement landing and doc page for "Nord Visual Studio Code"
This includes the initial sections for features and basic documentation pages. GH-149
1 parent 7ba3e12 commit 802a1ab

File tree

28 files changed

+1038
-37
lines changed

28 files changed

+1038
-37
lines changed

Diff for: ‎src/components/organisms/page/docs/ports/visual-studio-code/SectionContents/SectionContents.jsx

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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_VISUAL_STUDIO_CODE } from "config/routes/mappings";
16+
import {
17+
topicsGettingStarted,
18+
topicsReferences
19+
} from "data/components/organisms/page/docs/ports/visual-studio-code/topics";
20+
import { sectionIdFor } from "utils";
21+
import { colors } from "styles/theme";
22+
23+
import { ContentsCard, CardGrid } from "../../../shared";
24+
25+
const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE, 1);
26+
27+
/**
28+
* The component that represents the contents section of the docs page for the "Nord Visual Studio Code" port project.
29+
*
30+
* @author Arctic Ice Studio <[email protected]>
31+
* @author Sven Greb <[email protected]>
32+
* @since 0.14.0
33+
*/
34+
const SectionContents = () => (
35+
<Section id={SECTION_ID} variant="tertiary">
36+
<Content centered>
37+
<CardGrid>
38+
<ContentsCard
39+
accentColor={colors.nord8}
40+
logoComponent={Zap}
41+
svgType="stroke"
42+
title="Getting Started"
43+
topics={topicsGettingStarted}
44+
>
45+
Learn how to install, activate, customize and develop the extension.
46+
</ContentsCard>
47+
<ContentsCard accentColor={colors.nord10} logoComponent={BookOpen} title="References" topics={topicsReferences}>
48+
Learn about supported languages, extensions and how to deal with occurring problems.
49+
</ContentsCard>
50+
</CardGrid>
51+
</Content>
52+
<WaveFooter />
53+
</Section>
54+
);
55+
56+
export default SectionContents;

Diff for: ‎src/components/organisms/page/docs/ports/visual-studio-code/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";

Diff for: ‎src/components/organisms/page/docs/ports/visual-studio-code/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_VISUAL_STUDIO_CODE } 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_VISUAL_STUDIO_CODE, 0);
19+
20+
/**
21+
* The component that represents the hero section of the docs page for the "Nord Visual Studio Code" port project.
22+
*
23+
* @author Arctic Ice Studio <[email protected]>
24+
* @author Sven Greb <[email protected]>
25+
* @since 0.14.0
26+
*/
27+
const SectionHero = () => (
28+
<Section id={SECTION_ID} variant="tertiary">
29+
<Content centered>
30+
<Headline>Nord Visual Studio Code</Headline>
31+
<Subline>
32+
Documentations to get to know the theme and supported features, how to use the extension, customize it to fit
33+
your needs or find solution for possible problems.
34+
</Subline>
35+
</Content>
36+
</Section>
37+
);
38+
39+
export default SectionHero;

Diff for: ‎src/components/organisms/page/docs/ports/visual-studio-code/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";

Diff for: ‎src/components/organisms/page/docs/ports/visual-studio-code/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 };

Diff for: ‎src/components/organisms/page/ports/visual-studio-code/SectionEditorDetails/SectionEditorDetails.jsx

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
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 { Content } from "containers/core/Section";
13+
import FeatureDuo, { Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo";
14+
import { ROUTE_PORTS_VISUAL_STUDIO_CODE } from "config/routes/mappings";
15+
import { sectionIdFor } from "utils";
16+
import { Video } from "atoms/core/mdx-elements";
17+
import { usePortsAssetsPropTypes } from "hooks/shared/propTypes";
18+
19+
import { Section } from "../../../shared";
20+
import WaveDivider from "./styled/WaveDivider";
21+
22+
const SECTION_ID = sectionIdFor(ROUTE_PORTS_VISUAL_STUDIO_CODE, 3);
23+
24+
/**
25+
* The component that represents the editor details section for the landing page of the
26+
* "Nord Visual Studio Code" port project.
27+
*
28+
* @author Arctic Ice Studio <[email protected]>
29+
* @author Sven Greb <[email protected]>
30+
* @since 0.14.0
31+
*/
32+
const SectionEditorDetails = ({ assets }) => (
33+
<Section id={SECTION_ID} variant="secondary">
34+
<Content centered>
35+
<FeatureDuo columnRatio={[1, 2]}>
36+
<Text>
37+
<Headline>Small details with unobtrusive styles.</Headline>
38+
<Subline>
39+
Popular and common code editor features like search result marker and brace matching are designed to get out
40+
of your way with a visually attractive appearance.
41+
</Subline>
42+
</Text>
43+
<Visualization>
44+
<Video
45+
dropShadow
46+
loop
47+
poster={assets.videoPosters["editor-brace-matching.mp4.png"]}
48+
rounded
49+
sources={[assets.videos["editor-brace-matching.mp4"]]}
50+
>
51+
<span>Brace match highlighting.</span>
52+
</Video>
53+
</Visualization>
54+
</FeatureDuo>
55+
<FeatureDuo columnRatio={[2, 1]}>
56+
<Visualization>
57+
<Video
58+
dropShadow
59+
loop
60+
poster={assets.videoPosters["editor-text-selection.mp4.png"]}
61+
rounded
62+
sources={[assets.videos["editor-text-selection.mp4"]]}
63+
>
64+
<span>Code selection in the editor.</span>
65+
</Video>
66+
</Visualization>
67+
<Text>
68+
<Subline>
69+
The discreet visual style for selected code blocks ensures still easily recognizable syntax colors.
70+
</Subline>
71+
</Text>
72+
</FeatureDuo>
73+
<FeatureDuo columnRatio={[1, 2]}>
74+
<Text>
75+
<Subline>Well recognizable marker for active and context related search results.</Subline>
76+
</Text>
77+
<Visualization>
78+
<Video
79+
dropShadow
80+
loop
81+
poster={assets.videoPosters["editor-lazy-highlight-and-search-marker.mp4.png"]}
82+
rounded
83+
sources={[assets.videos["editor-lazy-highlight-and-search-marker.mp4"]]}
84+
>
85+
<span>Code selection in the editor.</span>
86+
</Video>
87+
</Visualization>
88+
</FeatureDuo>
89+
</Content>
90+
<WaveDivider />
91+
</Section>
92+
);
93+
94+
SectionEditorDetails.propTypes = usePortsAssetsPropTypes;
95+
96+
export default SectionEditorDetails;

Diff for: ‎src/components/organisms/page/ports/visual-studio-code/SectionEditorDetails/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 "./SectionEditorDetails";

Diff for: ‎src/components/organisms/page/ports/visual-studio-code/SectionEditorDetails/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 { WaveSwaying } 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.base[MODE_BRIGHT_SNOW_FLURRY],
17+
[MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST]
18+
});
19+
20+
/**
21+
* A "swaying" 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.14.0
26+
*/
27+
const WaveDivider = styled(WaveSwaying)`
28+
fill: ${fillColor};
29+
transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
30+
`;
31+
32+
export default WaveDivider;

Diff for: ‎src/components/organisms/page/ports/visual-studio-code/SectionHero/SectionHero.jsx

+53-29
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,21 @@
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 { Image } from "atoms/core/mdx-elements";
15+
import { Content } from "containers/core/Section";
16+
import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo";
17+
import { usePortsAssetsPropTypes } from "hooks/shared/propTypes";
1818
import { usePortsMetadata } from "hooks";
19+
import { sectionIdFor } from "utils";
20+
import { ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE, ROUTE_PORTS_VISUAL_STUDIO_CODE } from "config/routes/mappings";
1921

20-
import { emptyStateIllustrationStyles } from "../../../shared/styles";
22+
import { Section } from "../../../shared";
23+
import WaveDivider from "./styled/WaveDivider";
24+
25+
const SECTION_ID = sectionIdFor(ROUTE_PORTS_VISUAL_STUDIO_CODE, 0);
2126

2227
/**
2328
* The component that represents the hero section for the landing page of the "Nord Visual Studio Code" port project.
@@ -26,32 +31,51 @@ import { emptyStateIllustrationStyles } from "../../../shared/styles";
2631
* @author Sven Greb <[email protected]>
2732
* @since 0.9.0
2833
*/
29-
export default function SectionHero() {
34+
const SectionHero = ({ assets }) => {
3035
const portMetadata = usePortsMetadata();
31-
const { gitHubRepositoryUrl } = portMetadata.find(port => port.name === "nord-visual-studio-code");
36+
const { extensionMarketplaceUrl, gitHubRepositoryUrl, projectUrl } = portMetadata.find(
37+
port => port.name === "nord-visual-studio-code"
38+
);
3239

3340
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 Visual Studio Code.
52-
</P>
41+
<Section id={SECTION_ID}>
42+
<Content centered decorated>
43+
<FeatureDuo verticalOnly>
44+
<Text verticalOnly>
45+
<Headline large>Nord Visual Studio Code</Headline>
46+
<Subline>
47+
An arctic, north-bluish clean and elegant <Link href={projectUrl}>Visual Studio Code</Link> theme.
48+
</Subline>
49+
<Subline>
50+
Designed for a fluent and clear workflow with support for many languages and the workbench UI.
51+
</Subline>
52+
<Actions>
53+
<Button href={extensionMarketplaceUrl} variant="primary">
54+
Install Now
55+
</Button>
56+
<Button ghost outlined quiet to={ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE} variant="primary">
57+
Documentation
58+
</Button>
59+
<Button ghost href={gitHubRepositoryUrl} outlined quiet variant="primary">
60+
GitHub
61+
</Button>
62+
</Actions>
63+
</Text>
64+
<Visualization>
65+
<Image
66+
alt="Screenshot showing JSX syntax as part of a React component"
67+
dropShadow
68+
fluid={assets.images["ui-overview-jsx.png"]}
69+
rounded
70+
/>
71+
</Visualization>
72+
</FeatureDuo>
5373
</Content>
54-
<WaveFooter />
74+
<WaveDivider />
5575
</Section>
5676
);
57-
}
77+
};
78+
79+
SectionHero.propTypes = usePortsAssetsPropTypes;
80+
81+
export default SectionHero;

0 commit comments

Comments
 (0)