Static Site Generators

Total Page:16

File Type:pdf, Size:1020Kb

Static Site Generators Static Site Generators Group 2 Reinhard Egger, Daniel Geiger, Lorenz Leitner and Peter Oberrauner 706.041 Information Architecture and Web Usability WS 2019/2020 Graz University of Technology 02 Dec 2019 Abstract Static Site Generators are tools to automatically create fully-fledged HTML web pages that can be served statically to each client with no need for regeneration. In an age of per-client dynamically created web pages, static web pages offer a valuable alternative, the benefits of which are discussed in this survey paper. The way in which Static Site Generators work and what technologies they use is described, as well as how content can be rendered on the web in general. An overview of the most relevant Static Site Generators and their features is given, although not all can be mentioned due to the sheer number of Static Site Generators in existence. A concluding recommendation for people looking to choose a tool suited to their liking is provided as well. © Copyright 2019 by the author(s), except as otherwise noted. This work is placed under a Creative Commons Attribution 4.0 International (CC BY 4.0) licence. Contents Contents iii List of Figures v List of Tables vii List of Listings ix 1 Introduction 1 1.1 Basics . .1 1.1.1 How They Work . .1 1.1.2 Example . .1 1.2 Alternatives . .1 1.2.1 CMS . .2 1.2.2 Flat-File CMS . .2 2 Methods of Rendering Content on the Web5 2.1 Server-Side Rendering (SSR) . .5 2.1.1 Strengths . .5 2.1.2 Weaknesses . .5 2.2 Client-Side Rendering (CSR) . .6 2.2.1 Strengths . .6 2.2.2 Weaknesses . .6 2.3 Static Rendering . .6 2.3.1 Strengths . .6 2.3.2 Weaknesses . .7 2.3.3 Rendering of Dynamic Content . .7 3 Templating Engines9 3.1 Advantages . .9 3.2 Example . .9 3.3 Types of Different Templating Engines . .9 3.4 Consolidate.js . .9 3.5 Syntax Similarities . 10 i 4 Overview of Static Site Generators (Standout Features) 11 4.1 Jekyll (Ruby) . 11 4.1.1 Input Languages . 11 4.1.2 Main Use . 11 4.1.3 Templating Engine . 12 4.1.4 Content Model . 12 4.1.5 Asset Pipeline . 12 4.1.6 Extension Possibility . 12 4.2 Hugo (Go) . 12 4.2.1 Input Languages . 12 4.2.2 Usability . 13 4.2.3 Community . 13 4.2.4 Build Performance . 13 4.2.5 Main Use . 13 4.2.6 Templating Engine . 13 4.2.7 Content Model . 13 4.2.8 Asset Pipeline . 13 4.2.9 Extension Possibility . 13 4.3 Metalsmith (JS) . 14 4.3.1 Input Languages . 14 4.3.2 Usability . 14 4.3.3 Community . 14 4.3.4 Build Performance . 14 4.3.5 Main Use . 14 4.3.6 Templating Engine . 14 4.3.7 Extension Possibility . 14 4.4 Wintersmith (JS) . 15 4.4.1 Input Languages . 15 4.4.2 Usability . 15 4.4.3 Community . 15 4.4.4 Build Performance . 15 4.4.5 Main Use . 15 4.4.6 Templating Engine . 15 4.4.7 Extension Possibility . 15 4.5 Sculpin (PHP) . 15 4.5.1 Input Languages . 16 4.5.2 Usability . 16 4.5.3 Community . 16 4.5.4 Build Performance . 16 4.5.5 Main Use . 16 4.5.6 Templating Engine . 16 4.5.7 Extension Possibility . 16 4.6 Frontend-Framework-Based SSGs (JS) . 16 4.6.1 Input Languages . 16 ii 4.6.2 Usability . 17 4.6.3 Community . 17 4.6.4 Build Performance . 17 4.6.5 Main Use . 17 4.6.6 Extension Possibility . 17 4.6.7 Gatsby . 17 4.6.8 React Static . 18 4.6.9 Next . 18 4.6.10 Nuxt . 19 4.6.11 Gridsome . 19 4.7 Overview of SSG Characteristics . 19 5 Concluding Remarks 25 5.1 Ranking . 25 5.2 Recommendation . 25 Bibliography 27 iii iv List of Figures 1.1 Static Site Generator Diagram . .2 1.2 Hugo Example . .3 v vi List of Tables 4.1 Characteristics overview of Hugo, Metalsmith, Next.js, Jekyll . 20 4.2 Characteristics overview of Nuxt, Mikser, Harp, Wintersmith . 21 4.3 Characteristics overview of Roots, Middleman, Kirby, Grav . 22 4.4 Characteristics overview of Pico CMS, Gatsby, React Static, Sculpin . 23 vii viii List of Listings 1.1 Hugo Example..........................................2 3.1 Pug Syntax Example....................................... 10 3.2 Pug Generated Code Example.................................. 10 4.1 FrontMatter............................................ 12 4.2 GatsbyFileStructure....................................... 17 4.3 GatsbyTemplateExample.................................... 18 ix x Chapter 1 Introduction Static Site Generators are increasingly popular tools to generate Hypertext Markup Language (HTML) web pages. Before static site generators existed, web developers wrote HTML web pages by hand, which is time-consuming and does not adhere to the Don’t Repeat Yourself (DRY) principle, as much of the HTML code is essentially the same, most often only differing in content, while the structure code necessary for the page setup remains the same. 1.1 Basics Static site generators take care of much of the leg work web developers used to have to do. Only the content and some optional metadata need to be entered manually, the surrounding HTML code is created.
Recommended publications
  • Modern Web Application Frameworks
    MASARYKOVA UNIVERZITA FAKULTA INFORMATIKY Û¡¢£¤¥¦§¨ª«¬­Æ°±²³´µ·¸¹º»¼½¾¿Ý Modern Web Application Frameworks MASTER’S THESIS Bc. Jan Pater Brno, autumn 2015 Declaration Hereby I declare, that this paper is my original authorial work, which I have worked out by my own. All sources, references and literature used or ex- cerpted during elaboration of this work are properly cited and listed in complete reference to the due source. Bc. Jan Pater Advisor: doc. RNDr. Petr Sojka, Ph.D. i Abstract The aim of this paper was the analysis of major web application frameworks and the design and implementation of applications for website content ma- nagement of Laboratory of Multimedia Electronic Applications and Film festival organized by Faculty of Informatics. The paper introduces readers into web application development problematic and focuses on characte- ristics and specifics of ten selected modern web application frameworks, which were described and compared on the basis of relevant criteria. Practi- cal part of the paper includes the selection of a suitable framework for im- plementation of both applications and describes their design, development process and deployment within the laboratory. ii Keywords Web application, Framework, PHP,Java, Ruby, Python, Laravel, Nette, Phal- con, Rails, Padrino, Django, Flask, Grails, Vaadin, Play, LEMMA, Film fes- tival iii Acknowledgement I would like to show my gratitude to my supervisor doc. RNDr. Petr So- jka, Ph.D. for his advice and comments on this thesis as well as to RNDr. Lukáš Hejtmánek, Ph.D. for his assistance with application deployment and server setup. Many thanks also go to OndˇrejTom for his valuable help and advice during application development.
    [Show full text]
  • Managing Data Constraints in Database-Backed Web Applications
    Managing data constraints in database-backed web applications Junwen Yang Utsav Sethi Cong Yan University of Chicago, USA University of Chicago, USA University of Washington, USA [email protected] [email protected] [email protected] Alvin Cheung Shan Lu University of California, Berkeley University of Chicago, USA USA [email protected] [email protected] ABSTRACT Database-backed web applications manipulate large amounts of … <input value=‘title’ pattern=‘.+’ title=‘invalid title’/> persistent data, and such applications often contain constraints … that restrict data length, data value, and other data properties. Such constraints are critical in ensuring the reliability and usability of Field Type Null Default … these applications. In this paper, we present a comprehensive study on where data constraints are expressed, what they are about, how title varchar(30) NO NULL … often they evolve, and how their violations are handled. The re- sults show that developers struggle with maintaining consistent … data constraints and checking them across different components validates_length_of : title, maximum: 60, message: ‘title is too long’ Mysql::Error and versions of their web applications, leading to various prob- … lems. Guided by our study, we developed checking tools and API enhancements that can automatically detect such problems and Figure 1: Crossstack data constraints improve the quality of such applications. 1 INTRODUCTION 60 characters)” error; finally, she tried a title a little shorter than60 1.1 Motivation characters, but the web page then crashed with all the filled content Constraints are often associated with data used in software. These lost with some unreadable database error displayed. range from describing the expected length, value, uniqueness, and It turned out that different constraints were specified for the other properties of the stored data.
    [Show full text]
  • AN INTRODUCTION by Enrique Canals / @Ecanals ENRIQUE CANALS
    THE BEAUTY OF CSS PRE-PROCESSORS: AN INTRODUCTION by Enrique Canals / @ecanals ENRIQUE CANALS Software Developer @ The Hybrid Group Currently working with Sphero, creating cool things for connecting robots to the internet Worked on several interesting web projects with Pebble Current maintainer of the TextMate SCSS Bundle for syntax highlighting with support for Atom and Sublime @ecanals | www.enriquecanals.com WHAT WE'RE GOING TO COVER IN THIS SESSION PART 1 CSS basics and shortcomings What are CSS pre-processors How pre-processors work and don't work PART 2 Which one do I use? (Sass, Less, Stylus) Workflow Integration Using pre-processors in WordPress theme development PART 1 CSS BASICS AND SHORTCOMINGS BASIC CSS SYNTAX This is the CSS you're used to. html, body { width: 100%; height: 100%; overflow: hidden; } body { background-color: #fff; color: #000; line-height: 1; position: relative; } Simple enough. NOW SOMETHING A LITTLE MORE COMPLEX: .reveal.slide section, .reveal.linear section { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .reveal .slides > section[data-transition=slide].past, .reveal.slide .slides > section:not([data-transition] -webkit-transform: translate(-150%, 0); -ms-transform: translate(-150%, 0); transform: translate(-150%, 0); } .reveal .slides > section[data-transition=slide].future, .reveal.slide .slides > section:not([data-transition] -webkit-transform: translate(150%, 0); -ms-transform: translate(150%, 0); transform: translate(150%, 0); } .reveal .slides > section > section[data-transition=slide].past, .reveal.slide .slides > section > section -webkit-transform: translate(0, -150%); -ms-transform: translate(0, -150%); transform: translate(0, -150%); } .reveal .slides > section > section[data-transition=slide].future, .reveal.slide .slides > section > section -webkit-transform: translate(0, 150%); -ms-transform: translate(0, 150%); transform: translate(0, 150%); } You can see how this get's ugly fast.
    [Show full text]
  • Ruby Best Practices.Pdf
    Ruby Best Practices Ruby Best Practices Gregory Brown foreword by Yukihiro “Matz” Matsumoto Beijing • Cambridge • Farnham • Köln • Sebastopol • Taipei • Tokyo Ruby Best Practices by Gregory Brown Copyright © 2009 Gregory Brown. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or [email protected]. Editor: Mike Loukides Indexer: Ellen Troutman Zaig Production Editor: Sarah Schneider Cover Designer: Karen Montgomery Copyeditor: Nancy Kotary Interior Designer: David Futato Proofreader: Sada Preisch Illustrator: Robert Romano Printing History: June 2009: First Edition. O’Reilly and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Ruby Best Practices, the image of a green crab, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information con- tained herein. In March 2010, this work will be released under the Creative Commons Attribution- Noncommercial-Share Alike 3.0 License.
    [Show full text]
  • Go Web App Example
    Go Web App Example Titaniferous and nonacademic Marcio smoodges his thetas attuned directs decreasingly. Fustiest Lennie seethe, his Pan-Americanism ballasts flitted gramophonically. Flavourless Elwyn dematerializing her reprobates so forbiddingly that Fonsie witness very sartorially. Ide support for web applications possible through gvm is go app and psych and unlock new subcommand go library in one configuration with embedded interface, take in a similar Basic Role-Based HTTP Authorization in fare with Casbin. Tools and web framework for everything there is big goals. Fully managed environment is go app, i is a serverless: verifying user when i personally use the example, decentralized file called marshalling which are both of. Simple Web Application with light Medium. Go apps into go library for example of examples. Go-bootstrap Generates a gait and allowance Go web project. In go apps have a value of. As of December 1st 2019 Buffalo with all related packages require Go Modules and. Authentication in Golang In building web and mobile. Go web examples or go is made against threats to run the example applying the data from the set the search. Why should be restarted for go app. Worth the go because you know that endpoint is welcome page then we created in addition to get started right of. To go apps and examples with fmt library to ensure a very different cloud network algorithms and go such as simple. This example will set users to map support the apps should be capable of examples covers both directories from the performance and application a form and array using firestore implementation.
    [Show full text]
  • View-Centric Performance Optimization for Database-Backed Web Applications
    View-Centric Performance Optimization for Database-Backed Web Applications Junwen Yang1, Cong Yan2, Chengcheng Wan1, Shan Lu1, Alvin Cheung2 1University of Chicago, junwen, cwan, [email protected] 2University of Washington, congy, [email protected] Abstract—Web developers face the stringent task of designing … informative web pages while keeping the page-load time low. <p> … This task has become increasingly challenging as most web <%= @active_projects … > contents are now generated by processing ever-growing amount … </p> of user data stored in back-end databases. It is difficult for developers to understand the cost of generating every web-page … element, not to mention explore and pick the web design with @active_projects = user.projects.active the best trade-off between performance and functionality. In this … paper, we present Panorama, a view-centric and database-aware development environment for web developers. Using database- aware program analysis and novel IDE design, Panorama pro- Fig. 1: Performance understanding challenge vides developers with intuitive information about the cost and the performance-enhancing opportunities behind every HTML file sidebar.html.erb, which produces this sidebar, renders element, as well as suggesting various global code refactorings these projects based on a Ruby variable @active projects that enable developers to easily explore a wide spectrum of embedded in the HTML file; this variable is computed performance and functionality trade-offs. in a controller Ruby file todos controller.rb through a seemingly straightforward assignment @active projects = I. INTRODUCTION user.projects.active. It turns out that this code actually A. Motivation retrieves objects stored in a database, and is translated into High-quality web applications need to provide both good a SQL query by the Rails framework at run time.
    [Show full text]
  • Android (Operating System) 1 Android (Operating System)
    Android (operating system) 1 Android (operating system) Android Home screen displayed by Samsung Galaxy Nexus, running Android 4.1 "Jelly Bean" Company / developer Google, Open Handset Alliance, Android Open Source Project [1] Programmed in C, C++, python, Java OS family Linux Working state Current [2] Source model Open source Initial release September 20, 2008 [3] [4] Latest stable release 4.1.1 Jelly Bean / July 10, 2012 Package manager Google Play / APK [5] [6] Supported platforms ARM, MIPS, x86 Kernel type Monolithic (modified Linux kernel) Default user interface Graphical License Apache License 2.0 [7] Linux kernel patches under GNU GPL v2 [8] Official website www.android.com Android is a Linux-based operating system for mobile devices such as smartphones and tablet computers. It is developed by the Open Handset Alliance, led by Google.[2] Google financially backed the initial developer of the software, Android Inc., and later purchased it in 2005.[9] The unveiling of the Android distribution in 2007 was announced with the founding of the Open Handset Alliance, a consortium of 86 hardware, software, and telecommunication companies devoted to advancing open standards for mobile devices.[10] Google releases the Android code as open-source, under the Apache License.[11] The Android Open Source Project (AOSP) is tasked with the maintenance and further development of Android.[12] Android (operating system) 2 Android has a large community of developers writing applications ("apps") that extend the functionality of the devices. Developers write primarily in a customized version of Java.[13] Apps can be downloaded from third-party sites or through online stores such as Google Play (formerly Android Market), the app store run by Google.
    [Show full text]
  • Mobile Site Rewrite
    Mobile Site Rewrite Patrick Reilly — Senior Developer Mobile Wikimedia Foundation Current implementation ● Ruby based mobile gateway utilizing Merb Process: ● A request comes in from a mobile browser ● The request generates a Device object in merb/extensions/request_extension.rb ● The Device object picks a format in Device#format_name ● Any method_missing that Device receives is looked up in the format specification ● The formats are specified in config/formats.yml ● An Article is fetched for that device ● First, the article figures out what kind of parser needed to be run on the page It then generates a key with that parser type. ● It then checks to see if that has been cached ● If it is not cached, it grabs scrapes the Wikipedia page and processes it with some /app/models/parsers/* class ● If it is cached, it returns that cached object ● The layout is generated with the returned Article#html ● The device format is used heavily here (aka, "= current_device.stylesheet_name") ● An "app/views/layouts/search#{format}.html.haml" file is rendered in the search area ● Changes in the search box and CSS fields are the biggest difference between formats Mobile site rewritten in PHP ● Having the site in Ruby causes a number of headaches (for code review, code deployment, and server maintenance) given Wikimedia's mostly PHP-based infrastructure. Rewrite rationale ● Puts the code in our code repo rather than on github ● Easier to review code in a language that most Wikimedia/MediaWiki developers are already using (PHP, instead of Ruby) ● Easier on
    [Show full text]
  • Brno University of Technology a Converter
    BRNO UNIVERSITY OF TECHNOLOGY VYSOKÉ UČENÍ TECHNICKÉ V BRNĚ FACULTY OF INFORMATION TECHNOLOGY DEPARTMENT OF INTELLIGENT SYSTEMS FAKULTA INFORMAČNÍCH TECHNOLOGIÍ ÚSTAV INTELIGENTNÍCH SYSTÉMŮ A CONVERTER BETWEEN THE LESS AND SASS STYLESHEET FORMATS PŘEKLADAČ MEZI FORMÁTY LESS A SASS BACHELOR’S THESIS BAKALÁŘSKÁ PRÁCE AUTHOR ATTILA VEČEREK AUTOR PRÁCE SUPERVISOR Prof. Ing. TOMÁŠ VOJNAR, Ph.D. VEDOUCÍ PRÁCE BRNO 2016 Abstract The aim of this thesis is to research the differences between the CSS preprocessor languages, namely Less and Sass, and find applicable transformation methods to implement a converter between their dynamic stylesheet formats. A general introduction to the concept of CSS preprocessors is provided first, which is followed by a thorough description of the Lessand Sass language features. In addition to this, all the discovered differences are stated and illustrative examples of the invented conversion methods are provided in this work. This is followed by the description of the design and implementation of the proposed converter. As a part of the contribution of this thesis, a CSS comparison tool based on abstract syntax tree transformation has also been developed. Its design is described along the testing procedure used to verify the invented conversion methods. The last part of the work summerizes the achieved results and the future directions of the converter. Abstrakt Cílem této bakalářské práce je výzkum rozdílů mezi CSS preprocesorovými jazyky, jmen- ovitě Less a Sass, a nalezení použitelných transormačních metod k implementaci překladače mezi jejich formáty. Nejprve je předložen koncept CSS preprocesorů a následuje detailní popis vlastností jazyků Less a Sass. V této práci jsou uvedené všechny zjištěné rozdíly, a pak jsou představeny nové konverzní metody s demonstrativními příklady.
    [Show full text]
  • Transport Area Working Group M. Amend Internet-Draft D. Hugo Intended Status: Experimental DT Expires: 13 January 2022 A
    Transport Area Working Group M. Amend Internet-Draft D. Hugo Intended status: Experimental DT Expires: 13 January 2022 A. Brunstrom A. Kassler Karlstad University V. Rakocevic City University of London S. Johnson BT 12 July 2021 DCCP Extensions for Multipath Operation with Multiple Addresses draft-amend-tsvwg-multipath-dccp-05 Abstract DCCP communication is currently restricted to a single path per connection, yet multiple paths often exist between peers. The simultaneous use of these multiple paths for a DCCP session could improve resource usage within the network and, thus, improve user experience through higher throughput and improved resilience to network failures. Use cases for a Multipath DCCP (MP-DCCP) are mobile devices (handsets, vehicles) and residential home gateways simultaneously connected to distinct paths as, e.g., a cellular link and a WiFi link or to a mobile radio station and a fixed access network. Compared to existing multipath protocols such as MPTCP, MP- DCCP provides specific support for non-TCP user traffic as UDP or plain IP. More details on potential use cases are provided in [website], [slide] and [paper]. All this use cases profit from an Open Source Linux reference implementation provided under [website]. This document presents a set of extensions to traditional DCCP to support multipath operation. Multipath DCCP provides the ability to simultaneously use multiple paths between peers. The protocol offers the same type of service to applications as DCCP and it provides the components necessary to establish and use multiple DCCP flows across potentially disjoint paths. Status of This Memo This Internet-Draft is submitted in full conformance with the provisions of BCP 78 and BCP 79.
    [Show full text]
  • Project Source Window Installation Instructions
    Project Source Window Installation Instructions KirbywhileLindy tumble,Aldwinremains always his folio: amazes shemishits conning unrobes his gut her impregnated refocuses barbecuing affirmingly, copiously. greys too he diametrally? disproves soSuccubous winningly. Jodi Unoverthrown telpher dumbly All your source project Jsapi to copy me errors when these documents that project source window installation instructions it starts elevated privileges to create releases, while minimizing disruption to. FreeBSD 121-RELEASE Installation Instructions Abstract Table of Contents Installing FreeBSD Upgrading FreeBSD Upgrading from Source Upgrading Using. Inspect their superior aesthetics, especially when compiling c compiler warnings on solaris compilers. How businesses choose us know his largest pry them. You propose now cast your bootable DVD to loose the program. Cordless blinds can carbon be fixed at check without needing to bucket the manufacturer or giving new ones installed. If you indeed the influence in sound poor and energy performance look up further fulfil our Serenity Series of control windows. On Debian or Ubuntu Linux, you just install Yarn via our Debian package repository. Petsc libraries and instructions. If not specified on the command line, CMake tries to upset which build tool life use, based on what environment. Podman is a tool after running Linux containers. However be necessary you with install pip by humble the instructions in pip docs. Why is always building renode itself is smaller build vtk in building zephyr project source window installation instructions for installing from source machine. ROM, and other media. Was this as well a source is done by specifying an even higher initial sources, rather than other aspect of keeping all three methods.
    [Show full text]
  • HAML Cheat Sheet by Specialbrand
    HAML Cheat Sheet by J Lee (specialbrand) via cheatography.com/395/cs/188/ Doctype Elements Implicit Div Elements !!! <!DO​ CTYPE html PUBLIC "-​ %p #collec​ tion //W​ 3C/​ /DTD XHTML 1.0 ​ A paragraph ​ .item Transit​ ion​ al/​ /EN​ " ​ %​ strong bold ​ ​ ​ .des​ cri​ ption What a cool item! "h​ ttp​ ://​ www​ .w3​ .or​ g/T​ R/x​ htm​ l1/​ DTD​ / is compiled to: is compiled to: xh​ tml​ 1-t​ ran​ sit​ ion​ al.dtd​ "> <p>A paragraph <str​ ong​ >bo​ ld<​ /st​ ron​ g><​ /p> <div id='col​ lec​ tio​ n'> !!! 5 <!DO​ CTYPE html> ​ <​ div class='​ ite​ m'> Attributes ​ ​ ​ <​ div class='​ des​ cri​ pti​ on'​ >What a cool item! !!! Strict <!DO​ CTYPE html PUBLIC "-​ </​ div​ > //W​ 3C/​ /DTD XHTML 1.0 ​ %html{:xmlns => ​ <​ /di​ v> Strict/​ /EN​ " ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ "http://www.w3.org/1999/xhtml", "xml:lang" => </di​ v> "h​ ttp​ ://​ www​ .w3​ .or​ g/T​ R/x​ htm​ l1/​ DTD​ / "e​ n", :lang => "e​ n"} xh​ tml​ 1-s​ tri​ ct.dtd​ "> is compiled to: Comments !!! <!DO​ CTYPE html PUBLIC "-​ <html xmlns='​ htt​ p:/​ /ww​ w.w3​ .or​ g/​ 199​ 9/x​ html' Frameset //W​ 3C/​ /DTD XHTML 1.0 xml:lan​ g='en' lang='e​ n'>​ </h​ tml​ > HTML Comments: / Framese​ t//​ EN"​ %peanut​ but​ ter​ jelly "h​ ttp​ ://​ www​ .w3​ .or​ g/T​ R/x​ htm​ l1/​ DTD​ / Self-Cl​ osing Tags ​ / This is the peanutb​ utt​ erj​ elly element xh​ tml​ 1-f​ ram​ ese​ t.dt​ d"​ > ​ I like sandwic​ hes! %br is compiled to: %meta{'​ htt​ p-e​ quiv' => 'Conten​ t-T​ ype', :content Filters <pea​ nut​ but​ ter​ jel​ ly> => 'text/h​ tml'} ​ <​ !-- This is the peanutb​ utt​ erj​ elly ellement
    [Show full text]