diff --git a/src/components/organisms/page/docs/ports/visual-studio-code/SectionContents/SectionContents.jsx b/src/components/organisms/page/docs/ports/visual-studio-code/SectionContents/SectionContents.jsx new file mode 100644 index 00000000..4f0abf21 --- /dev/null +++ b/src/components/organisms/page/docs/ports/visual-studio-code/SectionContents/SectionContents.jsx @@ -0,0 +1,56 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; + +import { WaveFooter } from "atoms/core/vectors/divider"; +import Section, { Content } from "containers/core/Section"; +import { BookOpen, Zap } from "atoms/core/vectors/icons"; +import { ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE } from "config/routes/mappings"; +import { + topicsGettingStarted, + topicsReferences +} from "data/components/organisms/page/docs/ports/visual-studio-code/topics"; +import { sectionIdFor } from "utils"; +import { colors } from "styles/theme"; + +import { ContentsCard, CardGrid } from "../../../shared"; + +const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE, 1); + +/** + * The component that represents the contents section of the docs page for the "Nord Visual Studio Code" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.14.0 + */ +const SectionContents = () => ( +
+ + + + Learn how to install, activate, customize and develop the extension. + + + Learn about supported languages, extensions and how to deal with occurring problems. + + + + +
+); + +export default SectionContents; diff --git a/src/components/organisms/page/docs/ports/visual-studio-code/SectionContents/index.js b/src/components/organisms/page/docs/ports/visual-studio-code/SectionContents/index.js new file mode 100644 index 00000000..a1d6d5e4 --- /dev/null +++ b/src/components/organisms/page/docs/ports/visual-studio-code/SectionContents/index.js @@ -0,0 +1,10 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +export { default } from "./SectionContents"; diff --git a/src/components/organisms/page/docs/ports/visual-studio-code/SectionHero/SectionHero.jsx b/src/components/organisms/page/docs/ports/visual-studio-code/SectionHero/SectionHero.jsx new file mode 100644 index 00000000..ff89b964 --- /dev/null +++ b/src/components/organisms/page/docs/ports/visual-studio-code/SectionHero/SectionHero.jsx @@ -0,0 +1,39 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; + +import Section, { Content } from "containers/core/Section"; +import { ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; + +import { Headline, Subline } from "../../../shared"; + +const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE, 0); + +/** + * The component that represents the hero section of the docs page for the "Nord Visual Studio Code" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.14.0 + */ +const SectionHero = () => ( +
+ + Nord Visual Studio Code + + Documentations to get to know the theme and supported features, how to use the extension, customize it to fit + your needs or find solution for possible problems. + + +
+); + +export default SectionHero; diff --git a/src/components/organisms/page/docs/ports/visual-studio-code/SectionHero/index.js b/src/components/organisms/page/docs/ports/visual-studio-code/SectionHero/index.js new file mode 100644 index 00000000..f15e7dce --- /dev/null +++ b/src/components/organisms/page/docs/ports/visual-studio-code/SectionHero/index.js @@ -0,0 +1,10 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +export { default } from "./SectionHero"; diff --git a/src/components/organisms/page/docs/ports/visual-studio-code/index.js b/src/components/organisms/page/docs/ports/visual-studio-code/index.js new file mode 100644 index 00000000..b2a25e2a --- /dev/null +++ b/src/components/organisms/page/docs/ports/visual-studio-code/index.js @@ -0,0 +1,13 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import SectionContents from "./SectionContents"; +import SectionHero from "./SectionHero"; + +export { SectionContents, SectionHero }; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionEditorDetails/SectionEditorDetails.jsx b/src/components/organisms/page/ports/visual-studio-code/SectionEditorDetails/SectionEditorDetails.jsx new file mode 100644 index 00000000..89517d4c --- /dev/null +++ b/src/components/organisms/page/ports/visual-studio-code/SectionEditorDetails/SectionEditorDetails.jsx @@ -0,0 +1,96 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; + +import { Content } from "containers/core/Section"; +import FeatureDuo, { Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo"; +import { ROUTE_PORTS_VISUAL_STUDIO_CODE } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; +import { Video } from "atoms/core/mdx-elements"; +import { usePortsAssetsPropTypes } from "hooks/shared/propTypes"; + +import { Section } from "../../../shared"; +import WaveDivider from "./styled/WaveDivider"; + +const SECTION_ID = sectionIdFor(ROUTE_PORTS_VISUAL_STUDIO_CODE, 3); + +/** + * The component that represents the editor details section for the landing page of the + * "Nord Visual Studio Code" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.14.0 + */ +const SectionEditorDetails = ({ assets }) => ( +
+ + + + Small details with unobtrusive styles. + + Popular and common code editor features like search result marker and brace matching are designed to get out + of your way with a visually attractive appearance. + + + + + + + + + + + + + The discreet visual style for selected code blocks ensures still easily recognizable syntax colors. + + + + + + Well recognizable marker for active and context related search results. + + + + + + + +
+); + +SectionEditorDetails.propTypes = usePortsAssetsPropTypes; + +export default SectionEditorDetails; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionEditorDetails/index.js b/src/components/organisms/page/ports/visual-studio-code/SectionEditorDetails/index.js new file mode 100644 index 00000000..69351605 --- /dev/null +++ b/src/components/organisms/page/ports/visual-studio-code/SectionEditorDetails/index.js @@ -0,0 +1,10 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +export { default } from "./SectionEditorDetails"; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionEditorDetails/styled/WaveDivider.jsx b/src/components/organisms/page/ports/visual-studio-code/SectionEditorDetails/styled/WaveDivider.jsx new file mode 100644 index 00000000..6811b334 --- /dev/null +++ b/src/components/organisms/page/ports/visual-studio-code/SectionEditorDetails/styled/WaveDivider.jsx @@ -0,0 +1,32 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { WaveSwaying } from "atoms/core/vectors/divider"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const fillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.base[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST] +}); + +/** + * A "swaying" vector wave to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.14.0 + */ +const WaveDivider = styled(WaveSwaying)` + fill: ${fillColor}; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default WaveDivider; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionHero/SectionHero.jsx b/src/components/organisms/page/ports/visual-studio-code/SectionHero/SectionHero.jsx index 6e440a19..4d6da3f8 100644 --- a/src/components/organisms/page/ports/visual-studio-code/SectionHero/SectionHero.jsx +++ b/src/components/organisms/page/ports/visual-studio-code/SectionHero/SectionHero.jsx @@ -8,16 +8,21 @@ */ import React from "react"; -import { css } from "styled-components"; -import { WaveFooter } from "atoms/core/vectors/divider"; -import { P } from "atoms/core/html-elements"; +import Button from "atoms/core/Button"; import Link from "atoms/core/Link"; -import Section, { Content } from "containers/core/Section"; -import EmptyState from "molecules/core/EmptyState"; +import { Image } from "atoms/core/mdx-elements"; +import { Content } from "containers/core/Section"; +import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo"; +import { usePortsAssetsPropTypes } from "hooks/shared/propTypes"; import { usePortsMetadata } from "hooks"; +import { sectionIdFor } from "utils"; +import { ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE, ROUTE_PORTS_VISUAL_STUDIO_CODE } from "config/routes/mappings"; -import { emptyStateIllustrationStyles } from "../../../shared/styles"; +import { Section } from "../../../shared"; +import WaveDivider from "./styled/WaveDivider"; + +const SECTION_ID = sectionIdFor(ROUTE_PORTS_VISUAL_STUDIO_CODE, 0); /** * 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"; * @author Sven Greb * @since 0.9.0 */ -export default function SectionHero() { +const SectionHero = ({ assets }) => { const portMetadata = usePortsMetadata(); - const { gitHubRepositoryUrl } = portMetadata.find(port => port.name === "nord-visual-studio-code"); + const { extensionMarketplaceUrl, gitHubRepositoryUrl, projectUrl } = portMetadata.find( + port => port.name === "nord-visual-studio-code" + ); return ( -
- - -

- In the meantime, please see the official{" "} - - repository on GitHub - {" "} - for information about Nord Visual Studio Code. -

+
+ + + + Nord Visual Studio Code + + An arctic, north-bluish clean and elegant Visual Studio Code theme. + + + Designed for a fluent and clear workflow with support for many languages and the workbench UI. + + + + + + + + + Screenshot showing JSX syntax as part of a React component + + - +
); -} +}; + +SectionHero.propTypes = usePortsAssetsPropTypes; + +export default SectionHero; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionHero/styled/WaveDivider.jsx b/src/components/organisms/page/ports/visual-studio-code/SectionHero/styled/WaveDivider.jsx new file mode 100644 index 00000000..f627054d --- /dev/null +++ b/src/components/organisms/page/ports/visual-studio-code/SectionHero/styled/WaveDivider.jsx @@ -0,0 +1,32 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { WaveSmooth2 } from "atoms/core/vectors/divider"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const fillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.secondary[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.secondary[MODE_DARK_NIGHT_FROST] +}); + +/** + * A "smooth" vector wave to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.14.0 + */ +const WaveDivider = styled(WaveSmooth2)` + fill: ${fillColor}; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default WaveDivider; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionIntroduction/SectionIntroduction.jsx b/src/components/organisms/page/ports/visual-studio-code/SectionIntroduction/SectionIntroduction.jsx new file mode 100644 index 00000000..a795fb90 --- /dev/null +++ b/src/components/organisms/page/ports/visual-studio-code/SectionIntroduction/SectionIntroduction.jsx @@ -0,0 +1,60 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; + +import { Content } from "containers/core/Section"; +import FeatureDuo, { Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo"; +import { ROUTE_PORTS_VISUAL_STUDIO_CODE } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; +import { Image } from "atoms/core/mdx-elements"; +import { usePortsAssetsPropTypes } from "hooks/shared/propTypes"; + +import { Section } from "../../../shared"; +import WaveDivider from "./styled/WaveDivider"; + +const SECTION_ID = sectionIdFor(ROUTE_PORTS_VISUAL_STUDIO_CODE, 1); + +/** + * The component that represents the introduction section for the landing page of the + * "Nord Visual Studio Code" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.14.0 + */ +const SectionIntroduction = ({ assets }) => ( +
+ + + + Your IDE. Your style. + + The unified UI and editor syntax element design provides a clutter-free and fluidly merging appearance. + + + + Screenshot showing the code editor in combination with UI elements like the sidebar and minimap + Syntax highlighting in the editor in combination with UI elements like the sidebar and minimap. + + + + + +
+); + +SectionIntroduction.propTypes = usePortsAssetsPropTypes; + +export default SectionIntroduction; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionIntroduction/index.js b/src/components/organisms/page/ports/visual-studio-code/SectionIntroduction/index.js new file mode 100644 index 00000000..a20aba6f --- /dev/null +++ b/src/components/organisms/page/ports/visual-studio-code/SectionIntroduction/index.js @@ -0,0 +1,10 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +export { default } from "./SectionIntroduction"; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionIntroduction/styled/WaveDivider.jsx b/src/components/organisms/page/ports/visual-studio-code/SectionIntroduction/styled/WaveDivider.jsx new file mode 100644 index 00000000..12ac37f3 --- /dev/null +++ b/src/components/organisms/page/ports/visual-studio-code/SectionIntroduction/styled/WaveDivider.jsx @@ -0,0 +1,32 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { WaveRough } from "atoms/core/vectors/divider"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const fillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.base[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST] +}); + +/** + * A "rough" vector wave to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.14.0 + */ +const WaveDivider = styled(WaveRough)` + fill: ${fillColor}; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default WaveDivider; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionSetup/SectionSetup.jsx b/src/components/organisms/page/ports/visual-studio-code/SectionSetup/SectionSetup.jsx new file mode 100644 index 00000000..efdff940 --- /dev/null +++ b/src/components/organisms/page/ports/visual-studio-code/SectionSetup/SectionSetup.jsx @@ -0,0 +1,86 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; + +import Button from "atoms/core/Button"; +import Link from "atoms/core/Link"; +import { WaveFooter } from "atoms/core/vectors/divider"; +import { Content } from "containers/core/Section"; +import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo"; +import { ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE, ROUTE_PORTS_VISUAL_STUDIO_CODE } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; +import { Image } from "atoms/core/mdx-elements"; +import { usePortsMetadata } from "hooks"; +import { usePortsAssetsPropTypes } from "hooks/shared/propTypes"; + +import { Section } from "../../../shared"; + +const SECTION_ID = sectionIdFor(ROUTE_PORTS_VISUAL_STUDIO_CODE, 5); + +/** + * The component that represents the setup section for the landing page of the + * "Nord Visual Studio Code" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.14.0 + */ +const SectionSetup = ({ assets }) => { + const portMetadata = usePortsMetadata(); + const { extensionMarketplaceUrl, gitHubRepositoryUrl } = portMetadata.find( + port => port.name === "nord-visual-studio-code" + ); + + return ( +
+ + + + Installation and updates with one click. + + Install Nord from the official extension marketplace with one + click including automatic updates to always use the latest Nord version. + + + + + + + + + Screenshot showing the builtin extension marketplace view + + Builtin{" "} + extension marketplace{" "} + view. + + + + + + +
+ ); +}; + +SectionSetup.propTypes = usePortsAssetsPropTypes; + +export default SectionSetup; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionSetup/index.js b/src/components/organisms/page/ports/visual-studio-code/SectionSetup/index.js new file mode 100644 index 00000000..6e5d7ddb --- /dev/null +++ b/src/components/organisms/page/ports/visual-studio-code/SectionSetup/index.js @@ -0,0 +1,10 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +export { default } from "./SectionSetup"; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionSetup/styled/WaveDivider.jsx b/src/components/organisms/page/ports/visual-studio-code/SectionSetup/styled/WaveDivider.jsx new file mode 100644 index 00000000..f627054d --- /dev/null +++ b/src/components/organisms/page/ports/visual-studio-code/SectionSetup/styled/WaveDivider.jsx @@ -0,0 +1,32 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { WaveSmooth2 } from "atoms/core/vectors/divider"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const fillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.secondary[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.secondary[MODE_DARK_NIGHT_FROST] +}); + +/** + * A "smooth" vector wave to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.14.0 + */ +const WaveDivider = styled(WaveSmooth2)` + fill: ${fillColor}; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default WaveDivider; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionSyntax/SectionSyntax.jsx b/src/components/organisms/page/ports/visual-studio-code/SectionSyntax/SectionSyntax.jsx new file mode 100644 index 00000000..8933b87d --- /dev/null +++ b/src/components/organisms/page/ports/visual-studio-code/SectionSyntax/SectionSyntax.jsx @@ -0,0 +1,118 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; + +import Link from "atoms/core/Link"; +import { Content } from "containers/core/Section"; +import FeatureDuo, { Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo"; +import { ROUTE_PORTS_VISUAL_STUDIO_CODE } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; +import { Image } from "atoms/core/mdx-elements"; +import { usePortsAssetsPropTypes } from "hooks/shared/propTypes"; + +import { Section } from "../../../shared"; +import WaveDivider from "./styled/WaveDivider"; + +const SECTION_ID = sectionIdFor(ROUTE_PORTS_VISUAL_STUDIO_CODE, 2); + +/** + * The component that represents the syntax section for the landing page of the + * "Nord Visual Studio Code" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.14.0 + */ +const SectionSyntax = ({ assets }) => ( +
+ + + + Screenshot showing a Go function + + Syntax highlighting for Go. + + + + + Beautiful code to keep focused. + + The editor color scheme supports a wide range of programming languages — From bundled definitions up to many + popular third-party syntax extensions. + + + + + + + Screenshot showing a JavaScript React Hook function + + JavaScript with a React Hook for{" "} + React Spring animations. + + + + + + + Screenshot showing a React component with highlighted matching brackets + + React component with highlighted matching brackets. + + + + + + Supportive code surfing features like highlighting of bracket pairs are designed to stand out well + from the actual code. + + + + + + + Comments and reference documentations are intentionally inconspicuous and less disturbing in order to keep + the focus on the important elements: the source code. + + + + Screenshot showing multiple Go functions with corresponding documentation comments + Go function with corresponding documentation comments. + + + + + +
+); + +SectionSyntax.propTypes = usePortsAssetsPropTypes; + +export default SectionSyntax; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionSyntax/index.js b/src/components/organisms/page/ports/visual-studio-code/SectionSyntax/index.js new file mode 100644 index 00000000..600fcfdf --- /dev/null +++ b/src/components/organisms/page/ports/visual-studio-code/SectionSyntax/index.js @@ -0,0 +1,10 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +export { default } from "./SectionSyntax"; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionSyntax/styled/WaveDivider.jsx b/src/components/organisms/page/ports/visual-studio-code/SectionSyntax/styled/WaveDivider.jsx new file mode 100644 index 00000000..f627054d --- /dev/null +++ b/src/components/organisms/page/ports/visual-studio-code/SectionSyntax/styled/WaveDivider.jsx @@ -0,0 +1,32 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { WaveSmooth2 } from "atoms/core/vectors/divider"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const fillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.secondary[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.secondary[MODE_DARK_NIGHT_FROST] +}); + +/** + * A "smooth" vector wave to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.14.0 + */ +const WaveDivider = styled(WaveSmooth2)` + fill: ${fillColor}; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default WaveDivider; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionUIElements/SectionUIElements.jsx b/src/components/organisms/page/ports/visual-studio-code/SectionUIElements/SectionUIElements.jsx new file mode 100644 index 00000000..6bbde58a --- /dev/null +++ b/src/components/organisms/page/ports/visual-studio-code/SectionUIElements/SectionUIElements.jsx @@ -0,0 +1,82 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; + +import Link from "atoms/core/Link"; +import { Content } from "containers/core/Section"; +import FeatureDuo, { Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo"; +import { ROUTE_PORTS_VISUAL_STUDIO_CODE } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; +import { Image } from "atoms/core/mdx-elements"; +import { usePortsAssetsPropTypes } from "hooks/shared/propTypes"; + +import { Section } from "../../../shared"; +import WaveDivider from "./styled/WaveDivider"; + +const SECTION_ID = sectionIdFor(ROUTE_PORTS_VISUAL_STUDIO_CODE, 4); + +/** + * The component that represents the UI elements section for the landing page of the + * "Nord Visual Studio Code" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.14.0 + */ +const SectionUIElements = ({ assets }) => ( +
+ + + + Uniform design with beautiful UI elements. + + The themed UI elements provide a fluid and unobtrusive transition from the code editor to the IDE. + + + + Screenshot showing UI elements for the debug view + + UI elements for the debug view. + + + + + + + Screenshot showing the active and inactive explorer sidebar with mouse and keyboard focused items + Active and inactive sidebar with mouse and keyboard focused items. + + + + + Sane styles for basic{" "} + workbench UI elements like + the tree view of the explorer in the sidebar. + + + + + +
+); + +SectionUIElements.propTypes = usePortsAssetsPropTypes; + +export default SectionUIElements; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionUIElements/index.js b/src/components/organisms/page/ports/visual-studio-code/SectionUIElements/index.js new file mode 100644 index 00000000..fce86186 --- /dev/null +++ b/src/components/organisms/page/ports/visual-studio-code/SectionUIElements/index.js @@ -0,0 +1,10 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +export { default } from "./SectionUIElements"; diff --git a/src/components/organisms/page/ports/visual-studio-code/SectionUIElements/styled/WaveDivider.jsx b/src/components/organisms/page/ports/visual-studio-code/SectionUIElements/styled/WaveDivider.jsx new file mode 100644 index 00000000..4acc7535 --- /dev/null +++ b/src/components/organisms/page/ports/visual-studio-code/SectionUIElements/styled/WaveDivider.jsx @@ -0,0 +1,32 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { WaveWobbly } from "atoms/core/vectors/divider"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const fillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.secondary[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.secondary[MODE_DARK_NIGHT_FROST] +}); + +/** + * A "wobbly" vector wave to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.14.0 + */ +const WaveDivider = styled(WaveWobbly)` + fill: ${fillColor}; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default WaveDivider; diff --git a/src/components/organisms/page/ports/visual-studio-code/index.js b/src/components/organisms/page/ports/visual-studio-code/index.js index 1e6f3a77..a1c19365 100644 --- a/src/components/organisms/page/ports/visual-studio-code/index.js +++ b/src/components/organisms/page/ports/visual-studio-code/index.js @@ -7,7 +7,11 @@ * License: MIT */ +import SectionEditorDetails from "./SectionEditorDetails"; import SectionHero from "./SectionHero"; +import SectionIntroduction from "./SectionIntroduction"; +import SectionSetup from "./SectionSetup"; +import SectionSyntax from "./SectionSyntax"; +import SectionUIElements from "./SectionUIElements"; -/* eslint-disable-next-line import/prefer-default-export */ -export { SectionHero }; +export { SectionEditorDetails, SectionHero, SectionIntroduction, SectionSetup, SectionSyntax, SectionUIElements }; diff --git a/src/config/routes/mappings.js b/src/config/routes/mappings.js index 941b4a42..e4350688 100644 --- a/src/config/routes/mappings.js +++ b/src/config/routes/mappings.js @@ -130,6 +130,38 @@ const ROUTE_DOCS_PORTS_VIM_CUSTOMIZATION = `${ROUTE_DOCS_PORTS_VIM}/customizatio */ const ROUTE_DOCS_PORTS_VIM_INSTALLATION = `${ROUTE_DOCS_PORTS_VIM}/installation`; +/** + * The route mapping for the docs page of the "Nord Visual Studio Code" port project. + * + * @constant {string} + * @since 0.14.0 + */ +const ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE = `${ROUTE_ROOT}${DOCS}/${PORTS}/visual-studio-code`; + +/** + * The route mapping for the theme customization docs page of the "Nord Visual Studio Code" port project. + * + * @constant {string} + * @since 0.14.0 + */ +const ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_CUSTOMIZATION = `${ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE}/customization`; + +/** + * The route mapping for the development docs page of the "Nord Visual Studio Code" port project. + * + * @constant {string} + * @since 0.14.0 + */ +const ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_DEVELOPMENT = `${ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE}/development`; + +/** + * The route mapping for the installation docs page of the "Nord Visual Studio Code" port project. + * + * @constant {string} + * @since 0.14.0 + */ +const ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_INSTALLATION = `${ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE}/installation`; + /** * The route mapping for the `docs` page about Nord's colors and palettes. * @@ -187,6 +219,14 @@ const ROUTE_PORTS_JETBRAINS = `${ROUTE_ROOT}/${PORTS}/jetbrains`; */ const ROUTE_PORTS_VIM = `${ROUTE_ROOT}/${PORTS}/vim`; +/** + * The route mapping for the "Nord Visual Studio Code" port project page. + * + * @constant {string} + * @since 0.14.0 + */ +const ROUTE_PORTS_VISUAL_STUDIO_CODE = `${ROUTE_ROOT}/${PORTS}/visual-studio-code`; + /** * The per-route unique `id` attribute values of sections components. * @@ -201,6 +241,7 @@ const SECTION_COMPONENT_IDS = { [ROUTE_PORTS]: ["hero", "search"], [ROUTE_PORTS_JETBRAINS]: ["hero", "introduction", "syntax", "editor-details", "ui-elements", "setup"], [ROUTE_PORTS_VIM]: ["hero", "introduction", "syntax", "editor-details", "plugin-support", "configurations", "setup"], + [ROUTE_PORTS_VISUAL_STUDIO_CODE]: ["hero", "introduction", "syntax", "editor-details", "ui-elements", "setup"], [ROUTE_ROOT]: [ "hero", "palettes-modularity", @@ -232,6 +273,11 @@ module.exports = { ROUTE_PORTS, ROUTE_PORTS_JETBRAINS, ROUTE_PORTS_VIM, + ROUTE_PORTS_VISUAL_STUDIO_CODE, + ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE, + ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_CUSTOMIZATION, + ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_DEVELOPMENT, + ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_INSTALLATION, ROUTE_ROOT, SECTION_COMPONENT_IDS }; diff --git a/src/data/components/organisms/page/docs/ports/visual-studio-code/topics.js b/src/data/components/organisms/page/docs/ports/visual-studio-code/topics.js new file mode 100644 index 00000000..eb48f89f --- /dev/null +++ b/src/data/components/organisms/page/docs/ports/visual-studio-code/topics.js @@ -0,0 +1,62 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import { Brush, Code, CloudDownload, QuestionMarkCircle, Target } from "atoms/core/vectors/icons"; +import { + ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_CUSTOMIZATION, + ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_DEVELOPMENT, + ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_INSTALLATION +} from "config/routes/mappings"; + +/** + * The mapping of topics for the "Getting Started" contents cards of the "Nord Visual Studio Code" docs page. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.14.0 + */ +const topicsGettingStarted = [ + { + iconComponent: CloudDownload, + iconOutlined: true, + title: "Install and activate the extension", + url: ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_INSTALLATION + }, + { + iconComponent: Brush, + title: "Override styles with customizations", + url: ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_CUSTOMIZATION + }, + { + iconComponent: Code, + title: "Develop the extension on your own", + url: ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_DEVELOPMENT + } +]; + +/** + * The mapping of topics for the "References" contents cards of the "Nord Visual Studio Code" docs page. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.14.0 + */ +const topicsReferences = [ + { + iconComponent: Target, + svgType: "stroke", + title: "Supported languages and extensions" + }, + { + iconComponent: QuestionMarkCircle, + title: "Troubleshooting Guide" + } +]; + +export { topicsGettingStarted, topicsReferences }; diff --git a/src/data/ports.js b/src/data/ports.js index 78f75fbe..c318bfac 100644 --- a/src/data/ports.js +++ b/src/data/ports.js @@ -323,6 +323,8 @@ const ports = [ projectName: "Visual Studio Code", logoComponent: VisualStudioCode, projectUrl: "https://code.visualstudio.com", + extensionMarketplaceUrl: + "https://marketplace.visualstudio.com/items?itemName=arcticicestudio.nord-visual-studio-code", searchTerms: [ ...tokensExtendingSupport, ...tokensGUI, diff --git a/src/pages/docs/ports/visual-studio-code/index.jsx b/src/pages/docs/ports/visual-studio-code/index.jsx new file mode 100644 index 00000000..307f79a1 --- /dev/null +++ b/src/pages/docs/ports/visual-studio-code/index.jsx @@ -0,0 +1,35 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; + +import { SectionContents, SectionHero } from "organisms/page/docs/ports/visual-studio-code"; +import { locationPropTypes } from "data/pages/shared/propTypes"; +import BaseLayout from "layouts/core/BaseLayout"; +import { DocsPage } from "organisms/page/docs"; + +/** + * The component that represents the docs page of the "Nord Visual Studio Code" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.14.0 + */ +const VisualStudioCodeDocs = ({ location: { pathname } }) => ( + + + + + + +); + +VisualStudioCodeDocs.propTypes = locationPropTypes; + +export default VisualStudioCodeDocs; diff --git a/src/pages/ports/visual-studio-code.jsx b/src/pages/ports/visual-studio-code.jsx index 5fa22924..4f2b59d6 100644 --- a/src/pages/ports/visual-studio-code.jsx +++ b/src/pages/ports/visual-studio-code.jsx @@ -11,7 +11,15 @@ import React from "react"; import { locationPropTypes } from "data/pages/shared/propTypes"; import BaseLayout from "layouts/core/BaseLayout"; -import { SectionHero } from "organisms/page/ports/visual-studio-code"; +import { + SectionEditorDetails, + SectionHero, + SectionIntroduction, + SectionSetup, + SectionSyntax, + SectionUIElements +} from "organisms/page/ports/visual-studio-code"; +import { usePortsAssets } from "hooks"; /** * The component that represents the landing page of the "Nord Visual Studio Code" port project. @@ -20,11 +28,19 @@ import { SectionHero } from "organisms/page/ports/visual-studio-code"; * @author Sven Greb * @since 0.9.0 */ -const VisualStudioCode = ({ location: { pathname } }) => ( - - - -); +const VisualStudioCode = ({ location: { pathname } }) => { + const assets = usePortsAssets("visual-studio-code"); + return ( + + + + + + + + + ); +}; VisualStudioCode.propTypes = locationPropTypes;