Inspect /public/page/one/index.pug and /page/two/index.pug. These Pug files show how the parts of the HTML they have in common are pulled from central places. Both pages use or 'extend' the template _part/_baseShell.pug. Open this template file, and see that it has 'blocks' named 'head', 'main', and 'footer'. The Pug pages that extend this template define how to replace these blocks. For example,/page/one/index.pug defines that the 'head' block consists of a page-specific 'title' tag and an included fragment _part/_header.pug. We re-use _header.pug in /page/two/index.pug.
Inspect /public/_part/_top.pug. This fragment represents the top menu and side drawer used on all pages. You can find it referenced in /_part/_baseShell.pug as 'include _top'. Now inspect /page/one/index.html. This is the complete HTML which Prepros has collated together from template and fragments. Since the server has been configured to return the 'default' page index.html when the browser requests /page/one/, this is what the end user sees.
You have seen that a pug template or fragment can include other pug fragments. It can also include a fragment which is already in HTML format, such as /page/one/_hello.html included in /page/one/index.html. The file _hello.html is the result of processing the markdown file _hello.md. We find that Pug is not only a great way to write clean HTML, it is also very useful for defining layouts and reusing page elements.
To give the application a Single-Page Application feel, we use an optional JavaScript library called topseed-turbo ('TT'). When a user navigates from one URL to the next, TT replaces only the part of the HTML body that is unique to each page (The section marked '#content-wrapper' in _baseShell.pug and /_js/main.js). TT is unobtrusively loaded by JavaScript included in the _header.pug section (/setup-x.x.js). Using TT avoids 'page flash' and makes for smoother navigation, very similar to a native rich client app where only individual panels are replaced on navigation. Smoother navigation increases the perceived performance of the application.
Optional: Advanced JavaScript users may be interested to look at TS.onAppReady(UIinit) in /page/one/index.pug. TS stands for 'topseed-setup'. TS receives an event when the #content-wrapper HTML is fully present in the browser (similar to a 'pageLoaded' event). When using Turbo (TT), TS.onAppReady provides an important hook for page-specific JavaScript that requires the DOM to be fully initialized.
Rename /public/cache.mfx to /cache.mf and inspect it. The AppCache is a good way to improve performance of a web application. The file is referred to as manifest in _part/_baseshell.pug. If the manifest file is present, the browser will keep its listed resources in the browser cache 'forever', and serve them from there, without going to the network, until the cache.mf file itself changes. You can see what the browser does with the AppCache if you run a page in Developer mode (hit Ctrl-Shift+i and select the 'Console' tab in your Chrome browser). For development, we disable the AppCache by renaming it from .mf to .mfx. If you ever suspect the browser having cached an older version of a resource, right-click the refresh button on the left of the URL in the Chrome browser (with Developer Console open) and select "Empty Cache and Hard Reload".
We also achieve performance gains by setting response headers in Decider.js to allow caching of content at the CDN edge as described in tutorial 3.