get rid of JS garbage
This commit is contained in:
parent
787f49f2fc
commit
8ebedf6765
18 changed files with 0 additions and 12644 deletions
2164
README-REACT.md
2164
README-REACT.md
File diff suppressed because it is too large
Load diff
9406
package-lock.json
generated
9406
package-lock.json
generated
File diff suppressed because it is too large
Load diff
27
package.json
27
package.json
|
|
@ -1,27 +0,0 @@
|
|||
{
|
||||
"name": "nickpegg.com",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"highlight.js": "^9.12.0",
|
||||
"js-yaml": "^3.10.0",
|
||||
"mz": "^2.7.0",
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1",
|
||||
"react-fontawesome": "^1.6.1",
|
||||
"react-markdown": "^2.5.0",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-scripts": "1.0.13",
|
||||
"react-skeleton-css": "^1.0.2",
|
||||
"slugify": "^1.2.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build_site": "scripts/build_site.js",
|
||||
"build_code": "react-scripts build",
|
||||
"build": "scripts/build_site.js && react-scripts build",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject",
|
||||
"publish": "scripts/publish.sh"
|
||||
}
|
||||
}
|
||||
86
src/App.js
86
src/App.js
|
|
@ -1,86 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Route,
|
||||
Switch,
|
||||
withRouter
|
||||
} from 'react-router-dom';
|
||||
|
||||
import 'highlight.js/styles/github-gist.css';
|
||||
|
||||
import { Container, Row, Column } from './skeleton';
|
||||
|
||||
import config from './config';
|
||||
import { Footer } from './Footer';
|
||||
import { Header } from './Header';
|
||||
import { NavList, TagNav } from './Nav';
|
||||
import { NotFound } from './NotFound';
|
||||
import { Post, Posts } from './Post';
|
||||
import { Page } from './Page';
|
||||
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
// Ensure the title is something based on the configured title
|
||||
if (!document.title.startsWith(config.title)) {
|
||||
document.title = config.title;
|
||||
}
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<ScrollToTop>
|
||||
<div className="App">
|
||||
<Header title={config.title} />
|
||||
|
||||
<Container>
|
||||
<Row>
|
||||
<Column width="two" className="nav">
|
||||
<NavList />
|
||||
<TagNav />
|
||||
</Column>
|
||||
<Column width="eight">
|
||||
<Switch>
|
||||
<Route exact path="/" component={Posts} />
|
||||
|
||||
{ /* Post routes */ }
|
||||
<Route exact path="/page/:page" component={Posts} />
|
||||
<Route exact path="/tag/:tag" component={Posts} />
|
||||
<Route exact path="/tag/:tag/page/:page" component={Posts} />
|
||||
|
||||
<Route path="/:year/:month/:slug" component={Post} />
|
||||
|
||||
{ /* Page routes */ }
|
||||
<Route path="/:slug" component={Page} />
|
||||
|
||||
{ /* 404 fallback */ }
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
</Column>
|
||||
</Row>
|
||||
|
||||
</Container>
|
||||
|
||||
<Footer />
|
||||
|
||||
</div>
|
||||
</ScrollToTop>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ScrollToTop extends Component {
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.location !== prevProps.location) {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.props.children
|
||||
}
|
||||
}
|
||||
ScrollToTop = withRouter(ScrollToTop);
|
||||
|
||||
|
||||
export default App;
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<App />, div);
|
||||
});
|
||||
106
src/Article.js
106
src/Article.js
|
|
@ -1,106 +0,0 @@
|
|||
import hljs from 'highlight.js';
|
||||
import React, { Component } from 'react';
|
||||
import Icon from 'react-fontawesome';
|
||||
import Markdown from 'react-markdown';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { ListLink } from './Nav';
|
||||
import { slugify } from './util';
|
||||
|
||||
|
||||
class Article extends Component {
|
||||
render() {
|
||||
let body = "";
|
||||
let readMore = "";
|
||||
if (this.props.blurb) {
|
||||
body = this.props.article.blurb;
|
||||
readMore = (<Link to={ this.postLink() }>read more</Link>);
|
||||
} else {
|
||||
body = this.props.article.body;
|
||||
}
|
||||
|
||||
return (
|
||||
<article>
|
||||
<header>
|
||||
<Link className="post-title" to={ this.postLink() }>
|
||||
<h1>{ this.props.article.title }</h1>
|
||||
</Link>
|
||||
{ this.meta() }
|
||||
</header>
|
||||
<section>
|
||||
<Markdown source={ body } />
|
||||
{ readMore }
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.querySelectorAll('pre code').forEach(elm => {
|
||||
hljs.highlightBlock(elm);
|
||||
});
|
||||
}
|
||||
|
||||
postLink() {
|
||||
let date = new Date(this.props.article.date);
|
||||
let year = date.getUTCFullYear();
|
||||
let month = date.getUTCMonth() + 1;
|
||||
|
||||
if (month < 10) {
|
||||
month = '0' + month.toString();
|
||||
}
|
||||
|
||||
let slug = this.props.article.slug;
|
||||
if (!slug) {
|
||||
slug = slugify(this.props.article.title);
|
||||
}
|
||||
|
||||
return `/${year}/${month}/${slug}`;
|
||||
}
|
||||
|
||||
date_string() {
|
||||
let date = new Date(this.props.article.date);
|
||||
let year = date.getUTCFullYear();
|
||||
let month = date.getUTCMonth() + 1;
|
||||
let day = date.getUTCDay() + 1;
|
||||
|
||||
if (month < 10) {
|
||||
month = '0' + month.toString();
|
||||
}
|
||||
|
||||
if (day < 10) {
|
||||
day = '0' + day.toString();
|
||||
}
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
|
||||
meta() {
|
||||
let time_text = "Posted";
|
||||
|
||||
return (
|
||||
<div className="post-meta">
|
||||
<time>{ time_text } { this.date_string() }</time>
|
||||
{ this.tags() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
tags() {
|
||||
let tags = this.props.article.tags;
|
||||
if (!tags || tags.length === 0) {
|
||||
return;
|
||||
} else {
|
||||
return (
|
||||
<div className="post-tags"> <Icon name="tags" />
|
||||
<ul>
|
||||
{tags.map(tag => (
|
||||
<ListLink name={tag} key={tag} href={"/tag/" + tag} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { Article };
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import Icon from 'react-fontawesome';
|
||||
|
||||
import { Container, Row } from './skeleton';
|
||||
|
||||
class Footer extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="page-footer">
|
||||
<Container>
|
||||
<Row>
|
||||
<Icon name="copyright" /> 2017 Nick Pegg
|
||||
</Row>
|
||||
<Row>
|
||||
<a href="https://github.com/nickpegg/nickpegg.com">Source code</a>
|
||||
</Row>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export { Footer };
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
class Header extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="page-header">
|
||||
<div className="container">
|
||||
<Link to="/">
|
||||
<h1>{ this.props.title }</h1>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export { Header };
|
||||
180
src/Nav.js
180
src/Nav.js
|
|
@ -1,180 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import Icon from 'react-fontawesome';
|
||||
|
||||
import config from './config';
|
||||
import { Row } from './skeleton';
|
||||
import { slugify } from './util';
|
||||
|
||||
|
||||
class ListLink extends Component {
|
||||
render () {
|
||||
let icon = null;
|
||||
if (this.props.icon) {
|
||||
icon = <Icon name={ this.props.icon } />
|
||||
}
|
||||
|
||||
return (
|
||||
<li> <Link to={ this.props.href }>{ icon } { this.props.name }</Link> </li>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class NavList extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
pageLinks: null,
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
fetch('/site.json')
|
||||
.then(resp => resp.json())
|
||||
.then(blob => {
|
||||
let links = [];
|
||||
for (let page of blob.pages) {
|
||||
let slug = page.slug;
|
||||
if (!slug) {
|
||||
slug = slugify(page.title);
|
||||
}
|
||||
|
||||
if (page.parent == null) {
|
||||
let href = "/" + slug;
|
||||
links.push(<ListLink
|
||||
name={page.title}
|
||||
href={href}
|
||||
key={slug}
|
||||
/>);
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({pageLinks: links});
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Row>
|
||||
<ul>
|
||||
<ListLink name="Home" href="/" />
|
||||
{ this.state.pageLinks }
|
||||
<ListLink name="RSS" href="/rss.xml" icon="rss-square" />
|
||||
</ul>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class TagNav extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
topTags: [],
|
||||
}
|
||||
}
|
||||
|
||||
fetchTopTags () {
|
||||
fetch('/site.json')
|
||||
.then(resp => resp.json())
|
||||
.then(blob => {
|
||||
let counts = new Map();
|
||||
|
||||
// Count up the tags
|
||||
blob.posts.forEach(post => {
|
||||
post.tags.forEach(tag => {
|
||||
let count = counts.get(tag);
|
||||
if (count === undefined) {
|
||||
count = 0;
|
||||
}
|
||||
|
||||
counts.set(tag, count + 1);
|
||||
});
|
||||
});
|
||||
|
||||
// Sort the tags
|
||||
let tags = [...counts.entries()];
|
||||
tags.sort(function(t1, t2) {
|
||||
let tag1 = t1[0];
|
||||
let tag2 = t2[0];
|
||||
let count1 = t1[1];
|
||||
let count2 = t2[1]
|
||||
|
||||
let diff = count2 - count1;
|
||||
|
||||
if (diff !== 0) {
|
||||
return diff
|
||||
} else {
|
||||
// We have a tie, sort by the strings
|
||||
return tag1.localeCompare(tag2);
|
||||
}
|
||||
});
|
||||
|
||||
// Get just the tag names
|
||||
tags = tags.map(t => t[0]);
|
||||
|
||||
// Get top N
|
||||
tags = tags.slice(0, config.numTopTags);
|
||||
|
||||
this.setState({topTags: tags});
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchTopTags();
|
||||
}
|
||||
|
||||
render() {
|
||||
let tags = "";
|
||||
if (this.state.topTags.length > 0) {
|
||||
tags = (
|
||||
<div>
|
||||
<h5 className="nav-header">Top Tags</h5>
|
||||
<ul>
|
||||
{this.state.topTags.map(tag => (
|
||||
<ListLink icon="tag" key={tag} name={tag} href={"/tag/" + tag} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Row>
|
||||
{ tags }
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const HistoryNav = (props) => {
|
||||
let left = "";
|
||||
let right = "";
|
||||
|
||||
if (props.prev) {
|
||||
left = (
|
||||
<Link to={props.prev}>
|
||||
<Icon name="arrow-left" />
|
||||
<span> newer posts</span>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
if (props.next) {
|
||||
right = (
|
||||
<Link className="u-pull-right" to={props.next}>
|
||||
<span>older posts </span>
|
||||
<Icon name="arrow-right" />
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Row>
|
||||
{ left }
|
||||
{ right }
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
export { ListLink, NavList, TagNav, HistoryNav };
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const NotFound = () => (
|
||||
<article>
|
||||
<header>
|
||||
<h1>404 Oh No!</h1>
|
||||
</header>
|
||||
<section>
|
||||
<p>
|
||||
You're lost, bud. Why not try going back <Link to="/">Home</Link>?
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
)
|
||||
|
||||
export { NotFound }
|
||||
87
src/Page.js
87
src/Page.js
|
|
@ -1,87 +0,0 @@
|
|||
import hljs from 'highlight.js';
|
||||
import React, { Component } from 'react';
|
||||
import Markdown from 'react-markdown';
|
||||
|
||||
import config from './config';
|
||||
import { NotFound } from './NotFound';
|
||||
import { slugify } from './util';
|
||||
|
||||
|
||||
class Page extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.params = props.match.params;
|
||||
|
||||
this.state = {
|
||||
page: null,
|
||||
notFound: false,
|
||||
}
|
||||
}
|
||||
|
||||
fetchPage() {
|
||||
fetch('/site.json')
|
||||
.then(resp => resp.json())
|
||||
.then(blob => {
|
||||
for (let page of blob.pages) {
|
||||
let slug = page.slug;
|
||||
if (!slug) {
|
||||
slug = slugify(page.title);
|
||||
}
|
||||
|
||||
if (slug === this.params.slug) {
|
||||
this.setState({
|
||||
page: page,
|
||||
notFound: false,
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
page: null,
|
||||
notFound: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchPage();
|
||||
document.querySelectorAll('pre code').forEach(elm => {
|
||||
hljs.highlightBlock(elm);
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.title = config.title;
|
||||
}
|
||||
|
||||
componentWillReceiveProps(props) {
|
||||
this.params = props.match.params;
|
||||
this.fetchPage();
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.notFound) {
|
||||
return <NotFound />
|
||||
}
|
||||
|
||||
if (this.state.page) {
|
||||
document.title = `${config.title} - ${this.state.page.title}`;
|
||||
return (
|
||||
<article>
|
||||
<header>
|
||||
<h1>{ this.state.page.title }</h1>
|
||||
</header>
|
||||
<section>
|
||||
<Markdown source={ this.state.page.body } />
|
||||
</section>
|
||||
</article>
|
||||
)
|
||||
} else {
|
||||
return <p></p>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { Page };
|
||||
203
src/Post.js
203
src/Post.js
|
|
@ -1,203 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
|
||||
import config from './config';
|
||||
import { Article } from './Article';
|
||||
import { HistoryNav } from './Nav';
|
||||
import { NotFound } from './NotFound';
|
||||
import { slugify } from './util';
|
||||
|
||||
|
||||
class Post extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.params = props.match.params;
|
||||
|
||||
this.state = {
|
||||
post: null,
|
||||
title: '',
|
||||
notFound: false,
|
||||
}
|
||||
}
|
||||
|
||||
fetchPost() {
|
||||
fetch('/site.json')
|
||||
.then((resp) => resp.json())
|
||||
.then((blob) => {
|
||||
let found = false;
|
||||
for (let post of blob.posts) {
|
||||
let date = new Date(post.date);
|
||||
let year = date.getUTCFullYear();
|
||||
let month = date.getUTCMonth() + 1;
|
||||
|
||||
let slug = post.slug;
|
||||
if (!slug) {
|
||||
slug = slugify(post.title);
|
||||
}
|
||||
|
||||
if (
|
||||
slug === this.params.slug
|
||||
&& year === Number(this.params.year)
|
||||
&& month === Number(this.params.month)
|
||||
) {
|
||||
this.setState({post: post})
|
||||
found = true;
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({notFound: !found});
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchPost();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
// Reset the document title to the default
|
||||
document.title = config.title;
|
||||
}
|
||||
|
||||
componentWillReceiveProps(props) {
|
||||
this.params = props.match.params;
|
||||
this.fetchPost();
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.notFound) {
|
||||
return <NotFound />
|
||||
}
|
||||
|
||||
if (this.state.post) {
|
||||
console.log(this.state.post);
|
||||
document.title = `${config.title} - ${this.state.post.title}`;
|
||||
return (
|
||||
<Article
|
||||
article={this.state.post}
|
||||
/>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<p></p>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Posts extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.params = props.match.params;
|
||||
this.state = {
|
||||
posts: null,
|
||||
prevHref: null,
|
||||
nextHref: null,
|
||||
}
|
||||
}
|
||||
|
||||
update() {
|
||||
this.fetchPosts();
|
||||
}
|
||||
|
||||
fetchPosts() {
|
||||
// Fetch posts from JSON blob
|
||||
fetch('/site.json')
|
||||
.then((resp) => resp.json())
|
||||
.then((blob) => {
|
||||
let posts = blob.posts;
|
||||
let offset = 0;
|
||||
|
||||
let page = parseInt(this.params.page, 10);
|
||||
if (!page) {
|
||||
page = 0;
|
||||
}
|
||||
offset = page * config.numPostsPerPage;
|
||||
|
||||
// if tag is set, filter posts down to that of that tag
|
||||
if (this.params.tag) {
|
||||
posts = posts.filter(p => (p.tags.includes(this.params.tag)));
|
||||
}
|
||||
|
||||
// Grab the slice of posts for this page
|
||||
let post_slice = posts.slice(offset, offset + config.numPostsPerPage);
|
||||
|
||||
// Check to see if we have more posts after these
|
||||
let nextOffset = (page + 1) * config.numPostsPerPage;
|
||||
let nextPosts = posts.slice(nextOffset,
|
||||
nextOffset + config.numPostsPerPage);
|
||||
let hasMore = nextPosts.length > 0;
|
||||
this.updateHistoryNav(page, hasMore);
|
||||
|
||||
this.setState({posts: post_slice});
|
||||
});
|
||||
}
|
||||
|
||||
updateHistoryNav(page, hasMore) {
|
||||
let prefix = "";
|
||||
if (this.params.tag) {
|
||||
prefix = "/tag/" + this.params.tag;
|
||||
}
|
||||
|
||||
// Update prev state
|
||||
let prev = null;
|
||||
if (page === 1) {
|
||||
prev = "/";
|
||||
} else if (page > 1) {
|
||||
prev = prefix + "/page/" + (page - 1);
|
||||
} else {
|
||||
prev = null;
|
||||
}
|
||||
|
||||
// Update next state
|
||||
let next = null;
|
||||
if (hasMore) {
|
||||
next = prefix + "/page/" + (page + 1);
|
||||
} else {
|
||||
next = null;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
nextHref: next,
|
||||
prevHref: prev,
|
||||
})
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.update();
|
||||
}
|
||||
|
||||
componentWillReceiveProps(props) {
|
||||
this.params = props.match.params;
|
||||
this.update();
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.posts != null) {
|
||||
let articles = this.state.posts.map(post =>
|
||||
<Article
|
||||
key={post.title}
|
||||
article={post}
|
||||
blurb
|
||||
/>
|
||||
);
|
||||
|
||||
let jawn = (
|
||||
<div>
|
||||
{articles}
|
||||
<HistoryNav prev={this.state.prevHref} next={this.state.nextHref} />
|
||||
</div>
|
||||
)
|
||||
if (articles.length === 0) {
|
||||
jawn = <NotFound />;
|
||||
}
|
||||
|
||||
return jawn
|
||||
} else {
|
||||
return <p></p>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { Post, Posts };
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
// App-wide config parameters
|
||||
// This should probably load from JSON at some point, but code and data are
|
||||
// living together for now, so this can be split out at that time.
|
||||
|
||||
|
||||
const config = {
|
||||
title: 'Nick Pegg',
|
||||
|
||||
numPostsPerPage: 5,
|
||||
|
||||
// Number of top tags to display in the sidebar nav
|
||||
numTopTags: 5,
|
||||
};
|
||||
|
||||
export default config;
|
||||
132
src/index.css
132
src/index.css
|
|
@ -1,132 +0,0 @@
|
|||
body {
|
||||
background: #FCFCFC;
|
||||
color: #35352F;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #FF4F00;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #FF4F00;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-left: 0;
|
||||
border-left: 0.5rem solid #dfe2e5;
|
||||
padding-left: 2rem;
|
||||
color: #666D70;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: #74E8E2;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.page-header a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
/* nav
|
||||
****************************************/
|
||||
.nav {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.nav ul li {
|
||||
list-style-type: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 999px) {
|
||||
.nav {
|
||||
text-align: center;
|
||||
}
|
||||
.nav ul li {
|
||||
display: inline;
|
||||
}
|
||||
.nav ul li:first-child::before {
|
||||
content: "";
|
||||
}
|
||||
.nav ul li::before {
|
||||
content: "|";
|
||||
}
|
||||
}
|
||||
|
||||
/* articles
|
||||
****************************************/
|
||||
article {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
.post-title h1 {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
color: #757575;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
display: inline;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.post-tags * {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* Override this since hljs removes what skeleton sets */
|
||||
.hljs {
|
||||
padding: 1rem 1.5rem
|
||||
}
|
||||
|
||||
/* Article headers should go down one size. This is because when you use a
|
||||
* `#` in Markdown, it outputs a <h1>, but we don't want post headers to be the
|
||||
* same size as headers elsewhere.
|
||||
*
|
||||
* These values were taken from skeleton.css
|
||||
*/
|
||||
article section h1 { font-size: 3.6rem; line-height: 1.2; letter-spacing: -.1rem;}
|
||||
article section h2 { font-size: 3.0rem; line-height: 1.25; letter-spacing: -.1rem; }
|
||||
article section h3 { font-size: 2.4rem; line-height: 1.3; letter-spacing: -.1rem; }
|
||||
article section h4 { font-size: 1.8rem; line-height: 1.35; letter-spacing: -.08rem; }
|
||||
article section h5 { font-size: 1.5rem; line-height: 1.5; letter-spacing: -.05rem; }
|
||||
|
||||
/* Larger than phablet */
|
||||
@media (min-width: 550px) {
|
||||
article section h1 { font-size: 4.2rem; }
|
||||
article section h2 { font-size: 3.6rem; }
|
||||
article section h3 { font-size: 3.0rem; }
|
||||
article section h4 { font-size: 2.4rem; }
|
||||
article section h5 { font-size: 1.5rem; }
|
||||
}
|
||||
|
||||
/* footer
|
||||
****************************************/
|
||||
.page-footer {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
font-size: smaller;
|
||||
}
|
||||
13
src/index.js
13
src/index.js
|
|
@ -1,13 +0,0 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import App from './App';
|
||||
import { unregister as unregisterServiceWorker } from './registerServiceWorker';
|
||||
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
|
||||
// Disable the service worker to disable caching for now
|
||||
// registerServiceWorker();
|
||||
unregisterServiceWorker();
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
// In production, we register a service worker to serve assets from local cache.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||
// cached resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||
// This link also includes instructions on opting out of this behavior.
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
|
||||
export default function register() {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (!isLocalhost) {
|
||||
// Is not local host. Just register service worker
|
||||
registerValidSW(swUrl);
|
||||
} else {
|
||||
// This is running on localhost. Lets check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the old content will have been purged and
|
||||
// the fresh content will have been added to the cache.
|
||||
// It's the perfect time to display a "New content is
|
||||
// available; please refresh." message in your web app.
|
||||
console.log('New content is available; please refresh.');
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl)
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
if (
|
||||
response.status === 404 ||
|
||||
response.headers.get('content-type').indexOf('javascript') === -1
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
'No internet connection found. App is running in offline mode.'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
|
||||
|
||||
// Basic Skeleton elements
|
||||
//
|
||||
// I should be using one of the many react-skeleton libs that are out there,
|
||||
// but they're all janky in one way or another. I'll make one work and open a
|
||||
// PR some day once I have a better grasp of JS, React, and how all the
|
||||
// packaging exactly works.
|
||||
|
||||
class Container extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Row extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="row">
|
||||
{ this.props.children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Column extends Component {
|
||||
render() {
|
||||
return(
|
||||
<div className={ this.props.width + " columns " + this.props.className }>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export { Container, Row, Column };
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import baseSlugify from 'slugify';
|
||||
|
||||
|
||||
function slugify(s) {
|
||||
// Slugify a string to our specs. Hooray consistency!
|
||||
return baseSlugify(s).toLowerCase();
|
||||
}
|
||||
|
||||
export { slugify };
|
||||
Loading…
Add table
Add a link
Reference in a new issue