Local Development Tracker Toolkit

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).

Configuring toolkit.config.js

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',
}

siteTitle

siteUrl

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.

organization

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

city and state

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.

boundingBox

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:

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

primary, secondary and tertiary

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.

Customizing the site content

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.

index.mdx

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.

about.mdx

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.

submit-a-tip.js and contact-us.js

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.

Delete the guide content

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

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.

Setting up the site
Publishing the site

Table of contents

  1. About this guide
  2. How to use this guide
  3. What you will need
  4. Initial questions to ask
  5. Starting with the data
  6. Organizing your data: Airtable basics
  7. Setting up your Airtable base
  8. Using the Projects table
  9. Using the Contact Us table
  10. Using the Tips table
  11. Setting up the site
  12. Customizing the site
  13. Publishing the site
  14. Managing your development tracker
  15. Harnessing public engagement and support
  16. Launching your tracker for the public
  17. Getting in touch with us