serbea 0.10.2 → 0.11.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +3 -0
  3. data/LICENSE.txt +21 -0
  4. data/README.md +13 -98
  5. data/docs/.gitignore +37 -0
  6. data/docs/Gemfile +5 -0
  7. data/docs/bridgetown.config.yml +6 -0
  8. data/docs/frontend/javascript/index.js +3 -0
  9. data/docs/frontend/styles/index.scss +169 -0
  10. data/docs/package.json +34 -0
  11. data/docs/plugins/builders/.keep +0 -0
  12. data/docs/plugins/site_builder.rb +3 -0
  13. data/docs/src/404.html +9 -0
  14. data/docs/src/_components/footer.liquid +3 -0
  15. data/docs/src/_components/head.liquid +9 -0
  16. data/docs/src/_components/navbar.liquid +5 -0
  17. data/docs/src/_data/site_metadata.yml +11 -0
  18. data/docs/src/_layouts/default.liquid +13 -0
  19. data/docs/src/_layouts/home.liquid +13 -0
  20. data/docs/src/_layouts/page.liquid +7 -0
  21. data/docs/src/_layouts/post.liquid +7 -0
  22. data/docs/src/favicon.ico +0 -0
  23. data/docs/src/images/.keep +1 -0
  24. data/docs/src/images/serbea-logomark.svg +46 -0
  25. data/docs/src/images/serbea-logotype.svg +31 -0
  26. data/docs/src/index.md +264 -0
  27. data/docs/start.js +17 -0
  28. data/docs/sync.js +35 -0
  29. data/docs/webpack.config.js +78 -0
  30. data/docs/yarn.lock +6022 -0
  31. data/lib/serbea/bridgetown_support.rb +1 -1
  32. data/lib/serbea/rails_support.rb +30 -3
  33. data/lib/serbea/template_engine.rb +27 -21
  34. data/lib/version.rb +1 -1
  35. metadata +34 -7
