Skip to content

Commit de08c6e

Browse files
chrisdwheatleychrisdwheatley
committed
inline css
1 parent c59f6ea commit de08c6e

File tree

15 files changed

+659
-158
lines changed

15 files changed

+659
-158
lines changed

‎babel-preset.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const nextBabelPreset = require("next/babel");
2+
3+
nextBabelPreset.plugins = nextBabelPreset.plugins.map(plugin => {
4+
if (!Array.isArray(plugin) && plugin.indexOf("styled-jsx/babel") !== -1) {
5+
return require.resolve("styled-jsx-postcss/babel");
6+
}
7+
return plugin;
8+
});
9+
10+
module.exports = nextBabelPreset;

‎components/head.js‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎components/item-meta.js‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -13,30 +13,31 @@ export default (
1313
{time_ago} {user && <span>by {user} ({points} points)</span>}
1414
</div>
1515
</a>
16-
{user && <Link prefetch route="comments" params={{ id }}>
17-
<a className="dtc center link grow v-mid pr1 pr3-ns w-10">
18-
<svg
19-
className="fr pr2"
20-
xmlns="http://www.w3.org/2000/svg"
21-
width="25"
22-
viewBox="0 0 25 25"
23-
transform="scale(1.75)"
24-
>
25-
<path
26-
d="M22 3v13h-11.643l-4.357 3.105v-3.105h-4v-13h20zm2-2h-24v16.981h4v5.019l7-5.019h13v-16.981z"
27-
/>
28-
<text
29-
x="12"
30-
y="10"
31-
textAnchor="middle"
32-
fontSize="8"
33-
alignmentBaseline="central"
16+
{user &&
17+
<Link prefetch route="comments" params={{ id }}>
18+
<a className="dtc center link grow v-mid pr1 pr3-ns w-10">
19+
<svg
20+
className="fr pr2"
21+
xmlns="http://www.w3.org/2000/svg"
22+
width="25"
23+
viewBox="0 0 25 25"
24+
transform="scale(1.75)"
3425
>
35-
{comments_count}
36-
</text>
37-
</svg>
38-
</a>
39-
</Link>}
26+
<path
27+
d="M22 3v13h-11.643l-4.357 3.105v-3.105h-4v-13h20zm2-2h-24v16.981h4v5.019l7-5.019h13v-16.981z"
28+
/>
29+
<text
30+
x="12"
31+
y="10"
32+
textAnchor="middle"
33+
fontSize="8"
34+
alignmentBaseline="central"
35+
>
36+
{comments_count}
37+
</text>
38+
</svg>
39+
</a>
40+
</Link>}
4041
</div>
4142
</article>
4243
);

