An empty string with File-IO in VoltRb - html

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

Related

finding path in HTML

My file is organized like this:
My/
├── public/
│ ├── css/
│ │ ├── sign.css
├── views/
│ ├── register.ejs
And I typed in below to access the "sign.css" file:
<link href="css/sign.css" rel="stylesheet">
Why is the href path correct?
Shouldn't it be ../public/css/sign.css
since in order to access sign.css, the step is
"go back one file to My -> go into public -> go into css -> access sing.css"?
app.use(express.static('public'))
Above code sets public directory from which to serve static assets.
Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL.

Gulp minify and move files with same folder structure

I have a folder structure like this:
.
├── dist/
└── src/
├── index.php
└── projects/
├── some-project/
│ ├── main.css
│ ├── main.js
│ └── index.html
└── N'th project/ ...
I need to minify and move every project inside src/ to dist/ without breaking folder structure. Should look like this:
.
├── dist/
│ ├── index.php
│ └── projects/
│ ├── some-project/
│ │ ├── main.css(minified)
│ │ ├── main.js(minified)
│ │ └── index.html
│ └── N'th project/ (also minified) ...
└── src/
├── index.php
└── projects/
├── some-project/
│ ├── main.css
│ ├── main.js
│ └── index.html
└── N'th project/ ...
Thanks for your time.
I solved it with something like this. If any one want to use:
.pipe(gulp.dest(function(file){
let splittedUrl = file.history[0].split("\\");
let projectName = splittedUrl.slice(splittedUrl.indexOf("projects"),-1);
//console.log(projectName.join("/"));
return "dist/" + projectName.join("/");
}));
gulp.task("projectTest", () => {
return gulp.src("./src/projects/**/*.css")
// minify pipe, etc.
.pipe(gulp.dest('dist/projects'))
});
From https://gulpjs.com/docs/en/api/concepts#glob-base:
A glob base - sometimes called glob parent - is the path segment
before any special characters in a glob string. As such, the glob base
of /src/js/**.js is /src/js/. All paths that match the glob are
guaranteed to share the glob base - that path segment can't be
variable.
Vinyl instances generated by src() are constructed with the glob base
set as their base property. When written to the file system with
dest(), the base will be removed from the output path to preserve
directory structures.
That is a little confusing as written. In my code the part before the globstar ** is the base. So ./src/projects/ is the base. And the directory structure under the base is always preserved - but that wouldn't include projects (because that is part of the base and will be removed automatically in gulp.dest).
In the dest pipe, the directory structures (project1, project2, etc.) are still there but would be sent to your dest folder without the base path at the beginning. So you will need to add whatever part of that base path back into your dest folder if you want it.
So gulp.dest('dist/projects') to get the preserved folder structure put back under projects as you want.
So if what I said is true, this alternative should work as well:
gulp.task("projectTest", () => {
// return gulp.src("./src/projects/**/*.css")
return gulp.src("./src/**/*.css")
// .pipe(gulp.dest('dist/projects'))
.pipe(gulp.dest('dist'))
});
Now the directory structure under src is preserved (becasue src is the base). So you get the same result just sending all that to dist.
You can decide which form you prefer, I think the first version is a little clearer. And if there are files under src that you do not want captured by the gulp.src glob.

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...

Gulp+PUG: get all filenames in directory, tranform and inject them in another file

I have a PUG filestructure that looks something like this:
.
├── _modules
| ├── _footer
| | └── footer.pug
| └── _header
| | └── header.pug
| └── includes.pug
├── _layouts
| ├── default.pug
| └── post.pug
└── index.pug
The main idea is that I want to write a watch task for this, that will get all the filenames in _modules subdirectories and write them into includes.pug file so it would look something like this:
include _footer/footer
include _header/header
I've found some gulp packages that could get the filenames and store them in some variables (array), but I don't know, how to transform them to a string and to inject them into another file (well, I can do foreach of array with filenames and then get a string like 'include '+ filename, but the main problem is that I can't find a package that could insert that strings in a file while I'm doing foreach). Any suggestions how can I do this?
I would appreciate any help. Thank you.

How to serve YAML files with 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