drop jade, update styles and template

1 files changed, 38 insertions, 12 deletions

diff --git a/vnext/src/components/message.jsx b/vnext/src/components/message.jsx
index 78ebdd38..cf287ce9 100644
--- a/vnext/src/components/message.jsx
+++ b/vnext/src/components/message.jsx
@@ -2,25 +2,51 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 export default class Message extends React.Component {
-  render() { return (
-    <article>
-      <aside>
-        <a href={this.props.user.uname + "/"}>
-          <img src={"//i.juick.com/a/" + this.props.user.uid + ".png"} alt=""/></a>
-      </aside>
-      <header className="u">@<a href={this.props.user.uname + "/"}>{this.props.user.uname}</a>: </header>
-      <header className="t"><a href={this.props.user.uname + "/" + this.props.mid}>
-        <time dateTime={this.props.timestamp} title={this.props.timestamp}>{this.props.timestamp}</time></a></header>
-      <p>{this.props.body}</p>
-    </article>) }
+  render() { 
+    const msg = this.props.data;
+    return (
+    <article itemProp="blogPost" itemScope="" itemType="http://schema.org/BlogPosting" itemRef="org">
+      <header className="h">
+        <span itemProp="author" itemScope="" itemType="http://schema.org/Person">
+            <a href={`/${msg.user.uname}/`} itemProp="url" rel="author"><span itemProp="name">{ msg.user.uname }</span></a>
+        </span>
+        <div className="msg-avatar"><a href={`/${msg.user.uname }/`}>
+            <img src={`//i.juick.com/a/${msg.user.uid}.png`} alt={`${msg.user.uname}`} /></a>
+        </div>
+        <div className="msg-ts">
+            <a href={`/${msg.user.uname}/${msg.mid}`}>
+                <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={msg.timestamp}
+                      title={msg.timestamp}>
+                    {msg.timestamp}
+                </time>
+            </a>
+        </div>
+        <div className="msg-tags" itemProp="headline">
+            <Tags data={msg.tags || []} />
+        </div>
+      </header>
+      <p>{msg.body}</p>
+      { msg.photo && 
+      <p className="ir"><a href={`//i.juick.com/p/${msg.mid}.${msg.attach}`} data-fname={`${msg.mid}.${msg.attach}`}>
+        <img itemProp="image" src={`//i.juick.com/p/${msg.mid}.${msg.attach}`} alt=""/></a>
+      </p>
+      }
+    </article>
+    )}
 };
 
+function Tags(props) {
+    return props.data && props.data.map(tag => { return (<a key={tag} href={`/tag/${ tag}`} title={ tag }>{ tag }</a>) })
+}
+
 Message.propTypes = {
+    msg: PropTypes.shape({
     mid: PropTypes.number.isRequired,
     user: PropTypes.shape({
       uid: PropTypes.number.isRequired,
       uname: PropTypes.string.isRequired
     }),
     timestamp: PropTypes.string.isRequired,
-    body: PropTypes.string.isRequired
+    body: PropTypes.string
+    })
 }