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

Merge pull request #11 from jambonz/chore/add-react-app-eslint

Browse Source 
Adding react-app for ESLint better React linting
This commit is contained in:
Dave Horton
2021-06-22 12:07:55 -04:00
committed by GitHub
parent f9e8ef713e 98dec2d21b
commit ac33cdaac1
9 changed files with 657 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc.json
View File

@@ -11,7 +11,8 @@
}, },
"extends": [ "extends": [
"eslint:recommended", "eslint:recommended",
"plugin:react/recommended" "plugin:react/recommended",
"react-app"
], ],
"parserOptions": { "parserOptions": {
"ecmaFeatures": { "ecmaFeatures": {
@@ -26,6 +27,8 @@
"rules": { "rules": {
"react/prop-types": "off", "react/prop-types": "off",
"react/react-in-jsx-scope": "off", "react/react-in-jsx-scope": "off",
"jsx-a11y/anchor-is-valid": "off",
"jsx-a11y/alt-text": "off",
"indent": [ "indent": [
"error", "error",
2 2

22
components/jambonz-ui.js
View File

@@ -1,7 +1,7 @@
import classNames from 'classnames'; import classNames from 'classnames';
import * as Icons from 'react-feather'; import * as Icons from 'react-feather';
import { nanoid } from 'nanoid'; import { nanoid } from 'nanoid';
import { useState, useEffect } from 'react'; import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link'; import Link from 'next/link';
@@ -28,9 +28,9 @@ export function useMatchMedia(mediaQuery = null) {
const [mobile, setMobile] = useState(false); const [mobile, setMobile] = useState(false);
const handleMedia = (e) => { const handleMedia = useCallback((e) => {
setMobile(e.matches); setMobile(e.matches);
}; }, [setMobile]);
useEffect(() => { useEffect(() => {
const mql = window.matchMedia(mediaQuery); const mql = window.matchMedia(mediaQuery);
@@ -42,7 +42,7 @@ export function useMatchMedia(mediaQuery = null) {
return function cleanup() { return function cleanup() {
mql.removeEventListener('change', handleMedia); mql.removeEventListener('change', handleMedia);
}; };
}, [handleMedia, setMobile]); }, [handleMedia, setMobile, mediaQuery]);
return mobile; return mobile;
} }
@@ -126,14 +126,14 @@ export function Hero({ data, subStyle }) {
} }
// Extra {props} get passed to the <a> element // Extra {props} get passed to the <a> element
export function Button({ children, href, style = 'fill', subStyle = null, ...props }) { export function Button({ children, href, mainStyle = 'fill', subStyle = null, ...props }) {
const classes = { const classes = {
'btn': true, 'btn': true,
[`btn--${style}`]: true, [`btn--${mainStyle}`]: true,
}; };
if (subStyle) { if (subStyle) {
classes[`btn--${style}--${subStyle}`] = true; classes[`btn--${mainStyle}--${subStyle}`] = true;
} }
return ( return (
@@ -146,15 +146,15 @@ export function Button({ children, href, style = 'fill', subStyle = null, ...pro
// Extra {props} get passed to the feather Component // Extra {props} get passed to the feather Component
// See react-feather for all 286 icons available // See react-feather for all 286 icons available
// https://github.com/feathericons/react-feather // https://github.com/feathericons/react-feather
export function Icon({ name, style = 'inline', subStyle = null, ...props }) { export function Icon({ name, mainStyle = 'inline', subStyle = null, ...props }) {
const Component = Icons[name]; const Component = Icons[name];
const classes = { const classes = {
'icon': true, 'icon': true,
[`icon--${style}`]: true, [`icon--${mainStyle}`]: true,
}; };
if (subStyle) { if (subStyle) {
classes[`icon--${style}--${subStyle}`] = true; classes[`icon--${mainStyle}--${subStyle}`] = true;
} }
if (!Component) { if (!Component) {
@@ -162,7 +162,7 @@ export function Icon({ name, style = 'inline', subStyle = null, ...props }) {
} }
// Stylized icon // Stylized icon
if (style !== 'inline') { if (mainStyle !== 'inline') {
return ( return (
<div className={classNames(classes)}> <div className={classNames(classes)}>
<Component {...props} /> <Component {...props} />

8
components/navi.js
View File

@@ -40,12 +40,12 @@ function NaviMobile({ active, handler, siteData }) {
<div className={classNames(classes)}> <div className={classNames(classes)}>
<div className="navi__mobile__head"> <div className="navi__mobile__head">
<div className="navi__mobile__login"> <div className="navi__mobile__login">
<Button href={siteData.navi.login.link} target="_blank" style="login" subStyle="white"> <Button href={siteData.navi.login.link} target="_blank" mainStyle="login" subStyle="white">
{siteData.navi.login.label} {siteData.navi.login.label}
</Button> </Button>
</div> </div>
<div className="navi__mobile__icon" onClick={handler}> <div className="navi__mobile__icon" onClick={handler}>
<Icon style="fill" subStyle="white" name="X" /> <Icon mainStyle="fill" subStyle="white" name="X" />
</div> </div>
</div> </div>
<ul className="navi__mobile__links"> <ul className="navi__mobile__links">
@@ -95,10 +95,10 @@ export default function Navi({ siteData }) {
})} })}
</ul> </ul>
<div className="navi__icon" onClick={handleNavi}> <div className="navi__icon" onClick={handleNavi}>
<Icon style="fill" name="Menu" /> <Icon mainStyle="fill" name="Menu" />
</div> </div>
<div className="navi__login"> <div className="navi__login">
<Button href={siteData.navi.login.link} target="_blank" style="login"> <Button href={siteData.navi.login.link} target="_blank" mainStyle="login">
{siteData.navi.login.label} {siteData.navi.login.label}
</Button> </Button>
</div> </div>

10
package.json
View File

@@ -25,10 +25,16 @@
"react-feather": "^2.0.9" "react-feather": "^2.0.9"
}, },
"devDependencies": { "devDependencies": {
"babel-eslint": "^10.1.0",
"babel-plugin-prismjs": "^2.0.1", "babel-plugin-prismjs": "^2.0.1",
"env-cmd": "^10.1.0", "env-cmd": "^10.1.0",
"eslint": "^7.25.0", "eslint": "^7.26.0",
"eslint-plugin-react": "^7.23.2", "eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.7.2",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"gray-matter": "^4.0.2", "gray-matter": "^4.0.2",
"husky": "^6.0.0", "husky": "^6.0.0",
"remark": "^13.0.0", "remark": "^13.0.0",

8
pages/index.js
View File

@@ -62,10 +62,8 @@ function Dilemma({data}) {
</div> </div>
<div className="dilemma__subtext"> <div className="dilemma__subtext">
<H5> <H5>
{normalizeSubtext(data.subtext).map((subtext) => { {/* Use dangerouslySetInnerHTML to render inline spans from YAML data */}
{/* Use dangerouslySetInnerHTML to render inline spans from YAML data */} {normalizeSubtext(data.subtext).map((subtext) => <div key={nanoid()} dangerouslySetInnerHTML={{ __html: subtext }} />)}
return <div key={nanoid()} dangerouslySetInnerHTML={{ __html: subtext }} />;
})}
</H5> </H5>
</div> </div>
<div className="dilemma__tables"> <div className="dilemma__tables">
@@ -130,7 +128,7 @@ function BYO({data}) {
</div> </div>
<div className="byo__icons icons"> <div className="byo__icons icons">
{data.icons.map((icon) => { {data.icons.map((icon) => {
return <Icon key={nanoid()} name={icon} style="fill" />; return <Icon key={nanoid()} name={icon} mainStyle="fill" />;
})} })}
</div> </div>
<div className="byo__comment"> <div className="byo__comment">

30
pages/jambonz-ui.js
View File

@@ -113,24 +113,24 @@ export default function JambonzUI({ data }) {
</div> </div>
<div className="pad"> <div className="pad">
<div className="icons"> <div className="icons">
<Icon style="fill" name="Server" /> <Icon mainStyle="fill" name="Server" />
<Icon style="fill" name="Folder" /> <Icon mainStyle="fill" name="Folder" />
<Icon style="fill" name="Cloud" /> <Icon mainStyle="fill" name="Cloud" />
<Icon style="fill" name="Layers" /> <Icon mainStyle="fill" name="Layers" />
<Icon style="fill" name="UserCheck" /> <Icon mainStyle="fill" name="UserCheck" />
<Icon style="fill" name="Lock" /> <Icon mainStyle="fill" name="Lock" />
<Icon style="fill" name="ThumbsUp" /> <Icon mainStyle="fill" name="ThumbsUp" />
<Icon style="fill" subStyle="purple" name="Phone" /> <Icon mainStyle="fill" subStyle="purple" name="Phone" />
<Icon style="fill" subStyle="teal" name="PhoneCall" /> <Icon mainStyle="fill" subStyle="teal" name="PhoneCall" />
<Icon style="fill" subStyle="blue" name="Activity" /> <Icon mainStyle="fill" subStyle="blue" name="Activity" />
<Icon style="pill" name="Heart" /> <Icon mainStyle="pill" name="Heart" />
</div> </div>
</div> </div>
<div className="pad"> <div className="pad">
<img src="/svg/drachtio.svg" width="128" /> <img src="/svg/drachtio.svg" width="128" />
</div> </div>
<div className="pad"> <div className="pad">
<Button href="#" style="login">Log In</Button> <Button href="#" mainStyle="login">Log In</Button>
</div> </div>
<div className="btns pad"> <div className="btns pad">
<Button href="#">Button</Button> <Button href="#">Button</Button>
@@ -142,17 +142,17 @@ export default function JambonzUI({ data }) {
<Button href="#" subStyle="blue">styles...</Button> <Button href="#" subStyle="blue">styles...</Button>
</div> </div>
<div className="btns pad"> <div className="btns pad">
<Button href="https://github.com/jambonz" target="_blank" style="pill"> <Button href="https://github.com/jambonz" target="_blank" mainStyle="pill">
<Icon name="GitHub" /> <Icon name="GitHub" />
<span>github.com/jambonz</span> <span>github.com/jambonz</span>
</Button> </Button>
<Button href="https://github.com/drachtio" target="_blank" style="pill"> <Button href="https://github.com/drachtio" target="_blank" mainStyle="pill">
<Icon name="GitHub" /> <Icon name="GitHub" />
<span>github.com/drachtio</span> <span>github.com/drachtio</span>
</Button> </Button>
</div> </div>
<div className="pad"> <div className="pad">
<Button href="#" style="pill" subStyle="jambonz"> <Button href="#" mainStyle="pill" subStyle="jambonz">
<Icon name="Send" /> <Icon name="Send" />
<span>Contact us to get started</span> <span>Contact us to get started</span>
</Button> </Button>

4
pages/pricing.js
View File

@@ -16,7 +16,7 @@ function Structure({data}) {
</div> </div>
<div className="wrap structure__cta"> <div className="wrap structure__cta">
<P>{data.cta.text}</P> <P>{data.cta.text}</P>
<Button href={`${data.cta.url}?subject=Additional Services Support`} target="_blank" style="pill" subStyle="jambonz"> <Button href={`${data.cta.url}?subject=Additional Services Support`} target="_blank" mainStyle="pill" subStyle="jambonz">
<Icon name={data.cta.icon} /> <Icon name={data.cta.icon} />
<span>{data.cta.cta}</span> <span>{data.cta.cta}</span>
</Button> </Button>
@@ -48,7 +48,7 @@ function Services({data}) {
})} })}
</div> </div>
<div className="services__cta"> <div className="services__cta">
<Button href={`${data.url}?subject=Additional Services Support`} target="_blank" style="pill" subStyle="jambonz"> <Button href={`${data.url}?subject=Additional Services Support`} target="_blank" mainStyle="pill" subStyle="jambonz">
<Icon name={data.icon} /> <Icon name={data.icon} />
<span>{data.cta}</span> <span>{data.cta}</span>
</Button> </Button>

6
pages/why.js
View File

@@ -12,7 +12,7 @@ function Facts({data}) {
{data.map((fact) => { {data.map((fact) => {
return ( return (
<div key={nanoid()} className="facts__item"> <div key={nanoid()} className="facts__item">
<Icon name={fact.icon} style="fill" /> <Icon name={fact.icon} mainStyle="fill" />
<div className="facts__text"> <div className="facts__text">
<H5><strong>{fact.title}</strong></H5> <H5><strong>{fact.title}</strong></H5>
<P>{fact.text}</P> <P>{fact.text}</P>
@@ -41,7 +41,7 @@ function OS({data}) {
<div className="btns os__btns"> <div className="btns os__btns">
{data.buttons.map((button) => { {data.buttons.map((button) => {
return ( return (
<Button key={nanoid()} href={button.url} target="_blank" style="pill"> <Button key={nanoid()} href={button.url} target="_blank" mainStyle="pill">
<Icon name={button.icon} /> <Icon name={button.icon} />
<span>{button.text}</span> <span>{button.text}</span>
</Button> </Button>
@@ -50,7 +50,7 @@ function OS({data}) {
</div> </div>
<div className="os__logo"> <div className="os__logo">
<img src={data.logo} /> <img src={data.logo} />
<Button href="https://github.com/sponsors/drachtio/" target="_blank" style="pill" subStyle="jambonz"> <Button href="https://github.com/sponsors/drachtio/" target="_blank" mainStyle="pill" subStyle="jambonz">
<Icon name="Heart" /> <Icon name="Heart" />
<span>Sponsor</span> <span>Sponsor</span>
</Button> </Button>

669
yarn.lock
View File

File diff suppressed because it is too large Load Diff