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/SampleCode.jsx b/client/SampleCode.jsx new file mode 100644 index 0000000..7e6925b --- /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..52d1620
--- /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/client/index.html b/client/index.html
index 1186c4f..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;
     }
@@ -20,5 +19,12 @@
 
     

     
+
+
 
 
diff --git a/client/layouts/Centering.jsx b/client/layouts/Centering.jsx
index 2ed71a4..1714990 100644
--- a/client/layouts/Centering.jsx
+++ b/client/layouts/Centering.jsx
@@ -2,15 +2,36 @@ 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 (
         
-            
-                

-                    
CENTER

-                

-            
+            
+                        
CENTER

+                    
+                }
+                source={
+
+    CENTER
+
+`}
+/>
+                }
+            />
         
     );
 };
diff --git a/client/placeholders/BrowserFrame.jsx b/client/placeholders/BrowserFrame.jsx
index 2691ed6..398cd86 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 (
         

-            

+            

                 

                 

                 

+                

+                    
+                

             

-            

-                {children}
+            

+                

+                    {content}
+                

+                

+                    {source}
+                

             

         

     );
diff --git a/client/useDocumentTitle.js b/client/useDocumentTitle.js
new file mode 100644
index 0000000..17066ee
--- /dev/null
+++ b/client/useDocumentTitle.js
@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+const useDocumentTitle = (title) => {
+    useEffect(() => {
+        document.title = title;
+    }, [title]);
+};
+
+export default useDocumentTitle;
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",