Front Matter with Eleventy

Ed's Blog Index & Contents

Jun 30, 2021 7:00

First attempt, version 1 attempt at 11ty Front Matter

An Eleventy newbie when I did this and it worked well

This Front Matter was at the top of every file in the AHSAA reunion directory

Front Matter version 1

The AHSAA Website has a folder named "reunion"

Inside the reunion directory there is an HTML file for every year from 2001 to the current year. Each of those files contains all the class reunions for that year

Next step. Creat a Json file named reunion.json

Located inside the "reunion" folder. This is a special trigger for Eleventy. Eleventy looks for a Json file named the same name as the folder it occupies. Eleventy will put this Json file into the front matter of every file in that directory automatically when it builds.

It has the following lines which are now pulled into every html file rendered in the reunion folder. This is merged with the front matter in every file inside the directory of the same name which is "reunion"

Reunion.Json created

Next, create a folder _data at the top level of your source files

Which is the default location for Elevnty global data, although, side note, macros do not seem to have access to this global data, the data needs to be passed into macros. Inside the _data folder created another file in the _data fo called reunionsHeldini.js and it holds one multidimensional array of arrays

// When using .js global data files,you have the option to export an object or a function using module.exports. If you have worked w modules before or have exposed the public API of a Node package on npm,your probably familiar with exporting. Whatever is exported from a .js global data file is globally accessible anywhere in your project just as it would with JSON
// you can add any class reunion below. This is a global multidimensional array of arrays
module.exports = {
[2001]: [1951,1956,1961,1966,1971,1976,1981,1991],
[2002]: [1942,1972,1977,1982,1992,"Walker","Holiday"],
[2003]: [1943,1953,1968,1973,1977,1983,1993,1998,"Holiday"],
[2004]: [1944,1949,1954,1964,1974,1984,1994,"Golf","Holiday"],
[2005]: [1940,1955,1960,1965,1970,1980,1985,1995,"Roosevelt","Golf","Holiday"],
[2006]: ["1946-1945",1951,1954,1956,1960,1961,1966,1976,1981,1986,1996,"Walker","Golf","Holiday"],
[2007]: [1942,1947,1955,1957,1963,1967,1972,1977,1982,1987,1997,"Holiday"],
[2008]: ["1943-1944",1948,1953,1958,1978,1988,1998,"Holiday"],
[2009]: [1949,1954,1956,1959,1964,1969,1979,1984,1989,1999,"Holiday"],
[2010]: [1950,1955,1960,1963,1965,1970,1975,1980,1985,1990,2000,"Lincoln","Walker","Holiday"],
[2011]: [1951,1956,1961,1966,1971,1976,1981,1986,1991,2001,"Holiday"],
[2012]: [1942,1952,1954,1957,1962,1967,1972,1977,1982,1992,2002,"Holiday"],
[2013]: [1948,1953,1958,1963,1968,1973,1983,1988,1993,2003,"Holiday"],
[2014]: ["1943-1944-1945",1954,1959,1964,1974,1979,1984,1989,1994,"Holiday"],
[2015]: [1950,1955,1960,1965,1975,1980,1985,2005,"Holiday"],
[2016]: [1956,1961,1966,1976,1986,1996,2006,"Holiday"],
[2017]: [1952,1957,1962,1967,1972,1977,1982,1987,1992,1997,2002,2007,"Holiday"],
[2018]: [1954,1958,1963,1968,1973,1978,1983,1988,1993,1998,2003,2008,"Holiday"],
[2019]: [1959,1964,1969,1974,1979,1984,1989,1994,1999,2004,2009,"Holiday"],
[2020]: [1960,1970,1975,1980,"Holiday"],
[2021]: [1966,1970,1976,1981,1986,"Holiday"],
[2022]: [1966,1981,"Holiday"]

Because of the Json file above above, the front matter in every html file in the "reunion" folder can be reduced and super simplified to:

thisreunionYear: 2018
templateEngineOverride: njk  # use templateEngineOverride if you want render both HTML and nunjuck from the same template