bliper

static html page generation in perl
git clone git://git.2f30.org/bliper.git
Log | Files | Refs | README | LICENSE

commit 1957e70113ee3438c6e37f1fed7a8191b13a9009
parent e3ecd7e8d14a781c00ab940f3c3cbc890b2a50ac
Author: cipher <haris@2f30.org>
Date:   Wed Nov 27 00:53:29 +0200

update to v0.2

Diffstat:
README | 43++++++++++++++++++++++++++++++++++---------
TODO | 3---
bin/bliper-deploy.sh | 3+++
bin/bliper-generate.pl | 42++++++++++++++++++++++++++++++++++++++----
bin/bliper-menu-creation.sh | 13+++++++++++++
input/markdown-notes | 80-------------------------------------------------------------------------------
main-articles/2013-11-10-markdown-notes | 80+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
main-articles/2013-11-27-readme | 77+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
output/images/sample.jpg | 0
output/style.css | 50++++++++++++++++++++++++++++++++++++++++++++------
pages/about | 11+++++++++++
pages/contact | 5+++++
template/footer | 2+-
template/main-top | 15++-------------
template/page-bottom | 4++--
template/page-top | 20+++-----------------
16 files changed, 313 insertions(+), 135 deletions(-)
diff --git a/README b/README @@ -1,12 +1,14 @@ -bliper (BLog engine In PERl) v0.1 +bliper (BLog engine In PERl) v0.2 ================================= -A perl script that reads all posts from input/ as markdown and creates them as -HTML articles in output/ dir. +A perl script that reads all posts from main-articles/ as markdown and creates +them as HTML articles in output/ dir. It also reads and creates individual +pages based on files that exist in pages/ directory. Deps: Text-Markdown (http://search.cpan.org/~bobtfish/Text-Markdown-1.000031/) -It also creates a main page as index.html with all links to posts generated. +It also creates a main page as index.html with all links to posts and pages +generated. Files included are: @@ -16,13 +18,19 @@ Files included are: |-- TODO |-- bin | |-- bliper-create-post.sh -| `-- bliper-generate.pl -|-- input -| `-- markdown-notes +| |-- bliper-deploy.sh +| |-- bliper-generate.pl +| `-- bliper-menu-creation.sh +|-- main-articles +| |-- 2013-11-07-readme +| `-- 2013-11-10-markdown-notes |-- output | |-- images | | `-- puffytron.jpg | `-- style.css +|-- pages +| |-- about +| `-- contact `-- template |-- footer |-- main-bottom @@ -34,18 +42,32 @@ bin/bliper-create-post.sh use this instead of `touch <file>' for your posts. It just prepends `date '+%Y-%m-%d'` to the beginning of the filename. +bin/bliper-deploy.sh + is a script tha "deploys" the website. It's based on rsync and I've + included a sample config. Jyst change "user@host:/path/to/output" with + the real one. + bin/bliper-generate.pl is the main script that parses every post in input/ and recreates it as HTML in output/. It also creates the index.html page and appends all links to posts. -input +bin/bliper-menu-creation.sh + upon generation, a file called 'tmp' gets created. Then, this script + comes and replaces all "INSERTMENU" strings in templates with the real + menu. Nothing fancy, but you need to run this before deployment or + viewing to generate your menus in all pages. + +main-articles is the directory which serves as the place to create all posts in markdown. output is the directory which all generated pages are placed. Edit the style.css file according to your needs. +pages + is the directory which produced all new pages (again, sample included). + template main-top is the top section of the main page. main-bottom is the bottom section of the main page. @@ -53,4 +75,7 @@ template page-bottom is a generic template for the bottom section of any post page. footer is just the footer appended in all pages. -I've included a demo file in input/markdown-notes. Just run `bliper-generate.pl' in your main directory, and `$BROWSER output/index.html' to see the demo. +I've included a demo file in input/markdown-notes. Just run +`bliper-generate.pl' in your main directory, `bliper-menu-creation.sh' and +`$BROWSER output/index.html' to see the demo. There is also the option to rsync +the generated files to your server with `bliper-deploy.sh'. diff --git a/TODO b/TODO @@ -1,3 +0,0 @@ -- add "deploy" script w/ rsync to sync files to server. -- better handling for header. -- add the option to have directories/categories. diff --git a/bin/bliper-deploy.sh b/bin/bliper-deploy.sh @@ -0,0 +1,3 @@ +#!/bin/sh + +exec rsync -r -a -v -e "ssh" --delete output/ user@host:/path/to/output/ diff --git a/bin/bliper-generate.pl b/bin/bliper-generate.pl @@ -5,19 +5,53 @@ use Cwd; my $main_dir = getcwd; my $main_page = 'output/index.html'; -my $indir = 'input'; # the input directory name +my $indir = 'main-articles'; # the input directory name my $outdir = 'output'; # the output directory name +my $pagedir = 'pages'; # individual pages directory my @maint = qx(cat template/main-top); # top section for main page my @mainb = qx(cat template/main-bottom); # bottom section for main page my @footer = qx(cat template/footer); # footer for every page incl main my @paget = qx(cat template/page-top); # top section for every page in input/ my @pageb = qx(cat template/page-bottom); # bottom section for every page in input/ +unlink glob "output/*.html"; # remove old pages +unlink "output/tmp"; # file which stores menu open (OUT, '>', "$outdir/index.html") or die $!; # create the index.html page print OUT @maint; -chdir($indir) or die "Can't change path to $indir $!\n"; + +chdir($pagedir) or die "Can't change path to $pagedir $!\n"; print "\n\t\t\tblipper (BLog In PERl) v0.1\n\n"; print "Entering " . getcwd . "\n\n"; +open (OUT, '>>', "../$outdir/tmp") or die $!; # begin creating menu for individual pages in a file +print OUT "<ul>"; # begin list for menu items +print OUT "<li><a href=\"index.html\">home</a></li>"; + +my @pages = <*>; # create individual pages +foreach my $page (@pages) { + print "Generating page: "; + printf("%-30s", $page); + print "\t==> output page:\t" . "../$outdir/$page.html\n"; + my @array = qx(cat $page); + open (OUT, '>', "../$outdir/$page.html") or die $!; + print OUT @paget; + my @html = qx(Markdown.pl $page); + print OUT @html; + print OUT @pageb; + close OUT; + + open (OUT, '>>', "../$outdir/tmp") or die $!; # append page links to tmp file + print OUT "<li><a href=\"$page.html\">$page</a></li>"; +} + +print OUT "</ul>"; +print OUT "<hr>"; +print OUT "<br>"; +close OUT or die $!; + +chdir($main_dir) or die "Can't change path to $main_dir $!\n"; +print "\nIndividual page generation completed. "; +chdir($indir) or die "Can't change path to $indir $!\n"; +print "Entering " . getcwd . "\n\n"; my @files = <*>; foreach my $file (@files) { # Read each file(post) from indir, cat to $outdir/$file.html @@ -32,7 +66,7 @@ foreach my $file (@files) { # Read each file(post) from indir, cat to $outdi print OUT @pageb; close OUT; - open (OUT, '>>', "../$outdir/index.html") or die $!; # append links to stories + open (OUT, '>>', "../$outdir/index.html") or die $!; # append links to stories in index.html print OUT "<a href=\"$file.html\">$file</a>"; print OUT "\n"; print OUT "<br>"; @@ -45,4 +79,4 @@ close OUT; print "\nLeaving " . getcwd . "\n"; chdir($main_dir) or die "Can't change path to $main_dir $!\n"; -print "Blog generation completed. Files are in output/ dir.\n"; +print "Site generation completed. Files are in output/ dir.\n"; diff --git a/bin/bliper-menu-creation.sh b/bin/bliper-menu-creation.sh @@ -0,0 +1,13 @@ +#!/bin/sh + +MENU=`cat output/tmp` +FILES=output + +cd $FILES + +for f in *.html +do + echo "Processing $f" + sed -e "s#INSERTMENU#$MENU#g" $f > $f.new + mv $f.new $f +done diff --git a/input/markdown-notes b/input/markdown-notes @@ -1,80 +0,0 @@ -### Markdown semantics - - -#### This section covers some basic Markdown syntax. - -Paragraphs, headers, blockquotes - -markdown: - - A First Level Header - ==================== - - A Second Level Header - --------------------- - - Now is the time for all good men to come to - the aid of their country. This is just a - regular paragraph. - - The quick brown fox jumped over the lazy - dog's back. - - ### Header 3 - - > This is a blockquote. - > - > This is the second paragraph in the blockquote. - > - > ## This is an H2 in a blockquote - -Phrase emphasis - -markdown: - - Some of these words *are emphasized*. - Some of these words _are emphasized also_. - - Use two asterisks for **strong emphasis**. - Or, if you prefer, __use two underscores instead__. - -output: - - <p>Some of these words <em>are emphasized</em>. - Some of these words <em>are emphasized also</em>.</p> - - <p>Use two asterisks for <strong>strong emphasis</strong>. - Or, if you prefer, <strong>use two underscores instead</strong>.</p> - -Links - -markdown: - - This is an [example link](http://example.com/). - - - I get 10 times more traffic from [Google][1] than from - [Yahoo][2] or [MSN][3]. - - [1]: http://google.com/ "Google" - [2]: http://search.yahoo.com/ "Yahoo Search" - [3]: http://search.msn.com/ "MSN Search" - -Images - -markdown: - - ![alt text](/path/to/img.jpg "Title") - - -Code - -markdown: -just ident 1tab/4spaces the block you want to display as code - -#### How to run - -Demo complete, cookie time. - -![wallpaper](images/puffytron.jpg "OpenBSD") -[wallpaper](images/puffytron.jpg) diff --git a/main-articles/2013-11-10-markdown-notes b/main-articles/2013-11-10-markdown-notes @@ -0,0 +1,80 @@ +### Markdown semantics + + +#### This section covers some basic Markdown syntax. + +Paragraphs, headers, blockquotes + +markdown: + + A First Level Header + ==================== + + A Second Level Header + --------------------- + + Now is the time for all good men to come to + the aid of their country. This is just a + regular paragraph. + + The quick brown fox jumped over the lazy + dog's back. + + ### Header 3 + + > This is a blockquote. + > + > This is the second paragraph in the blockquote. + > + > ## This is an H2 in a blockquote + +Phrase emphasis + +markdown: + + Some of these words *are emphasized*. + Some of these words _are emphasized also_. + + Use two asterisks for **strong emphasis**. + Or, if you prefer, __use two underscores instead__. + +output: + + <p>Some of these words <em>are emphasized</em>. + Some of these words <em>are emphasized also</em>.</p> + + <p>Use two asterisks for <strong>strong emphasis</strong>. + Or, if you prefer, <strong>use two underscores instead</strong>.</p> + +Links + +markdown: + + This is an [example link](http://example.com/). + + + I get 10 times more traffic from [Google][1] than from + [Yahoo][2] or [MSN][3]. + + [1]: http://google.com/ "Google" + [2]: http://search.yahoo.com/ "Yahoo Search" + [3]: http://search.msn.com/ "MSN Search" + +Images + +markdown: + + ![alt text](/path/to/img.jpg "Title") + + +Code + +markdown: +just ident 1tab/4spaces the block you want to display as code + +#### How to run + +Demo complete, cookie time. + +![wallpaper](images/puffytron.jpg "OpenBSD") +[wallpaper](images/puffytron.jpg) diff --git a/main-articles/2013-11-27-readme b/main-articles/2013-11-27-readme @@ -0,0 +1,77 @@ +bliper (BLog engine In PERl) v0.2 +================================= + +A perl script that reads all posts from main-articles/ as markdown and creates +them as HTML articles in output/ dir. It also reads and creates individual +pages based on files that exist in pages/ directory. + +Deps: Text-Markdown (http://search.cpan.org/~bobtfish/Text-Markdown-1.000031/) + +It also creates a main page as index.html with all links to posts and pages +generated. + +Files included are: + + . + |-- LICENSE + |-- README + |-- TODO + |-- bin + | |-- bliper-create-post.sh + | |-- bliper-deploy.sh + | |-- bliper-generate.pl + | `-- bliper-menu-creation.sh + |-- main-articles + | |-- 2013-11-07-readme + | `-- 2013-11-10-markdown-notes + |-- output + | |-- images + | | `-- puffytron.jpg + | `-- style.css + |-- pages + | |-- about + | `-- contact + `-- template + |-- footer + |-- main-bottom + |-- main-top + |-- page-bottom + `-- page-top + +_bin/bliper-create-post.sh_ + use this instead of `touch <file>` for your posts. It just prepends `date '+%Y-%m-%d'` to the beginning of the filename. + +_bin/bliper-deploy.sh_ + is a script tha "deploys" the website. It's based on rsync and I've + included a sample config. Just change "user@host:/path/to/output" with + the real one. + +_bin/bliper-generate.pl_ + is the main script that parses every post in input/ and recreates it as + HTML in output/. It also creates the index.html page and appends all links + to posts. + +_bin/bliper-menu-creation.sh_ + upon generation, a file called 'tmp' gets created. Then, this script + replaces all "insertmenu"(in capital) strings in templates with the + real menu. Nothing fancy, but you need to run this before deployment or + viewing to generate your menus in all pages. + +_main-articles_ + is the directory which serves as the place to create all posts in markdown. + +_output_ + is the directory which all generated pages are placed. Edit the style.css + file according to your needs. + +_pages_ + is the directory which produced all new pages (again, sample included). + +_template_ + main-top is the top section of the main page. + main-bottom is the bottom section of the main page. + page-top is a generic template for the top section of any post page. + page-bottom is a generic template for the bottom section of any post page. + footer is just the footer appended in all pages. + +I've included a demo file in input/markdown-notes. Just run `bliper-generate.pl` in your main directory, `bliper-menu-creation.sh` and `$BROWSER output/index.html` to see the demo. There is also the option to rsync the files to your server with `bliper-deploy.sh` diff --git a/output/images/sample.jpg b/output/images/sample.jpg Binary files differ. diff --git a/output/style.css b/output/style.css @@ -1,11 +1,12 @@ body { - background-color: #050505; - font-family: Terminus, monospace; + background-color: #424242; + /* font-family: Terminus, monospace; */ + font-family: sans-serif; font-size: 1em; } .container { - color: #40ff40; + color: #e8e8e8; max-width: 680px; margin: 0 auto; } @@ -15,6 +16,28 @@ body { text-align: right; } +/* menu */ +ul { + line-height: 1.5em; + text-align: right; +} + +ul li { + display: inline; +} + +li a { + text-decoration: none; + font-weight: bold; + padding: 0.3em; + border-top: 0.5ex solid #555555; + color: #e8e8e8; +} + +li a:hover, li a.current { + border-top: 0.5ex solid #aaaaaa; +} + h3 { margin-top: 30px; } @@ -26,14 +49,29 @@ p { } pre { - font-family: Terminus, monospace; - color: #40ff40; - border: 1px solid #424242; + /* font-family: Terminus, monospace; */ + font-family: sans-serif; + color: #e8e8e8; + /* border: 1px solid #000000; */ + /* background-color: #000000 */ padding: 5px; + max-width: 680px; + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; +} + +code { + background: #000000; + display: block; + max-width: 680px; + padding: 0.5em; + margin: 0.5em; } .logo { border: none; + text-align: center; } img { diff --git a/pages/about b/pages/about @@ -0,0 +1,11 @@ +### About + +This is an about demo page. + +orem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices orci sit amet diam semper tincidunt. Duis mi augue, egestas in laoreet nec, iaculis vitae libero. Cras at convallis lorem, euismod sagittis mi. Integer lorem elit, pulvinar eget dui a, consectetur posuere quam. Proin eu fringilla mi. Integer tempus, nunc at imperdiet volutpat, augue metus suscipit neque, eu elementum sapien nulla eget quam. Donec et aliquam nunc. + +#### H4 header + +Nulla tortor dolor, convallis sit amet libero ac, iaculis vulputate libero. Proin convallis sagittis ipsum, nec dictum massa pharetra non. Phasellus congue ligula nec sem lacinia, ac convallis est suscipit. Nam laoreet euismod turpis, placerat condimentum augue condimentum nec. Vestibulum libero sem, lacinia tincidunt cursus id, sollicitudin at nibh. Ut ullamcorper consectetur sollicitudin. Fusce porta enim dapibus leo condimentum, blandit convallis tellus eleifend. Fusce ac orci lacus. Donec accumsan laoreet purus, at venenatis elit. Sed tempus, leo sit amet scelerisque rutrum, enim magna ornare est, quis iaculis tellus lorem eu nibh. Curabitur dapibus, tortor sed tristique imperdiet, ante erat rhoncus tortor, interdum volutpat nibh urna et neque. Phasellus ornare lectus quis nibh semper vulputate. + +Cras dictum, urna non condimentum ultrices, velit odio facilisis leo, id tempus neque velit tristique mauris. Aenean mattis lacus nisl, eu molestie libero accumsan in. Duis pulvinar turpis at blandit consequat. Quisque et nibh sit amet enim dignissim facilisis in eget ipsum. Aliquam velit erat, dignissim ut lacus vel, aliquet sagittis lacus. Mauris consectetur tempus nibh vehicula bibendum. Proin sed tellus sapien. Proin lobortis vehicula lobortis. Phasellus ullamcorper quis tortor a laoreet. Curabitur et mi tortor. Etiam interdum enim ut quam auctor, ac ultrices metus tempus. Suspendisse semper dolor vel consequat consectetur. Cras tristique velit sit amet viverra posuere. Curabitur a vehicula justo, eget egestas enim. Mauris sit amet nulla vehicula, tempor velit sit amet, dignissim purus. diff --git a/pages/contact b/pages/contact @@ -0,0 +1,5 @@ +### Contact + +#### H4 header + +This is a sample contact page. Nothing to see here, move along. diff --git a/template/footer b/template/footer @@ -1,3 +1,3 @@ -<footer>Made with vim and generated by Perl in Markdown.</footer> +<footer>Made with vim and generated by Perl in bliper.</footer> </body> </html> diff --git a/template/main-top b/template/main-top @@ -7,17 +7,6 @@ </head> <body> <div class="container"> <!-- container begin --> -<pre class="logo"> - - _ _ - ___(_)_ __ | |__ ___ _ __ - / __| | '_ \| '_ \ / _ \ '__| -| (__| | |_) | | | | __/ | - \___|_| .__/|_| |_|\___|_| - |_| - - +<img src="images/sample.jpg" /> Welcome to my blog... -</pre> -<hr> -<br> +INSERTMENU diff --git a/template/page-bottom b/template/page-bottom @@ -1,6 +1,6 @@ -<a href="#start"><p class="upstart">Up</p></a> +<a href="#start"><p class="upstart">^</p></a> </div> <!-- container end --> <hr> -<footer>Made with vim and generated by Perl in Markdown.</footer> +<footer>Made with vim and generated by Perl in bliper.</footer> </body> </html> diff --git a/template/page-top b/template/page-top @@ -8,20 +8,6 @@ <body> <div class="container"> <!-- container begin --> <a name="start"></a> -<pre class="logo"> - ____________ - / /\ - / / \ - / / \ - / / \ --------------------/___________/ ----------------------| Welcome --------------------\ \ ---------------------| @ my blog - \ \ / - \ \ / - \ \ / - \___________\/ -</pre> -<a href="index.html">Home</a> -<hr> -<br> -<br> +<img src="images/sample.jpg" /> +Welcome to my blog... +INSERTMENU