Welcome to Weaver 0.9.0

The following is a rough documentation intended to simply demonstrate and enumerate the facilities provided by weaver

This documentation page is written in Weaver too! See

https://github.com/davidsiaw/weaver-doc-source

Installing Weaver

gem install weaver

Getting Started

weaver create my_site

This will create a folder that looks like this:

my_site/
├── Gemfile
├── Gemfile.lock
├── cache
├── js
├── css
├── images
└── source
    └── index.weave

Go to your website directory and install its dependencies:

cd my_site
bundle install

Weave files are where you describe websites. To preview your site, simply go

bundle exec weaver

By default weaver binds to port 4567, but you can change that by going:

PORT=8080 bundle exec weaver

Easy!

Building your website

To build your website simply use the following command:

bundle exec weaver build

Your website will be generated and placed in the build directory

If your website is not a root website (it is in a subdirectory), then you can add the -r parameter, as we do for this documentation site:

bundle exec weaver build -r http://davidsiaw.github.io/weaver-docs/

This sets the root for images and other things such as links

Simple example Weave file

The most basic file takes one argument: the title, and a block that contains the contents of the page

xxxxxxxxxx
 
center_page 'Hello world' do
  ibox do
    h2 'Hello world!'
  end
end
​

See it in action

Weave files only contain Ruby code

This means that you can do whatever you can normally do in Ruby

xxxxxxxxxx
 
center_page 'Hello world' do
  ibox do
    h2 'Hello world!'
    (1..5).each do |i|
      p i.to_s
    end
  end
end
​

See it in action

You can use all the HTML tags by simply calling them as if they are methods:

xxxxxxxxxx
 
h1 "This is Heading 1"
h2 "This is Heading 2"
h3 "This is Heading 3"
h4 "This is Heading 4"
h5 "This is Heading 5"
h6 "This is Heading 6"
pre "This is Preformatted"
em "This is Emphasized"
blockquote "This is in a Blockquote"
p "Paragraph text"

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5

This is Heading 6

This is Preformatted

This is Emphasized

This is in a Blockquote

Paragraph text

You can also put attributes on a tag

This allows you to change styles, set more attributes on it, etc ...

xxxxxxxxxx
 
span "Some text "
span "colored ", style:"color:blue"
span "red ", style:"color:red"

Some text colored red

You can also wrap content in another tag

This is the same as doing it in HTML. Instead of passing it a string, you use a block

xxxxxxxxxx
 
h3 style:"text-decoration:underline" do
  span "Some text "
  span "colored ", style:"color:blue"
  span "red ", style:"color:red"
end

Some text colored red

This works for all tags

Like lists:

xxxxxxxxxx
 
ul do
  li { text "Haruhi" }
  li { text "Kyon" }
  li { text "Itsuki" }
end
 ol do
  li { text "Nagato" }
  li { text "Mikuru" }
  li { text "Tsuruya" }
end

Haruhi
Kyon
Itsuki

Nagato
Mikuru
Tsuruya

text is a special tag to mean 'there are no tags', just plain html

AsciiMath 2

There is support for AsciiMath

xxxxxxxxxx
 
math "sum_(i=1)^n i^3=((n(n+1))/2)^2"

$sum_(i=1)^n i^3=((n(n+1))/2)^2$

Math is basically text

xxxxxxxxxx
 
text "The formula is thus: "
math "x = 10 / y"
text " hence we can see that "
math "x = 5"

The formula is thus:

$x = 10 / y$ hence we can see that

$x = 5$

Icons

There are icons available in here since the theme uses bootstrap

xxxxxxxxxx
 
icon :github
text "Github"
br
icon :user
text "User"

Github
User

Breadcrumbs

xxxxxxxxxx
 
breadcrumb ["root", "some", "directory"]

CSS

If you want to add your own CSS:

xxxxxxxxxx
 
/* mystyle.css */
​
#some_red_text {
    color: red;
    font-weight: bold;
}

Use the request_css function:

xxxxxxxxxx
 
center_page 'Adding your own CSS' do
  request_css 'css/mystyle.css'
​
  p 'Example for adding your own CSS'
​
  ibox do
    p 'This is my own style', id: 'some_red_text'
  end
end
​

See it in action

