12. Customizing the site

Follow these steps to customize your version of the tracker to pull in the correct geography, as well as your publication's name and your site name in areas across the site. Here, you can also edit the copy that appears on main pages of the site (the homepage and about page).

• This file in your site can be found under the root directory in VSCode. It contains basic sitewide configuration data.
• The defaults are set up for the Detroit area, but you will need to change them.
• Navigate to the toolkit.config.js file in VSCode and replace the template variables with your own, shown below.

The file looks like this:

module.exports = {
  siteTitle: `Local Development Tracker Toolkit`,
  siteUrl: `https://local-development-tracker-toolkit.netlify.app`,
  organization: `Your Organization`,
  city: `Detroit`,
  state: `Michigan`,
  boundingBox: [-83.287803, 42.25496, -82.910427, 42.45023],
  primary: '#9ADCFF',
  secondary: '#FFF89A',
  tertiary: '#FFB2A6',
}

• This is your site's title: It's displayed in the header, as well as in URL preview links.
• Change Local Development Tracker Toolkit to the name you will use for your tracker, like Detroit Development Tracker.

This is your site's production URL. It's used in URL preview links. We'll adjust this in the next section of the guide.

Add the name of your organization. It's displayed in the footer, as well as in URL preview links.

These two values are the city and state you're working in. These are displayed across the site as well as in URL preview links. These are for display only, so you can use whatever you want -- it does not have to be a city or state, but could be a neighborhood and city, or city and province.

This is a bit of a special variable. It's a list of four numbers, representing the geographical extent of your site. It controls two things:

• The initial view of the map.
• Where the geocoder will attempt to locate your project addresses.

You can create a bounding box using this site: https://boundingbox.klokantech.com/.

• Search for your location.
• Adjust the rectangle to create the bounding box.
• Change the output format at lower left to "CSV RAW."
• Copy-and-paste those four numbers between the square brackets in the file.

These are hex codes for the main colors used on the site, for the navigation bar and other elements. You can select other colors and copy their hex codes in this spot.

Inside the pages directory in your site, there are a couple key files you can customize. You can make edits to these pages in VSCode, but it will be easier to edit them from GitHub. In your GitHub repository, navigate to "pages," then click on the page you want to edit and click the pencil icon at the top right of the file to make changes. When you are done editing, commit your changes by clicking the button at the bottom of the page.

These files are MDX files, meaning that they're principally written in Markdown and then can contain JSX components.

You will need to write in Markdown for formatting and links to render properly. Here's a cheat sheet for Markdown. You can also install the Docs to Markdown plugin to convert text within Google Doc files or use an online converter.

This is your site's homepage. Edit the text in this file to change what displays when someone comes to the homepage of your site.

This is the site's About page. You can edit text within sections we've included, like how your audience can use the site and who can collaborate on this project. Please keep the final section, "Credits," on your site -- it includes creator credits and a link back to this toolkit.

These are JavaScript files (also found under pages in your GitHub repository) for the Submit a Tip and Contact Us forms on the tracker site. You can edit these files to adjust the introductory text on those two pages, but be careful not to edit any other code or make other adjustments to those files unless you are familiar with JavaScript.

You'll want to remove the guide content, which you're reading now, so it's not published along with your site:

• Within VSCode, delete the guide directory that's inside pages.
• In the file components/Header.js, remove lines 24 through 27 (inclusive) to remove the reference to the guide.

Now that you have your site ready, the next section will show you how to publish your site to the web, connect it to your outlet's domain and regularly republish it to capture updates to your data in Airtable.