From db94b1782913286642b05ad68d408435fcdacb54 Mon Sep 17 00:00:00 2001 From: Brandon Lee Kitajchuk Date: Thu, 22 Jul 2021 09:34:01 -0700 Subject: [PATCH] Latest news + banner, cypress tests, open source copy, general style tweaks (#13) * Adding latest news and banners * Adding first draft of cypress specs and github actions workflow * Adding sticky position for top banner * Tweak styles for new latest news section * Tweak styles for text__layout innerHTML * Fix Cypress homepage test spec * Fix mobile navi z-index with sticky top banner * Fix sticky banner z-index bug with mobile navi * Refactor markdown tools to support pages beyond developer docs * Adjust TADHACK text max-widths for small mobile * initial changes for open source copy * more copy * more copy * updated open source structure * minor * typo * more copy * Adjust styles for Open Source markdown small text * Update readme and remove floats from docs webhooks markdown * Add readme notes on Cypress and flesh out navi spec tests * Fix main navi highlight when on sub-sections of markdown pages Co-authored-by: Dave Horton --- .eslintignore | 3 +- .github/workflows/main.yml | 25 + .gitignore | 9 +- .prettierignore | 2 - README.md | 27 +- components/jambonz-ui.js | 31 +- components/layout.js | 10 + components/markdown.js | 91 ++ components/navi.js | 11 +- cypress.json | 4 + cypress/integration/footer.spec.js | 37 + cypress/integration/home.spec.js | 29 + cypress/integration/navi.spec.js | 87 ++ cypress/plugins/index.js | 22 + cypress/scripts/fixtures.js | 22 + cypress/support/commands.js | 25 + cypress/support/index.js | 20 + data/open-source.yml | 27 + data/site.yml | 27 +- lib/data.js | 82 +- {docs => markdown/docs}/api/rest.md | 0 {docs => markdown/docs}/api/webhooks.md | 0 .../docs}/client-sdks/create-jambonz-app.md | 0 .../docs}/client-sdks/node-red.md | 0 .../docs}/client-sdks/nodejs-sdk.md | 0 .../docs}/getting-started/add-application.md | 0 .../docs}/getting-started/add-carrier.md | 0 .../getting-started/add-phone-numbers.md | 0 .../docs}/getting-started/add-speech.md | 0 .../docs}/getting-started/index.md | 0 .../getting-started/register-sip-client.md | 0 {docs => markdown/docs}/index.md | 0 {docs => markdown/docs}/open-source/aws.md | 0 .../docs}/open-source/self-host.md | 0 {docs => markdown/docs}/rest/applications.md | 0 {docs => markdown/docs}/rest/calls.md | 0 {docs => markdown/docs}/rest/overview.md | 0 {docs => markdown/docs}/rest/postman.md | 0 .../docs}/tutorials/getting-started.md | 0 .../docs}/tutorials/nodejs-sdk.md | 0 {docs => markdown/docs}/tutorials/simwood.md | 0 {docs => markdown/docs}/tutorials/voxbone.md | 0 .../docs}/webhooks/conference.md | 6 +- {docs => markdown/docs}/webhooks/dequeue.md | 6 +- {docs => markdown/docs}/webhooks/dial.md | 6 +- .../docs}/webhooks/dialogflow.md | 6 +- {docs => markdown/docs}/webhooks/enqueue.md | 6 +- {docs => markdown/docs}/webhooks/gather.md | 6 +- {docs => markdown/docs}/webhooks/hangup.md | 6 +- {docs => markdown/docs}/webhooks/leave.md | 6 +- {docs => markdown/docs}/webhooks/lex.md | 6 +- {docs => markdown/docs}/webhooks/listen.md | 6 +- {docs => markdown/docs}/webhooks/overview.md | 5 +- {docs => markdown/docs}/webhooks/pause.md | 6 +- {docs => markdown/docs}/webhooks/play.md | 6 +- {docs => markdown/docs}/webhooks/redirect.md | 6 +- {docs => markdown/docs}/webhooks/say.md | 6 +- .../docs}/webhooks/sip-decline.md | 6 +- {docs => markdown/docs}/webhooks/tag.md | 6 +- .../docs}/webhooks/transcribe.md | 5 +- .../commitment/oss-contributions.md | 13 + .../open-source/commitment/oss-we-make.md | 26 + markdown/open-source/commitment/oss-we-use.md | 31 + .../commitment/your-contributions.md | 27 + markdown/open-source/index.md | 18 + markdown/open-source/install/overview.md | 1 + package.json | 4 + pages/docs/[[...slug]].js | 93 +- pages/index.js | 5 +- pages/open-source/[[...slug]].js | 40 + styles/_layout.scss | 83 +- styles/{pages/_docs.scss => _markdown.scss} | 4 +- styles/_navi.scss | 13 +- styles/_reset.scss | 6 +- styles/_text-layout.scss | 34 +- styles/_vars.scss | 1 + styles/global.scss | 2 +- styles/pages/_home.scss | 1 + yarn.lock | 855 +++++++++++++++++- 79 files changed, 1737 insertions(+), 217 deletions(-) create mode 100644 .github/workflows/main.yml delete mode 100644 .prettierignore create mode 100644 components/markdown.js create mode 100644 cypress.json create mode 100644 cypress/integration/footer.spec.js create mode 100644 cypress/integration/home.spec.js create mode 100644 cypress/integration/navi.spec.js create mode 100644 cypress/plugins/index.js create mode 100644 cypress/scripts/fixtures.js create mode 100644 cypress/support/commands.js create mode 100644 cypress/support/index.js create mode 100644 data/open-source.yml rename {docs => markdown/docs}/api/rest.md (100%) rename {docs => markdown/docs}/api/webhooks.md (100%) rename {docs => markdown/docs}/client-sdks/create-jambonz-app.md (100%) rename {docs => markdown/docs}/client-sdks/node-red.md (100%) rename {docs => markdown/docs}/client-sdks/nodejs-sdk.md (100%) rename {docs => markdown/docs}/getting-started/add-application.md (100%) rename {docs => markdown/docs}/getting-started/add-carrier.md (100%) rename {docs => markdown/docs}/getting-started/add-phone-numbers.md (100%) rename {docs => markdown/docs}/getting-started/add-speech.md (100%) rename {docs => markdown/docs}/getting-started/index.md (100%) rename {docs => markdown/docs}/getting-started/register-sip-client.md (100%) rename {docs => markdown/docs}/index.md (100%) rename {docs => markdown/docs}/open-source/aws.md (100%) rename {docs => markdown/docs}/open-source/self-host.md (100%) rename {docs => markdown/docs}/rest/applications.md (100%) rename {docs => markdown/docs}/rest/calls.md (100%) rename {docs => markdown/docs}/rest/overview.md (100%) rename {docs => markdown/docs}/rest/postman.md (100%) rename {docs => markdown/docs}/tutorials/getting-started.md (100%) rename {docs => markdown/docs}/tutorials/nodejs-sdk.md (100%) rename {docs => markdown/docs}/tutorials/simwood.md (100%) rename {docs => markdown/docs}/tutorials/voxbone.md (100%) rename {docs => markdown/docs}/webhooks/conference.md (93%) rename {docs => markdown/docs}/webhooks/dequeue.md (91%) rename {docs => markdown/docs}/webhooks/dial.md (97%) rename {docs => markdown/docs}/webhooks/dialogflow.md (97%) rename {docs => markdown/docs}/webhooks/enqueue.md (92%) rename {docs => markdown/docs}/webhooks/gather.md (94%) rename {docs => markdown/docs}/webhooks/hangup.md (74%) rename {docs => markdown/docs}/webhooks/leave.md (70%) rename {docs => markdown/docs}/webhooks/lex.md (95%) rename {docs => markdown/docs}/webhooks/listen.md (96%) rename {docs => markdown/docs}/webhooks/overview.md (99%) rename {docs => markdown/docs}/webhooks/pause.md (70%) rename {docs => markdown/docs}/webhooks/play.md (79%) rename {docs => markdown/docs}/webhooks/redirect.md (78%) rename {docs => markdown/docs}/webhooks/say.md (87%) rename {docs => markdown/docs}/webhooks/sip-decline.md (87%) rename {docs => markdown/docs}/webhooks/tag.md (93%) rename {docs => markdown/docs}/webhooks/transcribe.md (94%) create mode 100644 markdown/open-source/commitment/oss-contributions.md create mode 100644 markdown/open-source/commitment/oss-we-make.md create mode 100644 markdown/open-source/commitment/oss-we-use.md create mode 100644 markdown/open-source/commitment/your-contributions.md create mode 100644 markdown/open-source/index.md create mode 100644 markdown/open-source/install/overview.md create mode 100644 pages/open-source/[[...slug]].js rename styles/{pages/_docs.scss => _markdown.scss} (92%) diff --git a/.eslintignore b/.eslintignore index f33ddf0..48d591d 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,4 +1,5 @@ **/node_modules/* **/out/* **/.next/* -next.config.js \ No newline at end of file +next.config.js +**/cypress/* \ No newline at end of file diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..cc7e2a6 --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,25 @@ +name: github + +on: + push: + branches: + - 'main' + pull_request: + branches: + - '**' + workflow_dispatch: + +jobs: + test: + environment: Production + # Available tools on this machine: + # https://github.com/actions/virtual-environments/blob/main/images/linux/Ubuntu2004-README.md + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - name: Setup and Install + run: yarn install + - name: Build and Start Next.js + run: yarn build && (yarn start&) > /dev/null + - name: Run Tests + run: yarn test diff --git a/.gitignore b/.gitignore index 3135249..c5f7290 100644 --- a/.gitignore +++ b/.gitignore @@ -35,4 +35,11 @@ examples packages # jambonz... -/.notes \ No newline at end of file +/.notes + +# cypress +/cypress/* +!/cypress/integration +!/cypress/plugins +!/cypress/support +!/cypress/scripts \ No newline at end of file diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index f74c781..0000000 --- a/.prettierignore +++ /dev/null @@ -1,2 +0,0 @@ -.next -node_modules diff --git a/README.md b/README.md index 8056173..fb59dc9 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,8 @@ jambonz > The "bring your own everything" CPaaS +[![CI](https://github.com/jambonz/next-static-site/actions/workflows/main.yml/badge.svg)](https://github.com/jambonz/next-static-site/actions/workflows/main.yml) + ![](/public/jambonz.png) ## Stack @@ -36,9 +38,26 @@ Clone this repository and install [yarn](https://yarnpkg.com/getting-started/ins - `yarn build && yarn start` - Create an optimized Next.js production build and serve it locally - `yarn build && yarn export` - - Create a static production build for any static deploy target + - Create a static production export for any static deploy target -Other packages being used prominently in this apps source code are [classnames](https://www.npmjs.com/package/classnames) and [nanoid](https://www.npmjs.com/package/nanoid#react). +### Testing + +*Note cypress test suite is still a work in progress* + +You can run e2e tests for the site using [Cypress](https://docs.cypress.io). Cypress specs rely on running the Next.js site on port `3000` as the baseUrl so the best way to test locally is to `yarn dev` in one shell and then `yarn test` in another shell. Optionally, you can `yarn build && yarn start` to create an optimized production server locally and in another shell run `yarn test`. The GitHub workflow for this repository runs the Cypress tests by building and then starting Next.js in the background like `yarn build && (yarn start&) > /dev/null` and then `yarn test`. + +Cypress specs are located at `cypress/integration/...`. The source of truth static YAML data should always be used when authoring Cypress tests so we've implemented a script that generates `JSON` data fixtures for Cypress from the YAML data before tests are run. When running `yarn test` what happens is: + +* A `pretest` script runs and generates the JSON fixtures for Cypress +* The Cypress tests are run in headless mode +* A `posttest` script runs and performs cleanup on the Cypress fixtures + +### Packages + +Packages being used prominently in this apps source code are: + +* [classnames](https://www.npmjs.com/package/classnames) +* [nanoid](https://www.npmjs.com/package/nanoid#react) ## Jambonz UI library @@ -54,8 +73,8 @@ You should always use the reusable components from the `jambonz-ui` component li We are using static data with [yamljs](https://www.npmjs.com/package/yamljs) and [Next.js static props](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation). Data files are located in the `data` directory. There's a JS data utility in `lib/data.js` that provides a method for "fetching" the static data for use with a Next.js pages async `getStaticProps` SSR method. -## Jambonz developer docs +## Jambonz markdown data -The project is generating developer docs from markdown files using static file JS utilities alongside Next.js static paths/props system. We are leveraging their [catch-all](https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes) dynamic routes logic located at `pages/docs/[[...slug]].js`. The markdown files are in the `docs` directory. The docs structure is controlled in the docs page YAML data located in `data/docs.yaml`. You can create docs markdown files at will in the `docs` directory but they will not render in the sidebar nav until they are also added to the nav structure in this file. +The project is generating some dynamic layouts with markdown files using static file JS utilities alongside Next.js static paths/props system. We are leveraging their [catch-all](https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes) dynamic routes logic. Example located at `pages/docs/[[...slug]].js`. The markdown files are in the `markdown` directory organized by subfolders. The markdown navigation structure is controlled in the relevant page YAML data located in the `data` directory for each `markdown` subfolder. You can create markdown files at will but they will not render in the sidebar nav until they are also added to the nav structure in the relevant `data` file. For example, the markdown files for the developer docs are located at `markdown/docs/...` and the YAML data for this layout is located at `data/docs.yml`. We are using [remark](https://github.com/remarkjs/remark), [remark-html](https://github.com/remarkjs/remark-html) and [remark-gfm](https://github.com/remarkjs/remark-gfm) as well as [gray-matter](https://github.com/jonschlinkert/gray-matter) for parsing the docs markdown files. Code syntax highlighting is done with [prismjs](https://prismjs.com) and the associative babel config is in the `.babelrc` file. It's important to leave the preset in this file that merges our config with `next/babel` so Next.js works properly. diff --git a/components/jambonz-ui.js b/components/jambonz-ui.js index 17239c4..446f9d5 100644 --- a/components/jambonz-ui.js +++ b/components/jambonz-ui.js @@ -49,7 +49,7 @@ export function useMatchMedia(mediaQuery = null) { // Normalize for our mobile media query export function useMobileMedia() { - return useMatchMedia('(max-width: 768px)'); + return useMatchMedia('(max-width: 896px)'); } export function H1({ children }) { @@ -92,6 +92,33 @@ export function MXS({ children }) { return
{children}
; } +export function Latest({ data }) { + const classes = { + 'latest': true, + [`latest--${data.label}`]: true, + 'pad': true, + 'bg-pink': true, + }; + + return ( +
+
+
+

{data.headline}

+
+
+
+ {/* Use dangerouslySetInnerHTML to render inline links from YAML data */} + {normalizeSubtext(data.subtext).map((subtext) => { + return
; + })} +
+
+
+
+ ); +} + export function Hero({ data, subStyle }) { const classes = { 'hero': true, @@ -177,7 +204,7 @@ export function Icon({ name, mainStyle = 'inline', subStyle = null, ...props }) export function TextLayout({ data }) { return (
-
+
); } diff --git a/components/layout.js b/components/layout.js index 46091c2..84a5c59 100644 --- a/components/layout.js +++ b/components/layout.js @@ -1,8 +1,17 @@ import Head from 'next/head'; +import Link from 'next/link'; import Navi from './navi'; import Footer from './footer'; +function Banner({ data }) { + return ( + + {data.text} + + ); +} + export default function Layout({ children, siteData, title = 'jambonz' }) { return ( <> @@ -23,6 +32,7 @@ export default function Layout({ children, siteData, title = 'jambonz' }) { */} + {siteData.banner && siteData.banner.active && }
{children} diff --git a/components/markdown.js b/components/markdown.js new file mode 100644 index 0000000..05f97f6 --- /dev/null +++ b/components/markdown.js @@ -0,0 +1,91 @@ +import { useState } from 'react'; + +import { nanoid } from 'nanoid'; +import classNames from 'classnames'; + +import Link from 'next/link'; +import { useRouter } from 'next/router'; + +import { Icon, TextLayout } from './jambonz-ui'; + +function MarkdownSidebar({scope, data}) { + const router = useRouter(); + const regex = new RegExp(`^/${scope}/|^/+|/+$`, 'g'); + const parsedTab = router.asPath.replace(regex, '').split('/').shift(); + const parsedPath = router.asPath.replace(/^\/+|\/+$/g, '').split('/').pop(); + const [active, setActive] = useState({ + [parsedTab]: true, + }); + + const handleToggle = (slug) => { + setActive((oldActive) => { + const newActive = {}; + + for (let i in oldActive) { + newActive[i] = oldActive[i]; + } + + newActive[slug] = newActive[slug] ? false : true; + + return newActive; + }); + }; + + return ( + + ); +} + +export default function Markdown({scope, data, docs}) { + return ( +
+
+ + +
+
+ ); +} \ No newline at end of file diff --git a/components/navi.js b/components/navi.js index cb27704..36759bc 100644 --- a/components/navi.js +++ b/components/navi.js @@ -11,10 +11,10 @@ function NaviItem({obj}) { const router = useRouter(); const rSlash = /^\/|\/$/g; const cleanLink = obj.link.replace(rSlash, ''); - const cleanPath = router.asPath.replace(rSlash, ''); + const cleanPath = router.asPath.replace(rSlash, '').split('/')[0]; const classes = { navi__link: true, - active: cleanLink === cleanPath, + active: cleanLink && cleanLink === cleanPath, }; return ( @@ -71,6 +71,11 @@ function NaviMobile({ active, handler, siteData }) { export default function Navi({ siteData }) { const [active, setActive] = useState(false); const mobile = useMobileMedia(); + const classes = { + navi: true, + mobile, + active, + }; const handleNavi = () => { setActive(!active); @@ -82,7 +87,7 @@ export default function Navi({ siteData }) { } return ( -