CSS files are placed in the css folder by convention

my_site/
├── Gemfile
├── Gemfile.lock
├── css   <-------------- here
│   └── mystyle.css
└── source
    └── index.weave

JavaScript

If you want to add your own JavaScript files:

xxxxxxxxxx
 
// myscript.js
​
function say_something()
{
    alert("meow");
}

Use the request_js function:

xxxxxxxxxx
 
center_page 'Adding your own JavaScript' do
  request_js 'js/myscript.js'
​
  p 'Example for adding your own JavaScript'
​
  ibox do
    normal_button 'Click me' do
      script 'say_something()'
    end
  end
end
​

See it in action

We encourage putting your JavaScript in .js files so you don't clutter your presentation with code

JavaScript files are placed in the js folder by convention

my_site/
├── Gemfile
├── Gemfile.lock
├── js   <-------------- here
│   └── myscript.js
└── source
    └── index.weave

Images

xxxxxxxxxx
 
image "kagamin.png"

Images are placed in the images folder, where they will be found

my_site/
├── Gemfile
├── Gemfile.lock
├── images   <-------------- here
│   ├── kagamin-under.png
│   └── kagamin.png
└── source
    └── index.weave

Crossfading images

xxxxxxxxxx
 
crossfade_image "kagamin-under.png", "kagamin.png"

Syntax Highlighting

xxxxxxxxxx
 
syntax :javascript do
  content <<~SOME_CODE
    function a()
    {
      return 0;
    }
  SOME_CODE
end

xxxxxxxxxx
 
function a()
{
  return 0;
}
​

There are different page templates to choose from

All page templates are responsive

Structureless pages

Structureless pages allow you to directly write content

xxxxxxxxxx
 
empty_page 'Empty Page Template' do
  p 'In this template, there no navigation bar and no structure. This is the most basic kind of page'
​
  ibox do
    p 'Stuff in an ibox to show the width of the page'
  end
end
​

See it in action

xxxxxxxxxx
 
center_page 'Center Page Template' do
  p 'In this template, there no navigation bar, and everything is centered. Great for login/lock screens'
​
  ibox do
    p 'Stuff in an ibox to show the width of the page'
  end
end
​

See it in action

xxxxxxxxxx
 
raw_page do
  text 'This is a raw page with absolutely no skeleton. Great for static data'
​
  p "It is still possible to insert tags, but most things won't work"
end
​

See it in action

Structured pages

Structured pages require all content to be placed in headers/rows and columns

xxxxxxxxxx
 
nonnav_page 'Nonnav Page Template' do
  header do
    col 12 do
      h2 'No navigation bar'
    end
  end
​
  row do
    col 12 do
      p 'This template is like the empty template, except it is structured'
    end
  end
​
  row do
    half do
      ibox { p 'Halves' }
    end
    half do
      ibox { p 'Halves' }
    end
  end
​
  row do
    third do
      ibox { p 'Thirds' }
    end
    third do
      ibox { p 'Thirds' }
    end
    third do
      ibox { p 'Thirds' }
    end
  end
​
  row do
    third do
      ibox { p 'Thirds' }
    end
    twothirds do
      ibox { p 'Two Thirds' }
    end
  end
​
  row do
    quarter do
      ibox { p 'Quarter' }
    end
    quarter do
      ibox { p 'Quarter' }
    end
    quarter do
      ibox { p 'Quarter' }
    end
    quarter do
      ibox { p 'Quarter' }
    end
  end
end
​

See it in action

xxxxxxxxxx
 
topnav_page 'Topnav Page Template' do
  menu do
    nav 'Navigation link one', :navicon, '/examples/topnav_page/'
    nav 'Navigation link two', :navicon, '/examples/topnav_page/'
​
    nav 'Nested links', :navicon, '/examples' do
      nav 'Inner link one', :navicon, '/examples/topnav_page/'
      nav 'Inner link two', :navicon, '/examples/topnav_page/'
    end
​
    nav 'Navigation link three', :navicon, '/examples/topnav_page/'
  end
​
  header do
    col 12 do
      h2 'Top Navigation Bar'
    end
  end
​
  row do
    col 12 do
      p 'In this template, there is a navigation bar on the top.'
    end
  end
end
​

See it in action

