mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-10 08:04:42 +02:00
Code Issues Releases Wiki Activity

Merge pull request #55 from phuoc-ng/tweak-home

Browse Source 
Tweak home
This commit is contained in:
phuoc-ng
2019-11-26 23:18:15 +07:00
committed by GitHub
parent ab542dfc0e 27543dfd00
commit 38fd1026d8
11 changed files with 469 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@@ -23,6 +23,19 @@ They are powered by modern CSS features such as flexbox and grid.
They are great starting points and could be picked and customized easily for each specific need. They are great starting points and could be picked and customized easily for each specific need.
By composing them, you can have any possible layout that exists in the real life. By composing them, you can have any possible layout that exists in the real life.
The entire website is powered by
~~~ javascript
this
.madeWith([react,typescript])
.then(r => lazyLoad(@loadable/component))
.then(r => optimizeAndBundle(webpack))
.then(r => exportHtml(react-snap))
.then(r => deploy(Netlify))
.assert([scalableCode, superFastWebsite, seoFriendly])
.done(/* Give me 1 star */) 🎉
~~~
## Running it on local ## Running it on local
- Clone the project: - Clone the project:
@@ -44,7 +57,7 @@ $ npm install
$ npm run dev-server $ npm run dev-server
~~~ ~~~
Visit http://localhost:8080 to see it in action. Visit http://localhost:1234 to see it in action.
## Contributing ## Contributing

60
client/Explore.tsx
View File

