Giter VIP home page Giter VIP logo

franklintemplates.jl's Introduction

Franklin Templates

Templates for Franklin, the static-site generator in Julia.

Most of these templates are adapted from existing, popular templates with minor modifications to accommodate Franklin's content.

NOTE: these templates should be seen as starting points, they are far from perfect. PRs to help improve them will be very welcome, thanks! Most importantly they are designed to be simple to adjust to your needs.

List of templates

Get an idea for which template you like using this preview. The grid below keeps track of their name, license, the kind of navbar they have and whether they require Javascript.

Name Source License Navbar JS
"sandbox" N/A MIT N/A No
"sandbox-extended" N/A MIT N/A No
"basic" N/A MIT Top No
"jemdoc" jemdoc N/A Side No
"hypertext" grav theme hypertext MIT Top No
"pure-sm" pure css Yahoo BSD Side No
"vela" grav theme vela MIT Side (collapsable) Yes
"tufte" Tufte CSS, and a bit of Lawler.io for the menu both MIT Side No
"hyde" Hyde MIT Side No
"lanyon" Lanyon MIT Side (collapsable) No
"just-the-docs" Just the docs MIT Side/Top No
"minimal-mistakes" Minimal mistakes MIT Side/Top No
"celeste" Celeste MIT Top No
"bootstrap5" Bootstrap5 MIT Top No

Modifying or adding a template

The package contains a few utils to make it easier to modify or add templates. Now if it was just a bunch of fixes to an existing template, you can just push those changes to your fork and open a PR. If it's a new template that you're working on, you can also do that but there's a few extra things you need to do:

  1. in FranklinTemplates/src/FranklinTemplates.jl add the name of your template in the list
  2. in FranklinTemplates/docs/make.jl add the name of your template with a description in the list
  3. in FranklinTemplates/docs/thumb add a screenshot of your template in png format with exactly an 850x850 dimension
  4. in FranklinTemplates/docs/index_head.html add a CSS block following the other examples

To locally see changes quickly, use Changing a single template. To change all templates at the same time, use Changing multiple templates.

Changing a single template

  1. clone a fork of this package wherever you usually do things, typically ~/.julia/dev/
  2. checkout the package in development mode with ] dev FranklinTemplates
  3. cd to a sensible workspace and do one of
    1. using FranklinTemplates; newsite("newTemplate") to start working on newTemplate more or less from scratch,
    2. using FranklinTemplates; newsite("newTemplate", template="jemdoc") to start working on newTemplate using some other template as starting point,
    3. using FranklinTemplates; modify("jemdoc") to quickly start working on an existing template in order to fix it.
  4. change things, fix things, etc.
  5. bring your changes into your fork with addtemplate("path/to/your/work")
    1. if the template doesn't exist, it will just add the folder removing things that are duplicate from templates/common/.
    2. if the template exists, it will just adjust what needs to be adjusted.

Changing multiple templates

  1. clone a fork of this package wherever you usually do things, typically ~/.julia/dev/
  2. checkout the package in development mode with ] dev FranklinTemplates
  3. start serving the preview website with using FranklinTemplates; FranklinTemplates.serve_templates()

Thanks!!

Misc

  • Current version of KaTeX: 0.16.0
  • Current version of highlight: 11.5.1 (with css, C, C++, yaml, bash, ini,TOML, markdown, html,xml, r, julia, julia-repl, plaintext, python and the minified github theme).
  • Current version of Plotly (used in sandbox-extended): 1.58.4

Notes

This package contains a copy of the relevant KaTeX files and highlight.js files;

  • the KaTeX files are basically provided "as is", completely unmodified; you could download your own version of the files from the original repo and replace the files in _libs/katex,
  • the Highlight.js files are essentially provided "as is" for a set of languages, there is a small modification in the highlight.pack.js file to highlight julia shell and pkg prompt (see next section). You can also download your own version of files from the original source where you might want to
    • specify languages you want to highlight if other than the default list above
    • specify the "style" (we use github but you could use another sheet)

