From 75169ddab6f3df3c7c86443bb524775dbef0e7c2 Mon Sep 17 00:00:00 2001 From: Loris Cro Date: Sat, 3 Aug 2024 13:19:29 +0200 Subject: [PATCH] new zine --- {static => assets}/BebasNeue-Regular.ttf | Bin {static => assets}/CNAME | 0 .../Merriweather/Merriweather-Black.ttf | Bin .../Merriweather/Merriweather-BlackItalic.ttf | Bin .../Merriweather/Merriweather-Bold.ttf | Bin .../Merriweather/Merriweather-BoldItalic.ttf | Bin .../Merriweather/Merriweather-Italic.ttf | Bin .../Merriweather/Merriweather-Light.ttf | Bin .../Merriweather/Merriweather-LightItalic.ttf | Bin .../Merriweather/Merriweather-Regular.ttf | Bin {static => assets}/highlight.css | 0 {static => assets}/style.css | 0 {static => assets}/vscode-autoformatting.mp4 | Bin build.zig | 23 ++- build.zig.zon | 4 +- content/documentation/assets.md | 139 ++++++++++++++++++ content/documentation/i18n.md | 61 ++++---- content/documentation/index.md | 56 ++++--- content/index.md | 2 +- content/log.md | 24 ++- content/quickstart.md | 7 +- content/{ => quickstart}/superhtml.png | Bin layouts/templates/base.shtml | 6 +- 23 files changed, 259 insertions(+), 63 deletions(-) rename {static => assets}/BebasNeue-Regular.ttf (100%) rename {static => assets}/CNAME (100%) rename {static => assets}/Merriweather/Merriweather-Black.ttf (100%) rename {static => assets}/Merriweather/Merriweather-BlackItalic.ttf (100%) rename {static => assets}/Merriweather/Merriweather-Bold.ttf (100%) rename {static => assets}/Merriweather/Merriweather-BoldItalic.ttf (100%) rename {static => assets}/Merriweather/Merriweather-Italic.ttf (100%) rename {static => assets}/Merriweather/Merriweather-Light.ttf (100%) rename {static => assets}/Merriweather/Merriweather-LightItalic.ttf (100%) rename {static => assets}/Merriweather/Merriweather-Regular.ttf (100%) rename {static => assets}/highlight.css (100%) rename {static => assets}/style.css (100%) rename {static => assets}/vscode-autoformatting.mp4 (100%) create mode 100644 content/documentation/assets.md rename content/{ => quickstart}/superhtml.png (100%) diff --git a/static/BebasNeue-Regular.ttf b/assets/BebasNeue-Regular.ttf similarity index 100% rename from static/BebasNeue-Regular.ttf rename to assets/BebasNeue-Regular.ttf diff --git a/static/CNAME b/assets/CNAME similarity index 100% rename from static/CNAME rename to assets/CNAME diff --git a/static/Merriweather/Merriweather-Black.ttf b/assets/Merriweather/Merriweather-Black.ttf similarity index 100% rename from static/Merriweather/Merriweather-Black.ttf rename to assets/Merriweather/Merriweather-Black.ttf diff --git a/static/Merriweather/Merriweather-BlackItalic.ttf b/assets/Merriweather/Merriweather-BlackItalic.ttf similarity index 100% rename from static/Merriweather/Merriweather-BlackItalic.ttf rename to assets/Merriweather/Merriweather-BlackItalic.ttf diff --git a/static/Merriweather/Merriweather-Bold.ttf b/assets/Merriweather/Merriweather-Bold.ttf similarity index 100% rename from static/Merriweather/Merriweather-Bold.ttf rename to assets/Merriweather/Merriweather-Bold.ttf diff --git a/static/Merriweather/Merriweather-BoldItalic.ttf b/assets/Merriweather/Merriweather-BoldItalic.ttf similarity index 100% rename from static/Merriweather/Merriweather-BoldItalic.ttf rename to assets/Merriweather/Merriweather-BoldItalic.ttf diff --git a/static/Merriweather/Merriweather-Italic.ttf b/assets/Merriweather/Merriweather-Italic.ttf similarity index 100% rename from static/Merriweather/Merriweather-Italic.ttf rename to assets/Merriweather/Merriweather-Italic.ttf diff --git a/static/Merriweather/Merriweather-Light.ttf b/assets/Merriweather/Merriweather-Light.ttf similarity index 100% rename from static/Merriweather/Merriweather-Light.ttf rename to assets/Merriweather/Merriweather-Light.ttf diff --git a/static/Merriweather/Merriweather-LightItalic.ttf b/assets/Merriweather/Merriweather-LightItalic.ttf similarity index 100% rename from static/Merriweather/Merriweather-LightItalic.ttf rename to assets/Merriweather/Merriweather-LightItalic.ttf diff --git a/static/Merriweather/Merriweather-Regular.ttf b/assets/Merriweather/Merriweather-Regular.ttf similarity index 100% rename from static/Merriweather/Merriweather-Regular.ttf rename to assets/Merriweather/Merriweather-Regular.ttf diff --git a/static/highlight.css b/assets/highlight.css similarity index 100% rename from static/highlight.css rename to assets/highlight.css diff --git a/static/style.css b/assets/style.css similarity index 100% rename from static/style.css rename to assets/style.css diff --git a/static/vscode-autoformatting.mp4 b/assets/vscode-autoformatting.mp4 similarity index 100% rename from static/vscode-autoformatting.mp4 rename to assets/vscode-autoformatting.mp4 diff --git a/build.zig b/build.zig index 7de5b4b..88f8012 100644 --- a/build.zig +++ b/build.zig @@ -3,12 +3,29 @@ const zine = @import("zine"); pub fn build(b: *std.Build) !void { zine.website(b, .{ - .title = "Zine Static Site Generator", + .title = "Zine - Static Site Generator", .host_url = "https://zine-ssg.io", .layouts_dir_path = "layouts", .content_dir_path = "content", - .static_dir_path = "static", - .debug = true, + .assets_dir_path = "assets", + .static_assets = &.{ + "CNAME", + // This asset is referenced in some inlined HTML in markdown + // which Zine is not yet able to analyze so as a temporary + // hack we mark it as a static asset. + "vscode-autoformatting.mp4", + + // Fonts referenced in CSS files + "BebasNeue-Regular.ttf", + "Merriweather/Merriweather-Black.ttf", + "Merriweather/Merriweather-BlackItalic.ttf", + "Merriweather/Merriweather-Bold.ttf", + "Merriweather/Merriweather-BoldItalic.ttf", + "Merriweather/Merriweather-Italic.ttf", + "Merriweather/Merriweather-Light.ttf", + "Merriweather/Merriweather-LightItalic.ttf", + "Merriweather/Merriweather-Regular.ttf", + }, }); // This line creates a build step that generates an updated diff --git a/build.zig.zon b/build.zig.zon index 6365485..d954b57 100644 --- a/build.zig.zon +++ b/build.zig.zon @@ -3,8 +3,8 @@ .version = "0.0.0", .dependencies = .{ .zine = .{ - .url = "git+https://github.com/kristoff-it/zine?ref=v0.2.0#e21b179b78de54ab48efe38d2378e87a56cb3542", - .hash = "1220781f118454bbc87d7efbd244b4d1ef029e76a6113ddf4752a6f3cd85879dbb3b", + .url = "git+https://github.com/kristoff-it/zine?ref=v0.3.0#2bba322c79547fc9ef75bac31fc3e328d7be0375", + .hash = "122082799c345efd9630f2f8c55c8a4093125fd10f0f8a7ecd7d768c06c831955483", }, }, .paths = .{"."}, diff --git a/content/documentation/assets.md b/content/documentation/assets.md new file mode 100644 index 0000000..c3ed00d --- /dev/null +++ b/content/documentation/assets.md @@ -0,0 +1,139 @@ +--- +.title = "Assets", +.date = @date("2020-07-06T00:00:00"), +.author = "Sample Author", +.draft = false, +.layout = "documentation.shtml", +.tags = [], +--- + +## Assets in Zine +A Zine site can have 3 kinds of assets: **site**, **page**, and **build** assets. + +## Site Assets +These assets are located under `assets_dir_path`. + +The main way of accessing site assets is by using the following Scripty expression: `$site.asset('logo.png')`. + +Once you have an instance of an `Asset`, you can do three main things to it: + +- `$site.asset('logo.png').size()` to obtain its size in bytes +- `$site.asset('logo.png').bytes()` to obtain its contents +- `$site.asset('logo.png').link()` to obtain a link to it + +With `bytes` you can do clever things such as embedding the asset directly into the page itself, like so: + +***clever-and-cursed.html*** +```html + +``` + +While `link` in comparison seems very boring, it's actually both the preferred +way in Zine to reference assets, and also its most clever asset feature. + +**Calling `link` on an asset will cause Zine to install it in the output directory.** +Conversely, accessing an asset *without* calling `link` on it will **not** cause it to be installed. + +One example of where this makes sense is when you have a Ziggy (or JSON) document that you want to use to build a page, but that is not meant to be included the final output. + +***songs-list.html*** +```html + +``` + +**Note:** Zine uses [Ziggy](https://ziggy-lang.io) as its data serialization format of choice, but JSON documents happen to be a valid subset of Ziggy, so you can use them directly. + +### Static Site Assets +Some assets should be installed even if no layout or page refers to them. + +For example `favicon.ico` might not be referenced, but browsers will automatically try to fetch it. + +Another example could be `.well-known` assets or files that might have special meaning for the hosting service that you're using. GitHub uses a file named `CNAME` to keep track of the custom domain configured for a given GitHub Pages website. + +One last example would be font files only referenced inside of CSS files, as Zine currently lacks the ability to inspect CSS files. + +To install assets unconditionally, list them in `static_assets` in your `build.zig`: + +***build.zig*** +```zig +pub fn build(b: *std.Build) !void { + zine.website(b, .{ + .title = "Zine - Static Site Generator", + .host_url = "https://zine-ssg.io", + .layouts_dir_path = "layouts", + .content_dir_path = "content", + .assets_dir_path = "assets", + .static_assets = &.{ + // Used by GitHub Pages + "CNAME", + // This asset is referenced in some inlined HTML in Markdown + // which Zine is not yet able to analyze so as a temporary + // hack we mark it as a static asset. + "vscode-autoformatting.mp4", + + // Font referenced in CSS files + "BebasNeue-Regular.ttf", + }, + }); +} +``` + +## Page Assets +Page assets are the same as site assets, but are located inside of `content_dir_path`, next to the page that references them. + +If you have an asset that is specific to only a single page of your website, you can conveniently place it next to it inside the content directory, but beware of respecting the expected content structure. + +***shell*** +``` +content +├── blog +│   ├── first-post.md +│   └── index.md +└── index.md +``` + +In Zine, pages that are not named `index.md` (i.e. pages that don't define a section) must keep their assets under a directory with the same name. + +***shell*** +``` +content +├── blog +│ ├── first-post +│ │   └── C.png +│   ├── first-post.md +│   ├── B.png +│   └── index.md +├── A.png +└── index.md +``` + +- `A.png` belongs to `content/index.md` +- `B.png` belongs to `content/blog/index.md` +- `C.png` belongs to `content/blog/first-post.md` + +Note how `C.png` lives under `content/blog/first-post/` because it belongs to a non-section page. + +Accessing a page asset can be done using `$page.asset('C.png')`. +Like all assets, they must be `link`ed to be installed in the output directory. + +#### Note +Inside of Markdown files you can use standard syntax `![](C.png)` and everything will work as expected (Zine will search for the asset in the right directory and will install it in the output directory). + +That said, Markdown processing in Zine has not yet reached its final form so expect news in the near future. + +## Build Assets +If you have artifacts built using the Zig build system, you can use them in Zine by setting `build_assets` in your `build.zig`. + +Accessing a build asset can be done using `$build.asset('foo')`. +Like all assets, they must be `link`ed to be installed in the output directory. + +See the doc comments for `zine.BuildAsset` for more info. + +## Next Steps +Make sure to familiarize yourself with the Scripty Reference Documentation in order to know what operations are available for assets and other kinds of data. + +[Read the Scripty Reference Documentation](/documentation/scripty/) + + diff --git a/content/documentation/i18n.md b/content/documentation/i18n.md index a9fc585..8282f8d 100644 --- a/content/documentation/i18n.md +++ b/content/documentation/i18n.md @@ -1,13 +1,13 @@ --- -.title = "Documentation", +.title = "Multilingual Websites", .date = @date("2020-07-06T00:00:00"), .author = "Sample Author", .draft = false, .layout = "documentation.shtml", .tags = [], --- -## Multilingual Websites +## Creating Multilingual Websites To create a multilingual website, use `addMultilingualWebsite` in your `build.zig`, like in the following example. @@ -17,23 +17,23 @@ const std = @import("std"); const zine = @import("zine"); pub fn build(b: *std.Build) !void { - try zine.addMultilingualWebsite(b, .{ + zine.multilingualWebsite(b, .{ .host_url = "https://kristoff.it", .layouts_dir_path = "layouts", - .static_dir_path = "static", + .assets_dir_path = "assets", .i18n_dir_path = "i18n", - .variants = &.{ + .localized_variants = &.{ .{ - .locale_code = "en_US", + .locale_code = "en-US", .output_prefix_override = "", .title = "Loris Cro's Blog", - .content_dir_path = "content", + .content_dir_path = "content/en-US", }, .{ - .locale_code = "it_IT", + .locale_code = "it-IT", .title = "Loris 🤌 Cro's 🤌 Blog", - .content_dir_path = "content_it", + .content_dir_path = "content/it-IT", }, }, }); @@ -43,7 +43,7 @@ pub fn build(b: *std.Build) !void { Each variant can define the following fields: #### `locale_code` -A `language_NATION` string, e.g. `en_US`, `en_UK`, `it_IT`, `ja_JP`. +A `language_NATION` string, e.g. `en-US`, `en-UK`, `it-IT`, `ja-JP`. #### `title` Site title for this variant. @@ -55,8 +55,8 @@ Content directory with translated versions of your content. The default assumption in Zine is that all your localized variants will be deployed on the same host, with each translation made available under a `locale_code` prefix: -- `https://site.com/en_US/about/` -- `https://site.com/it_IT/about/` +- `https://site.com/en-US/about/` +- `https://site.com/it-IT/about/` Some users might want instead to serve each translation from a different hostname: @@ -80,7 +80,7 @@ For example by setting `ouptput_prefix_override` to empty string in `en_US` this is the resulting site layout: - `https://site.com/about/` -- `https://site.com/it_IT/about/` +- `https://site.com/it-IT/about/` Here's a table with more examples: @@ -108,7 +108,7 @@ Here's a table with more examples: ### The i18n Directory When creating a multilingual website, the assumption is that the same layouts -and static content will be reused across all localized variants, while the +and site assets will be reused across all localized variants, while the content folder will vary for each. Varying the content folder will allow you to create different translations of @@ -124,13 +124,13 @@ Localized variants and translation files are matched using the `locale_code` fie **`$tree i18n`** ``` i18n -├── en_US.ziggy -└── it_IT.ziggy +├── en-US.ziggy +└── it-IT.ziggy ``` Each file contains a Ziggy map that can then be accessed from your layouts as `$i18n`. -**`$cat i18n/it_IT.ziggy`** +**`$cat i18n/it-IT.ziggy`** ```ziggy { "back2top": "Ritorna in cima", @@ -170,26 +170,25 @@ Consider the following directory structure: ``` content -├── about.md -├── docs -│   └── index.md -└── index.md -content_it -├── about.md -├── pasta.md -├── docs.md -└── index.md +├── en-US +│ ├── about.md +│ ├── docs +│ │   └── index.md +│ └── index.md +└── it-IT + ├── about.md + ├── pasta.md + ├── docs.md + └── index.md ``` -- `index.md` and `about.md` are matched because they have the same -path (respective to the each content directory). +- `index.md` and `about.md` are both respectively matched with their corresponding translation because they have the same path (e.g. `en-US/about.md`, `it-IT/about.md`). - `pasta.md` is not matched with any other page because it has a unique relative path. - `docs.md` is not matched with any other page because, even though the resulting url path would be the same as `docs/index.md`, the *content path* is different. -That said, it is possible to match any page with any other by defining `translation_key` in -the Ziggy frontmatter of each page. +That said, it is possible to match any page with any other by setting `translation_key` in the Ziggy frontmatter of each page. This last way of matching pages is meant to be used when URL paths are also translated, for example: @@ -202,5 +201,5 @@ The following frontmatter key must be set in both "contact us" pages: .translation_key = "contact form" ``` -The value can be any string value, as long as it is unique per each localized variant. +The translation key can be any string value, as long as it is unique per each localized variant. diff --git a/content/documentation/index.md b/content/documentation/index.md index 2184c39..fd32d84 100644 --- a/content/documentation/index.md +++ b/content/documentation/index.md @@ -15,8 +15,11 @@ Zine is currently alpha software and many features are missing or not complete y If Zine turns out to not be ready yet for your needs, check the [Changelog](/log/) from time to time to learn of new improvements. ## Other Pages -- [Multilingual Websites (i18n)](i18n/) +Quick access documentation links useful once you've become familiar with the rest of the content in this page. + +- [Assets](assets/) - [Scripty Reference](scripty/) +- [Multilingual Websites (i18n)](i18n/) - Deploying - [GitHub Pages](deploying/github-pages/) - [Cloudflare Pages](deploying/cloudflare-pages/) @@ -36,10 +39,9 @@ Your website only needs the following two files to get started: .version = "0.0.0", .dependencies = .{ .zine = .{ - .url = "git+https://github.com/kristoff-it/zine#v0.2.0", - .hash = "1220781f118454bbc87d7efbd244b4d1ef029e76a6113ddf4752a6f3cd85879dbb3b", + .url = "git+https://github.com/kristoff-it/zine#v0.3.0", + .hash = "122082799c345efd9630f2f8c55c8a4093125fd10f0f8a7ecd7d768c06c831955483", }, - }, .paths = .{"."}, } ``` @@ -55,12 +57,12 @@ pub fn build(b: *std.Build) !void { .host_url = "https://sample.com", .content_dir_path = "content", .layouts_dir_path = "layouts", - .static_dir_path = "static", + .assets_dir_path = "assets", }); } ``` -Once you create the 3 directories mentioned in your `build.zig` file (`content`, `layouts`, `static`, but they can also be named however you like), you are ready to start working on your website. +Once you create the 3 directories mentioned in your `build.zig` file (`content`, `layouts`, `assets`, but they can also be named however you like), you are ready to start working on your website. ### Content The content directory contains your markdown files and their structure will be @@ -108,9 +110,9 @@ The second section is the "blog" section, defined by `content/blog/index.md`, co - `blog/a.md` - `blog/b.md` -Note how an `index.md` file defines a section but as a page it is not included in the list of pages that belong to that section. +Note how an `index.md` file defines a section but as a page it is not included in the list of pages that belong to that same section. -Lastly, note how pages in a section don't all share the same basepath. In the absence of a nested `index.md`, all pages are considered siblings regardless of how they are nested inside of different directories. +Lastly, note how pages in a section don't all share the same basepath. In the absence of a nested `index.md`, all pages are considered siblings regardless of how deeply they are nested inside of different directories. #### Frontmatter @@ -159,9 +161,10 @@ Here's a schema that shows the processing pipeline. Square brackets indicate an Later in this document we'll see how layouts work more in detail. -### Static -The contents of the static directory will be copied verbatim into the output directory. +### Assets +This directory collects various assets (images, css files, etc) necessary to build the website. Note that unlike other mainstream static site generators, Zine doesn't have a "static" asset folder as all assets are managed explicitly through Zine's Asset System. +Later in this document you will learn how to reference assets in this directory. # CLI #### `$ zig build` @@ -172,7 +175,7 @@ Use `zig build --help` for more information about flags supported by `zig build` #### `$ zig build serve` Builds your website and starts the development server. Making changes to any of your input directories (ie content, layouts, static) will automatically trigger a rebuild and a page reload. -Pass **`-Dport=8080`** to set the listening port to 8080. +Zine will default to using port `1990`, pass **`-Dport=8080`** to set the listening port to 8080, or any value you'd like. # Layouting Zine uses [SuperHTML](https://github.com/kristoff-it/superhtml) as its templating language. @@ -187,11 +190,12 @@ SuperHTML is instead a super-set of HTML. ## Layout vs Template Throughout this document (and in error messages) you will see a distinction being made between 'layouts' and 'templates'. -In Zine a layout is a template that can be fully evaluated to a complete HTML file that has no "extension placeholders" left. +We'll see in a bit how templates extend each other by defining "placeholders" that can be then filled out by other templates. Layouts are basically the final link of a "chain" of templates that extend one another. -We'll see in a bit how templates extend each other by defining "placeholders" that can be then filled out by another template. Layouts are basically the final link of a "chain" of templates that extend one another. +In Zine a layout is a template that can be fully evaluated to a complete HTML file +(i.e. it has no "extension placeholders" left). -The special name for those templates is used because, unike other templates, they define a final, complete layout for a set of pages. +The special name for those templates is used because, unike other templates, they define a final, complete *layout* for a set of pages of the same kind. ## Basic Example @@ -200,7 +204,7 @@ In Zine layouts live under the `layouts/` directory. Here's a basic example where we create the homepage of our sample website. ***`content/index.md`*** -``` +```ziggy --- .title = "Home", .date = @date("2020-07-06T00:00:00"), @@ -262,7 +266,7 @@ $ touch layouts/post.shtml ``` ***`content/blog/first-post.md`*** -``` +```ziggy --- .title = "First Post!", .date = @date("2020-07-06T00:00:00"), @@ -556,7 +560,7 @@ SuperHTML templates implement logic via special attributes that have semantic me Example markdown file: ***`content/foo/index.md`*** -```markdown +```ziggy --- .title = "My Post", .date = @date("2020-07-06T00:00:00"), @@ -634,5 +638,19 @@ Repeats the **entire** element based on a condition. Inside an element with a `i
tag3
``` -## Scripty Reference -To learn about all the types present in Scripty and their builtin operations, [see the full reference](scripty/). + +## Assets & Scripty +You can also use Scripty to add logic to normal attributes. + +One notable example is linking to assets. + +```html + + +``` + + +## Next Steps + +- [Learn more about Zine's Asset System](assets/) +- [Read the Scripty Reference Documentation](scripty/) diff --git a/content/index.md b/content/index.md index 50eac2e..bb349f5 100644 --- a/content/index.md +++ b/content/index.md @@ -22,7 +22,7 @@ Zine uses [SuperHTML](https://github.com/kristoff-it/superhtml), a templating la SuperHTML is also an HTML language server that gives you real-time feedback on syntax errors in your code. -![](superhtml.png) +![](quickstart/superhtml.png) SuperHTML also provides autoformatting (with the [SuperHTML VScode extension](https://marketplace.visualstudio.com/items?itemName=LorisCro.super)): diff --git a/content/log.md b/content/log.md index 0cb5b1c..9a383fc 100644 --- a/content/log.md +++ b/content/log.md @@ -41,8 +41,26 @@ window.onload = function() { +### 2024-08-03 -### 2024-7-27 + +```sh +zig fetch --save "git+https://github.com/kristoff-it/zine#v0.3.0" +``` +**The Asset System update!** + +- Zine has now an asset system with clearly defined semantics. Previously we kinda implemented informally what other static site generators offered (eg a static asset directory), while now Zine gained it's own spin on assets + + There's a new [Assets section in the docs](/documentation/assets/), read it to learn how assets now work in Zine. The most notable changes are: + - Zine can now make use of artifacts generated via the Zig build system! + - `static_dir_path` has become `assets_dir_path` (I also recommend renaming `static` to `assets`) + - Page assets (eg images placed in the content directory next to the page they belong to) __now have one extra rule for file placement__, see the docs for more info on that (or let the error messages *gently* guide you) +- The dev server now by default opens a door port to 1990 if you don's specify `-Dport` +- `output_prefix` has been renamed to `output_path_prefix` +- In `MultilingualSite`, `variants` has been renamed to `localized variants` +- Scripty has gained a new `Asset` type and handful of new builtins, including adding the ability to query for the current `locale_code` in a multilingual website (`$site.localeCode()`) + +### 2024-07-27 ```sh @@ -64,7 +82,7 @@ zig fetch --save "git+https://github.com/kristoff-it/zine#v0.2.0" *The next item on the roadmap is to add an asset system to Zine in order to have the static content generation depend on other steps defined in your build script.* -### 2024-7-26 +### 2024-07-26 ```sh @@ -91,7 +109,7 @@ zig fetch --save "git+https://github.com/kristoff-it/zine#v0.1.3" - Zine and some of its dependencies depend on [kristoff-it/zig-afl-kit](https://github.com/kristoff-it/zig-afl-kit) for fuzzing. I tried now to make it a lazy dependency so that users don't have to download it just to use Zine (as it's a dev-only dependency), but I haven't yet been able to fully test if I did so correctly. -### 2024-7-25 +### 2024-07-25 ```sh diff --git a/content/quickstart.md b/content/quickstart.md index 8e49009..3a33754 100644 --- a/content/quickstart.md +++ b/content/quickstart.md @@ -30,10 +30,15 @@ And what's a better sample site than the official site itself? ```bash $ git clone https://github.com/kristoff-it/zine-ssg.io.git $ cd zine-ssg.io -$ zig build serve -Dport=8080 +$ zig build serve ``` After that, start hacking on it and see how Zine reacts! +Here are a couple of things that you might want to observe: +- On first invocation it will take a moment for Zine to load, as it has to compile optimized versions of all its tools. Subsequent runs will be much faster. +- `zig build serve` launches the development server but you can also just generate the site without it. Run `zig build --summary new` to build the website and see which pages ended up being re-rendered. Notice how pages that don't change don't need to be re-rendered. +- What happens if you delete `assets/style.css` and try to rebuild the site? + ## 3. Get developer tooling This step is optional but **strongly** recommended. diff --git a/content/superhtml.png b/content/quickstart/superhtml.png similarity index 100% rename from content/superhtml.png rename to content/quickstart/superhtml.png diff --git a/layouts/templates/base.shtml b/layouts/templates/base.shtml index ed3639d..b23f73e 100644 --- a/layouts/templates/base.shtml +++ b/layouts/templates/base.shtml @@ -7,7 +7,7 @@ - + @@ -16,8 +16,8 @@ - Zine - - + +