xxxxxxxxxx
 
sidenav_page 'Sidenav Page Template' do
  menu do
    nav 'Navigation link one', :navicon, '/examples/sidenav_page/'
    nav 'Navigation link two', :navicon, '/examples/sidenav_page/'
​
    nav 'Nested links', :navicon, '/examples' do
      nav 'Inner link one', :navicon, '/examples/sidenav_page/'
      nav 'Inner link two', :navicon, '/examples/sidenav_page/'
    end
​
    nav 'Navigation link three', :navicon, '/examples/sidenav_page/'
  end
​
  header do
    col 12 do
      h2 'Side Navigation Bar'
    end
  end
​
  row do
    col 12 do
      p 'In this template, there is a navigation bar on the side.'
    end
  end
end
​

See it in action

Navigation page brands

You can also add a brand section to pages with navigation. The brand is just a link to home.

xxxxxxxxxx
 
topnav_page 'Topnav Page Template With Brand' do
  brand 'HOME PAGE'
​
  menu do
    nav 'Navigation link one', :navicon, '/examples/topnav_page/'
    nav 'Navigation link two', :navicon, '/examples/topnav_page/'
​
    nav 'Nested links', :navicon, '/examples' do
      nav 'Inner link one', :navicon, '/examples/topnav_page/'
      nav 'Inner link two', :navicon, '/examples/topnav_page/'
    end
​
    nav 'Navigation link three', :navicon, '/examples/topnav_page/'
  end
​
  header do
    col 12 do
      h2 'Top Navigation Bar'
    end
  end
​
  row do
    col 12 do
      p 'In this template, there is a navigation bar on the top.'
    end
  end
end
​

See it in action

xxxxxxxxxx
 
sidenav_page 'Sidenav Page Template With Brand' do
  brand 'BRAND'
​
  menu do
    nav 'Navigation link one', :navicon, '/examples/sidenav_page/'
    nav 'Navigation link two', :navicon, '/examples/sidenav_page/'
​
    nav 'Nested links', :navicon, '/examples' do
      nav 'Inner link one', :navicon, '/examples/sidenav_page/'
      nav 'Inner link two', :navicon, '/examples/sidenav_page/'
    end
​
    nav 'Navigation link three', :navicon, '/examples/sidenav_page/'
  end
​
  header do
    col 12 do
      h2 'Side Navigation Bar'
    end
  end
​
  row do
    col 12 do
      p 'In this template, there is a navigation bar on the side.'
    end
  end
end
​

See it in action

Sidebar variation

This sidebar minimizes into an icon bar instead of disappearing totally

xxxxxxxxxx
 
sidenav_page 'Sidenav Page Template' do
  # Use this directive to keep icons visible
  keep_icons_when_hidden
  menu do
    nav 'Navigation link one', :navicon, '/examples/sidenav_page/'
    nav 'Navigation link two', :navicon, '/examples/sidenav_page/'
​
    nav 'Nested links', :navicon, '/examples' do
      nav 'Inner link one', :navicon, '/examples/sidenav_page/'
      nav 'Inner link two', :navicon, '/examples/sidenav_page/'
    end
​
    nav 'Navigation link three', :navicon, '/examples/sidenav_page/'
  end
​
  header do
    col 12 do
      h2 'Side Navigation Bar Iconbar'
    end
  end
​
  row do
    col 12 do
      p 'In this template, the navigation bar on the side minimizes into icons'
    end
  end
end
​

See it in action

You can specify dark theme

This works for all the above templates

xxxxxxxxxx
 
center_page '', 'Dark Center Page Template', theme: :dark do
  p 'In this template, the theme is dark'
​
  ibox do
    p 'Stuff in an ibox to show the width of the page'
  end
end
​

See it in action

There are different preset partition schemes too

xxxxxxxxxx
 
topnav_page 'Partitions' do
  header do
    col 12 do
      h2 'Partitions'
    end
  end
​
  row do
    col 12 do
      hr
    end
  end
​
  row do
    half { ibox { p 'Half' } }
    half { ibox { p 'Half' } }
  end
​
  row do
    twothirds { ibox { p 'Two Thirds' } }
    third { ibox { p 'Third' } }
  end
