From 86eb00f7da4b621631004a02d9ddd9cfcf6c4acd Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Fri, 29 Nov 2019 10:10:38 +0700 Subject: [PATCH] Some layout tweaks --- client/components/SampleCode.tsx | 10 ++- client/helpers/highlight.ts | 4 +- client/index.css | 2 - client/layouts/DetailsLayout.tsx | 3 - client/layouts/Footer.tsx | 6 +- client/layouts/Layout.tsx | 81 ++++++--------------- client/pages/ExplorePage.tsx | 2 - client/pages/HomePage.tsx | 2 - client/placeholders/BrowserFrame.tsx | 3 +- client/types/hightlight.d.ts | 4 +- vendors/highlight.js@9.12.0/dracula.min.css | 1 - vendors/highlight.js@9.12.0/theme.min.css | 1 + webpack.config.js | 2 +- 13 files changed, 40 insertions(+), 81 deletions(-) delete mode 100644 vendors/highlight.js@9.12.0/dracula.min.css create mode 100644 vendors/highlight.js@9.12.0/theme.min.css diff --git a/client/components/SampleCode.tsx b/client/components/SampleCode.tsx index c210a4b..8359734 100644 --- a/client/components/SampleCode.tsx +++ b/client/components/SampleCode.tsx @@ -4,15 +4,21 @@ import highlight from '../helpers/highlight'; interface SampleCodeProps { code: string; + fullHeight?: boolean; lang: string; } -const SampleCode: React.FC = ({ code, lang }) => { +const SampleCode: React.FC = ({ code, fullHeight = false, lang }) => { return code === '' ? <> : ( 
             );
diff --git a/client/helpers/highlight.ts b/client/helpers/highlight.ts
index 44884ce..96a2ff0 100755
--- a/client/helpers/highlight.ts
+++ b/client/helpers/highlight.ts
@@ -1,6 +1,8 @@
 import hljs from 'highlight.js/lib/highlight'; // tslint:disable-line
+import javascript from 'highlight.js/lib/languages/javascript'; // tslint:disable-line
 import html from 'highlight.js/lib/languages/xml'; // tslint:disable-line
 
+hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('html', html);
 
 const highlight = (input: string, language: string) => {
@@ -8,7 +10,7 @@ const highlight = (input: string, language: string) => {
     const { value } = hljs.highlight(lang, input);
     const highlighted = value.replace('&', '&').trim();
 
-    return `${highlighted}`;
+    return `${highlighted}`;
 };
 
 export default highlight;
diff --git a/client/index.css b/client/index.css
index 812caae..1185715 100644
--- a/client/index.css
+++ b/client/index.css
@@ -10,8 +10,6 @@ input[type="email"], input[type="number"], input[type="password"], input[type="t
 }
 .hljs, code {
     font-family: 'Source Code Pro', monospace;
-}
-code {
     font-size: 14px;
 }
 .drop-cap:first-letter {
diff --git a/client/layouts/DetailsLayout.tsx b/client/layouts/DetailsLayout.tsx
index 63782e5..3fcd9dd 100644
--- a/client/layouts/DetailsLayout.tsx
+++ b/client/layouts/DetailsLayout.tsx
@@ -49,9 +49,6 @@ const DetailsLayout: React.FC = ({ title, children }) => {
                 style={{
                     border: '1px solid rgba(0, 0, 0, 0.2)',
                     borderBottomColor: 'transparent',
-                    borderTopLeftRadius: '16px',
-                    borderTopRightRadius: '16px',
-                    marginTop: '32px',
                     position: 'relative',
                 }}
             >
diff --git a/client/layouts/Footer.tsx b/client/layouts/Footer.tsx
index dee9e6f..e9caff6 100644
--- a/client/layouts/Footer.tsx
+++ b/client/layouts/Footer.tsx
@@ -5,8 +5,8 @@ const Footer: React.FC<{}> = () => {
         

@@ -32,7 +32,6 @@ const Footer: React.FC<{}> = () => {
                 >
                     
  • 
                         
     = () => {
                 >
                     
  • 
                         
     = ({ children }) => {
@@ -11,66 +12,26 @@ const Layout: React.FC<{}> = ({ children }) => {
         
    
             {children}
             
    
-            
+            
    
+                 lint(r))                           /* tslint */
+    .then((r) => lazyLoad(r))                       /* @loadable/component */
+    .then((r) => optimizeAndBundle(r))              /* webpack */
+    .then((r) => exportHtml(r))                     /* react-snap */
+    .then((r) => deploy(r))                         /* Netlify */
+    .then((r) => {
+        expect(r).is(scalableCode);
+        expect(r).is(superFastWebsite);
+        expect(r).is(seoFriendly);
+    })
+    .finally(() => {/* Give me 1 star */}) 🎉       /* https://github.com/phuoc-ng/csslayout */
+`}
+                />
+            
    
         
    
     );
 };
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 57bb5cf..ac192ac 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -30,8 +30,6 @@ const ExplorePage = () => {
                 style={{
                     border: '1px solid rgba(0, 0, 0, 0.2)',
                     borderBottomColor: 'transparent',
-                    borderTopLeftRadius: '16px',
-                    borderTopRightRadius: '16px',
                     marginTop: '32px',
                     position: 'relative',
                 }}
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 3ffb173..2e6183c 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -17,8 +17,6 @@ const HomePage = () => {
                 style={{
                     border: '1px solid rgba(0, 0, 0, 0.2)',
                     borderBottomColor: 'transparent',
-                    borderTopLeftRadius: '8px',
-                    borderTopRightRadius: '8px',
                     marginTop: '64px',
                 }}
             >
diff --git a/client/placeholders/BrowserFrame.tsx b/client/placeholders/BrowserFrame.tsx
index 3a35c38..1f85c28 100644
--- a/client/placeholders/BrowserFrame.tsx
+++ b/client/placeholders/BrowserFrame.tsx
@@ -102,13 +102,14 @@ const BrowserFrame: React.FC = ({ content, source }) => {
                         height: '100%',
                         left: 0,
                         opacity: isContentActive ? 0 : 1,
+                        overflow: 'scroll',
                         position: 'absolute',
                         top: 0,
                         transform: 'rotateY(180deg)',
                         width: '100%',
                     }}
                 >
-                    
+                    
                 
    • 
             
         
diff --git a/client/types/hightlight.d.ts b/client/types/hightlight.d.ts
index 257398c..981d895 100644
--- a/client/types/hightlight.d.ts
+++ b/client/types/hightlight.d.ts
@@ -7,5 +7,5 @@ declare module 'highlight.js/lib/highlight' {
     function registerLanguage(name: string, language: any): void;
 }
 
-declare module 'highlight.js/lib/languages/xml' {
-}
+declare module 'highlight.js/lib/languages/javascript' {}
+declare module 'highlight.js/lib/languages/xml' {}
diff --git a/vendors/highlight.js@9.12.0/dracula.min.css b/vendors/highlight.js@9.12.0/dracula.min.css
deleted file mode 100644
index 8e84c0c..0000000
--- a/vendors/highlight.js@9.12.0/dracula.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.hljs{display:block;overflow-x:auto;padding:0.5em;background:#282a36}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-section,.hljs-link{color:#8be9fd}.hljs-function .hljs-keyword{color:#ff79c6}.hljs,.hljs-subst{color:#f8f8f2}.hljs-string,.hljs-title,.hljs-name,.hljs-type,.hljs-attribute,.hljs-symbol,.hljs-bullet,.hljs-addition,.hljs-variable,.hljs-template-tag,.hljs-template-variable{color:#f1fa8c}.hljs-comment,.hljs-quote,.hljs-deletion,.hljs-meta{color:#6272a4}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-title,.hljs-section,.hljs-doctag,.hljs-type,.hljs-name,.hljs-strong{font-weight:bold}.hljs-emphasis{font-style:italic}
\ No newline at end of file
diff --git a/vendors/highlight.js@9.12.0/theme.min.css b/vendors/highlight.js@9.12.0/theme.min.css
new file mode 100644
index 0000000..16e4b1d
--- /dev/null
+++ b/vendors/highlight.js@9.12.0/theme.min.css
@@ -0,0 +1 @@
+.hljs{display:block;overflow-x:auto;padding:.5em;background:#282828}.hljs,.hljs-subst{color:#ebdbb2}.hljs-deletion,.hljs-formula,.hljs-keyword,.hljs-link,.hljs-selector-tag{color:#fb4934}.hljs-built_in,.hljs-emphasis,.hljs-name,.hljs-quote,.hljs-strong,.hljs-title,.hljs-variable{color:#83a598}.hljs-attr,.hljs-params,.hljs-template-tag,.hljs-type{color:#fabd2f}.hljs-builtin-name,.hljs-doctag,.hljs-literal,.hljs-number{color:#8f3f71}.hljs-code,.hljs-meta,.hljs-regexp,.hljs-selector-id,.hljs-template-variable{color:#fe8019}.hljs-addition,.hljs-meta-string,.hljs-section,.hljs-selector-attr,.hljs-selector-class,.hljs-string,.hljs-symbol{color:#b8bb26}.hljs-attribute,.hljs-bullet,.hljs-class,.hljs-function,.hljs-function .hljs-keyword,.hljs-meta-keyword,.hljs-selector-pseudo,.hljs-tag{color:#8ec07c}.hljs-comment{color:#928374}.hljs-link_label,.hljs-literal,.hljs-number{color:#d3869b}.hljs-comment,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-strong,.hljs-tag{font-weight:bold}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index b3b7f20..1de72e4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -22,7 +22,7 @@ module.exports = {
     entry: {
         'vendor-styles': [
             './vendors/normalize.css@8.0.1/normalize.css',
-            './vendors/highlight.js@9.12.0/dracula.min.css',
+            './vendors/highlight.js@9.12.0/theme.min.css',
         ],
         // The CSS for client should come after `vendor-styles`
         client: './client/index.tsx',