yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Separated css and fonts into a separate file

Browse Source
This commit is contained in:
Jori Lallo
2016-05-03 23:43:43 -07:00
parent 5e5f37b3c0
commit 16e972e53c
9 changed files with 37 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
index.html
View File

@@ -1,21 +0,0 @@
<!doctype html>
<html>
<head>
<title>Beautiful Atlas</title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/codemirror.min.css' rel='stylesheet'>
</head>
<body style='display: flex; width: 100%'>
<div id="root" style='display: flex; width: 100%'></div>
<script src="/static/bundle.js"></script>
<script type="text/javascript">
// if ('serviceWorker' in navigator) {
// navigator.serviceWorker.register('/service-worker.js')
// .then(function(reg) {
// console.log('SW registration succeeded');
// }).catch(function(error) {
// console.log('SW registration failed: ' + error);
// });
// };
</script>
</body>
</html>

2
package.json
View File

@@ -31,6 +31,8 @@
"babel-preset-react-hmre": "^1.0.1", "babel-preset-react-hmre": "^1.0.1",
"babel-preset-stage-0": "^6.5.0", "babel-preset-stage-0": "^6.5.0",
"debug": "^2.2.0", "debug": "^2.2.0",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.16.1",
"http-errors": "^1.4.0", "http-errors": "^1.4.0",
"isomorphic-fetch": "^2.2.1", "isomorphic-fetch": "^2.2.1",
"jsonwebtoken": "^5.7.0", "jsonwebtoken": "^5.7.0",

2
server/routes.js
View File

@@ -25,7 +25,7 @@ router.get('/service-worker.js', async (ctx) => {
}); });
router.get('*', async (ctx) => { router.get('*', async (ctx) => {
const stats = await sendfile(ctx, path.join(__dirname, 'static/index.html')); const stats = await sendfile(ctx, path.join(__dirname, './static/dev.html'));
if (!ctx.status) ctx.throw(httpErrors.NotFound()); if (!ctx.status) ctx.throw(httpErrors.NotFound());
}); });

11
server/static/dev.html Normal file
View File

@@ -0,0 +1,11 @@
<!doctype html>
<html>
<head>
<title>Beautiful Atlas</title>
<link href="/static/styles.css" rel="stylesheet"></head>
</head>
<body style='display: flex; width: 100%'>
<div id="root" style='display: flex; width: 100%'></div>
<script src="/static/bundle.js"></script>
</body>
</html>

2
server/static/index.html
View File

@@ -2,11 +2,9 @@
<html> <html>
<head> <head>
<title>Beautiful Atlas</title> <title>Beautiful Atlas</title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/codemirror.min.css' rel='stylesheet'>
</head> </head>
<body style='display: flex; width: 100%'> <body style='display: flex; width: 100%'>
<div id="root" style='display: flex; width: 100%'></div> <div id="root" style='display: flex; width: 100%'></div>
<script src="/static/bundle.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// if ('serviceWorker' in navigator) { // if ('serviceWorker' in navigator) {
// navigator.serviceWorker.register('/service-worker.js') // navigator.serviceWorker.register('/service-worker.js')

12
src/fonts/atlas/atlas.css
View File

@@ -7,16 +7,16 @@
@font-face { @font-face {
font-family: 'Atlas Grotesk'; font-family: 'Atlas Grotesk';
src: url('./AtlasGrotesk-RegularItalic-Web.woff') format('woff'); src: url('./AtlasGrotesk-Medium-Web.woff') format('woff');
font-weight: normal; font-weight: bold;
font-style: italic; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Atlas Grotesk'; font-family: 'Atlas Grotesk';
src: url('./AtlasGrotesk-Medium-Web.woff') format('woff'); src: url('./AtlasGrotesk-RegularItalic-Web.woff') format('woff');
font-weight: bold; font-weight: normal;
font-style: normal; font-style: italic;
} }
@font-face { @font-face {

2
src/index.js
View File

@@ -13,7 +13,9 @@ import auth from 'utils/auth';
import reducers from 'reducers'; import reducers from 'reducers';
import 'normalize.css/normalize.css';
import 'utils/base-styles.scss'; import 'utils/base-styles.scss';
import 'fonts/atlas/atlas.css';
import Home from 'scenes/Home'; import Home from 'scenes/Home';
// import App from 'scenes/App'; // import App from 'scenes/App';

2
src/scenes/App/App.js
View File

@@ -1,8 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import 'normalize.css/normalize.css';
import '../../fonts/atlas/atlas.css';
import styles from './App.scss'; import styles from './App.scss';
import { import {

17
webpack.config.js
View File

@@ -1,5 +1,7 @@
var path = require('path'); var path = require('path');
var webpack = require('webpack'); var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
// Load .env // Load .env
require('dotenv').config(); require('dotenv').config();
@@ -23,9 +25,15 @@ module.exports = {
include: path.join(__dirname, 'src') include: path.join(__dirname, 'src')
}, },
{ test: /\.json$/, loader: 'json-loader' }, { test: /\.json$/, loader: 'json-loader' },
{ test: /\.s?css$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass?sourceMap' }, {
test: /\.s?css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass?sourceMap')
},
{ test: /\.(png|jpg|svg)$/, loader: 'url-loader' }, // inline base64 URLs for <=8k images, direct URLs for the rest { test: /\.(png|jpg|svg)$/, loader: 'url-loader' }, // inline base64 URLs for <=8k images, direct URLs for the rest
{ test: /\.woff$/, loader: 'url-loader?limit=65000&mimetype=application/font-woff&name=public/fonts/[name].[ext]' }, {
test: /\.woff$/,
loader: 'url-loader?limit=1&mimetype=application/font-woff&name=public/fonts/[name].[ext]'
},
] ]
}, },
resolve: { resolve: {
@@ -38,5 +46,10 @@ module.exports = {
new webpack.ProvidePlugin({ new webpack.ProvidePlugin({
'fetch': 'imports?this=>global!exports?global.fetch!isomorphic-fetch' 'fetch': 'imports?this=>global!exports?global.fetch!isomorphic-fetch'
}), }),
new ExtractTextPlugin("styles.css"),
new HtmlWebpackPlugin({
title: 'Atlas',
template: 'server/static/index.html',
}),
] ]
}; };