Domů Procházet Nápověda
Registrovat se Přihlásit se
wang2365
/
cupper-hugo-theme
1
0
Rozštěpit 0
Soubory Úkoly 0 Pull Requesty 0 Wiki
Strom: 639dacb531
Větve Značky
cupper-hugo-the...
/
docs
/
patterns
/
library-setup
/
index.html

index.html 24 KB
Historie Surový

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. 

  7.     <link rel="canonical" href="https://heydon.github.io/infusion/patterns/library-setup/">
    8. 

  8.     <link rel="apple-touch-icon" sizes="57x57" href="https://heydon.github.io/infusion/images/apple-icon-57x57.png">
    9. 

  9.     <link rel="apple-touch-icon" sizes="60x60" href="https://heydon.github.io/infusion/images/apple-icon-60x60.png">
    10. 

  10.     <link rel="apple-touch-icon" sizes="72x72" href="https://heydon.github.io/infusion/images/apple-icon-72x72.png">
    11. 

  11.     <link rel="apple-touch-icon" sizes="76x76" href="https://heydon.github.io/infusion/images/apple-icon-76x76.png">
    12. 

  12.     <link rel="apple-touch-icon" sizes="114x114" href="https://heydon.github.io/infusion/images/apple-icon-114x114.png">
    13. 

  13.     <link rel="apple-touch-icon" sizes="120x120" href="https://heydon.github.io/infusion/images/apple-icon-120x120.png">
    14. 

  14.     <link rel="apple-touch-icon" sizes="144x144" href="https://heydon.github.io/infusion/images/apple-icon-144x144.png">
    15. 

  15.     <link rel="apple-touch-icon" sizes="152x152" href="https://heydon.github.io/infusion/images/apple-icon-152x152.png">
    16. 

  16.     <link rel="apple-touch-icon" sizes="180x180" href="https://heydon.github.io/infusion/images/apple-icon-180x180.png">
    17. 

  17.     <link rel="icon" type="image/png" sizes="192x192"  href="https://heydon.github.io/infusion/images/android-icon-192x192.png">
    18. 

  18.     <link rel="icon" type="image/png" sizes="32x32" href="https://heydon.github.io/infusion/images/favicon-32x32.png">
    19. 

  19.     <link rel="icon" type="image/png" sizes="96x96" href="https://heydon.github.io/infusion/images/favicon-96x96.png">
    20. 

  20.     <link rel="icon" type="image/png" sizes="16x16" href="https://heydon.github.io/infusion/images/favicon-16x16.png">
    21. 

  21.     <link rel="manifest" href="https://heydon.github.io/infusion/manifest.json">
    22. 

  22.     <meta name="msapplication-TileColor" content="#ffffff">
    23. 

  23.     <meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
    24. 

  24.     <meta name="theme-color" content="#ffffff">
    25. 

  25.     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
    26. 

  26.     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
    27. 

  27.     
    28. 

  28.       <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
    29. 

  29.     
    30. 

  30.     <title>
    31. 

  31.       
    32. 

  32.         Library setup | Infusion
    33. 

  33.       
    34. 

  34.     </title>
    35. 

  35.   </head>
    36. 

  36.   <body>
    37. 

  37.     <a href="#main">skip to content</a>
    38. 

  38.     <svg style="display: none">
    39. 

  39.   <symbol id="bookmark" viewBox="0 0 40 50">
    40. 

  40.    <g transform="translate(2266 3206.2)">
    41. 

  41.     <path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
    42. 

  42.    </g>
    43. 

  43.   </symbol>
    44. 

  44. 

  45.   <symbol id="w3c" viewBox="0 0 127.09899 67.763">
    46. 

  46.    <text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
    47. 

  47.    <text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
    48. 

  48.    <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
    49. 

  49.    <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
    50. 

  50.    <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
    51. 

  51.    <path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
    52. 

  52.   </symbol>
    53. 

  53. 

  54.   <symbol id="tag" viewBox="0 0 177.16535 177.16535">
    55. 

  55.     <g transform="translate(0 -875.2)">
    56. 

  56.      <path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
    57. 

  57.     </g>
    58. 

  58.   </symbol>
    59. 

  59. 

  60.   <symbol id="balloon" viewBox="0 0 141.73228 177.16535">
    61. 

  61.    <g transform="translate(0 -875.2)">
    62. 

  62.     <g>
    63. 

  63.      <path style="fill:#1a1a1a" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
    64. 

  64.      <path style="fill:#1a1a1a" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
    65. 

  65.      <path style="fill:#1a1a1a" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
    66. 

  66.      <path style="fill:#1a1a1a" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
    67. 

  67.      <path style="fill:#1a1a1a" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
    68. 

  68.      <rect style="stroke-width:0;fill:#1a1a1a" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
    69. 

  69.     </g>
    70. 

  70.    </g>
    71. 

  71.   </symbol>
    72. 

  72. 

  73.   <symbol id="info" viewBox="0 0 41.667 41.667">
    74. 

  74.    <g transform="translate(-37.035 -1004.6)">
    75. 

  75.     <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
    76. 

  76.     <g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
    77. 

  77.      <path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
    78. 

  78.      <path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
    79. 

  79.     </g>
    80. 

  80.    </g>
    81. 

  81.   </symbol>
    82. 

  82. 

  83.   <symbol id="warning" viewBox="0 0 48.430474 41.646302">
    84. 

  84.     <g transform="translate(-1.1273 -1010.2)">
    85. 

  85.      <path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
    86. 

  86.      <path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
    87. 

  87.      <path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
    88. 

  88.     </g>
    89. 

  89.   </symbol>
    90. 

  90. 

  91.   <symbol id="menu" viewBox="0 0 50 50">
    92. 

  92.    <rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="0" x="0"/>
    93. 

  93.    <rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="20" x="0"/>
    94. 

  94.    <rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="40" x="0"/>
    95. 

  95.  </symbol>
    96. 

  96. </svg>
    97. 

  97. 

  98.     <div class="wrapper">
    99. 

  99.       <header class="intro-and-nav" role="banner">
    100. 

  100.         <div>
    101. 

  101.           <div class="intro">
    102. 

  102.             <a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
    103. 

  103.               <img src="https://heydon.github.io/infusion/images/logo.png" alt="">
    104. 

  104.             </a>
    105. 

  105.             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
    106. 

  106.           </div>
    107. 

  107.           <nav id="patterns-nav" class="patterns" role="navigation">
    108. 

  108.             <button id="menu-button" aria-expanded="false">
    109. 

  109.               <svg viewBox="0 0 50 50" width="50" height="50">
    110. 

  110.                 <use xlink:href="#menu"></use>
    111. 

  111.               </svg>
    112. 

  112.               Menu
    113. 

  113.             </button>
    114. 

  114.             
    115. 

  115.             
    116. 

  116.               <ul id="patterns-list">
    117. 

  117.                 
    118. 

  118.                   <li class="pattern">
    119. 

  119.                     <a href="https://heydon.github.io/infusion/patterns/installation/" >
    120. 

  120.                       <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    121. 

  121.                       <span class="text">Installation</span>
    122. 

  122.                     </a>
    123. 

  123.                   </li>
    124. 

  124.                 
    125. 

  125.                   <li class="pattern">
    126. 

  126.                     <a href="https://heydon.github.io/infusion/patterns/library-setup/" aria-current="page">
    127. 

  127.                       <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    128. 

  128.                       <span class="text">Library setup</span>
    129. 

  129.                     </a>
    130. 

  130.                   </li>
    131. 

  131.                 
    132. 

  132.                   <li class="pattern">
    133. 

  133.                     <a href="https://heydon.github.io/infusion/patterns/serving/" >
    134. 

  134.                       <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    135. 

  135.                       <span class="text">Serving</span>
    136. 

  136.                     </a>
    137. 

  137.                   </li>
    138. 

  138.                 
    139. 

  139.                 
    140. 

  140.                   <li>
    141. 

  141.                     <h3>Writing</h3>
    142. 

  142.                     <ul>
    143. 

  143.                       
    144. 

  144.                         <li class="pattern">
    145. 

  145.                           <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
    146. 

  146.                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    147. 

  147.                             <span class="text">Library structure</span>
    148. 

  148.                           </a>
    149. 

  149.                         </li>
    150. 

  150.                       
    151. 

  151.                         <li class="pattern">
    152. 

  152.                           <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
    153. 

  153.                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    154. 

  154.                             <span class="text">Markdown &amp; metadata</span>
    155. 

  155.                           </a>
    156. 

  156.                         </li>
    157. 

  157.                       
    158. 

  158.                         <li class="pattern">
    159. 

  159.                           <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
    160. 

  160.                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    161. 

  161.                             <span class="text">Expandable sections</span>
    162. 

  162.                           </a>
    163. 

  163.                         </li>
    164. 

  164.                       
    165. 

  165.                         <li class="pattern">
    166. 

  166.                           <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
    167. 

  167.                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    168. 

  168.                             <span class="text">Notes &amp; warnings</span>
    169. 

  169.                           </a>
    170. 

  170.                         </li>
    171. 

  171.                       
    172. 

  172.                         <li class="pattern">
    173. 

  173.                           <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
    174. 

  174.                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    175. 

  175.                             <span class="text">References</span>
    176. 

  176.                           </a>
    177. 

  177.                         </li>
    178. 

  178.                       
    179. 

  179.                         <li class="pattern">
    180. 

  180.                           <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
    181. 

  181.                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    182. 

  182.                             <span class="text">Tables of contents</span>
    183. 

  183.                           </a>
    184. 

  184.                         </li>
    185. 

  185.                       
    186. 

  186.                     </ul>
    187. 

  187.                   </li>
    188. 

  188.                 
    189. 

  189.                   <li>
    190. 

  190.                     <h3>Media</h3>
    191. 

  191.                     <ul>
    192. 

  192.                       
    193. 

  193.                         <li class="pattern">
    194. 

  194.                           <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
    195. 

  195.                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    196. 

  196.                             <span class="text">Including images</span>
    197. 

  197.                           </a>
    198. 

  198.                         </li>
    199. 

  199.                       
    200. 

  200.                         <li class="pattern">
    201. 

  201.                           <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
    202. 

  202.                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    203. 

  203.                             <span class="text">Including videos</span>
    204. 

  204.                           </a>
    205. 

  205.                         </li>
    206. 

  206.                       
    207. 

  207.                     </ul>
    208. 

  208.                   </li>
    209. 

  209.                 
    210. 

  210.                   <li>
    211. 

  211.                     <h3>Coding</h3>
    212. 

  212.                     <ul>
    213. 

  213.                       
    214. 

  214.                         <li class="pattern">
    215. 

  215.                           <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
    216. 

  216.                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    217. 

  217.                             <span class="text">Code blocks</span>
    218. 

  218.                           </a>
    219. 

  219.                         </li>
    220. 

  220.                       
    221. 

  221.                         <li class="pattern">
    222. 

  222.                           <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
    223. 

  223.                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    224. 

  224.                             <span class="text">Demo embedding</span>
    225. 

  225.                           </a>
    226. 

  226.                         </li>
    227. 

  227.                       
    228. 

  228.                         <li class="pattern">
    229. 

  229.                           <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
    230. 

  230.                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    231. 

  231.                             <span class="text">Writing inline demos</span>
    232. 

  232.                           </a>
    233. 

  233.                         </li>
    234. 

  234.                       
    235. 

  235.                         <li class="pattern">
    236. 

  236.                           <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
    237. 

  237.                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    238. 

  238.                             <span class="text">Color palettes</span>
    239. 

  239.                           </a>
    240. 

  240.                         </li>
    241. 

  241.                       
    242. 

  242.                         <li class="pattern">
    243. 

  243.                           <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
    244. 

  244.                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    245. 

  245.                             <span class="text">Command line</span>
    246. 

  246.                           </a>
    247. 

  247.                         </li>
    248. 

  248.                       
    249. 

  249.                         <li class="pattern">
    250. 

  250.                           <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
    251. 

  251.                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    252. 

  252.                             <span class="text">File trees</span>
    253. 

  253.                           </a>
    254. 

  254.                         </li>
    255. 

  255.                       
    256. 

  256.                         <li class="pattern">
    257. 

  257.                           <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
    258. 

  258.                             <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
    259. 

  259.                             <span class="text">Tested using...</span>
    260. 

  260.                           </a>
    261. 

  261.                         </li>
    262. 

  262.                       
    263. 

  263.                     </ul>
    264. 

  264.                   </li>
    265. 

  265.                 
    266. 

  266.               </ul>
    267. 

  267.             
    268. 

  268.           </nav>
    269. 

  269.         </div>
    270. 

  270.       </header>
    271. 

  271.       <div class="main-and-footer">
    272. 

  272.         <div>
    273. 

  273.           
    274. 

  274.   <main id="main">
    275. 

  275.     <h1>Library setup</h1>
    276. 

  276.     
    277. 

  277.     
    278. 

  278.       
    279. 

  279. 

  280.   <nav class="toc" aria-labelledby="toc-heading">
    281. 

  281.     <h2 id="toc-heading">Table of contents</h2>
    282. 

  282.     <ol>
    283. 

  283.       
    284. 

  284.         <li>
    285. 

  285.           <a href="#cleaning-the-content-folder">
    286. 

  286.             “Cleaning” the content folder
    287. 

  287.           </a>
    288. 

  288.         </li>
    289. 

  289.       
    290. 

  290.         <li>
    291. 

  291.           <a href="#the-config-file">
    292. 

  292.             The config file
    293. 

  293.           </a>
    294. 

  294.         </li>
    295. 

  295.       
    296. 

  296.         <li>
    297. 

  297.           <a href="#including-a-logo">
    298. 

  298.             Including a logo
    299. 

  299.           </a>
    300. 

  300.         </li>
    301. 

  301.       
    302. 

  302.     </ol>
    303. 

  303.   </nav>
    304. 

  304. 

  305. 

  306.     
    307. 

  307.     
    308. 

  308. 

  309. <p>By now, you should have followed the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a> instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p>
    310. 

  310. 

  311. <h2 id="cleaning-the-content-folder">&ldquo;Cleaning&rdquo; the content folder</h2>
    312. 

  312. 

  313. <p>Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of <strong>Infusion</strong> is a facsimile of the original, containing all this documentation content. We want to delete that content and replace it with some starter content. There&rsquo;s a simple <code>clean</code> command for this.</p>
    314. 

  314. 

  315. <aside aria-label="warning" class="note warning">
    316. 

  316.   <div>
    317. 

  317.     <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
    318. 

  318.       <use xlink:href="#warning"></use>
    319. 

  319.     </svg>
    320. 

  320.     <p>If you are contributing to an existing <strong>Infusion</strong> library, do not run the following command. It will delete all of the patterns in that library. The <code>clean</code> command is just for libraries that you are starting from scratch.</p>
    321. 

  321. 

  322.   </div>
    323. 

  323. </aside>
    324. 

  324. 

  325. 

  326. <pre class="cmd"><code>  npm run clean</code></pre>
    327. 

  327. 

  328. 

  329. <p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>.</p>
    330. 

  330. 

  331. <h2 id="the-config-file">The config file</h2>
    332. 

  332. 

  333. <p>You&rsquo;ll also want to name your library and configure one or two other things in the <code>config.toml</code> file that&rsquo;s found at the root of your project. Here&rsquo;s how that file looks:</p>
    334. 

  334. 

  335. <pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
    336. 

  336. languageCode = "en-us"
    337. 

  337. title = "Infusion"
    338. 

  338. baseURL = "https://heydon.github.io/infusion/"
    339. 

  339. theme = "infusion"
    340. 

  340. 

  341. [params]
    342. 

  342.   description = "Documentation for the **Infusion** pattern library builder. This documentation is constructed using the builder itself."
    343. 

  343.   codePenUser = "Heydon"
    344. 

  344. </code></pre>
    345. 

  345. 

  346. 

  347. <ul>
    348. 

  348. <li><strong>title</strong> — This is the library&rsquo;s name, like &ldquo;Megacorp 5000 Pattern Library&rdquo;. You don&rsquo;t have to include the term &ldquo;pattern library&rdquo; if you don&rsquo;t want to. For <strong>Infusion&rsquo;s</strong> own version of <strong>Infusion</strong>, the <code>title</code> is, naturally, <em>Infusion</em> :-)</li>
    349. 

  349. <li><strong>baseURL</strong> — This is the root of the live site. Typically you will publish the site to Github Pages, so this should be the base URL for your Github Pages site.</li>
    350. 

  350. <li><strong>theme</strong> — This is the theme the library is using. Don&rsquo;t change this from &ldquo;infusion&rdquo;.</li>
    351. 

  351. <li><strong>description</strong> — This is a short description of the library and comes under the logo. You can include markdown syntax here, like <em>&#x002a;&#x002a;Infusion&#x002a;&#x002a;</em> in the above example for making the name of the library bold.</li>
    352. 

  352. <li><strong>codePenUser</strong> — If you want to embed codePens in your pattern files, you need to supply a codePen username here.</li>
    353. 

  353. </ul>
    354. 

  354. 

  355. <h2 id="including-a-logo">Including a logo</h2>
    356. 

  356. 

  357. <p>In the <code>images/static</code> folder, you&rsquo;ll find a <code>logo.png</code> file. Replace this file with your own company or project logo. Currently, only the PNG format is supported.</p>
    358. 

  358. 

  359. <p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>.</p>
    360. 

  360. 

  361.   </main>
    362. 

  362. 

  363.           <footer role="contentinfo">
    364. 

  364.             Powered by <strong>Infusion</strong>, a <strong>The Paciello Group</strong> project.<br>
    365. 

  365.             For general enquiries, contact us on info@paciellogroup.com.
    366. 

  366.           </footer>
    367. 

  367.         </div>
    368. 

  368.       </div>
    369. 

  369.     </div>
    370. 

  370.     
    371. 

  371.       <script src="https://heydon.github.io/infusion/js/prism.js"></script>
    372. 

  372.     
    373. 

  373.     <script src="https://heydon.github.io/infusion/js/dom-scripts.js"></script>
    374. 

  374.     
    375. 

  375.   </body>
    376. 

  376. </html>
    377.