WARNING (Feb 17, 2021) This repository is being constructed in preparation for my talk on Feb. 26. Please expect things to change. In particular, the git history is still being pruned so git pull may fail in future.

NOTE: This code has mostly been extracted from a real assignment I use in my own Digital History class. Please feel free to experiment with the code as you wish, either here or there.

By now you know the routine:

• fire up VS Code
• make sure you've installed the History Hack Pack
• you'll really need Node this time
• git clone and npm install
• edit away

Notice the directories js, css, and spatial-history. All your work should take place in the files contained therein.

• ./spatial-history/index.html contains the web page skeleton into which your content will be poured
• ./spatial-history/intro.md and ./spatial-history/index.md are provided for your essay's introduction & main body, respectively. These should be written in markdown syntax
• ./css/site-styles.css allow you to style the elements as you wish
• ./js/maps-setup.js is where you will do almost all of your technical work!

We'll go over these in class.

Because of browser security settings, this repository will not display properly when you try to view the files directly in your browser. This is good -- you don't want your browser to read and write sensitive files on your computer! However, it's a bit inconvenient for us. In order to check your work, you will need to start a simple server in the repository. the easiest way to do that is to npm run server from the command line or by using the npm run script command in VSCode. This will serve the files at localhost:8080; if you navigate there in your browser, you will see the live files. Your work will not always update automatically. In Chrome, open devtools and then click and hold the refresh button on the toolbar; choose "Empty Cache and Reload". In Firefox, follow these instructions. For live reload, run npm run watch instead; however, this can lead to some display problems with dynamic content such as maps. I've also added a convenience function that will open the map directly: npm run servemap

Markdown is rendered by markdown-it, a powerful parser written in JavaScript. It enables a few extra features that we have not discussed; these are mostly discussed in its repository (linked above). Note: not all of these features will render properly in Github and in VSCode Previews of this file. Please copy the reelvant text into one of your index.md files to see the syntax at work. We use the CommonMark settings, as well as some extensions:

• github-style tables
• css-like attributes
• footnotes

you can also add emoji like in github 🍕 🍁, though you may need to mess around with fonts to get it to work the way you want :-). See list of emoji for options.

The rest of this section is just a review of features.

Remember you can use italics and bold which can also be written like this or like this etc. Be sure to make use of links -- that's one of the reasons we write on the Web, and I've asked you to use links for all yor footnotes/references as well.

make blockquotes with greater-than signs. In the unlikely event that you wnat to nest them, that is also possible.

add footnotes like this¹ or like this ^[this is just some markdown text which will render as a footnote link]

footnotes willl be renumbered sequentially as you go², regardless of what label you choose. Footnote content can be added inline (see the eecond example above) or in a separate line somewhere in the page (see first and third examples).

In some of your assignments, it may be useful to create tables. Here's an example:

Notice the addition of a pair of curly brackets containing a CSS celector below the table -- this wil appy the class striped to the table when it is rendered in HTML.

It is really easy to flip a switch and make this repo go live! Near the top of this page you will see a ⚙️ gear icon -- this is the settings page. Navigate to that page and scroll down to the heading labeled Github Pages. There's a drop-down menu there currently reading "none". Click on the box and select master branch instead. Moments later, your site will appear live at the URL now displayed in a blue box within the Github Pages section.

That's it! You're Live! You can read more about Github Pages here

At this point, you have a functioning website. If you want to keep it permanently as a personal website, you should probably assume control of it. You have two choices.

• from the settings page (see above) scroll down to Danger Zone and choose Transfer ownership. Go through the multi-stage confirmation process. Once you're done, the repo will belong entirely to you -- there will no longer be a copy in the class Github Roganization. Don't do this before the end of the semester!
• alternatively, just fork your repo using the Fork button near the top of the page on the root page of your repository (probably this page!). You will probably have to set up publishing again -- see viewing the live repo, above.