agrc / gis.utah.gov

The official UGRC website

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

• 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" />

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.

• markdown

  ---
  ---
  
  import import Contacts from '@components/page/Contacts.astro';
  
  <Contacts contactKey="ugrc" subject={frontmatter.title} />

• astro

  ---
  import import Contacts from '@components/page/Contacts.astro';
  ---
  
  <Contacts contactKey="ugrc" subject={frontmatter.title} />