Anonymous avatar Anonymous committed 9573c6f

create a minimum oblog html page

Comments (0)

Files changed (3)

example/oblog-min.org

+#+LANGUAGE: en
+#+TITLE: oblog bootstrap starter template
+#+DESCRIPTION:
+#+AUTHOR:
+
+A minimum sandpit for o-blog, aimed at reproducing the bootstrap starter-template.html.
+
+* introduction
+
+This file contains a complete set of code you will need to develop
+exactly one page of a static web site using [[https://github.com/renard/o-blog][o-blog]] and [[http://twitter.github.com/bootstrap][bootstrap]].
+
+[[file:sample.org]] is a much better starting point if you're looking to
+dive straight in.  I wrote oblog-min because I was learning about
+bootstrap at the same time as learning about o-blog.
+
+Development workflow consists of the the creation/modification of:
+1. html [[file:~/git/o-blog/templates/][templates]]. The templates section below contains the source
+   block for a simple template.
+2. [[file:~/git/o-blog/templates/style/less/][less]] file. The style section below contains the minimum code needed
+   to specify the less style.
+3. content. The content section contains similar data to the bootstrap
+  starter template - a few words of text and some navigation links.
+4. publish the page is a simple two command process:
+   - M-x org-tangle (C-c C-v t)
+   - M-c org-publish-blog
+
+That's it! But how about the awesomeness that is org-mode. To be
+able to completely wrap a boiler-plate web development process within
+a single clean org file is extremely satisfying.
+
+
+** tasks
+The process of /replication/ of the other bootstrap examples is an obvious
+next step. Before this though it would be useful to *nail* the
+starter-template.html exactly.  At the moment, there are a few differences:
+- different directories for styles
+  - =styles= for oblog
+  - =assets= for bootstrap
+- use of =less= rather than =css=
+- no favicon, touch or html5shim
+- js at the start
+- an extra =article= container
+
+* templates
+** starter-template
+:PROPERTIES:
+:tangle:   ../templates/starter-template.html
+:END:
+*** title
+ #+begin_src html
+       <!DOCTYPE html>
+       <html lang="<lisp>(ob:blog-language BLOG)</lisp>">
+         <head>
+           <meta charset="utf-8"/>
+           <title><lisp>(if (boundp 'POST) (ob:post-title POST) (ob:blog-title BLOG))</lisp></title>
+           <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+           <link rel="stylesheet" type="text/less" href="<lisp>(ob:path-to-root)</lisp>/style/less/oblog-min.less"/>
+   #+end_src
+*** le js
+#+begin_src html
+    <script src="<lisp>(ob:path-to-root)</lisp>/style/js/less-1.3.0.min.js" type="text/javascript"></script>
+      <script src="<lisp>(ob:path-to-root)</lisp>/style/js/jquery-1.7.1.min.js" type="text/javascript"></script>
+      <script src="<lisp>(ob:path-to-root)</lisp>/style/bootstrap/js/bootstrap-modal.js" type="text/javascript"></script>
+      <script src="<lisp>(ob:path-to-root)</lisp>/style/bootstrap/js/bootstrap-transition.js" type="text/javascript"></script>
+      <script src="<lisp>(ob:path-to-root)</lisp>/style/bootstrap/js/bootstrap-dropdown.js" type="text/javascript"></script>
+      <script src="<lisp>(ob:path-to-root)</lisp>/style/bootstrap/js/bootstrap-collapse.js" type="text/javascript"></script>
+      <script src="<lisp>(ob:path-to-root)</lisp>/style/js/prettify.js" type="text/javascript"></script>
+      <script src="<lisp>(ob:path-to-root)</lisp>/style/js/o-blog.linenumber.js" type="text/javascript"></script>
+      <script src="<lisp>(ob:path-to-root)</lisp>/style/js/o-blog-fix.js" type="text/javascript"></script>
+#+end_src
+
+*** xhtml-scripts
+#+begin_src html
+      <lisp>(when (boundp 'org-export-xhtml-scripts) org-export-xhtml-scripts)</lisp>
+#+end_src
+
+*** head->body
+#+begin_src html
+  </head>
+  <body>
+#+end_src  
+*** navbar
+#+begin_src html
+  <div class="navbar navbar-fixed-top">
+    <div class="navbar-inner">
+      <div class="container">
+        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </a>
+        <a class="brand" href="<lisp>(ob:path-to-root)</lisp>/index.html"><lisp>(ob:blog-title BLOG)</lisp></a>
+        <div class="nav-collapse collapse">
+          <lisp>(ob:post-content-html (ob:get-snippet "Navigation"))</lisp>
+        </div>
+      </div>
+    </div>
+  </div>
+#+end_src
+
+*** page content
+#+begin_src html
+<article>
+  <div class="article-content">
+    <lisp>
+      (ob:post-content-html POST)
+    </lisp>
+  </div>
+</article>
+#+end_src
+
+*** end
+#+begin_src html
+  </body>
+  </html>
+#+end_src
+
+
+* style
+:PROPERTIES:
+:tangle:   ../templates/style/less/oblog-min.less
+:END:
+#+begin_src css
+  @import "../bootstrap/less/bootstrap.less";
+  @import "../bootstrap/less/responsive.less";     
+#+end_src
+
+* content
+** Content
+  :PROPERTIES:
+  :PAGE:     index.html
+  :TEMPLATE: starter-template.html
+  :END:
+
+*** oblog bootstrap starter template
+    
+Use this document as a way to quick start any new project.
+
+All you get is:
++ this message, 
++ a barebones HTML template, and 
++ a navigation snippet
+
+** Navigation
+  :PROPERTIES:
+  :SNIPPET:  t
+  :END:
+
+- [[#][Home]]
+- [[#about][About]]
+- [[#contact][Contact]]
+
+
+* original starter-template.html from bootstrap
+
+#+begin_src html :tangle no
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8">
+      <title>Bootstrap, from Twitter</title>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta name="description" content="">
+      <meta name="author" content="">
+  
+      <!-- Le styles -->
+      <link href="../assets/css/bootstrap.css" rel="stylesheet">
+      <style>
+        body {
+          padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
+        }
+      </style>
+      <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
+  
+      <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+      <!--[if lt IE 9]>
+        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+      <![endif]-->
+  
+      <!-- Le fav and touch icons -->
+      <link rel="shortcut icon" href="../assets/ico/favicon.ico">
+      <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
+      <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
+    </head>
+  
+    <body>
+  
+      <div class="navbar navbar-inverse navbar-fixed-top">
+        <div class="navbar-inner">
+          <div class="container">
+            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </a>
+            <a class="brand" href="#">Project name</a>
+            <div class="nav-collapse collapse">
+              <ul class="nav">
+                <li class="active"><a href="#">Home</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#contact">Contact</a></li>
+              </ul>
+            </div><!--/.nav-collapse -->
+          </div>
+        </div>
+      </div>
+  
+      <div class="container">
+  
+        <h1>Bootstrap starter template</h1>
+        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
+  
+      </div> <!-- /container -->
+  
+      <!-- Le javascript
+      ================================================== -->
+      <!-- Placed at the end of the document so the pages load faster -->
+      <script src="../assets/js/jquery.js"></script>
+      <script src="../assets/js/bootstrap-transition.js"></script>
+      <script src="../assets/js/bootstrap-alert.js"></script>
+      <script src="../assets/js/bootstrap-modal.js"></script>
+      <script src="../assets/js/bootstrap-dropdown.js"></script>
+      <script src="../assets/js/bootstrap-scrollspy.js"></script>
+      <script src="../assets/js/bootstrap-tab.js"></script>
+      <script src="../assets/js/bootstrap-tooltip.js"></script>
+      <script src="../assets/js/bootstrap-popover.js"></script>
+      <script src="../assets/js/bootstrap-button.js"></script>
+      <script src="../assets/js/bootstrap-collapse.js"></script>
+      <script src="../assets/js/bootstrap-carousel.js"></script>
+      <script src="../assets/js/bootstrap-typeahead.js"></script>
+  
+    </body>
+  </html>
+#+end_src
+
+
+
+
+
+
+
+
+

templates/starter-template.html

+
+<!DOCTYPE html>
+<html lang="<lisp>(ob:blog-language BLOG)</lisp>">
+  <head>
+    <meta charset="utf-8"/>
+    <title><lisp>(if (boundp 'POST) (ob:post-title POST) (ob:blog-title BLOG))</lisp></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <link rel="stylesheet" type="text/less" href="<lisp>(ob:path-to-root)</lisp>/style/less/oblog-min.less"/>
+
+<script src="<lisp>(ob:path-to-root)</lisp>/style/js/less-1.3.0.min.js" type="text/javascript"></script>
+  <script src="<lisp>(ob:path-to-root)</lisp>/style/js/jquery-1.7.1.min.js" type="text/javascript"></script>
+  <script src="<lisp>(ob:path-to-root)</lisp>/style/bootstrap/js/bootstrap-modal.js" type="text/javascript"></script>
+  <script src="<lisp>(ob:path-to-root)</lisp>/style/bootstrap/js/bootstrap-transition.js" type="text/javascript"></script>
+  <script src="<lisp>(ob:path-to-root)</lisp>/style/bootstrap/js/bootstrap-dropdown.js" type="text/javascript"></script>
+  <script src="<lisp>(ob:path-to-root)</lisp>/style/bootstrap/js/bootstrap-collapse.js" type="text/javascript"></script>
+  <script src="<lisp>(ob:path-to-root)</lisp>/style/js/prettify.js" type="text/javascript"></script>
+  <script src="<lisp>(ob:path-to-root)</lisp>/style/js/o-blog.linenumber.js" type="text/javascript"></script>
+  <script src="<lisp>(ob:path-to-root)</lisp>/style/js/o-blog-fix.js" type="text/javascript"></script>
+
+<lisp>(when (boundp 'org-export-xhtml-scripts) org-export-xhtml-scripts)</lisp>
+
+</head>
+<body>
+
+<div class="navbar navbar-fixed-top">
+  <div class="navbar-inner">
+    <div class="container">
+      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </a>
+      <a class="brand" href="<lisp>(ob:path-to-root)</lisp>/index.html"><lisp>(ob:blog-title BLOG)</lisp></a>
+      <div class="nav-collapse collapse">
+        <lisp>(ob:post-content-html (ob:get-snippet "Navigation"))</lisp>
+      </div>
+    </div>
+  </div>
+</div>
+
+<article>
+  <div class="article-content">
+    <lisp>
+      (ob:post-content-html POST)
+    </lisp>
+  </div>
+</article>
+
+</body>
+</html>

templates/style/less/oblog-min.less

+
+@import "../bootstrap/less/bootstrap.less";
+@import "../bootstrap/less/responsive.less";
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.