I want to create a file based blog. I have several scripts that I cannot store in a database/do not know enough about databases to store/would be a bad fit. I though it would be a good idea to create a file based blog. It not a blog per say.
The folder structure I would like to use is as follows:
App folder
-- Posts
--- file1.erb
--- file2.erb
-- Posts2
--- file3.erb
--- file4.erb
How I can read the contents of the Posts folder and create an array containing the title? I know I can store them in view, but I though the views were for the site layouts.
This is what I've been doing:
get '/posts1/:id' do
erb "posts_#{params[:id]}".to_sym
end
get '/posts2/:id' do
erb "posts2_#{params[:id]}".to_sym
end
Note on the blog, it's not a blog, its just the easiest way to explain what it is.
I have created several apps with Sinatra that use Markdown. Please do not use ERB for content.
Markdown file could like this:
title: Breathe
date: 2013-08-05
Breathe.
Given your directory "Posts" with markdown files, you can do this:
Dir.glob "./app/posts/*.md" do |file|
meta, content = File.read( file). split("\n\n", 2)
article = OpenStruct.new YAML.load( meta)
article.date = Time.parse article.date.to_s
article.content = content
article.slug = File.basename(file, '.md').gsub("_", '-')
on "#{article.slug}" do
erb :post, locals: { article: article }
end
end
That creates routes based on the file name of your markdown file. So if it is called "Breathe" then the route is "breathe"
On your ERB file, you need to use
to_html(article.content)
Add the helper:
require 'maruku'
def to_html(str)
Maruku.new(str).to_html
end
Related
If one starts a blank file on Word you can usually see in the top bar a name such as "Document1", "Document2" and so on.
Yet, if you attempt to open a file using the Word JS API like this:
Word.run((context) => {
context.application.createDocument(documentB64).open()
return context.sync()
})
The top bar comes out like this:
No filename is set.
To set a filename/handle(?), I tried using the code given here Office JS - Add customProperty to new document but that didn't help.
My addin is usually used in conjunction with another (VSTO) add-on and that add-on can't work properly with the documents opened by my addin and I believe the lack of a filename (/handle?) explains it to some extent.
Is there something I can do about this?
Thank you
Currently you can't do this because the newly created document is just a temporary file and not saved. can you try to call the following code to make sure the newly created file is saved?
const documentCreated = context.application.createDocument(externalDoc);
documentCreated.save();
documentCreated.open();
I'm creating (would like to create) an eleventy (11ty) plugin that can automatically generate Open Graph images based on a pages data. So in the template:
---
generate_og_image: true
image_text: "text which will be baked into the image"
og_image_filename: some_file_name.jpg
---
#some markdown
...
I can process each file in my .eleventy.js file via plugin using:
module.exports = function (eleventyConfig) {
eleventyConfig.addLinter("og-image-generator", function(content, inputPath, outputPath) {
title = HOW_TO_ACCESS_TEMPLATE_FRONT_MATTER
createImage(title)
});
}
But only have access to the content, inputPath and outputPath of the template.
How can I access the front matter data associated with the Template? Or is there a better way to go about this?
Answering my own question. As #moritzlost mentioned it is not possible directly. I found this workaround.
eleventyComputed allows you to dynamically assign values to keys. It also allows you to call a custom shortcode.
You can pass whatever properties you like from the template into the shortcode. In this case ogImageName the image name, ogImageTemplate a template or background image and text which is the text to be written on that background.
You can even pass in other keys from your front matter and process them as you go.
---
layout: _main.njk
title: "Some title here"
eleventyComputed:
ogImageName: "{% ogCreateImage { ogImageName: title | slug, ogImageTemplate: 'page-blank.png', text: title } %}"
---
Then in .eleventy.js or a plugin:
eleventyConfig.addShortcode("ogCreateImage", function(props) {
const imageName = props.ogImageName
const imageTemplate = props.ogImageTemplate
const imageText = props.text
console.log('-----------------ogCreateImage-----------------');
console.log(`filename: ${imageName}`);
console.log(`using template: ${imageTemplate}`);
console.log(`with the text : ${imageText}`);
// call the image creation code — return filename with extension
const imageNameWithExtension = createOGImage(imageName, imageTemplate, imageText)
return imageNameWithExtension
});
Returning the final filename which you can use in your template.
I've also come across this problem. I don't think what you're trying to do is possible at the moment. There are not many ways for a plugin to hook into the build step directly:
Transforms
Linters
Events
I think events would be the best solution. However, events also don't receive enough information to process a template in a structured way. I've opened an issue regarding this on Github. For your use-case, you'd need to get structured page data in this hook as well. Or eleventy would need to provide a build hook for each page. I suggest opening a new feature-request issue or adding a comment with your use-case to my issue above so those hooks can be implemented.
Other solutions
Another solution that requires a bit more setup for the users of your plugin would be to add your functionality as a filter instead of an automatic script that's applied to every template. This means that the users of your plugin would need to add their own template which passes the relevant data to your filter. Of course this also gives more fine-control to the user, which may be beneficial.
I use a similar approach for my site processwire.dev:
A special template loops over all posts and generates an HTML file which is used as a template for the generated preview images. This template is processed by eleventy. (source)
After the build step: I start a local server in the directory with the generated HTML files, open them using puppeteer and programmatically take a screenshot which is saved alongside the HTML templates. The HTML templates are then deleted.
This is integrated into the build step with a custom script that is executed after the eleventy build.
I've published the script used to take screenshots with Puppeteer as an NPM package (generate-preview-images), though it's very much still in alpha. But you can check the source code on Github to see how it works, maybe it helps with your plugin.
Some of my doxygen documentation need to refer to pages in the
company's wiki. I would prefer if these references resulted in working
hypertext links in the generated documentation. I could of course
achieve this by writing:
/// Name of page
or alternatively using Markdown syntax:
/// [Name of wiki page](http://long-URL.com/wiki/index.php?Name-of-page)
Unfortunately I have to give the full URL at every link in both cases,
and when (as has already happened) the base URL of our company/wiki
changes, all the URLs needs updating.
I therefore wonder if Doxygen has some support to avoid having to
hardcode the entire URL at every link?
For comparison, wikis use "InterMap" or "InterWiki", to define
prefixes that allow a shorthand notation for quickly referring to pages
on another web site. Example:
See WikiPedia:InterWiki_Links for more details.
So if possible I would like to let the Doxygen documentation contain
something like:
// See CompanyWiki:Name_of_wiki_page for bla bla
Some references:
Automatic link generation - http://www.doxygen.nl/manual/autolink.html
InterWiki - https://www.mediawiki.org/wiki/Manual:Interwiki
PmWiki/InterMap - http://www.pmwiki.org/wiki/PmWiki/InterMap
You could define an alias in the config file:
ALIASES += WikiPedia{2}="\2"
and then use it in your comments like so
See \WikiPedia{InterWiki_Links,Interwiki Links} for more details.
See also http://www.doxygen.org/manual/custcmd.html for more info.
Short version:
If I wanted to develop a completely new jsDoc template from scratch, what would I have to read to understand what jsDoc does, what interface my template must provide and what data I get to work with?
Long version:
I've been using jsDoc for a while now and have come across some tags that I would like to add and overview pages that I would like to have generated out of my documentation. Up to now I solved all my "user problems" with usejsdoc.org. I even managed to add a new jsdoc plugin that adds some tags. However, I can't find any developer documentation on how to create templates for jsdoc. I use ink-docstrap so I clicked my way through the template-folder (publish.js, /tmpl, etc.) and somehow got the idea of how everything works. But its very very time consuming.
What should I read to become a jsDoc template pro?
These instructions are the closest I could find:
To create or use your own template:
Create a folder with the same name as your template (for example, mycooltemplate).
Within the template folder, create a file named publish.js. This file must be a CommonJS module that exports a method named publish.
For example:
/** #module publish */
/**
* Generate documentation output.
*
* #param {TAFFY} data - A TaffyDB collection representing
* all the symbols documented in your code.
* #param {object} opts - An object with options information.
*/
exports.publish = function(data, opts) {
// do stuff here to generate your output files
};
To invoke JSDoc 3 with your own template, use the -t command line option, and specify the path to your template folder:
./jsdoc mycode.js -t /path/to/mycooltemplate
Failing that, you can read the source code!
I am running into a similar difficulty with lack of documentation. There is a GitHub issue that has been open for 7 years on this: Provide docs that explain how templates work.
The only example I've found so far of a custom template that doesn't look like just a modified version of the default is Ramda's documentation. It looks like they use a completely custom publish.js script that uses handlebars.js instead of underscore.js templates, constructs a non-hierarchical nav, pulls info from #sig and #category tags, and uses links to github for 'view source' instead of rendering its own html pages for source code.
Some of their code will be difficult to understand unless you are familiar with Ramda and functional programming (they use Ramda itself in their version of publish.js) but dumping out the values of data and docs during execution should help provide insight into what is going on.
It is helpful as well that their template is a single file so you don't have to jump between a lot of partial template files to follow how the doc is constructed.
I've just published my own new jsdoc theme. What I did is I simply copied the default template: https://github.com/jsdoc3/jsdoc/tree/master/templates/default, and worked on that.
I also managed to add grunt with the following features:
* transcompile + minify js files
* parse sass styles and minify them
* refresh the docs when you change something
You can see how it works here: https://github.com/SoftwareBrothers/better-docs
you can customize one of existing templates (default, haruki or silent):
go into node_modules/jsdoc/template and grab on of them into your app directory outside node_modules.
feel free to rename the dir ex: jsdoc-template.
open jsdoc-template update/customize the content as you want. ex: open publish.js find Home and replace My Js App.
update jsdoc.json by adding:
"opts": {
"template": "jsdoc-template"
}
another option to use one of those templates too: jsdoc3 template list examples
Followup to my previous comment about Ramda's JSDoc template. I've since created a customized version of it and published it on GitHub at https://github.com/eluv-io/elv-ramdoc
This is tailored for my company's projects, but it may be helpful as another learning tool. It adds a 'Show private' checkbox, updates Bootstrap to v5.13, replaces Handlebars with Pug, adds JSDoc comments to the publish.js script itself, and supports setting an environment variable to dump data to console during doc generation.
I'm using JSDoc tutorials, as described in http://usejsdoc.org/about-tutorials.html
I can't get the configuration options to work, and I haven't yet found any examples or discussion of the topic online.
In my trivial example, I pass a tutorials parameter to JSDoc, and it builds a tutorial file for tutorial1.md. I would like to give this tutorial a display name of "First Tutorial".
Following this from the online docs:
Each tutorial file can have additional .js/.json file (with same name, just different extension) which will hold additional tutorial configuration. Two fields are supported:
title overrides display name for tutorial with the one specified in it's value (default title for tutorial is it's filename).
children which holds list of sub-tutorials identifiers.
I tried several attempts at adding tutorial1.json, or tutorial1.js but either JSDoc pukes on the json file, or doesn't seem to recognize anything I throw at it in the js file.
Can anyone suggest a simple format for a tutorial configuration file that should work?
(Edited to include one .js file I tried, which did not change the tutorial display name.)
tutorial1.md
First Tutorial
================
tutorial1.js
/**
#title First Tutorial
*/
#title = "First Tutorial";
title = "First Tutorial";
It works with .json extension but not with a .js extension. jsdoc does not seem to try to even read the file if a .js extension is used. So the doc seems incorrect.
With a .json extension, and using jsdoc 3.2.2, the following works:
{
"title": "Custom Title"
}
Your .json file needs to be in the same directory as your .md file and have the same name (ignoring extensions).