From 6d98b09f7bde0d436e86d72d7ecee1fefcc3fa6e Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Tue, 20 Sep 2022 09:42:03 +0700
Subject: [PATCH] feat: Zigzag timeline

---
 .../_includes/patterns/zigzag-timeline.njk    |   8 ++
 contents/index.njk                            |   6 +
 contents/zigzag-timeline.md                   |  72 ++++++++++
 pages/zigzag-timeline/index.tsx               | 136 ------------------
 patterns/zigzag-timeline/Cover.tsx            |  86 -----------
 styles/index.scss                             |   1 +
 styles/patterns/_zigzag-timeline.scss         |  47 ++++++
 styles/placeholders/_line.scss                |   2 +-
 8 files changed, 135 insertions(+), 223 deletions(-)
 create mode 100644 contents/_includes/patterns/zigzag-timeline.njk
 create mode 100644 contents/zigzag-timeline.md
 delete mode 100644 pages/zigzag-timeline/index.tsx
 delete mode 100644 patterns/zigzag-timeline/Cover.tsx
 create mode 100644 styles/patterns/_zigzag-timeline.scss

diff --git a/contents/_includes/patterns/zigzag-timeline.njk b/contents/_includes/patterns/zigzag-timeline.njk
new file mode 100644
index 0000000..7725f4a
--- /dev/null
+++ b/contents/_includes/patterns/zigzag-timeline.njk
@@ -0,0 +1,8 @@
+<div class="zigzag-timeline">
+    {% for i in range(0, 2) -%}
+    <div class="zigzag-timeline__item">
+        <div class="zigzag-timeline__milestone"></div>
+        {% lines "hor", 5 %}
+    </div>
+    {%- endfor %}
+</div>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 2e60df7..71f7b41 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -295,6 +295,12 @@ eleventyExcludeFromCollections: true
                     <div class="pattern__title">Watermark</div>
                 </a>
             </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/zigzag-timeline/">
+                    <div class="pattern__cover">{% include "patterns/zigzag-timeline.njk" %}</div>
+                    <div class="pattern__title">Zigzag timeline</div>
+                </a>
+            </div>
         </div>
     </div>
 
