Improved app back-end layout

I moved the publicId stuff directly in main index view to avoid an ugly iframe here which needs scrolling up and down to see all of the content.

Furthermore I added some more descriptive text and a basic formatted layout to improve readability.

public/stylesheets/style.css

@@ -6,3 +6,11 @@ body {
 a {
   color: #00B7FF;
 }
+
+table {
+  text-align: left;
+}
+
+td {
+  padding 0 10 0 10;
+}

routes.js

@@ -5,9 +5,7 @@ var exec = require("child_process").exec,
   gitBackend = require("git-http-backend"),
   spawn = require("child_process").spawn
 
-router.get('/', (req, res) => res.render("index"));
-
-router.get("/publicId", (req, res) => {
+router.get('/', (req, res) => {
   const sessionId = req.headers["x-sandstorm-session-id"]
   exec(`getPublicId ${sessionId}`, (err, rv) => {
     if(err)
@@ -18,7 +16,7 @@ router.get("/publicId", (req, res) => {
     const domain = publicId+"."+hostname
     const url = lines[2]
     const isDemo = lines[3] == "true"
-    res.render("publicId", {domain, isDemo, publicId, url})
+    res.render("index", {domain, isDemo, publicId, url})
   })
 })
 

views/index.jade

@@ -2,14 +2,48 @@ extends layout
 
 block content
   h1 Hugo
-  iframe(src = "/publicId" style = "width: 100%; margin: 0; border: 0;")
+  p
+    | Your public site is available at: 
+    a(href = url target = "_blank")= url
+    | .
+  - if(!isDemo)
+    p To set up your domain to point at your public site, add the following DNS records to your domain. Replace <code>blog.example.com</code> with your site's hostname.
+    table
+      thead
+        th Name
+        th Type
+        th Value
+      tbody
+        tr
+          td blog.example.com
+          td CNAME
+          td= domain
+        tr
+          td sandstorm-www.blog.example.com
+          td TXT
+          td= publicId
+  h2 Editing your site
   p To check out the Git repository containing your site, first add an authorization key to Git:
-  iframe#gitAuthorize(style = "width: 100%; height: 55px; margin: 0; border: 0;")
-  p Then run the following to start with a fresh site:
-  iframe#gitClone(style = "width: 100%; height: 55px; margin: 0; border: 0;")
+  iframe#gitAuthorize(style = "width: 100%; height: 25px; margin: 0; border: 0;")
+  p Then run the following to clone the site:
+  iframe#gitClone(style = "width: 100%; height: 25px; margin: 0; border: 0;")
+  p Here are a few pointers to help you get started:
+  li
+    | Choose a theme to make your site look nice. Hugo’s&nbsp;
+    a(href = "https://themes.gohugo.io/") theme showcase
+    | &nbsp;is a good place to start.
+  li Add the theme to your Git repository as a subtree at <code>themes/themename</code>.
+  li Add <code>theme = "themename"</code> to <code>Config.toml</code>.
+  li Push the repository, and your new site will be immediately published.
+  h2 Pushing existing site
   p If you have an existing Hugo site, run the following to publish in this grain:
-  iframe#gitPush(style = "width: 100%; height: 55px; margin: 0; border: 0;")
-  a(href = "/admin/") Administer
+  iframe#gitPush(style = "width: 100%; height: 50px; margin: 0; border: 0;")
+  h2 Admin interface
+  p
+    | You can do simple changes to your site directly in the&nbsp;
+    a(href = "/admin/") admin interface
+    | .
+
   script.
     document.addEventListener("DOMContentLoaded", function() {
       window.parent.postMessage({renderTemplate: {

views/publicId.jade

@@ -1,23 +0,0 @@
-extends layout
-
-block content
-  p
-    | This site is available at 
-    a(href = url target = "_blank")= url
-    | .
-  - if(!isDemo)
-    p Alternatively, you can publish it at your own custom domain by creating the following DNS records:
-    table
-      thead
-        th Name
-        th Type
-        th Value
-      tbody
-        tr
-          td example.com
-          td CNAME
-          td= domain
-        tr
-          td sandstorm-www.example.com
-          td TXT
-          td= publicId