Merge pull request phuocng#193 from 1milligram/nextjs

Use Nextjs

Author: phuocng

.babelrc

@@ -1,6 +1,7 @@
 .DS_Store
 .netlify
-dist
+.next
 node_modules
+out
 package-lock.json
 tslint.log

.gitignore

@@ -0,0 +1,4 @@
+.netlify
+.next
+node_modules
+out

.prettierignore

@@ -2,10 +2,10 @@
 
 A collection of popular layouts and patterns made with CSS:
 
-* 🎉Zero dependencies
-* 🎉No frameworks
-* 🎉No CSS hacks
-* 🎉Real use cases
+* 🎉 Zero dependencies
+* 🎉 No frameworks
+* 🎉 No CSS hacks
+* 🎉 Real use cases
 * Good practices (coming soon)
 * Accessibility Support (coming soon)
 
@@ -27,32 +27,32 @@ By composing them, you can have any possible layout that exists in the real life
 
 - Clone the project:
 
-```console
-$ git clone https://github.com/phuoc-ng/csslayout
+```shell
+$ git clone https://github.com/1milligram/csslayout
 ```
 
 - Install the dependencies:
 
-```console
+```shell
 $ cd csslayout
 $ npm install
 ```
 
 - Run it on the local:
 
-```console
-$ npm run dev-server
+```shell
+$ npm run dev
 ```
 
-Visit http://localhost:1234 to see it in action.
+Visit http://localhost:3000 to see it in action.
 
 ## Contributing
 
 PRs are welcomed. If you thing there are any missing useful layouts or patterns, please create an issue or submit a PR.
 
 It's important to note that you should run the following command to lint the code:
 
-```console
+```shell
 $ npm run lint
 ```
 
@@ -66,23 +66,3 @@ Be my friend on
 * [Twitter](https://twitter.com/nghuuphuoc)
 * [dev.to](https://dev.to/phuocng)
 * [Github](https://github.com/phuoc-ng)
-
-## Products
-
-You might be interested in my products:
-
-_Products_
-* [Blur Page - A browser extension to hide sensitive information on a web page](https://blur.page)
-* [Check Browsers Support - A browser extension to check browser compatibility without leaving your tab](https://checkbrowsers.support)
-* [Fake Numbers - Generate fake and valid numbers](https://fakenumbers.io)
-* [Form Validation - The best validation library for JavaScript](https://formvalidation.io)
-* [Intersection Observer Examples - Practical, real world examples of Intersection Observer](https://intersectionobserver.io)
-* [React PDF Viewer - A React component to view a PDF document](https://react-pdf-viewer.dev)
-
-_Resources_
-* [1LOC - Favorite JavaScript utilities in single line of code](https://1loc.dev)
-* [CSS Layout - A collection of popular layouts and patterns made with CSS](https://csslayout.io)
-* [HTML DOM - How to manage HTML DOM with vanilla JavaScript](https://htmldom.dev)
-* [Responsive Design Patterns - A collection of patterns to create a responsive web page](https://responsive.page)
-* [Super tiny, quick tips, tricks and best practices of front-end development](https://getfrontend.tips)
-* [this VS that - The differences between ___ and ___ in the front-end development](https://thisthat.dev)

README.md

@@ -13,20 +13,20 @@ const main = () => {
     }
 
     const pattern = args[2];
-    
+
     (async () => {
-        const browser = await puppeteer.launch();    
-           
+        const browser = await puppeteer.launch();
+
         const page = await browser.newPage();
-        await page.goto(`http://localhost:1234/patterns/${pattern}`);
+        await page.goto(`http://localhost:3000/${pattern}`);
 
         await page.waitForSelector('.demo__live');
         const element = await page.$('.demo__live');
         await element.screenshot({
-            path: `public/assets/patterns/${pattern}.png`
+            path: `public/assets/patterns/${pattern}.png`,
         });
         await page.close();
-        
+
         await browser.close();
     })();
 };