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