Jekyll home page corruption on github - jekyll

I have a simple Jekyll web site. It works as expected on the local server, but when uploaded to github it displays differently. I am guessing that this is because bundle exec jekyll serve behaves differently on github.
This is the way it looks on the local server (I'm using the theme minima)
and on github
The extra links in the menu-bar all point to pages on the website
index.md
---
layout: home
---
Welcome to the Psionman Set. This is a series of lessons that I wrote to help me get to grips with some new (to me) technology.
(Some were done for my private use, but you can read them).
[Wx Python from scratch]({{ site.baseurl }}{% link wx_python/wxpython_from_scratch.md %})
And the tree on the local server
.
├── 404.html
├── about.markdown
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
├── _site
│   ├── 404.html
│   ├── about
│   │   └── index.html
│   ├── assets
│   │   ├── main.css
│   │   ├── main.css.map
│   │   └── minima-social-icons.svg
│   ├── feed.xml
│   ├── index.html
│   └── wx_python
│   ├── images
│   │   ├── basic_frame.png
│   │   ├── datepicker.png
│   ├── introduction.html
│   ├── post01.html
│   ├── post02.html
│   ├── post03.html
│   ├── post04.html
│   ├── snippets
│   │   ├── basic_frame.py
│   │   ├── basic_panel.py
│   └── wxpython_from_scratch.html
└── wx_python
├── images
│   ├── basic_frame.png
│   ├── datepicker.png
├── introduction.md
├── post01.md
├── post02.md
├── snippets
│   ├── basic_frame.py
│   ├── basic_panel.py
└── wxpython_from_scratch.md
[EDIT]
It seems that the items in the menu-bar are created form a heading in the md file
## WxPython from Scratch
Github seems to pick up the first heading and place that in the menu-bar
Can someone please show me how to suppress these?

Dumped Jekyll in favour of Sphinx on Netlify

Related

Converting multiple Markdown files with multiple CSS files to PDF as one single page, using wkhtmltopdf and Pandoc

My trainings were inspired by the following (one of the questions didn't work):
Using CSS when converting Markdown to PDF with Pandoc
How to convert Markdown + CSS -> PDF?
How to compile all .md files in a directory into a single .pdf with pandoc, while preserving YAML header data?
And the tutorial:
Converting Markdown to Beautiful PDF with Pandoc
My platform:
Endeavour OS (derived of Arch Linux)
KDE Plasma
MikTeX
Terminator
I have Lua installed.
My goal is to:
convert multiple Markdown to one single PDF page (not multiple PDF pages)
include multiple CSS files;
use LaTeX macros (for example: $\LaTeX$ on Markdown file)
to preserve YAML header data
I tried to run the command:
$ cd diários
$ pandoc -s \
# Because of few LaTeX macros on one Markdown file
-f markdown \
# I need to use HTML 5, but the result warned it is not compatible with the format output (xelatex)
-t html5 \
# Accoridng to https://jdhao.github.io/2019/05/30/markdown2pdf_pandoc/
--pdf-engine=xelatex \
--self-contained \
# Multiple CSS files
--css ../assets/css/colours.css,../assets/css/fonts.css,../assets/css/global.css \
# To preserve YAML data
--lua-filter=../scripts/demote.lua \
# Multiple Markdown files
-V geometry:margin=1in \
*.md \
# Output as PDF
-o combined.pdf
Tree
.
├── assets
│   ├── css
│   │   ├── colours.css
│   │   ├── fonts.css
│   │   ├── global.css
│   ├── fonts
│   │   ├── Latin Modern
│   │   │   ├── LM-bold-italic.woff
│   │   │   ├── LM-bold-italic.woff2
│   │   │   ├── LM-bold.woff
│   │   │   ├── LM-bold.woff2
│   │   │   ├── LM-italic.woff
│   │   │   ├── LM-italic.woff2
│   │   │   ├── LM-regular.woff
│   │   │   └── LM-regular.woff2
│   │  
│   ├── images
│   │   ├── 2021-12-27-camiseta-do-hackathon-do-itau.jpeg
│   │   ├── emojis
│   │   │   ├── 32
│   │   │   │   ├── 1-emoji-excited.png
│   │   │   │   ├── 2-emoji-happy.png
│   │   │   │   ├── 3-emoji-neutral.png
│   │   │   │   ├── 4-emoji-sad.png
│   │   │   │   └── 5-emoji-down.png
│   ├── videos
│   │   └── 2021-12-27 – Comboio no temrinal em dois monitores.mp4
├── diários
│   ├── 2021-05-28.md
│   ├── 2021-12-25.md
│   ├── 2021-12-26.md
│   ├── 2021-12-27.md
│   ├── 2021-12-28.md
│   ├── 2021-12-29.md
│   ├── 2021-12-30.md
│   ├── 2021-12-31.md
│   ├── 2022-01-01.md
│   ├── 2022-01-02.md
│   ├── 2022-01-03.md
│   ├── 2022-01-04.md
│   ├── 2022-01-05.md
│   ├── 2022-01-06.md
│   ├── 2022-01-07.md
│   ├── 2022-01-10.md
│   ├── 2022-01-11.md
├── scripts
│   └── demote.lua
Errors
pdf-engine xelatex is not compatible with output format html5
And with -t html5, another error:
Error running filter ../scripts/demote.lua:
[string "--[[..."]:227: Constructor for Header failed: [string "--[[..."]:258: attempt to index a nil value (local 'x')
stack traceback:
[C]: in function 'error'
[string "--[[..."]:227: in field 'Header'
../scripts/demote.lua:11: in function 'Pandoc'
With --lua-filter=../scripts/demote.lua removed, it almost worked, but it did not capture the CSS files. I believe the problem is in the pdf-engine=xelatex.

Uploading a photo to a page in Jekyll html

I have a base jekyll directory which looks like this:
├── 404.html
├── about.markdown
├── assets
│   └── img
│   ├── mapcolor360_dbc.png
│   └── SileHuPortrait.jpg
├── _config.yml
├── favicon.ico
├── Gemfile
├── Gemfile.lock
├── group-members.html
├── _includes
│   └── footer.html
├── index.markdown
├── _layouts
├── media.md
├── openings.md
├── _posts
│   └── 2019-12-18-welcome-to-jekyll.markdown
├── publications.md
├── research.html
├── research.md
├── _sass
│   └── _variables.scss
├── _site
│   ├── 404.html
│   ├── about
│   │   └── index.html
│   ├── assets
│   │   ├── img
│   │   │   ├── mapcolor360_dbc.png
│   │   │   └── SileHuPortrait.jpg
│   │   └── style.css
│   ├── favicon.ico
│   ├── feed.xml
│   ├── group-members
│   │   └── index.html
│   ├── index.html
│   ├── jekyll
│   │   └── update
│   │   └── 2019
│   │   └── 12
│   │   └── 18
│   │   └── welcome-to-jekyll.html
│   ├── media
│   │   └── index.html
│   ├── openings
│   │   └── index.html
│   ├── publications
│   │   └── index.html
│   ├── research
│   │   └── index.html
│   └── software
│   └── index.html
└── software.md
And I want to upload a photo to the group-members page, using this line in the group-members.html file:
<img src="/home/sam/Dropbox/Documents/PhD/hellenthal-group/assets/img/SileHuPortrait.jpg">
The image definitely exists in the directory, but when I try to compile the site with bundle exec jekyll serve
It returns the error
[2020-03-20 19:36:13] ERROR `/home/sam/Dropbox/Documents/PhD/hellenthal-group/assets/img/SileHuPortrait.jpg' not found.
And the image appears as broken. Can anyone help me with this issue?
I see that SileHuPortrait.jpg is actually inside <source>/assets/img based on your directory structure.
When Jekyll builds your site, the URLs generated are assumed to be used with a web-server.
So when you have a reference like /home/sam/Dropbox/Documents/.., the webserver is looking for /home/sam/Dropbox/Documents/.. relative to your destination directory (which is the _site folder).
The error you're seeing is because the physical path /home/sam/Dropbox/Documents/PhD/hellenthal-group/_site/home/sam/Dropbox/Documents/PhD/hellenthal-group/assets/img/SileHuPortrait.jpg
doesn't exist.
The correct usage would therefore be:
<img src="/assets/img/SileHuPortrait.jpg">
(Note the leading slash)
The above while correct, isn't flexible to automatically adapt when you set baseurl: in the config file.
So, the final solution is to use the relative_url Liquid filter:
<img src="{{ 'assets/img/SileHuPortrait.jpg' | relative_url }}">

Polymer bundler does not output node_modules folder with custom bundles

Using polymer-cli 1.7.7, bundling a Polymer 3 app for esm, es6 and es5 support does not output node_modules. As a consequence, dependencies such as #webcomponents/webcomponentsjs are not found when the bundles are served with prpl-server.
Here is a small example for reproduction:
https://github.com/lpellegr/polymer-bundler-bundle-issue
This example is based on the original polymer 3 app template generated by polymer-cli init. The configuration file polymer.json has been edited to generate esm, es6 and es5 bundles as suggested on the following resource:
https://polymer.github.io/pwa-starter-kit/building-and-deploying/
If you run polymer build, the output directory does not contain include a node_modules directory and thus not the JavaScript file for webcomponentjs:
build/
├── es5-bundled
│   ├── index.html
│   ├── push-manifest.json
│   ├── service-worker.js
│   └── src
│   └── _element
│   └── _element.js
├── es6-bundled
│   ├── index.html
│   ├── push-manifest.json
│   ├── service-worker.js
│   └── src
│   └── _element
│   └── _element.js
├── esm-bundled
│   ├── index.html
│   ├── push-manifest.json
│   ├── service-worker.js
│   └── src
│   └── _element
│   └── _element.js
└── polymer.json
If you remove the builds option from polymer.json (thus reverting to the default template), then all looks good, the right node_modules folder is outputted:
build/ └── default
├── index.html
├── node_modules
│   ├── #polymer
│   │   └── polymer
│   │   ├── lib
│   │   │   ├── elements
│   │   │   │   └── dom-module.js
│   │   │   ├── mixins
│   │   │   │   ├── element-mixin.js
│   │   │   │   ├── properties-changed.js
│   │   │   │   ├── properties-mixin.js
│   │   │   │   ├── property-accessors.js
│   │   │   │   ├── property-effects.js
│   │   │   │   └── template-stamp.js
│   │   │   └── utils
│   │   │   ├── async.js
│   │   │   ├── boot.js
│   │   │   ├── case-map.js
│   │   │   ├── html-tag.js
│   │   │   ├── mixin.js
│   │   │   ├── path.js
│   │   │   ├── resolve-url.js
│   │   │   ├── settings.js
│   │   │   └── style-gather.js
│   │   └── polymer-element.js
│   └── #webcomponents
│   └── webcomponentsjs
│   └── webcomponents-loader.js
└── src
├── _element
│   └── _element.js
└── test-app
└── test-app.js
Is there something wrong with my polymer.json? Is it a bug with polymer-bundler?
Your polymer.json file doesn't include the information that the Polymer CLI uses to decide what to include in the build.
Adding the missing lines as per the PWA Starter Kit makes it work, for example:
"entrypoint": "index.html",
"extraDependencies": [
"node_modules/#webcomponents/webcomponentsjs/**"
],

How do I get Lazybones to process sub-templates?

Playing with Lazybones for the first time. I've put together a simple project which attempts to include a single sub-template.
Here is the project structure:
.
├── build.gradle
├── gradlew
├── gradlew.bat
├── README.md
└── templates
├── groovy-lambda
│   ├── build.gradle
│   ├── lazybones.groovy
│   ├── README.md
│   ├── src
│   │   ├── main
│   │   │   ├── groovy
│   │   │   │   └── .retain
│   │   │   └── resources
│   │   │   └── .retain
│   │   └── test
│   │   ├── groovy
│   │   │   └── .retain
│   │   └── resources
│   │   └── .retain
│   └── VERSION
└── subtmpl-groovy-lambda-main-class
├── GroovyLambdaMainClass.groovy
├── lazybones.groovy
└── VERSION
And I'm including the sub-template like so
lazybones {
template "groovy-lambda" includes "groovy-lambda-main-class"
}
The sub-template gets packaged in the main artefact archive:
.
├── build.gradle
├── .lazybones
│   ├── groovy-lambda-main-class-template-1.0-SNAPSHOT.zip
│   └── stored-params.properties
├── README.md
└── src
├── main
│   ├── groovy
│   └── resources
└── test
├── groovy
└── resources
However the sub-template never gets processed at template execution time i.e. the sub-templates lazybones.groovy script doesn't seem to get run.
The whole project is available here on GitHub. To reproduce the issue do:
git#github.com:eddgrant/lazybones-template-aws-groovy-lambda.git
cd lazybones-template-aws-groovy-lambda.git
./gradlew installAllTemplates
cd /tmp
lazybones --verbose create groovy-lambda 1.0-SNAPSHOT groovy-lambda
I'm probably missing something trivial but can't quite figure it out. Most grateful for any pointers.
Everything is working as expected. Sub templates are only used by the lazybones generate command, which in turn works only once you have created a Lazybones-based project.
The classic example is something like a Grails or Rails project in which you would use the generate command to create new controllers or domain classes.

How can I get HTML reports that I host on Github Pages to link to stylesheets in another directory?

I'm trying to create a set of project pages using Github Pages. My main page is a copy of my project's README, which I generated through Github's auto-page generator. Under Project Health Metrics, I link to two HTML reports: one is a CodeNarc report (at health/codenarc/main.html) and the other is a Jacoco report (at health/jacoco/index.html).
The CodeNarc report renders fine, but the Jacoco report doesn't as it's not able to load the stylesheet and other resources kept in another directory. I'm keeping everything on a gh-pages branch with a directory structure that looks like this:
.
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _site
├── bin
├── build
├── build.gradle
├── config
├── docs
├── gradle.properties
├── health
├── images
├── index.html
├── javascripts
├── params.json
├── src
└── stylesheets
My health directory tree appears like this:
health
├── codenarc
│   ├── integrationTest.html
│   ├── main.html
│   └── test.html
├── html
│   └── projectHealth.html
└── jacoco
├── .resources
│   ├── branchfc.gif
│   ├── branchnc.gif
│   ├── branchpc.gif
│   ├── bundle.gif
│   ├── class.gif
│   ├── down.gif
│   ├── greenbar.gif
│   ├── group.gif
│   ├── method.gif
│   ├── package.gif
│   ├── prettify.css
│   ├── prettify.js
│   ├── redbar.gif
│   ├── report.css
│   ├── report.gif
│   ├── session.gif
│   ├── sort.gif
│   ├── sort.js
│   ├── source.gif
│   └── up.gif
├── .sessions.html
├── com.github.tagc.semver
│   ├── SemVerPlugin$_apply_closure1.html
│   ├── SemVerPlugin.groovy.html
│   ├── SemVerPlugin.html
│   ├── SemVerPluginExtension.groovy.html
│   ├── SemVerPluginExtension.html
│   ├── Version$Builder.html
│   ├── Version$Category.html
│   ├── Version$Parser.html
│   ├── Version.groovy.html
│   ├── Version.html
│   ├── index.html
│   └── index.source.html
└── index.html
If it helps, you can explore the tree and check out all the files from my Github repository.
I would like the Jacoco report to be able to access the resources in the .resources folder under health/jacoco, but it doesn't seem able to and I'm not quite sure why. I've tried playing around with this a lot on a private instance running on localhost through Jekyll.
Problem solved, thanks to help from some people in IRC and a lot of playing around.
Jekyll ignores any folders that are hidden (e.g. prepended with a dot or underscore), so it wasn't processing health/jacoco/.resources.
I got around this issue by including include: ['.resources'] in _config.yml. Don't forget to push this file to the remote gh-pages branch on Github, as Github uses this to determine what it processes as well.
The Jacoco report now renders properly because it can access the stylesheets and other resources it depends on.