1
0
Fork 0
mirror of https://github.com/zigzap/zap.git synced 2025-10-21 15:44:10 +00:00

Fix tiny typos

This commit is contained in:
Jora Troosh 2023-10-27 12:27:23 +03:00
parent a231371c3a
commit ada2bd1837
No known key found for this signature in database
GPG key ID: 57652BDABA13A6A3
23 changed files with 559 additions and 534 deletions

View file

@ -1,5 +1,3 @@
# ⚡zap⚡ - blazingly fast backends in zig # ⚡zap⚡ - blazingly fast backends in zig
![](https://github.com/zigzap/zap/actions/workflows/build-zig-11.yml/badge.svg) [![Discord](https://img.shields.io/discord/1107835896356675706?label=chat&logo=discord&style=plastic)](https://discord.gg/jQAAN6Ubyj) ![](https://github.com/zigzap/zap/actions/workflows/build-zig-11.yml/badge.svg) [![Discord](https://img.shields.io/discord/1107835896356675706?label=chat&logo=discord&style=plastic)](https://discord.gg/jQAAN6Ubyj)
@ -364,16 +362,3 @@ pub fn main() !void {
}); });
} }
``` ```

View file

@ -329,4 +329,3 @@ Vulnerability Spectre v2: Mitigation; Enhanced IBRS, IBPB conditional,
Vulnerability Srbds: Mitigation; Microcode Vulnerability Srbds: Mitigation; Microcode
Vulnerability Tsx async abort: Not affected Vulnerability Tsx async abort: Not affected
``` ```

View file

@ -122,7 +122,7 @@ var map = Map.init(allocator);
defer map.deinit(); defer map.deinit();
// create user / pass entry // create user / pass entry
const user = "Alladdin"; const user = "Aladdin";
const pass = "opensesame"; const pass = "opensesame";
try map.put(user, pass); try map.put(user, pass);
@ -268,5 +268,3 @@ pub fn main() !void {
}); });
} }
``` ```

View file

@ -85,7 +85,7 @@ hashes, as well as a `MY_TAG.tar.gz`.
You can then host this via python HTTP server and proceed as if you had You can then host this via python HTTP server and proceed as if you had
downloaded it from github. downloaded it from github.
If all goes well, your dependend code should be able to use your freshly-built If all goes well, your dependent code should be able to use your freshly-built
zap release, depending on it via localhost URL in its `build.zig.zon`. zap release, depending on it via localhost URL in its `build.zig.zon`.
If not, fix bugs, rinse, and repeat. If not, fix bugs, rinse, and repeat.
@ -97,5 +97,3 @@ with the non-localhost version from the master branch. Commit it, make sure your
worktree is clean, and perform above steps again. This time, using a tag that worktree is clean, and perform above steps again. This time, using a tag that
doesn't contain `localhost`. You can then push to your fork and create a release doesn't contain `localhost`. You can then push to your fork and create a release
for the future when zig's bug is fixed. for the future when zig's bug is fixed.

View file

@ -28,7 +28,7 @@ the `.hash` value in `build.zig.zon`.
## Using an arbitrary (last) commit ## Using an arbitrary (last) commit
Use the same workflow as above for tags, excpept for the URL, use this schema: Use the same workflow as above for tags, except for the URL, use this schema:
```zig ```zig
.url = "https://github.com/zigzap/zap/archive/[COMMIT-HASH].tar.gz", .url = "https://github.com/zigzap/zap/archive/[COMMIT-HASH].tar.gz",
@ -36,5 +36,3 @@ Use the same workflow as above for tags, excpept for the URL, use this schema:
Replace `[COMMIT-HASH]` with the full commit hash as provided, e.g. by `git Replace `[COMMIT-HASH]` with the full commit hash as provided, e.g. by `git
log`. log`.

View file

