Skip to content

Commit

Permalink
Merge 249c2cb into 7e5fec2
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vadorequest
Vadorequest authored Jun 12, 2020
2 parents 7e5fec2 + 249c2cb commit 99a48d2
Show file tree
Hide file tree
Showing 2 changed files with 151 additions and 98 deletions.
40 changes: 32 additions & 8 deletions src/components/doc/ExternalFeaturesSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/** @jsx jsx */
import { css, jsx } from '@emotion/core';
import { jsx } from '@emotion/core';
import React from 'react';
import { Alert, Button, Card, CardBody, CardSubtitle, CardText, CardTitle } from 'reactstrap';
import Cards from '../utils/Cards';
Expand All @@ -19,25 +19,49 @@ const ExternalFeaturesSection: React.FunctionComponent<Props> = (props): JSX.Ele
<h2>External features</h2>

<Alert color={'info'}>
This section showcases features that <b>aren't built-in</b> within NRN.
This section showcases features that <b>aren't built-in</b> within NRN.<br />
You can consider them as <i>"advanced integration examples"</i>.
</Alert>

<Cards>
<Cards maxCards={1}>
<Card>
<CardBody>
<CardTitle><h3>Backoffice/Admin site</h3></CardTitle>
<CardSubtitle>&ldquo;Manage NRN content using Stacker&rdquo;</CardSubtitle>
<CardSubtitle>&ldquo;Update NRN demo using Stacker CMS&rdquo;</CardSubtitle>
<CardText tag={'div'}>
<Alert color={'info'}>
You have the ability to update this demo dynamic content using Stacker.<br />
TODO Stacker
Edit this demo using Stacker CMS!<br />
<br />
You can edit the <code>customer</code> theme, play with its primary color to see how the demo is affected depending on the various rendering modes (SSG, SSR, etc.)<br />
<br />
You can also edit the products, and play around, as if you were using the Stacker CMS from a customer/editor standpoint!<br />
</Alert>

<Alert color={'success'}>
If you like Stacker and would like to use it, here is a coupon code to
<ExternalLink href={'https://studio.airportal.app/register?coupon=nrn1m'}>get your first month for free!</ExternalLink>
<br />
<code>nrn1m</code>
</Alert>

<div className={'buttons'}>
<ExternalLink href={''}>
<Button color={'link'}>Go to Stacker</Button>
<ExternalLink href={process.env.NEXT_PUBLIC_CUSTOMER_REF === 'customer1' ? 'https://nrn.my.stacker.app/login?api_token=be1050d1-de5e-4ae0-97c8-030a132f254b&ref=unly-nrn' : 'https://nrn.my.stacker.app/login?api_token=c3a703bc-c4cc-42ee-aeac-03643636dbb0&ref=unly-nrn'}>
<Button color={'link'}>
Impersonate <b>Customer {process.env.NEXT_PUBLIC_CUSTOMER_REF === 'customer1' ? '1' : '2'} Admin</b> and play with this demo
</Button>
</ExternalLink>
<ExternalLink href={'https://stacker.app?ref=unly-nrn'}>
<Button color={'link'}>
Learn more about Stacker
</Button>
</ExternalLink>
</div>

<Alert color={'info'}>
Impersonating a user will grant you access to Stacker CMS with the user's permissions and will give you access to content that's related to its tenant.<br />
<br />
This is a great feature for <b>SaaS B2B businesses</b>, because each customer can only view/edit their own content, not what belongs to another customer.
</Alert>
</CardText>
</CardBody>
</Card>
Expand Down
209 changes: 119 additions & 90 deletions src/components/pageLayouts/Nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { BUILT_IN_FEATURES_SIDEBAR_LINKS } from '../doc/BuiltInFeaturesSidebar';
import { BUILT_IN_UTILITIES_SIDEBAR_LINKS } from '../doc/BuiltInUtilitiesSidebar';
import { NATIVE_FEATURES_SIDEBAR_LINKS } from '../doc/NativeFeaturesSidebar';
import I18nLink from '../i18n/I18nLink';
import Tooltip from '../utils/Tooltip';

type Props = {};

