mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-12 17: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": [
|
"presets": [
|
||||||
"@babel/preset-env",
|
"@babel/preset-env",
|
||||||
"@babel/preset-react"
|
"@babel/preset-react"
|
||||||
|
|||||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,4 +1,5 @@
|
|||||||
.netlify
|
.netlify
|
||||||
dist
|
dist
|
||||||
node_modules
|
node_modules
|
||||||
|
package-lock.json
|
||||||
tslint.log
|
tslint.log
|
||||||
@@ -3,19 +3,14 @@
|
|||||||
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import hljs from 'highlight.js/lib/highlight'; // tslint:disable-line
|
import Prism from 'prismjs';
|
||||||
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);
|
|
||||||
|
|
||||||
const highlight = (input: string, language: string) => {
|
const highlight = (input: string, language: string) => {
|
||||||
const lang = language || 'html';
|
const lang = language || 'html';
|
||||||
const { value } = hljs.highlight(lang, input);
|
const value = Prism.highlight(input, Prism.languages[language], language);
|
||||||
const highlighted = value.replace('&', '&').trim();
|
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 Pattern from '../constants/Pattern';
|
||||||
import useDocumentTitle from '../hooks/useDocumentTitle';
|
import useDocumentTitle from '../hooks/useDocumentTitle';
|
||||||
import Layout from '../layouts/Layout';
|
import Layout from '../layouts/Layout';
|
||||||
import MadeOf from './MadeOf';
|
|
||||||
|
|
||||||
const HomePage = () => {
|
const HomePage = () => {
|
||||||
useDocumentTitle('CSS Layout');
|
useDocumentTitle('CSS Layout');
|
||||||
@@ -253,8 +252,6 @@ const HomePage = () => {
|
|||||||
<CoverCard pattern={Pattern.Wizard} />
|
<CoverCard pattern={Pattern.Wizard} />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<MadeOf />
|
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</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 (
|
return (
|
||||||
<th
|
<th
|
||||||
key={index}
|
key={index}
|
||||||
style={
|
style={(
|
||||||
Object.assign({}, {
|
index === 0
|
||||||
padding: '16px',
|
? {
|
||||||
}, index === 0 ? {
|
|
||||||
backgroundColor: '#ddd',
|
backgroundColor: '#ddd',
|
||||||
left: 0,
|
left: 0,
|
||||||
|
padding: '16px',
|
||||||
position: 'sticky',
|
position: 'sticky',
|
||||||
} : {},
|
}
|
||||||
|
: {
|
||||||
|
padding: '16px',
|
||||||
|
}
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div style={{ width: '200px' }}>
|
<div style={{ width: '200px' }}>
|
||||||
@@ -92,14 +95,15 @@ const Details: React.FC<{}> = () => {
|
|||||||
return (
|
return (
|
||||||
<td
|
<td
|
||||||
key={col}
|
key={col}
|
||||||
style={
|
style={(
|
||||||
Object.assign({}, {
|
col === 0 ? {
|
||||||
padding: '16px',
|
|
||||||
}, col === 0 ? {
|
|
||||||
backgroundColor: '#ddd',
|
backgroundColor: '#ddd',
|
||||||
left: 0,
|
left: 0,
|
||||||
|
padding: '16px',
|
||||||
position: 'sticky',
|
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",
|
"name": "csslayout",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"copy": "rimraf dist && mkdir dist && cpx 'public/**/*' dist",
|
"copy": "rimraf dist && mkdir dist && cpx 'public/**/*' dist",
|
||||||
"dev": "npm run copy && webpack --mode development",
|
"dev": "npm run copy && webpack --mode=development",
|
||||||
"dev-server": "npm run copy && webpack-dev-server",
|
"dev-server": "npm run copy && webpack serve",
|
||||||
"build": "npm run copy && webpack --mode production && npm run export",
|
"build": "npm run copy && webpack --mode=production && npm run export",
|
||||||
"export": "react-snap",
|
"export": "react-snap",
|
||||||
"deploy": "npm run build && netlify deploy --dir=dist --prod",
|
"deploy": "npm run build && netlify deploy --dir=dist --prod",
|
||||||
"analyse": "NODE_ENV=analyse webpack --config webpack.config.js -p",
|
"analyse": "NODE_ENV=analyse webpack --config webpack.config.js -p",
|
||||||
"lint": "tslint -c tslint.json -o tslint.log 'client/**/*.{ts,tsx}'"
|
"lint": "tslint -c tslint.json -o tslint.log 'client/**/*.{ts,tsx}'"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@loadable/component": "^5.12.0",
|
"@loadable/component": "^5.14.1",
|
||||||
"highlight.js": "^10.4.1",
|
"prismjs": "^1.23.0",
|
||||||
"react": "^16.12.0",
|
"react": "^17.0.2",
|
||||||
"react-dom": "^16.12.0",
|
"react-dom": "^17.0.2",
|
||||||
"react-helmet": "^5.2.1",
|
"react-helmet": "^6.1.0",
|
||||||
"react-router-dom": "^5.1.2"
|
"react-router-dom": "^5.2.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.8.3",
|
"@babel/core": "^7.13.13",
|
||||||
"@babel/preset-env": "^7.8.3",
|
"@babel/preset-env": "^7.13.12",
|
||||||
"@babel/preset-react": "^7.7.4",
|
"@babel/preset-react": "^7.13.13",
|
||||||
"@loadable/babel-plugin": "^5.12.0",
|
"@loadable/babel-plugin": "^5.13.2",
|
||||||
"@types/loadable__component": "^5.10.0",
|
"@types/loadable__component": "^5.13.3",
|
||||||
"@types/react": "^16.9.17",
|
"@types/prismjs": "^1.16.4",
|
||||||
"@types/react-dom": "^16.9.4",
|
"@types/react": "^17.0.3",
|
||||||
"@types/react-helmet": "^5.0.15",
|
"@types/react-dom": "^17.0.3",
|
||||||
"@types/react-router-dom": "^5.1.3",
|
"@types/react-helmet": "^6.1.0",
|
||||||
"babel-loader": "^8.0.6",
|
"@types/react-router-dom": "^5.1.7",
|
||||||
"cpx2": "^2.0.0",
|
"babel-loader": "^8.2.2",
|
||||||
"css-loader": "^3.4.2",
|
"babel-plugin-prismjs": "^2.0.1",
|
||||||
"html-webpack-plugin": "^3.2.0",
|
"cpx2": "^3.0.0",
|
||||||
"mini-css-extract-plugin": "^0.9.0",
|
"css-loader": "^5.2.0",
|
||||||
"postcss-loader": "^3.0.0",
|
"html-webpack-plugin": "^5.3.1",
|
||||||
|
"mini-css-extract-plugin": "^1.4.0",
|
||||||
|
"postcss-loader": "^5.2.0",
|
||||||
"react-snap": "^1.23.0",
|
"react-snap": "^1.23.0",
|
||||||
"rimraf": "^3.0.0",
|
"rimraf": "^3.0.2",
|
||||||
"source-map-loader": "^0.2.4",
|
"source-map-loader": "^2.0.1",
|
||||||
"style-loader": "^1.1.3",
|
"style-loader": "^2.0.0",
|
||||||
"tailwindcss": "^1.1.4",
|
"tailwindcss": "^1.1.4",
|
||||||
"ts-loader": "^6.2.1",
|
"ts-loader": "^8.1.0",
|
||||||
"tslint": "^5.20.1",
|
"tslint": "^6.1.3",
|
||||||
"tslint-react": "^4.1.0",
|
"tslint-react": "^5.0.0",
|
||||||
"typescript": "^3.7.5",
|
"typescript": "^4.2.3",
|
||||||
"webpack": "^4.41.5",
|
"webpack": "^5.28.0",
|
||||||
"webpack-bundle-analyzer": "^3.6.0",
|
"webpack-bundle-analyzer": "^4.4.0",
|
||||||
"webpack-cli": "^3.3.10",
|
"webpack-cli": "^4.6.0",
|
||||||
"webpack-dev-server": "^3.10.1"
|
"webpack-dev-server": "^3.11.2"
|
||||||
},
|
},
|
||||||
"reactSnap": {
|
"reactSnap": {
|
||||||
"source": "dist",
|
"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 = {
|
module.exports = {
|
||||||
|
mode: process.env.NODE_ENV,
|
||||||
entry: {
|
entry: {
|
||||||
'vendor-styles': [
|
'vendor-styles': [
|
||||||
'./vendors/highlight.js@9.12.0/theme.min.css',
|
|
||||||
'./vendors/tailwind@1.1.4/tailwind.css',
|
'./vendors/tailwind@1.1.4/tailwind.css',
|
||||||
],
|
],
|
||||||
// The CSS for client should come after `vendor-styles`
|
// The CSS for client should come after `vendor-styles`
|
||||||
@@ -51,18 +51,17 @@ module.exports = {
|
|||||||
use: [
|
use: [
|
||||||
{
|
{
|
||||||
loader: MiniCssExtractPlugin.loader,
|
loader: MiniCssExtractPlugin.loader,
|
||||||
options: {
|
|
||||||
hmr: process.env.NODE_ENV === 'development',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
'css-loader',
|
'css-loader',
|
||||||
{
|
{
|
||||||
loader: 'postcss-loader',
|
loader: 'postcss-loader',
|
||||||
options: {
|
options: {
|
||||||
ident: 'postcss',
|
postcssOptions: {
|
||||||
plugins: [
|
ident: 'postcss',
|
||||||
require('tailwindcss'),
|
plugins: [
|
||||||
],
|
require('tailwindcss'),
|
||||||
|
],
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@@ -84,41 +83,11 @@ module.exports = {
|
|||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['.js', '.jsx', '.ts', '.tsx'],
|
extensions: ['.js', '.jsx', '.ts', '.tsx'],
|
||||||
},
|
},
|
||||||
devtool: 'cheap-module-eavl-source-map',
|
devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
|
||||||
devServer: {
|
devServer: {
|
||||||
contentBase: path.join(__dirname, 'dist'),
|
contentBase: path.join(__dirname, 'dist'),
|
||||||
historyApiFallback: true,
|
historyApiFallback: true,
|
||||||
port: 1234,
|
port: 1234,
|
||||||
},
|
},
|
||||||
plugins,
|
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