@ -64,7 +64,7 @@ fn on_request_with_errors(r: zap.SimpleHttpRequest) !void {
``` ```
```zig ```zig
// THIS IS WHAT YOU PASS TO THE LISTENER / ENDPONT / ... // THIS IS WHAT YOU PASS TO THE LISTENER / ENDPOINT / ...
fn on_request(r: zap.SimpleHttpRequest) void { fn on_request(r: zap.SimpleHttpRequest) void {
on_request_with_errors(r) catch |err| { on_request_with_errors(r) catch |err| {
// log the error or use: // log the error or use:
@ -84,5 +84,3 @@ To better support the use-case of flask-like error returning, we will "soon":
- only in debug builds would it return the stack traces and in release builds it - only in debug builds would it return the stack traces and in release builds it
would return more generic 50x responses. would return more generic 50x responses.

View file

@ -92,16 +92,14 @@ pub fn main() !void {
Handler.alloc = allocator; Handler.alloc = allocator;
// setup listener // setup listener
var listener = zap.SimpleHttpListener.init( var listener = zap.SimpleHttpListener.init(.{
.{ .port = 3000,
.port = 3000, .on_request = Handler.on_request,
.on_request = Handler.on_request, .log = true,
.log = true, .max_clients = 10,
.max_clients = 10, .max_body_size = 10 * 1024 * 1024,
.max_body_size = 10 * 1024 * 1024, .public_folder = ".",
.public_folder = ".", });
},
);
zap.enableDebugLog(); zap.enableDebugLog();
try listener.listen(); try listener.listen();
std.log.info("\n\nURL is http://localhost:3000\n", .{}); std.log.info("\n\nURL is http://localhost:3000\n", .{});

View file

@ -98,15 +98,13 @@ pub fn main() !void {
Handler.alloc = allocator; Handler.alloc = allocator;
// setup listener // setup listener
var listener = zap.SimpleHttpListener.init( var listener = zap.SimpleHttpListener.init(.{
.{ .port = 3000,
.port = 3000, .on_request = Handler.on_request,
.on_request = Handler.on_request, .log = false,
.log = false, .max_clients = 10,
.max_clients = 10, .max_body_size = 1 * 1024,
.max_body_size = 1 * 1024, });
},
);
zap.enableDebugLog(); zap.enableDebugLog();
try listener.listen(); try listener.listen();
std.log.info("\n\nTerminate with CTRL+C", .{}); std.log.info("\n\nTerminate with CTRL+C", .{});

View file

@ -92,7 +92,6 @@ fn postUser(e: *zap.SimpleEndpoint, r: zap.SimpleRequest) void {
} }
} else |err| { } else |err| {
std.debug.print("ADDING error: {}\n", .{err}); std.debug.print("ADDING error: {}\n", .{err});
return;
} }
} }
} }

View file

