Video Plugin

Finally a video plugin!

usage:

[[
  plugin: video,
  name: /videos/test.mp4,
  preview: /videos/test.png
]]

The engine will use mediaplayer to display a video in /videos/test.mp4 using /videos/test.png as a cover.

Album Plugin
  • 1.jpg
  • 2.jpg
  • 3.jpg

Prerequisite

imagemagick

How to use

Put

[[
  plugin: photo,
  name: 08-12-14 Album Plugin,
  prefix: ,
  show_description: no
]]

in your post ( a newline is required before and after "[[ ...  ]]" ):
  • plugin: name of the plugin
  • name: name of the directory that holds this photo album, inside public/images/album
  • prefix: image_file_name - prefix = description
  • show_description: should the engine show calculated image description beneath each image?

What's happening

The engine will look for a folder inside public/images/album named "08-12-14 Album Plugin". For each image inside that folder, a thumbnail is generated automatically inside public/images/album/"08-12-14 Album Plugin"/thumb if there isn't one already. The result will be an album showed in thumbnails with pointers to the original photos.

Install

New install of Panda will have this ability automatically. To upgrade from previous Panda, cabal update; cabal upgrade then:

  • add jquery.innerfade in js field inside blueprint.txt
  • put jquery.innerfade.js inside public/theme/blueprint/js

  • add

    $('.fade-album').innerfade(
  { speed: "slow", timeout: 4000, type: 'sequence',
    containerheight: '400px' }
);

    inside $(document).ready() in public/theme/blueprint/js/custom.js

  • style your css, for example

    .article .content img{
  padding: 20px 20px;
}


.article .content .center img{
text-align: center;
}

.container .content .photo {
text-align: center;
}
.container .content .photo img, .container .content ul.fade-album img{
width: 400px;
border: 1px solid #aaaaaa;
padding: 5px;
margin: 20px;
}

.container .content ul.fade-album{
list-style-type: none;
margin-left: 0;
padding-left: 0;
}

.container .content ul.fade-album li{
background: none;
}

.container .content ul.fade-album p, .container .content .photo p {
padding-left: 24px;
width: 404px;
font-size: 0.9em;
font-weight: bold;
}
Panda as CMS

I used Panda's core to build another website: http://dzqxh.com. Since there are requirements not possible using Panda alone, the view layer had to be rewritten entirely. Luckily, a few good features have been ported back to Panda, like the image plugin system and more properly structured models.

Panda's plugin

I've been using the code base of Panda to build another website. It's more then a blog, so I had to figure out a way to extend Panda's features.

Though I have not yet merge the code into Panda's code base, a photo-album plugin has just been done with a, imho, extensible plugin structure.

To insert a photo album in a post or a page, just place the following code inline:

[[
  plugin: photo,
  name: 08-06-10 电钢琴第一期师资培训班隆重结业
]]

It only works with markdown or html posts, as it's a simple regular expression substitution.

A prefix parameter can be used to strip the prefix of the names of the pictures, the default value is %d+-. So a picture could be named as 1-my-cat.jpg.

In this example, the engine looks for a folder named "08-06-10 电钢琴第一期师资培训班隆重结业" inside "public/images/album". The parent path is hard coded in Config.Global, but could be exposed to site.txt as usually.

All the images inside the album folder are used to generate an image album, specified in View.Atom.Album.

That's it.

BTW, I experimented with the XSLT idea, and it turned out to be not flexible enough. I'm giving up the idea of easy configurable theming for now, since I like generating HTML in Haskell and that's not something every user should do.

Panda's solution

I was reluctant to say it, but I'm not satisfied with Panda's code size. Currently it has 1013 sloc, it should not have been as a simple blog.

I could think of one solution, i.e., the HAppS's approach:

Haskell Datatype -> XML -> XSLT -> CSS -> Javascript

Everything after XML is theme specific, hence outside the scope of Panda. This way I can bring down the amount of code involved.

Unfortunately I might have less time to spend on Panda, so I'll just stfu and code.

UTF8 IO wrapper

A tiny UTF8 wrapper around basic IOs and REs for Panda:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
-- u2b: utf8 string to byte string
-- b2u: the reverse

split x y  = MPS.split (x.u2b) (y.u2b) .map b2u
gsub x y z = MPS.gsub (x.u2b) (y.u2b) (z.u2b) .b2u
match x y  = MPS.match (x.u2b) (y.u2b)

read_file  = readFile
write_file = writeFile
ls x       = MPS.ls (x.u2b) ^ map b2u
mkdir_p    = u2b >>> createDirectoryIfMissing True

file_exist = u2b >>> doesFileExist
dir_exist  = u2b >>> doesDirectoryExist

Beats Python 3.0, yeah :)