Note: in Franklin's optimize pass, by default the full library highlight.js is called to pre-render highlighting; this bypasses the highlight.pack.js file and, in particular, supports highlighting for all languages. In other words, the highlight.pack.js file is relevant only when you preview your site locally with serve() or if you don't intend to apply the prerendering step.

Maintenance

  • if update highlight.min.js, look for julia>, and replace with something like
{name:"Julia REPL",contains:[{className:"meta.prompt",begin:/^julia>/,relevance:10,starts:{end:/^(?![ ]{6})/,
subLanguage:"julia"}},{className:"meta.pkg",begin:/^\(.*\) pkg>/,relevance:10,starts:{end:/^(?![ ]{6})/,
subLanguage:"julia"}},{className:"meta.shell",begin:/^shell>/,relevance:10,starts:{end:/^(?![ ]{6})/,
subLanguage:"julia"}}],aliases:["jldoctest"]}

(copying the case for julia and adding a case for pkg and for shell, see also the CSS for .hljs-meta.pkg_ etc.)

  • for testing all layouts jointly (you'll need to have PlotlyJS and Hyperscript installed)

Testing before release

include("docs/make.jl")
import LiveServer
LiveServer.serve(dir="docs/build")
  • check that all templates have a thumbnail
  • check that in basic - more goodies, the shell, pkg and julia prompts are highlighted properly (in case of update of highlight)
  • check that math displays properly (in case of update of katex)

franklintemplates.jl's People

Contributors

abelsiqueira avatar chasingzenith avatar dilumaluthge avatar fbanning avatar fredrikekre avatar juliatagbot avatar kdheepak avatar kellertuer avatar mcognetta avatar otwn avatar randyzwitch avatar rikhuijzer avatar terasakisatoshi avatar tlienart avatar tlnagy avatar wikunia avatar zlatanvasovic avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

franklintemplates.jl's Issues

Pure-sm layout fix

Beyond given width, fix the left margin so that you don't end up with the judoc content centered in a sea of white.

Screen Shot 2019-05-03 at 6 24 26 pm

src/index.md is read-only

I just run newsite("blegat") and the index.md and config.md are read-only, is that expected ?

$ ll
total 40K
drwxr-xr-x 5 blegat users 4.0K Oct 11 11:10 assets
drwxr-xr-x 2 blegat users 4.0K Oct 11 11:10 css
-rw-r--r-- 1 blegat users 2.1K Oct 11 11:10 feed.xml
-rw-r--r-- 1 blegat users  14K Oct 11 11:10 index.html
drwxr-xr-x 4 blegat users 4.0K Oct 11 11:09 libs
drwxr-xr-x 2 blegat users 4.0K Oct 11 11:10 pub
drwxr-xr-x 5 blegat users 4.0K Oct 11 11:09 src
$ cd src 
$ ll
total 28K
-r--r--r-- 1 blegat users  780 Oct 11 11:09 config.md
drwxr-xr-x 2 blegat users 4.0K Oct 11 11:09 _css
drwxr-xr-x 2 blegat users 4.0K Oct 11 11:09 _html_parts
-r--r--r-- 1 blegat users 8.3K Oct 11 11:09 index.md
drwxr-xr-x 2 blegat users 4.0K Oct 11 11:09 pages

I would expect to have -rw... instead of -r-... for index.md and config.md.

julia> versioninfo()
Julia Version 1.2.0
Commit c6da87ff4b (2019-08-20 00:03 UTC)
Platform Info:
  OS: Linux (x86_64-pc-linux-gnu)
  CPU: Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  WORD_SIZE: 64
  LIBM: libopenlibm
  LLVM: libLLVM-6.0.1 (ORCJIT, skylake)

merge folders bug on windows

...

Seeing

ERROR: PCRE compilation error: unknown property name after \P or \p at offset 33

stack trace seems to show

mergefolders # 73

which is the line

newpath = replace(root, Regex("^$src")=>"$dst")

need to investigate what's causing the problem whether it's

  • the Regex declaration that fails
  • the replace that fails

[v0.3] list

done

  • fix #10 (issue with tufte in safari under resizing)
  • added Jemdoc #15
  • added a sandbox template that can be used as a playground to test / practice judoc syntax.

Other base templates

Most in line with the philosophy

Secondary

GIT (1/2)

It's a bit of a slow beast though so might need some slimming. However the search thing is potentially nice. The buttons to navigate to next page may be nice too.

also https://learn.getgrav.org/15

twenty fifteen

(may require some work to get the archival stuff, could remove it to begin with)

striped

essentially the same as 2015

saturn

HPSTR

the one page design is a bit shit but some people may like it (the hamburger menu is nice)

Cacti

nice and clean

Tivka

does not seem responsive.


Comment from Jonas

GIT (1/2): a bit "crowded", and obviously intended for linear courses (with the prominent forward/backward arrows). Do we really need that?
twenty fifteen: very nice and clean. If it's not too much work, would be a great addition!
striped: don't see anything special in this one, and personally don't like the looks...
saturn: looks nice, and definitely different than "all the others". +1
HPSTR: I agree, no structure at all probably does not suit our use case
Cacti: like it, but isn't it quite similar to the pure-sm?
Tivka: nothing special IMHO

Steal template from Vue.js

It's built with Hexo; quite neat, for instance code boxes are cool.

For documentation / tutorials it'd be pretty good.

Towards next release

  • add and test a bit the just the docs template
    • consider adding a lunr searchbox to it
    • fix the header in narrow mode, the clickable part is not right
  • finish and test the minimal mistakes theme

Add keyword project true/false

And set the deploy and prepath accordingly.

Need to add more comments in the config.md to say what global var are used where.

SVG not showing properly on Chrome / Safari (sometimes)

Basically the object element will do a better job than the img one. Should do this at convert_html time.

something like

<img src="assets/scripts/output/script2.svg" id="judoc-out-plot"/>

should be replaced by

<object data="assets/scripts/output/script2.svg" type="image/svg+xml"/>

There are two spots where this should be done

  1. in resolve_input_plotoutput where a different behaviour should be applied upon seeing a .svg
  2. either in convert_md or convert_html. In the former we should find `

Note: should document this somewhere...


Need some more tests. Of course it works fine on FF. Check on Safari.

not sure what the issue is but might require a warning in JuDoc that folks should be using PNG or if they use SVG that they should use another insert method than ![]... ?

JTD around 50rem

the menu disappears, needs to have one of the min/max to 49.99rem and the other one `50

(thanks to Guillaume for the heads up)

Waterfall theme for blogger

Hi,

really appreciate the work being down here. I once put together a barebone SSG using Mustache.jl and Weave.jl only to realize the work of JuDoc.

The templates we currently have feel more for docs than for blog posts? As there's no continuous way of going through all the posts (?). An example of waterfall design: https://spreadprivacy.com/

Add GR.jl example in sandbox extended

@def title = "GR.jl"

using GR
using LaTeXStrings
GR.inline("mov")
x = collect(0:0.01:2*pi)
for i = 1:100
    GR.plot(x, sin.(x .+ i / 10.0), size=(400,300))
end

s = GR.show()
# render HTML # hide
println("~~~") # hide
println(s.s) # hide 
println("~~~") #hide
\textoutput{gr}

Reorg folder

The main goal should be that editing / adding a new template be made as easy as possible; a secondary nice goal would be that it has a natural folder structure but I care somewhat less about that as people are not really expected to read through this repo.

Functionality that should be added:

  • make it easier to work on a new template and then just merge what needs to be merged.

it should be something like newtemplate(from_path) which would add relevant documents at the right places of pathof(FranklinTemplates). If the template exists, this would overwrite or something; there should be a check that it doesn't overwrite one of the standard one;

  • make it easier to PR

basically the user should only provide a description and a screenshot that meets some requirements and that's it.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.