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

22
components/jambonz-ui.js
View File

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

8
components/navi.js
View File

@@ -40,12 +40,12 @@ function NaviMobile({ active, handler, siteData }) {
<div className={classNames(classes)}>
<div className="navi__mobile__head">
<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}
</Button>
</div>
<div className="navi__mobile__icon" onClick={handler}>
<Icon style="fill" subStyle="white" name="X" />
<Icon mainStyle="fill" subStyle="white" name="X" />
</div>
</div>
<ul className="navi__mobile__links">
@@ -95,10 +95,10 @@ export default function Navi({ siteData }) {
})}
</ul>
<div className="navi__icon" onClick={handleNavi}>
<Icon style="fill" name="Menu" />
<Icon mainStyle="fill" name="Menu" />
</div>
<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}
</Button>
</div>

10
package.json
View File

@@ -25,10 +25,16 @@
"react-feather": "^2.0.9"
},
"devDependencies": {
"babel-eslint": "^10.1.0",
"babel-plugin-prismjs": "^2.0.1",
"env-cmd": "^10.1.0",
"eslint": "^7.25.0",
"eslint-plugin-react": "^7.23.2",
"eslint": "^7.26.0",
"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",
"husky": "^6.0.0",
"remark": "^13.0.0",

6
pages/index.js
View File

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

30
pages/jambonz-ui.js
View File

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

4
pages/pricing.js
View File

@@ -16,7 +16,7 @@ function Structure({data}) {
</div>
<div className="wrap structure__cta">
<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} />
<span>{data.cta.cta}</span>
</Button>
@@ -48,7 +48,7 @@ function Services({data}) {
})}
</div>
<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} />
<span>{data.cta}</span>
</Button>

6
pages/why.js
View File

@@ -12,7 +12,7 @@ function Facts({data}) {
{data.map((fact) => {
return (
<div key={nanoid()} className="facts__item">
<Icon name={fact.icon} style="fill" />
<Icon name={fact.icon} mainStyle="fill" />
<div className="facts__text">
<H5><strong>{fact.title}</strong></H5>
<P>{fact.text}</P>
@@ -41,7 +41,7 @@ function OS({data}) {
<div className="btns os__btns">
{data.buttons.map((button) => {
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} />
<span>{button.text}</span>
</Button>
@@ -50,7 +50,7 @@ function OS({data}) {
</div>
<div className="os__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" />
<span>Sponsor</span>
</Button>

669
yarn.lock
View File

File diff suppressed because it is too large Load Diff