Skip to content

Commit

Permalink
Merge branch 'release/0.21.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
arcticicestudio committed Aug 9, 2019
2 parents ff2fb02 + a6be8b6 commit 3eaafbb
Show file tree
Hide file tree
Showing 46 changed files with 13,492 additions and 56 deletions.
57 changes: 43 additions & 14 deletions CHANGELOG.md

Large diffs are not rendered by default.

Binary file added assets/images/ports/slack/overview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12,431 changes: 12,431 additions & 0 deletions assets/images/ports/slack/repository-hero.ai

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions assets/images/ports/slack/repository-hero.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/ports/slack/slack-theme-config.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
85 changes: 85 additions & 0 deletions content/docs/ports/slack/installation/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import Link from "atoms/core/Link";
import { useClipboard } from "use-clipboard-copy";
import { Clipboard } from "atoms/core/vectors/icons";
import { Image, ShrinkedWidth, SpaceBox } from "atoms/core/mdx-elements";
import { Kbd } from "atoms/core/html-elements";
import { ClipboardIcon, ColorValueInput, ColorValueInputBox } from "organisms/page/ports/slack/SectionSetup/styled";
import { ReactComponent as Plugin } from "assets/images/illustrations/plugin.svg";

import WIPNotice from "../../../../shared/docs/wip-notice";

export const frontmatter = {
title: "Installation & Activation",
subline: "Get up and running with one line of code."
};

export const ColorValues = function() {
const clipboard = useClipboard();
function handleTextInputFocus({ target }) {
target.select();
}
function handleClipboardCopy() {
clipboard.copy();
}
return (
<>
<ColorValueInputBox onClick={handleClipboardCopy} aria-label="Copy to clipboard" title="Copy to clipboard">
<ClipboardIcon outlined svgComponent={Clipboard} />
<ColorValueInput
readOnly
type="text"
value="#2E3440,#3B4252,#88C0D0,#2E3440,#3B4252,#D8DEE9,#A3BE8C,#81A1C1"
ref={clipboard.target}
onFocus={handleTextInputFocus}
/>
</ColorValueInputBox>
</>
);
};

<ShrinkedWidth value={25}>

<SpaceBox mTop={4} mBottom={4}>
<Plugin />
</SpaceBox>

</ShrinkedWidth>

<ShrinkedWidth value={80}>

<WIPNotice />

