One of the main reasons I went with a markdown -> pandoc portfolio site instead of using jekyll: I couldn’t figure out how to embed “local” videos (video files inside my site, not from youtube or vimeo) in the jekyll sites.

Previously I was using the Jekyll Freelancer theme. With some modifications to allow for arrow key navigation.

https://github.com/nouyang/nouyang.github.io/commit/145db1ab6403804acb7a167dd28548160fe293f4

However, any file that had a youtube video, I had to drop down to raw HTML. This was pretty painful. And since I was coercing the posts format to deal with “projects”, I had a crazy directory structure, something like “2015-01-01-project1.html”, which made editing lots of projects at once really annoying.

Thus, recently I switched to making my portfolio/project site in Markdown.
This was still kind of painful, but gave me a lot more control over the look.
I also enjoyed the minimalist structure of the final site, as compared to the glossy-yet-not-super-functional previous look when I built my site on top of the jekyll freelancer theme.

With my new webdev experience from bashing at grav for days on end, I was pretty easily able to modify this youtube embed script to do what I wanted.

I still find the post-first nature of jekyll annoying, yet it seems very reasonable to me now that I can just ignore that functionality entirely and build the rest of the site taking advantage of the templating engine and data / yaml features. After bashing at Grav, I’m also a lot more comfortable writing my own “page templates” for iterating through data files.

That is, I now understand how to leave the posts folder blank (ignore it entirely) and just write pages using my own Liquid templates.

https://jekyllrb.com/docs/datafiles/
Tutorial here: https://jekyllrb.com/tutorials/navigation/

Before, the Jekyll structure seemed overwhelming, at as always I’m only updating/creating a portfolio site when I’m applying to something. So I would always get frustrated and give up halfway through when creating/updating the portfolio site would take at least two entire days away from applications.

I also just tried and really enjoy the jekyll admin plugin, which allows me to upload files (via drag-and-drop) and provides a convenient browser-based GUI for creating pages.

The markdown file format I ended up settling down on started getting tedious and hard to organize as well. There was a lot of repetition that Liquid templating would solve. And a lot of “magic filenames” that were not human-readable, and annoying to keep consistent.

So it may be time to redo my portfolio site again.

Grav is more powerful, but even more “jargon heavy” / heavier of a web framework. You can do fancy things such as user authentication etc. in Grav. But dangnggg it is a heavy framework with a really complex file structure that appears like magical voodoo that is impossible to understad to newcomers…

For a sample of the craziness, see: https://github.com/nouyang/grav-plugin-milestones

Anyhow.

