Get website ready for 0.13.1 release (#321)

* get website ready for 0.13.1 release

* fix commented line

* remove output prefix

website/assets/style.css

@@ -0,0 +1,135 @@
+body {
+}
+
+.upper-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.navbar {
+    display: flex;
+    flex-direction: row;
+}
+
+.navlink {
+    margin: 5px;
+}
+
+.logo {
+    max-height: 30px;
+}
+
+.container {
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+:root {
+    --srcery-black:          #1C1B19;
+    --srcery-red:            #EF2F27;
+    --srcery-green:          #519F50;
+    --srcery-yellow:         #FBB829;
+    --srcery-blue:           #2C78BF;
+    --srcery-magenta:        #E02C6D;
+    --srcery-cyan:           #0AAEB3;
+    --srcery-white:          #BAA67F;
+
+    --srcery-black-bright:   #918175;
+    --srcery-red-bright:     #F75341;
+    --srcery-green-bright:   #98BC37;
+    --srcery-yellow-bright:  #FED06E;
+    --srcery-blue-bright:    #68A8E4;
+    --srcery-magenta-bright: #FF5C8F;
+    --srcery-cyan-bright:    #2BE4D0;
+    --srcery-white-bright:   #FCE8C3;
+
+    --srcery-orange:         #FF5F00;
+    --srcery-orange-bright:  #FF8700;
+    --srcery-black-hard:     #121212;
+    --srcery-teal:           #008080;
+    --srcery-xgray1:         #262626;
+    --srcery-xgray2:         #303030;
+    --srcery-xgray3:         #3A3A3A;
+    --srcery-xgray4:         #444444;
+    --srcery-xgray5:         #4E4E4E;
+    --srcery-xgray6:         #585858;
+    --srcery-xgray7:         #626262;
+    --srcery-xgray8:         #6C6C6C;
+    --srcery-xgray9:         #767676;
+    --srcery-xgray10:        #808080;
+    --srcery-xgray11:        #8A8A8A;
+    --srcery-xgray12:        #949494;
+}
+
+pre {
+    background-color: var(--srcery-black);
+    color: var(--srcery-white-bright);
+    padding: 10px;
+    overflow-x: auto;
+}
+
+code {
+  white-space: pre;
+
+}
+
+code .attribute             { color: var(--srcery-white-bright)   }
+code .boolean               { color: var(--srcery-magenta-bright) }
+code .character             { color: var(--srcery-magenta-bright) }
+code .character-special     { color: var(--srcery-blue)           }
+code .comment               { color: var(--srcery-black-bright)   }
+code .conditional           { color: var(--srcery-red)            }
+code .constant              { color: var(--srcery-magenta-bright) }
+code .constant-builtin      { color: var(--srcery-orange)         }
+code .constant-macro        { color: var(--srcery-cyan)           }
+code .constructor           { color: var(--srcery-blue)           }
+code .debug                 { color: var(--srcery-black-bright)   }
+code .define                { color: var(--srcery-cyan)           }
+code .error                 { color: var(--srcery-white)          }
+code .exception             { color: var(--srcery-red)            }
+code .field                 { color: var(--srcery-cyan)           }
+code .float                 { color: var(--srcery-magenta-bright) }
+code .function              { color: var(--srcery-yellow)         }
+code .function-builtin      { color: var(--srcery-orange)         }
+code .function-call         { color: var(--srcery-yellow)         }
+code .function-macro        { color: var(--srcery-orange)         }
+code .include               { color: var(--srcery-cyan)           }
+code .keyword               { color: var(--srcery-red)            }
+code .keyword-function      { color: var(--srcery-red)            }
+code .keyword-return        { color: var(--srcery-red)            }
+code .keyword-operator      { color: var(--srcery-red)            }
+code .label                 { color: var(--srcery-red)            }
+code .literal               { color: var(--srcery-red)            }
+code .macro                 { color: var(--srcery-orange)         }
+code .method                { color: var(--srcery-yellow)         }
+code .namespace             { color: var(--srcery-cyan)           }
+code .number                { color: var(--srcery-magenta-bright) }
+code .operator              { color: var(--srcery-white-bright)   }
+code .parameter             { color: var(--srcery-cyan)           }
+code .preproc               { color: var(--srcery-cyan)           }
+code .property              { color: var(--srcery-cyan)           }
+code .punctuation           { color: var(--srcery-black-bright)   }
+code .punctuation-bracket   { color: var(--srcery-black-bright)   }
+code .punctuation-delimiter { color: var(--srcery-black-bright)   }
+code .punctuation-special   { color: var(--srcery-black-bright)   }
+code .repeat                { color: var(--srcery-red)            }
+code .storageclass          { color: var(--srcery-orange)         }
+code .string                { color: var(--srcery-green-bright)   }
+code .string-escape         { color: var(--srcery-blue)           }
+code .string-special        { color: var(--srcery-blue)           }
+code .structure             { color: var(--srcery-cyan)           }
+code .tag                   { color: var(--srcery-cyan)           }
+code .text-literal          { color: var(--srcery-black-bright)   }
+code .text-reference        { color: var(--srcery-cyan)           }
+code .text-title            { color: var(--srcery-green)          } /* TODO: bold */
+code .text-todo             { color: var(--srcery-white)          } /* TODO: bold */
+code .text-underline        { color: var(--srcery-blue)           } /* TODO: underline */
+code .text-uri              { color: var(--srcery-blue)           } /* TODO: underline */
+code .type                  { color: var(--srcery-blue-bright)    }
+code .type-builtin          { color: var(--srcery-blue-bright)    }
+code .type-definition       { color: var(--srcery-magenta)        }
+code .type-qualifier        { color: var(--srcery-blue-bright)    }
+code .variable              { color: var(--srcery-cyan)           }
+code .variable-builtin      { color: var(--srcery-magenta-bright) }

website/build.zig

@@ -8,6 +8,5 @@ pub fn build(b: *std.Build) void {
         .content_dir_path = "content",
         .layouts_dir_path = "layouts",
         .assets_dir_path = "assets",
-        .output_path_prefix = "www",
     });
 }

