broadinstitute/gnomad-blog

Blog for the gnomAD project

gnomad-blog's Issues

Images don't work on list pages

Currently, the public folder for images uploaded through Netlify CMS is set to ../images.

gnomad-blog/static/admin/config.yml

Line 14 in c974cd7

public_folder: ../images

This works ok for individual post pages. Images on /blog/post-slug end up as /blog/images/.... However, it doesn't work for the home page (images on /blog would be /images) or category pages (images on /category/category-name would be /category/images).

The public folder should be set to /images and then /images/image.png URLs in posts should get transformed using the prefix path. Need to make sure this works for videos too.

Make the blog post categories more prominent (e.g. at top of page)

Testing project/issue automation

...disregard.

Use Workflow Identity Federation for gsutil authentication

Currently, workflows for updating the blog and previews use a service account key to authenticate gcloud.

gnomad-blog/.github/workflows/update_site.yml

Lines 39 to 43 in 08cedb7

	- name: Setup gcloud
	uses: google-github-actions/setup-gcloud@master
	with:
	service_account_email: ${{ secrets.GCS_SA_EMAIL }}
	service_account_key: ${{ secrets.GCS_SA_KEY }}

Using Workload Identity Federation would be preferable.

https://cloud.google.com/blog/products/identity-security/enabling-keyless-authentication-from-github-actions

Add visible links to RSS feeds

RSS feeds are available, but they're not shown anywhere.

Connect changelog to Slack

Post changelog entries in Slack.

https://slack.com/help/articles/218688467-Add-RSS-feeds-to-Slack

Hiring banner is on gnomad-browser but not gnomad-blog

Document publishing process

Add pre-commit hook to check image/video sizes

Create category and author pages

https://www.gatsbyjs.com/docs/adding-tags-and-categories-to-blog-posts/

Sidebar with recent posts

Look into preview styles for CMS

https://www.netlifycms.org/docs/customization/

Add link to browser

In the gnomAD browser, clicking "gnomAD browser" in the top left corner returns to the home page. In the blog, that is replaced with "gnomAD blog" that links to the blog home page. This makes it difficult to get back to the browser.

Make gnomad-blog header consistent

Currently if users are on the news or changelog, they see "gnomAD news". It's kind of confusing to see this when you are on the changelog. Perhaps it's better to make this consistent with the rest of the browser. This is a result of the way the News/Changelog are deployed from gnomad-blog codebase on Netlify and the rest of the app is hosted from gnomad-browser codebase in our kubernetes deployment.

Proposed changes:

(1) In gnomad-blog, the header on lefthand side should say "gnomAD browser" rather than "gnomAD news".

(2) The News/Changelog should be next to each other in the header, so let's move "Changelog" to the left of News. Note that this change should be replicated in https://github.com/broadinstitute/gnomad-browser as well and launched at the same time.

(3) when on the News/Changelog, users see the "Browser" link, but they don't see this when on the data pages, homepage, etc. The "browser" link is there because when people are on the news page, there is now way to get back to the browser deployment.

e.g.

On News Page:

On Home Page:

Instead, I propose that we remove the "browser" link and then expect users to use the lefthand "gnomAD browser" on the top left to get back to the browser homepage so they can browse data.

See: https://atgu.slack.com/archives/CNLMF0JLV/p1660148436411379?thread_ts=1660147082.071489&cid=CNLMF0JLV

Create new category for software related blogposts

The blog currently has two categories, Announcements and Posts, it was proposed to includes a third category for blog posts regarding software challenges and other interesting software related posts.

Initially, this was brought up in response to the slowness of the browser after an aggressive web crawler for the Petal Search Engine caused slowdowns, the suggestion was to create a blog post describing what happened to cause the slow down, and how it was resolved.

Further, the location in which the categories are displayed that allows for filtering of the feed based on category is currently in a location that's not immediately obvious. If additional categories/labels are created, move the location of these category buttons.

Add new category for "Technical" gnomAD blog post

Update to Gatsby 3

https://www.gatsbyjs.com/blog/gatsby-v3/

Paginate lists

This will likely become an issue for the changelog first.

Cache control

Nginx and/or Google Cloud Storage is caching requests for objects, which means updates aren't immediately visible on the site. Need to figure out how to control the cache duration and/or clear the cache when an update is pushed.

Remove changelog entries from main RSS feed

Create a separate RSS feed for the changelog.

Move images into repository / Netlify CMS

Currently, images are stored in a separate GCS bucket. It would be more convenient to upload them to the GitHub repository through the Netlify CMS UI.

Upgrade the blog to gatsby 4

This PR is requiring that we upgrade to gatsby 4.0 to resolve a build-time security fix. @rileyhgrant took a quick look at that upgrade and found that it was more than a trivial amount of work.

Creating this issue so that we can appropriately prioritize the work in our backlog.

Development config using netlify-cms-proxy-server

Make it easier to run netlify-cms-proxy-server for local development. May need to generate config.yml in the build process.

https://www.netlifycms.org/docs/beta-features/#working-with-a-local-git-repository

URLs may not match publication dates

A post's URL is determined by the corresponding Markdown file's name. That file is generated when a draft is created and named with year-month-title. However, the publication date displayed in the blog is based on the date set in the post's YAML frontmatter. When a post stays in draft for a long time, the dates may get out of sync.

For example, the variant co-occurrence post was published August 8th, 2021 but it's URL is 2021-07-...

https://github.com/broadinstitute/gnomad-blog/blob/8afde2c82e83a007797c7146259f85066c241e16/content/posts/2021-07-variant-co-occurrence-phasing-information-in-gnomad.md

https://gnomad.broadinstitute.org/news/2021-07-variant-co-occurrence-phasing-information-in-gnomad/

Preferably, URLs would be generated based on the publication date set in the YAML frontmatter. Alternatively, dates could be removed from URLs. The dates in file names are useful for sorting files.

Any change to URL schemes would need to include redirects for old URLs.

Add order field to Netlify CMS

3b2cf8c added an order field to front matter to control relative order of posts on the same day. This field should be editable in Netlify CMS.

Add Teams/Policies links to gnomad-blog's header

https://github.com/broadinstitute/gnomad-blog/blob/main/src/components/header.js

Create a Slack notification when blog previews are generated

Currently, when a new blogpost is posted, the live RSS feed is updated which triggers a notification in the gnomad channel about the new post. It would be advantageous to also create a notification when a preview is created (i.e. when a PR is opened that creates a new blog post).

The gnomad_methods_github slack channel has a GitHub bot that automatically posts to the channel when certain actions happen in the gnomad_methods github repo. Something like this could be used to achieve the desired functionality described above.

https://atgu.slack.com/archives/CNNTF8Z46/p1666621778876489