From 9b1ec2fa5724b376573ef1602105b229a0758cb9 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Tue, 20 Sep 2022 10:07:26 +0700
Subject: [PATCH] feat: Folder structure

---
 .../_includes/patterns/folder-structure.njk   |  28 +++
 contents/folder-structure.md                  |  99 ++++++++++
 contents/index.njk                            |   6 +
 pages/folder-structure/index.tsx              | 171 ------------------
 patterns/folder-structure/Cover.tsx           | 125 -------------
 styles/blocks/_post.scss                      |   8 +-
 styles/index.scss                             |   1 +
 styles/patterns/_folder-structure.scss        |  51 ++++++
 8 files changed, 189 insertions(+), 300 deletions(-)
 create mode 100644 contents/_includes/patterns/folder-structure.njk
 create mode 100644 contents/folder-structure.md
 delete mode 100644 pages/folder-structure/index.tsx
 delete mode 100644 patterns/folder-structure/Cover.tsx
 create mode 100644 styles/patterns/_folder-structure.scss

diff --git a/contents/_includes/patterns/folder-structure.njk b/contents/_includes/patterns/folder-structure.njk
new file mode 100644
index 0000000..9f5d207
--- /dev/null
+++ b/contents/_includes/patterns/folder-structure.njk
@@ -0,0 +1,28 @@
+<div class="folder-structure">
+    <ul>
+        <li>
+            {% square %}
+            <ul>
+                <li>
+                    {% square %}
+                </li>
+            </ul>
+        </li>
+        <li>
+            {% square %}
+            <ul>
+                <li>
+                    {% square %}
+                    <ul>
+                        <li>
+                            {% square %}
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    {% square %}
+                </li>                
+            </ul>
+        </li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/contents/folder-structure.md b/contents/folder-structure.md
new file mode 100644
index 0000000..3ccdd4c
--- /dev/null
+++ b/contents/folder-structure.md
@@ -0,0 +1,99 @@
+---
+layout: layouts/post.njk
+title: Folder structure
+description: Create a folder structure with CSS
+keywords: css folder structure, css folder tree
+---
+
+## HTML
+
+```html
+<div class="folder-structure">
+    <ul>
+        <li>
+            <!-- Content -->
+            ...
+
+            <!-- Sub items -->
+            <ul>
+                <li>
+                    <!-- Content -->
+                    ...
+
+                    <!-- Sub items -->
+                    <ul>
+                        <li>...</li>
+                        <li>...</li>
+                        ...
+                    </ul>
+                </li>
+                <li>...</li>
+                ...
+            </ul>
+        </li>
+        
+        <!-- Repeat other items -->
+        ...
+    </ul>
+</div>
+```
+
+## CSS
+
+```css
+:root {
+    --folder-structure-item-height: 0.5rem;
+    --folder-structure-item-margin-left: 2.25rem;
+    --folder-structure-item-padding-top: 0.5rem;
+}
+
+.folder-structure ul {
+    /* Reset */
+    list-style-type: none;
+    margin: 0;
+}
+
+.folder-structure li {
+    padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
+    position: relative;
+}
+
+.folder-structure li::before {
+    border-left: 1px solid #d1d5db;
+    content: '';
+
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: 0;
+    transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
+
+    /* Size */
+    height: 100%;
+}
+
+.folder-structure li::after {
+    border-bottom: 1px solid #d1d5db;
+    content: '';
+
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
+    transform: translate(-100%, 0);
+
+    /* Size */
+    width: var(--folder-structure-item-margin-left);
+}
+
+/* Remove the border from the last item */
+.folder-structure li:last-child::before {
+    height: calc(
+        var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2
+    );
+}
+```
+
+{% demo %}
+{% include "patterns/folder-structure.njk" %}
+{% enddemo %}
diff --git a/contents/index.njk b/contents/index.njk
index cf2bf3e..d58838c 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -151,6 +151,12 @@ eleventyExcludeFromCollections: true
                     <div class="pattern__title">Fixed at side</div>
                 </a>
             </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/folder-structure/">
