-
-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
46 changed files
with
13,492 additions
and
56 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Large diffs are not rendered by default.
Oops, something went wrong.
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.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
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.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 53 additions & 0 deletions
53
src/components/organisms/page/docs/ports/slack/SectionContents/SectionContents.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
10 changes: 10 additions & 0 deletions
10
src/components/organisms/page/docs/ports/slack/SectionContents/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"; |
36 changes: 36 additions & 0 deletions
36
src/components/organisms/page/docs/ports/slack/SectionHero/SectionHero.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
Oops, something went wrong.