diff --git a/README.md b/README.md index 35cc298..e0475e5 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,42 @@ -jambonz -======= +

+ + +

jambonz.org

+ +

-> 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) +## The stack -![](/public/jambonz.png) - -## Stack - -- [Next.js](https://nextjs.org) - -## Deploy target(s) - -This app is currently deploying on [Vercel](https://vercel.com). +This app is a [Next.js](https://nextjs.org) site deploying on [Vercel](https://vercel.com). - [jambonz.vercel.app](https://jambonz.vercel.app) ## Dev start -Clone this repository and install [yarn](https://yarnpkg.com/getting-started/install). ***Important for developers: Run a fresh `yarn install` and make sure [Husky](https://typicode.github.io/husky/) installs on your local machine*** Your terminal output will show that husky has been installed after yarn resolves packages, something like this: +Clone this repository and install [yarn](https://yarnpkg.com/getting-started/install). +***Important for developers: Run a fresh `yarn install` and make sure [Husky](https://typicode.github.io/husky/) +installs on your local machine*** Your terminal output will show that husky has been installed +after yarn resolves packages, something like this: ### Commands - `yarn` - - Installs node packages - - Installs [husky](https://typicode.github.io/husky/) for git `pre-commit` hooks - - Husky will run `yarn lint-staged` and `yarn build` to ensure staged code is sound + - Installs packages and setup husky - `yarn dev` - Serves local dev at [localhost:3000](http://localhost:3000) - `yarn lint` - - Runs [ESLint](https://eslint.org/) validations on source JS - - Install the [ESLint plugin for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint&ssr=false#overview) + - Runs Next.js linting - `yarn build && yarn start` - Create an optimized Next.js production build and serve it locally - `yarn build && yarn export` @@ -41,37 +44,79 @@ Clone this repository and install [yarn](https://yarnpkg.com/getting-started/ins ## Jambonz UI library -Head on over to the [jambonz-ui](https://github.com/jambonz/jambonz-ui) repo for full documentation. Also check out the [jambonz-ui docs](https://jambonz.org/docs/jambonz-ui/getting-started/) as a more in-depth resource. +Head on over to the [jambonz-ui](https://github.com/jambonz/jambonz-ui) repo for full documentation. +Also check out the [jambonz-ui docs](https://jambonz.org/docs/jambonz-ui/getting-started/) as a more +in-depth resource. ### UI Design -This app is being composed in the manor of `module > component > element`, wherein a page is a module which is made up of components that are comprised of elements. We are using [Next.js](https://nextjs.org) [SASS](https://nextjs.org/learn/basics/assets-metadata-css/css-styling) located in the `src/styles` directory and loaded globally in [pages/_app.js](/pages/_app.js). JS components are in the `src/components` directory. The `jambonz-ui` component library consists of reusable design element components. +This app is being composed in the manor of `module > component > element`, wherein a page is a +module which is made up of components that are comprised of elements. We are using [Next.js](https://nextjs.org) +[SASS](https://nextjs.org/learn/basics/assets-metadata-css/css-styling) located in the `src/styles` +directory and loaded globally in [pages/_app.js](/pages/_app.js). JS components are in the `src/components` +directory. The `jambonz-ui` component library consists of reusable design element components. ### Styling -We are using the [BEM](http://getbem.com/) style for our CSS/SASS system. Please review current implementations in `src/styles` and take the time to understand the BEM style in order to properly name and design your components styling. +We are using the [BEM](http://getbem.com/) style for our CSS/SASS system. Please review current +implementations in `src/styles` and take the time to understand the BEM style in order to properly +name and design your components styling. ### Typography -You should always use the reusable components from the `jambonz-ui` component library. These typographic components implement our type-scale for our design system. When styling pages in which we want to adjust or tweak the type-scale you should always use the `mixins` provided in the SASS. This ensures when we decide to break out of our standard type-scale implementation for any given element(s) we retain a harmonious nature to our type sizing as it retains its responsive nature provided by the `mixins`. A perfect example of how we have already done this is for the `_text-layout` page(s) wherein we've chosen to have the `p` element implement the `ms()` mixin and likewise the `li` element(s) implementing the `ms()` mixin as well. +You should always use the reusable components from the `jambonz-ui` component library. +These typographic components implement our type-scale for our design system. When styling +pages in which we want to adjust or tweak the type-scale you should always use the `mixins` +provided in the SASS. This ensures when we decide to break out of our standard type-scale +implementation for any given element(s) we retain a harmonious nature to our type sizing +as it retains its responsive nature provided by the `mixins`. A perfect example of how we +have already done this is for the `_text-layout` page(s) wherein we've chosen to have the +`p` element implement the `ms()` mixin and likewise the `li` element(s) implementing the +`ms()` mixin as well. ## Static page data -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. +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. ## Markdown data -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`. +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. +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. ## 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`. +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: +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 diff --git a/public/android-icon-192x192.png b/public/android-icon-192x192.png deleted file mode 100644 index 05546c7..0000000 Binary files a/public/android-icon-192x192.png and /dev/null differ diff --git a/public/apple-icon-180x180.png b/public/apple-icon-180x180.png deleted file mode 100644 index 6eaa045..0000000 Binary files a/public/apple-icon-180x180.png and /dev/null differ diff --git a/public/apple-icon.png b/public/apple-icon.png deleted file mode 100644 index 8d61896..0000000 Binary files a/public/apple-icon.png and /dev/null differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png deleted file mode 100644 index 91c9c24..0000000 Binary files a/public/favicon-16x16.png and /dev/null differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png deleted file mode 100644 index 63ab20c..0000000 Binary files a/public/favicon-32x32.png and /dev/null differ diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png deleted file mode 100644 index 834ed7b..0000000 Binary files a/public/favicon-96x96.png and /dev/null differ diff --git a/public/favicon.ico b/public/favicon.ico index 4a73fc5..a12e3ef 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/icon.png b/public/icon.png new file mode 100644 index 0000000..549b410 Binary files /dev/null and b/public/icon.png differ diff --git a/public/icon1024.png b/public/icon1024.png new file mode 100644 index 0000000..5c687ec Binary files /dev/null and b/public/icon1024.png differ diff --git a/public/icon192.png b/public/icon192.png new file mode 100644 index 0000000..80109e5 Binary files /dev/null and b/public/icon192.png differ diff --git a/public/icon384.png b/public/icon384.png new file mode 100644 index 0000000..ab5418d Binary files /dev/null and b/public/icon384.png differ diff --git a/public/icon512.png b/public/icon512.png new file mode 100644 index 0000000..6401c7c Binary files /dev/null and b/public/icon512.png differ diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index 0c814a4..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index da952c5..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/public/logo64.png b/public/logo64.png deleted file mode 100644 index d31df3f..0000000 Binary files a/public/logo64.png and /dev/null differ diff --git a/public/manifest.json b/public/manifest.json index ce71503..394a3f1 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { "short_name": "jambonz", - "name": "The “bring your own everything” CPaaS", + "name": "jambonz", "icons": [ { "src": "favicon.ico", @@ -8,19 +8,29 @@ "type": "image/x-icon" }, { - "src": "logo192.png", + "src": "icon192.png", "type": "image/png", "sizes": "192x192" }, { - "src": "logo512.png", + "src": "icon384.png", + "type": "image/png", + "sizes": "384x384" + }, + { + "src": "icon512.png", "type": "image/png", "sizes": "512x512", "purpose": "any maskable" + }, + { + "src": "icon1024.png", + "type": "image/png", + "sizes": "1024x1024" } ], "start_url": ".", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" -} +} \ No newline at end of file diff --git a/public/ms-icon-144x144.png b/public/ms-icon-144x144.png deleted file mode 100644 index 08f63b7..0000000 Binary files a/public/ms-icon-144x144.png and /dev/null differ