Hepek

Static web page?

• web began with HTML (static page), just 18 tags
• delivered to the user exactly as stored
• just a file...
• cacheable (6x faster to load on avg.)
• improved security, performance...
• deployment is just copy/paste

Why not just write HTML/JS/CSS?

• cumbersome
• error-prone
• repeated code
• no variables, for loops for HTML
  (you could stitch it with JS..)
• no templates

Emmet?

                        div#myId  // press TAB, then ENTER
                        


                        ul.klasa>li*3>a{Item $}
                        

                            
Item 1
                            
Item 2
                            
Item 3
                        
                    

• very fast to code
• refactor, change?
• find and replace, regexes?
• are you really confident to press Replace ALL? :D

Static site generators

To the rescue!

• markdown for faster writing
• templates of all sorts
• variables, loops, if-s
• abstractions (categories, tags, data)
• plugins
• build pipeline, deployment
• git as database

Jekyll ISO 9001

(and why not?)

• markdown
• liquid templates
• front matter (YAML/TOML/JSON metadata)
• conventions like _posts, _layouts, _index.md etc.
• complicated sectioning/grouping/templating
  (list-page, single-page, restrictions)
• multiple concepts to learn (bundles, resources, shortcodes, snippets ...)

Liquid template engine

                        
{{ product.title }}
 {{ product.description }}
                        

                            
                            {% for variant in product.variants %}
                                {% if variant.available == true %}
                                     {{ variant.title }} for 
                                        {{ variant.price | money_with_currency }}
                                {% else %}
                                     {{ variant.title }} 
                                        - sold out!
                                {% endif %}
                            {% endfor %}
                            
                           
                        
                    

HTML open+close tag, if+endif, ugly...

Annoying include syntax, can't wrap content

Why Hepek?

• objects are files
• packages are folders
• traits are templates
• just Scala, autocomplete, compiler
• relative paths are trivial
• typesafe grid, code highlight, forms etc.
• markdown, KaTeX (math), sitemap.xml
• DIY abstractions, loops, anything you want
• PDF rendering

object == file

                        object MyFile extends Renderable {
                          override def render: String = {
                            // arbitrary Scala code
                            "Some text..."
                          }

                          override def relPath: File = new File("my_file.txt")
                        }
                    

Gets rendered to file: my_file.txt.

Everything else is built upon this!

package == folder

                        package site.pages

                        object MyPage extends ClassPackageRelativePath ...
                    

Gets rendered to file: my-page.html.

URL-friendly filename. Default extension is "html"

trait == template

                        trait MySiteTemplate {
                          def footer: Frag = div("footer")
                        }
                        
                        object MyPage extends MySiteTemplate {
                          override def footer = p(b("whatever"), "content...")
                        }
                    

Simple, intuitive, reusable, tweakable...

Demo time!