wintersmith: visualise the content tree - wintersmith

The wintersmith api documentation talks about :
getPluginColor()
Return vanity color used to identify the plugin when printing the content tree choices are: bold, italic, underline, inverse, yellow, cyan, white, magenta, green, red, grey, blue, rainbow, zebra or none.
How do I print[ing] the content tree ? I would like to assume that I can do this via the cli.

There's no option to do it from the CLI without building. But this small script will do it:
var wintersmith = require('wintersmith')
var env = wintersmith('/path/to/your/projects/config.json')
env.load(function(error, result) {
console.log(wintersmith.ContentTree.inspect(result.contents))
})

The ContentTree is printed every time you build wintersmith using wintersmith build, so your assumption is correct. Look for rendering tree: and what follows after that. All of the files under /content will appear and show both the source file and the output files that result, including where they are in the directory structure.
Example output:
rendering tree:
articles/
another-test/
index.md (url: /articles/another-test/)
bamboo-cutter/
index.md (url: /articles/bamboo-cutter/)
taketori_monogatari.jpg (url: /articles/bamboo-cutter/taketori_monogatari.jpg)
hello-world/
index.md (url: /articles/hello-world/)
markdown-syntax/
index.md (url: /articles/markdown-syntax/)
red-herring/
banana.png (url: /articles/red-herring/banana.png)
index.md (url: /articles/red-herring/)
test.md (url: /articles/test.html)
authors/
baker.json (url: /authors/baker.html)
the-wintersmith.json (url: /authors/the-wintersmith.html)
css/
main.css (url: /css/main.css)
posts/
test.md (url: /posts/test.html)
.DS_Store (url: /.DS_Store)
about.md (url: /about.html)
archive.json (url: /archive.html)
feed.json (url: /feed.xml)
index.json (url: /)
In case you're curious, you can find the code that does this here: https://github.com/jnordberg/wintersmith/blob/master/src/core/renderer.coffee#L36
Regarding getPluginColor(), this is a function exposed on content plugins. You should see the source files print in cyan, which corresponds with the following line of code: https://github.com/jnordberg/wintersmith/blob/master/src/core/content.coffee#L60
Other content plugins can return a different color if they choose, which could enhance the visualization printed via the CLI.
I hope that helps!

Related

Eleventy programmatic API - what should the input path look like?

