From 5f1b3a61b8f3348169810f3fda530bbf77ff9ea1 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Wed, 27 Nov 2019 22:12:14 +0700
Subject: [PATCH 1/2] Add feature section to the homepage

---
 README.md          | 10 +++++++---
 client/Explore.tsx |  7 +++++--
 client/Home.tsx    | 22 ++++++++++++++++++++++
 client/index.css   |  9 +++++++++
 4 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index c172850..95120c7 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@ I usually don't want to include all of them in my project.
 So I collect most popular layouts and components that can be built with pure CSS.
 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 to be picked and customized easily for each specific need.
 By composing them, you can have any possible layout that exists in the real life.
 
 The entire website is powered by
@@ -33,8 +33,12 @@ this
     .then(r => optimizeAndBundle(webpack))
     .then(r => exportHtml(react-snap))
     .then(r => deploy(Netlify))
-    .assert([scalableCode, superFastWebsite, seoFriendly])
-    .finally(/* Give me 1 star */) 🎉
+    .then(r => {
+        expect(r).is(scalableCode);
+        expect(r).is(superFastWebsite);
+        expect(r).is(seoFriendly);
+    })
+    .finally(() => {/* Give me 1 star */}) 🎉
 ~~~
 
 ## Running it on local
diff --git a/client/Explore.tsx b/client/Explore.tsx
index d12e90d..d9beaf2 100644
--- a/client/Explore.tsx
+++ b/client/Explore.tsx
@@ -58,13 +58,16 @@ const Home = () => {
                         fontSize: '24px',
                         fontWeight: 300,
                         lineHeight: 1.5,
-                        margin: 0,
-                        padding: '32px 0',
+                        margin: '32px 0 16px 0',
+                        padding: '0',
                         textAlign: 'center',
                     }}
                 >
                     Here is the collection of patterns
                 </h2>
+                <div style={{ marginBottom: '32px', textAlign: 'center' }}>
+                    All covers you see in this page are made with CSS only. Inspect them! 🎉
+                </div>
 
                 <section>
                     <Heading title="Layouts" />
