From b3609fc8d2ad0c24df9e4068e79cb050d845211c Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Fri, 15 Nov 2019 15:23:58 +0700 Subject: [PATCH 1/7] Add GA --- client/index.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/client/index.html b/client/index.html index 1186c4f..6ff7e3b 100644 --- a/client/index.html +++ b/client/index.html @@ -20,5 +20,12 @@
+ + From 3668a6ee3aaa92a87eba4eab9a995d4c2963e592 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Fri, 15 Nov 2019 15:40:03 +0700 Subject: [PATCH 2/7] Add a button to flip between demo/source --- client/layouts/Centering.jsx | 15 ++++++++---- client/placeholders/BrowserFrame.jsx | 35 ++++++++++++++++++++++++---- 2 files changed, 41 insertions(+), 9 deletions(-) diff --git a/client/layouts/Centering.jsx b/client/layouts/Centering.jsx index 2ed71a4..958a723 100644 --- a/client/layouts/Centering.jsx +++ b/client/layouts/Centering.jsx @@ -6,11 +6,16 @@ import BrowserFrame from '../placeholders/BrowserFrame'; const Centering = () => { return ( - -
-
CENTER
-
- + +
CENTER
+ + } + source={ +
source
+ } + /> ); }; diff --git a/client/placeholders/BrowserFrame.jsx b/client/placeholders/BrowserFrame.jsx index 2691ed6..5d3c753 100644 --- a/client/placeholders/BrowserFrame.jsx +++ b/client/placeholders/BrowserFrame.jsx @@ -1,15 +1,42 @@ -import React from 'react'; +import React, { useState } from 'react'; + +const BrowserFrame = ({ content, source }) => { + const [isContentActive, setContentActive] = useState(true); + const flip = () => setContentActive(isActive => !isActive); -const BrowserFrame = ({ children }) => { return (
+
+ + {isContentActive ? 'Source' : 'Demo'} + +
-
- {children} +
+
+ {content} +
+
+ {source} +
); From 73587005ff7c8725adaf25e6488eb05febd7b6db Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Fri, 15 Nov 2019 16:31:03 +0700 Subject: [PATCH 3/7] Highlight sample code --- client/SampleCode.jsx | 13 +++++++++++++ client/helpers/highlight.js | 11 +++++++++++ package-lock.json | 5 +++++ package.json | 1 + 4 files changed, 30 insertions(+) create mode 100644 client/SampleCode.jsx create mode 100755 client/helpers/highlight.js diff --git a/client/SampleCode.jsx b/client/SampleCode.jsx new file mode 100644 index 0000000..da4b24f --- /dev/null +++ b/client/SampleCode.jsx @@ -0,0 +1,13 @@ +import React from 'react'; + +import highlight from './helpers/highlight'; + +const SampleCode = ({ code, lang }) => { + return code === '' + ? <> + : ( + 
+            );
+};
+
+export default SampleCode;
diff --git a/client/helpers/highlight.js b/client/helpers/highlight.js
new file mode 100755
index 0000000..84b7868
--- /dev/null
+++ b/client/helpers/highlight.js
@@ -0,0 +1,11 @@
+import hljs from 'highlight.js';
+
+const highlight = (input, language) => {
+    const lang = language || 'html';
+    const { value } = hljs.highlight(lang, input);
+    const highlighted = value.replace('&', '&').trim();
+
+    return `${highlighted}`;
+};
+
+export default highlight;
diff --git a/package-lock.json b/package-lock.json
index 77dd45f..9b6c0cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4137,6 +4137,11 @@
                 "util-deprecate": "^1.0.2"
             }
         },
