Displaying code chunks in a frame in hugo using blogdown - hugo

I have recently created a blog post using blogdown and hugo. I was able to add code folding but the code appears like regular text on the website. I am trying to display the code in a frame or something distinguishing it from the rest of the text ex:
I have tried everything but could not figure how to do it. I am guessing it has to deal something with the theme I am using. I am using Hugo Nuo.
You can find the current shape of the blog post here:
https://www.staturk.xyz/post/poll-accuracy-in-turkish-elections/
Here is the beginning of my .rmd file for the post where I am trying to display the code in a frame:
---
title: "Poll Accuracy in Turkish Elections"
date: '2018-12-25'
slug: poll-accuracy-in-turkish-elections
tags:
- Polls
- Politics
- R
categories:
- Turkish Politics
- Rstats
---
```{r, echo=FALSE}
htmltools::includeHTML("~/Documents/Personal/Projects/Blog/Turkstat/content/media/posts/header.html")
```
```{r echo = F, results='hide', message=FALSE}
library(tidyverse)
library(plyr)
library(stringr)
library(scales)
library(knitr)
```

There are two steps here - figuring out what to style and then adding the style to the theme.
Figuring out what to style
Looking at the raw html for the post (ctrl-U in Chrome), the code fragments are wrapped in a <pre class="r"><code>..</code></pre> tag set. So, we could give it a border (for instance) by adding the following to the html header :
<style>
pre.r {
border-style: solid;
border-width: 2px;
}
</style>
Adding to the theme
Looking at the theme code, the best way to accomplish this seems to be to override the head partial in themes/{theme_name}/layouts/partials/head.html. Copy that file up into the the same area of the site folder. The following commands will do the trick if you are on linux:
cd $sitedir
mkdir -p layouts/partials
cp themes/hugo-nuo/layouts/partial/head.html layouts/partial
Then edit the copy of the file to add the above style fragment.

Related

adding a page bundle with `hugo new`

I can add a new page with hugo new posts/new-page. But I want to add a page bundle. None of the following work
hugo new posts/2021/10/new-page creates a single new-page.md
hugo new posts/2021/10/new-page/ does the same as above
hugo new posts/2021/10/new-page/index.md works, kind. It creates index.md in the correct path and populates index.md with the archetypes/default.md except, it set the title to index instead of new page
so, how can I add a page bundle with hugo new
You can achieve that using Archetypes , quoting from the docs:
Since Hugo 0.49 you can use complete directories as archetype templates.
in the archetypes/ folder create a new folder named post-bundle/
inside it create a new file index.md
archetypes/post-bundle/index.md :
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---
Then to create a page bundle:
hugo new --kind post-bundle posts/new-page
Notice: I don't think the approach you're doing to set the date in the url is correct , the above method will give a post with the following Permalink : example.com/posts/new-page you can then do the following to get the desired Permalink:
config.toml :
[permalinks]
posts = '/:year/:month/:title/'
In support of Mossab's answer...
a page bundle has three categories:
Branch,
headless
and leaf.
So if you made a file _index.md - it's a Branch bundle, off-the-bat. So viola that's how you make it with hugo new.
If you want a headless bundle, I believe you first need a leaf bundle, and then add:
headless = true to the front matter.
If you want a lead bundle you create an index.md file at any directory level.
So, I believe my point in this is, the way you do this is:
hugo new _index.md
Or
hugo new index.md
and if you want it headless, you use an archetype with the front matter (as Mossab desribes).
Please let me know if I'm possibly misunderstanding something.

Error in Jimp.loadFont (use load-bmfont module) with React

