186526/unpkg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use single quotes :P

Browse Source
This commit is contained in:
Michael Jackson
2018-12-17 09:38:05 -08:00
parent ada37035cd
commit 19b2e5574b
93 changed files with 792 additions and 791 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
modules/client/main/About.js
View File

@ -1,9 +1,9 @@
require("./About.css");
require('./About.css');
const React = require("react");
const React = require('react');
const h = require("../utils/createHTML");
const markup = require("./About.md");
const h = require('../utils/createHTML');
const markup = require('./About.md');
function About() {
return <div className="wrapper" dangerouslySetInnerHTML={h(markup)} />;

6
modules/client/main/App.js
View File

@ -1,7 +1,7 @@
const React = require("react");
const { HashRouter } = require("react-router-dom");
const React = require('react');
const { HashRouter } = require('react-router-dom');
const Layout = require("./Layout");
const Layout = require('./Layout');
function App() {
return (

8
modules/client/main/Home.js
View File

@ -1,9 +1,9 @@
require("./Home.css");
require('./Home.css');
const React = require("react");
const React = require('react');
const h = require("../utils/createHTML");
const markup = require("./Home.md");
const h = require('../utils/createHTML');
const markup = require('./Home.md');
function Home() {
return <div className="wrapper" dangerouslySetInnerHTML={h(markup)} />;

28
modules/client/main/Layout.js
View File

@ -1,14 +1,14 @@
require("./Layout.css");
require('./Layout.css');
const React = require("react");
const PropTypes = require("prop-types");
const { Switch, Route, Link, withRouter } = require("react-router-dom");
const { Motion, spring } = require("react-motion");
const React = require('react');
const PropTypes = require('prop-types');
const { Switch, Route, Link, withRouter } = require('react-router-dom');
const { Motion, spring } = require('react-motion');
const WindowSize = require("./WindowSize");
const About = require("./About");
const Stats = require("./Stats");
const Home = require("./Home");
const WindowSize = require('./WindowSize');
const About = require('./About');
const Stats = require('./Stats');
const Home = require('./Home');
class Layout extends React.Component {
static propTypes = {
@ -26,18 +26,18 @@ class Layout extends React.Component {
adjustUnderline = (useSpring = false) => {
let itemIndex;
switch (this.props.location.pathname) {
case "/stats":
case '/stats':
itemIndex = 1;
break;
case "/about":
case '/about':
itemIndex = 2;
break;
case "/":
case '/':
default:
itemIndex = 0;
}
const itemNodes = this.listNode.querySelectorAll("li");
const itemNodes = this.listNode.querySelectorAll('li');
const currentNode = itemNodes[itemIndex];
this.setState({
@ -50,7 +50,7 @@ class Layout extends React.Component {
componentDidMount() {
this.adjustUnderline();
fetch("/api/stats?period=last-month")
fetch('/api/stats?period=last-month')
.then(res => res.json())
.then(stats => this.setState({ stats }));

100
modules/client/main/Stats.js
View File

@ -1,14 +1,14 @@
require("./Stats.css");
require('./Stats.css');
const React = require("react");
const PropTypes = require("prop-types");
const formatBytes = require("pretty-bytes");
const formatDate = require("date-fns/format");
const parseDate = require("date-fns/parse");
const { continents, countries } = require("countries-list");
const React = require('react');
const PropTypes = require('prop-types');
const formatBytes = require('pretty-bytes');
const formatDate = require('date-fns/format');
const parseDate = require('date-fns/parse');
const { continents, countries } = require('countries-list');
const formatNumber = require("../utils/formatNumber");
const formatPercent = require("../utils/formatPercent");
const formatNumber = require('../utils/formatNumber');
const formatPercent = require('../utils/formatPercent');
function getCountriesByContinent(continent) {
return Object.keys(countries).filter(
@ -68,15 +68,15 @@ class Stats extends React.Component {
</a>
</td>
<td>
{formatNumber(requests)} ({formatPercent(
requests / totals.requests.all
)}%)
{formatNumber(requests)} (
{formatPercent(requests / totals.requests.all)}
%)
</td>
{bandwidth ? (
<td>
{formatBytes(bandwidth)} ({formatPercent(
bandwidth / totals.bandwidth.all
)}%)
{formatBytes(bandwidth)} (
{formatPercent(bandwidth / totals.bandwidth.all)}
%)
</td>
) : (
<td>-</td>
@ -120,16 +120,16 @@ class Stats extends React.Component {
</td>
<td>
<strong>
{formatNumber(continentData.requests)} ({formatPercent(
continentData.requests / totals.requests.all
)}%)
{formatNumber(continentData.requests)} (
{formatPercent(continentData.requests / totals.requests.all)}
%)
</strong>
</td>
<td>
<strong>
{formatBytes(continentData.bandwidth)} ({formatPercent(
continentData.bandwidth / totals.bandwidth.all
)}%)
{formatBytes(continentData.bandwidth)} (
{formatPercent(continentData.bandwidth / totals.bandwidth.all)}
%)
</strong>
</td>
</tr>
@ -148,14 +148,14 @@ class Stats extends React.Component {
<tr key={continent + country} className="country-row">
<td className="country-name">{countries[country].name}</td>
<td>
{formatNumber(countryRequests)} ({formatPercent(
countryRequests / totals.requests.all
)}%)
{formatNumber(countryRequests)} (
{formatPercent(countryRequests / totals.requests.all)}
%)
</td>
<td>
{formatBytes(countryBandwidth)} ({formatPercent(
countryBandwidth / totals.bandwidth.all
)}%)
{formatBytes(countryBandwidth)} (
{formatPercent(countryBandwidth / totals.bandwidth.all)}
%)
</td>
</tr>
);
@ -176,9 +176,9 @@ class Stats extends React.Component {
<tr key={protocol}>
<td>{protocol}</td>
<td>
{formatNumber(requests)} ({formatPercent(
requests / sumValues(totals.requests.protocol)
)}%)
{formatNumber(requests)} (
{formatPercent(requests / sumValues(totals.requests.protocol))}
%)
</td>
</tr>
);
@ -187,29 +187,29 @@ class Stats extends React.Component {
return (
<div className="wrapper">
<p>
From <strong>{formatDate(since, "MMM D")}</strong> to{" "}
<strong>{formatDate(until, "MMM D")}</strong> unpkg served{" "}
From <strong>{formatDate(since, 'MMM D')}</strong> to{' '}
<strong>{formatDate(until, 'MMM D')}</strong> unpkg served{' '}
<strong>{formatNumber(totals.requests.all)}</strong> requests and a
total of <strong>{formatBytes(totals.bandwidth.all)}</strong> of data
to <strong>{formatNumber(totals.uniques.all)}</strong> unique
visitors,{" "}
visitors,{' '}
<strong>
{formatPercent(totals.requests.cached / totals.requests.all, 0)}%
</strong>{" "}
</strong>{' '}
of which were served from the cache.
</p>
<h3>Packages</h3>
<p>
The table below shows the most popular packages served by unpkg from{" "}
<strong>{formatDate(since, "MMM D")}</strong> to{" "}
<strong>{formatDate(until, "MMM D")}</strong>. Only the top{" "}
The table below shows the most popular packages served by unpkg from{' '}
<strong>{formatDate(since, 'MMM D')}</strong> to{' '}
<strong>{formatDate(until, 'MMM D')}</strong>. Only the top{' '}
{Object.keys(totals.requests.package).length} packages are shown.
</p>
<p className="table-filter">
Include only packages that received at least{" "}
Include only packages that received at least{' '}
<select
value={this.state.minPackageRequests}
onChange={event =>
@ -224,11 +224,11 @@ class Stats extends React.Component {
<option value="100000">100,000</option>
<option value="1000000">1,000,000</option>
<option value="10000000">10,000,000</option>
</select>{" "}
</select>{' '}
requests.
</p>
<table cellSpacing="0" cellPadding="0" style={{ width: "100%" }}>
<table cellSpacing="0" cellPadding="0" style={{ width: '100%' }}>
<thead>
<tr>
<th>
@ -248,13 +248,13 @@ class Stats extends React.Component {
<h3>Regions</h3>
<p>
The table below breaks down requests to unpkg from{" "}
<strong>{formatDate(since, "MMM D")}</strong> to{" "}
<strong>{formatDate(until, "MMM D")}</strong> by geographic region.
The table below breaks down requests to unpkg from{' '}
<strong>{formatDate(since, 'MMM D')}</strong> to{' '}
<strong>{formatDate(until, 'MMM D')}</strong> by geographic region.
</p>
<p className="table-filter">
Include only countries that made at least{" "}
Include only countries that made at least{' '}
<select
value={this.state.minCountryRequests}
onChange={event =>
@ -268,14 +268,14 @@ class Stats extends React.Component {
<option value="1000000">1,000,000</option>
<option value="10000000">10,000,000</option>
<option value="100000000">100,000,000</option>
</select>{" "}
</select>{' '}
requests.
</p>
<table
cellSpacing="0"
cellPadding="0"
style={{ width: "100%" }}
style={{ width: '100%' }}
className="regions-table"
>
<thead>
@ -297,12 +297,12 @@ class Stats extends React.Component {
<h3>Protocols</h3>
<p>
The table below breaks down requests to unpkg from{" "}
<strong>{formatDate(since, "MMM D")}</strong> to{" "}
<strong>{formatDate(until, "MMM D")}</strong> by HTTP protocol.
The table below breaks down requests to unpkg from{' '}
<strong>{formatDate(since, 'MMM D')}</strong> to{' '}
<strong>{formatDate(until, 'MMM D')}</strong> by HTTP protocol.
</p>
<table cellSpacing="0" cellPadding="0" style={{ width: "100%" }}>
<table cellSpacing="0" cellPadding="0" style={{ width: '100%' }}>
<thead>
<tr>
<th>

10
modules/client/main/WindowSize.js
View File

@ -1,10 +1,10 @@
const React = require("react");
const PropTypes = require("prop-types");
const React = require('react');
const PropTypes = require('prop-types');
const addEvent = require("../utils/addEvent");
const removeEvent = require("../utils/removeEvent");
const addEvent = require('../utils/addEvent');
const removeEvent = require('../utils/removeEvent');
const resizeEvent = "resize";
const resizeEvent = 'resize';
class WindowSize extends React.Component {
static propTypes = {