Skip to content
Caroline Armitage edited this page Dec 20, 2022 · 7 revisions

Welcome to the find-sdg-research wiki!

Editor workflow

This site uses Github to edit the markdown files and site structure. To start editing go to the branches page and create a new branch. You will do all your editing in this branch.

Link to branches page:

branch-link

Click "New branch"

click-new-branch

Name and create a branch:

Name and create a branch

To start editing you first need to click the link for the new branch:

go-to-new-branch

Folder structure

The site content is organised under pages folder, in .mdx files. These are Markdown files with the possibility to add more advanced stuff (talk to the developer 😄).

The folder structure dictates the URL paths.

As you can see there are two files for each page, one in english and one in norwegian (well, doh).

Editing a single page

If you navigated to the page you want to edit you under pages/, click the edit button, the pen icon. Now you are in the single page editing mode of Github.

edit-single-page-button

When you have finished making your changes, you can propose changes or commit. Choose the "Create a new branch for this commit and start a pull request". This is important, do not try to commit directly 😠.

propose-changes-in-pr

You will be taken to the "Open a pull request" page where you can add a short description of the change you have done. Click "Create pull request".

create-pull-request

Now this has created a pull request that will test your changes and give you a preview.

preview-link

The Vercel bot will give you a link to the site preview when the new page is ready. It is the coolest stuff ever.

Does everything look good?

Yes: If everything looks good to you, you can "ask for a review" in the top right hand corner. After the person you ask for a review from looks over your proposed changes, and approves them, the pull request (and your changes) can be merged with main and published to the public. And you are done! 😃

Why do your changes need to be approved?! When a team work on the same files it is important to keep the project "healthy". This removes some pitfalls. If you are an administrator, you can merge the pull request yourself. This process is being tested.

No: If you realise at this point, actually, you would like to make some more changes to the same file, you do not need to create a new branch or new pull request. You can edit further and commit as long as you are editing on the same branch as the pull request - the edits will be added to the pull request automatically, and will generate a new preview (see under; commits marked in red, previews in yellow).

preview-link

After the pull request has been merged, you can delete the branch safely now.

Advanced editing

If you are editing multiple pages or are changing the site structure and navigation you should use the built in editor.

You can now either change the .com part of the URL to .dev or navigate to the page you want to edit, e.g. under pages/ and choose "Open in github.dev" in the "pen" options.

open-in-github-dev

You will now open the branch in an advanced code editor, the same as the developer uses 👍.

Github dev (VS Code):

github-dev-page

Commit:

github-dev-commit

Pull request - note that you can create a pull request as a draft if you want to do more commits on it later.

github-dev-pr

Internal links

Don't link the whole URL. Instead, use the bit after "pages" in the file structure. For example: For more help about searching [see our search tips](/hjelp/sokehjelp). We do not need to specify the language (it detects the existing language settings).

SDG icons

The icons on the front page, their size, and the links they lead to are controlled from /lib/goals.ts. The images themselves are under /public/images/sdg.

Editing the banner

This is done in theme.config.tsx.

Plain text:

banner: {
    key: "sdg-v1",
    text: () => {
      return (
        <>
          SDG dataset v1.0 is released! #plain text
        </>
      )
    },
  },

Link:

banner: {
    key: "sdg-v1",
    text: () => {
    const { locale } = useRouter()
      return (
        <>
          <a href='/accessibility-statement'>{locale === 'en' ? 'Accessibility statement' : 'Tilgjengelighetserklæring'}</a>
        </>
      )
    },
  },

Editing the preview text in search boxes

Navigate to file: Components > Search > Search.js / HomeSearchBox.js

image

_meta files

All the folders in /pages have _meta.*.json files. These control the header navigation and the table of content sidebars and are important for the functionality of the site.

Homepage _meta.*.json

This controls the header navigation and can hide pages in the navigation or create dropdown menus.

A _meta.*.json file has this structure:

{
  "sustainable-development-goals": { // the "key" is a file name in the folder minus language code and filetype
    "title": "Om bærekraftsmålene"
  },
  "about-this-service": "Om denne tjenesten", // this is a short form for the page above
  "search-strings": {
    "title": "Søkestrenger"
  },
  "contact": {
    "title": "Kontakt"
  }
}

The file name is the same across languages (e.g. contact.no.mdx and contact.en.mdx), and will show as the page URL. Only the title is translated by the meta files.

Why do we need these files? Because the web application needs to know the order of the pages. Re-order the structure by changing the list order in these files.