I have a aws lambda function which calls the eleventy.write() or eleventy.toJSON() method but can't seem to make it work. I have tried different project structures and setting different paths but it either returns an empty array or it throws the following error
TemplateLayoutPathResolver directory does not exist for filename.njk: _includes
When I run the eleventy command from terminal, it builds successfully.
This is my 11ty project structure
project root folder
-- public (output of the eleventy build)
-- .eleventy.js
-- src (input for the eleventy build)
|-- _data
|-- _includes
my .eleventy.js file looks like this:
...
return {
dir:{
input: 'src',
output: 'public',
},
};
On the lambda function project, where the write() call is made, I have tried setting the input path relative to the file, then I tried putting the 11ty root folder next to the .js file and instantiating eleventy like let eleventy = new Eleventy(".", "public") which didn't worked and I also tried taking the content of the eleventy root project and placing it next to the .js file I am making the write() call.
Also tried setting the configPath like so
let eleventy = new Eleventy(".", "public", {
configPath: "./.eleventy.js",
});
but still not working.
The documentation for the eleventy programmatic API (https://www.11ty.dev/docs/programmatic/) is pretty thin, so any help will be greatly appreciated.
Looking at your list of files above, in src, I see includes, not _includes. Did you forget the underscore?
Just set your input folder to "src"
let eleventy = new Eleventy("src", "public");

can't load files when trying to publish my threejs project on github pages

I've been experimenting with react three fiber and wanted to publish a project on github pages. I did a build of my project and deployed it on pages. I get an error in the console that it can not load my files:
main.bb26e057.js:1 Failed to load resource: the server responded with a status of 404 ()
Here is a link to the repository: https://github.com/olvard/repossumtory/tree/main/possumtory ,
Here is a link to the pages site: https://olvard.github.io/repossumtory/possumtory/build/
I've tried fiddleing with different filepaths but i don't understand why npm run build would give me incorrect filepaths anyways.
Would be grateful for any help.
Try providing the homepage property in the package.json of the React App.
In your case, https://olvard.github.io/repossumtory/possumtory/build/ is the start url.
So modify include this line in your package.json.
"homepage": "https://olvard.github.io/repossumtory/possumtory/build/",
Edit:
Adding to your comment: The model fails to load at the first attempt because of your model.js on the last line.
It should be useGLTF.preload('opossum.glb') instead of useGLTF.preload('/opossum.glb')
I would recommend using a package called gh-pages. It's a scripted way of uploading your site using the pages functions of GitHub and also supports custom configuration options on commit.
All you need to do is run:
npm install gh-pages --save-dev
Then create a new file. Inside this file simply insert this code:
var ghpages = require('gh-pages');
ghpages.publish('path-of-dir-to-commit', function(err) {
if(err) {
console.log(err);
} else {
console.log("success");
});
You can read more on the npm site for the configuration options such as naming the repo it generates if non is found, etc.

Using npm and CakePHP 3 - file locations

If you use npm to install a package in CakePHP the directory structure will be like this:
bin/
composer.json
composer.lock
config/
favicon.ico
.gitignore
.htaccess
index.php
logs/
node_modules/
.npmrc
package-lock.json
phpunit.xml.dist
plugins
README.md
src/
tests/
tmp/
vendor/
webroot/
So I've installed a package with npm like this, which has created .npmrc:
npm install --save-dev #fortawesome/fontawesome-pro
This copies the files into node_modules/
But in Cake this isn't accessible because it would need to be inside webroot/
For example if you link to node_modules/#fortawesome/fontawesome-pro/css/all.css you'll get a 404 because node_modules/ isn't accessible to CakePHP where it is in the filesystem.
So other than manually moving the files - very tedious everytime you use npm:
mv node_modules webroot/node_modules
What strategy do people use in this sitation?
Cake version is 3.7 but I don't think that matters in this case.
I personally use the AssetCompress plugin to handle these matters.
In the file config/asset_compress.ini you define your assets and their location and you control where (inside webroot) you want the compiled/compressed assets to be placed.
Follow the plugin installation instructions and add the following to the default/sample config/asset_compress.ini`:
...
[css]
paths[] = ROOT/node_modules/#fortawesome/fontawesome-pro/css/*
cachePath = WEBROOT/cache_css
...
[awesome.css]
files[] = all.css
filters[] = CssMinFilter
...
and your template will use it like so:
<?= $this->AssetCompress->css('awesome.css') ?>
The simplest solution that came to my mind was to create an action in your app controller that actually returns the script inside the node_module folder and create a route for it. Lets assume we have the following files:
/node-module/folder/sub_folder/another_sub_folder/style.css
/node-module/folder/sub_folder/another_sub_folder/script.js
First, add a new route to your config/routes.php. Something just like this:
$routes->connect('/node-module/*', ['controller' => 'App', 'action' => 'nodeModule']);
Now, create the action for your controller. This action should return a file rather than a page and we can make it using the response object of CakePHP.
<?php
namespace App\Controller;
use Cake\Controller\Controller;
use Cake\Network\Exception\NotFoundException;
class AppController extends Controller
{
public function nodeModule(...$path_pieces)
{
$file_path = ROOT . DS . "node_modules" . DS . implode(DS, $path_pieces);
if(!file_exists($file_path))
{
$this->response = $this->response->withStatus(404);
throw new NotFoundException("The requested file has not been found, holmes");
}
$this->response = $this->response->withFile($file_path);
return $this->response;
}
}
And now you're all good to call your node_module files on the template
<link rel="stylesheet" type="text/css" href="/node-module/folder/sub_folder/another_sub_folder/style.css">
<script type="text/javascript" src="/node-module/folder/sub_folder/another_sub_folder/style.css"></script>
You can even try to access the files directly on your browser like accessing yourapp.com/node-module/folder/sub_folder/another_sub_folder/style.css for example.

Sails is not injecting the files within the assets folder

I just did a fresh installation of sails (v0.11.0) in my server and after checking this up and working on controllers I found that css, js and templates files included into the assets folders are not being injected to the layout, if there any reason for this to happen? I mean, it is a clean fresh sails installation....
In my quest to get SailsJS to auto-inject stylesheets into the layout file under views/layouts/layout.handlebars in my case, I've found out a couple things...
When you first create your sails app using:
sails new APPNAME --template=handlebars --verbose
note: link below explains above syntax...
Using handlebars templates in Sails.js
Go to config > views.js
It will say:
layout: 'layouts/layout.handlebars'
change to:
layout: 'layouts/layout',
Go to tasks > config > sails-linker.js
Because I'm in development mode right now I will Ctrl + f searching for:
"devStyles"
devStyles: {
options: {
startTag: '<!--STYLES-->',
endTag: '<!--STYLES END-->',
fileTmpl: '<link rel="stylesheet" href="%s">',
appRoot: '.tmp/public'
},
files: {
'.tmp/public/**/*.html': require('../pipeline').cssFilesToInject,
'views/**/*.html': require('../pipeline').cssFilesToInject,
'views/**/*.ejs': require('../pipeline').cssFilesToInject
//ADD HANDLEBARS INJECTION HERE
}
},
Notice it has .html, & .ejs types being injected but not .handlebars
add this line:
'views/**/*.handlebars': require('../pipeline').cssFilesToInject
where I commented:
//ADD HANDLEBARS INJECTION HERE
At this point you should be able to drop a .css file into assets > styles and have it auto-copied to .tmp/public/styles
run:
sails lift
in your command prompt and give it about 20 seconds or so to have the stylesheet manifest its style on whatever page you have in your routes.js
'/': {
view: 'index'
}
As you can see, I made a new .handlebars file index.handlebars and set it as my root level page. You may have to refresh the page a time or two to get the newly auto-injected CSS to show.
P.S. It appears there is no more need to append --linker when first creating a SailsJS project. Also fyi, I'm using sails version 0.11.0
Also if you run sails lift --verbose the line below is how you know the .handlebars injection is working
verbose: Grunt :: File "views/layouts/layout.handlebars" updated.
Hope this helps!
Also, when adding Handlebars Helpers they should go in a file helper.js which should be located in config > helper.js
At the top of the helper.js file I found I had to require handlebars as follows
handlebars = require('sails/node_modules/express-handlebars/node_modules/handlebars');

can't get extremely basic metalsmith installation to build pages

Metalsmith portrays itself as a ridiculously simple static site generator. I'm trying to write the most basic of sites just to get myself familiar with the basics of the software, but I can't seem to get even that to build. Here's my folder structure:
|- build/
|- index.js
|- src/
|-index.html
|- templates
|-index.hbt
My index.js file:
var Metalsmith = require('metalsmith');
Metalsmith(__dirname)
.destination('./build')
.build();
My index.html file:
---
title: Home
template: index.hbt
---
And my index.hbt template:
<!doctype html>
<html>
<head>
<title>FOO</title>
</head>
<body>
something
</body>
</html>
My understanding is that the build command should look through the src directory and parse any file it finds with that YAML stuff at the top. So it should look at index.html, see that it renders using the templates/index.hbt template, and basically just move the file into build/index.html. But when I run node index.js I get absolutely nothing. No progress indicator, no "Done building your stuff!" message, just a blinking command prompt line. My build directory is empty. Obviously something is breaking, but there are no logs to check, and no status messages to google. What am I doing wrong? Shouldn't there be at least one page created in the build directory?
Found the answer, in a comment on a tutorial, of all places: https://blog.robinthrift.com/2014/04/14/metalsmith-part-1-setting-up-the-forge/. It's also on the github examples: https://github.com/segmentio/metalsmith
According to those links, you need to include an error callback on the .build() function:
Metalsmith(__dirname)
.build(function(err) {
if (err) throw err;
});
In addition to the error callback issue, which you've already identified, I think you're missing a few things in your files. True, Metalsmith is very simple, but its simplicity means that a lot of the functionality (like support for templates) is brought by modules that you need to install and include explicitly.
You say the content of your index.js file is:
var Metalsmith = require('metalsmith');
Metalsmith(__dirname)
.destination('./build')
.build();
Is that everything you have in you index.js? If you want to use Handlebars templates, you need to explicitly add the metalsmith plugin that handles templates, and instruct it to use handlebars:
var Metalsmith = require('metalsmith');
var templates = require('metalsmith-templates');
Metalsmith(__dirname)
.destination('./build')
.use(templates('handlebars'))
.build();
And make sure that you install the metalsmith-templates and handlebars modules from npm.
Also, you probably know this, but in your index.hbt, you'll need to change
<title>FOO</title>
to
<title>{{ title }}</title>
in order to load the title metadata from index.html.
Let me know if this gets you going, or if you need more help.

Resources