Exaos Lee avatar Exaos Lee committed db82443 Merge

Merge remote-tracking branch 'origin/master' into zh-example

Comments (0)

Files changed (6)

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
+
+
+
+
+
+
+
+
+

example/sample.org

 #+TITLE: o-blog
-#-DESCRIPTION: A stand-alone blogging system for Org-mode
-#+DATE: 2012-08-21 11:02:33
+#-DESCRIPTION: A stand-alone blogging system for Org-mode.
+#+DATE: 2012-11-20 12:28:04
 
 #+STARTUP: logdone
 
 
   - [[file:{lisp}(ob:path-to-root){/lisp}/index.html][/icon-home icon-white/ {lisp}(ob:gettext :home){/lisp}]]
 
-  - [[file:{lisp}(let ((POSTS ALL-POSTS)) (format "%s/%s" (ob:path-to-root) (ob:post-htmlfile (ob:get-last-post "Tips")))){/lisp}][/icon-file icon-white/ Tips]]
+  - [[file:{lisp}(format "%s/%s" (ob:path-to-root) (ob:post-htmlfile (ob:get-last-post "Tips"))){/lisp}][/icon-file icon-white/ Tips]]
 
   - [[file:{lisp}(ob:path-to-root){/lisp}/tags.html][/icon-tags icon-white/ Tags]]
 
 
 #+end_src
 
-** DONE Some bootstrap features				    :usage:Bootstrap:
+** DONE Some Bootstrap features                            :usage:Bootstrap:
    CLOSED: [2012-05-03 Thu 21:40]
 
 *** Hero-unit
 
 #+begin_o_blog_row 8
 
-Adding an image to a post is pretty simple since
-[[http://orgmode.org][Org-mode]] offers a special link scheme for
-that. Image source file can be stored anywhere since its path is
-valid. During the export process, the image file is copied into a folder
-related to the post and all links are corrected to point to its new
-location.
+Adding an image to a post is simple since [[http://orgmode.org][Org-mode]] offers a special
+link scheme for that. An image file can be stored anywhere in your
+local directory structure with a valid path. During the export
+process, the image file is copied into a folder related to the post,
+and all exported links are corrected to point to its new location.
 
 
 #+begin_o_blog_row 5
 
-For example, the following piece of code will copy the =emacs-logo.png= from the current
-directory and is is then copied into it into
+For example, the Org-mode markup of =file:emacs-logo.png= surrounded
+by [[http://orgmode.org/org.html#Link-format][double square brackets]] will result (upon export/publishing) in
+copying that image from its current location (in the same directory as
+this sample.org file) to its target location of
 =tips/2012/08/21_adding-an-image-into-a-post/emacs-logo.png=.
 
 #+o_blog_row_column 3
 
-
 #+BEGIN_SRC org
- file:emacs-logo.png
+  ,# NOTE: The link should be complete.
+  ,[[file:emacs-logo.png][file:emacs-logo.png]]
 #+END_SRC
 
 #+end_o_blog_row
 
 
-
 #+o_blog_row_column 4
-[[file:emacs-logo.png]]
+[[file:emacs-logo.png][file:emacs-logo.png]]
 
 #+end_o_blog_row
 
 
-
-The HTML result is something similar to:
+The exported HTML result will resemble:
 
 #+BEGIN_SRC html
  <img src="21_adding-an-image-into-a-post/emacs-logo.png"  alt="21_adding-an-image-into-a-post/emacs-logo.png" />
 
 
 
-A best practice is to have all files info a =/files= folder. Then you can
-create a sub-folder for each posts such as:
- - =/files/post1/file1=
- - =/files/post1/file2=
- - =/files/post2/file=
- - ...
+To keep files organized, you can place all files under a subfolder,
+e.g. =media/=. Then you can create a sub-folder for each post, such
+as:
+- =/media/post1/file1=
+- =/media/post1/file2=
+- =/media/post2/file=
+- etc.
 ;; Author: Sébastien Gross <seb•ɑƬ•chezwam•ɖɵʈ•org>
 ;; Keywords: emacs,
 ;; Created: 2012-01-04
-;; Last changed: 2012-08-21 11:44:41
+;; Last changed: 2012-11-20 12:29:11
 ;; Licence: WTFPL, grab your copy here: http://sam.zoy.org/wtfpl/
 
 ;; This file is NOT part of GNU Emacs.
   publish-dir
   template-dir
   style-dir
+  assets-dir
   posts-filter
   static-filter
   snippet-filter
       (ob-write-posts)
       (ob-write-tags)
       (ob-write-index)
-      (let ((syncf (if (functionp 'dired-do-sync)
-		       'dired-do-sync 'copy-directory)))
-	(funcall syncf (format "%s/%s"
-			       (ob:blog-template-dir BLOG)
+
+      (ob-do-copy (format "%s"
+			  (ob:blog-assets-dir BLOG))
+		  (ob:blog-publish-dir BLOG))
+
+      (ob-do-copy (format "%s/%s"
+			  (ob:blog-template-dir BLOG)
 			       (ob:blog-style-dir BLOG))
-		 (ob:blog-publish-dir BLOG)))
+		  (ob:blog-publish-dir BLOG))
+
       (run-hooks 'o-blog-after-publish-hook)
       (message (format "Blog %s published in %ss"
 		       file
 		 (t 'copy-file)))
 	 (args (or args
 		   (when (eq 'copy-file copyf) '(t t t)))))
-    (apply copyf src dst args)))
+    (when (file-exists-p src)
+	(apply copyf src dst args))))
 
 
 (defun org-blog-publish-run-processes-sentinel (proc change)
 					     (find-library-name "o-blog")))
 					   "templates")))
     (setf (ob:blog-style-dir blog) (or (ob:get-header "STYLE_DIR") "style"))
+    (setf (ob:blog-assets-dir blog) (or (ob:get-header "ASSETS_DIR") "assets"))
     (setf (ob:blog-posts-filter blog) (or (ob:get-header "POSTS_FILTER") "+TODO=\"DONE\""))
     (setf (ob:blog-static-filter blog) (or (ob:get-header "STATIC_FILTER") "+PAGE={.+\.html}"))
     (setf (ob:blog-snippet-filter blog) (or (ob:get-header "SNIPPET_FILTER") "+SNIPPET={.+}"))
 
 (defun ob:get-last-post (&optional category nth)
   "Get the NTH last post in from CATEGORY or \"blog\" if not defined."
-  (let ((POST ALL-POSTS)
+  (let ((POSTS ALL-POSTS)
 	(nth (or nth 0)))
     (nth nth (ob:get-posts (lambda (x)
 			     (equal (or category "blog")

templates/page_footer.html

 	      <h1><a href="<lisp>(ob:path-to-root)</lisp>/archives.html"><lisp>(ob:gettext :archives)</lisp></a></h1>
 	      <ul>
 		<lisp>
-		  (loop for p in (ob:get-posts nil 10)
+		  (loop for p in (let ((POSTS ALL-POSTS)) (ob:get-posts nil 10))
 		  do (insert (format "<li><a href=\"%s/%s\">%s</a></li> "
 		  (ob:path-to-root)
 		  (ob:post-htmlfile p)

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.