diff --git a/contents/zigzag-timeline.md b/contents/zigzag-timeline.md
new file mode 100644
index 0000000..1677c49
--- /dev/null
+++ b/contents/zigzag-timeline.md
@@ -0,0 +1,72 @@
+---
+layout: layouts/post.njk
+title: Zigzag timeline
+description: Create a zigzag timeline
+keywords: css timeline, css zigzag timeline
+---
+
+## HTML
+
+```html
+<div class="zigzag-timeline__item">
+    <!-- Milestone -->
+    <div className="zigzag-timeline__milestone">...</div>
+
+    <!-- Content -->
+    ...
+</div>
+
+<!-- Repeat other items -->
+...
+```
+
+## CSS
+
+```css
+.zigzag-timeline__item {
+    /* Used to position the milestone */
+    position: relative;
+
+    /* Border */
+    border-bottom: 1px solid #9ca3af;
+
+    /* Take full width */
+    width: 100%;
+}
+
+.zigzag-timeline__milestone {
+    /* Absolute position */
+    position: absolute;
+    top: 50%;
+
+    /* Circle it */
+    border-radius: 50%;
+    height: 1rem;
+    width: 1rem;
+
+    /* Misc */
+    background: #9ca3af;
+}
+
+/* Styles for even items */
+.zigzag-timeline__item:nth-child(2n) {
+    border-left: 1px solid #9ca3af;
+}
+.zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone {
+    left: 0;
+    transform: translate(-50%, -50%);
+}
+
+/* Styles for odd items */
+.zigzag-timeline__item:nth-child(2n + 1) {
+    border-right: 1px solid #9ca3af;
+}
+.zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone {
+    right: 0;
+    transform: translate(50%, -50%);
+}
+```
+
+{% demo %}
+{% include "patterns/zigzag-timeline.njk" %}
+{% enddemo %}
diff --git a/pages/zigzag-timeline/index.tsx b/pages/zigzag-timeline/index.tsx
deleted file mode 100644
index dfe70d2..0000000
--- a/pages/zigzag-timeline/index.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { Pattern } from '../../constants/Pattern';
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.ZigzagTimeline}>
-            <Head>
-                <meta name="description" content="Create a zigzag timeline" />
-                <meta name="og:description" content="Create a zigzag timeline" />
-                <meta name="twitter:description" content="Create a zigzag timeline" />
-                <meta name="keywords" content="css timeline, css zigzag timeline" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="zigzag-timeline__item">
-    <!-- Milestone -->
-    <div className="zigzag-timeline__milestone">...</div>
-
-    <!-- Content -->
-    ...
-</div>
-
-<!-- Repeat other items -->
-...
-`}
-                css={`
-                    .zigzag-timeline__item {
-                        /* Used to position the milestone */
-                        position: relative;
-
-                        /* Border */
-                        border-bottom: 1px solid #71717a;
-
-                        /* Take full width */
-                        width: 100%;
-                    }
-
-                    .zigzag-timeline__milestone {
-                        /* Absolute position */
-                        position: absolute;
-                        top: 50%;
-
-                        /* Circle it */
-                        border-radius: 50%;
-                        height: 2rem;
-                        width: 2rem;
-
-                        /* Misc */
-                        background: #71717a;
-                    }
-
-                    /* Styles for even items */
-                    .zigzag-timeline__item:nth-child(2n) {
-                        border-left: 1px solid #71717a;
-                    }
-                    .zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone {
-                        left: 0;
-                        transform: translate(-50%, -50%);
-                    }
-
-                    /* Styles for odd items */
-                    .zigzag-timeline__item:nth-child(2n + 1) {
-                        border-right: 1px solid #71717a;
-                    }
-                    .zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone {
-                        right: 0;
-                        transform: translate(50%, -50%);
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        margin: '0 auto',
-                        padding: '0.5rem',
-                        width: '60%',
-                    }}
-                >
-                    <div
-                        className="zigzag-timeline__item"
-                        style={{
-                            padding: '1rem 1.5rem',
-                        }}
-                    >
-                        <div className="zigzag-timeline__milestone" />
-                        <div style={{ marginBottom: '1rem', width: '80%' }}>
-                            <Rectangle />
-                        </div>
-                        <Block numberOfBlocks={10} />
-                    </div>
-                    <div
-                        className="zigzag-timeline__item"
-                        style={{
-                            padding: '1rem 1.5rem',
-                        }}
-                    >
-                        <div className="zigzag-timeline__milestone" />
-                        <div style={{ marginBottom: '1rem', width: '60%' }}>
-                            <Rectangle />
-                        </div>
-                        <Block numberOfBlocks={20} />
-                    </div>
-                    <div
-                        className="zigzag-timeline__item"
-                        style={{
-                            padding: '1rem 1.5rem',
-                        }}
-                    >
-                        <div className="zigzag-timeline__milestone" />
-                        <div style={{ marginBottom: '1rem', width: '70%' }}>
-                            <Rectangle />
-                        </div>
-                        <Block numberOfBlocks={15} />
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.Timeline]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/zigzag-timeline/Cover.tsx b/patterns/zigzag-timeline/Cover.tsx
deleted file mode 100644
index 8659a2b..0000000
--- a/patterns/zigzag-timeline/Cover.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Line from '../../placeholders/Line';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '0.5rem',
-                }}
-            >
-                <div
-                    style={{
-                        borderBottom: '1px solid #71717A',
-                        borderRight: '1px solid #71717A',
-                        padding: '0.5rem 1rem',
-                        position: 'relative',
-                        width: '100%',
-                    }}
-                >
-                    <div
-                        style={{
-                            background: '#71717A',
-                            borderRadius: '50%',
-                            height: '.75rem',
-                            position: 'absolute',
-                            right: 0,
-                            top: '50%',
-                            transform: 'translate(50%, -50%)',
-                            width: '.75rem',
-                        }}
-                    />
-                    <div style={{ marginBottom: '0.25rem', width: '80%' }}>
-                        <Rectangle />
-                    </div>
-                    <div style={{ marginBottom: '0.25rem', width: '80%' }}>
-                        <Line />
-                    </div>
-                    <div style={{ marginBottom: '0.25rem', width: '60%' }}>
-                        <Line />
-                    </div>
-                </div>
-                <div
-                    style={{
-                        borderLeft: '1px solid #71717A',
-                        padding: '0.5rem 1rem',
-                        position: 'relative',
-                        width: '100%',
-                    }}
-                >
-                    <div
-                        style={{
-                            background: '#71717A',
-                            borderRadius: '50%',
-                            height: '.75rem',
-                            left: 0,
-                            position: 'absolute',
-                            top: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            width: '.75rem',
-                        }}
-                    />
-                    <div style={{ marginBottom: '0.25rem', width: '80%' }}>
-                        <Rectangle />
-                    </div>
-                    <div style={{ marginBottom: '0.25rem', width: '60%' }}>
-                        <Line />
-                    </div>
-                    <div style={{ marginBottom: '0.25rem', width: '80%' }}>
-                        <Line />
-                    </div>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 924ec59..d540dc6 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -59,6 +59,7 @@
 @import './patterns/video-background';
 @import './patterns/voting';
 @import './patterns/watermark';
+@import './patterns/zigzag-timeline';
 
 // Placeholders
 @import './placeholders/circle';
diff --git a/styles/patterns/_zigzag-timeline.scss b/styles/patterns/_zigzag-timeline.scss
new file mode 100644
index 0000000..9383d74
--- /dev/null
+++ b/styles/patterns/_zigzag-timeline.scss
@@ -0,0 +1,47 @@
+.zigzag-timeline {
+    height: 8rem;
+    width: 8rem;
+}
+
+.zigzag-timeline__item {
+    /* Used to position the milestone */
+    position: relative;
+
+    /* Border */
+    border-bottom: 1px solid #9ca3af;
+
+    /* Take full width */
+    width: 100%;
+}
+
+.zigzag-timeline__milestone {
+    /* Absolute position */
+    position: absolute;
+    top: 50%;
+
+    /* Circle it */
+    border-radius: 50%;
+    height: 1rem;
+    width: 1rem;
+
+    /* Misc */
+    background: #9ca3af;
+}
+
+/* Styles for even items */
+.zigzag-timeline__item:nth-child(2n) {
+    border-left: 1px solid #9ca3af;
+}
+.zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone {
+    left: 0;
+    transform: translate(-50%, -50%);
+}
+
+/* Styles for odd items */
+.zigzag-timeline__item:nth-child(2n + 1) {
+    border-right: 1px solid #9ca3af;
+}
+.zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone {
+    right: 0;
+    transform: translate(50%, -50%);
+}
\ No newline at end of file
diff --git a/styles/placeholders/_line.scss b/styles/placeholders/_line.scss
index 85e4c78..b0e080b 100644
--- a/styles/placeholders/_line.scss
+++ b/styles/placeholders/_line.scss
@@ -41,7 +41,7 @@
 }
 
 .lines {
-    margin: 0.5rem 0;
+    padding: 0.5rem 0;
     width: 100%;
     align-items: center;
     display: flex;