data/docs/src/_components/footer.liquid ADDED
@@ -0,0 +1,3 @@
1
+ <footer>
2
+ <strong><a href="https://github.com/bridgetownrb/serbea">Visit the GitHub Repo ▸</a></strong>
3
+ </footer>
data/docs/src/_components/head.liquid ADDED
@@ -0,0 +1,9 @@
1
+ <meta charset="utf-8" />
2
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
3
+ {% capture page_title %}{{ title | strip_html | strip_newlines }}{% endcapture %}
4
+ <title>{% if page_title != "" %}{{ page_title | escape }} | {{ metadata.title | escape }}{% else %}{{ metadata.title | escape }}: {{ metadata.tagline | escape }}{% endif %}</title>
5
+
6
+ <meta name="description" content="{{ metadata.description }}" />
7
+
8
+ <link rel="stylesheet" href="{% webpack_path css %}" />
9
+ <script src="{% webpack_path js %}" defer></script>
data/docs/src/_components/navbar.liquid ADDED
@@ -0,0 +1,5 @@
1
+ <nav>
2
+ <a href="/">Home</a>
3
+ <a href="/about">About</a>
4
+ <a href="/posts">Posts</a>
5
+ </nav>
data/docs/src/_data/site_metadata.yml ADDED
@@ -0,0 +1,11 @@
1
+ # Site settings
2
+ # These are used to personalize your new site. If you look in the HTML files,
3
+ # you will see them accessed via {{ site.metadata.title }}, {{ site.metadata.email }}, and so on.
4
+ # You can create any custom variable you would like, and they will be accessible
5
+ # in the templates via {{ site.metadata.myvariable }}.
6
+
7
+ title: Serbea
8
+ tagline: Similar to ERB, Except Awesomer
9
+ email: your-email@example.com
10
+ description: >- # this means to ignore newlines until "baseurl:"
11
+ The Ruby template engine you didn't realize you needed. Until now.
data/docs/src/_layouts/default.liquid ADDED
@@ -0,0 +1,13 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ {% render "head", metadata: site.metadata, title: page.title %}
5
+ </head>
6
+ <body class="{{ page.layout }} {{ page.page_class }}">
7
+ <main>
8
+ {{ content }}
9
+ </main>
10
+
11
+ {% render "footer", metadata: site.metadata %}
12
+ </body>
13
+ </html>
data/docs/src/_layouts/home.liquid ADDED
@@ -0,0 +1,13 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <h1 style="margin-bottom: 1.5rem">
6
+ <img src="/images/serbea-logomark.svg" alt="" style="height: 120px; vertical-align: middle;margin-bottom:20px" />
7
+ <img src="/images/serbea-logotype.svg" alt="Serbea" style="height: 60px; vertical-align: middle;margin-top:0px;margin-left:20px;margin-right:20px" />
8
+ </h1>
9
+
10
+ <p style="font-size: 1.5rem;text-align: center">Similar to ERB, Except Awesomer. 😉<p>
11
+
12
+
13
+ {{ content }}
data/docs/src/_layouts/page.liquid ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <h1>{{ page.title }}</h1>
6
+
7
+ {{ content }}
data/docs/src/_layouts/post.liquid ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <h1>{{ page.title }}</h1>
6
+
7
+ {{ content }}
data/docs/src/favicon.ico ADDED
File without changes
data/docs/src/images/.keep ADDED
@@ -0,0 +1 @@
1
+
data/docs/src/images/serbea-logomark.svg ADDED
@@ -0,0 +1,46 @@
1
+ <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
+ <svg width="100%" height="100%" viewBox="0 0 848 672" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
4
+ <g transform="matrix(1,0,0,1,-29.8271,-133.509)">
5
+ <g id="Crown" transform="matrix(1.94283,-0.342573,0.342573,1.94283,-660.715,-324.861)">
6
+ <g transform="matrix(1,0,0,1,338.996,574.935)">
7
+ <path d="M0,-27.85C0,-27.85 18.785,1.764 59.554,-3.329C100.137,-8.399 138.763,-35.738 153.842,-60.374C169.468,-85.906 159.961,-60.49 190.991,-33.415C215.684,-11.87 277.102,-12.028 315.753,-59.614L292.632,22.595L100.165,21.285C100.165,21.285 161.47,25.758 160.096,43.643C159.326,53.66 116.071,51.088 116.071,51.088L31.061,59.496L5.371,9.75L0,-27.85Z" style="fill:rgb(255,197,23);fill-rule:nonzero;"/>
8
+ </g>
9
+ <g transform="matrix(1,0,0,1,618.55,354.756)">
10
+ <path d="M0,289.249C0,289.249 -104.394,261.224 -250.128,290.651C-258.787,292.399 -265.693,286.999 -272.548,263.325C-284.32,222.667 -299.41,158.491 -315.286,122.497C-322.292,106.616 -307.578,95.172 -292.166,130.204C-276.298,166.272 -243.438,198.323 -199.914,178.782C-154.139,158.229 -123.55,108.555 -123.312,52.434C-123.077,-3.15 -106.962,15.067 -108.599,55.936C-110.229,96.637 -91.783,155.429 -48.344,163.134C-4.904,170.841 30.828,129.504 50.446,100.077C70.063,70.651 82.679,83.258 68.896,111.754C34.333,183.22 26.392,245.81 18.685,247.911C10.978,250.015 -151.338,236.001 -203.886,246.511C-203.886,246.511 -122.61,220.12 12.379,235.534C12.379,235.534 29.32,175.511 44.608,139.78C64.694,92.838 7.242,196.532 -60.487,172.011C-108.37,154.673 -115.604,90.268 -115.604,90.268C-115.604,90.268 -137.792,170.608 -202.717,193.497C-244.926,208.376 -273.039,182.405 -280.956,172.243C-294.967,154.259 -263.016,233.499 -255.965,261.925C-248.492,292.052 -128.449,237.87 0,289.249" style="fill:rgb(33,33,33);fill-rule:nonzero;"/>
11
+ </g>
12
+ <g transform="matrix(1,0,0,1,594.029,470.482)">
13
+ <path d="M0,-5.841C0,-5.841 -19.618,24.521 -31.063,20.552C-42.507,16.581 -31.297,6.538 -17.283,-5.14C-3.271,-16.818 11.21,-41.573 11.21,-41.573C11.21,-41.573 5.839,-5.14 19.149,17.515C27.045,30.952 -5.84,35.732 0,-5.841" style="fill:rgb(66,66,66);fill-rule:nonzero;"/>
14
+ </g>
15
+ <g transform="matrix(1,0,0,1,441.057,433.347)">
16
+ <path d="M0,60.957C-3.873,69.645 -19.911,68.078 -34.8,38.302C-34.8,38.302 -31.994,67.963 -42.973,75.904C-53.949,83.844 -64.227,73.568 -56.052,60.49C-47.877,47.41 -42.739,25.222 -45.542,1.167C-48.345,-22.887 -34.258,17.05 -23.239,30.945C-7.125,51.263 4.086,51.789 0,60.957" style="fill:rgb(66,66,66);fill-rule:nonzero;"/>
17
+ </g>
18
+ <g transform="matrix(1,0,0,1,297.659,415.948)">
19
+ <path d="M0,28.375C-2.336,28.375 -17.515,26.523 -17.516,12.262C-17.517,0.701 -4.556,0 0.934,10.627C5.999,20.434 7.475,28.375 0,28.375" style="fill:rgb(13,138,190);fill-rule:nonzero;"/>
20
+ </g>
21
+ <g transform="matrix(1,0,0,1,389.209,383.794)">
22
+ <path d="M0,26.666C-3.247,27.268 -10.275,21.061 -10.977,14.287C-11.677,7.514 -2.92,-0.602 2.336,7.281C8.156,16.01 6.306,25.498 0,26.666" style="fill:rgb(180,180,0);fill-rule:nonzero;"/>
23
+ </g>
24
+ <g transform="matrix(1,0,0,1,501.545,321.181)">
25
+ <path d="M0,27.855C-3.046,27.855 -9.575,16.646 -8.408,8.939C-7.24,1.232 7.18,-0.344 6.306,13.611C5.392,28.199 3.971,27.855 0,27.855" style="fill:rgb(78,29,173);fill-rule:nonzero;"/>
26
+ </g>
27
+ <g transform="matrix(1,0,0,1,609.379,384.265)">
28
+ <path d="M0,23.771C-3.458,22.144 -2.015,7.656 3.424,2.822C8.863,-2.014 20.344,5.24 13.697,15.511C7.05,25.785 3.425,25.382 0,23.771" style="fill:rgb(21,125,70);fill-rule:nonzero;"/>
29
+ </g>
30
+ <g transform="matrix(1,0,0,1,702.186,400.827)">
31
+ <path d="M0,20.158C-2.861,17.664 -2.361,7.414 3.341,2.08C8.77,-2.996 22.793,1.097 15.72,11.707C8.646,22.318 3.438,23.154 0,20.158" style="fill:rgb(131,50,49);fill-rule:nonzero;"/>
32
+ </g>
33
+ </g>
34
+ <g id="Ruby" transform="matrix(0.124931,-0.00562128,0.00607789,0.135079,174.745,297.846)">
35
+ <g transform="matrix(6.48717,0.291891,-0.319291,7.09613,-1103.31,-3013.49)">
36
+ <path d="M492.075,727.687C492.075,727.687 511.923,686.462 523.625,679.117C537.681,670.295 586.678,660.725 603.421,658.913C621.404,656.966 676.779,657.945 689.299,663.27C700.978,668.238 723.32,688.114 723.32,688.114L680.943,754.052L616.74,829.727L492.075,727.687Z" style="fill:rgb(255,38,0);"/>
37
+ </g>
38
+ <path d="M1857.49,1784.36C2322.56,1658.81 2768.05,1651.41 3204.63,1697.71C3285.05,1813.09 3372.96,1924.57 3466.4,2033.15C3372.07,1955.33 3275.12,1875.14 3191.41,1783.46C2791.68,1747.19 2401.35,1764.7 1989.93,1861.4C1936.64,2001.72 1891.85,2105.37 1808.71,2222.64C2154.79,2449.06 2400.47,2720.22 2635.71,2991.54C2795.62,2718.53 2994.13,2533.35 3254.11,2405.95C3024.95,2645.42 2781.68,2896.93 2607.32,3154.42C2316.75,2824.93 1981.15,2513.68 1579.75,2229.09C1686.62,2090.03 1779.21,1941.78 1857.49,1784.36Z" style="fill:rgb(186,28,37);"/>
39
+ <path d="M1539.68,2400.32C2120.96,2245.38 2718.04,2112.2 3391.29,2083.85C2984.15,2071.32 1759.42,2046.07 1539.68,2400.32Z" style="fill:rgb(186,28,37);"/>
40
+ <path d="M1961.19,1856.46C2155.33,2180.39 2467.85,2730.43 2661.99,3054.37C2605.16,2862.24 2333.8,1946.29 1961.19,1856.46Z" style="fill:rgb(186,28,37);"/>
41
+ <path d="M2167.88,2182.74C2326.38,2060.58 2340.25,2046.9 2603.75,1771.39C2433.18,1857.16 2191.45,1976.91 2167.88,2182.74Z" style="fill:rgb(186,28,37);"/>
42
+ <path d="M3025.93,2140.87C2890.4,2042.43 2803.43,1962.07 2540.52,1732.57C2739.01,1825.14 2985.55,1920.43 3025.93,2140.87Z" style="fill:rgb(186,28,37);"/>
43
+ <path d="M3220.69,1831.17C3006.84,2214.57 2785.29,2622.71 2626.7,3022.16C2679.92,2828.12 2857.93,2042.19 3220.69,1831.17Z" style="fill:rgb(186,28,37);"/>
44
+ </g>
45
+ </g>
46
+ </svg>
data/docs/src/images/serbea-logotype.svg ADDED
@@ -0,0 +1,31 @@
1
+ <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
+ <svg width="100%" height="100%" viewBox="0 0 640 153" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
4
+ <g transform="matrix(1,0,0,1,-212.234,-445.643)">
5
+ <g transform="matrix(1,0,0,1,-121.96,129.046)">
6
+ <g transform="matrix(192,0,0,192,331.831,465.963)">
7
+ <path d="M0.583,-0.208C0.583,-0.164 0.571,-0.125 0.548,-0.091C0.524,-0.056 0.491,-0.03 0.447,-0.011C0.404,0.008 0.352,0.017 0.293,0.017C0.176,0.017 0.082,-0.017 0.012,-0.085L0.097,-0.179C0.152,-0.132 0.216,-0.108 0.289,-0.108C0.325,-0.108 0.354,-0.115 0.375,-0.131C0.397,-0.146 0.408,-0.168 0.408,-0.195C0.408,-0.212 0.404,-0.227 0.396,-0.239C0.388,-0.251 0.375,-0.261 0.357,-0.271C0.338,-0.28 0.312,-0.29 0.278,-0.301C0.223,-0.318 0.178,-0.336 0.145,-0.357C0.111,-0.377 0.087,-0.401 0.072,-0.428C0.056,-0.454 0.049,-0.486 0.049,-0.523C0.049,-0.565 0.061,-0.601 0.084,-0.633C0.108,-0.664 0.14,-0.688 0.181,-0.704C0.222,-0.721 0.267,-0.729 0.316,-0.729C0.422,-0.729 0.507,-0.698 0.571,-0.637L0.492,-0.546C0.468,-0.565 0.442,-0.58 0.415,-0.59C0.387,-0.6 0.359,-0.605 0.33,-0.605C0.297,-0.605 0.271,-0.599 0.252,-0.587C0.233,-0.575 0.223,-0.558 0.223,-0.535C0.223,-0.52 0.227,-0.507 0.236,-0.497C0.244,-0.487 0.259,-0.478 0.279,-0.469C0.299,-0.46 0.329,-0.45 0.369,-0.437C0.417,-0.422 0.456,-0.405 0.487,-0.386C0.517,-0.367 0.541,-0.344 0.558,-0.315C0.574,-0.286 0.583,-0.25 0.583,-0.208Z" style="fill:rgb(33,33,33);fill-rule:nonzero;"/>
8
+ </g>
9
+ <g transform="matrix(192,0,0,192,438.465,465.963)">
10
+ <path d="M0.212,-0.225C0.217,-0.182 0.231,-0.151 0.254,-0.131C0.277,-0.111 0.307,-0.101 0.343,-0.101C0.389,-0.101 0.436,-0.116 0.483,-0.146L0.548,-0.057C0.521,-0.034 0.489,-0.016 0.452,-0.003C0.415,0.011 0.375,0.017 0.33,0.017C0.269,0.017 0.218,0.005 0.175,-0.019C0.133,-0.043 0.101,-0.077 0.079,-0.121C0.058,-0.164 0.047,-0.215 0.047,-0.272C0.047,-0.326 0.058,-0.375 0.078,-0.419C0.099,-0.464 0.13,-0.498 0.17,-0.524C0.21,-0.55 0.257,-0.563 0.313,-0.563C0.364,-0.563 0.409,-0.551 0.448,-0.529C0.486,-0.507 0.516,-0.475 0.537,-0.433C0.558,-0.391 0.568,-0.341 0.568,-0.283C0.568,-0.261 0.567,-0.242 0.565,-0.225L0.212,-0.225ZM0.313,-0.454C0.283,-0.454 0.259,-0.443 0.242,-0.422C0.224,-0.4 0.214,-0.367 0.21,-0.323L0.41,-0.323C0.409,-0.41 0.377,-0.454 0.313,-0.454Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
11
+ </g>
12
+ <g transform="matrix(192,0,0,192,545.099,465.963)">
13
+ <path d="M0.488,-0.561C0.52,-0.561 0.55,-0.556 0.577,-0.545L0.547,-0.317L0.446,-0.317L0.446,-0.417C0.416,-0.412 0.389,-0.396 0.366,-0.368C0.342,-0.341 0.324,-0.306 0.311,-0.265L0.311,-0.109L0.418,-0.109L0.418,-0L0.077,-0L0.077,-0.109L0.149,-0.109L0.149,-0.437L0.077,-0.437L0.077,-0.545L0.272,-0.545L0.302,-0.422C0.322,-0.469 0.346,-0.504 0.377,-0.527C0.407,-0.55 0.444,-0.561 0.488,-0.561Z" style="fill:url(#_Linear2);fill-rule:nonzero;"/>
14
+ </g>
15
+ <g transform="matrix(192,0,0,192,651.732,465.963)">
16
+ <path d="M0.234,-0.489C0.251,-0.512 0.272,-0.53 0.296,-0.543C0.32,-0.556 0.346,-0.563 0.373,-0.563C0.441,-0.563 0.492,-0.537 0.525,-0.487C0.558,-0.436 0.574,-0.365 0.574,-0.274C0.574,-0.217 0.566,-0.167 0.549,-0.123C0.532,-0.079 0.507,-0.045 0.475,-0.02C0.442,0.005 0.403,0.017 0.356,0.017C0.329,0.017 0.304,0.012 0.28,0C0.257,-0.011 0.237,-0.028 0.222,-0.049L0.215,-0L0.072,-0L0.072,-0.761L0.234,-0.778L0.234,-0.489ZM0.314,-0.101C0.376,-0.101 0.407,-0.158 0.407,-0.272C0.407,-0.316 0.404,-0.35 0.397,-0.375C0.39,-0.4 0.38,-0.418 0.368,-0.428C0.355,-0.438 0.34,-0.443 0.322,-0.443C0.289,-0.443 0.259,-0.422 0.234,-0.38L0.234,-0.15C0.244,-0.134 0.256,-0.121 0.269,-0.113C0.282,-0.105 0.297,-0.101 0.314,-0.101Z" style="fill:url(#_Linear3);fill-rule:nonzero;"/>
17
+ </g>
18
+ <g transform="matrix(192,0,0,192,758.366,465.963)">
19
+ <path d="M0.212,-0.225C0.217,-0.182 0.231,-0.151 0.254,-0.131C0.277,-0.111 0.307,-0.101 0.343,-0.101C0.389,-0.101 0.436,-0.116 0.483,-0.146L0.548,-0.057C0.521,-0.034 0.489,-0.016 0.452,-0.003C0.415,0.011 0.375,0.017 0.33,0.017C0.269,0.017 0.218,0.005 0.175,-0.019C0.133,-0.043 0.101,-0.077 0.079,-0.121C0.058,-0.164 0.047,-0.215 0.047,-0.272C0.047,-0.326 0.058,-0.375 0.078,-0.419C0.099,-0.464 0.13,-0.498 0.17,-0.524C0.21,-0.55 0.257,-0.563 0.313,-0.563C0.364,-0.563 0.409,-0.551 0.448,-0.529C0.486,-0.507 0.516,-0.475 0.537,-0.433C0.558,-0.391 0.568,-0.341 0.568,-0.283C0.568,-0.261 0.567,-0.242 0.565,-0.225L0.212,-0.225ZM0.313,-0.454C0.283,-0.454 0.259,-0.443 0.242,-0.422C0.224,-0.4 0.214,-0.367 0.21,-0.323L0.41,-0.323C0.409,-0.41 0.377,-0.454 0.313,-0.454Z" style="fill:rgb(33,33,33);fill-rule:nonzero;"/>
20
+ </g>
21
+ <g transform="matrix(192,0,0,192,865,465.963)">
22
+ <path d="M0.53,-0.157C0.53,-0.137 0.533,-0.122 0.538,-0.113C0.544,-0.103 0.553,-0.096 0.566,-0.091L0.533,0.015C0.5,0.012 0.472,0.005 0.451,-0.006C0.429,-0.018 0.412,-0.035 0.399,-0.056C0.379,-0.032 0.353,-0.014 0.321,-0.001C0.289,0.011 0.256,0.017 0.22,0.017C0.183,0.017 0.151,0.01 0.123,-0.004C0.095,-0.019 0.074,-0.039 0.058,-0.065C0.043,-0.091 0.036,-0.12 0.036,-0.154C0.036,-0.193 0.046,-0.226 0.067,-0.254C0.088,-0.282 0.118,-0.303 0.158,-0.317C0.198,-0.332 0.245,-0.339 0.301,-0.339L0.374,-0.339L0.374,-0.359C0.374,-0.415 0.338,-0.443 0.267,-0.443C0.249,-0.443 0.226,-0.441 0.198,-0.435C0.171,-0.43 0.144,-0.423 0.117,-0.414L0.08,-0.522C0.114,-0.535 0.15,-0.545 0.188,-0.552C0.226,-0.559 0.261,-0.563 0.292,-0.563C0.372,-0.563 0.432,-0.546 0.471,-0.514C0.511,-0.481 0.53,-0.434 0.53,-0.37L0.53,-0.157ZM0.276,-0.098C0.294,-0.098 0.313,-0.104 0.332,-0.115C0.351,-0.125 0.365,-0.14 0.374,-0.158L0.374,-0.247L0.334,-0.247C0.29,-0.247 0.257,-0.24 0.235,-0.226C0.214,-0.212 0.203,-0.192 0.203,-0.165C0.203,-0.144 0.209,-0.128 0.222,-0.116C0.235,-0.104 0.253,-0.098 0.276,-0.098Z" style="fill:rgb(33,33,33);fill-rule:nonzero;"/>
23
+ </g>
24
+ </g>
25
+ </g>
26
+ <defs>
27
+ <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.00251806,-0.544073,0.544073,-0.00251806,0.331076,-0.00393231)"><stop offset="0" style="stop-color:rgb(124,19,26);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(33,33,33);stop-opacity:1"/></linearGradient>
28
+ <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.00258705,-0.535139,0.535139,0.00258705,0.232495,-0.0154533)"><stop offset="0" style="stop-color:rgb(126,19,26);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(33,33,33);stop-opacity:1"/></linearGradient>
29
+ <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.00421702,0.643286,-0.643286,0.00421702,0.209886,-0.664778)"><stop offset="0" style="stop-color:rgb(33,33,33);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(126,19,26);stop-opacity:1"/></linearGradient>
30
+ </defs>
31
+ </svg>
data/docs/src/index.md ADDED
@@ -0,0 +1,264 @@
1
+ ---
2
+ layout: home
3
+ ---
4
+
5
+ ### Serbea is the Ruby template engine you didn't realize you needed. Until now.
6
+ {:.no_toc}
7
+
8
+ **Serbea** combines the best ideas from "brace-style" template languages such as Liquid, Nunjucks, Twig, Jinja, Mustache, etc.—and applies them to the world of **ERB**. You can use Serbea in Rails applications, Bridgetown static sites, or pretty much any Ruby scenario you could imagine.
9
+
10
+ **Serbea**. Finally, something to crow(n) about. _Le roi est mort, vive le roi!_
11
+
12
+ ### Table of Contents
13
+ {:.no_toc}
14
+ * …
15
+ {:toc}
16
+
17
+ ### Features and Syntax
18
+
19
+ {% raw %}
20
+
21
+ * **Real Ruby**. Like, for real.
22
+ * Supports every convention of ERB and builds upon it with new features (which is why it's "awesomer!").
23
+ * Filters! Frontmatter!! Pipeline operators!!! 🤩
24
+ * The filters accessible within Serbea templates are either traditional helpers (where the variable gets passed as the first argument) or _instance methods of the variable itself_. So you can build extremely expressive pipelines that take advantage of the code you already know and love.
25
+
26
+ For example, in Rails you could write: `{{ "My Link" | sub: "Link", "Page" | link_to: route_path }}`.
27
+ * The `Serbea::Pipeline.exec` method lets you pass a pipeline template in, along with an optional input value or included helpers module, and you'll get the output as a object of any type (not converted to a string like in traditional templates).
28
+
29
+ For example:
30
+
31
+ `Serbea::Pipeline.exec %( arr |> map: ->(i) { i * 10 } ), arr: [1,2,3]`
32
+
33
+ will return:
34
+
35
+ `[10, 20, 30]`
36
+
37
+ * Serbea will HTML autoescape variables by default within pipeline (`{{ }}`) tags. Use the `safe` / `raw` or `escape` / `h` filters to control escaping on output.
38
+ * Directives apply handy shortcuts that modify the template at the syntax level before processing through Ruby.
39
+
40
+ `{%@ %}` is a shortcut for rendering either string-named partials (`render "tmpl"`) or object instances (`render MyComponent.new`). And in Rails, you can use new Turbo Stream directives for extremely consise templates:
41
+
42
+ ```serb
43
+ {%@remove "timeline-read-more" %}
44
+ {%@append "timeline" do %}
45
+ {%@ partial: "posts", formats: [:html] %}
46
+ {% end %}
47
+ ```
48
+ * Built-in frontmatter support. Now you can access the variables written into a top YAML block within your templates. In any Rails view, including layouts, you'll have access to the `@frontmatter` ivar which is a merged `HashWithDotAccess::Hash` with data from any part of the view tree (partials, pages, layout).
49
+
50
+ For example, you could put `<title>{{ @frontmatter.title }}</title>` in your head partial, and then each page could define `title` frontmatter individually. You can even use Ruby string interpolation within the YAML so titles and other metadata can come from `t` language helpers.
51
+
52
+
53
+ {% endraw %}
54
+
55
+ ### What Serbea Looks Like
56
+
57
+ {% raw %}
58
+
59
+ ```serb
60
+ <!-- example.serb -->
61
+
62
+ {% wow = capture do %}
63
+ This is {{ "amazing" + "!" | upcase }}
64
+ {% end %}
65
+
66
+ {% wow = wow.each_char.reduce("") do |newstr, c|
67
+ newstr += " #{c}"
68
+ end.strip %}
69
+
70
+ {{ wow | prepend: "OMG! " }}
71
+ ```
72
+
73
+ Serbea lets us define helpers inside templates directly:
74
+
75
+ ```serb
76
+ <p>
77
+ {%
78
+ helper :multiply_array do |input, multiply_by = 2|
79
+ input.map do |i|
80
+ i.to_i * multiply_by
81
+ end
82
+ end
83
+ %}
84
+
85
+ Multiply! {{ [1,3,6, "9"] | multiply_array: 10 }}
86
+ </p>
87
+ ```
88
+
89
+ Forms, partials, etc. No sweat!
90
+
91
+ ```serb
92
+ {%= form classname: "checkout" do |f| %}
93
+ {{ f.input :first_name, required: true | errors: error_messages }}
94
+ {% end %}
95
+
96
+ {%= render "box" do %}
97
+ This is **dope!**
98
+ {%= render "card", title: "Nifty!" do %}
99
+ So great.
100
+ {% end %}
101
+ {% end %}
102
+ ```
103
+
104
+ Let's simplify that using the render directive!
105
+
106
+ ```serb
107
+ {%@ "box" do %}
108
+ This is **dope!**
109
+ {%@ "card", title: "Nifty!" do %}
110
+ So great.
111
+ {% end %}
112
+ {% end %}
113
+ ```
114
+
115
+ Works with ViewComponent! And we can use the render directive!
116
+
117
+ ```serb
118
+ {%@ Theme::DropdownComponent name: "banner", label: "Banners" do |dropdown| %}
119
+ {% RegistryTheme::BANNERS.each do |banner| %}
120
+ {% dropdown.slot(:item, value: banner) do %}
121
+ <img src="{{ banner | parameterize: separator: "_" | prepend: "/themes/" | append: ".jpg" }}">
122
+ <strong>{{ banner }}</strong>
123
+ {% end %}
124
+ {% end %}
125
+ {% end %}
126
+ ```
127
+
128
+ The `|` and `|>` pipeline operators are equivalent, so you can write like this if you want!
129
+
130
+ ```serb
131
+ {{
132
+ [1,2,3] |>
133
+ map: -> i { i * 10 }
134
+ |>
135
+ filter: -> i do
136
+ i > 15 # works fine with multiline blocks
137
+ end
138
+ |>
139
+ assign_to: :array_length
140
+ }}
141
+
142
+ Array length: {{ @array_length.length }}
143
+ ```
144
+ {% endraw %}
145
+
146
+ {{
147
+ [1,2,3] |>
148
+ map: -> i { i * 10 }
149
+ |>
150
+ filter: -> i do
151
+ i > 15 # works fine with multiline blocks
152
+ end
153
+ |>
154
+ assign_to: :array_length
155
+ }}
156
+
157
+ The answer of course is: **{{ @array_length.length }}**
158
+
159
+ ### Installation and Usage
160
+
161
+ Simply add the Serbea gem to your `Gemfile`:
162
+
163
+ ```
164
+ bundle add serbea
165
+ ```
166
+
167
+ or install standalone:
168
+
169
+ ```
170
+ gem install serbea
171
+ ```
172
+
173
+ If you're using [Bridgetown](https://www.bridgetownrb.com), make sure it's included in the `bridgetown_plugins` group.
174
+
175
+ Serbea templates are typically saved using a `.serb` extension. If you use VS Code as your editor, there is a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=whitefusion.serbea) to enable Serbea syntax highlighting as well as palette commands to convert selected ERB syntax to Serbea.
176
+
177
+ To convert Serbea code in a basic Ruby script, all you have to do is require the Serbea gem, include the necessary helpers module, and use the Tilt interface to load and render the template. Example:
178
+
179
+ {% raw %}
180
+ ```ruby
181
+ require "serbea"
182
+ include Serbea::Helpers
183
+
184
+ tmpl = Tilt::SerbeaTemplate.new { "Hello {{ world | append: '!' }}" }
185
+ tmpl.render(self, world: "World")
186
+
187
+ # Hello World!
188
+ ```
189
+
190
+ You'll likely want to bind to a dedicated view object instead of `self` as in the example above, since that view object can include the Serbea helpers without fear of any collision with existing object methods in your codebase.
191
+
192
+ Serbea helpers include `pipeline` which faciliates the `{{ }}` template syntax, `capture`, `helper`, `safe`, `escape`, and `assign_to`.
193
+ {% endraw %}
194
+
195
+ ### Rails Support
196
+
197
+ Serbea fully supports Rails (tested with Rails 6), and even includes special directives for Turbo Streams as highlighted above.
198
+
199
+ Simply use the `.serb` extension wherever you would use `.erb` normally. You can freely mix 'n' match Serbea templates with other template engines, so for instance `index.html.erb` and `show.html.serb` can live side-by-side.
200
+
201
+ **Note:** if you use a Serbea template as a _layout_, you may encounter some subtle rendering issues with ERB page templates that use the layout. It is recommended you use Serbea for layouts only if you intend to standardize on Serbea for your application.
202
+
203
+ **Upgrade your helpers!** While you can use the same kind of syntax for helpers you may be accustomed to in ERB, using the pipeline syntax can be far more enjoyable and better express intent. For example, instead of confusing nested method calls like this:
204
+
205
+ {% raw %}
206
+ ```erb
207
+ Here's a <%= link_to(highlight(" link for you ".strip.titleize, "you"), other_page_path) %>.
208
+ ```
209
+
210
+ You could instead write this:
211
+
212
+ ```serb
213
+ Here's a {{ " link for you " | strip | titleize | highlight: "you" | link_to: other_page_path }}
214
+ ```
215
+
216
+ which is _far_ easier to parse visually and less likely to cause bugs due to nesting errors.
217
+
218
+ **Stay Safe!** In pipelines, Serbea uses the same safe escaping logic you've experienced with ERB. So if you were to put `{{ "<p>Aha!</p>" }}` in a template, you don't get an HTML paragraph, you get the literal characters of the p tags. You would have to use the `safe` (aliased `raw`) filter in order to get working HTML output. _However_, that is NOT the case with expressions. `{%= "<p>Bingo!</p>" %}` outputs that text verbatim and you get a valid HTML paragraph. So use expressions sparingly and only in cases where you know the values have already been cleansed (e.g., rendering partials or components, using form helpers, yielding in layouts, etc.). Alternatively, you can use the `escape` (aliased `h`) helper: `{%= escape "<p>Bingo!</p>" %}`.
219
+
220
+ {% endraw %}
221
+
222
+ ### Bridgetown Support
223
+
224
+ Serbea fully supports [Bridgetown](https://www.bridgetownrb.com). In fact, Serbea is an excellent upgrade from Liquid as the syntax initially looks familar, yet it enbles the full power of real Ruby in your templates.
225
+
226
+ Out of the box, you can name pages and partials with a `.serb` extension. But for even more flexibility, you can add `template_engine: serbea` to your `bridgetown.config.yml` configuration. This will default all pages and documents to Serbea unless you specifically use front matter to choose a different template engine (or use an extension such as `.liquid` or `.erb`).
227
+
228
+ Here's an abreviated example of what the Post layout template looks like on the [RUBY3.dev](https://www.ruby3.dev) blog:
229
+
230
+ {% raw %}
231
+ ```serb
232
+ ---
233
+ layout: bulmatown/post
234
+ ---
235
+
236
+ <div class="content-column">{%= yield %}</div>
237
+
238
+ {{ liquid_render "subscribe" }}
239
+
240
+ {% if page.data.image_credit %}
241
+ <p class="mt-6 is-size-7 has-text-centered">
242
+ <em>Banner image by <a href="{{ page.data.image_credit.url | safe }}">
243
+ {{ page.data.image_credit.label }}
244
+ </a></em>
245
+ </p>
246
+ {% end %}
247
+
248
+ {% posts = page.related_posts[0...2] %}
249
+ {{ liquid_render "bulmatown/collection", collection: posts, metadata: site.metadata }}
250
+
251
+ {% if page.related_posts.size > 2 %}
252
+ <a href="/articles">Read More Articles</a>
253
+ {% end %}
254
+
255
+ {%= markdownify do %}
256
+ {{ liquid_render "sponsor" }}
257
+ {% end %}
258
+ ```
259
+ {% endraw %}
260
+
261
+
262
+ ### How Pipelines Work Under the Hood
263
+
264
+ Documentation forthcoming!
data/docs/start.js ADDED
@@ -0,0 +1,17 @@
1
+ const concurrently = require('concurrently');
2
+
3
+ // By default, configure Bridgetown to use port 4001 so Browsersync can use 4000
4
+ // See also Browsersync settings in sync.js
5
+ const port = 4001
6
+
7
+ /////////////////
8
+ // Concurrently
9
+ /////////////////
10
+ concurrently([
11
+ { command: "yarn webpack-dev", name: "Webpack", prefixColor: "yellow"},
12
+ { command: "sleep 4; yarn serve --port " + port, name: "Bridgetown", prefixColor: "green"},
13
+ { command: "sleep 8; yarn sync", name: "Live", prefixColor: "blue"}
14
+ ], {
15
+ restartTries: 3,
16
+ killOthers: ['failure', 'success'],
17
+ }).then(() => { console.log("Done.");console.log('\033[0G'); }, () => {});