add template example project

Author: cgsdev0

core.sh

@@ -133,7 +133,9 @@ function decode_result() {
 
 function component() {
   local REQUEST_PATH
+  local REQUEST_METHOD
   REQUEST_PATH="$1"
+  REQUEST_METHOD="GET"
   route_script=`matchRoute "$REQUEST_PATH"`
   INTERNAL_REQUEST=true
   result=$(source "pages/${route_script}")

examples/template/.gitignore

@@ -0,0 +1,3 @@
+data/
+pubsub/
+uploads/

examples/template/Dockerfile

@@ -0,0 +1,9 @@
+FROM ubuntu
+
+RUN apt-get update && apt-get install ucspi-tcp
+
+EXPOSE 3000
+
+COPY . /app
+
+CMD [ "/app/start.sh" ]

examples/template/config.sh

@@ -0,0 +1 @@
+PROJECT_NAME="Counter"

examples/template/core.sh

@@ -0,0 +1 @@
+../../core.sh

examples/template/pages/count.sh

@@ -0,0 +1,16 @@
+
+if [[ ! -f data/count ]]; then
+  echo "0" > data/count
+fi
+
+COUNT=$(cat data/count)
+
+if [[ "$REQUEST_METHOD" == "POST" ]]; then
+  # increment the count
+  COUNT=$(( COUNT + 1 ))
+  echo "$COUNT" > data/count
+fi
+
+htmx_page << EOF
+  <p id="count" hx-swap-oob="true">$COUNT</p>
+EOF

examples/template/pages/index.sh

@@ -0,0 +1,9 @@
+
+source config.sh
+
+htmx_page << EOF
+  <h1>${PROJECT_NAME}</h1>
+  <button hx-post="/count" hx-swap="none">Count</button>
+  <button hx-post="/reset" hx-swap="none">Reset</button>
+  $(component '/count')
+EOF

examples/template/pages/reset.sh

@@ -0,0 +1,8 @@
+if [[ "$REQUEST_METHOD" != "POST" ]]; then
+  # only allow POST to this endpoint
+  return $(status_code 405)
+fi
+
+echo "0" > data/count
+
+component '/count'

examples/template/pages/upload.sh

@@ -0,0 +1,7 @@
+# allow-uploads
+
+echo "<pre>"
+printf "%s\n" "${FILE_UPLOADS[@]@K}"
+printf "%s\n" "${FILE_UPLOAD_NAMES[@]@K}"
+printf "%s\n" "${FILE_UPLOAD_TYPES[@]@K}"
+echo "</pre>"

examples/template/start.sh

@@ -0,0 +1 @@
+../../start.sh

examples/template/static/style.css

@@ -0,0 +1,37 @@
+body {
+  padding: 0 40px;
+}
+#signature {
+  position: absolute;
+  z-index: 100;
+  right: 20px;
+  top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#signature a {
+  text-decoration: none;
+}
+
+#signature a:hover {
+  text-decoration: underline;
+}
+
+#signature svg {
+  width: 36px;
+  height: 36px;
+  margin-top: -4px;
+  vertical-align: middle;
+}
+
+#form {
+  display: flex;
+  max-width: 400px;
+  flex-direction: column;
+}
+
+#count {
+  font-size: 24px;
+}