+                    <div class="pattern__cover">{% include "patterns/folder-structure.njk" %}</div>
+                    <div class="pattern__title">Folder structure</div>
+                </a>
+            </div>
             <div class="pattern__item">
                 <a class="pattern__link" href="/full-background/">
                     <div class="pattern__cover">{% include "patterns/full-background.njk" %}</div>
diff --git a/pages/folder-structure/index.tsx b/pages/folder-structure/index.tsx
deleted file mode 100644
index 155c97f..0000000
--- a/pages/folder-structure/index.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Square from '../../placeholders/Square';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.FolderStructure}>
-            <Head>
-                <meta name="description" content="Create a folder structure with CSS" />
-                <meta name="og:description" content="Create a folder structure with CSS" />
-                <meta name="twitter:description" content="Create a folder structure with CSS" />
-                <meta name="keywords" content="css folder structure, css folder tree" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="folder-structure">
-    <ul>
-        <li>
-            <!-- Content -->
-            ...
-
-            <!-- Sub items -->
-            <ul>
-                <li>
-                    <!-- Content -->
-                    ...
-
-                    <!-- Sub items -->
-                    <ul>
-                        <li>...</li>
-                        <li>...</li>
-                        ...
-                    </ul>
-                </li>
-                <li>...</li>
-                ...
-            </ul>
-        </li>
-        
-        <!-- Repeat other items -->
-        ...
-    </ul>
-</div>
-`}
-                css={`
-                    :root {
-                        --folder-structure-item-height: 1rem;
-                        --folder-structure-item-margin-left: 2rem;
-                        --folder-structure-item-padding-top: 1rem;
-                    }
-
-                    .folder-structure ul {
-                        /* Reset */
-                        list-style-type: none;
-                        margin: 0;
-                    }
-
-                    .folder-structure li {
-                        padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
-                        position: relative;
-                    }
-
-                    .folder-structure li::before {
-                        border-left: 1px solid rgba(0, 0, 0, 0.3);
-                        content: '';
-
-                        /* Position */
-                        left: 0;
-                        position: absolute;
-                        top: 0;
-                        transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
-
-                        /* Size */
-                        height: 100%;
-                    }
-
-                    .folder-structure li::after {
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-                        content: '';
-
-                        /* Position */
-                        left: 0;
-                        position: absolute;
-                        top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
-                        transform: translate(-100%, 0);
-
-                        /* Size */
-                        width: var(--folder-structure-item-margin-left);
-                    }
-
-                    /* Remove the border from the last item */
-                    .folder-structure li:last-child::before {
-                        height: calc(
-                            var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2
-                        );
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '0.5rem',
-                    }}
-                >
-                    <div className="folder-structure">
-                        <ul>
-                            <li>
-                                <Square size="1rem" />
-                                <ul>
-                                    <li>
-                                        <Square size="1rem" />
-                                    </li>
-                                </ul>
-                            </li>
-                            <li>
-                                <Square size="1rem" />
-                                <ul>
-                                    <li>
-                                        <Square size="1rem" />
-                                        <ul>
-                                            <li>
-                                                <Square size="1rem" />
-                                            </li>
-                                            <li>
-                                                <Square size="1rem" />
-                                            </li>
-                                            <li>
-                                                <Square size="1rem" />
-                                            </li>
-                                        </ul>
-                                    </li>
-                                    <li>
-                                        <Square size="1rem" />
-                                    </li>
-                                    <li>
-                                        <Square size="1rem" />
-                                        <ul>
-                                            <li>
-                                                <Square size="1rem" />
-                                            </li>
-                                            <li>
-                                                <Square size="1rem" />
-                                            </li>
-                                        </ul>
-                                    </li>
-                                </ul>
-                            </li>
-                            <li>
-                                <Square size="1rem" />
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.TreeDiagram]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/folder-structure/Cover.tsx b/patterns/folder-structure/Cover.tsx
deleted file mode 100644
index 9514022..0000000
--- a/patterns/folder-structure/Cover.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Square from '../../placeholders/Square';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '0.5rem',
-                }}
-            >
-                <div>
-                    <div
-                        style={{
-                            padding: '0rem 0rem 0rem 1rem',
-                            position: 'relative',
-                        }}
-                    >
-                        <div
-                            style={{
-                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                height: '100%',
-                                left: 0,
-                                position: 'absolute',
-                                top: 0,
-                            }}
-                        />
-                        <div
-                            style={{
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                left: 0,
-                                position: 'absolute',
-                                top: '0.5rem',
-                                width: '1rem',
-                            }}
-                        />
-                        <div
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                borderRadius: '0.25rem',
-                                height: '1rem',
-                                width: '1rem',
-                            }}
-                        />
-                        <div
-                            style={{
-                                marginLeft: '0.5rem',
-                                padding: '0rem 0rem 0rem 1rem',
-                                position: 'relative',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '50%',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: 0,
-                                }}
-                            />
-                            <div
-                                style={{
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: '0.5rem',
-                                    width: '1rem',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '0.25rem',
-                                    height: '1rem',
-                                    width: '1rem',
-                                }}
-                            />
-                        </div>
-                    </div>
-                    <div
-                        style={{
-                            padding: '0rem 0rem 0rem 1rem',
-                            position: 'relative',
-                        }}
-                    >
-                        <div
-                            style={{
-                                borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                height: '50%',
-                                left: 0,
-                                position: 'absolute',
-                                top: 0,
-                            }}
-                        />
-                        <div
-                            style={{
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                left: 0,
-                                position: 'absolute',
-                                top: '0.5rem',
-                                width: '1rem',
-                            }}
-                        />
-                        <div
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                borderRadius: '0.25rem',
-                                height: '1rem',
-                                width: '1rem',
-                            }}
-                        />
-                    </div>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/blocks/_post.scss b/styles/blocks/_post.scss
index 78b465f..c86152f 100644
--- a/styles/blocks/_post.scss
+++ b/styles/blocks/_post.scss
@@ -61,19 +61,19 @@
         max-width: 100%;
     }
 
