gschare commented 2 years ago

We need a template for what the new navigable index pages should be.

I think we can keep this quite simply, and essentially just have:

link to home
"take me back" link which just goes up one directory (e.g. from specific person's list of fieldnotes to list of students in that semester)
list of files in the directory (or for directory of directories, link to the index files within each directory)

Let me know if anything else should be added.

njr2128 commented 2 years ago

Semester

M&K has taught the Lab Seminar, GU8906: Craft and Science: Making Objects in the Early Modern World since 2014 with each semester organized around a different theme. Students undertake hands-on work in the laboratory while keeping hybrid lab/field notes, resulting in the pages archived here. They include notes for skill-building exercises as well as their original research towards an annotation (what then became the Research Essays of Secrets of Craft and Nature)

type

student

pages

Bullet list of items in current directory distinguish between file and directory
Back to home
Breadcrumbs (link back to next level up)
Need title AND heading (h1) which are the same

Actions:

Names for listed items should be expanded - identify what the reader-friendly form is from file name (e.g., sp = Spring; sp15 = Spring 2015; fld = Field Notes; ann = Annotation Field Notes)
boilerplate descriptions for each directory (text TBD)
change original index pages (created by students) to a page clearly labeled as "original, student, defunct"

Example of deepest directory:

<html>
<head>
    <title>Fieldnotes Spring 2022 | Gregory Schare</title>
</head>

<body>
    <p><a href="/home.html">&lt;- home</a>
    <br/>
    <a href="/sp22/fld/index.html">&lt;- back to Spring 2022 Fieldnotes</a></p>
    <p/>
    <p>
    <h2>
    <ul>
        <li><a href="https://google.com">Making Varnish</a></li>
        <li><a href="https://google.com">Excellent Mustard</a></li>
        <li><a href="https://google.com">I was on the MKP Digital Team. This is my story.</a></li>
    </ul>
    </h2>
    </p>
</body>
</html>

njr2128 commented 2 years ago

We need content (descriptions of what these are) for the following types pages:

"home" page
semesters
types (field notes, profiles, annotations)
student descriptions?

e.g., the home page would be whatever landing page, contextual BLAH we want to say e.g., semester would have descriptions about the theme and what the course did

@gschare please provide structure for this content for me to fill in

gschare commented 2 years ago

I am going off of what I did for Columbia Space Initiative, which uses Jekyll, and for the issue tracker archive, which uses pandoc templating.

A template for a type of page (e.g. semester, field notes) will look rather like this: https://github.com/columbiaspace/columbiaspace.org/blob/master/_includes/mission.html

There is also the content which will be written mostly by Naomi and substituted into the template to form a complete, statically-generated HTML file. That is technically an HTML file but it will mostly consist of YAML headers specifying what the variables will be substituted with. Here is an example of that which gets inserted into the above template: https://github.com/columbiaspace/columbiaspace.org/blob/master/missions/mission-spocs.html

gschare commented 2 years ago

Template

A template is a single HTML file kept in a special folder in the repo which describes how a class of files should be formatted. It includes variables which, during generation, are filled in with values. Here, the variables are enclosed in $.

For example, the template for a student's index of fieldnotes in a given semester looks something like this:

fieldnote.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="">
    <title>$student$ Fieldnotes | $fullsemester$</title>
</head>
<body>
    <h1>$student$ Fieldnotes | $fullsemester$</h1>
    <p>$intro$</p>
    <br>
    <ul>
    $for(pages)$
        <li><b><a href="$it.link$">$it.title$.</a></b> $it.desc$</li>
    $endfor$
    </ul>
</body>
</html>

YAML metadata

Technically a Markdown file, but the most important thing is the YAML header at the top which details the content for each variable in the template.

There is a one-to-one correspondence between these files and the files that get generated at the end. So, we will need one of these "content files" for each of the files we want to generate.

For example, Nina Elizondo-Garza's content might look something like this:

index.md

---
title: "Nina Elizondo-Garza Fieldnotes"
template: fieldnote
semester: "fa17"
fullsemester: "Fall 2017"
student: "Nina Elizondo-Garza"

intro: "Nina is a person. She was born at a very young age."

pages:
  - title: "Historical Culinary Reconstruction"
    link: "fa17_fld_elizondo-garza_nina_hcr.html"
    desc: ""
  - title: "Verdigris Experiment"
    link: "fa17_fld_elizondo-garza_nina_verdigris-experiment.html"
    desc: ""
  - title: "An Exploration of Bread Making"
    link: "fa17_fld_elizondo-garza_nina_an-exploration-of-bread-making.html"
    desc: ""
  - title: "From Madder Root to Madder Lake"
    link: "fa17_fld_elizondo-garza_nina_from-madder-root-to-madder-lake.html"
    desc: ""
  - title: "Azurite"
    link: "fa17_fld_elizondo-garza_nina_azurite.html"
    desc: ""
  - title: "Flour Stucco and Paste Glue"
    link: "../dongchung_tenzin/fa17_fld_dongchung_tenzin_stucco.html"
    desc: ""
  - title: "Annotation Plans"
    link: "../../ann/stucco_elizono-garza/fa17_ann_stucco_elizondo-garza_annotation-plans.html"
    desc: ""
  - title: "Stucco Annotation Fieldnotes"
    link: "../../ann/stucco_elizono-garza/fa17_ann_stucco_elizondo-garza-stucco-fol-29r-1.html"
    desc: ""
  - title: "Stucco Annotation - Painting Stucco"
    link: "../../ann/stucco_elizono-garza/fa17_ann_stucco_elizondo-garza_stucco-annotation-painting-stucco.html"
    desc: ""
---

Pandoc command

To generate the file corresponding to the index.md for Nina above, use this:

pandoc -s -o index.html --template fieldnote.html index.md

This will generate a file called index.html which looks just like fieldnote.html, but the variables will be filled in with the content from index.md.

CSS/stylesheets

I am still figuring this out. Should be trivial to add it to the template and/or incantation.

gschare commented 2 years ago

thanks arthur

https://www.arthurkoziel.com/convert-md-to-html-pandoc/

gschare commented 2 years ago

Next steps:

I make templates for the other types of files
tweak the templates to be perfect
@njr2128 and me create the content files (index.md) for every folder in the repo
create a shell script to auto-generate all of the files

gschare commented 2 years ago

Templates and all index.md files have been created, as of 8225f739.

It remains to add content for index.md files and adjust templates until we like how it looks.

njr2128 commented 2 years ago

This is now continued in #25

cu-mkp / fieldnotes-content

templating for index pages #21

Semester

type

student

pages

Template

fieldnote.html

YAML metadata

index.md

Pandoc command

CSS/stylesheets

Next steps: