Skip to content

Editing the website

Jump to bottom
Caleb Williams [SSW] edited this page Jul 9, 2024 · 23 revisions

Creating/Editing content on the website

Watch the demo: image

Getting Access

  1. Request access by following this SugarLearning item
  2. Accept invite once SysAdmins have approved (Tip: Ping them to speed them up)
  3. Go to https://app.tina.io/account/settings
  4. Important - Enable Enable co-authoring - this is so your change will have your name associated with it
image

Figure: Your settings should look like this

Workflow

  1. Log into Tina
    • Online
      1. Navigate to https://ssw.com.au/admin
      2. Authenticate with your Tina credentials
      3. Create a new branch using the branch selector in the top left corner
    • Locally
      1. Pull latest code from main
      2. Follow README to get site up and running
      3. Use git to make a new branch (and push changes when done)
      4. Navigate to localhost:3000/admin
  2. Using the left side-panel, press the hamburger menu
    Screenshot 2023-02-23 at 07 58 31
  3. Select the desired collection
    Screenshot 2023-02-23 at 08 00 08
  4. Create or edit content as required (see below)
  5. Go to GitHub and raise a PR (this will deploy a preview environment for you to get your changes checked)
  6. Get PR reviewed and merge
  7. Wait for changes to go live

Creating Content

  1. Press the "Create New" button within the collection Screenshot 2023-02-23 at 08 09 05
  2. Fill in the appropriate details for the new content you wish to make. Screenshot 2023-02-23 at 08 10 19
  3. Press the "Save" button once you've made your desired edits to create the new page.

Editing Content

  1. Select the desired page to edit Screenshot 2023-02-23 at 08 02 46
  2. From there, simple make the changes you want via the left admin side-panel. Make sure to press the "Save" button once you've made your desired edits. Screenshot 2023-02-23 at 08 05 38

Editing and creating employment opportunities

Demo video: https://youtu.be/yyw82EXodcI

Getting Access

  1. Request access by following this SugarLearning item
  2. Accept invite once system admins have approved

Workflow

Creating the employment opportunity

  1. Navigate to https://ssw.com.au/admin.
  2. Create a new branch by opening the branch menu in the top left corner. Then, enter the name of your new branch at the bottom of the dialogue.

image

Figure: Opening the branch menu

image

Figure: The branch menu

  1. Then navigate to "Opportunities" on the sidebar
  2. Click "Create New" on the right hand side of the screen

image

Figure: Employment Opportunities list

  1. Fill out the form with the required information.

image

Figure: Employment Opportunity input form

Setting the job opportunity to available on the /employment page

  1. Click on "Employment Pages" in the sidebar
  2. Open the "index" page

image

Figure: The "Employment Pages" list page

  1. On the sidebar on the left hand side of the screen, scroll down to the "Opportunities" section

image

Figure: Opportunities section on the edit pane of the employment page

  1. Next, click the blue plus icon to the right of "Opportunities"
  2. This will create a "New Opportunity" object, click the edit button on the "New Opportunity" item on the list:

image

Figure: The "New Opportunity" object

  1. This will open a separate panel, editing the object. You can now select the opportunity you created in the first part.

image

Figure: Selection of the previously created opportunity in a list

  1. Click "Save", and then create a pull request

Updating newsletter sign up form

We are using JotForm to render the sign up form and capture form submissions.

These submissions are added to our mailing list by a Power Automate flow.

Updating the form UI

  1. Visit and sign in with credentials from Keeper
  2. Select "SSW Newsletter signup form" and "Edit"

  • You can make simple changes to text and colors on the Build page: image Figure: Build mode of the form

  • More in depth changes + injecting CSS can be done via "Advanced Designer": image Figure: Advanced Designer mode of the form

  • Changes are automatically saved and affect the live version of this form as you work with it so pay attention whilst making changes. Previous changes are tracked and can be reverted to if required by clicking the circle-arrow next to the save information: image Figure: Revisions being tracked

  • Explore more options using the "Settings" and "Publish" tabs: image Figure: Various settings of the form

Adding new events

We've moved all of the events from our SharePoint list to Tina. The Therefore the editing workflow for adding new events and editing old ones looks different now.

How to video

Video Title

(2m:24s)

Instructions

  1. go to ssw.com.au/admin | Events - Calendar

