web: Modernize with Bower, Bootstrap, LESS

The page layout has been visually modified to add a menu on the left
side. Bootstrap framework makes it work responsively on mobiles.

Some of the main HTML elements have been changed to HTML5 elements.

All the pages have also been reworked.

Signed-off-by: db0 <db0company@gmail.com>
Signed-off-by: Timothy Gu <timothygu99@gmail.com>
Signed-off-by: Clément Bœsch <u@pkh.me>

.bowerrc

@@ -0,0 +1,3 @@
+{
+    "directory" : "htdocs/components"
+}

.gitignore

@@ -1,2 +1,5 @@
 /htdocs/*.html
+/htdocs/css/style.min.css
 /htdocs/main.rss
+/htdocs/components
+/htdocs/style.less

Makefile

@@ -3,21 +3,40 @@
 SRCS = about bugreports consulting contact donations documentation download \
        olddownload index legal projects shame security archive
 
-TARGETS = $(addsuffix .html,$(addprefix htdocs/,$(SRCS))) htdocs/main.rss
+HTML_TARGETS  = $(addsuffix .html,$(addprefix htdocs/,$(SRCS)))
 
-PAGE_DEPS = src/template_head1 src/template_head2 src/template_footer
+RSS_FILENAME = main.rss
+RSS_TARGET = htdocs/$(RSS_FILENAME)
 
+CSS_SRCS = src/less/style.less
+CSS_TARGET = htdocs/css/style.min.css
+LESS_TARGET = htdocs/style.less
+LESSC_OPTIONS := --clean-css
 
-all: $(TARGETS)
+BOWER_PACKAGES = bower.json
+BOWER_COMPONENTS = htdocs/components
 
-clean:
-	rm -f $(TARGETS)
+ifdef DEV
+SUFFIX = dev
+TARGETS = $(BOWER_COMPONENTS) $(LESS_TARGET) $(HTML_TARGETS) $(RSS_TARGET)
+else
+SUFFIX = prod
+TARGETS = $(HTML_TARGETS) $(CSS_TARGET) $(RSS_TARGET)
+endif
+
+DEPS = src/template_head1 src/template_head2 src/template_head3 src/template_head_$(SUFFIX) \
+       src/template_footer1 src/template_footer2 src/template_footer_$(SUFFIX)
+
+all: htdocs
+
+htdocs: $(TARGETS)
 
-htdocs/%.html: src/% src/%_title $(PAGE_DEPS)
-	cat src/template_head1 $<_title src/template_head2 $< \
-	src/template_footer > $@
+htdocs/%.html: src/% src/%_title src/%_js $(DEPS)
+	cat src/template_head1 $<_title src/template_head_$(SUFFIX) \
+	src/template_head2 $<_title src/template_head3 $< \
+	src/template_footer1 src/template_footer_$(SUFFIX) $<_js src/template_footer2 > $@
 
-htdocs/main.rss: htdocs/index.html
+$(RSS_TARGET): htdocs/index.html
 	echo '<?xml version="1.0" encoding="UTF-8" ?>' > $@
 	echo '<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">' >> $@
 	echo '<channel>' >> $@
@@ -35,5 +54,21 @@ X' >> $@
 	echo '</channel>' >> $@
 	echo '</rss>' >> $@
 
+$(BOWER_COMPONENTS): $(BOWER_PACKAGES)
+	bower install
+	cp -r $(BOWER_COMPONENTS)/font-awesome/fonts htdocs/
+	cp $(BOWER_COMPONENTS)/font-awesome/css/font-awesome.min.css htdocs/css/
+	cp $(BOWER_COMPONENTS)/bootstrap/dist/css/bootstrap.min.css htdocs/css/
+	cp $(BOWER_COMPONENTS)/bootstrap/dist/js/bootstrap.min.js htdocs/js/
+	cp $(BOWER_COMPONENTS)/jquery/dist/jquery.min.js htdocs/js/
+
+$(CSS_TARGET): $(CSS_SRCS)
+	lessc $(LESSC_OPTIONS) $(CSS_SRCS) > $@
+
+$(LESS_TARGET): $(CSS_SRCS)
+	ln -sf $(CSS_SRCS) $@
+
+clean:
+	$(RM) -r $(TARGETS)
 
 .PHONY: all clean

README

@@ -1,4 +1,68 @@
-This generates the ffmpeg.org website by fitting the navigation links onto
-source files and dropping the result in the htdocs/ directory.
+ffmpeg.org official website
 
-'make' generates the website, 'make clean' removes all generated files.
+
+GENERATE THE WEBSITE
+--------------------
+
+`lessc` is required to generate CSS of the website.[1]
+
+Type `make` to generate the website.
+Type `make clean` to remove the generated files.
+
+
+GENERATE THE DOCUMENTATION
+--------------------------
+
+/!\ None of the generated versions of the website contain the documentation.
+
+To generate the documentation pages:
+- Add the HTML wrappers to your environment:
+  $ export FFMPEG_HEADER1="$(cat src/template_head1 src/template_doctitle src/template_head_prod)"
+  $ export FFMPEG_HEADER2="$(cat src/template_head2 src/template_doctitle src/template_head3)"
+  $ export FFMPEG_FOOTER="$(cat src/template_footer1 src/template_footer_prod src/template_footer2)"
+- Get the main ffmpeg repo:
+  $ git clone git://source.ffmpeg.org/ffmpeg.git
+- Compile the documentation using the ffmpeg main repo Makefile:
+  $ make doc
+- Copy the generated HTML files inside the website:
+  $ cp /path/to/ffmpeg/doc/*.html /path/to/ffmpeg-web/dist/
+
+In case of a major CSS update, please also update the `style.min.css` file in
+the main FFmpeg repo:
+  $ cat dist/css/bootstrap.min.css dist/css/style.min.css > /path/to/ffmpeg/doc/style.min.css
+
+
+WEBSITE DEVELOPERS INSTRUCTIONS
+-------------------------------
+
+npm, lessc and bower are required to generate the website in development.[2]
+
+Type `make DEV=1` to generate the website for development.
+Type `make clean DEV=1` to remove the generated files.
+
+In development mode, the external dependencies are downloaded through bower.
+
+Thanks to lessc, you can edit the *.less sources and see the changes on your
+browser without having to reload it.
+
+
+-----
+
+[1] lessc is available on the packages of some distributions.
+Otherwise, follow the instructions in [2].
+lessc depends on lots of stuff including npm, so if you wish to use a lighter version,
+you might want to check out the C++ version: http://www.vanderkroef.net/clessc.html
+
+[2] Install instructions, 2 methods:
+
+- Install everything globally (root required)
+  - Install npm from the packages or the sources: http://nodejs.org/
+  - Install lessc and bower using npm:
+    $ sudo npm install -g bower less
+
+- Install only npm globally
+  - Install npm from the packages or the sources: http://nodejs.org/
+  - Install lessc and bower in the current directory using npm:
+    $ npm install bower less
+  - Add the path to your environment:
+    $ export PATH=`pwd`/node_modules/bower/bin:`pwd`/node_modules/less/bin:$PATH

bower.json

@@ -0,0 +1,12 @@
+{
+    "name": "ffmpeg-web",
+    "description": "FFmpeg official website",
+    "version": "2.0.0",
+    "homepage": "http://ffmpeg.org/",
+    "main": "htdocs/style.css",
+    "dependencies": {
+	"less": "1.7.3",
+	"bootstrap": "3.2.0",
+	"font-awesome": "4.1.0"
+    }
+}

htdocs/css/simple-sidebar.css

@@ -0,0 +1,117 @@
+#wrapper {
+  padding-left: 200px;
+  transition: all 0.4s ease 0s;
+}
+
+#sidebar-wrapper {
+  margin-left: -200px;
+  left: 200px;
+  width: 200px;
+  background: #000;
+  position: fixed;
+  height: 100%;
+  overflow-y: auto;
+  z-index: 1000;
+  transition: all 0.4s ease 0s;
+}
+
+#page-content-wrapper {
+  width: 100%;
+}
+
+.sidebar-nav {
+  position: absolute;
+  top: 0;
+  width: 200px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sidebar-nav li {
+  line-height: 40px;
+  text-indent: 20px;
+}
+
+.sidebar-nav li a {
+  color: #999999;
+  display: block;
+  text-decoration: none;
+}
+
+.sidebar-nav li a:hover {
+  color: #fff;
+  background: rgba(255,255,255,0.2);
+  text-decoration: none;
+}
+
+.sidebar-nav li a:active,
+.sidebar-nav li a:focus {
+  text-decoration: none;
+}
+
+.sidebar-nav > .sidebar-brand {
+  height: 65px;
+  line-height: 60px;
+  font-size: 18px;
+}
+
+.sidebar-nav > .sidebar-brand a {
+  color: #999999;
+}
+
+.sidebar-nav > .sidebar-brand a:hover {
+  color: #fff;
+  background: none;
+}
+
+.content-header {
+  height: 65px;
+  line-height: 65px;
+}
+
+.content-header h1 {
+  margin: 0;
+  margin-left: 20px;
+  line-height: 65px;
+  display: inline-block;
+}
+
+#menu-toggle {
+  display: none;
+}
+
+.inset {
+  padding: 20px;
+}
+
+@media (max-width:767px) {
+
+#wrapper {
+  padding-left: 0;
+}
+
+#sidebar-wrapper {
+  left: 0;
+}
+
+#wrapper.active {
+  position: relative;
+  left: 200px;
+}
+
+#wrapper.active #sidebar-wrapper {
+  left: 200px;
+  width: 200px;
+  transition: all 0.4s ease 0s;
+}
+
+#menu-toggle {
+  display: inline-block;
+}
+
+.inset {
+  padding: 15px;
+}
+
+}