Thanks to [Slack's simply shareable custom themes][slk-help-themes], _Nord Slack_ can be installed with one line of code.

1. [Sign in][slk-help-sign_in] to the Slack workspace you’d like to customize.
2. [Open Slack](slack://open) and click on the workspace name to go to the **Preferences** or via <Kbd>Ctrl</Kbd>/<Kbd>⌘</Kbd>+<Kbd>,</Kbd>.
3. Switch to the **Sidebar** section and scroll down to the text field in the **Custom Theme** section at the bottom.
- If the text field is not visible, click on the „Customize your theme and share it with others“ link to toggle it.
4. Copy Nord's color values from the text field below and paste it into Slack's custom theme text field to install and automatically apply the custom theme.

<SpaceBox mTop={4} mBottom={4}>
<ColorValues />
</SpaceBox>

<Image
alt="Screenshot showing the workspace preferences UI to install and activate custom themes"
dropShadow
fluid={props.images["slack-theme-config.png"]}
rounded
>
<span>
The workspace preferences UI to{" "}
<Link href="https://get.slack.help/hc/en-us/articles/205166337-Customize-your-Slack-theme">
install and activate custom themes
</Link>
.
</span>
</Image>

See the official [Slack Help Center][slk-help] for more details and documentations.

</ShrinkedWidth>

[slk-help-sign_in]: https://get.slack.help/hc/articles/212681477-Sign-in-to-Slack
[slk-help-themes]: https://get.slack.help/hc/articles/205166337-Customize-your-Slack-theme
[slk-help]: https://get.slack.help/hc
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 14 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "nord-docs",
"title": "Nord Docs",
"version": "0.20.0",
"version": "0.21.0",
"description": "The official Nord website and documentation",
"author": {
"name": "Arctic Ice Studio",
Expand Down Expand Up @@ -137,6 +137,7 @@
"styled-theming": "2.2.0",
"subscribe-ui-event": "2.0.5",
"typeface-rubik": "0.0.72",
"typeface-source-code-pro": "0.0.71"
"typeface-source-code-pro": "0.0.71",
"use-clipboard-copy": "0.1.1"
}
}
4 changes: 4 additions & 0 deletions src/assets/images/icons/eva-icons/clipboard-fill.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/images/icons/eva-icons/clipboard-outline.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/images/icons/eva-icons/copy-fill.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/assets/images/icons/eva-icons/copy-outline.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/ports/slack/overview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 47 additions & 0 deletions src/components/atoms/core/vectors/icons/Clipboard.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/*
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
* Copyright (C) 2018-present Sven Greb <[email protected]>
*
* Project: Nord Docs
* Repository: https://github.com/arcticicestudio/nord-docs
* License: MIT
*/

import React from "react";
import styled from "styled-components";

import { ReactComponent as ClipboardSVGFill } from "assets/images/icons/eva-icons/clipboard-fill.svg";
import { ReactComponent as ClipboardSVGOutline } from "assets/images/icons/eva-icons/clipboard-outline.svg";

import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";

const ClipboardIconFill = styled(ClipboardSVGFill)`
${themeModeFillColorStyles};
`;

const ClipboardIconOutline = styled(ClipboardSVGOutline)`
${themeModeFillColorStyles};
`;

/**
* The "clipboard" icon from "Eva Icons" as styled SVG vector graphic component.
* The "outline" variant can be used by passing the `outlined` boolean prop.
* By default, it uses the fill color and transition based on the current active global theme mode.
*
* @author Arctic Ice Studio <[email protected]>
* @author Sven Greb <[email protected]>
* @see https://akveo.github.io/eva-icons
* @since 0.21.0
*/
const Clipboard = ({ className, outlined, svgRef }) =>
outlined ? (
<ClipboardIconOutline className={className} svgRef={svgRef} />
) : (
<ClipboardIconFill className={className} svgRef={svgRef} />
);

Clipboard.propTypes = iconPropTypes;

Clipboard.defaultProps = iconDefaultProps;

export default Clipboard;
47 changes: 47 additions & 0 deletions src/components/atoms/core/vectors/icons/Copy.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/*
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
* Copyright (C) 2018-present Sven Greb <[email protected]>
*
* Project: Nord Docs
* Repository: https://github.com/arcticicestudio/nord-docs
* License: MIT
*/

import React from "react";
import styled from "styled-components";

import { ReactComponent as CopySVGFill } from "assets/images/icons/eva-icons/copy-fill.svg";
import { ReactComponent as CopySVGOutline } from "assets/images/icons/eva-icons/copy-outline.svg";

import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";

const CopyIconFill = styled(CopySVGFill)`
${themeModeFillColorStyles};
`;

const CopyIconOutline = styled(CopySVGOutline)`
${themeModeFillColorStyles};
`;

/**
* The "copy" icon from "Eva Icons" as styled SVG vector graphic component.
* The "outline" variant can be used by passing the `outlined` boolean prop.
* By default, it uses the fill color and transition based on the current active global theme mode.
*
* @author Arctic Ice Studio <[email protected]>
* @author Sven Greb <[email protected]>
* @see https://akveo.github.io/eva-icons
* @since 0.21.0
*/
const Copy = ({ className, outlined, svgRef }) =>
outlined ? (
<CopyIconOutline className={className} svgRef={svgRef} />
) : (
<CopyIconFill className={className} svgRef={svgRef} />
);

Copy.propTypes = iconPropTypes;

Copy.defaultProps = iconDefaultProps;

export default Copy;
4 changes: 4 additions & 0 deletions src/components/atoms/core/vectors/icons/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,12 @@ import ArrowForward from "./ArrowForward";
import BookOpen from "./BookOpen";
import Brush from "./Brush";
import Bulb from "./Bulb";
import Clipboard from "./Clipboard";
import CloudDownload from "./CloudDownload";
import Code from "./Code";
import CodeDownload from "./CodeDownload";
import Compass from "./Compass";
import Copy from "./Copy";
import Discord from "./Discord";
import GitHub from "./GitHub";
import Heart from "./Heart";
Expand Down Expand Up @@ -52,10 +54,12 @@ export {
BookOpen,
Brush,
Bulb,
Clipboard,
CloudDownload,
Code,
CodeDownload,
Compass,
Copy,
Discord,
GitHub,
Heart,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/*
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
* Copyright (C) 2018-present Sven Greb <[email protected]>
*
* 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_SLACK } from "config/routes/mappings";
import { topicsGettingStarted, topicsReferences } from "data/components/organisms/page/docs/ports/slack/topics";
import { sectionIdFor } from "utils";
import { colors } from "styles/theme";

import { ContentsCard, CardGrid } from "../../../shared";

const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_SLACK, 1);

/**
* The component that represents the contents section of the docs page for the "Nord Slack" port project.
*
* @author Arctic Ice Studio <[email protected]>
* @author Sven Greb <[email protected]>
* @since 0.21.0
*/
const SectionContents = () => (
<Section id={SECTION_ID} variant="tertiary">
<Content centered>
<CardGrid>
<ContentsCard
accentColor={colors.nord8}
logoComponent={Zap}
svgType="stroke"
title="Getting Started"
topics={topicsGettingStarted}
>
Learn how to install and activate the theme.
</ContentsCard>
<ContentsCard accentColor={colors.nord10} logoComponent={BookOpen} title="References" topics={topicsReferences}>
Learn how to deal with occurring problems.
</ContentsCard>
</CardGrid>
</Content>
<WaveFooter />
</Section>
);

export default SectionContents;
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/*
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
* Copyright (C) 2018-present Sven Greb <[email protected]>
*
* Project: Nord Docs
* Repository: https://github.com/arcticicestudio/nord-docs
* License: MIT
*/

export { default } from "./SectionContents";
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/*
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
* Copyright (C) 2018-present Sven Greb <[email protected]>
*
* 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_SLACK } from "config/routes/mappings";
import { sectionIdFor } from "utils";

import { Headline, Subline } from "../../../shared";

const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_SLACK, 0);

/**
* The component that represents the hero section of the docs page for the "Nord Slack" port project.
*
* @author Arctic Ice Studio <[email protected]>
* @author Sven Greb <[email protected]>
* @since 0.21.0
*/
const SectionHero = () => (
<Section id={SECTION_ID} variant="tertiary">
<Content centered>
<Headline>Nord Slack</Headline>
<Subline>Documentations to get to know the theme and or find solution for possible problems.</Subline>
</Content>
</Section>
);

export default SectionHero;
Loading

0 comments on commit 3eaafbb

Please sign in to comment.