website/content/community.smd

@@ -11,4 +11,3 @@
 # Community
 
 - [ZEG Discord](https://discord.gg/Hpps2zStQ5)
-- MicroZig IRC: irc://irc.libera.chat/microzig

website/content/index.smd

@@ -8,15 +8,107 @@
 .tags = []
 ---
 
-# MicroZig
+# Getting Started
 
-[Repository](https://github.com/ZigEmbeddedGroup/microzig)
+This tutorial assumes that you're programming a [Raspberry Pi
+Pico](https://www.raspberrypi.com/products/raspberry-pi-pico/). This hardware
+is by far the best supported in MicroZig. It's a fairly alpha project based on
+a fairly new and breaking language so your mileage may vary. That being said,
+it does support other hardware, such as Microchip's `ATSAMD51J19` which was
+used for the [2024 SYCL](https://sycl.it) Badge.
 
-## Goals
+## Let's Begin
 
-- Provide documents on how to get started with embedded programming (for absolute newbies)
-- Provide example snippets for common operations on certain architectures (LPC, STM32, AVR, ...)
-- Provide example worked through embedded mini-projects
-- Create register definition libraries
-- Create a common interface/HAL over several architectures
-- Create a performant common set of drivers for external platforms
+Assuming you've initialized a zig project with `zig init`, or have set one up
+yourself, you can add microzig as a dependency with the following command:
+
+```sh
+zig fetch --save=microzig https://microzig.tech/downloads/microzig/0.13.1/microzig.tar.gz
+```
+
+Then in your `build.zig`:
+
+```zig
+const std = @import("std");
+const microzig = @import("microzig");
+
+const MicroBuild = microzig.MicroBuild(.{
+    .rp2xxx = true,
+});
+
+pub fn build(b: *std.Build) void {
+    const mz_dep = b.dependency("microzig", .{});
+    const mb = MicroBuild.init(b, mz_dep) orelse return;
+
+    const firmware = mb.add_firmware(.{
+        .name = "blinky",
+        .target = mb.ports.rp2xxx.boards.raspberrypi.pico,
+        .optimize = .ReleaseSmall,
+        .root_source_file = b.path("src/main.zig"),
+    });
+
+    // We call this twice to demonstrate that the default binary output for
+    // RP2040 is UF2, but we can also output other formats easily
+    mb.install_firmware(firmware, .{ });
+    mb.install_firmware(firmware, .{ .format = .elf });
+}
+```
+
+and for your `src/main.zig`, let's start with a classic blinky program. Yes,
+most of the main stdlib is available for use on an MCU with Zig:
+
+```zig
+const std = @import("std");
+const microzig = @import("microzig");
+const rp2xxx = microzig.hal;
+const time = rp2xxx.time;
+
+// Compile-time pin configuration
+const pin_config = rp2xxx.pins.GlobalConfiguration{
+    .GPIO25 = .{
+        .name = "led",
+        .direction = .out,
+    },
+};
+
+const pins = pin_config.pins();
+
+pub fn main() !void {
+    pin_config.apply();
+
+    while (true) {
+        pins.led.toggle();
+        time.sleep_ms(250);
+    }
+}
+```
+
+Now if you run `zig build`, our extremely simple program will be installed under `zig-out`:
+
+```
+zig-out
+└── firmware
+    ├── blinky.uf2
+    └── blinky.elf
+```
+
+And if we run the `file` command, often found on Linux and MacOS, on the ELF
+file we'll see that it's targetting ARM!:
+
+```
+zig-out/firmware/blinky.elf: ELF 32-bit LSB executable, ARM, EABI5 version 1 (SYSV), statically linked, with debug_info, not stripped
+```
+
+## Programming the MCU
+
+To activate the UF2 bootloader, power must be applied to the pico while the
+`BOOTSEL` button is held. This is best done by connecting a button from `RUN`
+to ground, pressing both buttons, and releasing the `RUN` button first, then
+`BOOTSEL`. The other option is to plug/unplug the USB cable which is awkward
+and gets tiresome.
+
+Copy the uf2 file into the mounted drive. Execution should take place immediately.
+
+## Further Resources
+
+- [Zig Language Reference](https://ziglang.org/documentation/0.13.0/)

website/layouts/templates/base.shtml

@@ -1,31 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title id="title"><super>
-      - Zig Embedded Group</title>
+    <title id="title"><super>MicroZig</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="$page.description">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:description" content="$page.description">
-    <meta name="twitter:title" content="$page.title.suffix(' - Zig Embedded Group')">
+    <meta name="twitter:title" content="$page.title.suffix(' - MicroZig')">
     <meta property="og:title" content="$page.title">
     <meta property="og:type" content="website">
     <link rel="stylesheet" href="$site.asset('style.css').link()">
     <link rel="icon" href="$site.asset('favicon.ico').link()" type="image/x-icon">
+    <script>
+      function navigateToVersion() {
+        const version = document.getElementById('versionSelect').value;
+        if (version) {
+          window.location.href = version;
+        }
+      }
+    </script>
   </head>
   <body>
-    <nav>
-      <ul class="navbar">
-        <li><a href="$site.page('index').link()">Home</a></li>
-        <li><a href="$site.page('about').link()">About</a></li>
-        <li><a href="$site.page('community').link()">Community</a></li>
-      </ul>
-    </nav>
-    <div id="main">
-      <super>
+    <div class="container">
+      <nav>
+        <div class="upper-header">
+          <img class="logo" src="$site.asset('logo-text-brightmode.svg').link()">
+        </div>
+        <hr>
+        <div class="navbar">
+          <a class="navlink" href="$site.page('/').link()">Home</a>
+          <a class="navlink" href="$site.page('community').link()">Community</a>
+          <a class="navlink" href="https://github.com/ZigEmbeddedGroup/microzig">Source Code</a>
+        </div>
+      </nav>
+      <div id="main">
+        <super>
+      </div>
+      <footer>
+      </footer>
     </div>
-    <footer>
-    </footer>
   </body>
 </html>