Merge pull request #61 from phuoc-ng/upload

Add more patterns

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/constants/Pattern.ts

@@ -1,4 +1,5 @@
 enum Pattern {
+    AvatarList = 'Avatar list',
     Badge = 'Badge',
     Breadcrumb = 'Breadcrumb',
     ButtonWithIcon = 'Button with icon',
@@ -8,6 +9,8 @@ enum Pattern {
     DotLeader = 'Dot leader',
     DotNavigation = 'Dot navigation',
     DropArea = 'Drop area',
+    DropCap = 'Drop cap',
+    Dropdown = 'Dropdown',
     FeatureList = 'Feature list',
     FixedAtCorner = 'Fixed at corner',
     FloatingLabel = 'Floating label',
@@ -18,6 +21,7 @@ enum Pattern {
     Modal = 'Modal',
     Notification = 'Notification',
     Pagination = 'Pagination',
+    PresenceIndicator = 'Presence indicator',
     PreviousNextButtons = 'Previous next buttons',
     PricingTable = 'Pricing table',
     PropertyList = 'Property list',
@@ -40,6 +44,7 @@ enum Pattern {
     Switch = 'Switch',
     Tab = 'Tab',
     TogglePasswordVisibility = 'Toggle password visibility',
+    UploadButton = 'Upload button',
     Wizard = 'Wizard',
 }
 

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',
                 }}
@@ -85,6 +83,7 @@ const ExplorePage = () => {
                     <Heading title="Patterns" />
 
                     <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
+                        <CoverCard pattern={Pattern.AvatarList} />
                         <CoverCard pattern={Pattern.Badge} />
                         <CoverCard pattern={Pattern.Breadcrumb} />
                         <CoverCard pattern={Pattern.ButtonWithIcon} />
@@ -94,6 +93,8 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />
                         <CoverCard pattern={Pattern.DropArea} />
+                        <CoverCard pattern={Pattern.DropCap} />
+                        <CoverCard pattern={Pattern.Dropdown} />
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
                         <CoverCard pattern={Pattern.FloatingLabel} />
@@ -103,6 +104,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Modal} />
                         <CoverCard pattern={Pattern.Notification} />
                         <CoverCard pattern={Pattern.Pagination} />
+                        <CoverCard pattern={Pattern.PresenceIndicator} />
                         <CoverCard pattern={Pattern.PreviousNextButtons} />
                         <CoverCard pattern={Pattern.PricingTable} />
                         <CoverCard pattern={Pattern.PropertyList} />
@@ -121,6 +123,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Switch} />
                         <CoverCard pattern={Pattern.Tab} />
                         <CoverCard pattern={Pattern.TogglePasswordVisibility} />
+                        <CoverCard pattern={Pattern.UploadButton} />
                         <CoverCard pattern={Pattern.Wizard} />
                     </div>
                 </section>

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',
                 }}
             >