Expand Down Expand Up @@ -148,120 +149,148 @@ const Nav: React.FunctionComponent<Props> = () => {
</NavItem>

<NavItem>
<UncontrolledDropdown>
<DropdownToggle id={'nav-link-examples'} tag={'span'} className={classnames({ active: isActive(router, 'examples') })} caret>
<FontAwesomeIcon icon={['fas', 'book-reader']} />
{t('nav.examplesPage.link', 'Exemples')}
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Native features</DropdownItem>
{
map(NATIVE_FEATURES_SIDEBAR_LINKS, (link: SidebarLink) => {
const { label, href, params = null } = link;
return (
<DropdownItem tag={'span'} key={href}>
<I18nLink href={href} params={params} wrapChildrenAsLink={false}>
<NavLink id={`nav-link-examples-${kebabCase(label)}`} active={router.pathname.replace('/[locale]', '') === href}>
{label}
</NavLink>
</I18nLink>
</DropdownItem>
);
})
}
<DropdownItem divider />
<Tooltip
overlay={<span>
Check out our examples! <br />
They explain Next.js native features, alongside NRN built-in features/utilities.
</span>}
>
<UncontrolledDropdown>
<DropdownToggle id={'nav-link-examples'} tag={'span'} className={classnames({ active: isActive(router, 'examples') })} caret>
<FontAwesomeIcon icon={['fas', 'book-reader']} />
{t('nav.examplesPage.link', 'Exemples')}
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Native features</DropdownItem>
{
map(NATIVE_FEATURES_SIDEBAR_LINKS, (link: SidebarLink) => {
const { label, href, params = null } = link;
return (
<DropdownItem tag={'span'} key={href}>
<I18nLink href={href} params={params} wrapChildrenAsLink={false}>
<NavLink id={`nav-link-examples-${kebabCase(label)}`} active={router.pathname.replace('/[locale]', '') === href}>
{label}
</NavLink>
</I18nLink>
</DropdownItem>
);
})
}
<DropdownItem divider />

<DropdownItem header>Built-in features</DropdownItem>
{
map(BUILT_IN_FEATURES_SIDEBAR_LINKS, (link: SidebarLink) => {
const { label, href, params = null } = link;
return (
<DropdownItem tag={'span'} key={href}>
<I18nLink href={href} params={params} wrapChildrenAsLink={false}>
<NavLink id={`nav-link-examples-${kebabCase(label)}`} active={router.pathname.replace('/[locale]', '') === href}>
{label}
</NavLink>
</I18nLink>
</DropdownItem>
);
})
}
<DropdownItem divider />
<DropdownItem header>Built-in features</DropdownItem>
{
map(BUILT_IN_FEATURES_SIDEBAR_LINKS, (link: SidebarLink) => {
const { label, href, params = null } = link;
return (
<DropdownItem tag={'span'} key={href}>
<I18nLink href={href} params={params} wrapChildrenAsLink={false}>
<NavLink id={`nav-link-examples-${kebabCase(label)}`} active={router.pathname.replace('/[locale]', '') === href}>
{label}
</NavLink>
</I18nLink>
</DropdownItem>
);
})
}
<DropdownItem divider />

<DropdownItem header>Built-in utilities</DropdownItem>
{
map(BUILT_IN_UTILITIES_SIDEBAR_LINKS, (link: SidebarLink) => {
const { label, href, params = null } = link;
return (
<DropdownItem tag={'span'} key={href}>
<I18nLink href={href} params={params} wrapChildrenAsLink={false}>
<NavLink id={`nav-link-examples-${kebabCase(label)}`} active={router.pathname.replace('/[locale]', '') === href}>
{label}
</NavLink>
</I18nLink>
</DropdownItem>
);
})
}
</DropdownMenu>
</UncontrolledDropdown>
<DropdownItem header>Built-in utilities</DropdownItem>
{
map(BUILT_IN_UTILITIES_SIDEBAR_LINKS, (link: SidebarLink) => {
const { label, href, params = null } = link;
return (
<DropdownItem tag={'span'} key={href}>
<I18nLink href={href} params={params} wrapChildrenAsLink={false}>
<NavLink id={`nav-link-examples-${kebabCase(label)}`} active={router.pathname.replace('/[locale]', '') === href}>
{label}
</NavLink>
</I18nLink>
</DropdownItem>
);
})
}
</DropdownMenu>
</UncontrolledDropdown>
</Tooltip>
</NavItem>

<NavItem>
<Col className={'navItemsMenu'}>
<Row className={'justify-content-center'}>
<NavLink
id={'nav-link-github-doc'}
href={`https://unlyed.github.io/next-right-now/`}
target={'_blank'}
rel={'noopener'}
onClick={(): void => {
logEvent('open-github-doc');
}}
<Tooltip
overlay={<span>
Visit our general NRN documentation site, built with the Github Pages and Jekyll!<br />
This docs website explains the NRN concepts, how to get started and much more!
</span>}
>
<FontAwesomeIcon icon={['fas', 'book']} />
{t('nav.githubDocPage.link', 'Documentation')}
</NavLink>
<NavLink
id={'nav-link-github-doc'}
href={`https://unlyed.github.io/next-right-now/`}
target={'_blank'}
rel={'noopener'}
onClick={(): void => {
logEvent('open-github-doc');
}}
>
<FontAwesomeIcon icon={['fas', 'book']} />
{t('nav.githubDocPage.link', 'Documentation')}
</NavLink>
</Tooltip>
</Row>
</Col>
</NavItem>

<NavItem>
<Col className={'navItemsMenu'}>
<Row className={'justify-content-center'}>
<NavLink
id={'nav-link-github'}
href={`https://github.com/UnlyEd/next-right-now/tree/${process.env.NEXT_PUBLIC_NRN_PRESET}`}
target={'_blank'}
rel={'noopener'}
onClick={() => {
logEvent('open-github');
}}
title={'Github branch preset'}
<Tooltip
overlay={<span>Visit our Github branch for the current preset and navigate through the source code!</span>}
>
<FontAwesomeIcon icon={['fab', 'github']} />
{t('nav.githubPage.link', 'Github branch')}
</NavLink>
<NavLink
id={'nav-link-github'}
href={`https://github.com/UnlyEd/next-right-now/tree/${process.env.NEXT_PUBLIC_NRN_PRESET}`}
target={'_blank'}
rel={'noopener'}
onClick={() => {
logEvent('open-github');
}}
title={''}
>
<FontAwesomeIcon icon={['fab', 'github']} />
{t('nav.githubPage.link', 'Github branch')}
</NavLink>
</Tooltip>
</Row>
</Col>
</NavItem>

<NavItem>
<Col className={'navItemsMenu'}>
<Row className={'justify-content-center'}>
<NavLink
id={'nav-link-admin-site'}
href={``}
target={'_blank'}
rel={'noopener'}
onClick={(): void => {
logEvent('open-admin-site');
}}
title={'Edit dynamic content using Airtable and Stacker!'}
<Tooltip
overlay={<span>
Edit this demo using Stacker CMS!<br />
<br />
You can edit the <code>customer</code> theme, play with its primary color to see how the demo is affected depending on the various rendering modes (SSG, SSR, etc.)<br />
<br />
You can also edit the products, and play around, as if you were using the Stacker CMS from a customer/editor standpoint!
</span>}
>
<FontAwesomeIcon icon={['fas', 'user-cog']} />
{t('nav.adminSite.link', 'Admin site')}
</NavLink>
<NavLink
id={'nav-link-admin-site'}
// Token isn't sensitive because it's a demo, any visitor is meant to have access to Stacker back office and update content
href={process.env.NEXT_PUBLIC_CUSTOMER_REF === 'customer1' ? 'https://nrn.my.stacker.app/login?api_token=be1050d1-de5e-4ae0-97c8-030a132f254b&ref=unly-nrn' : 'https://nrn.my.stacker.app/login?api_token=c3a703bc-c4cc-42ee-aeac-03643636dbb0&ref=unly-nrn'}
target={'_blank'}
rel={'noopener'}
onClick={(): void => {
logEvent('open-admin-site');
}}
>
<FontAwesomeIcon icon={['fas', 'user-cog']} />
{t('nav.adminSite.link', 'Admin site')}
</NavLink>
</Tooltip>
</Row>
</Col>
</NavItem>
Expand Down

0 comments on commit 99a48d2

Please sign in to comment.