From 18060bffdc7a00793fb8ce0c0ec345163515c6cf Mon Sep 17 00:00:00 2001 From: Heydon Pickering Date: Sun, 16 Jul 2017 16:49:20 +0100 Subject: [PATCH] file trees feature --- content/patterns/coding/file-trees.md | 47 +++ content/patterns/writing/library-structure.md | 36 +- docs/css/styles.css | 46 ++- docs/index.html | 7 + docs/index.xml | 13 +- docs/patterns/coding/code-blocks/index.html | 7 + .../coding/codepen-embedding/index.html | 7 + .../patterns/coding/color-palettes/index.html | 7 + docs/patterns/coding/command-line/index.html | 7 + docs/patterns/coding/file-trees/index.html | 368 ++++++++++++++++++ docs/patterns/coding/index.html | 17 + docs/patterns/coding/index.xml | 11 + docs/patterns/coding/tested/index.html | 7 + .../coding/writing-inline-demos/index.html | 7 + docs/patterns/index.html | 7 + docs/patterns/installation/index.html | 7 + docs/patterns/library-setup/index.html | 7 + .../media/including-images/index.html | 7 + .../media/including-videos/index.html | 7 + docs/patterns/media/index.html | 7 + docs/patterns/serving/index.html | 7 + .../writing/expandable-sections/index.html | 7 + docs/patterns/writing/index.html | 7 + docs/patterns/writing/index.xml | 2 +- .../writing/library-structure/index.html | 64 ++- .../writing/markdown-and-metadata/index.html | 7 + .../writing/notes-and-warnings/index.html | 7 + docs/patterns/writing/references/index.html | 7 + .../writing/tables-of-contents/index.html | 7 + docs/service-worker.js | 2 +- docs/sitemap.xml | 4 + .../infusion/layouts/shortcodes/fileTree.html | 3 + themes/infusion/static/css/styles.css | 46 ++- 33 files changed, 758 insertions(+), 41 deletions(-) create mode 100644 content/patterns/coding/file-trees.md create mode 100644 docs/patterns/coding/file-trees/index.html create mode 100644 themes/infusion/layouts/shortcodes/fileTree.html diff --git a/content/patterns/coding/file-trees.md b/content/patterns/coding/file-trees.md new file mode 100644 index 0000000..19ec198 --- /dev/null +++ b/content/patterns/coding/file-trees.md @@ -0,0 +1,47 @@ ++++ +title = "File trees" ++++ + +Representing folder/file structures is simple and accessible in **Infusion**. Which is just as well, because some components may need to conform to a certain folder structure. + +The file tree is described using a markdown nested list structure: + +{{}} +{{% fileTree %}} +* Level 1 folder + * Level 2 file + * Level 2 folder + * Level 3 file + * Level 3 folder + * Level 4 file + * Level 3 folder + * Level 4 file + * Level 4 file + * Level 2 folder + * Level 3 file + * Level 3 file + * Level 3 file +{{% /fileTree %}} +{{}} + +This is drawn in the following fashion, but preserves the underlying nested list structure for assistive technologies such as screen readers: + +{{% fileTree %}} +* Level 1 folder + * Level 2 file + * Level 2 folder + * Level 3 file + * Level 3 folder + * Level 4 file + * Level 3 folder + * Level 4 file + * Level 4 file + * Level 2 folder + * Level 3 file + * Level 3 file + * Level 3 file +{{% /fileTree %}} + +{{% warning %}} +The only reliable way to nest unordered lists in markdown is to indent the nested item by exactly four spaces. Using tabs and less than four spaces are unreliable methods. +{{% /warning %}} diff --git a/content/patterns/writing/library-structure.md b/content/patterns/writing/library-structure.md index 6b4f75b..6f9fd60 100644 --- a/content/patterns/writing/library-structure.md +++ b/content/patterns/writing/library-structure.md @@ -5,13 +5,13 @@ weight = 1 Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this: -``` -└── content - ├── _index.md - └── patterns - ├── name-of-my-pattern.md - └── name-of-my-other-pattern.md -``` +{{% fileTree %}} +* content + * \_index.md + * patterns + * name-of-my-pattern.md + * name-of-my-other-pattern.md +{{% /fileTree %}} * **/content** - This is where all of your content lives. You won't need to visit any other folders very frequently. * **_index.md** — This is the content for your home page. @@ -21,17 +21,17 @@ Before you can set about documenting patterns, you need to know where everything You may have noticed that this site's navigation is divided partly into subsections, with labels like "Writing". **Infusion** (or, rather, Hugo) allows you to create such subsections by simply nesting folders under the `/patterns` folder. In the following example, I have a subsection about different types of "popup" pattern. -``` -└── content - ├── _index.md - └── patterns - ├── name-of-my-pattern.md - ├── name-of-my-other-pattern.md - └── popups - ├── _index.md - ├── popup-menu.md - └── tooltip.md -``` +{{% fileTree %}} +* content + * \_index.md + * patterns + * name-of-my-pattern.md + * name-of-my-other-pattern.md + * popups + * \_index.md + * popup-menu.md + * tooltips.md +{{% /fileTree %}} {{% note %}} Note that subfolders like `/popups` must each have an `_index.md` file. This file doesn't need any content except the TOML metadata defining the title (name) of that subsection: diff --git a/docs/css/styles.css b/docs/css/styles.css index b4ba9a4..e9f202f 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -161,7 +161,7 @@ kbd { vertical-align: 0.33em; } -pre { +pre, .file-tree { overflow-x: auto; padding: 1.5rem; border: 1px solid; @@ -350,7 +350,6 @@ caption { font-size: 1rem; } - .patterns li { line-height: 1.125; margin-top: 0.75rem; @@ -626,6 +625,49 @@ pre[class*=language-] code * { color: inherit; } +/* file tree lists */ + +.file-tree ul { + font-family: courier; + margin: 0; + padding-left: 3rem; + list-style: none; + line-height: 1.25; + position: relative; + overflow: hidden; +} + +.file-tree li:not(:last-child) ul::before { + content: '\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020'; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 1em; +} + +.file-tree > ul { + margin: 0; + padding: 0; +} + +.file-tree li { + background: #fff; + position: relative; +} + +.file-tree li + li { + margin-top: 0; +} + +.file-tree li::before { + content: '\251C\2500\2500\0020'; +} + +.file-tree li:last-child::before { + content: '\2514\2500\2500\0020'; +} + /* Expandable sections */ .expandable-section { diff --git a/docs/index.html b/docs/index.html index 24c977d..5f8efa7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -245,6 +245,13 @@ +
  • + + + File trees + +
    • +
  • diff --git a/docs/index.xml b/docs/index.xml index 0aa7e10..20ab453 100644 --- a/docs/index.xml +++ b/docs/index.xml @@ -30,7 +30,7 @@ So, this… https://heydon.github.io/infusion/patterns/writing/library-structure/ Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this: -└── content ├── _index.md └── patterns ├── name-of-my-pattern.md └── name-of-my-other-pattern.md /content - This is where all of your content lives. You won’t need to visit any other folders very frequently. _index.md — This is the content for your home page. /patterns — This is the folder where individual pattern files are kept. + content _index.md patterns name-of-my-pattern.md name-of-my-other-pattern.md /content - This is where all of your content lives. You won’t need to visit any other folders very frequently. _index.md — This is the content for your home page. /patterns — This is the folder where individual pattern files are kept. @@ -98,6 +98,17 @@ npm run start The cmd shortcode currently only supports single commands. If y + + File trees + https://heydon.github.io/infusion/patterns/coding/file-trees/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://heydon.github.io/infusion/patterns/coding/file-trees/ + Representing folder/file structures is simple and accessible in Infusion. Which is just as well, because some components may need to conform to a certain folder structure. +The file tree is described using a markdown nested list structure: +{{% fileTree %}} * Level 1 folder * Level 2 file * Level 2 folder * Level 3 file * Level 3 folder * Level 4 file * Level 3 folder * Level 4 file * Level 4 file * Level 2 folder * Level 3 file * Level 3 file * Level 3 file {{% /fileTree %}} This is drawn in the following fashion, but preserves the underlying nested list structure for assistive technologies such as screen readers: + + Including images https://heydon.github.io/infusion/patterns/media/including-images/ diff --git a/docs/patterns/coding/code-blocks/index.html b/docs/patterns/coding/code-blocks/index.html index 356adaf..3213c17 100644 --- a/docs/patterns/coding/code-blocks/index.html +++ b/docs/patterns/coding/code-blocks/index.html @@ -246,6 +246,13 @@
    • +
  • + + + File trees + +
    • +
  • diff --git a/docs/patterns/coding/codepen-embedding/index.html b/docs/patterns/coding/codepen-embedding/index.html index 965184c..ec3b718 100644 --- a/docs/patterns/coding/codepen-embedding/index.html +++ b/docs/patterns/coding/codepen-embedding/index.html @@ -246,6 +246,13 @@
    • +
  • + + + File trees + +
    • +
  • diff --git a/docs/patterns/coding/color-palettes/index.html b/docs/patterns/coding/color-palettes/index.html index 888ecc6..7b89762 100644 --- a/docs/patterns/coding/color-palettes/index.html +++ b/docs/patterns/coding/color-palettes/index.html @@ -246,6 +246,13 @@
    • +
  • + + + File trees + +
    • +
  • diff --git a/docs/patterns/coding/command-line/index.html b/docs/patterns/coding/command-line/index.html index 3be1391..90ed4cf 100644 --- a/docs/patterns/coding/command-line/index.html +++ b/docs/patterns/coding/command-line/index.html @@ -246,6 +246,13 @@
    • +
  • + + + File trees + +
    • +
  • diff --git a/docs/patterns/coding/file-trees/index.html b/docs/patterns/coding/file-trees/index.html new file mode 100644 index 0000000..c39fc31 --- /dev/null +++ b/docs/patterns/coding/file-trees/index.html @@ -0,0 +1,368 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + File trees | Infusion + + + + + skip to content + + + + + + + + + W3C + SVG + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    +
    + +
    +

    File trees

    + + + + + + +

    Representing folder/file structures is simple and accessible in Infusion. Which is just as well, because some components may need to conform to a certain folder structure.

    + +

    The file tree is described using a markdown nested list structure:

    + +
    