@@ -197,6 +195,7 @@ const HomePage = () => {
                         <CoverCard pattern={Pattern.SplitScreen} />
                         <CoverCard pattern={Pattern.StickyFooter} />
                         <CoverCard pattern={Pattern.StickyHeader} />
+                        <CoverCard pattern={Pattern.AvatarList} />
                         <CoverCard pattern={Pattern.Badge} />
                         <CoverCard pattern={Pattern.Breadcrumb} />
                         <CoverCard pattern={Pattern.ButtonWithIcon} />
@@ -206,6 +205,8 @@ const HomePage = () => {
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />
                         <CoverCard pattern={Pattern.DropArea} />
+                        <CoverCard pattern={Pattern.DropCap} />
+                        <CoverCard pattern={Pattern.Dropdown} />
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
                         <CoverCard pattern={Pattern.FloatingLabel} />
@@ -215,6 +216,7 @@ const HomePage = () => {
                         <CoverCard pattern={Pattern.Modal} />
                         <CoverCard pattern={Pattern.Notification} />
                         <CoverCard pattern={Pattern.Pagination} />
+                        <CoverCard pattern={Pattern.PresenceIndicator} />
                         <CoverCard pattern={Pattern.PreviousNextButtons} />
                         <CoverCard pattern={Pattern.PricingTable} />
                         <CoverCard pattern={Pattern.PropertyList} />
@@ -233,6 +235,7 @@ const HomePage = () => {
                         <CoverCard pattern={Pattern.Switch} />
                         <CoverCard pattern={Pattern.Tab} />
                         <CoverCard pattern={Pattern.TogglePasswordVisibility} />
+                        <CoverCard pattern={Pattern.UploadButton} />
                         <CoverCard pattern={Pattern.Wizard} />
                     </div>
                 </section>

client/patterns/avatar-list/Cover.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                {
+                    Array(3).fill(null).map((_, i) => {
+                        return (
+                            <div key={i} style={{ marginLeft: '-4px' }}>
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: '#BBB',
+                                        borderRadius: '9999px',
+                                        boxShadow: '0 0 0 2px #FFF',
+                                        color: '#FFF',
+                                        display: 'flex',
+                                        fontSize: '12px',
+                                        height: '24px',
+                                        justifyContent: 'center',
+                                        width: '24px',
+                                    }}
+                                >
+                                    {i + 1}
+                                </div>
+                            </div>
+                        );
+                    })
+                }
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/avatar-list/Details.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Avatar: React.FC<{}> = ({ children }) => {
+    return (
+        <div
+            style={{
+                alignItems: 'center',
+                backgroundColor: '#BBB',
+                borderRadius: '9999px',
+                boxShadow: '0 0 0 4px #FFF',
+                color: '#FFF',
+                display: 'flex',
+                height: '48px',
+                justifyContent: 'center',
+                width: '48px',
+            }}
+        >
+            {children}
+        </div>
+    );
+};
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Avatar list">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ marginLeft: '-4px' }}><Avatar /></div>
+                            <div style={{ marginLeft: '-4px' }}><Avatar /></div>
+                            <div style={{ marginLeft: '-4px' }}><Avatar /></div>
+                            <div style={{ marginLeft: '-4px' }}><Avatar /></div>
+                            <div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    display: flex;
+">
+    <!-- Avatar item -->
+    <div style="
+        /* Nagative margin make avatar overlap to previous one */
+        margin-left: -4px;
+    ">
+        <div style="
+            /* Add a white curve between avatars */
+            box-shadow: 0 0 0 4px #FFF;
+
+            /* Content is centered */
+            align-items: center;
+            display: flex;
+            justify-content: center;
+
+            /* Rounded border */
+            border-radius: 9999px;
+        ">
+            <!-- Image -->
+            ...
+        </div>
+    </div>
+
+    <!-- Repeat other avatars -->
+    ...
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/docked-at-corner/Details.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
 import Heading from '../../components/Heading';
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -138,6 +140,7 @@ const Details: React.FC<{}> = () => {
                     </div>
                 </div>
             </section>
+            <RelatedPatterns patterns={[Pattern.PresenceIndicator]} />
         </DetailsLayout>
     );
 };

client/patterns/drop-cap/Cover.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import Circle from '../../placeholders/Circle';
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                    width: '100%',
+                }}
+            >
+                <div style={{ display: 'flex', height: '32px', width: '100%' }}>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            border: '2px dashed rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            marginRight: '8px',
+                            width: '32px',
+                        }}
+                    >
+                        <Circle />
+                    </div>
+                    <div style={{ flex: 1 }}>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '40%' }}><Line /></div>
+                    </div>
+                </div>
+                <div style={{ marginTop: '4px' }}>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '40%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/drop-cap/Details.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import './dropcap.css';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import Square from '../../placeholders/Square';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Drop cap">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ width: '256px' }}>
+                                <div className="p-drop-cap">
+                                    Cascading Style Sheets (CSS) is a style sheet language used for
+                                    describing the presentation of a document written in a markup
+                                    language like HTML. CSS is a cornerstone technology of the World Wide Web,
+                                    alongside HTML and JavaScript.
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<style>
+/* Styles for the first letter */
+.p-drop-cap:first-letter {
+    /* Display at the left */
+    float: left;
+    line-height: 1;
+
+    /* Spacing */
+    margin: 0 8px 0 0;
+    padding: 0 8px;
+
+    /* Optional */
+    font-size: 64px;
+    font-weight: 700;
+}
+</style>
+
+<div class="p-drop-cap">
+    ...
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/drop-cap/dropcap.css

@@ -0,0 +1,9 @@
+.p-drop-cap:first-letter {
+    border: 2px solid rgba(0, 0, 0, 0.3);
+    float: left;
+    font-size: 64px;
+    font-weight: 700;
+    line-height: 1;
+    margin: 0 8px 0 0;
+    padding: 0 8px; 
+}

