chore: update env var section (#16)

* starts update to env var section

* --amend

* add video and and link to walkthrough

Author: tzmanics

README.md

@@ -9,6 +9,8 @@ A customizable blog starter using:
 - Built-in [MDX](https://mdxjs.com/) v1 support
 - Includes modern design with dark & light themes
 
+[Click here to watch the template walkthrough!](https://www.youtube.com/watch?v=U2eTCO_xiHc)
+
 ![Preview of blog theme. Author named Jay Doe and blog's name is "Next.js Blog Theme" with one blog post](nextjs-blog-theme-preview.png)
 
 [Take a gander at the demo.](https://bejamas-nextjs-blog.netlify.app)
@@ -46,21 +48,27 @@ Through the [setup wizard](https://nextjs-wizard.netlify.app/), you can create y
 The config is based on environment variables to make it easy to integrate with any Jamstack platform, like Netlify.
 
 Here are the variables you can edit:
+| Variable | Description | Options
+| --- | --- | --- |
+| `BLOG_NAME` | the name of your blog, displayed below the avatar ||
+| `BLOG_TITLE` | the main header (`h1`) on the home page ||
+| `BLOG_FOOTER_TEXT`| the text in the footer ||
+| `BLOG_THEME` | the theme to pass to Tailwind | default |
+| `BLOG_FONT_HEADINGS` | the font-family for all HTML headings, from `h1` to `h6`| sans-serif (default), serif, monospace|
+| `BLOG_FONT_PARAGRAPHS` | the font-family for all other HTML elements | sans-serif (default), serif, monospace|
+
+All of the env variables can be configured through the [Wizard](https://nextjs-wizard.netlify.app/) or through setting the project's environment variables. You can do this in your Netlify dashaboard (Site settings/Build & deploy/Environment/Environment variables).
+
+
 
-- `BLOG_NAME` - that's the name of your blog and will be displayed below the avatar.
-- `BLOG_TITLE` - the main header (`h1`) on the home page, this can be a slogan.
-- `BLOG_FOOTER_TEXT` - the text in the footer, usually copyright info.
-- `BLOG_THEME`
-- `BLOG_FONT_HEADINGS` - the font-family for all HTML headings, from `h1` to `h6`. The value can be one of those:
-  - `sans-serif` (selected by default)
-  - `serif`
-  - `monospace`
-- `BLOG_FONT_PARAGRAPHS` - the font-family for all other HTML elements. The value can be one of those:
-  - `sans-serif` (selected by default)
-  - `serif`
-  - `monospace`
-
-All of the env variables can be configured through the [Wizard](https://nextjs-wizard.netlify.app/).
+https://user-images.githubusercontent.com/3611928/153997545-6dcdeef0-e570-49e7-93d6-ce0d393d16c9.mp4
+
+[alt: video walkthrough of editing env vars]
+
+If setting an environment variable isn't your cup of tea, the defaults can be changed in [`utils/global-data.js`](/utils/global-data.js). You can also remove the variables and hard code blog information where these variables are used in the code base.
+
+- `BLOG_THEME, BLOG_FONT_HEADINGS, & BLOG_FONT_PARAGRAPHS` are used in [`tailwind-preset.js`](tailwind-preset.js)
+- `BLOG_NAME, BLOG_TITLE, BLOG_FOOTER_TEXT` are used in [`pages/index.js`](pages/index.js) & [`pages/posts/[slug].js`](pages/posts/[slug].js) through the `globalData` object.
 
 ## Adding new posts
 
@@ -71,4 +79,3 @@ Since the posts are written in `MDX` format you can pass props and components. T
 https://user-images.githubusercontent.com/3611928/152727802-102ec296-41c8-446d-93ed-922d11187073.mp4
 
 [alt: video walkthrough of adding a new blog post]
-