Basic home page for the website

Now the module documentation is under `/docs`
Arnau478 · May 14, 2024 · 62b0e34 · 62b0e34
1 parent 6a4592e
commit 62b0e34
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 8 deletions.
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
@@ -11,21 +11,21 @@ concurrency:
   group: pages
   cancel-in-progress: false
 jobs:
-  docs:
+  web:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: goto-bus-stop/setup-zig@v2
-      - run: zig build docs
+      - run: zig build web
       - uses: actions/upload-pages-artifact@v3
         with:
-          path: ./zig-out/docs
+          path: ./zig-out/web
   deploy:
     runs-on: ubuntu-latest
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
-    needs: docs
+    needs: web
     steps:
       - id: deployment
         uses: actions/deploy-pages@v4
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 ![ci status](https://github.com/Arnau478/hevi/actions/workflows/ci.yml/badge.svg)
 
-![example image](assets/example.png)
+![example image](web/example.png)
 
 ## What is hevi?
 Hevi is a hex viewer, just like `xxd` or `hexdump`.

diff --git a/build.zig b/build.zig
@@ -99,21 +99,32 @@ pub fn build(b: *std.Build) !void {
 
     const docs_step = b.step("docs", "Build the documentation");
 
-    const obj = b.addObject(.{
+    const docs_obj = b.addObject(.{
         .name = "hevi",
         .target = target,
         .optimize = .Debug,
         .root_source_file = .{ .path = "src/hevi.zig" },
     });
+    docs_obj.root_module.addOptions("build_options", build_options);
 
-    obj.root_module.addOptions("build_options", build_options);
+    const docs = docs_obj.getEmittedDocs();
 
     docs_step.dependOn(&b.addInstallDirectory(.{
-        .source_dir = obj.getEmittedDocs(),
+        .source_dir = docs,
         .install_dir = .prefix,
         .install_subdir = "docs",
     }).step);
 
+    const web_step = b.step("web", "Build the whole web page");
+    const web_wf = b.addWriteFiles();
+    _ = web_wf.addCopyDirectory(.{ .path = "web" }, "", .{});
+    _ = web_wf.addCopyDirectory(docs, "docs", .{});
+    web_step.dependOn(&b.addInstallDirectory(.{
+        .source_dir = web_wf.getDirectory(),
+        .install_dir = .prefix,
+        .install_subdir = "web",
+    }).step);
+
     const release_step = b.step("release", "Create release builds for all targets");
     for (release_targets) |rt| {
         const rexe = addExe(b, b.resolveTargetQuery(rt), .ReleaseSmall, true, build_options, mod);

diff --git a/assets/example.png → web/example.png b/assets/example.png → web/example.png
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>hevi</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="description" content="A hex viewer">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+        <link rel="preload" href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
+        <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap"></noscript>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <h1>hevi</h1>
+        <p class="subtitle">A hex viewer</p>
+        <img src="example.png" style="width: 50%;"></img>
+        <div>
+            <a class="button" href="https://github.com/Arnau478/hevi"><i class="fa fa-github"></i> github</a>
+            <a class="button" href="docs"><i class="fa fa-book"></i> docs</a>
+        </div>
+    </body>
+</html>
diff --git a/web/style.css b/web/style.css
@@ -0,0 +1,30 @@
+body {
+    background-color: #121212;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    color: #FFFFFF;
+    font-family: "Fira Sans";
+    padding: 50px;
+}
+
+.subtitle {
+    color: #CCCCCC;
+}
+
+.button {
+    background-color: #FFFFFF;
+    color: #121212;
+    border: 3px solid #FFFFFF;
+    font-family: "Fira Sans";
+    text-decoration: none;
+    font-size: 16px;
+    border-radius: 4px;
+    padding: 5px;
+    transition: 0.25s;
+}
+
+.button:hover {
+    background-color: #121212;
+    color: #FFFFFF;
+}