How to serve YAML files with Jekyll? - jekyll

I have a YAML file that holds some data and needs to be processed client side.
---
some: content
...
Jekyll handles everything with Front Matter, which results in the whole YAML content to be treated as Front Matter and the page then has no content.
Is there a way to tell Jekyll to treat the file as static, even though it has a YAML header?
I tried different combinations of exclude and keep_files, also setting Front Matter defaults in my _config.yml, but nothing is really working.
My workaround now is to add an additional Front Matter block in front of the content:
---
layout: null
---
---
some: content
...
The YAML file though is a swagger definition and adding this extra block would both:
make it complicated to test/generate the definition locally or in Swagger Editor
Generate confusion, if the file is downloaded via github.
So ideally I would like to store the file without any modification and somehow teach Jekyll to leave it alone.

There is no way to tell Jekyll to avoid to process a file with front matter without a plugin.
A simple solution would be to use Jekyll hook's to copy the original unprocessed file with front matter to the generated site just after the whole site has been generated.
For example, adding _plugins/copyfile.rb:
Jekyll::Hooks.register :site, :post_write do |site|
src = "_unprocessed/about.md"
dest = "_site/assets"
puts "Copying #{src} to #{dest}"
FileUtils.cp(src, dest)
end
That would copy _unprocessed/about.md with front matter to the final site assets dir.
As _unprocessed starts with an underscore it won't be present in the resulting site.
Building the site:
/tmp/s⟫jekyll b
Configuration file: /tmp/s/_config.yml
Source: /tmp/s
Destination: /tmp/s/_site
Incremental build: disabled. Enable with --incremental
Generating...
Copying _unprocessed/about.md to _site/assets
done in 0.884 seconds.
Auto-regeneration: disabled. Use --watch to enable.
/tmp/s⟫ tree _site/
_site/
├── 404.html
├── assets
│   ├── about.md
│   └── main.css
├── feed.xml
├── index.html
└── jekyll
└── update
└── 2017
└── 11
└── 09
└── welcome-to-jekyll.html
6 directories, 6 files