client/patterns/dropdown/Cover.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+import Triangle from '../../placeholders/Triangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        height: '24px',
+                        justifyContent: 'flex-end',
+                        marginBottom: '4px',
+                        paddingRight: '4px',
+                        width: '60%',
+                    }}
+                >
+                    <Triangle corner='b' size={8} />
+                </div>
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        flex: 1,
+                        flexDirection: 'column',
+                        height: '100%',
+                        width: '80%',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            flex: 1,
+                            padding: '0 4px',
+                        }}
+                    >
+                        <Line />
+                    </div>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            flex: 1,
+                            padding: '0 4px',
+                        }}
+                    >
+                        <div style={{ width: '80%' }}><Line /></div>
+                    </div>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flex: 1,
+                            padding: '0 4px',
+                        }}
+                    >
+                        <div style={{ width: '60%' }}><Line /></div>
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/dropdown/Details.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+
+import './dropdown.css';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import Triangle from '../../placeholders/Triangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Dropdown">
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    Move the mouse over the button to see the dropdown.
+                </div>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                className="p-dropdown"
+                                style={{
+                                    position: 'relative',
+                                }}
+                            >
+                                <button
+                                    style={{
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                        height: '32px',
+                                        width: '128px',
+                                    }}
+                                >
+                                    <span style={{ flex: 1, marginRight: '8px' }}><Rectangle /></span>
+                                    <Triangle size={8} corner='b' />
+                                </button>
+
+                                <div
+                                    className="p-dropdown-content"
+                                    style={{
+                                        backgroundColor: '#FFF',
+                                        height: '200px',
+                                        left: 0,
+                                        paddingTop: '4px',
+                                        position: 'absolute',
+                                        top: '100%',
+                                        width: '200px',
+                                        zIndex: 9999,
+                                    }}
+                                >
+                                    <div
+                                        style={{
+                                            alignItems: 'center',
+                                            border: '1px solid rgba(0, 0, 0, 0.3)',
+                                            borderRadius: '4px',
+                                            display: 'flex',
+                                            height: '100%',
+                                            justifyContent: 'center',
+                                            padding: '16px',
+                                            width: '100%',
+                                        }}
+                                    >
+                                        <Block numberOfBlocks={10} justify='center' />
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                style={{
+                                    marginTop: '16px',
+                                    width: '256px',
+                                }}
+                            >
+                            <Block numberOfBlocks={20} justify='center' />
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<style>
+/* Hide the dropdown's content by default -->
+.dropdown-content {
+    display: none;
+}
+
+/* Show the content when hover on the container -->
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+</style>
+
+<div
+    class="dropdown"
+    style="
+        position: relative;
+    "
+>
+    <!-- The trigger element -->
+    <button>...</button>
+
+    <!-- The content -->
+    <div
+        class="dropdown-content"
+        style="
+            /* Position it right below the trigger element */
+            left: 0,
+            paddingTop: '4px',
+            position: 'absolute',
+            top: '100%',
+
+            /* It should be on the top of other elements */
+            backgroundColor: '#FFF',
+            zIndex: 9999,
+
+            /* Size */
+            height: '200px',
+            width: '200px',
+        "
+    >
+        ...
+    </div>
+</div>
+`}
+                />
+            </div>
+            <RelatedPatterns patterns={[Pattern.Menu]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/dropdown/dropdown.css

@@ -0,0 +1,7 @@
+.p-dropdown-content {
+    display: none;
+}
+
+.p-dropdown:hover .p-dropdown-content {
+    display: block;
+}

client/patterns/floating-label/Details.tsx

@@ -25,7 +25,7 @@ const Details: React.FC<{}> = () => {
                             }}
                         >
                             <div
-                                className="floating-container"
+                                className="p-floating-container"
                                 style={{
                                     border: '1px solid rgba(0, 0, 0, 0.3)',
                                     borderRadius: '4px',
@@ -59,11 +59,11 @@ const Details: React.FC<{}> = () => {
                     )}
                     source={`
 <style>
