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

Better readme, move kit-of-parts => jambonz-ui

Browse Source
This commit is contained in:
kitajchuk
2021-04-05 13:40:52 -07:00
parent 9aa19c4252
commit df18e729ae
7 changed files with 200 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
README.md
View File

@@ -5,33 +5,36 @@ jambonz
![](/public/jambonz.png)
## Jamstack
## Deploy targets
- [jambonz.vercel.com](https://jambonz.vercel.app)
This app can easily be deployed to multiple targets including Vercel, Netlify or AWS+circleci.
## AWS / CircleCI
- Vercel
- [jambonz.vercel.com](https://jambonz.vercel.app)
- AWS+circleci
- Could easily be implemented as in this repo [here](https://github.com/kitajchuk/punxy#aws--circleci).
- TBD :)
## Dev start
## Dev
Clone this repository and install [yarn](https://yarnpkg.com/getting-started/install). From app root:
### Install
- `yarn install`
### Work
- Installs node packages
- `yarn dev`
- Served at [localhost:3000](http://localhost:3000)
- Serves local dev at [localhost:3000](http://localhost:3000)
### UI library
- [Kit of Parts](http://localhost:3000/kit-of-parts)
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).
### Static
- Static data with [yamljs](https://www.npmjs.com/package/yamljs)
- Static props with [Next.js getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation)
- Data files in `/data/`
- JS data util in `/lib/data.js`
## Jambonz UI library
### Docs
- Using [Nextra](https://nextra.vercel.app)
- [Source repository](https://github.com/shuding/nextra/)
- Source files in `/pages/docs/`
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 consists of reusable design element components.
You can view examples of the Jambonz UI component elements on this page [here](https://jambonz.vercel.app/jambonz-ui).
## 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 developer docs
The project is using [Nextra.js](https://nextra.vercel.app) which provides a stylized developer docs theme for Next.js. We are currently loading theme CSS styles with the `styles/_nextra.scss` partial. Currently it is being used to hide the frontend page links from the Nextra sidebar nav as there is no current way to do this using pure nextra config. There is a [Github issue here](https://github.com/shuding/nextra/issues/59) referring to "Page exclusion from docs".

158
components/kit-of-parts.js
View File

@@ -1,158 +0,0 @@
import Link from 'next/link';
import Image from 'next/image';
import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Button, Icon } from './jambonz-ui';
export default function KitOfParts({pageData}) {
return (
<div className="kop">
{/* High-level design information */}
<div className="hero pad">
<div className="wrap">
<H1>
<div>Kit of Parts</div>
<div>&nbsp;</div>
</H1>
<H5>
<div><strong>font</strong></div>
<div>Objectivity (free, large family—16 styles)</div>
<div>
<Link href="https://www.behance.net/gallery/60530395/Objectivity-Free-Font-Family">
<a target="_blank">
<span>design</span>
<Icon name="ExternalLink" />
</a>
</Link>
</div>
<div>
<Link href="https://www.fontsquirrel.com/fonts/objectivity">
<a target="_blank">
<span>specimen</span>
<Icon name="ExternalLink" />
</a>
</Link>
</div>
<div>&nbsp;</div>
<div><strong>icons</strong></div>
<div>Feather (free, large set—286 icons)</div>
<div>
<Link href="https://feathericons.com">
<a target="_blank">
<span>specimen</span>
<Icon name="ExternalLink" />
</a>
</Link>
</div>
<div>
<Link href="https://github.com/feathericons/react-feather">
<a target="_blank">
<span>react-feather</span>
<Icon name="ExternalLink" />
</a>
</Link>
</div>
</H5>
</div>
</div>
{/* Show black background style */}
<div className="pad bg-black">
<div className="wrap">
<div className="wrap-text">
<H1>{pageData.text}</H1>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H2>{pageData.text}</H2>
</div>
</div>
{/* Show pink background style */}
<div className="pad bg-pink">
<div className="wrap">
<div className="wrap-text">
<H3>{pageData.text}</H3>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H4>{pageData.text}</H4>
</div>
</div>
{/* Show grey background style */}
<div className="pad bg-grey">
<div className="wrap">
<div className="wrap-text">
<H5>{pageData.text}</H5>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H6>{pageData.text}</H6>
</div>
<div className="wrap-text pad">
<P>{pageData.text}</P>
</div>
<div className="wrap-text pad">
<M>{pageData.text}</M>
</div>
<div className="wrap-text pad">
<MS>{pageData.text}</MS>
</div>
<div className="wrap-text pad">
<MXS>{pageData.text}</MXS>
</div>
<div className="pad">
<Image src="/images/Jambonz_app_screenshot.png" width={1280 / 2} height={842 / 2} />
</div>
<div className="pad">
<div className="icons">
<Icon style="fill" name="Server" />
<Icon style="fill" name="Folder" />
<Icon style="fill" name="Cloud" />
<Icon style="fill" name="Layers" />
<Icon style="fill" name="UserCheck" />
<Icon style="fill" name="Lock" />
<Icon style="fill" name="ThumbsUp" />
<Icon style="fill" subStyle="purple" name="Phone" />
<Icon style="fill" subStyle="teal" name="PhoneCall" />
<Icon style="fill" subStyle="blue" name="Activity" />
<Icon style="pill" name="Heart" />
</div>
</div>
<div className="pad">
<img src="/svg/drachtio.svg" width="128" />
</div>
<div className="pad">
<Button href="#" style="login">Log In</Button>
</div>
<div className="btns pad">
<Button href="#">Button</Button>
<Button href="#" subStyle="dark">styles...</Button>
</div>
<div className="btns pad">
<Button href="#" subStyle="purple">Optional</Button>
<Button href="#" subStyle="teal">button</Button>
<Button href="#" subStyle="blue">styles...</Button>
</div>
<div className="btns pad">
<Button href="https://github.com/jambonz" target="_blank" style="pill">
<Icon name="GitHub" />
<span>github.com/jambonz</span>
</Button>
<Button href="https://github.com/drachtio" target="_blank" style="pill">
<Icon name="GitHub" />
<span>github.com/drachtio</span>
</Button>
</div>
<div className="pad">
<Button href="#" style="pill" subStyle="jambonz">
<Icon name="Send" />
<span>Contact us to get started</span>
</Button>
</div>
</div>
</div>
);
}

0
data/kop.yml → data/jambonz-ui.yml
View File

174
pages/jambonz-ui.js Normal file
View File

@@ -0,0 +1,174 @@
import Layout from '../components/layout';
import Link from 'next/link';
import Image from 'next/image';
import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Button, Icon } from '../components/jambonz-ui';
import { getData } from '../lib/data';
export default function JambonzUI({ data }) {
const pageData = data['jambonz-ui'];
return (
<Layout siteData={data.site}>
<div className="jambonz-ui">
{/* High-level design information */}
<div className="hero pad">
<div className="wrap">
<H1>
<div>Jambonz UI</div>
<div>&nbsp;</div>
</H1>
<H5>
<div><strong>font</strong></div>
<div>Objectivity (free, large family—16 styles)</div>
<div>
<Link href="https://www.behance.net/gallery/60530395/Objectivity-Free-Font-Family">
<a target="_blank">
<span>design</span>
<Icon name="ExternalLink" />
</a>
</Link>
</div>
<div>
<Link href="https://www.fontsquirrel.com/fonts/objectivity">
<a target="_blank">
<span>specimen</span>
<Icon name="ExternalLink" />
</a>
</Link>
</div>
<div>&nbsp;</div>
<div><strong>icons</strong></div>
<div>Feather (free, large set—286 icons)</div>
<div>
<Link href="https://feathericons.com">
<a target="_blank">
<span>specimen</span>
<Icon name="ExternalLink" />
</a>
</Link>
</div>
<div>
<Link href="https://github.com/feathericons/react-feather">
<a target="_blank">
<span>react-feather</span>
<Icon name="ExternalLink" />
</a>
</Link>
</div>
</H5>
</div>
</div>
{/* Show black background style */}
<div className="pad bg-black">
<div className="wrap">
<div className="wrap-text">
<H1>{pageData.text}</H1>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H2>{pageData.text}</H2>
</div>
</div>
{/* Show pink background style */}
<div className="pad bg-pink">
<div className="wrap">
<div className="wrap-text">
<H3>{pageData.text}</H3>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H4>{pageData.text}</H4>
</div>
</div>
{/* Show grey background style */}
<div className="pad bg-grey">
<div className="wrap">
<div className="wrap-text">
<H5>{pageData.text}</H5>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H6>{pageData.text}</H6>
</div>
<div className="wrap-text pad">
<P>{pageData.text}</P>
</div>
<div className="wrap-text pad">
<M>{pageData.text}</M>
</div>
<div className="wrap-text pad">
<MS>{pageData.text}</MS>
</div>
<div className="wrap-text pad">
<MXS>{pageData.text}</MXS>
</div>
<div className="pad">
<Image src="/images/Jambonz_app_screenshot.png" width={1280 / 2} height={842 / 2} />
</div>
<div className="pad">
<div className="icons">
<Icon style="fill" name="Server" />
<Icon style="fill" name="Folder" />
<Icon style="fill" name="Cloud" />
<Icon style="fill" name="Layers" />
<Icon style="fill" name="UserCheck" />
<Icon style="fill" name="Lock" />
<Icon style="fill" name="ThumbsUp" />
<Icon style="fill" subStyle="purple" name="Phone" />
<Icon style="fill" subStyle="teal" name="PhoneCall" />
<Icon style="fill" subStyle="blue" name="Activity" />
<Icon style="pill" name="Heart" />
</div>
</div>
<div className="pad">
<img src="/svg/drachtio.svg" width="128" />
</div>
<div className="pad">
<Button href="#" style="login">Log In</Button>
</div>
<div className="btns pad">
<Button href="#">Button</Button>
<Button href="#" subStyle="dark">styles...</Button>
</div>
<div className="btns pad">
<Button href="#" subStyle="purple">Optional</Button>
<Button href="#" subStyle="teal">button</Button>
<Button href="#" subStyle="blue">styles...</Button>
</div>
<div className="btns pad">
<Button href="https://github.com/jambonz" target="_blank" style="pill">
<Icon name="GitHub" />
<span>github.com/jambonz</span>
</Button>
<Button href="https://github.com/drachtio" target="_blank" style="pill">
<Icon name="GitHub" />
<span>github.com/drachtio</span>
</Button>
</div>
<div className="pad">
<Button href="#" style="pill" subStyle="jambonz">
<Icon name="Send" />
<span>Contact us to get started</span>
</Button>
</div>
</div>
</div>
</Layout>
);
}
export async function getStaticProps() {
const data = getData('jambonz-ui');
return {
props: {
data,
},
};
}

21
pages/kit-of-parts.js
View File

@@ -1,21 +0,0 @@
import Layout from '../components/layout';
import KitOfParts from '../components/kit-of-parts';
import { getData } from '../lib/data';
export default function KOP({ data }) {
return (
<Layout siteData={data.site}>
<KitOfParts pageData={data.kop} />
</Layout>
);
}
export async function getStaticProps() {
const data = getData('kop');
return {
props: {
data,
},
};
}

2
styles/_kit-of-parts.scss → styles/_jambonz-ui.scss
View File

@@ -1,4 +1,4 @@
.kop {
.jambonz-ui {
text-align: center;
.wrap-text {

4
styles/global.scss
View File

@@ -49,9 +49,9 @@
@import 'homepage.scss';
/******************************************************************************
* Kit of Parts
* Jambonz UI
*******************************************************************************/
@import 'kit-of-parts.scss';
@import 'jambonz-ui.scss';
/******************************************************************************
* Nextra