​
  row do
    third { ibox { p 'Third' } }
    third { ibox { p 'Third' } }
    third { ibox { p 'Third' } }
  end
​
  row do
    quarter { ibox { p 'Quarter' } }
    quarter { ibox { p 'Quarter' } }
    quarter { ibox { p 'Quarter' } }
    quarter { ibox { p 'Quarter' } }
  end
end
​

See it in action

There are buttons

xxxxxxxxxx
 
button "Original Html Button"; br
normal_button nil, "Normal Button"; br
block_button nil, "Block Button"; br
outline_button nil, "Outline Button"; br
big_button nil, "Big Button"; br
small_button nil, "Small Button"; br
tiny_button :user, ""; br
embossed_button nil, "Embossed Button"; br
big_embossed_button :user, ""; br
rounded_button nil, "Rounded Button"; br
circle_button :user, ""; br
​

There are various types of panels available

xxxxxxxxxx
 
ibox do
  type :panel
  title "Panel"
  p "Some content"
end
 ibox do
  type :primary
  title "Primary"
  p "Some content"
end
 ibox do
  type :success
  title "Success"
  p "Some content"
end
 ibox do
  type :info
  title "Info"
  p "Some content"
end
 ibox do
  type :warning
  title "Warning"
  p "Some content"
end
 ibox do
  type :danger
  title "Danger"
  p "Some content"
end
 ibox do
  type :blank
  title "Blank"
  p "Some content"
end

Panel

Some content

Primary

Some content

Success

Some content

Info

Some content

Warning

Some content

Danger

Some content

Blank

Some content

Jumbotron

xxxxxxxxxx
 
jumbotron do
  h2 "Jumbotron"
end

Jumbotron

Widgets

xxxxxxxxxx
 
widget color: :"gray" do
  p "gray"
end
widget color: :"gray" do
  widget color: :"white" do
    p "white"
  end
end
widget color: :"navy" do
  p "navy"
end
widget color: :"blue" do
  p "blue"
end
widget color: :"lazur" do
  p "lazur"
end
widget color: :"yellow" do
  p "yellow"
end
widget color: :"red" do
  p "red"
end
widget color: :"black" do
  p "black", style: "color:white"
end

It is easy to make tabs

xxxxxxxxxx
 
tabs do
  tab "Dog" do
    p "Woof"
  end
  tab "Cat" do
    p "Meow"
  end
  tab "Duck" do
    p "Quack"
  end
end

Woof

Meow

Quack

There are two other possible orientations

There is :left and :right

xxxxxxxxxx
 
tabs do
  orientation :left
  tab "Dog" do
    p "Woof"
  end
  tab "Cat" do
    p "Meow"
  end
  tab "Duck" do
    p "Quack"
  end
end

Woof

Meow

Quack

It is also possible to use icons

xxxxxxxxxx
 
tabs do
  tab :automobile do
    p "Car"
  end
  tab :train do
    p "Subway"
  end
  tab :bus do
    p "Bus"
  end
end

Car

Subway

Bus

It is also possible to use an accordion

xxxxxxxxxx
 
accordion do
  tab "Dog" do
    p "Woof"
  end
  tab "Cat" do
    p "Meow"
  end
  tab "Duck" do
    p "Quack"
  end
end

Dog

Woof

Cat

Meow

Duck

Quack

Tables can also be made the standard way

xxxxxxxxxx
 
table do
  thead do
    th { text "Name" }
    th { text "Class" }
  end
  tr do
    td { text "Haruhi" }
    td { text "2-B" }
  end
  tr do
    td { text "Kyon" }
    td { text "2-B" }
  end
  tr do
    td { text "Mikuru" }
    td { text "3-A" }
  end
end

Name	Class
Haruhi	2-B
Kyon	2-B
Mikuru	3-A

Bordered style

You can mix and match styles

xxxxxxxxxx
 
table bordered: true do
  thead do
    th { text "Name" }
    th { text "Class" }
  end
  tr do
    td { text "Haruhi" }
    td { text "2-B" }
  end
  tr do
    td { text "Kyon" }
    td { text "2-B" }
  end
  tr do
    td { text "Mikuru" }
    td { text "3-A" }
  end
end

Name	Class
Haruhi	2-B
Kyon	2-B
Mikuru	3-A

Hover style