+        "highlight.js": {
+            "version": "9.16.2",
+            "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.16.2.tgz",
+            "integrity": "sha512-feMUrVLZvjy0oC7FVJQcSQRqbBq9kwqnYE4+Kj9ZjbHh3g+BisiPgF49NyQbVLNdrL/qqZr3Ca9yOKwgn2i/tw=="
+        },
         "history": {
             "version": "4.10.1",
             "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
diff --git a/package.json b/package.json
index e789d73..b576330 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
         "postbuild": "react-snap"
     },
     "dependencies": {
+        "highlight.js": "^9.16.2",
         "react": "^16.12.0",
         "react-dom": "^16.12.0",
         "react-router-dom": "^5.1.2",

From 20e8330fa1bb7de51ef258f1480be4c53b38f633 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen 
Date: Fri, 15 Nov 2019 16:36:23 +0700
Subject: [PATCH 4/7] Fix incorrect button tag

---
 client/placeholders/BrowserFrame.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/placeholders/BrowserFrame.jsx b/client/placeholders/BrowserFrame.jsx
index 5d3c753..f3c6e70 100644
--- a/client/placeholders/BrowserFrame.jsx
+++ b/client/placeholders/BrowserFrame.jsx
@@ -11,9 +11,9 @@ const BrowserFrame = ({ content, source }) => {
                 

                 

                 

-                    
+                    
                 

             

             

Date: Fri, 15 Nov 2019 16:36:42 +0700
Subject: [PATCH 5/7] Add SampleCode component

---
 client/SampleCode.jsx       | 2 +-
 client/helpers/highlight.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/SampleCode.jsx b/client/SampleCode.jsx
index da4b24f..7e6925b 100644
--- a/client/SampleCode.jsx
+++ b/client/SampleCode.jsx
@@ -6,7 +6,7 @@ const SampleCode = ({ code, lang }) => {
     return code === ''
             ? <>
             : (
-                
+                
             );
 };
 
diff --git a/client/helpers/highlight.js b/client/helpers/highlight.js
index 84b7868..52d1620 100755
--- a/client/helpers/highlight.js
+++ b/client/helpers/highlight.js
@@ -5,7 +5,7 @@ const highlight = (input, language) => {
     const { value } = hljs.highlight(lang, input);
     const highlighted = value.replace('&', '&').trim();
 
-    return `${highlighted}`;
+    return `${highlighted}`;
 };
 
 export default highlight;

From 478297f11a28130fa960486b5785a2ebdebe144b Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen 
Date: Fri, 15 Nov 2019 16:37:08 +0700
Subject: [PATCH 6/7] Highlight centering sample code

---
 client/index.html                    |  1 -
 client/layouts/Centering.jsx         | 15 ++++++++++++++-
 client/placeholders/BrowserFrame.jsx |  4 ++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/client/index.html b/client/index.html
index 6ff7e3b..a72b7a4 100644
--- a/client/index.html
+++ b/client/index.html
@@ -11,7 +11,6 @@
         -webkit-font-smoothing: antialiased;
     }
     code {
-        border-radius: 4px;
         font-family: 'Source Code Pro', monospace;
         font-size: 14px;
     }
diff --git a/client/layouts/Centering.jsx b/client/layouts/Centering.jsx
index 958a723..db6ff1c 100644
--- a/client/layouts/Centering.jsx
+++ b/client/layouts/Centering.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import DetailsLayout from '../DetailsLayout';
 import BrowserFrame from '../placeholders/BrowserFrame';
+import SampleCode from '../SampleCode';
 
 const Centering = () => {
     return (
@@ -13,7 +14,19 @@ const Centering = () => {
                     

                 }
                 source={
-                    
source

+
+    CENTER
+

+`}
+/>
                 }
             />
         
diff --git a/client/placeholders/BrowserFrame.jsx b/client/placeholders/BrowserFrame.jsx
index f3c6e70..398cd86 100644
--- a/client/placeholders/BrowserFrame.jsx
+++ b/client/placeholders/BrowserFrame.jsx
@@ -6,12 +6,12 @@ const BrowserFrame = ({ content, source }) => {
 
     return (
         

-            

+            

                 

                 

                 

                 

-                    
                 


From 569bea124001301bd484ff03eb9680cb8813c011 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen 
Date: Fri, 15 Nov 2019 16:56:11 +0700
Subject: [PATCH 7/7] Add title

---
 client/Home.jsx              | 3 +++
 client/layouts/Centering.jsx | 3 +++
 client/useDocumentTitle.js   | 9 +++++++++
 3 files changed, 15 insertions(+)
 create mode 100644 client/useDocumentTitle.js

diff --git a/client/Home.jsx b/client/Home.jsx
index f7063b5..70991a8 100644
--- a/client/Home.jsx
+++ b/client/Home.jsx
@@ -3,8 +3,11 @@ import { Link } from 'react-router-dom';
 
 import CenterCover from './covers/CenterCover';
 import Layout from './Layout';
+import useDocumentTitle from './useDocumentTitle';
 
 const Home = () => {
+    useDocumentTitle('CSS Layout');
+
     return (
         
             
Pattern

diff --git a/client/layouts/Centering.jsx b/client/layouts/Centering.jsx
index db6ff1c..1714990 100644
--- a/client/layouts/Centering.jsx
+++ b/client/layouts/Centering.jsx
@@ -3,8 +3,11 @@ import React from 'react';
 import DetailsLayout from '../DetailsLayout';
 import BrowserFrame from '../placeholders/BrowserFrame';
 import SampleCode from '../SampleCode';
+import useDocumentTitle from '../useDocumentTitle';
 
 const Centering = () => {
+    useDocumentTitle('CSS Layout ∙ Centering');
+
     return (
         
              {
+    useEffect(() => {
+        document.title = title;
+    }, [title]);
+};
+
+export default useDocumentTitle;