diff --git a/client/Home.tsx b/client/Home.tsx
index a90be5b..f4c1ae7 100644
--- a/client/Home.tsx
+++ b/client/Home.tsx
@@ -55,6 +55,28 @@ const Home = () => {
                         a collection of popular layouts and patterns made with CSS
                     </h2>
 
+                    <div style={{ display: 'flex', lineHeight: 1.5 }}>
+                        <div style={{ flex: 1, padding: '24px'}} className="drop-cap">
+                            <div style={{ marginBottom: '16px' }}>
+                                Components, patterns and layouts are things you have to deal with everyday.
+                            </div>
+                            <div>There are a lot of CSS frameworks that provide rich set of layouts and patterns,
+                            but I usually don't want to include all of them in my project.</div>
+                        </div>
+                        <div style={{ flex: 1, padding: '24px'}} className="drop-cap">
+                            <div style={{ marginBottom: '16px' }}>
+                                So that I collect most popular layouts and patterns that can be built with pure CSS.
+                            </div>
+                            <div>They are powered by modern CSS features such as flexbox and CSS grid.</div>
+                        </div>
+                        <div style={{ flex: 1, padding: '24px'}} className="drop-cap">
+                            <div style={{ marginBottom: '16px' }}>
+                                Starting with the most basic part, you can customize easily for each specific need.
+                            </div>
+                            <div>By composing them, you can have any possible layout that exists in the real life.</div>
+                        </div>
+                    </div>
+
                     <div
                         className="hljs"
                         style={{
diff --git a/client/index.css b/client/index.css
index d5c1d82..812caae 100644
--- a/client/index.css
+++ b/client/index.css
@@ -14,3 +14,12 @@ input[type="email"], input[type="number"], input[type="password"], input[type="t
 code {
     font-size: 14px;
 }
+.drop-cap:first-letter {
+    border: 2px solid;
+    float: left;
+    font-size: 64px;
+    font-weight: 700;
+    line-height: 1;
+    margin: 0 8px 0 0;
+    padding: 0 8px;    
+}

From 0d4e44405a93275123ab5ba38e587ad91d3294d2 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Wed, 27 Nov 2019 23:41:20 +0700
Subject: [PATCH 2/2] Add drop area

---
 client/App.tsx                        |  1 +
 client/Explore.tsx                    |  1 +
 client/Home.tsx                       |  1 +
 client/constants/Pattern.ts           |  1 +
 client/patterns/drop-area/Cover.tsx   | 40 ++++++++++++++++++
 client/patterns/drop-area/Details.tsx | 61 +++++++++++++++++++++++++++
 public/sitemap.xml                    |  1 +
 7 files changed, 106 insertions(+)
 create mode 100644 client/patterns/drop-area/Cover.tsx
 create mode 100644 client/patterns/drop-area/Details.tsx

diff --git a/client/App.tsx b/client/App.tsx
index 674f6c6..bb5912c 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -22,6 +22,7 @@ const App = () => {
                 <Route exact={true} path='/docked-at-corner'><DetailsLoader pattern={Pattern.DockedAtCorner} /></Route>
                 <Route exact={true} path='/dot-leader'><DetailsLoader pattern={Pattern.DotLeader} /></Route>
                 <Route exact={true} path='/dot-navigation'><DetailsLoader pattern={Pattern.DotNavigation} /></Route>
+                <Route exact={true} path='/drop-area'><DetailsLoader pattern={Pattern.DropArea} /></Route>
                 <Route exact={true} path='/feature-list'><DetailsLoader pattern={Pattern.FeatureList} /></Route>
                 <Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern={Pattern.FixedAtCorner} /></Route>
                 <Route exact={true} path='/holy-grail'><DetailsLoader pattern={Pattern.HolyGrail} /></Route>
diff --git a/client/Explore.tsx b/client/Explore.tsx
index d9beaf2..51a6ace 100644
--- a/client/Explore.tsx
+++ b/client/Explore.tsx
@@ -93,6 +93,7 @@ const Home = () => {
                         <CoverCard pattern={Pattern.DockedAtCorner} />
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />
+                        <CoverCard pattern={Pattern.DropArea} />
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
                         <CoverCard pattern={Pattern.InputAddOn} />
diff --git a/client/Home.tsx b/client/Home.tsx
index f4c1ae7..f7abc74 100644
--- a/client/Home.tsx
+++ b/client/Home.tsx
@@ -205,6 +205,7 @@ const Home = () => {
                         <CoverCard pattern={Pattern.DockedAtCorner} />
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />
+                        <CoverCard pattern={Pattern.DropArea} />
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
                         <CoverCard pattern={Pattern.InputAddOn} />
diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index f78e91b..921e78e 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -7,6 +7,7 @@ enum Pattern {
     DockedAtCorner = 'Docked at corner',
     DotLeader = 'Dot leader',
     DotNavigation = 'Dot navigation',
+    DropArea = 'Drop area',
     FeatureList = 'Feature list',
     FixedAtCorner = 'Fixed at corner',
     HolyGrail = 'Holy grail',
diff --git a/client/patterns/drop-area/Cover.tsx b/client/patterns/drop-area/Cover.tsx
new file mode 100644
index 0000000..7575374
--- /dev/null
+++ b/client/patterns/drop-area/Cover.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        border: '4px dashed rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        width: '100%',
+                    }}
+                >
+                    <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '50%' }}><Line /></div>
+                    <div style={{ width: '30%' }}><Line /></div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/drop-area/Details.tsx b/client/patterns/drop-area/Details.tsx
new file mode 100644
index 0000000..b7310f9
--- /dev/null
+++ b/client/patterns/drop-area/Details.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Drop area">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    alignItems: 'center',
+                                    border: '4px dashed rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    height: '80%',
+                                    justifyContent: 'center',
+                                    width: '80%',
+                                }}
+                            >
+                                <div style={{ width: '40%' }}>
+                                    <Block justify='center' numberOfBlocks={10} />
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Content is centered */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Border */
+    border: 4px dashed rgba(0, 0, 0, 0.3),
+    border-radius: 4px;
+">
+    ...
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 47dbba3..225bf0d 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -11,6 +11,7 @@
     <url><loc>https://csslayout.io/centering</loc></url>
     <url><loc>https://csslayout.io/docked-at-corner</loc></url>
     <url><loc>https://csslayout.io/dot-navigation</loc></url>
+    <url><loc>https://csslayout.io/drop-area</loc></url>
     <url><loc>https://csslayout.io/feature-list</loc></url>
     <url><loc>https://csslayout.io/fixed-at-corner</loc></url>
     <url><loc>https://csslayout.io/input-addon</loc></url>