Franklin.jl icon indicating copy to clipboard operation
Franklin.jl copied to clipboard

Nutshell + Franklin Rough Edges

Open mcognetta opened this issue 3 years ago • 2 comments

Carried over from Slack:

I've been playing with Nutshell after learning about it today: https://ncase.me/nutshell/ it works pretty well with Franklin, but there are a few rough edges that I've noticed. I'll start a thread with an MWE. If someone else could try these out that would be great!

At the bottom is an MWE that shows the few rough edges that I have encountered already. Namely:

  • Can't embed entire other pages from the same site (other sites work ok, which makes me think it's how Franklin produces the HTML headers): [:example][../posts/link_to_post]
  • ~~Some Wikipedia links fail~~ I found this is not caused by Franklin.
  • ~~Some YouTube links fail~~ I found this is not caused by Franklin.

So the only problem that really remains is embedding other pages from the same Franklin site. Embedding sections of other pages works as expected, but embedding the full page fails. Here is an example of what it looks like:

nutshell_franklin_relative_pages


MWE

@def title = "Nutshell + Franklin.jl"

# Nutshell + Franklin.jl

Add the following to your head.html file:

```html
  <script src="https://cdn.jsdelivr.net/gh/ncase/[email protected]/nutshell.min.js"></script>
```
### Relative Links

It does not seem to like embedding a full post from a relative link.

[:INSERT ANOTHER POST'S RELATIVE LINK HERE](<INSERT RELATIVE LINK>)

However, embedding a section from another page seems to work fine.

[:RELATIVE LINK PLUS SECTION](<INSERT RELATIVE LINK>#SECTION)

It looks like the problem is with Franklin's headers, as this works:
[:Nutshell Demo](https://ncase.me/nutshell/)

mcognetta avatar Aug 20 '22 04:08 mcognetta

Opened https://github.com/ncase/nutshell/issues/13 to address the other issues.

mcognetta avatar Aug 20 '22 04:08 mcognetta

I had a quick look today

index.md :

~~~
<script src="https://cdn.jsdelivr.net/gh/ncase/[email protected]/nutshell.min.js"></script>
~~~

Attempt at nutshell

[:nutshell to foo](/foo/)

foo.md

# Foo

This is a post on another page

## Bar

Etc $1+1=2$.

Observed result Screenshot 2022-08-25 at 10 31 52

So I think things work fine; just the relative link needs to be fully specified (/foo/ as opposed to foo).

Observe that the math doesn't work (even if you force hasmath=true on the parent page; I suspect this is to do with how nutshell handles the content; it means that it would not be compatible with maths or likely also highlighted code.

tlienart avatar Aug 25 '22 08:08 tlienart