gis.utah.gov

This is the repository for the UGRC agency website.

Read about our new website. Contribute content or typos. License: MIT.

Local Development

Prerequisites

• Node.js - v18.14.1 or higher
• Text editor - We recommend VS Code
• Terminal - Astro is accessed through its command-line interface (CLI).

Steps

1. Clone this repository git clone https://github.com/agrc/gis.utah.gov.git
2. Install the dependencies npm install
3. Start the website npm start
4. browse to localhost:4321

Technology reference

• Astro docs
• GitHub markdown spec
• tailwindcss docs

Syntax conventions

_italic_
**bold**
_**bold italic**_

- list

---
import BulletedList from '@components/page/BulletedList.astro';
import NumberedList from '@components/page/NumberedList.astro';
import DefinitionListItem from '@components/page/DefinitionListItem.astro';
---

<em>italic</em> or <span class="italic">italic</span>
<strong>bold</strong> or <span class="font-bold">bold</span>
<strong><em>bold and italic</em></strong> or <span class="italic font-bold">bold and italic</span>

<BulletedList>
  <li>list item</li>
</BulletedList>

<NumberedList>
  <li>list item</li>
</NumberedList>

<dl>
  <DefinitionListItem title="Word">Definition</DefinitionListItem>
</dl>

link to page

• markdown

  [link text](/pillar/level-1/page/)
  [link text](/pillar/level-1/page/#to-anchor)

• astro

  <a href="/pillar/level-1/page/">link text</a>
  <a href="/pillar/level-1/page/#to-anchor>link text</a>

link to blog post

• markdown

  [link text](/blog/2016-05-26-file-name/)
  [link text](/blog/2016-05-26-file-name/#to-anchor/)

• astro

  <a href="{/blog/2016-05-26-file-name/">link text</a>
  <a href="{/blog/2016-05-26-file-name/#to-anchor">link text</a>

external link

• markdown

  [link text](http://external.website.location)
  [link text](http://external.website.location#to-anchor)

• astro

  ---
  import ExternalLink from '@components/page/ExternalLink.astro';
  ---
  
  <ExternalLink href="https://url.com">link text</ExternalLink>
  <ExternalLink href="https://url.com#to-anchor">link text</ExternalLink>

image link to an image

• markdown

  [![displayed image alt text](../../relative/path/to/image.jpg)](![link to alt text](/path/to/item))

images

All images should have lowercase file names with words separated by hyphens, AKA kebab case. e.g.: my-gis-day.png.

Images should be organized into their pillar folder. e.g.: /src/images/pillar-documentation/*.

When you create a new blog post using the issue template, a folder for images will be automatically created in /src/images/pillar-blog/{blog-slug}/. This folder will include a .placeholder file.

Aliases for these paths are available in the tsconfig and are the suggested way to import assets. e.g.: @images/blog/{blog-slug} is equivalent to /src/images/pillar-blog/{blog-slug}/.

If you wish to change the default cover card or social sharing image for the content, you will need to update the cover_image property with an image having an aspect ratio of 1200x630 pixels.

In order to insert an image into the body of your content, please include these lines of code at the top:

• markdown

  ![alt text](../../relative/path/to/image.jpg)

• astro

  ---
  import { Image } from 'astro:assets';
  import photo from '@images/pillar/image.phg';
  ---
  
  <Image src={photo} alt="text describing the image to a non sighted person" />

You should place this line of code in the spot where you want the image to appear in the content:

• astro

  <Image src={photo} alt="text describing the image to a non sighted person" />

When editing blog posts created by the issue template, remember to delete the placeholder file after you have uploaded your images or when you decide you are not going to include images. The placeholder file should not be merged with the blog post.

font matter

• title: Title - the title of the content
• author.display_name: Full Name - The author of the content
• author.email: email@address - The author email
• date: 2018-02-13 - the date the content was created
• tags: a list of tags
• categories: Featured|Developer|SGID Blog|GPS-surveyor|Guestblog
• published: true|false

contact information

Important

Please do not put email addresses directly into content.

Contacts are managed in a typescript file. At the top of your content, please include the following line of code:

• markdown

  ---
  ---
  
  import import Contacts from '@components/page/Contacts.astro';

• astro

  ---
  import import Contacts from '@components/page/Contacts.astro'; 

In line with the text where you want the contact to appear, include this line of code:

• markdown

  ---
  ---
  <Contacts contactKey="ugrc" subject={frontmatter.title} />

• astro

  ---
  <Contacts contactKey="ugrc" subject={frontmatter.title} />

The contactKey should match the key found in the typescript file.

SGID Index Validation

The data that powers the SGID Index search page comes from a Google Sheet. Fresh data is scraped from the sheet each time the website is built in Netlify.

The data is validated using a NodeJS script which is scheduled to run nightly via GitHub Actions. If there are validation errors, the script opens a new GitHub issue with a comment displaying the errors. If there is an existing issue already open, the output comment is updated. If there are no errors, the issue will be closed. The validation script can also be triggered manually by adding a new issue comment that begins with the following text: /validate-sgid-index.

Rows that have indexStatus set to removed or draft are skipped.

The validation scripts performs the following checks:

• Validates that openSgidTableName is a valid table name in the Open SGID database.
• Validates that productPage is a valid path relative to https://gis.utah.gov/ or an external URL.
• Adds a new guid value for id if it is empty.
• Validates the itemId is a valid AGOL item and auto-populates the following fields:
  • hubName
  • hubOrganization
  • serverHost
  • serverServiceName
  • serverLayerId
• Checks for duplicates values between rows for the following fields:
  • openSgidTableName
  • itemId
  • id
  • displayName
• Validates that the values in the spreadsheet match the corresponding values in the download metadata file.
• Checks that there is a value in either productPage or itemId.
• Validates that inActionUrl is a valid URL if it is populated.