@ -1,23 +1,59 @@
<html lang='en'> <html lang='en'>
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<meta name='viewport' content='width=device-width'> <meta name='viewport' content='width=device-width'>
<title>ZAP Demo</title> <title>ZAP Demo</title>
<style> <style>
body {background-color: #0d1117; } body {
h1 {color: #cdb4db; text-align: center;} background-color: #0d1117;
h2 {color: #ffafcc; text-align: center;} }
h3 {color: #ffc8dd; text-align: center; text-decoration: underline;}
.brighter {color: #bde0fe;}
p {color: #ffc927; padding-left: 50px; margin-right: 50px;}
label {color: #B0B0B0;} h1 {
a {color: #ffc927; padding-left:15px;}
input {color: #B06060; margin-bottom: 20px; font-weight: bold; }
textarea {
background-color:#181818;
color: #cdb4db; color: #cdb4db;
font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace; text-align: center;
}
h2 {
color: #ffafcc;
text-align: center;
}
h3 {
color: #ffc8dd;
text-align: center;
text-decoration: underline;
}
.brighter {
color: #bde0fe;
}
p {
color: #ffc927;
padding-left: 50px;
margin-right: 50px;
}
label {
color: #B0B0B0;
}
a {
color: #ffc927;
padding-left: 15px;
}
input {
color: #B06060;
margin-bottom: 20px;
font-weight: bold;
}
textarea {
background-color: #181818;
color: #cdb4db;
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
font-size: 1em; font-size: 1em;
border-radius: 12px; border-radius: 12px;
border: 2px solid #cdb4db; border: 2px solid #cdb4db;
@ -26,6 +62,7 @@
width: 80%; width: 80%;
height: 18rem; height: 18rem;
} }
form { form {
border: 2px solid #cdb4db; border: 2px solid #cdb4db;
border-radius: 12px; border-radius: 12px;
@ -36,6 +73,7 @@
text-align: center; text-align: center;
justify-content: center; justify-content: center;
} }
.tdform { .tdform {
border: none; border: none;
border-radius: none; border-radius: none;
@ -46,6 +84,7 @@
text-align: center; text-align: center;
justify-content: center; justify-content: center;
} }
button { button {
background-color: #ffafcc; background-color: #ffafcc;
border-radius: 12px; border-radius: 12px;
@ -55,37 +94,42 @@
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
} }
.updatebutton { .updatebutton {
background-color: #B0B0B0; background-color: #B0B0B0;
color: #181818; color: #181818;
} }
.delbutton { .delbutton {
background-color: #B06060; background-color: #B06060;
color: white; color: white;
} }
.center { .center {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
table { table {
background-color:#181818; background-color: #181818;
border-radius: 12px; border-radius: 12px;
padding: 12px; padding: 12px;
} }
th { th {
color: #B06060; color: #B06060;
padding: 15px; padding: 15px;
} }
td { td {
color: #B0B0B0; color: #B0B0B0;
} }
tr {
}
</style> </style>
<html> <html>
<body> <body>
<div class="center"> <div class="center">
<form > <form>
<div> <div>
<label>First name:</label><br> <label>First name:</label><br>
<input id="first_name"></input> <input id="first_name"></input>
@ -94,7 +138,7 @@
<label>Last name:</label><br> <label>Last name:</label><br>
<input id="last_name"></input> <input id="last_name"></input>
</div> </div>
<div > <div>
<button type="button" onclick="onNewUser();">Add new user!</button> <button type="button" onclick="onNewUser();">Add new user!</button>
</div> </div>
</form> </form>
@ -113,149 +157,150 @@
<textarea id="log" style="display:none"></textarea> <textarea id="log" style="display:none"></textarea>
</div> </div>
</div> </div>
<script> <script>
var eL = document.getElementById("log"); var eL = document.getElementById("log");
var eLt = document.getElementById("logtoggler"); var eLt = document.getElementById("logtoggler");
var showLog = false; var showLog = false;
function toggleLog() { function toggleLog() {
if(showLog) { if (showLog) {
eL.style.display = "none"; eL.style.display = "none";
eLt.textContent = "(show)"; eLt.textContent = "(show)";
} else { } else {
eL.style.display = "block"; eL.style.display = "block";
eLt.textContent = "(hide)"; eLt.textContent = "(hide)";
}
showLog = !showLog;
}
function log(s) {
eL.value += s.toString();
eL.value += "\n"
eL.scrollTop = eL.scrollHeight;
}
function sendJSON(data, slug, method="POST") {
json = JSON.stringify(data);
log("SENDING: " + json);
const response = fetch(slug, {
method: method,
body: json,
headers: {
"Content-Type": "application/json; charset=UTF-8"
} }
}); showLog = !showLog;
return response;
}
function onNewUser() {
var first_name = document.getElementById("first_name").value;
var last_name = document.getElementById("last_name").value;
data = {
first_name: first_name,
last_name: last_name,
} }
sendJSON(data, "/users", "POST") function log(s) {
.then((response) => response.json()) eL.value += s.toString();
.then((data) => { eL.value += "\n"
log("SUCESS: " + JSON.stringify(data)); eL.scrollTop = eL.scrollHeight;
getUserList();
})
.catch((error) => {
log("Error posting data");
});
}
function deleteUser(id) {
fetch("/users/" + id, { method: "DELETE", } )
.then((response) => response.json())
.then((data) => {
log("SUCESS: " + JSON.stringify(data));
getUserList();
})
.catch((error) => {
log("Error deleting data");
});
}
function changeUser(id) {
const firstname = document.getElementById("first_" + id).value;
const lastname = document.getElementById("last_" + id).value;
data = {
first_name: firstname,
last_name: lastname,
} }
sendJSON(data, "/users/" + id, "PATCH")
.then((response) => response.json())
.then((data) => {
log("SUCESS: " + JSON.stringify(data));
getUserList();
})
.catch((error) => {
log("Error updating data");
});
}
function addHeaderCell(tr, text) { function sendJSON(data, slug, method = "POST") {
var th = document.createElement('TH'); json = JSON.stringify(data);
th.innerHTML = text; log("SENDING: " + json);
tr.appendChild(th); const response = fetch(slug, {
} method: method,
body: json,
function showTable(users) { headers: {
var t = document.getElementById("usertable"); "Content-Type": "application/json; charset=UTF-8"
var new_t = document.createElement("TABLE"); }
var header = new_t.createTHead(); });
var tr = header.insertRow(); return response;
// insertCell creates TD, we want TH }
addHeaderCell(tr, 'id');
addHeaderCell(tr, 'first name'); function onNewUser() {
addHeaderCell(tr, 'last name'); var first_name = document.getElementById("first_name").value;
addHeaderCell(tr, ''); var last_name = document.getElementById("last_name").value;
addHeaderCell(tr, ''); data = {
first_name: first_name,
console.log("showTable()"); last_name: last_name,
console.log(users); }
// add the data rows sendJSON(data, "/users", "POST")
for(var i=0; i<users.length; i++) { .then((response) => response.json())
var row = new_t.insertRow(); .then((data) => {
var c1 = row.insertCell(); log("SUCCESS: " + JSON.stringify(data));
c1.innerHTML = users[i].id; getUserList();
var c2 = row.insertCell(); })
c2.innerHTML = '<input id="first_' + users[i].id + '" value="' + users[i].first_name + '"></input>'; .catch((error) => {
var c3 = row.insertCell(); log("Error posting data");
c3.innerHTML = '<input id="last_' + users[i].id + '" value="' + users[i].last_name + '"></input>'; });
var c4 = row.insertCell(); }
c4.innerHTML = ''
+ '<form class="tdform"><button class="updatebutton" type="button" onclick="changeUser(' + users[i].id + ');">change</button></form>' function deleteUser(id) {
; fetch("/users/" + id, { method: "DELETE", })
var c5 = row.insertCell(); .then((response) => response.json())
c5.innerHTML = '' .then((data) => {
+ '<form class="tdform"><button class="delbutton" type="button" onclick="deleteUser(' + users[i].id + ');">del</button></form>' log("SUCCESS: " + JSON.stringify(data));
; getUserList();
})
.catch((error) => {
log("Error deleting data");
});
}
function changeUser(id) {
const firstname = document.getElementById("first_" + id).value;
const lastname = document.getElementById("last_" + id).value;
data = {
first_name: firstname,
last_name: lastname,
}
sendJSON(data, "/users/" + id, "PATCH")
.then((response) => response.json())
.then((data) => {
log("SUCCESS: " + JSON.stringify(data));
getUserList();
})
.catch((error) => {
log("Error updating data");
});
}
function addHeaderCell(tr, text) {
var th = document.createElement('TH');
th.innerHTML = text;
tr.appendChild(th);
}
function showTable(users) {
var t = document.getElementById("usertable");
var new_t = document.createElement("TABLE");
var header = new_t.createTHead();
var tr = header.insertRow();
// insertCell creates TD, we want TH
addHeaderCell(tr, 'id');
addHeaderCell(tr, 'first name');
addHeaderCell(tr, 'last name');
addHeaderCell(tr, '');
addHeaderCell(tr, '');
console.log("showTable()");
console.log(users);
// add the data rows
for (var i = 0; i < users.length; i++) {
var row = new_t.insertRow();
var c1 = row.insertCell();
c1.innerHTML = users[i].id;
var c2 = row.insertCell();
c2.innerHTML = '<input id="first_' + users[i].id + '" value="' + users[i].first_name + '"></input>';
var c3 = row.insertCell();
c3.innerHTML = '<input id="last_' + users[i].id + '" value="' + users[i].last_name + '"></input>';
var c4 = row.insertCell();
c4.innerHTML = ''
+ '<form class="tdform"><button class="updatebutton" type="button" onclick="changeUser(' + users[i].id + ');">change</button></form>'
;
var c5 = row.insertCell();
c5.innerHTML = ''
+ '<form class="tdform"><button class="delbutton" type="button" onclick="deleteUser(' + users[i].id + ');">del</button></form>'
;
}
console.log("before replace");
t.innerHTML = new_t.innerHTML;
console.log("after replace");
} }
console.log("before replace");
t.innerHTML = new_t.innerHTML;
console.log("after replace");
}
function getUserList() { function getUserList() {
fetch("/users", { method: "GET", } ) fetch("/users", { method: "GET", })
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
log("SUCESS: " + JSON.stringify(data)); log("SUCCESS: " + JSON.stringify(data));
showTable(data); showTable(data);
}) })
.catch((error) => { .catch((error) => {
log("Error fetching data"); log("Error fetching data");
}); });
} }
function init() { function init() {
getUserList(); getUserList();
} }
init(); init();
</script> </script>
</body> </body>
</html> </html>

View file

@ -98,15 +98,13 @@ pub fn main() !void {
Handler.alloc = allocator; Handler.alloc = allocator;
// setup listener // setup listener
var listener = zap.SimpleHttpListener.init( var listener = zap.SimpleHttpListener.init(.{
.{ .port = 3000,
.port = 3000, .on_request = Handler.on_request,
.on_request = Handler.on_request, .log = false,
.log = false, .max_clients = 10,
.max_clients = 10, .max_body_size = 1 * 1024,
.max_body_size = 1 * 1024, });
},
);
zap.enableDebugLog(); zap.enableDebugLog();
try listener.listen(); try listener.listen();
std.log.info("\n\nTerminate with CTRL+C or by sending query param terminate=true\n", .{}); std.log.info("\n\nTerminate with CTRL+C or by sending query param terminate=true\n", .{});

View file

@ -191,7 +191,6 @@ const HtmlEndpoint = struct {
r.setContentType(.TEXT) catch unreachable; r.setContentType(.TEXT) catch unreachable;
r.sendBody(message) catch unreachable; r.sendBody(message) catch unreachable;
return;
} }
}; };

View file

@ -27,15 +27,13 @@ pub fn on_request(r: zap.SimpleRequest) void {
pub fn main() !void { pub fn main() !void {
// setup listener // setup listener
var listener = zap.SimpleHttpListener.init( var listener = zap.SimpleHttpListener.init(.{
.{ .port = 3000,
.port = 3000, .on_request = on_request,
.on_request = on_request, .log = true,
.log = true, .max_clients = 10,
.max_clients = 10, .max_body_size = 1 * 1024, // careful here
.max_body_size = 1 * 1024, // careful here });
},
);
zap.enableDebugLog(); zap.enableDebugLog();
try listener.listen(); try listener.listen();

View file

@ -1,90 +1,94 @@
<html> <html>
<head>
<style>
/* Bordered form */
form {
border: 3px solid #f1f1f1;
}
/* Full-width inputs */ <head>
input[type=text], input[type=password] { <style>
width: 100%; /* Bordered form */
padding: 12px 20px; form {
margin: 8px 0; border: 3px solid #f1f1f1;
display: inline-block; }
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */ /* Full-width inputs */
button { input[type=text],
background-color: #04AA6D; input[type=password] {
color: white; width: 100%;
padding: 14px 20px; padding: 12px 20px;
margin: 8px 0; margin: 8px 0;
border: none; display: inline-block;
cursor: pointer; border: 1px solid #ccc;
width: 100%; box-sizing: border-box;
} }
/* Add a hover effect for buttons */ /* Set a style for all buttons */
button:hover { button {
opacity: 0.8; background-color: #04AA6D;
} color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Extra style for the cancel button (red) */ /* Add a hover effect for buttons */
.cancelbtn { button:hover {
width: auto; opacity: 0.8;
padding: 10px 18px; }
background-color: #f44336;
}
/* Center the avatar image inside this container */ /* Extra style for the cancel button (red) */
.imgcontainer { .cancelbtn {
text-align: center; width: auto;
margin: 24px 0 12px 0; padding: 10px 18px;
} background-color: #f44336;
}
/* Avatar image */ /* Center the avatar image inside this container */
img.avatar { .imgcontainer {
width: 40%; text-align: center;
border-radius: 50%; margin: 24px 0 12px 0;
} }
/* Add padding to containers */ /* Avatar image */
.container { img.avatar {
padding: 16px; width: 40%;
} border-radius: 50%;
}
/* Add padding to containers */
.container {
padding: 16px;
}
/* Change styles for span and cancel button on extra small screens */ /* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) { @media screen and (max-width: 300px) {
span.psw { span.psw {
display: block; display: block;
float: none; float: none;
} }
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<form action="normal_page" method="post"> <!-- we post directly to the page we want to display if login is successful-->
<div class="imgcontainer">
<img src="/login/Ziggy_the_Ziguana.svg.png" alt="Avatar" class="avatar">
</div>
<div class="container"> .cancelbtn {
<label for="username"><b>Username</b></label> width: 100%;
<input type="text" placeholder="Enter Username" name="username" required> }
}
</style>
</head>
<label for="password"><b>Password</b></label> <body>
<input type="password" placeholder="Enter Password" name="password" required> <form action="normal_page" method="post"> <!-- we post directly to the page we want to display if login is successful-->
<div class="imgcontainer">
<img src="/login/Ziggy_the_Ziguana.svg.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="username"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="username" required>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit">Login</button>
</div>
</form>
</body>
<button type="submit">Login</button>
</div>
</form>
</body>
</html> </html>

View file

@ -1,183 +1,192 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="showdown.min.js"></script>
<title>ZAP-Chat</title> <head>
<style> <meta charset="UTF-8">
* { <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
box-sizing: border-box; <script src="showdown.min.js"></script>
}
body { <title>ZAP-Chat</title>
font-family: 'Arial', sans-serif; <style>
background-color: #f0f0f0; * {
margin: 0; box-sizing: border-box;
padding: 0;
padding-bottom: 80px;
}
.container {
max-width: 960px;
margin: 0 auto;
}
header {
background-color: #cd0f0d;
color: white;
text-align: center;
padding: 1.5rem;
}
header h1 {
font-size: 2rem;
margin: 0;
}
.chat-container {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 2rem;
/* height: 500px; */
height: calc(100vh - 260px);
margin-top: 2rem;
overflow-y: auto;
}
.message {
max-width: 80%;
padding: 0.5rem;
margin-bottom: 1rem;
border-radius: 10px;
/* font-size: 1.2rem; */
}
.bot {
align-self: flex-start;
background-color: #e0e0e0;
}
.user {
align-self: flex-end;
background-color: #cd0f0d;;
color: white;
}
.busy-indicator {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #ffffff;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
} }
100% {
transform: rotate(360deg); body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
padding-bottom: 80px;
} }
}
.input-container { .container {
display: flex; max-width: 960px;
justify-content: space-between; margin: 0 auto;
position: fixed; }
bottom: 0px;
left: 0;
right: 0;
background-color: #f0f0f0;
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 0.8rem;
padding-top: 1rem;
max-width: 960px;
margin-left: auto;
margin-right: auto;
/* box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); */
}
.input-container input { header {
flex-grow: 1; background-color: #cd0f0d;
padding: 1rem; color: white;
border-radius: 10px; text-align: center;
border: 2px solid #cd0f0d; padding: 1.5rem;
outline: none; }
/* font-size: 1.2rem; */
}
.input-container button { header h1 {
background-color: #cd0f0d;; font-size: 2rem;
color: white; margin: 0;
border: none; }
border-radius: 10px;
padding: 1rem 2rem;
cursor: pointer;
margin-left: 1rem;
outline: none;
transition: 0.3s;
}
.input-container button:hover { .chat-container {
background-color: #A20000; display: flex;
} flex-direction: column;
justify-content: space-between;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 2rem;
/* height: 500px; */
height: calc(100vh - 260px);
margin-top: 2rem;
overflow-y: auto;
}
.status-bar { .message {
background-color: #8B0000; max-width: 80%;
color: white; padding: 0.5rem;
text-align: center; margin-bottom: 1rem;
padding: 0.5rem; border-radius: 10px;
font-size: 0.9rem; /* font-size: 1.2rem; */
position: fixed; }
/* bottom: 60px; */
left: 0;
right: 0;
max-width: 960px;
margin-left: auto;
margin-right: auto;
/* border-top-left-radius: 10px; */
/* border-top-right-radius: 10px; */
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
.status-online { .bot {
/* Green, MediumSeaGreen */ align-self: flex-start;
background-color: #3CB371; background-color: #e0e0e0;
} }
.status-busy {
/* Blue, DodgerBlue */
background-color: #1E90FF;
}
.status-thinking {
/* Light Gray, LightSlateGray */
background-color: #778899;
}
.status-offline {
/* Red, Tomato */
background-color: #FF6347;
}
.status-warning {
/* Yellow, Goldenrod */
background-color: #DAA520;
}
.status-error {
/* Dark-Red, Firebrick */
background-color: #B22222;
}
</style> .user {
align-self: flex-end;
background-color: #cd0f0d;
;
color: white;
}
.busy-indicator {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #ffffff;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.input-container {
display: flex;
justify-content: space-between;
position: fixed;
bottom: 0px;
left: 0;
right: 0;
background-color: #f0f0f0;
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 0.8rem;
padding-top: 1rem;
max-width: 960px;
margin-left: auto;
margin-right: auto;
/* box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); */
}
.input-container input {
flex-grow: 1;
padding: 1rem;
border-radius: 10px;
border: 2px solid #cd0f0d;
outline: none;
/* font-size: 1.2rem; */
}
.input-container button {
background-color: #cd0f0d;
;
color: white;
border: none;
border-radius: 10px;
padding: 1rem 2rem;
cursor: pointer;
margin-left: 1rem;
outline: none;
transition: 0.3s;
}
.input-container button:hover {
background-color: #A20000;
}
.status-bar {
background-color: #8B0000;
color: white;
text-align: center;
padding: 0.5rem;
font-size: 0.9rem;
position: fixed;
/* bottom: 60px; */
left: 0;
right: 0;
max-width: 960px;
margin-left: auto;
margin-right: auto;
/* border-top-left-radius: 10px; */
/* border-top-right-radius: 10px; */
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
.status-online {
/* Green, MediumSeaGreen */
background-color: #3CB371;
}
.status-busy {
/* Blue, DodgerBlue */
background-color: #1E90FF;
}
.status-thinking {
/* Light Gray, LightSlateGray */
background-color: #778899;
}
.status-offline {
/* Red, Tomato */
background-color: #FF6347;
}
.status-warning {
/* Yellow, Goldenrod */
background-color: #DAA520;
}
.status-error {
/* Dark-Red, Firebrick */
background-color: #B22222;
}
</style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<header> <header>
@ -207,4 +216,5 @@
document.head.appendChild(scriptTag); document.head.appendChild(scriptTag);
</script> </script>
</body> </body>
</html> </html>

View file

@ -39,13 +39,13 @@ See [the README](https://github.com/renerocksai/zap) for how easy it is to get s
I'll continue wrapping more of facil.io's functionality and adding stuff to zap to a point where I can use it as the JSON REST API backend for real research projects, serving thousands of concurrent clients. Now that the endpoint example works, ZAP has actually become pretty usable to me. I'll continue wrapping more of facil.io's functionality and adding stuff to zap to a point where I can use it as the JSON REST API backend for real research projects, serving thousands of concurrent clients. Now that the endpoint example works, ZAP has actually become pretty usable to me.
**Side-note:** It never ceases to amaze me how productive I can be in zig, eventhough I am still considering myself to be a newbie. Sometimes, it's almost like writing python but with all the nice speed and guarantees that zig gives you. Also, the C integration abilities of zig are just phenomenal! I am super excited about zig's future! **Side-note:** It never ceases to amaze me how productive I can be in zig, even though I am still considering myself to be a newbie. Sometimes, it's almost like writing python but with all the nice speed and guarantees that zig gives you. Also, the C integration abilities of zig are just phenomenal! I am super excited about zig's future!
Now, on to the guiding principles of Zap. Now, on to the guiding principles of Zap.
## robust ## robust
A common recommendation for doing web stuff in zig is to write the actual HTTP server in Go, and use zig for the real work. While there is a selection of notable and cool HTTP server implementations written in zig out there, at the time of writing, most of them seem to a) depend on zig's async facilities which are unsupported until ca. April 2023 when async will return to the self-hosted compiler, and b) have not matured to a point where **I** feel safe using them in production. These are just my opionions and they could be totally wrong though. A common recommendation for doing web stuff in zig is to write the actual HTTP server in Go, and use zig for the real work. While there is a selection of notable and cool HTTP server implementations written in zig out there, at the time of writing, most of them seem to a) depend on zig's async facilities which are unsupported until ca. April 2023 when async will return to the self-hosted compiler, and b) have not matured to a point where **I** feel safe using them in production. These are just my opinions and they could be totally wrong though.
However, when I conduct my next online research experiment with thousands of concurrent clients, I cannot afford to run into potential maturity-problems of the HTTP server. These projects typically feature a you-get-one-shot process with little room for errors or re-tries. However, when I conduct my next online research experiment with thousands of concurrent clients, I cannot afford to run into potential maturity-problems of the HTTP server. These projects typically feature a you-get-one-shot process with little room for errors or re-tries.
@ -91,10 +91,10 @@ I am super excited about both zig and zap's future. I am still impressed by how
Provided that the incorporated C code is well-written and -tested, WYSIWYG even holds mostly true for combined Zig and C projects. Provided that the incorporated C code is well-written and -tested, WYSIWYG even holds mostly true for combined Zig and C projects.
You can truly build on the soulders of giants here. Mind you, it took me less than a week to arrive at the current state of zap where I am confident that I can already use it to write the one or other REST API with it and, after stress-testing, just move it into production - from merely researching Zig and C web frameworks a few days ago. You can truly build on the shoulders of giants here. Mind you, it took me less than a week to arrive at the current state of zap where I am confident that I can already use it to write the one or other REST API with it and, after stress-testing, just move it into production - from merely researching Zig and C web frameworks a few days ago.
Oh, and have I mentioned Zig's built-in build system and testing framework? Those are both super amazing and super convenient. `zig build` is so much more useful than `make` (which I quite like to be honest). And `zig test` is just amazing, too. Zig's physical code layout: which file is located where and how can it be built, imported, tested - it all makes so much sense. Such a coherent, pleasant experience. Oh, and have I mentioned Zig's built-in build system and testing framework? Those are both super amazing and super convenient. `zig build` is so much more useful than `make` (which I quite like to be honest). And `zig test` is just amazing, too. Zig's physical code layout: which file is located where and how can it be built, imported, tested - it all makes so much sense. Such a coherent, pleasant experience.
Looking forward, I am also tempted to try adding some log-and-replay facilities as a kind of backup for when things go wrong. I wouldn't be confident to attemt such things in C because I'd view them as being too much work; too much could go wrong. But with Zig, I am rather excited about the possibilities that open up and eager to try such things. Looking forward, I am also tempted to try adding some log-and-replay facilities as a kind of backup for when things go wrong. I wouldn't be confident to attempt such things in C because I'd view them as being too much work; too much could go wrong. But with Zig, I am rather excited about the possibilities that open up and eager to try such things.
For great justice! For great justice!

View file

@ -156,7 +156,7 @@ pub fn BasicAuth(comptime Lookup: type, comptime kind: BasicAuthStrategy) type {
} else |err| { } else |err| {
// can't calc slice size --> fallthrough to return false // can't calc slice size --> fallthrough to return false
zap.debug( zap.debug(
"ERROR: UserPassAuth: cannot calc slize size for encoded `{s}`: {any} \n", "ERROR: UserPassAuth: cannot calc slice size for encoded `{s}`: {any} \n",
.{ encoded, err }, .{ encoded, err },
); );
return .AuthFailed; return .AuthFailed;

View file

@ -80,7 +80,7 @@ pub fn Handler(comptime ContextType: anytype) type {
}; };
} }
/// A convenience handler for artibrary zap.SimpleEndpoint /// A convenience handler for arbitrary zap.SimpleEndpoint
pub fn EndpointHandler(comptime HandlerType: anytype, comptime ContextType: anytype) type { pub fn EndpointHandler(comptime HandlerType: anytype, comptime ContextType: anytype) type {
return struct { return struct {
handler: HandlerType, handler: HandlerType,

View file

@ -74,7 +74,7 @@ test "BasicAuth UserPass" {
defer map.deinit(); defer map.deinit();
// create user / pass entry // create user / pass entry
const user = "Alladdin"; const user = "Aladdin";
const pass = "opensesame"; const pass = "opensesame";
try map.put(user, pass); try map.put(user, pass);
@ -521,7 +521,7 @@ test "BasicAuth UserPass authenticateRequest" {
defer map.deinit(); defer map.deinit();
// create user / pass entry // create user / pass entry
const user = "Alladdin"; const user = "Aladdin";
const pass = "opensesame"; const pass = "opensesame";
try map.put(user, pass); try map.put(user, pass);
@ -587,7 +587,7 @@ test "BasicAuth UserPass authenticateRequest test-unauthorized" {
defer map.deinit(); defer map.deinit();
// create user / pass entry // create user / pass entry
const user = "Alladdin"; const user = "Aladdin";
const pass = "opensesame"; const pass = "opensesame";
try map.put(user, pass); try map.put(user, pass);