From 63ea67e4c3c8caa2cf0dc6d7c940981bd40b3974 Mon Sep 17 00:00:00 2001
From: Stanisław Zagórowski <hasohasacz@gmail.com>
Date: Mon, 15 Jan 2024 14:21:34 +0100
Subject: all: move out from luax/

---
 components/animated_bg.luax |  3 +++
 components/carousel.luax    | 10 ++++++++
 components/navbar-item.luax |  6 +++++
 components/navbar.luax      | 18 +++++++++++++
 components/project.luax     | 62 +++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 99 insertions(+)
 create mode 100644 components/animated_bg.luax
 create mode 100644 components/carousel.luax
 create mode 100644 components/navbar-item.luax
 create mode 100644 components/navbar.luax
 create mode 100644 components/project.luax

(limited to 'components')

diff --git a/components/animated_bg.luax b/components/animated_bg.luax
new file mode 100644
index 0000000..0c5105c
--- /dev/null
+++ b/components/animated_bg.luax
@@ -0,0 +1,3 @@
+return function()
+  return <div id="animated-bg" />
+end
diff --git a/components/carousel.luax b/components/carousel.luax
new file mode 100644
index 0000000..f2c5fbe
--- /dev/null
+++ b/components/carousel.luax
@@ -0,0 +1,10 @@
+return function(props)
+  if props == nil or props.children == nil or #props.children == 0 then
+    return nil
+  end
+
+  return
+  <div class="carousel-wrapper">
+    {$ props.children $}
+  </div>
+end
diff --git a/components/navbar-item.luax b/components/navbar-item.luax
new file mode 100644
index 0000000..d201f82
--- /dev/null
+++ b/components/navbar-item.luax
@@ -0,0 +1,6 @@
+return function(props)
+  return
+  <a class={'navbar-item navbar-item-' .. props.attrs.name} href={props.attrs.href} rel={props.attrs.rel}>
+    {$ props.children $}
+  </a>
+end
diff --git a/components/navbar.luax b/components/navbar.luax
new file mode 100644
index 0000000..4c0c54b
--- /dev/null
+++ b/components/navbar.luax
@@ -0,0 +1,18 @@
+local NavbarItem = require('components.navbar-item')
+
+return function()
+  return
+    <div class="navbar-container">
+      <div class="navbar">
+        <NavbarItem name="home" href="/">[Home]</NavbarItem>
+        <NavbarItem name="blog" href="/blog">[Blog]</NavbarItem>
+        <NavbarItem name="games" href="/games">[Games]</NavbarItem>
+        <NavbarItem name="projects" href="/projects">[Other Projects]</NavbarItem>
+        <NavbarItem name="github" href="https://github.com/Duckonaut">[GitHub]</NavbarItem>
+        <NavbarItem name="itch" href="https://duckonaut.itch.io/">[Itch.io]</NavbarItem>
+        <NavbarItem name="twitter" href="https://twitter.com/duckonaut">[Twitter]</NavbarItem>
+        <NavbarItem name="mastodon" href="https://mastodon.gamedev.place/@duckonaut" rel="me">[Mastodon]</NavbarItem>
+        <NavbarItem name="contact" href="/contact">[Contact]</NavbarItem>
+      </div>
+    </div>
+end
diff --git a/components/project.luax b/components/project.luax
new file mode 100644
index 0000000..cad844f
--- /dev/null
+++ b/components/project.luax
@@ -0,0 +1,62 @@
+local Carousel = require('components.carousel')
+
+local asset_prefix = reluax.dev_mode and '/assets/' or 'https://cdn.duckonaut.dev/assets/'
+
+function getProjectImageLink(project, image)
+  return asset_prefix .. project.type .. 's/' .. project.name_normalized .. '/' .. image
+end
+
+function getProjectTechIconLink(tech)
+  return asset_prefix .. 'images/' .. tech .. '.png'
+end
+
+function getProjectTargetIconLink(target)
+  return asset_prefix .. 'images/' .. target .. '.png'
+end
+
+return function (props)
+  local project = props.attrs.project
+  local techs = {}
+  for _, tech in ipairs(project.tech) do
+    techs[#techs + 1] = <img class="grow icon" src={getProjectTechIconLink(tech)} />
+  end
+  local targets = {}
+  for _, target in ipairs(project.targets) do
+    targets[#targets + 1] = <img class="grow icon" src={getProjectTargetIconLink(target)} />
+  end
+
+  local images = nil
+  if project.images then
+    images = {}
+    for _, image in ipairs(project.images) do
+      images[#images + 1] = <img class="carousel-item" src={getProjectImageLink(project, image)} />
+    end
+
+    images = <Carousel>{$ images $}</Carousel>
+  end
+
+  return (
+    <div class="project">
+      <div class="project-title"><a href={project.link}>{$ project.name $}</a></div>
+      <div class="project-info">
+        <div class="icon-row">
+          <div class="icon-text">Made using</div>
+          <div class="icon-container">
+            {$ techs $}
+          </div>
+        </div>
+        <div class="icon-row">
+          <div class="icon-text">Available on</div>
+          <div class="icon-container">
+            {$ targets $}
+          </div>
+        </div>
+        <hr />
+        <div class="project-description">
+          {$ project.description $}
+        </div>
+      </div>
+      {$ images $}
+    </div>
+  )
+end
-- 
cgit v1.3.1