# Course website boilerplate

**URL:** <https://discourse.julialang.org/t/course-website-boilerplate/59134>\
**Category:** General Usage\
**Tags:** website, franklin\
**Created:** [April 12, 2021, 9:38pm UTC](https://discourse.julialang.org/t/course-website-boilerplate/59134 "2021-04-12T21:38:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kevbonham](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/kevbonham/32/216165_2.png) [@kevbonham](https://discourse.julialang.org/u/kevbonham)\
**Post date:** [April 12, 2021, 9:38pm UTC](https://discourse.julialang.org/t/course-website-boilerplate/59134/1 "2021-04-12T21:38:58Z")

</div>

I’m planning to transition a course website from Documenter to Franklin.jl, which I think will help with a number of things. In particular, I have a bunch of boilerplate that needs to be added to each lesson, assignment, lecture etc, a lot of which is duplicated, and I’m trying to sort out the best way to do this. As an example, [here’s a lesson page](https://wellesley-bisc195.github.io/BISC195.jl/stable/Lessons/Lesson2/), which as you can see has a number of badges with links to different components (lecture, assignment, repository / description) plus things like due dates. Then it has learning objectives and other metadata about the lesson, etc

 ![image](https://global.discourse-cdn.com/julialang/original/3X/8/3/8376fa683c971bee92b3bec38d2d43a7ba2a50b7.png)

A lot of this information is repeated on the [assignment page](https://wellesley-bisc195.github.io/BISC195.jl/stable/Assignments/Assignment02/), and furthermore each lesson has a very similar structure with a number of features that could be minimally specified in a toml file or something.

My hope is to have some series of components where I could specify most of the structure once and swap out variables for each lesson, and in the ideal scenario, have something generic where I could just change a few things and specify different parameters for different course runs. One example of a configuration:

```julia
author = "Kevin Bonham, PhD"

[lessons]

[lessons.lesson1]
title = "Getting Started"
lecture_links = ["lecture01", "lecture02"]
lecture_dates = [2021-06-09, 2021-06-11]
assignment_link = "assignment01"
assignment_due = 2021-06-14

[lessons.lesson2]
title = "Data Types and Functions"
# ... etc

[assignments]

[assignments.assignment01]
# ... etc

```

So I feel like I can accomplish this either with a couple of different html templates, a couple of `hfun`s, or both. And I’m wondering what folks think makes the most sense. I think I’ll end up feeling more comfortable just writing functions since I don’t have much experience making webpages, but are there some advantages to using page templates instead?

---

<div class="post-metadata">

**Author:** ![rikh](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rikh/32/204104_2.png) [@rikh](https://discourse.julialang.org/u/rikh)\
**Post date:** [April 12, 2021, 10:13pm UTC](https://discourse.julialang.org/t/course-website-boilerplate/59134/2 "2021-04-12T22:13:37Z")

</div>

I guess that @tlienart will know the best solution.

My idea would be to convert output from a Franklin code block from Markdown to HTML if possible. With that, I would create a function in the website’s package and call that from within the webpages. The great thing about this is that you can “encode” the configuration in Julia syntax, that is, a **full** generic programming language in contrast to TOML or YAML.

---

<div class="post-metadata">

**Author:** ![tlienart](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tlienart/32/7640_2.png) [@tlienart](https://discourse.julialang.org/u/tlienart)\
**Post date:** [April 13, 2021, 8:59am UTC](https://discourse.julialang.org/t/course-website-boilerplate/59134/3 "2021-04-13T08:59:26Z")

</div>

Yes Franklin can definitely help, here’s one way to do this which I think should address what you’re hoping to do, (1) have a standard outer layout defined in `_layout` as per usual and then for pages do something like

(page `path/to/page.md`):

```nohighlight
+++
lessons = [
  Lesson(title="Getting Started", lecture_links=...)
  Lesson(...)
]
assignments = [
  Assignment(...)
]
+++

# Page title

{{include_lessons}}

{{include_assignments}}

```

In `utils.jl` you’d define the `Lesson` and `Assignment` struct and how the include should work

```julia
using Parameters
@with_kw struct Lesson
    title::String = ""
    lecture_links::Vector{String} = String[]
end
# ...

function hfun_include_lessons()
    lessons = locvar(:lessons)::Vector{Lesson}
    io = IOBuffer()
    for lesson in lessons
        write(io, ...)
    end
    return String(take!(io))
end
# same for hfun_include_assignments

```

in the `write` you can write raw HTML that would correspond to how you want things to look when they’re included. You can also use `fd2html(s, internal=true)` to convert a markdown string `s` to HTML so you don’t have to bother with it.  
Specifically you can do `fd2html(read(other_file, String), internal=true)` to incorporate the HTML corresponding to specific files (e.g. if the `lectures_xxx.md` are separate files).

Maybe give this a shot and ping me from your repo for questions/fine tuning?

---

<div class="post-metadata">

**Author:** ![kevbonham](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/kevbonham/32/216165_2.png) [@kevbonham](https://discourse.julialang.org/u/kevbonham)\
**Post date:** [April 13, 2021, 10:37am UTC](https://discourse.julialang.org/t/course-website-boilerplate/59134/4 "2021-04-13T10:37:24Z")

</div>

Fantastic, thanks! This is a great starting point - I’ll give it a go.