-.floating-container {
+.p-floating-container {
     position: relative;
 }
 
-.floating-container label {
+.p-floating-container label {
     /* Position the label */
     left: 8px;
     position: absolute;
@@ -75,14 +75,14 @@ const Details: React.FC<{}> = () => {
 }
 
 /* Show the label at desired position when the placeholder of input isn't shown */
-.floating-container input:not(:placeholder-shown) + label {
+.p-floating-container input:not(:placeholder-shown) + label {
     background: #FFF;
     transform: translate(0, -50%);
     opacity: 1;
 }
 </style>
 
-<div class="floating-container">
+<div class="p-floating-container">
     <!-- The input -->
     <input placeholder="Placeholder" />
 

client/patterns/floating-label/floating-label.css

@@ -1,8 +1,8 @@
-.floating-container label {
+.p-floating-container label {
     opacity: 0;
 }
 
-.floating-container input:not(:placeholder-shown) + label {
+.p-floating-container input:not(:placeholder-shown) + label {
     background: #FFF;
     transform: translate(0, -50%);
     opacity: 1;

client/patterns/menu/Details.tsx

@@ -33,7 +33,7 @@ const Details: React.FC<{}> = () => {
                                 }}
                             >
                                 <div
-                                    className="menu-item"
+                                    className="p-menu-item"
                                     style={{
                                         alignItems: 'center',
                                         display: 'flex',
@@ -44,7 +44,7 @@ const Details: React.FC<{}> = () => {
                                     <div style={{ width: '40%' }}><Rectangle /></div>
                                 </div>
                                 <div
-                                    className="menu-item"
+                                    className="p-menu-item"
                                     style={{
                                         alignItems: 'center',
                                         display: 'flex',
@@ -56,7 +56,7 @@ const Details: React.FC<{}> = () => {
                                     <div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
                                 </div>
                                 <div
-                                    className="menu-item"
+                                    className="p-menu-item"
                                     style={{
                                         alignItems: 'center',
                                         display: 'flex',
@@ -69,7 +69,7 @@ const Details: React.FC<{}> = () => {
                                     <div>Ctrl + X</div>
                                 </div>
                                 <div
-                                    className="menu-item"
+                                    className="p-menu-item"
                                     style={{
                                         alignItems: 'center',
                                         display: 'flex',
@@ -82,7 +82,7 @@ const Details: React.FC<{}> = () => {
                                     <div>Ctrl + C</div>
                                 </div>
                                 <div
-                                    className="menu-item"
+                                    className="p-menu-item"
                                     style={{
                                         alignItems: 'center',
                                         display: 'flex',
@@ -95,7 +95,7 @@ const Details: React.FC<{}> = () => {
                                     <Circle />
                                 </div>
                                 <div
-                                    className="menu-item"
+                                    className="p-menu-item"
                                     style={{
                                         alignItems: 'center',
                                         display: 'flex',
@@ -112,7 +112,7 @@ const Details: React.FC<{}> = () => {
                                 </div>
                                 <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
                                 <div
-                                    className="menu-item"
+                                    className="p-menu-item"
                                     style={{
                                         alignItems: 'center',
                                         display: 'flex',

client/patterns/menu/menu.css

@@ -1,3 +1,3 @@
-.menu-item:hover {
+.p-menu-item:hover {
     background-color: rgba(0, 0, 0, 0.1);
 }

client/patterns/presence-indicator/Cover.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '9999px',
+                        height: '32px',
+                        position: 'relative',
+                        width: '32px',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: '#FF4136',
+                            borderRadius: '9999px',
+                            bottom: 0,
+                            height: '8px',
+                            position: 'absolute',
+                            right: 0,
+                            transform: 'translate(50%, 50%)',
+                            width: '8px',
+                        }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/presence-indicator/Details.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Presence indicator">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    height: '64px',
+                                    marginRight: '16px',
+                                    position: 'relative',
+                                    width: '64px',
+                                }}
+                            >
+                                <Circle size={64} />
+                                <div
+                                    style={{
+                                        backgroundColor: '#FF4136',
+                                        borderRadius: '9999px',
+                                        bottom: 0,
+                                        height: '16px',
+                                        position: 'absolute',
+                                        right: 0,
+                                        transform: 'translate(50%, 50%)',
+                                        width: '16px',
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    position: relative;
+">
+    <!-- Other element such as avatar -->
+    ...
+
+    <!-- The presense indicator -->
+    <div style="
+        /* Shown at the bottom right corner */
+        bottom: 0,
+        position: absolute;
+        right: 0;
+        transform: translate(50%, 50%);
+
+        /* Rounded border */
+        border-radius: 9999px;
+        height: 16px;
+        width: 16px;
+
+        /* Background color */
+        background-color: #FF4136;
+    " />
+</div>
+`}
+                />
+            </div>
+            <RelatedPatterns patterns={[Pattern.DockedAtCorner]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/rating/Details.tsx

@@ -18,7 +18,7 @@ const Details: React.FC<{}> = () => {
                                 justifyContent: 'center',
                             }}
                         >
-                            <div className="rating">
+                            <div className="p-rating">
                                 <Star isActive={false} />
                                 <Star isActive={false} />
                                 <Star isActive={false} />
@@ -29,7 +29,7 @@ const Details: React.FC<{}> = () => {
                     )}
                     source={`
 <style>
-.rating {
+.p-rating {
     /* Content is centered */
     align-items: center;
     display: flex;
@@ -40,7 +40,8 @@ const Details: React.FC<{}> = () => {
     font-size: 32px;
 }
 
-.rating .star:hover, .rating .star:hover ~ .star {
+.p-rating .p-rating-star:hover,
+.p-rating .p-rating-star:hover ~ .p-rating-star {
     color: transparent;
 }
 
@@ -48,15 +49,15 @@ const Details: React.FC<{}> = () => {
 Make all previous stars selected when hover on a star
 Note that we use \`flex-direction: row-reverse\` on the container
 */
-.rating .star:hover:before,
-.rating .star:hover ~ .star:before {
+.p-rating .p-rating-star:hover:before,
+.p-rating .p-rating-star:hover ~ .p-rating-star:before {
     color: #00449e;
     content: '\\2605';
     left: 0;
     position: absolute;
 }
 
-.star {
+.p-rating-star {
     /* Reset styles for button */
     background-color: transparent;
     border: transparent;
@@ -68,12 +69,12 @@ Note that we use \`flex-direction: row-reverse\` on the container
 }
 </style>
 
-<div class="rating">
-    <button class="star">☆</button>
-    <button class="star">☆</button>
-    <button class="star">☆</button>
-    <button class="star">☆</button>
-    <button class="star">★</button>
+<div class="p-rating">
+    <button class="p-rating-star">☆</button>
+    <button class="p-rating-star">☆</button>
+    <button class="p-rating-star">☆</button>
+    <button class="p-rating-star">☆</button>
+    <button class="p-rating-star">★</button>
 </div>
 `}
                 />

client/patterns/rating/Star.tsx

@@ -8,7 +8,7 @@ interface StarProps {
 
 const Star: React.FC<StarProps> = ({ isActive }) => {
     return (
-        <button className="star">
+        <button className="p-rating-star">
             {isActive ? '★' : '☆'}
         </button>
     );

client/patterns/rating/star.css

@@ -1,4 +1,4 @@
-.rating {
+.p-rating {
     align-items: center;
     display: flex;
     font-size: 32px;
@@ -6,18 +6,20 @@
     flex-direction: row-reverse;
 }
 
-.rating .star:hover, .rating .star:hover ~ .star {
+.p-rating .p-rating-star:hover,
+.p-rating .p-rating-star:hover ~ .p-rating-star {
     color: transparent;
 }
 
-.rating .star:hover:before, .rating .star:hover ~ .star:before {
+.p-rating .p-rating-star:hover:before,
+.p-rating .p-rating-star:hover ~ .p-rating-star:before {
     color: #00449e;
     content: '\2605';
     left: 0;
     position: absolute;
 }
 
-.star {
+.p-rating-star {
     background-color: transparent;
     border: transparent;
     margin: 0 2px;

client/patterns/upload-button/Cover.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import Circle from '../../placeholders/Circle';
+import Frame from '../../placeholders/Frame';
+import Rectangle from '../../placeholders/Rectangle';
+
+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: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        padding: '8px',
+                        width: '100%',
+                    }}
+                >
+                    <div style={{ marginRight: '4px' }}>
+                        <svg
+                            viewBox="0 0 24 24"
+                            style={{
+                                fill: "none",
+                                height: '16px',
+                                stroke: "rgba(0, 0, 0, 0.4)",
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round",
+                                strokeWidth: 1,
+                                width: '16px',
+                            }}
+                        >
+                            <path
+                                d={`M18.5,7.5c0.275,0,0.341-0.159,0.146-0.354l-6.292-6.292c-0.195-0.196-0.512-0.196-0.707-0.001
+                                c0,0-0.001,0.001-0.001,0.001L5.354,7.147C5.154,7.342,5.225,7.501,5.5,7.501h3v10c0,0.552,0.448,1,1,1h5c0.552,0,1-0.448,1-1V7.5
+                                H18.5z
+                                M23.5,18.5v4c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-4`}
+                            />
+                        </svg>
+                    </div>
+                    <Rectangle />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/upload-button/Details.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Circle from '../../placeholders/Circle';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Upload button">
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    You can click the button to choose a file.
+                </div>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ width: '128px' }}>
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                                        borderRadius: '4px',
+                                        display: 'flex',
+                                        padding: '8px',
+                                        position: 'relative',
+                                        width: '100%',
+                                    }}
+                                >
+                                    <input
+                                        type="file"
+                                        style={{
+                                            height: '100%',
+                                            left: 0,
+                                            opacity: 0,
+                                            position: 'absolute',
+                                            top: 0,
+                                            width: '100%',
+                                        }}
+                                    />
+                                    <div style={{ marginRight: '8px' }}>
+                                        <svg
+                                            viewBox="0 0 24 24"
+                                            style={{
+                                                fill: "none",
+                                                height: '24',
+                                                stroke: "rgba(0, 0, 0, 0.4)",
+                                                strokeLinecap: "round",
+                                                strokeLinejoin: "round",
+                                                strokeWidth: 1,
+                                                width: '24',
+                                            }}
+                                        >
+                                            <path
+                                                d={`M18.5,7.5c0.275,0,0.341-0.159,0.146-0.354l-6.292-6.292c-0.195-0.196-0.512-0.196-0.707-0.001
+                                                c0,0-0.001,0.001-0.001,0.001L5.354,7.147C5.154,7.342,5.225,7.501,5.5,7.501h3v10c0,0.552,0.448,1,1,1h5c0.552,0,1-0.448,1-1V7.5
+                                                H18.5z
+                                                M23.5,18.5v4c0,0.552-0.448,1-1,1h-21c-0.552,0-1-0.448-1-1v-4`}
+                                            />
+                                        </svg>
+                                    </div>
+                                    <Rectangle />
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Used to position the input */
+    position: relative;
+
+    /* Content is centered */
+    align-items: center;
+    display: flex;
+
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+">
+    <!-- The real file input -->
+    <input
+        type="file"
+        style="
+            /* Take the full size */
+            height: 100%;
+            left: 0;
+            position: absolute;
+            top: 0;
+            width: 100%;
+
+            /* Make it transparent */
+            opacity: 0;
+        "
+    />
+
+    <!-- The upload icon -->
+    <div style="margin-right: 8px">...</div>
+
+    <!-- The label -->
+    ...
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

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

public/sitemap.xml

@@ -5,22 +5,28 @@
     <url><loc>https://csslayout.io/patterns/split-screen</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-header</loc></url>
+    <url><loc>https://csslayout.io/patterns/avatar-list</loc></url>
     <url><loc>https://csslayout.io/patterns/badge</loc></url>
     <url><loc>https://csslayout.io/patterns/breadcrumb</loc></url>
     <url><loc>https://csslayout.io/patterns/button-with-icon</loc></url>
     <url><loc>https://csslayout.io/patterns/card</loc></url>
     <url><loc>https://csslayout.io/patterns/centering</loc></url>
     <url><loc>https://csslayout.io/patterns/docked-at-corner</loc></url>
+    <url><loc>https://csslayout.io/patterns/dot-leader</loc></url>
     <url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>
     <url><loc>https://csslayout.io/patterns/drop-area</loc></url>
+    <url><loc>https://csslayout.io/patterns/drop-cap</loc></url>
+    <url><loc>https://csslayout.io/patterns/dropdown</loc></url>
     <url><loc>https://csslayout.io/patterns/feature-list</loc></url>
     <url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>
+    <url><loc>https://csslayout.io/patterns/floating-label</loc></url>
     <url><loc>https://csslayout.io/patterns/input-addon</loc></url>
     <url><loc>https://csslayout.io/patterns/media-object</loc></url>
     <url><loc>https://csslayout.io/patterns/menu</loc></url>
     <url><loc>https://csslayout.io/patterns/modal</loc></url>
     <url><loc>https://csslayout.io/patterns/notification</loc></url>
     <url><loc>https://csslayout.io/patterns/pagination</loc></url>
+    <url><loc>https://csslayout.io/patterns/presence-indicator</loc></url>
     <url><loc>https://csslayout.io/patterns/previous-next-buttons</loc></url>
     <url><loc>https://csslayout.io/patterns/pricing-table</loc></url>
     <url><loc>https://csslayout.io/patterns/progress-bar</loc></url>
@@ -39,5 +45,6 @@
     <url><loc>https://csslayout.io/patterns/switch</loc></url>
     <url><loc>https://csslayout.io/patterns/tab</loc></url>
     <url><loc>https://csslayout.io/patterns/toggle-password-visibility</loc></url>
+    <url><loc>https://csslayout.io/patterns/upload-button</loc></url>
     <url><loc>https://csslayout.io/patterns/wizard</loc></url>
 </urlset>

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