Refactor directories, add docs, fix profile header

docs/contributing.md

@@ -4,18 +4,27 @@ Hey, welcome! This project is still very experimental so I won't make any
 promises about the future architechture, but today it's pretty simple:
 
 ```
-src: you are here!
-├── assets: static resources like CSS and images
-└── routes: URL handlers that integrate views with models
-    ├── models:	abstractions for working with the database
-    │   └── lib:  code shared by models (like Markdown rendering)
-    └── views: page renderers that receive data and output HTML
-        └── components: shared components that are reused across pages
+index.js: take command-line arguments and give an application over HTTP
+ └── src: take HTTP requests and give an asset or a dynamic HTML page
+     ├── assets: give static assets like CSS and images
+     └── pages: take parameters and give an HTML page that with inline data
+         ├── models: give an abstract interface for interacting with data
+         │   └── lib: give database driver, Markdown renderer, etc.
+         └── views: take data and give an HTML page
+             └── components: take data and give HTML components (sub-views)
 ```
 
 I'd really appreciate any issues or pull requests on GitHub. Please let me know
 if there's anything I can do to help support your work on this project.
 
+## Debugging
+
+Debugging is never going to be easy, but the debug script helps a bit. You can
+use `oasis --debug` or debug the source with `npm run debug` / `yarn debug`.
+Please feel free to add `debug()` statements to the code wherever you think
+they might be helpful -- as long as we aren't using them hundreds of times per
+second I don't think they'll have a noticeable effect on performance.
+
 ## Experiments
 
 ### Always forward, never back
@@ -96,3 +105,4 @@ the templates to use hyperaxe. Oops. I think hyperaxe has a cooler name anyway.
 [dep-graph]: https://en.wikipedia.org/wiki/Dependency_graph
 [koa-blog]: https://github.com/koajs/examples/blob/1fd531698cc5ef21a61b627058ad0aafe9e55360/blog/lib/render.js#L13
 [hyperaxe-gh]: https://github.com/ungoldman/hyperaxe
+[debug-gh]: https://github.com/visionmedia/debug

package.json

@@ -59,7 +59,7 @@
   },
   "scripts": {
     "start": "node index.js",
-    "dev": "nodemon index.js --debug",
+    "debug": "nodemon --inspect index.js --debug",
     "test": "test/script.sh",
     "preversion": "test/script.sh"
   }

src/app.js

@@ -13,15 +13,15 @@ module.exports = (config) => {
   const debug = require('debug')('oasis')
   const ssbRef = require('ssb-ref')
 
-  const author = require('./routes/author')
-  const hashtag = require('./routes/hashtag')
-  const home = require('./routes/home')
-  const profile = require('./routes/profile')
-  const raw = require('./routes/raw')
-  const thread = require('./routes/thread')
-  const like = require('./routes/like')
-  const status = require('./routes/status')
-  const highlight = require('./routes/highlight')
+  const author = require('./pages/author')
+  const hashtag = require('./pages/hashtag')
+  const home = require('./pages/home')
+  const profile = require('./pages/profile')
+  const raw = require('./pages/raw')
+  const thread = require('./pages/thread')
+  const like = require('./pages/like')
+  const status = require('./pages/status')
+  const highlight = require('./pages/highlight')
 
   const assets = new Koa()
   assets.use(koaStatic(path.join(__dirname, 'assets')))
@@ -52,6 +52,7 @@ module.exports = (config) => {
     })
     .get('/highlight/:style', (ctx) => {
       const { style } = ctx.params
+      ctx.type = 'text/css'
       ctx.body = highlight(style)
     })
     .get('/profile/', async (ctx) => {

src/assets/style.css

@@ -93,10 +93,11 @@ pre {
   word-wrap: break-word;
 }
 
-.message > header {
+.message > header.metadata {
   height: 1.5rem;
   display: flex;
 }
+
 .message > header > a > .avatar {
   width: 1.5rem;
   height: 1.5rem;

src/pages/highlight.js

@@ -2,8 +2,5 @@ const requireStyle = require('require-style')
 
 module.exports = function (style) {
   const filePath = `highlight.js/styles/${style}`
-  return {
-    body: requireStyle(filePath),
-    type: 'text/css'
-  }
+  return requireStyle(filePath)
 }

src/pages/views/author.js

@@ -2,6 +2,7 @@ const template = require('./components/template')
 const post = require('./components/post')
 
 const {
+  article,
   header,
   img,
   h1,
@@ -9,20 +10,18 @@ const {
 } = require('hyperaxe')
 
 module.exports = ({ avatarUrl, name, description, messages }) => {
-  const authorHeader =
+  const prefix = section({ class: 'message' },
     header({ class: 'profile' },
       img({ class: 'avatar', src: avatarUrl }),
       h1(name)
-    )
-
-  const authorDescription =
+    ),
     description !== '<p>null</p>\n'
-      ? section({ class: 'message', innerHTML: description })
+      ? article({ innerHTML: description })
       : null
+  )
 
   return template(
-    authorHeader,
-    authorDescription,
+    prefix,
     messages.map(msg =>
       post({ msg })
     )

src/pages/views/components/post.js

@@ -66,7 +66,7 @@ module.exports = ({ msg }) => {
       class: messageClasses.join(' '),
       style: `margin-left: ${depth * 1.5}rem`
     },
-    header(
+    header({ class: 'metadata' },
       a({ href: url.author },
         img({ class: 'avatar', src: url.avatar, alt: 'profile image' })
       ),