mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-10 16:14:19 +02:00
Merge pull request #163 from phuoc-ng/update-webpack-5
Update webpack 5
This commit is contained in:
phuoc-ng
GitHub
9
.babelrc
9
.babelrc
@@ -1,5 +1,12 @@
|
||||
{
|
||||
"plugins": ["@loadable/babel-plugin"],
|
||||
"plugins": [
|
||||
"@loadable/babel-plugin",
|
||||
["prismjs", {
|
||||
"languages": ["css", "html", "javascript", "jsx", "tsx"],
|
||||
"theme": "twilight",
|
||||
"css": true
|
||||
}]
|
||||
],
|
||||
"presets": [
|
||||
"@babel/preset-env",
|
||||
"@babel/preset-react"
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,4 +1,5 @@
|
||||
.netlify
|
||||
dist
|
||||
node_modules
|
||||
package-lock.json
|
||||
tslint.log
|
||||
@@ -3,19 +3,14 @@
|
||||
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
||||
*/
|
||||
|
||||
import hljs from 'highlight.js/lib/highlight'; // tslint:disable-line
|
||||
import javascript from 'highlight.js/lib/languages/javascript'; // tslint:disable-line
|
||||
import html from 'highlight.js/lib/languages/xml'; // tslint:disable-line
|
||||
|
||||
hljs.registerLanguage('javascript', javascript);
|
||||
hljs.registerLanguage('html', html);
|
||||
import Prism from 'prismjs';
|
||||
|
||||
const highlight = (input: string, language: string) => {
|
||||
const lang = language || 'html';
|
||||
const { value } = hljs.highlight(lang, input);
|
||||
const value = Prism.highlight(input, Prism.languages[language], language);
|
||||
const highlighted = value.replace('&', '&').trim();
|
||||
|
||||
return `<code class="${lang}">${highlighted}</code>`;
|
||||
return `<code class="language-${lang}">${highlighted}</code>`;
|
||||
};
|
||||
|
||||
export default highlight;
|
||||
export default highlight;
|
||||
@@ -14,7 +14,6 @@ import CoverCard from '../components/CoverCard';
|
||||
import Pattern from '../constants/Pattern';
|
||||
import useDocumentTitle from '../hooks/useDocumentTitle';
|
||||
import Layout from '../layouts/Layout';
|
||||
import MadeOf from './MadeOf';
|
||||
|
||||
const HomePage = () => {
|
||||
useDocumentTitle('CSS Layout');
|
||||
@@ -253,8 +252,6 @@ const HomePage = () => {
|
||||
<CoverCard pattern={Pattern.Wizard} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<MadeOf />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
/**
|
||||
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
|
||||
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import SampleCode from '../components/SampleCode';
|
||||
|
||||
const MadeOf: React.FC<{}> = () => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#282828',
|
||||
padding: '24px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className='text-2xl lg:text-4xl'
|
||||
style={{
|
||||
color: '#FFF',
|
||||
fontWeight: 600,
|
||||
textAlign: 'center',
|
||||
textTransform: 'lowercase',
|
||||
}}
|
||||
>
|
||||
How it's made
|
||||
</div>
|
||||
<div>
|
||||
<SampleCode
|
||||
lang='javascript'
|
||||
code={`
|
||||
this
|
||||
.madeWith([react,typescript])
|
||||
.then((r) => lint(r)) /* tslint */
|
||||
.then((r) => lazyLoad(r)) /* @loadable/component */
|
||||
.then((r) => optimizeAndBundle(r)) /* webpack */
|
||||
.then((r) => exportHtml(r)) /* react-snap */
|
||||
.then((r) => deploy(r)) /* Netlify */
|
||||
.then((r) => {
|
||||
expect(r).is(scalableCode);
|
||||
expect(r).is(superFastWebsite);
|
||||
expect(r).is(seoFriendly);
|
||||
})
|
||||
.finally(() => {
|
||||
/* Give me 1 Github star 🎉 */
|
||||
});
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MadeOf;
|
||||
@@ -59,14 +59,17 @@ const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<th
|
||||
key={index}
|
||||
style={
|
||||
Object.assign({}, {
|
||||
padding: '16px',
|
||||
}, index === 0 ? {
|
||||
style={(
|
||||
index === 0
|
||||
? {
|
||||
backgroundColor: '#ddd',
|
||||
left: 0,
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
} : {},
|
||||
}
|
||||
: {
|
||||
padding: '16px',
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div style={{ width: '200px' }}>
|
||||
@@ -92,14 +95,15 @@ const Details: React.FC<{}> = () => {
|
||||
return (
|
||||
<td
|
||||
key={col}
|
||||
style={
|
||||
Object.assign({}, {
|
||||
padding: '16px',
|
||||
}, col === 0 ? {
|
||||
style={(
|
||||
col === 0 ? {
|
||||
backgroundColor: '#ddd',
|
||||
left: 0,
|
||||
padding: '16px',
|
||||
position: 'sticky',
|
||||
} : {},
|
||||
} : {
|
||||
padding: '16px',
|
||||
}
|
||||
)}
|
||||
>
|
||||
{
|
||||
|
||||
11104
package-lock.json
generated
11104
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
72
package.json
72
package.json
@@ -2,51 +2,53 @@
|
||||
"name": "csslayout",
|
||||
"scripts": {
|
||||
"copy": "rimraf dist && mkdir dist && cpx 'public/**/*' dist",
|
||||
"dev": "npm run copy && webpack --mode development",
|
||||
"dev-server": "npm run copy && webpack-dev-server",
|
||||
"build": "npm run copy && webpack --mode production && npm run export",
|
||||
"dev": "npm run copy && webpack --mode=development",
|
||||
"dev-server": "npm run copy && webpack serve",
|
||||
"build": "npm run copy && webpack --mode=production && npm run export",
|
||||
"export": "react-snap",
|
||||
"deploy": "npm run build && netlify deploy --dir=dist --prod",
|
||||
"analyse": "NODE_ENV=analyse webpack --config webpack.config.js -p",
|
||||
"lint": "tslint -c tslint.json -o tslint.log 'client/**/*.{ts,tsx}'"
|
||||
},
|
||||
"dependencies": {
|
||||
"@loadable/component": "^5.12.0",
|
||||
"highlight.js": "^10.4.1",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-helmet": "^5.2.1",
|
||||
"react-router-dom": "^5.1.2"
|
||||
"@loadable/component": "^5.14.1",
|
||||
"prismjs": "^1.23.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-router-dom": "^5.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.8.3",
|
||||
"@babel/preset-env": "^7.8.3",
|
||||
"@babel/preset-react": "^7.7.4",
|
||||
"@loadable/babel-plugin": "^5.12.0",
|
||||
"@types/loadable__component": "^5.10.0",
|
||||
"@types/react": "^16.9.17",
|
||||
"@types/react-dom": "^16.9.4",
|
||||
"@types/react-helmet": "^5.0.15",
|
||||
"@types/react-router-dom": "^5.1.3",
|
||||
"babel-loader": "^8.0.6",
|
||||
"cpx2": "^2.0.0",
|
||||
"css-loader": "^3.4.2",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"mini-css-extract-plugin": "^0.9.0",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"@babel/core": "^7.13.13",
|
||||
"@babel/preset-env": "^7.13.12",
|
||||
"@babel/preset-react": "^7.13.13",
|
||||
"@loadable/babel-plugin": "^5.13.2",
|
||||
"@types/loadable__component": "^5.13.3",
|
||||
"@types/prismjs": "^1.16.4",
|
||||
"@types/react": "^17.0.3",
|
||||
"@types/react-dom": "^17.0.3",
|
||||
"@types/react-helmet": "^6.1.0",
|
||||
"@types/react-router-dom": "^5.1.7",
|
||||
"babel-loader": "^8.2.2",
|
||||
"babel-plugin-prismjs": "^2.0.1",
|
||||
"cpx2": "^3.0.0",
|
||||
"css-loader": "^5.2.0",
|
||||
"html-webpack-plugin": "^5.3.1",
|
||||
"mini-css-extract-plugin": "^1.4.0",
|
||||
"postcss-loader": "^5.2.0",
|
||||
"react-snap": "^1.23.0",
|
||||
"rimraf": "^3.0.0",
|
||||
"source-map-loader": "^0.2.4",
|
||||
"style-loader": "^1.1.3",
|
||||
"rimraf": "^3.0.2",
|
||||
"source-map-loader": "^2.0.1",
|
||||
"style-loader": "^2.0.0",
|
||||
"tailwindcss": "^1.1.4",
|
||||
"ts-loader": "^6.2.1",
|
||||
"tslint": "^5.20.1",
|
||||
"tslint-react": "^4.1.0",
|
||||
"typescript": "^3.7.5",
|
||||
"webpack": "^4.41.5",
|
||||
"webpack-bundle-analyzer": "^3.6.0",
|
||||
"webpack-cli": "^3.3.10",
|
||||
"webpack-dev-server": "^3.10.1"
|
||||
"ts-loader": "^8.1.0",
|
||||
"tslint": "^6.1.3",
|
||||
"tslint-react": "^5.0.0",
|
||||
"typescript": "^4.2.3",
|
||||
"webpack": "^5.28.0",
|
||||
"webpack-bundle-analyzer": "^4.4.0",
|
||||
"webpack-cli": "^4.6.0",
|
||||
"webpack-dev-server": "^3.11.2"
|
||||
},
|
||||
"reactSnap": {
|
||||
"source": "dist",
|
||||
|
||||
1
vendors/highlight.js@9.12.0/theme.min.css
vendored
1
vendors/highlight.js@9.12.0/theme.min.css
vendored
@@ -1 +0,0 @@
|
||||
.hljs{display:block;overflow-x:auto;padding:.5em;background:#282828}.hljs,.hljs-subst{color:#ebdbb2}.hljs-deletion,.hljs-formula,.hljs-keyword,.hljs-link,.hljs-selector-tag{color:#fb4934}.hljs-built_in,.hljs-emphasis,.hljs-name,.hljs-quote,.hljs-strong,.hljs-title,.hljs-variable{color:#83a598}.hljs-attr,.hljs-params,.hljs-template-tag,.hljs-type{color:#fabd2f}.hljs-builtin-name,.hljs-doctag,.hljs-literal,.hljs-number{color:#8f3f71}.hljs-code,.hljs-meta,.hljs-regexp,.hljs-selector-id,.hljs-template-variable{color:#fe8019}.hljs-addition,.hljs-meta-string,.hljs-section,.hljs-selector-attr,.hljs-selector-class,.hljs-string,.hljs-symbol{color:#b8bb26}.hljs-attribute,.hljs-bullet,.hljs-class,.hljs-function,.hljs-function .hljs-keyword,.hljs-meta-keyword,.hljs-selector-pseudo,.hljs-tag{color:#8ec07c}.hljs-comment{color:#928374}.hljs-link_label,.hljs-literal,.hljs-number{color:#d3869b}.hljs-comment,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-strong,.hljs-tag{font-weight:bold}
|
||||
@@ -24,9 +24,9 @@ if (process.env.NODE_ENV === "analyse") {
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
mode: process.env.NODE_ENV,
|
||||
entry: {
|
||||
'vendor-styles': [
|
||||
'./vendors/highlight.js@9.12.0/theme.min.css',
|
||||
'./vendors/tailwind@1.1.4/tailwind.css',
|
||||
],
|
||||
// The CSS for client should come after `vendor-styles`
|
||||
@@ -51,18 +51,17 @@ module.exports = {
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
options: {
|
||||
hmr: process.env.NODE_ENV === 'development',
|
||||
},
|
||||
},
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
ident: 'postcss',
|
||||
plugins: [
|
||||
require('tailwindcss'),
|
||||
],
|
||||
postcssOptions: {
|
||||
ident: 'postcss',
|
||||
plugins: [
|
||||
require('tailwindcss'),
|
||||
],
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
@@ -84,41 +83,11 @@ module.exports = {
|
||||
resolve: {
|
||||
extensions: ['.js', '.jsx', '.ts', '.tsx'],
|
||||
},
|
||||
devtool: 'cheap-module-eavl-source-map',
|
||||
devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
|
||||
devServer: {
|
||||
contentBase: path.join(__dirname, 'dist'),
|
||||
historyApiFallback: true,
|
||||
port: 1234,
|
||||
},
|
||||
plugins,
|
||||
// See https://webpack.js.org/guides/caching/
|
||||
optimization: {
|
||||
runtimeChunk: 'single',
|
||||
moduleIds: 'hashed',
|
||||
splitChunks: {
|
||||
chunks: 'all',
|
||||
maxInitialRequests: Infinity,
|
||||
minSize: 0,
|
||||
cacheGroups: {
|
||||
vendor: {
|
||||
// sync + async chunks
|
||||
chunks: 'all',
|
||||
name: 'vendors',
|
||||
// import file path containing node_modules
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
priority: 20,
|
||||
},
|
||||
/*
|
||||
common: {
|
||||
name: 'common',
|
||||
minChunks: 2,
|
||||
chunks: 'all',
|
||||
priority: 10,
|
||||
reuseExistingChunk: true,
|
||||
enforce: true,
|
||||
},
|
||||
*/
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user