From efa6921225b4185493d4c6f8116d69f27163ce6e Mon Sep 17 00:00:00 2001 From: Auguste Rame Date: Mon, 30 May 2022 17:41:27 -0400 Subject: [PATCH] Start of website styling changes (redesigned index) --- build.zig | 10 +-- src/main.zig | 77 ++++--------------- src/style.css | 172 ++++++++++++++++++++++++++++++++++++++++++ website/img/ember.svg | 70 +++++++++++++++++ website/index.htm | 67 ++++++++++++++++ website/index.md | 53 ------------- 6 files changed, 329 insertions(+), 120 deletions(-) create mode 100644 src/style.css create mode 100644 website/img/ember.svg create mode 100644 website/index.htm delete mode 100644 website/index.md diff --git a/build.zig b/build.zig index 5c9de42..b0a0cd2 100644 --- a/build.zig +++ b/build.zig @@ -3,12 +3,12 @@ const std = @import("std"); const pkgs = struct { const koino = std.build.Pkg{ .name = "koino", - .path = .{ .path = "./deps/koino/src/koino.zig" }, + .source = .{ .path = "./deps/koino/src/koino.zig" }, .dependencies = &[_]std.build.Pkg{ - std.build.Pkg{ .name = "libpcre", .path = .{ .path = "deps/koino/vendor/libpcre.zig/src/main.zig" } }, - std.build.Pkg{ .name = "htmlentities", .path = .{ .path = "deps/koino/vendor/htmlentities.zig/src/main.zig" } }, - std.build.Pkg{ .name = "clap", .path = .{ .path = "deps/koino/vendor/zig-clap/clap.zig" } }, - std.build.Pkg{ .name = "zunicode", .path = .{ .path = "deps/koino/vendor/zunicode/src/zunicode.zig" } }, + std.build.Pkg{ .name = "libpcre", .source = .{ .path = "deps/koino/vendor/libpcre.zig/src/main.zig" } }, + std.build.Pkg{ .name = "htmlentities", .source = .{ .path = "deps/koino/vendor/htmlentities.zig/src/main.zig" } }, + std.build.Pkg{ .name = "clap", .source = .{ .path = "deps/koino/vendor/zig-clap/clap.zig" } }, + std.build.Pkg{ .name = "zunicode", .source = .{ .path = "deps/koino/vendor/zunicode/src/zunicode.zig" } }, }, }; }; diff --git a/src/main.zig b/src/main.zig index 5c23322..ff5a043 100644 --- a/src/main.zig +++ b/src/main.zig @@ -143,7 +143,9 @@ pub fn main() anyerror!void { var root_dir = try std.fs.cwd().makeOpenPath("render", .{}); defer root_dir.close(); - try website.renderMarkdownFile("website/index.md", root_dir, "index.htm"); + try root_dir.writeFile("style.css", @embedFile("style.css")); + + try website.renderHtmlFile("website/index.htm", root_dir, "index.htm"); try website.renderArticleIndex(root_dir, "articles.htm"); @@ -537,7 +539,17 @@ const Website = struct { try self.renderFooter(writer); } - /// Render the markdown body into `dst_path`. + /// Render a given markdown file into `dst_path`. + fn renderHtmlFile(self: *Self, src_path: []const u8, dst_dir: std.fs.Dir, dst_path: []const u8) !void { + std.debug.assert(self.is_prepared); + + var html_input = try std.fs.cwd().readFileAlloc(self.allocator, src_path, 10_000_000); + defer self.allocator.free(html_input); + + try self.renderHtml(html_input, dst_dir, dst_path); + } + + /// Render the html body into `dst_path`. fn renderHtml(self: Self, source: []const u8, dst_dir: std.fs.Dir, dst_path: []const u8) !void { std.debug.assert(self.is_prepared); @@ -561,66 +573,7 @@ const Website = struct { \\ \\ \\ ZEG - \\ + \\ \\ \\ ); diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..6e0aec8 --- /dev/null +++ b/src/style.css @@ -0,0 +1,172 @@ +/* Limit the text width of the body to roughly 40 characters +body { + max-width: 40em; + margin-left: auto; + margin-right: auto; + font-family: sans; +} + +@media screen and (max-width: 600px) { + body { + padding: 2em; + } +} +// Align top-level headings +h1 { + text-align: center; +} + +// Make images in headings and links exactly 1 character high. +h1 img, h2 img, h3 img, h3 img, h4 img, h5 img, h6 img, a img { + width: 1em; + height: 1em; + vertical-align: middle; +} + +// center images in a paragraph and display them as a block +p > img { + display: block; + max-width: 100%; + margin-left: auto; + margin-right: auto; +} + +// Make nice top-level codeblocks +body > pre { + background-color: #EEE; + padding: 0.5em; +} + +// Make nice top-level blockquotes +body > blockquote { + border-left: 3pt solid cornflowerblue; + padding-left: 0.5em; + margin-left: 0.5em; +} + +// Make links in headings invisible +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + text-decoration: none; + font-weight: lighter; + color: unset; + opacity: 10%; + margin-left: -1.5em; + padding-left: 0.5em; +} +h1:hover a, h2:hover a, h3:hover a, h4:hover a, h5:hover a, h6:hover a { + opacity: 50%; +}*/ + +@import"https://rsms.me/inter/inter.css"; + +html { + font-family: "Inter", "Arial", sans-serif +} + +@supports(font-variation-settings: normal) { + html { + font-family: "Inter var", "Arial", sans-serif + } +} + +* { + box-sizing: border-box +} + +html, +body { + margin: 0 +} + +h1 { + margin: 0; + font-size: 24pt; + font-weight: 700; + letter-spacing: -2px +} + +h2 { + font-size: 18pt; + font-weight: 600 +} + +ul.bars { + margin: 0; + padding: 0; + list-style: none +} + +ul.bars li { + border-bottom: 1px solid gray; + margin-bottom: 15px; + padding-bottom: 15px; + font-size: 12pt +} + +a { + color: #5c8ebf +} + +strong, +strong a { + color: #f7a41d +} + +#intro { + padding: 80px +} + +#intro-nav { + display: flex; + margin-bottom: 20px; + justify-content: space-between +} + +#intro-grid { + display: grid; + gap: 40px; + grid-auto-rows: 1fr; + grid-template-columns: 1fr 1fr 1fr +} + +@media only screen and (max-width: 1200px) { + #intro-grid { + grid-template-columns: 1fr 1fr + } +} + +@media only screen and (max-width: 700px) { + #intro-grid { + display: block + } + + #intro-grid>* { + display: block; + margin-bottom: 40px + } +} + +#intro-grid a { + text-decoration: none +} + +#docs { + display: flex +} + +#docs-nav { + border-right: 1px solid gray; + padding: 40px 0px; + width: 20% +} + +#docs-nav-header { + display: flex; + align-items: center; + flex-direction: column +} + +#docs-body { + width: 80%; + padding: 40px +} diff --git a/website/img/ember.svg b/website/img/ember.svg new file mode 100644 index 0000000..18aa542 --- /dev/null +++ b/website/img/ember.svg @@ -0,0 +1,70 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/website/index.htm b/website/index.htm new file mode 100644 index 0000000..62b6119 --- /dev/null +++ b/website/index.htm @@ -0,0 +1,67 @@ +
+ + +
+
+

goals

+ +
    +
  • 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
    • +
+
+ +
+

important links

+ + +
+ +
+

community

+ + +
+ +
+

articles

+ + +
+ +
+

members

+ + +
+
+ +
+ vectorized Ember, the awesome zeg mascot! +
+
\ No newline at end of file diff --git a/website/index.md b/website/index.md deleted file mode 100644 index 3c07e4a..0000000 --- a/website/index.md +++ /dev/null @@ -1,53 +0,0 @@ -# ![](img/pager.svg) Zig Embedded Group ![](img/battery.svg) - -This group was formed to document and improve the embedded programming experience with the [Zig programming language](https://ziglang.org). - -## ![](img/goals.svg) Goals - -- Provide documents on how to get started with embedded programming (for absolute newbies) -- Provide example snippets for common opperations 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 - -## ![](img/teacher.svg) Introduction to embedded programming - -If you've never done any embedded development before, it's a good point to start with one of our tutorials: - -- (*WIP*) [Embedded Basics](tutorials/01-embedded-basics.htm): Aims to provide a basic understanding of the embedded environment. -- (*WIP*) [Embedded Programming for Beginners](tutorials/02-embedded-programming.htm): Aims to provide a basic understanding of embedded programming concepts. -- *Coming soon* - -## ![](img/articles.svg) Latest Articles - -The latest articles on embedded programming with Zig: - - - -[![](img/read-more.svg) See all articles...](articles.htm) - -[![Atom Feed](img/atom.svg) Subscribe the Atom feed](feed.atom) - -## ![](img/code.svg) Code - -Here are some highlighted projects the ZEG provides: - -- *Coming soon* - -[![](img/read-more.svg) See all ZEG repositories...](https://github.com/ZigEmbeddedGroup/) - -## ![](img/community.svg) Community - -This group uses the already existing [community infrastructures](https://github.com/ziglang/zig/wiki/Community) that exist for Zig. More specifically: - -- ZEG members are active on the unofficial Zig [Discord Server](https://discord.gg/TyzJXjser6) -- For more specific embedded advice and ZEG internal development there is a [ZEG discord server](https://discord.gg/zqa3fgv6Ma) - -## ![](img/members.svg) Members - -- [Felix "xq" Queißner](https://github.com/MasterQ32/) -- [Matthew "mattnite" Knight](https://github.com/mattnite/) -- [Vesim](https://github.com/vesim987/) -- [Timon "FireFox317" Kruiper](https://github.com/FireFox317) -- [Martin "SpexGuy" Wickham](https://github.com/SpexGuy)