I am testing Jimp.js for image manipulation (using React with react-scripts, npm: 6.14.4, node: v12.16.3)
Everything is going well except writing text on a loaded image
import Jimp from 'jimp'
Jimp.read(image)
.then(image => {
console.log('image loaded', image)
Jimp.loadFont(Jimp.FONT_SANS_32_WHITE).then(font => {
console.log('font loaded', font)
image.print(font, 10, 10, 'Hello world that wraps!', 12)
// write image
})
})
This throws an error "error parsing font malformed file -- no element" in browser.js of load-bmfont module line 71 and dont execute the log 'font loaded'.
Googling not help i found only 2,3 items about this, associate with using custom fonts - but i use standard font from Jimp. (Using BMFont files instead of Jimp standard fonts doesnt help)
My first thought was the error ocured in a React App in the browser, so i write a Jest test to see if its work without browser context but it fail just like that.
Got any ideas?
Solved...
I'm using the React App within a Java Web Framework in a JSP File.
Jimp.loadFont(Jimp.FONT_SANS_32_WHITE)
search the font in a path that doesn`t exist for the webapp.
Moving the font files to a reachable path with context root
Jimp.loadFont(`${CONTEXT_ROOT}/foo/bar/font.font`) works.

Single page addition to 'singlepage' website not working

I might be asking a stupid question but I've spent days on stackoverflow and git as well as Hugo's official documentation and I've gotten 15 different ways of doing something and nothing seems to work.
I have a 1 page hugo website and I want to add in a privacy policy.
Within the root/config.toml I have the following:
[[params.footer.quicklinks]]
text = "Privacy Policy"
link = "privacypolicy.html"
Within root/content I have a file called privacypolicy.md with the following:
---
title: "Privacy Policy"
type: page
page: "privacypolicy.html"
---
Within root/layout/page I have privacypolicy.html
When I click the link on the core page to go to the privacy policy I get a '404 page not found'
Fix the typo layouts. Put the privacypolicy.html file in root/layouts/page dir.
Create a new page dir and put the privacypolicy.md in root/content/page.
Use Url tag in md file like this:
---
title: "your title"
type: page
Url: page/privacypolicy
---
Your content here...
This will open in your http://baseUrl/page/privacypolicy. Recommended to rerun hugo server and hard refresh(ctrl shift R) web pages.

Copy static files from one Jekyll post to published site

I would like to copy any static file (image, PDF, etc.) found in a post folder inside _posts to the folder in which the HTML version of the post will be, inside _site.
Let's say I have this structure:
_posts/
2016/
06/
09-so-long-cloudflare/
2016-06-09-so-long-cloudflare-and-thanks-for-all-the-fissh.md
cloudflare-logo.png
performance-report-sample.pdf
My Jekyll settings for permalinks are:
# Permalinks
permalink: /:year/:month/:day/:title/
I would like to generate the site like this:
2016/
06/
09/
so-long-cloudflare-and-thanks-for-all-the-fissh/
index.html
cloudflare-logo.png
performance-report-sample.pdf
I've found this plugin that should do this, but I can't make it work. I get this error:
jekyll 3.1.6 | Error: undefined method `name' for #<Jekyll::Document:0x007fb7a0892b50>
Any idea?
Thanks!
Well, despite having no Ruby knowledge, I managed to build a plugin out of this old Gist! \o/
https://nhoizey.github.io/jekyll_post_files/
I hope this will help people with the same needs.

How to add a new hugo static page?

From the "getting started" section it seems this should work, but it doesn't.
hugo new site my-site
hugo new privacy.md
hugo server --watch --includeDrafts
curl -L localhost:1313/privacy/index.html
# 404 page not found
curl -L localhost:1313/privacy.html
# 404 page not found
curl -L localhost:1313/privacy/
# 404 page not found
How can I add a new page?
This is the best tutorial how to create static "landing pages" on Hugo: https://discuss.gohugo.io/t/creating-static-content-that-uses-partials/265/19?u=royston
Basically, you create .md in /content/ with type: "page" in front matter, then create custom layout for it, for example layout: "simple-static" in front matter, then create the layout template in themes/<name>/layouts/page/, for example, simple-static.html. Then, use all partials as usual, and call content from original .md file using {{ .Content }}.
All my static (landing) pages are using this method.
By the way, I'm not using hugo new, I just clone .md file or copy a template into /content/ and open it using my iA Writer text editor. But I'm not using Hugo server either, adapted npm-build-boilerplate is running the server and builds.
Just tested OK with this on Hugo 0.13:
hugo new site my-site
cd my-site
hugo new privacy.md
hugo server -w -D
curl -L localhost:1313/privacy/
Note: You have to either use a theme or provide your own layout template to get something more than a blank page. And of course, some Markdown in privacy.md would also make it even nicer.
See http://gohugo.io/overview/introduction for up-to-date documentation.
I had a similar requirement, to add static page (aboutus in this case). Following steps did the trick,
Created an empty file content/aboutus/_index.md
Created aboutus.html page layouts/section/aboutus.html
Make you have some default frontmatter set in archetypes/default.md
# archetypes/default.md
+++
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
+++
And the single layout in layouts/_default/single.html to render some variable or content
# tags to render markdown content
<h1>{{ .Title }}</h1>
<p>{{ .Content }}</p>
<span>{{ .Params.date }}</span>
Now type hugo new privacy.md which will create a new page on the following directory in content/privacy.md
Take "About" as example:
# will create content/about.md
hugo new about.md
Edit about.md and add the last 2 lines, the metadata/front matter looks like:
title: "About"
date: 2019-03-26
menu: "main"
weight: 50
That should work.

Resources