Permalink
Browse files

Now with a real layout, and some configuration options for said layout

CSS/HTML shamelessly stolen from Tom Preston-Werner's layout at
http://tom.preston-werner.com/
  • Loading branch information...
1 parent 886bb80 commit b4e0583fb03d5e5e10cbd13ab1a7c36b5fc741ed Austin Seipp committed Jun 13, 2011
Showing with 293 additions and 14 deletions.
  1. +9 −0 config.opa
  2. +5 −0 opaque.opack
  3. BIN res/rss.png
  4. +200 −0 res/style.css
  5. +59 −0 src/layout.opa
  6. +2 −14 src/main.opa
  7. +18 −0 src/post.opa
View
@@ -0,0 +1,9 @@
+package opaque.config
+
+Config = {{
+ author = "John Doe"
+ email = "joe@blog.me"
+ blurb = "Super radical dude"
+ links = [ ("http://google.com", "google.com")
+ , ("http://opalang.org", "opalang.org") ]
+}}
View
@@ -13,6 +13,11 @@ src/bsl/mathjax.opa
shjs.opp
src/bsl/shjs.opa
+# config
+config.opa
+
# code
+src/layout.opa
+src/post.opa
src/admin.opa
src/main.opa
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,200 @@
+/*****************************************************************************/
+/*
+/* Common
+/*
+/*****************************************************************************/
+
+/* Global Reset */
+
+* {
+ margin: 0;
+ padding: 0;
+}
+
+html, body {
+ height: 100%;
+}
+
+body {
+ background-color: white;
+ font: 13.34px helvetica, arial, clean, sans-serif;
+ *font-size: small;
+ text-align: center;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-size: 100%;
+}
+
+h1 {
+ margin-bottom: 1em;
+}
+
+p {
+ margin: 1em 0;
+}
+
+a {
+ color: #00a;
+}
+
+a:hover {
+ color: black;
+}
+
+a:visited {
+ color: #a0a;
+}
+
+table {
+ font-size: inherit;
+ font: 100%;
+}
+
+/*****************************************************************************/
+/*
+/* Home
+/*
+/*****************************************************************************/
+
+ul.posts {
+ list-style-type: none;
+ margin-bottom: 2em;
+}
+
+ ul.posts li {
+ line-height: 1.75em;
+ }
+
+ ul.posts span {
+ color: #aaa;
+ font-family: Monaco, "Courier New", monospace;
+ font-size: 80%;
+ }
+
+/*****************************************************************************/
+/*
+/* Site
+/*
+/*****************************************************************************/
+
+.site {
+ font-size: 110%;
+ text-align: justify;
+ width: 40em;
+ margin: 3em auto 2em auto;
+ line-height: 1.5em;
+}
+
+.title {
+ color: #a00;
+ font-weight: bold;
+ margin-bottom: 2em;
+}
+
+ .site .title a {
+ color: #a00;
+ text-decoration: none;
+ }
+
+ .site .title a:hover {
+ color: black;
+ }
+
+ .site .title a.extra {
+ color: #aaa;
+ text-decoration: none;
+ margin-left: 1em;
+ }
+
+ .site .title a.extra:hover {
+ color: black;
+ }
+
+ .site .meta {
+ color: #aaa;
+ }
+
+ .site .footer {
+ font-size: 80%;
+ color: #666;
+ border-top: 4px solid #eee;
+ margin-top: 2em;
+ overflow: hidden;
+ }
+ .site .footer .info {
+ float: left;
+ }
+
+ .site .footer .contact {
+ float: left;
+ margin-right: 3em;
+ }
+
+ .site .footer .contact a {
+ color: #8085C1;
+ }
+
+ .site .footer .rss {
+ margin-top: 1.1em;
+ margin-right: -.2em;
+ float: right;
+ }
+
+ .site .footer .rss img {
+ border: 0;
+ }
+
+/*****************************************************************************/
+/*
+/* Posts
+/*
+/*****************************************************************************/
+
+#post {
+
+}
+
+ /* standard */
+
+ #post pre {
+ border: 1px solid #ddd;
+ background-color: #eef;
+ padding: 0 .4em;
+ }
+
+ #post ul,
+ #post ol {
+ margin-left: 1.35em;
+ }
+
+ #post code {
+ border: 1px solid #ddd;
+ background-color: #eef;
+ font-size: 85%;
+ padding: 0 .2em;
+ }
+
+ #post pre code {
+ border: none;
+ }
+
+ /* terminal */
+
+ #post pre.terminal {
+ border: 1px solid black;
+ background-color: #333;
+ color: white;
+ }
+
+ #post pre.terminal code {
+ background-color: #333;
+ }
+
+#related {
+ margin-top: 2em;
+}
+
+ #related h2 {
+ margin-bottom: 1em;
+ }
View
@@ -0,0 +1,59 @@
+package opaque.layout
+import opaque.post
+import opaque.bsl.native
+import opaque.config
+
+Layout = {{
+
+ @private styles = [ "res/style.css"
+ , "res/sh_nedit.min.css"
+ ]
+
+ styled_page(t, p) = Resource.styled_page(t, styles, default_layout(p))
+ post_layout(p) =
+ <div id=#post>{Post.to_xhtml(p)}</div>
+
+ default_layout(content) =
+ mem = get_mem_usage()
+ sysname = get_sys_sysname()
+ nodename = get_sys_nodename()
+ release = get_sys_release()
+ machine = get_sys_machine()
+
+ <script type="text/javascript" src="res/sh_main.min.js"/>
+ <script type="text/javascript" src="res/sh_haskell.min.js"/>
+ <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"/>
+ <body>
+ <div class="site">
+ <div class="title">
+ <a href="/">{Config.author}</a>
+ <a class="extra" href="/">home</a>
+ </div>
+ <>{content}</>
+ <div class="footer">
+ <div class="contact">
+ <p>
+ {Config.author}<br />
+ {Config.blurb}<br />
+ {Config.email}
+ </p>
+ </div>
+ <div class="contact">
+ <p>
+ {List.map( (l, t) -> <a href="{l}">{t}</a><br/>,Config.links)}
+ </p>
+ </div>
+
+ <div class="rss">
+ </div>
+ <div class="info">
+ <p>
+ Served by '{nodename}' (a {sysname}/{machine}<br />
+ machine, version {release}, using <br />
+ {mem}MB of RAM.)
+ </p>
+ </div>
+ </div>
+ </div>
+ </body>
+}}
View
@@ -1,5 +1,6 @@
package opaque.main
import opaque.admin
+import opaque.layout
// plugins
import opaque.bsl.native
@@ -19,20 +20,7 @@ update() =
do Network.broadcast(v, room)
Dom.clear_value(#entry)
-mainpage() = Resource.styled_page("Opaque blog - Main page", ["res/sh_nedit.min.css", "res/style.css"],
- mem = get_mem_usage()
- sysname = get_sys_sysname()
- nodename = get_sys_nodename()
- release = get_sys_release()
- machine = get_sys_machine()
-
- <script type="text/javascript" src="res/sh_main.min.js"/>
- <script type="text/javascript" src="res/sh_haskell.min.js"/>
- <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"/>
-
- <h1>Hi! This server is using {mem}MB of RAM.</h1>
- <p>The server you're using is '{nodename}' (a {sysname}/{machine} machine, version {release})</p>
- <br/>
+mainpage() = Layout.styled_page("Blog - main page",
<p>Result:</p><br/><div id=#output onready={_ -> Network.add_callback(broadcast, room)}></div>
<br/>
<div id=#inputarea>
View
@@ -0,0 +1,18 @@
+package opaque.post
+import stdlib.date
+import opaque.bsl.upskirt
+
+type Post.post = { title: string;
+ date: Date.date
+ content: string;
+ author: string; }
+
+db /posts : intmap(Post.post)
+
+Post = {{
+ to_xhtml(p) =
+ content = Upskirt.render_to_xhtml(p.content)
+ <h1>{p.title}</h1>
+ <p class="meta">{Date.to_string(p.date)}</p>
+ <>{content}</>
+}}

0 comments on commit b4e0583

Please sign in to comment.