Cross-posting my answer here as it may be relevant (not sure; I'm not a Jekyll user but github pages uses it.) https://stackoverflow.com/a/48954668/1461007

Related

How and where should I keep CSV data file in nuxt.js project so that CSV data can be rendered easiliy on page/template?

I have Nuxt.js project whose contents are
alok#alok-HP-Laptop-14s-cr1xxx:~/tmp/portfolio$ tree -L 1
.
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package.json
├── package-lock.json
├── pages
├── plugins
├── README.md
├── static
└── store
9 directories, 4 files
This is very nice structure which is described on https://nuxtjs.org/guide/directory-structure .
I have some CSV data which I want to display in table in page/template. So how and where should I keep my this CSV data file so which can be easily accessed and rendered in template/page?
It really depends on your data, your setup and experience...
If your data is not changing too often and you are willing to build and deploy your app every time it changes, the simplest thing you can do is to convert csv to json and include myData from myData.json directly from JavaScript (and keep it in the same folder as your component)
data will by part of your app bundle (ok if its just few lines)
works great with static site (nuxt generate) or SPA mode of Nuxt (don't need Node on server side so it can be hosted on Netlify and such)
simple
Other option is to put in inside static folder but then you will need to download it into your running app at run-time using Ajax (Axios for example). You can find examples here
more complicated
ability to update data without building whole app (just upload single file)
Even in this second case I would argue its better to parse it once and convert into something JavaScript can read easily (like JSON) and keep it that way instead of parsing at run-time every time someone uses your site...

How to change polymer built output path?

polymer build command output the result to the build directory.
Is there any way to change the output path?
/* Output directory example */
./build/
├── es5-bundled
├── es6-bundled
├── es6-unbundled
└── polymer.json
You can change the names of the subfolders within build folder to any name you like. Just change the name property in builds array of your polymer.json file.
See the documentation for this.
Currently, no method exists to change the build output path (see this issue). You can, however, use polymer-build (the same package used by polymer-cli) with gulp, which gives you a lot more control over those kind of things.

How can I "watch" multiple source directories in Jekyll?

I'm pretty sure I've seen in Jekyll blog projects with multiple source document directories, such as _posts and _pages, but the source parameter in the _config.yml file can only take 1 directory as its argument, and neither an array nor a space separated string of directories works.
Am I misunderstanding the meaning of the source parameter? I'm expecting it to be used by watch to specify which files' changes will trigger a build, and which files to build.
Also, I have fragments such as about.md which can be included in other pages. What is the best location for files like this one?
The source configuration refers to your <project_root>, not individual directories within the project root. By default, its set to your current_directory (the location from where you are running jekyll build (or) serve.
Jekyll watches all nested files and directories deep within the source directory by default.
about.md is not meant to be seen as a fragment to be included in other files. Its a full-blown "page" that would render into _site/about.html or _site/about/index.html depending on your permalink settings.
Fragments to be included in other pages live inside the _includes directory and are inserted via the Liquid construct {% include <fragment-filename>.html %}
Other than _layouts, _includes and _sass, directories that start with an underscore are ignored by Jekyll unless you configure Jekyll to see them as "collections". _posts is a pre-defined and hard-coded collection directory.
For more information on Jekyll, refer the official documentation at https://jekyllrb.com
If anyone, like me, is looking to include several source folders in github-pages, you can simply configure the jekyll root in github-page on the master branch. I.e. not on gh-page branch, nor on the docs folder.
Thus, all folder is processed. README.md are treated as index.md and you can easily make relative links from the main README.md at the root to any other doc which are "below" it in the file hierarchy. Thus having jekyll cover all your code documentation.

Jekyll: Using multiple .md files per directory and have them available as files, not sub-directories?

I am looking for a way to have multiple markdown files (.md) in a directory and have them available as files (not sub-directories).
Example:
├── about/
| └── index.md
| └── history.md
| └── vision.md
I want these to become urls like this (treated as files (no trailing slash))
base.url/about/
base.url/about/history
base.url/about/vision
instead of (directories (trailing slash)):
base.url/about/
base.url/about/history/
base.url/about/vision/
How can I achieve that?
You can do this with Jekyll 3.x using permalinks in your files front matter. But, if you want to use this with Jekyll 2.4+ and Github pages, it seems that there is a problem.
Permalinks with trailing slash are the way to go for now.

An empty string with File-IO in VoltRb

I'm trying to do some file-reading in VoltRb and embed the contents of those files in my views. I initially planned that I would read the files on the server-side (since the client-side doesn't support file-reading), and then pass the strings of those files on to the client, but it seems that I'm getting an empty string for my files on the client.
Here is some code to demonstrate my problem:
file.txt
file contents
main_controller.rb
if RUBY_ENGINE == 'ruby'
file = File.open("app/files_to_read/lib/file.txt", "r")
$file_text = file.read
file.close
puts $file_text # returns "file contents" on the server side
puts $file_text.class # returns "String" on the server side
end
module Main
class MainController < Volt::ModelController
model :page
def index
page._text = $file_text
puts $file_text # returns an empty string in the browser console
end
...
end
end
index.html
<:Title>
Home
<:Body>
<h1>Home</h1>
<p>{{ _text }}</p>
<!-- ^ an empty string -->
My directory tree looks like this:
app
├── files_to_read
│   └── lib
│   └── file.txt
└── main
├── assets
├── config
├── controllers
│   └── main_controller.rb
├── lib
├── tasks
└── views
└── main
├── about.html
├── index.html
└── main.html
Why am I getting an empty string for my file and how do I fix this?
So one thing to keep in mind is that controllers will be run twice, once on the client, and once on the server. So the client one will be a different instance than the ones on the server, so they won't have access to the $file_text global.
What you can do though is create a task that reads the file and then returns the text of the file. Check out #RickCarlino's excellent tasks tutorial video: http://datamelon.io/blog/2015/creating-volt-task-objects.html
Thanks