xxxxxxxxxx
 
table hover: true do
  thead do
    th { text "Name" }
    th { text "Class" }
  end
  tr do
    td { text "Haruhi" }
    td { text "2-B" }
  end
  tr do
    td { text "Kyon" }
    td { text "2-B" }
  end
  tr do
    td { text "Mikuru" }
    td { text "3-A" }
  end
end

Name	Class
Haruhi	2-B
Kyon	2-B
Mikuru	3-A

Striped style

xxxxxxxxxx
 
table striped: true do
  thead do
    th { text "Name" }
    th { text "Class" }
  end
  tr do
    td { text "Haruhi" }
    td { text "2-B" }
  end
  tr do
    td { text "Kyon" }
    td { text "2-B" }
  end
  tr do
    td { text "Mikuru" }
    td { text "3-A" }
  end
end

Name	Class
Haruhi	2-B
Kyon	2-B
Mikuru	3-A

Data Table

Data table JQuery plugin

xxxxxxxxxx
 
table system: :data_table do
  thead do
    th { text "Name" }
    th { text "Class" }
  end
  tr do
    td { text "Haruhi" }
    td { text "2-B" }
  end
  tr do
    td { text "Kyon" }
    td { text "2-B" }
  end
  tr do
    td { text "Mikuru" }
    td { text "3-A" }
  end
end

Foo Table

Foo Table plugin

xxxxxxxxxx
 
table system: :foo_table do
  thead do
    th { text "Name" }
    th { text "Class" }
    th :"data-breakpoints" => :all do
      text "Info"
    end
    th :"data-breakpoints" => :all do
      text "Power"
    end
  end
  tr do
    td { text "Haruhi" }
    td { text "2-B" }
    td { text "Uninterested in humans" }
    td { text "Reality change" }
  end
  tr do
    td { text "Kyon" }
    td { text "2-B" }
    td { text "Is the real God" }
    td { text "Control over Haruhi" }
  end
  tr do
    td { text "Mikuru" }
    td { text "3-A" }
    td { text "Classified information" }
    td { text "Classified information" }
  end
end

Name	Class	Info	Power
Haruhi	2-B	Uninterested in humans	Reality change
Kyon	2-B	Is the real God	Control over Haruhi
Mikuru	3-A	Classified information	Classified information

You can make also tables easily from an array of Hashes

xxxxxxxxxx
 
table_from_hashes [
  {name: "Haruhi", age: 17},
  {name: "Mikuru", age: 18},
  {name: "Kyon", age: 17},
  {name: "Nagato", age: 17},
  {name: "Itsuki", age: 17},
  {name: "Tsuruya", age: 18}
]

name	age
Haruhi	17
Mikuru	18
Kyon	17
Nagato	17
Itsuki	17
Tsuruya	18

You can also use the styles available to tables

xxxxxxxxxx
 
table_from_hashes [
  {name: "Haruhi", age: 17, class: "2-B"},
  {name: "Mikuru", age: 18, class: "3-A"},
  {name: "Kyon", age: 17, class: "2-B"},
  {name: "Nagato", age: 17, class: "2-A"},
  {name: "Itsuki", age: 17, class: "2-C"},
  {name: "Tsuruya", age: 18, class: "3-A"}
], bordered: true, striped: true

name	age	class
Haruhi	17	2-B
Mikuru	18	3-A
Kyon	17	2-B
Nagato	17	2-A
Itsuki	17	2-C
Tsuruya	18	3-A

Describing multiple pages in one weave file

It is possible to describe multiple pages in one weave file. Simply pass it two arguments, the first being the path of the page, and the second the title of the page'

xxxxxxxxxx
 
center_page 'Multi-page example' do
  ibox do
    h2 'Hello world!'
    ul style: 'text-align:left' do
      li { hyperlink 'page1' }
      li { hyperlink 'page2' }
    end
  end
end
​
center_page 'page1', 'Hello world' do
  ibox do
    h2 'Sub page 1'
    p 'This page will have a path of page1'
  end
end
​
center_page 'page2', 'Hello world' do
  ibox do
    h2 'Sub page 2'
    p 'This page will have a path of page2'
  end
end
​

See it in action

This is usually useful if you are generating a site with multiple pages generated from some data