ben.carrasco/next-static-site
1
0
Fork 0
mirror of https://github.com/jambonz/next-static-site.git synced 2025-12-19 04:47:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial refactor of jambonz-ui package library (#39)

Browse Source 
* Initial refactor of jambonz-ui package library

* Delete public/fonts directory

* Jambonz UI test-app and some refinements

* next lint

* working on jambonz ui docs

* Update package.json

* Update package.json

* Update package.json

* Create package.json

* typescript

* Update components.tsx

* Update components.tsx

* Update utils.ts

* Update icons.ts

* Update components.tsx

* Update components.tsx

* Update icons.ts

* Update components.tsx

* Update _icons.scss

* Update components.tsx

* Update components.tsx

* fix some thangs and compile all

* wrap up the docs

* Update tsconfig.json

* icons refactor

* refine docs

* update readmes

* update readme

* fix props interfaces and test in TS app

* Update components.tsx

* button up some things

* change package name...

* include readme in pkg dist

* use published package
This commit is contained in:
Brandon Lee Kitajchuk
2022-07-01 10:57:32 -07:00
committed by GitHub
parent e783a1d6a3
commit e3cd0edeb6
61 changed files with 1617 additions and 2116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
README.md
View File

@@ -25,10 +25,10 @@ Clone this repository and install [yarn](https://yarnpkg.com/getting-started/ins
### Commands
- `yarn install`
- `yarn`
- Installs node packages
- Installs [husky](https://typicode.github.io/husky/) for git `pre-commit` hooks
- Husky will run `yarn build` before a git commit and stop the commit if `lint` or `build` fails
- Husky will run `yarn lint-staged` and `yarn build` to ensure staged code is sound
- `yarn dev`
- Serves local dev at [localhost:3000](http://localhost:3000)
- `yarn lint`
@@ -39,7 +39,33 @@ Clone this repository and install [yarn](https://yarnpkg.com/getting-started/ins
- `yarn build && yarn export`
- Create a static production export for any static deploy target
### Testing
## 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.
### 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.
### 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.
## 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.
## 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`.
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*
@@ -50,34 +76,3 @@ Cypress specs are located at `cypress/integration/...`. The source of truth stat
* 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
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 `styles` directory and loaded globally in [pages/_app.js](/pages/_app.js). A generally simple BEM CSS module naming convention is being used prominently. JS components are in the `components` directory. The `jambonz-ui` component library consists of reusable design element components.
You can view examples of the Jambonz UI component elements on this page [here](https://jambonz.org/jambonz-ui).
### Jambonz 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.
### Jambonz 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 `docs` page(s) wherein we've chosen to have the `h1` element implement the `h2()` mixin and likewise the `h2` element to implement the `h3()` mixin. We even have the `li` element(s) implementing the `ms()` mixin.
## 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.
## Jambonz 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`.
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.