fix and upgrade HPX project type, add it into guide

examples/website/src/components/guide_page.nim

@@ -59,6 +59,8 @@ component GuidePage:
           LiveViews
         of "flags_list":
           FlagsList
+        of "hpx_project_type":
+          HpxProjectType
 
       tDiv(class = "hidden xl:flex justify-between items-center w-full pb-8"):
         if guidePages[currentGuidePage]["prev"].getStr != "":

examples/website/src/components/sidebar.nim

@@ -76,6 +76,11 @@ var
     "func_components": {
       "title": "Functional components 🧪",
       "prev": "components",
+      "next": "hpx_project_type"
+    },
+    "hpx_project_type": {
+      "title": "HPX project type 👀",
+      "prev": "func_components",
       "next": "ssr_basics"
     },
     "ssr_basics": {
@@ -217,6 +222,8 @@ proc SideBar*(isMobile: bool = false): TagRef =
                 {translate"Components 🔥"}
               SideBarItem("func_components", isMobile):
                 {translate"Functional components 🧪"}
+              SideBarItem("hpx_project_type", isMobile):
+                {translate"HPX project type 👀"}
 
             SideBarFolder("ssr_basics", "Server-side Applications 🖥", isMobile):
               SideBarItem("ssr_basics", isMobile):

examples/website/src/docs/docs.nim

@@ -3,7 +3,7 @@ import
   ./[
     introduction, getting_started, happyx_app, path_params, spa_basics, ssr_basics,
     tailwind_and_other, decorators, reactivity, components, ssr_docs, func_components,
-    spa_rendering, mounting, liveviews, flags_list
+    spa_rendering, mounting, liveviews, flags_list, hpx_project_type
   ],
   ./db/[
     mongo, sqlite, postgres, db_access
@@ -16,5 +16,5 @@ export
   introduction, getting_started, happyx_app, path_params, spa_basics, ssr_basics,
   tailwind_and_other, decorators, reactivity, mongo, db_access, sqlite, postgres,
   components, ssr_docs, func_components, spa_rendering, mounting, liveviews,
-  flags_list,
+  flags_list, hpx_project_type,
   karax

examples/website/src/docs/getting_started.nim

@@ -10,32 +10,34 @@ import
 proc GettingStarted*(): TagRef =
   buildHtml:
     tDiv(class = "flex flex-col px-8 py-2 xl:h-fit gap-4"):
-      tH1: {translate"Getting Started 💫"}
+      tH1: { translate"Getting Started 💫" }
       tP:
-        {translate"Before you begin, please make sure you have"}
+        { translate"Before you begin, please make sure you have"}
         if currentLanguage in ["Nim", "Nim (SPA)"]:
           tCode: tA(href = "https://nim-lang.org"):
-            {translate"Nim programming language"}
-          {translate" version 1.6.14 or higher, or "}
+            { translate"Nim programming language" }
+          { translate" version 1.6.14 or higher, or " }
         elif currentLanguage == "Python":
           tCode: tA(href = "https://python.org"):
-            {translate"Python programming language"}
-          {translate" version 3.7 and above."}
+            { translate"Python programming language" }
+          { translate" version 3.7 and above." }
         elif currentLanguage in ["JavaScript", "TypeScript"]:
           tCode: tA(href = "https://nodejs.org/en"):
             "NodeJS"
-          {translate" version 16.13.0 and above."}
+          { translate" version 16.13.0 and above." }
 
-      tH2: {translate"Installing 📥"}
-      tP: {translate"To install HappyX you can write this command"}
-
+      tH2: { translate"Installing 📥" }
+      tP: { translate"To install HappyX you can write this command" }
       CodeBlockGuide(@[
         ("Nim", "shell", "nimble install happyx@#head", cstring"nimble_install", newPlayResult()),
         ("Nim (SPA)", "shell", "nimble install happyx@#head", cstring"nimble_install", newPlayResult()),
         ("Python", "shell", "pip install happyx", cstring"pypi_install", newPlayResult()),
         ("JavaScript", "shell", "npm install happyx", cstring"npm_js_install", newPlayResult()),
         ("TypeScript", "shell", "npm install happyx", cstring"npm_ts_install", newPlayResult()),
       ])
+
+      tP: { translate"Along with the library, you will also have the hpx CLI installed. With it, you can create HappyX projects and take advantage of hot code reloading. Use the command below for details." }
+      CodeBlock("shell", "hpx help", "hpx_help")
 
       tH2: "Hello, World! 👋"
 

examples/website/src/docs/hpx_project_type.nim

@@ -0,0 +1,98 @@
+# Import HappyX
+import
+  ../../../../src/happyx,
+  ../ui/[colors, code, play_states, translations],
+  ../components/[
+    code_block_guide, code_block
+  ]
+
+
+proc HpxProjectType*(): TagRef =
+  buildHtml:
+    tDiv(class = "flex flex-col px-8 py-2 xl:h-fit gap-4"):
+      tH1: { translate"HPX project type 👀" }
+      tP:
+        { translate"This project type is suitable for you if you are familiar with any other JavaScript framework, such as Vue or Nuxt." }
+
+      tH2: { translate"Creating a Project" }
+      tP:
+        { translate"To create an HPX project, you need to use the CLI:" }
+      CodeBlock("shell", nimHpxCreateProjectExample, "hpx_create_example")
+      tP:
+        { translate"To run the project locally, use the command" }
+      CodeBlock("shell", "hpx dev --reload", "hpx_dev_reload")
+
+      tH2: { translate"Basic syntax" }
+      tP:
+        { translate"To begin, let's look at the basic syntax. Each component consists of three tags, each responsible for its own part." }
+
+      tTable(
+        class = fmt"w-full rounded-md border-[1px] border-[{Foreground}] dark:border-[{ForegroundDark}]"
+      ):
+        tTr:
+          tTd: "Tag"
+          tTd: { translate"Description" }
+        tTr:
+          tTd: tCode(class = "text-nowrap"): "<template></template>"
+          tTd: { translate"This tag contains the HTML markup of the component. It also uses data from the script tag." }
+        tTr:
+          tTd: tCode(class = "text-nowrap"): "<script></script>"
+          tTd: { translate"This tag contains Nim code. It is executed before the component is rendered." }
+        tTr:
+          tTd: tCode(class = "text-nowrap"): "<script lang=\"js\"></script>"
+          tTd: { translate"In this tag, unlike regular script, the code is in JavaScript. However, data from here cannot be directly used in the HTML markup at this time." }
+        tTr:
+          tTd: tCode(class = "text-nowrap"): "<style></style>"
+          tTd: { translate"In this tag, isolated CSS styles are stored." }
+
+      tH3: "template"
+      tP:
+        { translate"When writing HTML code, you should not encounter any difficulties. Here, the main differences from regular HTML are also shown." } 
+      CodeBlock("html", nimHpxTemplateExample, "hpx_template_example")
+
+      tH3: "script"
+      tP:
+        { translate"If you are well-versed in Nim, you should not encounter any difficulties. Here, we declare a function and call it. We can also call a function in the template tag by wrapping it in curly braces." }
+      CodeBlock("html", nimHpxScriptExample, "hpx_script_example")
+      CodeBlock("html", nimHpxScriptExample_1, "hpx_script_example_1")
+
+      tH3: "script js"
+      tP:
+        { translate"You can alternate this tag with a regular script tag." }
+      CodeBlock("html", nimHpxScriptJsExample, "hpx_script_js_example")
+      tP:
+        { translate"It is worth noting that to use Nim from JS, functions and variables are usually marked with special types." }
+      tP:
+        { translate"In our case, we used the exportc pragma and specified the return type as cstring." }
+
+      tH3: "style"
+      tP:
+        { translate"It's simple here - you just write CSS styles." }
+      CodeBlock("html", nimHpxStyleExample, "hpx_script_js_example")
+      tP:
+        { translate"The styles of each component are isolated from each other." }
+
+      tH2: { translate"Event handling 🧩" }
+      tP:
+        { translate"Event handling is tied to the use of HTML attributes." }
+      CodeBlock("html", nimHpxEventsExample, "hpx_events_example")
+
+      tP:
+        { translate"You can view the complete list of events you can use in the MDN Docs." }
+        tA(href = "https://developer.mozilla.org/en-US/docs/Web/Events", target = "_blank", class = "px-2"):
+          { translate"More details" }
+
+      tH2: { translate"Using Other Components within a Component" }
+      tP:
+        { translate"Just like in Vue, you can use components inside other components, thereby structuring your application." }
+
+      tP: tCode: "components/HelloWorld.hpx"
+      CodeBlock("html", nimHpxComponentsHelloWorldExample, "hpx_comphw_example")
+
+      tP: tCode: "main.hpx"
+      CodeBlock("html", nimHpxMainHpxExample, "hpx_mainhpx_example")
+
+      tH2: { translate"Routing" }
+      tP:
+        { translate"You can declare routes using the router.json file. Let's consider an example of such a file below." }
+      CodeBlock("json", nimHpxRouterExample, "hpx_mainhpx_example")

examples/website/src/ui/code/nim_spa.nim

@@ -351,3 +351,106 @@ appRoutes "app":
 appRoutes "app":
   discard
 """
+  nimHpxTemplateExample* = """<template>
+  <div>
+    Hello, world!
+    <div h-if="5 > 2">
+      omg, 5 is larger than 2
+    </div>
+    <div h-elif="2 < 5">
+      5 is less than 2??????
+    </div>
+    <div h-else>
+      why math isn't working lol
+    </div>
+    <div h-for="i in [0, 1, 2, 3]" >
+      { i }
+    </div>
+    <script>
+      # Here you can use Nim, not JS
+      var x = 0
+    </script>
+    <div h-while="x < 10">
+      Now x is { x }
+      <script>x += 1</script>
+    </div>
+  </div>
+</template>"""
+  nimHpxCreateProjectExample* = """hpx create --name hpx_project --kind HPX
+cd hpx_project"""
+  nimHpxScriptExample* = """<script>
+  proc myFunc(): string =
+    echo "Hello, world!"
+    return "ok man"
+
+  echo myFunc()
+</script>"""
+  nimHpxScriptExample_1* = """<template>
+  <div>
+    output of myFunc() is { myFunc() }
+  </div>
+</template>"""
+  nimHpxScriptJsExample* = """<script>
+  proc myFunc(): cstring {.exportc.} =
+    return "ok man"
+</script>
+
+<script lang="js">
+  console.log("call nim: ", myFunc());
+</script>"""
+  nimHpxStyleExample* = """<style>
+  div {
+    background-color: #212121;
+    color: #cfeced;
+    padding: 0.25rem;
+  }
+</style>"""
+  nimHpxEventsExample* = """<template>
+  <div>
+    <button h-onclick="handleClick(event)">
+      Click me!
+    </button>
+    <!-- input should be closable in .hpx files -->
+    <input h-oninput="handleInput(event)" />
+  </div>
+</template>
+
+<script>
+  proc handleClick(ev: Event) =
+    echo "button was clicked!"
+  proc handleInput(ev: Event) =
+    echo ev.target.InputElement.value
+</script>"""
+  nimHpxMainHpxExample* = """<template>
+  <div>
+    This is main page
+    <HelloWorld></HelloWorld>
+    <HelloWorld />
+  </div>
+</template>
+"""
+  nimHpxComponentsHelloWorldExample* = """<template>
+  <div>
+    Hello, world!
+  </div>
+</template>
+"""
+  nimHpxRouterExample* = """{
+  /* route path */
+  "/": "main",  /* just component name */
+  /* route path */
+  /* ex. /user7/asd */
+  "/user$id:int/$test?": {
+    /* just component name */
+    "component": "User",
+    /* arguments is component props */
+    "args": {
+      /* prop name: path param name */
+      "userId": "id",
+      /* query is query param named q */
+      "query": {"name": "q", "type": "query"},
+      /* pathParam is path param named test */
+      "pathParam": {"name": "test", "type": "pathParam"}
+    }
+  }
+}"""