+{{% fileTree %}}
+* Level 1 folder
+    * Level 2 file
+    * Level 2 folder
+        * Level 3 file
+        * Level 3 folder
+            * Level 4 file
+        * Level 3 folder
+            * Level 4 file
+            * Level 4 file
+    * Level 2 folder
+        * Level 3 file
+        * Level 3 file
+        * Level 3 file
+{{% /fileTree %}}
+
    + + +

    This is drawn in the following fashion, but preserves the underlying nested list structure for assistive technologies such as screen readers:

    + +

    +
      +
    • Level 1 folder + +
        +
      • Level 2 file
        • +
      • Level 2 folder + +
          +
        • Level 3 file
          • +
        • Level 3 folder + +
            +
          • Level 4 file
            • +
          • +
        • Level 3 folder + +
            +
          • Level 4 file
            • +
          • Level 4 file
            • +
          • +
        • +
      • Level 2 folder + +
          +
        • Level 3 file
          • +
        • Level 3 file
          • +
        • Level 3 file
          • +
        • +
      • +
    + +
    +

    + + + + +
    + +
    + Powered by Infusion, a The Paciello Group project.
    + For general enquiries, contact us on info@paciellogroup.com. +
    +
    +
    +
    + + + + + + + diff --git a/docs/patterns/coding/index.html b/docs/patterns/coding/index.html index 0d81298..2caa872 100644 --- a/docs/patterns/coding/index.html +++ b/docs/patterns/coding/index.html @@ -246,6 +246,13 @@
    • +
  • + + + File trees + +
    • +
  • @@ -320,6 +327,16 @@
    • +
  • +

    + + + File trees + +

    +
    • + +

  • diff --git a/docs/patterns/coding/index.xml b/docs/patterns/coding/index.xml index eb99e46..3928092 100644 --- a/docs/patterns/coding/index.xml +++ b/docs/patterns/coding/index.xml @@ -66,6 +66,17 @@ npm run start The cmd shortcode currently only supports single commands. If y + + File trees + https://heydon.github.io/infusion/patterns/coding/file-trees/ + Mon, 01 Jan 0001 00:00:00 +0000 + + https://heydon.github.io/infusion/patterns/coding/file-trees/ + Representing folder/file structures is simple and accessible in Infusion. Which is just as well, because some components may need to conform to a certain folder structure. +The file tree is described using a markdown nested list structure: +{{% fileTree %}} * Level 1 folder * Level 2 file * Level 2 folder * Level 3 file * Level 3 folder * Level 4 file * Level 3 folder * Level 4 file * Level 4 file * Level 2 folder * Level 3 file * Level 3 file * Level 3 file {{% /fileTree %}} This is drawn in the following fashion, but preserves the underlying nested list structure for assistive technologies such as screen readers: + + Tested using... https://heydon.github.io/infusion/patterns/coding/tested/ diff --git a/docs/patterns/coding/tested/index.html b/docs/patterns/coding/tested/index.html index 951949e..6a2a350 100644 --- a/docs/patterns/coding/tested/index.html +++ b/docs/patterns/coding/tested/index.html @@ -246,6 +246,13 @@

    • +
  • + + + File trees + +
    • +
  • diff --git a/docs/patterns/coding/writing-inline-demos/index.html b/docs/patterns/coding/writing-inline-demos/index.html index 83fe4d0..fa153c3 100644 --- a/docs/patterns/coding/writing-inline-demos/index.html +++ b/docs/patterns/coding/writing-inline-demos/index.html @@ -246,6 +246,13 @@
    • +
  • + + + File trees + +
    • +
  • diff --git a/docs/patterns/index.html b/docs/patterns/index.html index 189a441..4787afe 100644 --- a/docs/patterns/index.html +++ b/docs/patterns/index.html @@ -246,6 +246,13 @@
    • +
  • + + + File trees + +
    • +
  • diff --git a/docs/patterns/installation/index.html b/docs/patterns/installation/index.html index 566b6fd..68c607f 100644 --- a/docs/patterns/installation/index.html +++ b/docs/patterns/installation/index.html @@ -246,6 +246,13 @@
    • +
  • + + + File trees + +
    • +
  • diff --git a/docs/patterns/library-setup/index.html b/docs/patterns/library-setup/index.html index 149be3e..4d9b7ca 100644 --- a/docs/patterns/library-setup/index.html +++ b/docs/patterns/library-setup/index.html @@ -246,6 +246,13 @@
    • +
  • + + + File trees + +
    • +
  • diff --git a/docs/patterns/media/including-images/index.html b/docs/patterns/media/including-images/index.html index 5732614..052a7db 100644 --- a/docs/patterns/media/including-images/index.html +++ b/docs/patterns/media/including-images/index.html @@ -246,6 +246,13 @@
    • +
  • + + + File trees + +
    • +
  • diff --git a/docs/patterns/media/including-videos/index.html b/docs/patterns/media/including-videos/index.html index cfac52a..5600b40 100644 --- a/docs/patterns/media/including-videos/index.html +++ b/docs/patterns/media/including-videos/index.html @@ -246,6 +246,13 @@
    • +
  • + + + File trees + +
    • +
  • diff --git a/docs/patterns/media/index.html b/docs/patterns/media/index.html index 3f2ce0e..0315889 100644 --- a/docs/patterns/media/index.html +++ b/docs/patterns/media/index.html @@ -246,6 +246,13 @@
    • +
  • + + + File trees + +
    • +
  • diff --git a/docs/patterns/serving/index.html b/docs/patterns/serving/index.html index 1f09b34..6f4edf7 100644 --- a/docs/patterns/serving/index.html +++ b/docs/patterns/serving/index.html @@ -246,6 +246,13 @@
    • +
  • + + + File trees + +
    • +
  • diff --git a/docs/patterns/writing/expandable-sections/index.html b/docs/patterns/writing/expandable-sections/index.html index 905f78c..11ecaa3 100644 --- a/docs/patterns/writing/expandable-sections/index.html +++ b/docs/patterns/writing/expandable-sections/index.html @@ -246,6 +246,13 @@
    • +
  • + + + File trees + +
    • +
  • diff --git a/docs/patterns/writing/index.html b/docs/patterns/writing/index.html index d0fb508..0c742d5 100644 --- a/docs/patterns/writing/index.html +++ b/docs/patterns/writing/index.html @@ -246,6 +246,13 @@
    • +
  • + + + File trees + +
    • +
  • diff --git a/docs/patterns/writing/index.xml b/docs/patterns/writing/index.xml index 4b6e933..f89d8bb 100644 --- a/docs/patterns/writing/index.xml +++ b/docs/patterns/writing/index.xml @@ -17,7 +17,7 @@ https://heydon.github.io/infusion/patterns/writing/library-structure/ Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this: -└── content ├── _index.md └── patterns ├── name-of-my-pattern.md └── name-of-my-other-pattern.md /content - This is where all of your content lives. You won’t need to visit any other folders very frequently. _index.md — This is the content for your home page. /patterns — This is the folder where individual pattern files are kept. + content _index.md patterns name-of-my-pattern.md name-of-my-other-pattern.md /content - This is where all of your content lives. You won’t need to visit any other folders very frequently. _index.md — This is the content for your home page. /patterns — This is the folder where individual pattern files are kept. diff --git a/docs/patterns/writing/library-structure/index.html b/docs/patterns/writing/library-structure/index.html index 005c12d..69bc97b 100644 --- a/docs/patterns/writing/library-structure/index.html +++ b/docs/patterns/writing/library-structure/index.html @@ -246,6 +246,13 @@
    • +
  • + + + File trees + +
    • +
  • @@ -276,12 +283,23 @@

    Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this:

    -
    └── content
-    ├── _index.md
-    └── patterns
-        ├── name-of-my-pattern.md
-        └── name-of-my-other-pattern.md
-
    +
    +
      +
    • content + +
        +
      • _index.md
        • +
      • patterns + +
          +
        • name-of-my-pattern.md
          • +
        • name-of-my-other-pattern.md
          • +
        • +
      • +
    + +
    +