emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed
* html export using html5 elements and bootstrap framework
@ 2015-01-02 15:47 R C
  2015-01-03 18:37 ` Rick Frankel
  2015-01-06 19:43 ` Bill White
  0 siblings, 2 replies; 10+ messages in thread
From: R C @ 2015-01-02 15:47 UTC (permalink / raw)
  To: emacs-orgmode

I would like to have org mode export a project using html5 elements and
bootstrap framework adapting the worg tutorial: org-publish-html-tutorial.html 

I set it up as:
- minimal org file to be published: "~/web/p2/org/tst.org"
#+SETUPFILE: ~/web/org-templates/level-0.org
#+TITLE: Testing
* heading 1
  abc

- template with links to bootstrap css and js files, and a local.js file
with my macro definitions for mathjax: "~/web/org-templates/level-0.org" 
with lines of the form:
#+STYLE:   <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
etc

- my project is setup as:
              ("p2-org"
               :base-directory "~/web/p2/org"
               :publishing-directory "~/web/p2/public_html"
               :recursive t
               :base-extension "org"
               :publishing-function org-html-publish-to-html
               :style-include-default nil
               :creator-info nil)
              ("p2-extra"
               :base-directory "~/web/p2/org"
               :publishing-directory "~/web/p2/public_html"
               :base-extension "css\\|pdf\\|png\\|jpg\\|gif"
               :publishing-function org-publish-attachment
               :recursive t
               :author nil)
              ("p2"
               :components ("p2-org" "p2-extra"))))

I also have: (setq org-html-html5-fancy t)

However tst.html does not show any inclusions from the level-0.org file and
does not seem to use the html5 doctype:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Testing</title>
<!-- 2015-01-02 Fri 10:41 -->
<meta  http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta  name="generator" content="Org-mode" />

<script type="text/javascript" src="js/org-info.js">
...
</script>
</head>
<body>
<div id="content">
<h1 class="title">Testing</h1>
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#sec-1">heading 1</a></li>
</ul>
</div>
</div>

<div id="outline-container-sec-1" class="outline-2">
<h2 id="sec-1">heading 1</h2>

^ permalink raw reply	[flat|nested] 10+ messages in thread

* Re: html export using html5 elements and bootstrap framework
  2015-01-02 15:47 html export using html5 elements and bootstrap framework R C
@ 2015-01-03 18:37 ` Rick Frankel
  2015-01-03 21:09   ` RC
  2015-01-06 19:43 ` Bill White
  1 sibling, 1 reply; 10+ messages in thread
From: Rick Frankel @ 2015-01-03 18:37 UTC (permalink / raw)
  To: R C; +Cc: emacs-orgmode

On Fri, Jan 02, 2015 at 03:47:36PM +0000, R C wrote:
> I would like to have org mode export a project using html5 elements and
> bootstrap framework adapting the worg tutorial: org-publish-html-tutorial.html 
> 
> - template with links to bootstrap css and js files, and a local.js file
> with my macro definitions for mathjax: "~/web/org-templates/level-0.org" 
> with lines of the form:
> #+STYLE:   <link href="css/bootstrap.min.css" rel="stylesheet"> media="screen">

I don't believe `STYLE' is used by the HTML exporter. See: `HTML_HEAD'
(`org-html-head') and `HTML_HEAD_EXTRA' (`org-html-head-extra'.)

> I also have: (setq org-html-html5-fancy t)

