Congratulations, you have finished all the "basic skills" assignments. All of the rest of the assignments for the rest of the year will live in a single repository -- this one. Only the oral history assignment is required to pass the class. But those of you looking for a "B" will need to do the spatial history assignment, while those of you looking for an "A" will also need to do the project proposal.
These three assignments share some basic infrastructure. This is on purpose. If you do all three of them, you should be able to very easily turn this repository into a small "digital portfolio" showcasing your work for this class. Not all of you will want to do this, but it's nice to have the option.
There's a lot more to read here, but for now what you probably want is a link to assignment 4, the spatial history assignment.
And doubtless also a link to assignment 5, the oral history assignment.
Assignment 6, the project proposal, is also available.
PLEASE DO NOT MAKE CHANGES OUTSIDE OF ASSIGNMENT 4-RELATED FILES UNTIL I TELL YOU IT'S SAFE TO DO SO!
Also: it will never be safe to edit readme and test files. They are subject to updates at any time. Ditto for package.json.
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 scrpt 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 Cashe 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 some convenience functions for the individual assignments: npm run servemap, npm run servestory, npm run serveproject
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:
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.
Note: to use markdown syntax inside of HTML tags, as has been done here, be sure to leave empty lines below the html tag and above the closing tag. You may possibly want to do this if you need to create high-level sections to use for flexbox or grid styling.
add footnotes like this1 or like this ^[this is just some markdown text which will render as a footnote link]
footnotes willl be renumbered sequentially as you go2, 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:
| Heading | Columns |
|---|---|
| test | data |
| test | data |
| test | data |
| {.striped} |
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 odwn 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 ht eGithub 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 Zoneand chooseTransfer 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
Forkbutton 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.