@@ -12,18 +12,64 @@ const Home = () => {
return ( return (
<Layout> <Layout>
<div className="mv4"> <div style={{ margin: '32px 0' }}>
<Link to="/" className="bg-dark-blue black br-pill link pa1 ph3 pv2 white">CSS Layout</Link> <Link
to="/"
style={{
backgroundColor: '#00449E',
borderRadius: '9999px',
color: '#FFF',
padding: '8px 16px',
textDecoration: 'none',
}}
>
.home
</Link>
</div> </div>
<div className="bt br bl b--black-20 relative br4 br--top"> <div
<h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>Explore</h1> style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomColor: 'transparent',
borderTopLeftRadius: '16px',
borderTopRightRadius: '16px',
marginTop: '32px',
position: 'relative',
}}
>
<h1
style={{
backgroundColor: '#FFF',
fontSize: '36px',
fontWeight: 600,
left: '50%',
lineHeight: 1.5,
margin: 0,
padding: '0 16px',
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%)',
}}
>
Explore
</h1>
<h2 className="fw3 f3 tc lh-copy ma0 pa4">Here is the collection of patterns</h2> <h2
style={{
fontSize: '24px',
fontWeight: 300,
lineHeight: 1.5,
margin: 0,
padding: '32px 0',
textAlign: 'center',
}}
>
Here is the collection of patterns
</h2>
<section> <section>
<Heading title="Layouts" /> <Heading title="Layouts" />
<div className="flex flex-wrap items-start pa4"> <div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
<CoverCard pattern={Pattern.HolyGrail} /> <CoverCard pattern={Pattern.HolyGrail} />
<CoverCard pattern={Pattern.Sidebar} /> <CoverCard pattern={Pattern.Sidebar} />
<CoverCard pattern={Pattern.SplitScreen} /> <CoverCard pattern={Pattern.SplitScreen} />
@@ -35,7 +81,7 @@ const Home = () => {
<section> <section>
<Heading title="Patterns" /> <Heading title="Patterns" />
<div className="flex flex-wrap items-start pa4"> <div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
<CoverCard pattern={Pattern.Badge} /> <CoverCard pattern={Pattern.Badge} />
<CoverCard pattern={Pattern.Breadcrumb} /> <CoverCard pattern={Pattern.Breadcrumb} />
<CoverCard pattern={Pattern.ButtonWithIcon} /> <CoverCard pattern={Pattern.ButtonWithIcon} />

137
client/Home.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import './home.css';
import CoverCard from './components/CoverCard'; 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';
@@ -11,11 +13,31 @@ const Home = () => {
return ( return (
<Layout> <Layout>
<div className="mt5 bl br bt b--black-20 br4 br--top"> <div
<div className="relative"> style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomColor: 'transparent',
borderTopLeftRadius: '16px',
borderTopRightRadius: '16px',
marginTop: '64px',
}}
>
<div style={{ position: 'relative' }}>
<h1 <h1
className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0 br-pill ph3 white bg-dark-blue" style={{
style={{ left: '50%', transform: 'translate(-50%, -50%)' }} backgroundColor: '#00449E',
borderRadius: '9999px',
color: '#FFF',
fontSize: '36px',
fontWeight: 600,
left: '50%',
lineHeight: 1.5,
margin: 0,
padding: '0 16px',
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%)',
}}
> >
CSS Layout CSS Layout
</h1> </h1>
@@ -33,37 +55,75 @@ const Home = () => {
a collection of popular layouts and patterns made with CSS a collection of popular layouts and patterns made with CSS
</h2> </h2>
<div className="w-30 center mb4"> <div
<ul className="ma0 pa0 list f4 lh-copy"> className="hljs"
<li className="flex items-center justify-between"> style={{
<div>Zero dependencies</div> alignItems: 'center',
<div>🎉</div> display: 'flex',
</li> fontFamily: '\'Source Code Pro\'',
<li className="flex items-center justify-between"> fontSize: '16px',
<div>No frameworks</div> justifyContent: 'center',
<div>🎉</div> lineHeight: 1.5,
</li> }}
<li className="flex items-center justify-between"> >
<div>No CSS hacks</div> <ul style={{ listStyleType: 'none', margin: 0, padding: 0, width: '300px' }}>
<div>🎉</div> <li><span className="hljs-selector-class">.awesome</span> &#123;</li>
</li> <ul style={{ listStyleType: 'none', margin: 0, padding: '0 32px' }}>
<li className="flex items-center justify-between"> <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<div>Real use cases</div> <div className="hljs-attribute">zero-dependencies:</div>
<div>🎉</div> <div>🎉;</div>
</li> </li>
<li className="flex items-center justify-between"> <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<div>Good practices</div> <div className="hljs-attribute">no-frameworks:</div>
<div className="br-pill ph2 white bg-dark-blue f6">soon</div> <div>🎉;</div>
</li> </li>
<li className="flex items-center justify-between"> <li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<div>Accessibility</div> <div className="hljs-attribute">no-css-hacks:</div>
<div className="br-pill ph2 white bg-dark-blue f6">soon</div> <div>🎉;</div>
</li> </li>
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<div className="hljs-attribute">real-use-cases:</div>
<div>🎉;</div>
</li>
<li style={{ alignItems: 'center', display: 'flex' }}>
<div className="hljs-attribute">good-practices:</div>
<div
style={{
backgroundColor: '#00449E',
borderRadius: '9999px',
color: '#FFF',
fontSize: '14px',
marginLeft: 'auto',
padding: '0 8px',
}}
>
soon
</div>
;
</li>
<li style={{ alignItems: 'center', display: 'flex' }}>
<div className="hljs-attribute">accessibility:</div>
<div
style={{
backgroundColor: '#00449E',
borderRadius: '9999px',
color: '#FFF',
fontSize: '14px',
marginLeft: 'auto',
padding: '0 8px',
}}
>
soon
</div>
;
</li>
</ul>
<li>&#125;</li>
</ul> </ul>
</div> </div>
</div> </div>
<section style={{ position: 'relative' }}> <section style={{ height: '900px', overflow: 'hidden', paddingBottom: '32px', position: 'relative' }}>
<div <div
style={{ style={{
alignItems: 'center', alignItems: 'center',
@@ -102,6 +162,7 @@ const Home = () => {
</Link> </Link>
</div> </div>
<div <div
className="home-cards"
style={{ style={{
display: 'flex', display: 'flex',
flexWrap: 'wrap', flexWrap: 'wrap',
@@ -134,6 +195,20 @@ const Home = () => {
<CoverCard pattern={Pattern.PropertyList} /> <CoverCard pattern={Pattern.PropertyList} />
<CoverCard pattern={Pattern.ProgressBar} /> <CoverCard pattern={Pattern.ProgressBar} />
<CoverCard pattern={Pattern.QuestionsAndAnswers} /> <CoverCard pattern={Pattern.QuestionsAndAnswers} />
<CoverCard pattern={Pattern.RadioSwitch} />
<CoverCard pattern={Pattern.Rating} />
<CoverCard pattern={Pattern.SameHeightColumns} />
<CoverCard pattern={Pattern.SearchBox} />
<CoverCard pattern={Pattern.Separator} />
<CoverCard pattern={Pattern.SimpleGrid} />
<CoverCard pattern={Pattern.Slider} />
<CoverCard pattern={Pattern.SpinButton} />
<CoverCard pattern={Pattern.SplitNavigation} />
<CoverCard pattern={Pattern.StepperInput} />
<CoverCard pattern={Pattern.Switch} />
<CoverCard pattern={Pattern.Tab} />
<CoverCard pattern={Pattern.TogglePasswordVisibility} />
<CoverCard pattern={Pattern.Wizard} />
</div> </div>
</section> </section>
</div> </div>

21
client/components/CoverCard.tsx
View File

@@ -14,10 +14,27 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
<div className="pa1 w-20"> <div className="pa1 w-20">
<Link <Link
to={`/${slug(pattern)}`} to={`/${slug(pattern)}`}
className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3" style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
padding: '16px',
textDecoration: 'none',
}}
> >
<CoverLoader pattern={pattern} /> <CoverLoader pattern={pattern} />
<h4 className="f5 mv0 pt3 fw6">{pattern}</h4> <h4
style={{
fontSize: '16px',
fontWeight: 500,
margin: 0,
paddingTop: '12px',
textAlign: 'center',
}}
>
{pattern}
</h4>
</Link> </Link>
</div> </div>
); );

20
client/components/Heading.tsx
View File

@@ -6,8 +6,24 @@ interface HeadingProps {
const Heading: React.FC<HeadingProps> = ({ title }) => { const Heading: React.FC<HeadingProps> = ({ title }) => {
return ( return (
<div className="bt b--black-20 relative"> <div style={{ borderTop: '1px solid rgba(0, 0, 0, .2)', position: 'relative' }}>
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>{title}</h3> <h3
style={{
backgroundColor: '#FFF',
fontSize: '20px',
fontWeight: 700,
left: '32px',
lineHeight: 1.5,
margin: 0,
padding: '0 8px',
position: 'absolute',
textTransform: 'uppercase',
top: 0,
transform: 'translate(0, -50%)',
}}
>
{title}
</h3>
</div> </div>
); );
}; };

12
client/home.css Normal file
View File

@@ -0,0 +1,12 @@
.home-cards {
animation: slide 60s linear infinite;
}
@keyframes slide{
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -600px, 0);
}
}

62
client/layouts/DetailsLayout.tsx
View File

@@ -13,12 +13,64 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
return ( return (
<Layout> <Layout>
<div className="mv4"> <div
<Link to="/" className="bg-dark-blue black br-pill link pa1 ph3 pv2 white">CSS Layout</Link> style={{
alignItems: 'center',
backgroundColor: '#00449E',
borderRadius: '9999px',
color: '#FFF',
display: 'inline-flex',
margin: '32px 0',
}}
>
<Link
to="/"
style={{
color: '#FFF',
padding: '8px 16px',
textDecoration: 'none',
}}
>
.home
</Link>
<div>~</div>
<Link
to="/explore"
style={{
color: '#FFF',
padding: '8px 16px',
textDecoration: 'none',
}}
>
.explore
</Link>
</div> </div>
<div className="bt br bl b--black-20 relative br4 br--top"> <div
<h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>{title}</h1> style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomColor: 'transparent',
borderTopLeftRadius: '16px',
borderTopRightRadius: '16px',
marginTop: '32px',
position: 'relative',
}}
>
<h1
style={{
backgroundColor: '#FFF',
fontSize: '36px',
fontWeight: 600,
left: '50%',
lineHeight: 1.5,
margin: 0,
padding: '0 16px',
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%)',
}}
>
{title}
</h1>
{children} {children}
</div> </div>
</Layout> </Layout>

232
client/layouts/Footer.tsx
View File

@@ -4,106 +4,154 @@ import Heading from '../components/Heading';
const Footer: React.FC<{}> = () => { const Footer: React.FC<{}> = () => {
return ( return (
<div className="bl br bb b--black-20 flex justify-between br4 br--bottom"> <div
<div className="br b--black-20" style={{ flex: 1 }}> style={{
<Heading title="Products" /> border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomLeftRadius: '16px',
<ul className="list ma0 pa0 lh-copy fw5 pa4"> borderBottomRightRadius: '16px',
<li> display: 'flex',
<a href="https://formvalidation.io" className="link" target="_blank" title="FormValidation ~ best validation library for JavaScript"> }}
FormValidation >
</a> <div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.2)',
display: 'flex',
flex: 1,
fontSize: '16px',
lineHeight: 1.5,
padding: '32px',
}}
>
<ul
style={{
fontWeight: 500,
lineHeight: 1.5,
listStyleType: 'none',
margin: 0,
padding: 0,
}}
>
<li style={{ alignItems: 'center', display: 'flex' }}>
<h3
className="hljs-selector-class"
style={{
fontSize: '20px',
fontWeight: 700,
margin: 0,
padding: '0 8px 0 0',
}}
>
.my-products
</h3>
&#123;
</li> </li>
<li> <ul style={{ listStyleType: 'none', margin: 0, padding: '0 32px' }}>
<a className="link" href="https://blur.page" title="BlurPage ~ a browser extension to hide sensitive element on page" target="_blank"> <li>
BlurPage <a
</a> href="https://formvalidation.io"
</li> style={{ textDecoration: 'none' }}
<li> target="_blank"
<a className="link" href="https://react-pdf-viewer.dev" title="React PDF Viewer ~ a PDF viewer made for React" target="_blank"> title="FormValidation ~ best validation library for JavaScript"
React PDF Viewer >
</a> form-validation,
</li>
</ul>
</div>
<div style={{ flex: 1 }}>
<Heading title="About" />
<div className="pa4">
<div className="pb2 lh-copy">© 2019 Nguyen Huu Phuoc and contributors</div>
<ul className="list ma0 pa0 lh-copy fw5">
<li className="mb1">
<a href="https://twitter.com/nghuuphuoc" className="link flex items-center">
<span
className="bg-black-40 br-pill flex items-center justify-center mr2"
style={{ height: '24px', width: '24px' }}
>
<svg
viewBox="0 0 24 24"
className="w-60 h-60"
style={{
fill: "none",
stroke: "#FFF",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
}}
>
<path d={`M23,6.628l-2-0.5l1-2l-2.464,0.7c-1.809-1.688-4.644-1.589-6.332,0.22c-0.78,0.836-1.21,1.938-1.204,3.08v1 c-3.539,0.73-6.634-1.2-9.5-4.5c-0.5,2.667,0,4.667,1.5,6l-3-0.5c0.405,2.069,1.362,3.7,4,4l-2.5,1c1,2,2.566,2.31,5,2.5 c-1.893,1.353-4.174,2.054-6.5,2c12.755,5.669,20-2.664,20-10V8.3L23,6.628z`} />
</svg>
</span>
@nghuuphuoc
</a> </a>
</li> </li>
<li className="mb1"> <li>
<a href="mailto: me@phuoc.ng" className="link flex items-center"> <a
<span href="https://blur.page"
className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ textDecoration: 'none' }}
style={{ height: '24px', width: '24px' }} target="_blank"
> title="BlurPage ~ a browser extension to hide sensitive element on page"
<svg >
viewBox="0 0 24 24" blur-page,
className="w-60 h-60"
style={{
fill: "none",
stroke: "#FFF",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
}}
>
<path d={`M2.5,3.954h19c1.105,0,2,0.895,2,2v12c0,1.105-0.895,2-2,2h-19c-1.105,0-2-0.895-2-2v-12 C0.5,4.849,1.395,3.954,2.5,3.954z M22.911,4.536L12,13.454L1.089,4.536`} />
</svg>
</span>
me@phuoc.ng
</a> </a>
</li> </li>
<li className="mb1"> <li>
<a href="https://github.com/phuoc-ng/csslayout" className="link flex items-center"> <a
<span href="https://react-pdf-viewer.dev"
className="bg-black-40 br-pill flex items-center justify-center mr2" style={{ textDecoration: 'none' }}
style={{ height: '24px', width: '24px' }} target="_blank"
> title="React PDF Viewer ~ a PDF viewer made for React"
<svg >
viewBox="0 0 24 24" react-pdf-viewer,
className="w-60 h-60"
style={{
fill: "none",
stroke: "#FFF",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
}}
>
<path d={`M12,0.5C5.649,0.494,0.495,5.638,0.489,11.989c-0.005,4.959,3.17,9.362,7.876,10.925 c0.574,0.1,0.756-0.237,0.756-0.541c0-0.275,0.006-1.037,0-2c-3.2,0.694-3.861-1.515-3.861-1.515 c-0.211-0.695-0.664-1.292-1.276-1.682c-1.044-0.714,0.078-0.7,0.078-0.7c0.739,0.101,1.389,0.538,1.762,1.184 c0.65,1.185,2.139,1.619,3.324,0.968c0.007-0.004,0.015-0.008,0.022-0.012c0.053-0.581,0.312-1.125,0.73-1.532 c-2.553-0.292-5.238-1.278-5.238-5.686C4.646,10.255,5.07,9.15,5.847,8.312C5.495,7.32,5.535,6.232,5.959,5.269 c0,0,0.967-0.309,3.162,1.18c1.885-0.517,3.875-0.517,5.76,0c2.2-1.488,3.159-1.18,3.159-1.18c0.424,0.963,0.465,2.051,0.114,3.043 c0.777,0.839,1.201,1.945,1.183,3.088c0,4.42-2.689,5.391-5.251,5.674c0.557,0.559,0.844,1.333,0.787,2.12v3.184 c0,0.307,0.186,0.647,0.77,0.536c6.028-2.002,9.291-8.51,7.29-14.538C21.369,3.667,16.962,0.492,12,0.5z`} />
</svg>
</span>
github.com/phuoc-ng/csslayout
</a> </a>
</li> </li>
</ul> </ul>
</div> <li>&#125;</li>
</ul>
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
flex: 1,
fontSize: '16px',
lineHeight: 1.5,
padding: '32px',
}}
>
<ul
style={{
fontWeight: 500,
lineHeight: 1.5,
listStyleType: 'none',
margin: 0,
padding: 0,
width: '100%',
}}
>
<li style={{ alignItems: 'center', display: 'flex' }}>
<h3
className="hljs-selector-class"
style={{
fontSize: '20px',
fontWeight: 700,
margin: 0,
padding: '0 8px 0 0',
}}
>
.about
</h3>
&#123;
</li>
<ul style={{ listStyleType: 'none', margin: 0, padding: '0 32px' }}>
<li style={{ alignItems: 'center', display: 'flex' }}>
<div>twitter:</div>
<a
href="https://twitter.com/nghuuphuoc"
style={{ marginLeft: 'auto', textDecoration: 'none' }}
target="_blank"
>
@nghuuphuoc
</a>
<div>;</div>
</li>
<li style={{ alignItems: 'center', display: 'flex' }}>
<div>email:</div>
<a
href="mailto: me@phuoc.ng"
style={{ marginLeft: 'auto', textDecoration: 'none' }}
target="_blank"
>
me@phuoc.ng
</a>
<div>;</div>
</li>
<li style={{ alignItems: 'center', display: 'flex' }}>
<div>github:</div>
<a
href="https://github.com/phuoc-ng/csslayout"
style={{ marginLeft: 'auto', textDecoration: 'none' }}
target="_blank"
>
github.com/phuoc-ng/csslayout
</a>
<div>;</div>
</li>
</ul>
<li>&#125;</li>
</ul>
</div> </div>
</div> </div>
); );