This only affects the use of html5 specific tags (section, article). The
exported doctype is controlled by HTML_DOCTYPE (`org-html-doctype')

> However tst.html does not show any inclusions from the level-0.org file and
> does not seem to use the html5 doctype:

Because there were no valid HTML options in level-0 and the doctype wasn't
set? Not having the contents of the file I can't be 100% sure.


Regardless, I don't think bootstrap will work very well. Doesn't it require
specific classes on the markup? To make it work you will probably need to add
additonal classes to every heading, etc.

rick

^ permalink raw reply	[flat|nested] 10+ messages in thread

* Re: html export using html5 elements and bootstrap framework
  2015-01-03 18:37 ` Rick Frankel
@ 2015-01-03 21:09   ` RC
  2015-01-03 21:25     ` Rasmus
  0 siblings, 1 reply; 10+ messages in thread
From: RC @ 2015-01-03 21:09 UTC (permalink / raw)
  To: emacs-orgmode

Rick Frankel <rick <at> rickster.com> writes:
> On Fri, Jan 02, 2015 at 03:47:36PM +0000, R C wrote:
> > with lines of the form:
> > #+STYLE:   <link href="css/bootstrap.min.css" rel="stylesheet"> 
media="screen"> 
> I don't believe `STYLE' is used by the HTML exporter. See: `HTML_HEAD'
> (`org-html-head') and `HTML_HEAD_EXTRA' (`org-html-head-extra'.)

I did change this based on the v 8 documentation and that fixed many of 
the issues I was having.

> Regardless, I don't think bootstrap will work very well. Doesn't it 
require
> specific classes on the markup? To make it work you will probably need 
to add
> additonal classes to every heading, etc.
> 
> rick
> 
I can use #+ATTR_HTML to include bootstrap specific classes for tables, 
etc but I have been unable to find a way to add a desired class to the 
<ul> for the TOC, or change the default outline-N and outline-text-N 
classes for headings and contents, respectively. It may be possible to 
alias bootstrap classes using a CSS preprocessor. 

RC

^ permalink raw reply	[flat|nested] 10+ messages in thread

* Re: html export using html5 elements and bootstrap framework
  2015-01-03 21:09   ` RC
@ 2015-01-03 21:25     ` Rasmus
  2015-01-03 21:47       ` RC
  0 siblings, 1 reply; 10+ messages in thread
From: Rasmus @ 2015-01-03 21:25 UTC (permalink / raw)
  To: emacs-orgmode

Hi,

RC <recif@yahoo.com> writes:

> I can use #+ATTR_HTML to include bootstrap specific classes for tables, 
> etc but I have been unable to find a way to add a desired class to the 
> <ul> for the TOC, or change the default outline-N and outline-text-N 
> classes for headings and contents, respectively. It may be possible to 
> alias bootstrap classes using a CSS preprocessor. 

At the moment you can't add extra classes to lists (patch welcomed).
However, you can add CUSTOM_HEADERs to your sections and do stuff like
this:

   #text-my-sec li {display: inline;}
   #text-my-sec li:after {content: ", ";}
   #text-my-sec li:last-child:after {content: "";}

I don't know what bootstrap is though, so I don't know if it helps.

—Rasmus

-- 
To err is human. To screw up 10⁶ times per second, you need a computer

^ permalink raw reply	[flat|nested] 10+ messages in thread

* Re: html export using html5 elements and bootstrap framework
  2015-01-03 21:25     ` Rasmus
@ 2015-01-03 21:47       ` RC
  2015-01-04  1:32         ` Rasmus
  0 siblings, 1 reply; 10+ messages in thread
From: RC @ 2015-01-03 21:47 UTC (permalink / raw)
  To: emacs-orgmode

Rasmus <rasmus <at> gmx.us> writes:

> 
> Hi,
> At the moment you can't add extra classes to lists (patch welcomed).
> However, you can add CUSTOM_HEADERs to your sections and do stuff like
> this:
> 
>    #text-my-sec li {display: inline;}
>    #text-my-sec li:after {content: ", ";}
>    #text-my-sec li:last-child:after {content: "";}

I use a custom css file for specific styling of elements.

> 
> I don't know what bootstrap is though, so I don't know if it helps.
> 
> —Rasmus
> 
(twitter-)Bootstrap provides a nice set of classes for navigation (TOC) 
bars, and control over layout, e.g side-by-side locks figures, etc using a 
grid-based framework. If the default heading and content classes used by 
ox-html could be changed or aliased it should work well with org-mode html 
export.

RC

^ permalink raw reply	[flat|nested] 10+ messages in thread

* Re: html export using html5 elements and bootstrap framework
  2015-01-03 21:47       ` RC
@ 2015-01-04  1:32         ` Rasmus
  2015-01-06 15:40           ` Rick Frankel
  0 siblings, 1 reply; 10+ messages in thread
From: Rasmus @ 2015-01-04  1:32 UTC (permalink / raw)
  To: emacs-orgmode

Hi,

RC <recif@yahoo.com> writes:

> If the default heading and content classes used by ox-html could be
> changed or aliased it should work well with org-mode html

Maybe you can set up filters then to replace e.g. section into the desired
naming-scheme.  AFAIR class-names are hard-coded in ox-html.

—Rasmus

-- 
Vote for proprietary math!

^ permalink raw reply	[flat|nested] 10+ messages in thread

* Re: html export using html5 elements and bootstrap framework
  2015-01-04  1:32         ` Rasmus
@ 2015-01-06 15:40           ` Rick Frankel
  2015-01-07 13:36             ` R C
  0 siblings, 1 reply; 10+ messages in thread
From: Rick Frankel @ 2015-01-06 15:40 UTC (permalink / raw)
  To: Rasmus; +Cc: emacs-orgmode

On Sun, Jan 04, 2015 at 02:32:03AM +0100, Rasmus wrote:
> Hi,
> 
> RC <recif@yahoo.com> writes:
> 
> > If the default heading and content classes used by ox-html could be
> > changed or aliased it should work well with org-mode html
> 
> Maybe you can set up filters then to replace e.g. section into the desired
> naming-scheme.  AFAIR class-names are hard-coded in ox-html.

As Rasmus mentioned in a previous email, there is no way currently to add html
attributes to lists w/ ATTR_HTML.

A filter, a mentioned above, is your simplest approach. The best (IMHO) would
be to create a derived exporter (ox-bootstrap?) based on ox-html. You can look
at one of the slideshow backends (ox-deck, ox-s5, ox-reveal) for
examples (e.g., `org-deck-item' or org-s5-headline for how to "advise" the
html exporter functions.)

rick

^ permalink raw reply	[flat|nested] 10+ messages in thread

* Re: html export using html5 elements and bootstrap framework
  2015-01-02 15:47 html export using html5 elements and bootstrap framework R C
  2015-01-03 18:37 ` Rick Frankel
@ 2015-01-06 19:43 ` Bill White
  2015-01-07 13:26   ` R C
  1 sibling, 1 reply; 10+ messages in thread
From: Bill White @ 2015-01-06 19:43 UTC (permalink / raw)
  To: emacs-orgmode

On Fri Jan 02 2015 at 09:47, R C <recif@yahoo.com> wrote:

> I would like to have org mode export a project using html5 elements
> and bootstrap framework adapting the worg tutorial:
> org-publish-html-tutorial.html
> 
> I set it up as:
> - minimal org file to be published: "~/web/p2/org/tst.org"

I think this isn't quite what you need to export a single file, but
o-blog by Sébastien Gross functions as an org-mode frontend for
bootstrap: https://github.com/renard/o-blog

Cheers -

bw
-- 
Bill White . billw@wolfram.com
"No ma'am, we're musicians."

^ permalink raw reply	[flat|nested] 10+ messages in thread

* Re: html export using html5 elements and bootstrap framework
  2015-01-06 19:43 ` Bill White
@ 2015-01-07 13:26   ` R C
  0 siblings, 0 replies; 10+ messages in thread
From: R C @ 2015-01-07 13:26 UTC (permalink / raw)
  To: emacs-orgmode

Bill White <billw <at> wolfram.com> writes:

> 
> On Fri Jan 02 2015 at 09:47, R C <recif <at> yahoo.com> wrote:
> 
> > I would like to have org mode export a project using html5 elements
> > and bootstrap framework adapting the worg tutorial:
> > org-publish-html-tutorial.html
> > 
> > I set it up as:
> > - minimal org file to be published: "~/web/p2/org/tst.org"
> 
> I think this isn't quite what you need to export a single file, but
> o-blog by Sébastien Gross functions as an org-mode frontend for
> bootstrap: https://github.com/renard/o-blog
> 
> Cheers -
> 
> bw

Thanks. The layout of one of the websites listed as using o-blog:
http://common-lisp.net/ is pretty close to what I would like to have. I was
a little confused about whether v2 supported org-mode as the tutorial for v2
used pandoc mode and mentioned org-mode in connection with v1. But I will
try it.

^ permalink raw reply	[flat|nested] 10+ messages in thread

* Re: html export using html5 elements and bootstrap framework
  2015-01-06 15:40           ` Rick Frankel
@ 2015-01-07 13:36             ` R C
  0 siblings, 0 replies; 10+ messages in thread
From: R C @ 2015-01-07 13:36 UTC (permalink / raw)
  To: emacs-orgmode

Rick Frankel <rick <at> rickster.com> writes:

> As Rasmus mentioned in a previous email, there is no way currently to add html
> attributes to lists w/ ATTR_HTML.
> 
> A filter, a mentioned above, is your simplest approach. The best (IMHO) would
> be to create a derived exporter (ox-bootstrap?) based on ox-html. You can look
> at one of the slideshow backends (ox-deck, ox-s5, ox-reveal) for
> examples (e.g., `org-deck-item' or org-s5-headline for how to "advise" the
> html exporter functions.)
> 
> rick
> 
> 

Thanks for the pointers. One of the other responses mentioned o-blog and I
am going to try it. But setting up an export backend also seems fairly
straightforward to do.

^ permalink raw reply	[flat|nested] 10+ messages in thread

end of thread, other threads:[~2015-01-07 13:44 UTC | newest]

Thread overview: 10+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2015-01-02 15:47 html export using html5 elements and bootstrap framework R C
2015-01-03 18:37 ` Rick Frankel
2015-01-03 21:09   ` RC
2015-01-03 21:25     ` Rasmus
2015-01-03 21:47       ` RC
2015-01-04  1:32         ` Rasmus
2015-01-06 15:40           ` Rick Frankel
2015-01-07 13:36             ` R C
2015-01-06 19:43 ` Bill White
2015-01-07 13:26   ` R C

Code repositories for project(s) associated with this public inbox

	https://git.savannah.gnu.org/cgit/emacs/org-mode.git

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).