‎components/navigation.js‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,20 @@ export default ({ current }) => {
77
return (
88
<section className="center bg-near-black mh4">
99
<nav className="mw7 center">
10-
<Link
11-
prefetch
12-
route="top"
13-
>
14-
<a className="near-white link f6 f4-ns dib pl2 pr1 ph3-ns pv4 fw5">
10+
<Link prefetch route="top">
11+
<a className="near-white link f6 f4-ns dib pl2 pr1 ph3-ns pv3 fw5">
1512
Next.js HN
1613
</a>
1714
</Link>
1815
{navItems.map(item => {
19-
const isHome = item === "top";
16+
const isTopStories = item === "top";
2017

2118
return (
2219
<Link
2320
key={item}
2421
prefetch
25-
route={isHome ? "top" : "index"}
26-
params={isHome ? {} : { type: item }}
22+
route={isTopStories ? "top" : "index"}
23+
params={isTopStories ? {} : { type: item }}
2724
>
2825
<a
2926
className={

‎index.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,7 @@ function staticHandler(req, res) {
2121
if (parsedUrl.pathname === "/favicon.ico") {
2222
const filePath = join(__dirname, "static", parsedUrl.pathname);
2323
app.serveStatic(req, res, filePath);
24-
}
25-
26-
if (rootStaticFiles.includes(parsedUrl.pathname)) {
24+
} else if (rootStaticFiles.includes(parsedUrl.pathname)) {
2725
const filePath = join(__dirname, ".next", parsedUrl.pathname);
2826
app.serveStatic(req, res, filePath);
2927
} else {

‎next.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ module.exports = {
99
config.plugins.push(
1010
new SWPrecacheWebpackPlugin({
1111
minify: true,
12+
verbose: true,
1213
staticFileGlobsIgnorePatterns: [/\.next\//],
1314
staticFileGlobs: ["static/**/*"],
1415
runtimeCaching: [

‎package.json‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,31 @@
66
"license": "MIT",
77
"scripts": {
88
"build": "node purify && next build",
9-
"dev": "npm run lint && cp ./node_modules/tachyons/css/tachyons.css ./static/tachyons.min.css && node index",
9+
"dev": "npm run lint && cp ./node_modules/tachyons/css/tachyons.css ./node_modules/tachyons/css/tachyons.min.pure.css && node index",
1010
"lint": "prettier pages/*.js components/*.js app/*.js *.js --write",
1111
"start": "NODE_ENV=production node index"
1212
},
1313
"dependencies": {
14+
"isomorphic-fetch": "^2.2.1",
1415
"module-alias": "^2.0.0",
15-
"next": "^3.0.0-beta8",
16+
"next": "^3.0.0-beta9",
1617
"next-routes": "^1.0.24",
18+
"postcss-cssnext": "^2.11.0",
19+
"postcss-import": "^10.0.0",
1720
"preact": "^8.1.0",
1821
"preact-compat": "^3.16.0",
19-
"send": "^0.15.3",
20-
"isomorphic-fetch": "^2.2.1",
2122
"prettier": "^0.22.0",
2223
"purify-css": "^1.2.2",
2324
"react": "^15.5.4",
2425
"react-dom": "^15.5.4",
26+
"styled-jsx-postcss": "^0.2.0",
2527
"sw-precache": "^5.1.0",
2628
"sw-precache-webpack-plugin": "^0.9.1",
2729
"tachyons": "^4.7.4"
30+
},
31+
"babel": {
32+
"presets": [
33+
"./babel-preset"
34+
]
2835
}
2936
}

‎pages/_document.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import NextDocument, { Head, Main, NextScript } from "next/document";
2+
3+
export default class Document extends NextDocument {
4+
render() {
5+
return (
6+
<html lang="en">
7+
<Head>
8+
<title>Next.js HN PWA</title>
9+
<meta charSet="utf-8" />
10+
<meta name="viewport" content="width=device-width, initial-scale=1" />
11+
<meta
12+
name="description"
13+
content="A Hacker News Progressive Web App built using Next.js"
14+
/>
15+
<meta name="theme-color" content="#ff80cc" />
16+
<link rel="manifest" href="/static/manifest.json" />
17+
<style global jsx>
18+
{
19+
`
20+
body {
21+
overflow-y: scroll;
22+
max-width: 100%;
23+
overflow-x: hidden;
24+
}
25+
`
26+
}
27+
</style>
28+
</Head>
29+
<body className="sans-serif">
30+
<Main />
31+
<NextScript />
32+
33+
<style jsx>
34+
{
35+
`
36+
@import 'tachyons/css/tachyons.min.pure';
37+
`
38+
}
39+
</style>
40+
</body>
41+
</html>
42+
);
43+
}
44+
}

‎pages/comments.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from "react";
22
import { Link } from "../routes";
33
import { get } from "../app/fetch";
4-
import Head from "../components/head";
54
import ItemMeta from "../components/item-meta";
65
import Navigation from "../components/navigation";
76

@@ -63,8 +62,7 @@ function commentThread(comments) {
6362

6463
const Comments = ({ data }) => {
6564
return (
66-
<main className="sans-serif">
67-
<Head />
65+
<main>
6866
<Navigation />
6967
<section className="w-100 center mw7 mh4">
7068
<ItemMeta {...data} />

‎pages/index.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from "react";
22
import { get } from "../app/fetch";
3-
import Head from "../components/head";
43
import ItemMeta from "../components/item-meta";
54
import Navigation from "../components/navigation";
65

@@ -28,8 +27,7 @@ export default class extends React.Component {
2827

2928
render() {
3029
return (
31-
<main className="sans-serif">
32-
<Head />
30+
<main>
3331
<Navigation current={this.props.type} />
3432
<section className="w-100 center mw7 mh4">
3533
{this.props.data.map((item, index) => (

0 commit comments

Comments
 (0)