Some layout tweaks

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<SampleCodeProps> = ({ code, lang }) => {
+const SampleCode: React.FC<SampleCodeProps> = ({ code, fullHeight = false, lang }) => {
     return code === ''
             ? <></>
             : (
                 <pre
-                    style={{ height: '100%', lineHeight: 1.5, margin: 0 }}
+                    className="hljs"
+                    style={{
+                        height: fullHeight ? '100%' : 'auto',
+                        lineHeight: 1.5,
+                        margin: 0,
+                    }}
                     dangerouslySetInnerHTML={{ __html: highlight(code, lang) }}
                 />
             );

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 `<code style="height: 100%" class="hljs ${lang}">${highlighted}</code>`;
+    return `<code class="${lang}">${highlighted}</code>`;
 };
 
 export default highlight;

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 {

client/layouts/DetailsLayout.tsx

@@ -49,9 +49,6 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
                 style={{
                     border: '1px solid rgba(0, 0, 0, 0.2)',
                     borderBottomColor: 'transparent',
-                    borderTopLeftRadius: '16px',
-                    borderTopRightRadius: '16px',
-                    marginTop: '32px',
                     position: 'relative',
                 }}
             >

client/layouts/Footer.tsx

@@ -5,8 +5,8 @@ const Footer: React.FC<{}> = () => {
         <div
             style={{
                 border: '1px solid rgba(0, 0, 0, 0.2)',
-                borderBottomLeftRadius: '8px',
-                borderBottomRightRadius: '8px',
+                // borderBottomLeftRadius: '8px',
+                // borderBottomRightRadius: '8px',
                 display: 'flex',
             }}
         >
@@ -32,7 +32,6 @@ const Footer: React.FC<{}> = () => {
                 >
                     <li style={{ alignItems: 'center', display: 'flex' }}>
                         <h3
-                            className="hljs-selector-class"
                             style={{
                                 fontSize: '20px',
                                 fontWeight: 700,
@@ -107,7 +106,6 @@ const Footer: React.FC<{}> = () => {
                 >
                     <li style={{ alignItems: 'center', display: 'flex' }}>
                         <h3
-                            className="hljs-selector-class"
                             style={{
                                 fontSize: '20px',
                                 fontWeight: 700,

client/layouts/Layout.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 
+import SampleCode from '../components/SampleCode';
 import Footer from './Footer';
 
 const Layout: React.FC<{}> = ({ children }) => {
@@ -11,66 +12,26 @@ const Layout: React.FC<{}> = ({ children }) => {
         <div style={{ margin: '0 auto 64px auto', maxWidth: '1024px' }}>
             {children}
             <Footer />
-            <ul
-                style={{
-                    fontSize: '14px',
-                    lineHeight: 1.5,
-                    listStyleType: 'none',
-                    margin: '16px 0',
-                    padding: 0,
-                }}
-            >
-                <li>this</li>
-                <li style={{ marginLeft: '16px' }}>
-                    .madeWith([
-                        <a href="https://reactjs.org" style={{ textDecoration: 'none' }}>react</a>,
-                        <a href="https://www.typescriptlang.org" style={{ textDecoration: 'none' }}>typescript</a>
-                    ])
-                </li>
-                <li style={{ marginLeft: '16px' }}>
-                    .then(r => lint(
-                        <a href="https://github.com/palantir/tslint" style={{ textDecoration: 'none' }}>
-                            tslint
-                        </a>
-                    ))
-                </li>
-                <li style={{ marginLeft: '16px' }}>
-                    .then(r => lazyLoad(
-                        <a href="https://github.com/smooth-code/loadable-components" style={{ textDecoration: 'none' }}>
-                            @loadable/component
-                        </a>
-                    ))
-                </li>
-                <li style={{ marginLeft: '16px' }}>
-                    .then(r => optimizeAndBundle(
-                        <a href="https://webpack.js.org" style={{ textDecoration: 'none' }}>webpack</a>
-                    ))
-                </li>
-                <li style={{ marginLeft: '16px' }}>
-                    .then(r => exportHtml(
-                        <a href="https://github.com/stereobooster/react-snap" style={{ textDecoration: 'none' }}>
-                            react-snap
-                        </a>
-                    ))
-                </li>
-                <li style={{ marginLeft: '16px' }}>
-                    .then(r => deploy(
-                        <a href="https://www.netlify.com" style={{ textDecoration: 'none' }}>Netlify</a>
-                    ))
-                </li>
-                <li style={{ marginLeft: '16px' }}>.then(r => &#123;</li>
-                <li style={{ marginLeft: '32px' }}>expect(r).is(scalableCode);</li>
-                <li style={{ marginLeft: '32px' }}>expect(r).is(superFastWebsite);</li>
-                <li style={{ marginLeft: '32px' }}>expect(r).is(seoFriendly);</li>
-                <li style={{ marginLeft: '16px' }}>&#125;)</li>
-                <li style={{ marginLeft: '16px' }}>
-                    .finally(() => &#123;
-                        <a href="https://github.com/phuoc-ng/csslayout" style={{ textDecoration: 'none' }}>
-                            /&#42; Give me 1 star &#42;/
-                        </a>
-                    &#125;) 🎉
-                </li>
-            </ul>
+            <div>
+                <SampleCode
+                    lang='javascript'
+                    code={`
+this
+    .madeWith([react,typescript])
+    .then((r) => 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 */
+`}
+                />
+            </div>
         </div>
     );
 };

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',
                 }}

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',
                 }}
             >

client/placeholders/BrowserFrame.tsx

@@ -102,13 +102,14 @@ const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
                         height: '100%',
                         left: 0,
                         opacity: isContentActive ? 0 : 1,
+                        overflow: 'scroll',
                         position: 'absolute',
                         top: 0,
                         transform: 'rotateY(180deg)',
                         width: '100%',
                     }}
                 >
-                    <SampleCode lang="html" code={source} />
+                    <SampleCode fullHeight={true} lang="html" code={source} />
                 </div>
             </div>
         </div>

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' {}

vendors/highlight.js@9.12.0/dracula.min.css

@@ -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}

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}

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',