image

  1. Click on the year that you would like to add an event, then click "Add Files". Note: For new events this will be the current year. image

  2. Fill out all of the relevant fields (See the table below for details on each field). Once you've finished editing the event click "Save".

Note: The livestream URL is generally filled out by the TV team.

  1. (Optional) - Go to github.com/SSWConsulting/SSW.Website/pulls | [branch you created]. Wait for the staging url to appear at the bottom of the page, and then

image

  1. Once you're happy with the changes you've made, get your pull request merged and the new event should go live.

Fields in Tina

Field Description
Title what will appear on the events page
URL where people can go to find out more information about events. (e.g. meetup, ssw.com.au/netug/sydney for user groups in sydney)
Thumbnail The thumbnail that will be shown on ssw.com.au/events
Presenter Name The name of the main presenter for the event
Presenter profile URL
Start Date/Time The start time for the event as shown in the banner at the top of the page
End Date/Time When the event finishes, usually later the same day
Website - Show livestream banner start time The time when the livestream banner will show
Website - Show livestream banner end time When the live stream banner will disappear
Event type The type of event. Can be used to filter the event on ssw.com.au/events
City Where the event is being hosted
Category The main topic of the event
Abstract A short description of the event that will be shown on the user group page
Description A brief description of the event. Will appear on ssw.com.au/events
Presenters a list of presenters for the event, including the main presenter. To add more presenters that aren't in the list go Events - Presenters | Add Files. Please note that for user groups the presenter must have the Torso Image filled out in Tina.
Youtube ID The ID of the Youtube livestream. Leave this blank if the event is not a livestream. This is filled out by the TV Team close to the event starting
Delayed Livestream Start whether or not the livestream starts immediately at the scheduled time. Will affet how the livestream banner shows the start time
Live Stream Delay How long the TV team will play the user group prommo trailer before the livestream.
Trailer Video - URL A link to the promo video for the event. This is mostly used for User Groups.
Hosted at SSW Determines how the event will appear on the events page. If this is ticked the location link on events will appear as "SSW Chapel [City]"
Show on SSW Website Determines whether the event will be shown on the website
Internal Note A note that will only be read in the Tina view.

Adding new newsletters

Demo Video

https://youtu.be/lrgF3T7Y0Qs

Workflow

  1. Navigate to https://ssw.com.au/admin.

  2. Open the branch selector window in the top-left hand corner.

image Figure: open the branch selector

  1. Create a new branch in the branch selector. It may take about 30 seconds to index the new branch after you create it. Once it has completed indexing, select the branch you created from the list.

image Figure: Creating a new branch in the branch selector

  1. Click the sidebar icon on the left hand side of the screen, then navigate to "Newsletters".

image **Figure: The "Newsletters" collection on the sidebar list

  1. Select the current year from the list of newsletters.

image Figure: Selecting the current year from the list

  1. Click the "Create New" button in the top right of the "Newsletters" section.

  2. Select the "New newsletter" item in the list.

image Figure: creating a new newsletter item

  1. Enter the month number, and then upload the HTML file.

  2. Upload any corresponding images in the images field using the TinaCMS Media Manager folder and fill out the description field.

  3. Click "Save", and then create a pull request

image **Figure: adding the newsletter files + information"

  1. Done - your changes will then be reflected on the site!

Create a pull request

  1. Navigate to https://github.com/SSWConsulting/SSW.Website/pulls.

  2. Now, click "New Pull Request"

image

Figure: Create a new pull request

  1. Select the "compare: main" button on the right hand side of the arrow. Then, select the branch you created using TinaCMS.

image

Figure: Select your branch from the list and create the PR

  1. Now, select "Create pull request", and request a reviewer for the PR. Once the PR has been approved, it will be merged into the GitHub repo, and your changes should show up on the website.

Editing the Megamenu With Visual Editing

  1. Navigate to ssw.com.au/admin and follow the standard TinaCMS branching workflow stated above (steps underneath Creating/Editing content on the website).

  2. Click the home icon in the upper left corner of the page.

image Figure: the home icon to navigate to the list of data used on the page

  1. Select content/megamenu/menu.json from the list.

image Figure: the list of data that is used on the page

  1. Now, you can edit items on the menu and see them instantly reflected on the page.
Clone this wiki locally