-    ol {
+    > ol {
         counter-reset: ol-step-counter;
         list-style-type: none;
         margin: 0;
         padding: 0;
     }
 
-    ol li {
+    > ol li {
         counter-increment: ol-step-counter;
         padding-bottom: 0.25rem;
         padding-left: 2rem;
     }
-    ol li::before {
+    > ol li::before {
         background-color: #e5e7eb;
         border-radius: 50%;
         content: counter(ol-step-counter);
@@ -113,7 +113,7 @@
         border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     }
 
-    ul {
+    > ul {
         margin: 0;
         padding: 0 0 0 1.5rem;
     }
diff --git a/styles/index.scss b/styles/index.scss
index 5508f8d..e011b49 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -34,6 +34,7 @@
 @import './patterns/feature-list';
 @import './patterns/fixed-at-corner';
 @import './patterns/fixed-at-side';
+@import './patterns/folder-structure';
 @import './patterns/full-background';
 @import './patterns/initial-avatar';
 @import './patterns/inverted-corners';
diff --git a/styles/patterns/_folder-structure.scss b/styles/patterns/_folder-structure.scss
new file mode 100644
index 0000000..2590240
--- /dev/null
+++ b/styles/patterns/_folder-structure.scss
@@ -0,0 +1,51 @@
+:root {
+    --folder-structure-item-height: 0.5rem;
+    --folder-structure-item-margin-left: 2.25rem;
+    --folder-structure-item-padding-top: 0.5rem;
+}
+
+.folder-structure ul {
+    /* Reset */
+    list-style-type: none;
+    margin: 0;
+}
+
+.folder-structure li {
+    padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
+    position: relative;
+}
+
+.folder-structure li::before {
+    border-left: 1px solid #d1d5db;
+    content: '';
+
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: 0;
+    transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
+
+    /* Size */
+    height: 100%;
+}
+
+.folder-structure li::after {
+    border-bottom: 1px solid #d1d5db;
+    content: '';
+
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
+    transform: translate(-100%, 0);
+
+    /* Size */
+    width: var(--folder-structure-item-margin-left);
+}
+
+/* Remove the border from the last item */
+.folder-structure li:last-child::before {
+    height: calc(
+        var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2
+    );
+}
\ No newline at end of file