all: add dev mode for local testing, fix metadata

5 files changed, 59 insertions, 20 deletions

diff --git a/luax/blog/building-reluax.md b/luax/blog/building-reluax.md
index 72fff0d..08f8b5d 100644
--- a/luax/blog/building-reluax.md
+++ b/luax/blog/building-reluax.md
@@ -112,7 +112,7 @@ felt like I wouldn't really benefit from them. What I was building was not to be
 of one, but a replacement of it.
 
 The parser portion took a bit, but it was not anything too complex. Writing a lexer that
-simultaneously structres the data, but can emit whatever garbage comes inside of an HTML tag, was
+simultaneously structures the data, but can emit whatever garbage comes inside of an HTML tag, was
 a bit tricky. But in two evenings I had a demo:
 
 ![the first demo](https://cdn.duckonaut.dev/assets/blog/building-reluax/first-demo.png)
diff --git a/luax/common.luax b/luax/common.luax
index 0bd3cf7..ab29a02 100644
--- a/luax/common.luax
+++ b/luax/common.luax
@@ -1,8 +1,39 @@
 return function(props)
-return <html lang="en">
+  local use_cdn = reluax.dev_mode == false
+  local asset_prefix = use_cdn and "https://cdn.duckonaut.dev" or ""
+
+  local thumbnail = props.attrs.thumbnail or
+    asset_prefix .. "/assets/images/thumbnail.png"
+  local title = props.attrs.title or "duckonaut.dev"
+  local description = props.attrs.description or "duckonaut's stuff"
+  local stylesheelts = props.attrs.stylesheets or
+    { 'app.css',
+      'index.css',
+      'contact.css',
+      'project.css',
+      'navbar.css',
+      'carousel.css',
+      'blog.css'
+    }
+  local scripts = props.attrs.scripts or
+    { 'index.js' }
+
+  local style_tags = {}
+  for _, stylesheet in ipairs(stylesheelts) do
+    style_tags[#style_tags + 1] =
+      <link rel="stylesheet" href={asset_prefix .. "/assets/" .. stylesheet} />
+  end
+
+  local script_tags = {}
+  for _, script in ipairs(scripts) do
+    script_tags[#script_tags + 1] =
+      <script src={asset_prefix .. "/assets/" .. script}></script>
+  end
+
+  return <html lang="en">
 <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="https://cdn.duckonaut.dev/assets/images/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href={asset_prefix .. '/assets/images/favicon.svg'} />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet"
           href="//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css" />
@@ -23,26 +54,20 @@ return <html lang="en">
 
     <script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/dist/GlslCanvas.js"></script>
 
-    <script src="https://cdn.duckonaut.dev/assets/index.js"></script>
+    {$ script_tags $}
 
-    <link rel="stylesheet" href="https://cdn.duckonaut.dev/assets/app.css" />
-    <link rel="stylesheet" href="https://cdn.duckonaut.dev/assets/index.css" />
-    <link rel="stylesheet" href="https://cdn.duckonaut.dev/assets/contact.css" />
-    <link rel="stylesheet" href="https://cdn.duckonaut.dev/assets/project.css" />
-    <link rel="stylesheet" href="https://cdn.duckonaut.dev/assets/navbar.css" />
-    <link rel="stylesheet" href="https://cdn.duckonaut.dev/assets/carousel.css" />
-    <link rel="stylesheet" href="https://cdn.duckonaut.dev/assets/blog.css" />
+    {$ style_tags $}
 
-    <meta property="og:image" content="https://cdn.duckonaut.dev/assets/images/thumbnail.png" />
-    <meta property="og:title" content="duckonaut.dev" />
-    <meta property="og:description" content="duckonaut's stuff" />
+    <meta property="og:image" content={thumbnail} />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
     <meta property="og:url" content="https://duckonaut.dev" />
     <meta property="og:type" content="website" />
     <meta name="theme-color" content="#9191ff" />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="@duckonaut" />
     <meta name="twitter:creator" content="@duckonaut" />
-    <title>duckonaut.dev</title>
+    <title>{$ title $}</title>
 </head>
 
 <body>
diff --git a/luax/components/project.luax b/luax/components/project.luax
index f8d6711..cad844f 100644
--- a/luax/components/project.luax
+++ b/luax/components/project.luax
@@ -1,15 +1,17 @@
 local Carousel = require('components.carousel')
 
+local asset_prefix = reluax.dev_mode and '/assets/' or 'https://cdn.duckonaut.dev/assets/'
+
 function getProjectImageLink(project, image)
-  return 'https://cdn.duckonaut.dev/assets/' .. project.type .. 's/' .. project.name_normalized .. '/' .. image
+  return asset_prefix .. project.type .. 's/' .. project.name_normalized .. '/' .. image
 end
 
 function getProjectTechIconLink(tech)
-  return 'https://cdn.duckonaut.dev/assets/images/' .. tech .. '.png'
+  return asset_prefix .. 'images/' .. tech .. '.png'
 end
 
 function getProjectTargetIconLink(target)
-  return 'https://cdn.duckonaut.dev/assets/images/' .. target .. '.png'
+  return asset_prefix .. 'images/' .. target .. '.png'
 end
 
 return function (props)
diff --git a/luax/pages/home.luax b/luax/pages/home.luax
index b61ed4e..ed1b464 100644
--- a/luax/pages/home.luax
+++ b/luax/pages/home.luax
@@ -6,7 +6,10 @@ return function()
       <div class="main-info-subtitle">
         aka Duckonaut, EchoDuck
       </div>
-      <img src="https://cdn.duckonaut.dev/assets/images/favicon.svg" class="main-info-image logo grow" />
+      <img src={
+          (reluax.dev_mode and '' or 'https://cdn.duckonaut.dev') .. '/assets/images/favicon.svg'
+        }
+        class="main-info-image logo grow" />
 
       <div class="about-paragraph">
         <p>
diff --git a/luax/reluax.luax b/luax/reluax.luax
index b078ce8..1cfc04c 100644
--- a/luax/reluax.luax
+++ b/luax/reluax.luax
@@ -48,7 +48,16 @@ local function route(path)
         end
       end
       if post then
-        local article = wrap_component(<Blogpost post={post} />)
+        local article =
+          <Common title={post.title} description={post.description}>
+            <Navbar />
+            <div class="back-shadows"></div>
+            <div id="app-main">
+              <Blogpost post={post} />
+              <AnimatedBg />
+            </div>
+          </Common>
+
         return 200, article
       end
     end