On to the actual video-embedding plugin. The key was figuring out how to access the Jekyll site variables from within the plugin file. Turns out you use the syntax Jekyll.configuration({})['url' (and use “||” to provide a default value).

Steps

1. https://jekyllrb.com/docs/quickstart/
2. Create a file, “my_site/_plugins
(create the _plugins folder if it doesn’t exist yet in your jekyll install)
3. Create a file called “video.rb” (or whatever you want) with the code at the bottom of this page
4. Put a video file in your site. Usually you can create an “assets” or “downloads” folder. For instance, I put a “spacetestSMALL_512kb.mp4” file into “my_site/assets” folder
Note: mp4 works consistently in all my browsers. ogv did not.
4. Use in your posts with following format:
{% Video spacetestSMALL_512kb.mp4 500 400 %}

 

class Video < Liquid::Tag
  Syntax = /^\s*([^\s]+)(\s+(\d+)\s+(\d+)\s*)?/

  def initialize(tagName, markup, tokens)
    super

    @url = Jekyll.configuration({})['url'] || 'http://example.com'

    if markup =~ Syntax then
      @id = $1

      if $2.nil? then
          @width = 560
          @height = 420
      else
          @width = $2.to_i
          @height = $3.to_i
      end
    else
      raise "No Video Source provided"
    end

  end

  def lookup(context, name)
    lookup = context
    name.split(".").each { |value| lookup = lookup[value] }
    lookup
  end

  def render(context)
     "<iframe width=\"#{@width}\" height=\"#{@height}\" src=\"#{@base_url}/#{@id}\" ></iframe>"
  end

  Liquid::Template.register_tag "Video", self
end

 

Results:

THIS POST IS A WORK IN PROGRESS.
I was able to get static file upload to a different directory. directory is automatically created by jekyll admin. Thumbnail even populates in http://localhost:3000/admin/staticfiles !

First steps for addressing: https://github.com/jekyll/jekyll-admin/issues/201
Feature request: Specify folder to upload static files to #201

Next steps: make a little GUI button for toggling “assets” or something like that (not sure how to make it not an arbitrary folder, but still allow user input into it)

https://github.com/jekyll/jekyll-admin/blob/3463b7ed98d43e721389ade9470c06dd863a5b9e/src/actions/staticfiles.js

const foo = "static/" + staticfileAPIUrl(file.name);

return fetch(foo, {
          method: 'PUT',
          body: payload
        })

 

 

==================================== INSTALL ======================

my distribution had ruby installed already.

sudo apt install ruby-dev

git clone https://github.com/jekyll/jekyll-admin && cd jekyll-admin

sudo gem update –system

Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
An error occurred while installing rainbow (2.2.2), and Bundler cannot continue.

sudo gem install rake

https://github.com/jekyll/jekyll-admin/issues/201

Bundle complete! 9 Gemfile dependencies, 46 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.
script/bootstrap: line 7: npm: command not found

sudo apt install npm

nrw@chai:~/projects/jekyll-admin$ script/server-frontend

sh: 1: npm-run-all: not found

npm install npm-run-all

nrw@chai:~/projects/jekyll-admin$ script/server-frontend

/usr/bin/env: ‘node’: No such file or directory

sudo apt install nodejs –> already installed’

 

https://github.com/jekyll/jekyll-admin/search?utf8=%E2%9C%93&q=upload&type=

 

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

 

sh: 1: babel-node: not found

nrw@chai:~/projects/jekyll-admin$ npm-run-all clean lint build:*
npm-run-all: command not found

 

https://askubuntu.com/questions/603921/cant-use-npm-installed-packages-from-command-linen

https://github.com/jekyll/jekyll-admin/issues/201https://www.npmjs.com/package/npm-run-all

https://www.npmjs.com/package/babel-node

nrw@chai:~/projects/jekyll-admin$ npm install babel-node

> babel-node@6.5.3 postinstall /home/nrw/projects/jekyll-admin/node_modules/babel-node
> node message.js; sleep 10; exit 1;

┌─────────────────────────────────────────────────────────────────────────────┐
| Hello there undefined 😛 │
| You tried to install babel-node. This is not babel-node 🚫 │
| You should npm install -g babel-cli instead 💁 . │
| I took this module to prevent somebody from pushing malicious code. 🕵 │
| Be careful out there, undefined! 👍 │
└─────────────────────────────────────────────────────────────────────────────┘
^C

npm install babel-cli

 

npm ERR! Failed at the jekyll-admin@0.4.1 start-message script ‘babel-node tools/startMessage.js’.

npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the jekyll-admin package,
npm ERR! not with npm itself.

nodejs –version

npm –version

https://www.npmjs.com/package/babel-cli

npm update npm -g

 

nrw@chai:~/projects/jekyll-admin$ script/server-frontend
> jekyll-admin@0.4.1 remove-dist /home/nrw/projects/jekyll-admin
> rimraf ./lib/jekyll-admin/public

/home/nrw/projects/jekyll-admin/node_modules/babel-core/lib/transformation/file/options/option-manager.js:328
throw e;
^

Error: Couldn’t find preset “stage-0” relative to directory “/home/nrw/projects/jekyll-admin”

 

nrw@chai:~/projects/jekyll-admin$ npm install babel-preset-stage-0
/home/nrw/projects/jekyll-admin/node_modules/babel-core/lib/transformation/file/options/option-manager.js:328
throw e;
^

Error: Couldn’t find preset “react” relative to directory “/home/nrw/projects/jekyll-admin”
/home/nrw/projects/jekyll-admin/node_modules/babel-core/lib/transformation/file/options/option-manager.js:328
throw e;
^

Error: Couldn’t find preset “react” relative to directory “/home/nrw/projects/jekyll-admin”

 

npm install react

 

$ script/boostrap

script/server-frontend

==================================== static file URL ======================

https://github.com/jekyll/jekyll-admin/search?p=2&q=upload&type=&utf8=%E2%9C%93

 

https://github.com/jekyll/jekyll-admin/blob/3463b7ed98d43e721389ade9470c06dd863a5b9e/src/actions/staticfiles.js

 

https://github.com/jekyll/jekyll-admin/search?utf8=%E2%9C%93&q=staticfileAPIUrl&type=

// send the put request

return fetch(staticfileAPIUrl(file.name), { method: ‘PUT’, body: payload })

 

https://github.com/jekyll/jekyll-admin/blob/2e31c09a265868d5f29b8bce407041da70a7261b/src/utils/fetch.js

https://github.com/jekyll/jekyll-admin/blob/3463b7ed98d43e721389ade9470c06dd863a5b9e/src/constants/api.js

 

http://stackoverflow.com/questions/377768/string-concatenation-in-ruby#377787

 

https://github.com/jekyll/jekyll-admin/blob/3463b7ed98d43e721389ade9470c06dd863a5b9e/src/constants/api.js

vi staticfiles.js