49
client/layouts/Layout.tsx
View File

@@ -11,6 +11,55 @@ const Layout: React.FC<{}> = ({ children }) => {
<div className="mw8 mb5 center"> <div className="mw8 mb5 center">
{children} {children}
<Footer /> <Footer />
<ul
style={{
fontSize: '14px',
lineHeight: 1.5,
listStyleType: 'none',
margin: '16px 0',
padding: 0,
}}
>
<li>this</li>
<li style={{ marginLeft: '16px' }}>
.madeWith([
<a href="https://reactjs.org" style={{ textDecoration: 'none' }}>react</a>,
<a href="https://www.typescriptlang.org" style={{ textDecoration: 'none' }}>typescript</a>
])
</li>
<li style={{ marginLeft: '16px' }}>
.then(r => lazyLoad(
<a href="https://github.com/smooth-code/loadable-components" style={{ textDecoration: 'none' }}>
@loadable/component
</a>
))
</li>
<li style={{ marginLeft: '16px' }}>
.then(r => optimizeAndBundle(
<a href="https://webpack.js.org" style={{ textDecoration: 'none' }}>webpack</a>
))
</li>
<li style={{ marginLeft: '16px' }}>
.then(r => exportHtml(
<a href="https://github.com/stereobooster/react-snap" style={{ textDecoration: 'none' }}>
react-snap
</a>
))
</li>
<li style={{ marginLeft: '16px' }}>
.then(r => deploy(
<a href="https://www.netlify.com" style={{ textDecoration: 'none' }}>Netlify</a>
))
</li>
<li style={{ marginLeft: '16px' }}>.assert([scalableCode, superFastWebsite, seoFriendly])</li>
<li style={{ marginLeft: '16px' }}>
.done(
<a href="https://github.com/phuoc-ng/csslayout" style={{ textDecoration: 'none' }}>
/&#42; Give me 1 star &#42;/
</a>
) 🎉
</li>
</ul>
</div> </div>
); );
}; };

BIN
public/images/screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 870 KiB

After

Width:  |  Height:  |  Size: 354 KiB

1
webpack.config.js
View File

@@ -71,6 +71,7 @@ module.exports = {
devServer: { devServer: {
contentBase: path.join(__dirname, 'dist'), contentBase: path.join(__dirname, 'dist'),
historyApiFallback: true, historyApiFallback: true,
port: 1234,
}, },
plugins, plugins,
// See https://webpack.js.org/guides/caching/ // See https://webpack.js.org/guides/caching/