wagtail / wagtail.org

Wagtail’s official marketing website

Wagtail.org

This is the source code to Wagtail's website

Requirements

• Docker or Vagrant (see below)
• Fabric, AWS CLI and Heroku CLI (only for downloading production / staging data)

Installation (Docker Compose)

You first need to install Docker and Docker Compose. Once they are installed, run the following commands to get up and running:

git clone https://github.com/wagtail/wagtail.org.git
cd wagtail.org
make setup

This will create a set of Docker containers on your local machine and also create a blank database.

Starting the development environment

Run the following command to start the Docker containers:

make start

Then, to start the development server, open a new terminal window and run:

make runserver

This will launch django-admin runserver in the web container, which serves the site on http://localhost:8000/, with the admin at http://localhost:8000/admin/.

To run migrations within Docker you'll need to run:

make migrate

Creating a superuser

To create a new superuser locally, run:

make superuser

Pulling production data / media

If you'd like to work with production data and have access, run the following commands:

fab pull-production-data
fab pull-production-media

Access will only be given when absolutely necessary.

Installation (Vagrant)

You first need to install Vagrant and Virtualbox. Once they are installed, run the following commands to get up and running:

git clone https://github.com/wagtail/wagtail.org.git
cd wagtail.org
vagrant up

This will download the base image and provision a local VM that will run the site locally.

You will need to apply migrations, create a super user, and create a cache table once the vagrant environment is setup.

vagrant ssh
./manage.py migrate
./manage.py createsuperuser
./manage.py createcachetable

Usage (Vagrant)

Common Vagrant commands:

• vagrant up starts the VM
• vagrant halt stops the VM
• vagrant ssh opens a shell in the VM
• vagrant destroy deletes the VM

Shortcut commands:

Within the VM shell, you can run ./manage.py to run any Django management command. But we have added a couple of shortcuts to save on typing:

• dj <command> [args] - Runs a management command (eg, dj shell)
• djrun - Starts the webserver on port 8000

Frontend tooling

To install and build the frontend:

• nvm use to use the suggested node version (requires nvm, fnm or similar. You'll also need to run nvm install to install and activate the version of node required for the project)
• npm i to install dependencies
• npm run build to compile CSS & JS

Other common commands:

• npm run start start the Webpack build in watch mode, without live-reload
• npm run start:reload start the Webpack server build on port 3000 with live-reload
• npm run lint lint JS & CSS files
• npm run format format files

For more info see Frontend general info

Deployment

The site is hosted on Heroku, and is deployed automatically. main deploys to production, and staging deploys to staging.

docs.wagtail.org

Wagtail documentation is hosted at readthedocs. A Cloudflare worker is in place to rewrite canonical URLs on old versions of the documentation - see conf/wagtaildocs-cloudflare-worker.js.

wagtail.org's Issues

Blog listing sidebar resets to top when you click a link

I know this is standard browser behaviour, but I think it's a bit annoying in this case.

If you're browsing the blog, and you click a link. You have to manually scroll down to where you were again in order to continue browsing.

Content: create links to the accessibility statement

I'm not sure how many people know it, but Wagtail has an accessibility statement.

I vaguely remembered that Wagtail had an accessibility statement but couldn't find any links to the statement from the home page or the About Wagtail page which is where I would expect to find links. I ended up finding the right link through one of Thibaud's blog posts from February 2022, buried on page 3 of the blog index.

Suggestions

• We should mention Wagtail's accessibility features for editors on the About Wagtail page. @thibaudcolas I remember you mentioning a quote from a user of assistive tech who said something along the lines of Wagtail being better than average CMS regarding editor accessibility. Perhaps that is a quote we could add.

• I'd expect to find a link to the accessibility statement in the footer of the site.

Integrity error when importing Django packages data

The Django packages import is failing with

IntegrityError

null value in column "uid" violates not-null constraint
DETAIL:  Failing row contains (262, t, Wagtail internationalization, localization, and translation, wagtail-internationalization-localization-trans, Internationalization, localization, and translation packages for..., null).

'INSERT INTO "packages_grid" ("publish", "title", "slug", "description", "uid") VALUES (%s, %s, %s, %s, %s) RETURNING "packages_grid"."id"'

around https://github.com/wagtail/wagtail.io/blob/master/wagtailio/packages/views.py#L16

Looks like it started ~2 months ago

Reader mode doesn't work on the blog

We should use semantic HTML on the blog so that browsers and services like Pocket can provide a reader mode.

Logo should have all of its details preserved in dark forced-color themes

Follow-up to #295. Our logotype is visible in high-contrast dark themes, but the details of the bird are lost. The logo’s full details should be visible across all contrast themes.

TWIW newsletter links should use enough contrast

At the moment, the links in the This week in Wagtail newsletter don't provide enough contrast to pass accessibility checks.

Screenshot:

The font size should be increased, or the colors should be changed to ones that are higher-contrast over white.

Relevant template (thanks @kaedroho for the find!): https://github.com/wagtail/wagtail.io/blob/master/wagtailio/newsletter/templates/newsletter/newsletter_page.html

---

Initially raised on Slack.

Style the TWIW index page better

https://wagtail.io/this-week-in-wagtail/

It's not linked to from anywhere, but it comes up at the top for a google search for "This week in Wagtail"

Account profile picture breaks when it is changed from default image

When I upload a new profile picture, the image doesn't change and it appears as broken image link throughout the rest of the website. I've tried using a smaller image and a different file format, but got the same results.

Here is a screenshot of what happens on the account profile page when I upload the photo:

And here are some screenshots of what is displayed instead of the photo in key places:

I tried to replicate the issue in my local installation of the website but it appears to be functioning properly in that instance. In the local environment, the image displays properly on the account profile page like this:

So it appears that the issue is only in the production environment yet I'm not sure where to check for errors related to images. Would love to hear any suggestions to help track this down.

Primary nav toggles should use buttons instead of links, with correct ARIA markup

The main menu’s data-open-subnav elements should be <button> elements instead of anchors so they are correctly announced to screen reader users.

They seem to follow a disclosure widget pattern, so also shouldn’t use aria-haspopup, which is intended for dialog, menu and other advanced ARIA roles, which our implementation doesn’t use.

Add Divio one-click Wagtail download to Wagtail.io homepage

https://control.divio.com/demo/get-new/wagtail/

add ability to search for the Author name in the snippet chooser

When writing a draft post this week I found that the Author searching was not enabled for the snippet chooser.

There are now close to three pages of authors and it would be nice to be able to search.

This should be a small change and can use the DB index

wagtail.org/wagtailio/blog/models.py

Line 60 in bde551d

class Author(models.Model):

https://docs.wagtail.org/en/stable/topics/snippets.html#making-snippets-searchable

Nav CTA is cropped within mobile menu

Within the mobile menu’s sub-items, all nav-cta components at the bottom of each section are only half-visible when scrolling all the way to the end of the menu.

Links within blog posts aren't clickable - Mobile only

Issue:
When browsing https://wagtail.io/blog/documentation-sprint-2021/ on mobile, the link to the sprint form isn't clickable.

Reason:
The mobile blog index menu is overlaying the article, meaning you click items in this instead of the blog article

Local build instructions

Could we get a readme on this repo with local build instructions?

pull production data fails in gitpod.

make pull-production-data
make pull-production-media

This command fails to log in to Heroku on GITPOD.

for login, Heroku CLI provides a login link. If a user opens that link from their own browser (different IP address) it fails to verify due to an IP mismatch.

Insufficient color contrast for primary menu chevron icons

Images that aren’t decorative like those icons need a color contrast of at least 3:1. Currently primary-nav__icon elements use #c8c8c8 on white.

Broken migrations when installing the site on localhost

Running dj migrate inside of the vagrant box results in a wagtailimages.Filter issue. Similar to this situation wagtail/wagtail#5067

Traceback:

    ...
    raise ValueError('Related model %r cannot be resolved' % self.remote_field.model)
ValueError: Related model 'wagtailimages.Filter' cannot be resolved

RSS feed for this week in Wagtail

Black formatting?

Not an issue, but more of a discussion point.

What are everyones thoughts on using Black to format Python files? I'm working on a couple updates to this repo and thought to myself, "While I'm working on specific files, I could format them as a separate commit."

Retina images

(originally posted by @tomdyson)

eg. the screenshots for the feature list on the home page, user-uploaded images in blog posts

Odd sticky header behavior on mobile with a tall sitewide alert

When visiting https://wagtail.org on a mobile device, if there is a tall sidewide alert the header behaves in odd ways.

If the mobile menu is closed and you scroll down with enough speed to trigger hiding the header, it shifts up to hide, but because of the height of the sitewide alert it's still visible, just double the height instead.

If the mobile menu is open, the header appears not at the top of the screen but towards the top obscuring some of the menu items.

Video

2022-09-09.09-06-47.mp4

Features - Invalid heading order skipping a level

Visibile on Features page

Suggested fix: Update card <h4> heading to <h3> to avoid potential skipping of heading levels in content (or add a sr-only <h3> as a title for the cards section, whichever is more appropriate)

Specific components where this happens:

• logo_card_block
• logo_cards_list_block

Suggest reviewing all h4 usage before confirming the best fix

Schedule publishing did not trigger

I had set up a blog post for scheduled publishing yesterday at 8am, and checking today the post wasn’t published.

Looking at the Heroku admin, I can see django-admin publish_scheduled_pages is set to run every 10 minutes with Heroku Scheduler, so I’m not sure what other issue there might be.

I don’t think this is worth investigating just yet but opening the issue nonetheless in case someone else runs into this.

Social media image and description should default to the blog post’s content

For blog posts, there are no defaults for social media description and image. I was expecting the post’s "main" image and its "introduction" field to be used for those purposes.

Add search

Was trying to see if we had more than one blog post on Heroku and.. well had to use a targeted site search in Google

Security headers

https://securityheaders.com/?q=wagtail.io&followRedirects=on

Need to add:

• Strict-Transport-Security
• Content-Security-Policy
• Referrer-Policy
• Feature-Policy

Update screenshots with latest version (i.e. React explorer)

(originally posted by @tomdyson)

Update screenshots with latest version (i.e. React explorer)

Set relevent meta tags for TWIW posts

things like date, etc

Mailchimp sign up form on Newsletter Index Page needs styling

The page https://wagtail.io/this-week-in-wagtail/ has a sign up form and it does not look like it has much or any styling.

Note: Most users will not directly go to this link but it does serve as a useful quick sharing URL for seeing recent posts & signing up.

CORS: Nightly releases page uses old wagtail.io URL

https://releases.wagtail.org/nightly/index.html currently tries to fetch https://releases.wagtail.io/nightly/latest.json, which fails due to CORS.
Until it is fixed I'm using https://releases.wagtail.io/nightly/index.html

Two packages on /packages has invalid urls

I found two packages on wagtail.io/packages/ with invalid urls, those are:

• wagtail-2fa - Url: http://pypi.python.org/pypi/https://pypi.org/project/wagtail-2fa/, should be https://pypi.org/project/wagtail-2fa/
• wagtail-grappl - Url: http://pypi.python.org/pypi/https://pypi.org/project/wagtail-grapple/, should be https://pypi.org/project/wagtail-grapple/

Navbar looks wrong in mobile version

Issue Summary

Just look:

Steps to Reproduce

Change css

• I have confirmed that this issue can be reproduced as described on a fresh Wagtail project: yes

Make setup cannot locate heroku package

I've tried setting up my environment for Wagtail.org according to the README instructions but the script keeps erroring on the line apt-get install -y heroku. Here is more of the traceback:

 > [dev 1/4] RUN curl https://cli-assets.heroku.com/install-ubuntu.sh | sh:                                                        
#9 0.449   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current                                           
#9 0.449                                  Dload  Upload   Total   Spent    Left  Speed                                             
100  1232  100  1232    0     0   3644      0 --:--:-- --:--:-- --:--:--  3644
#9 0.796 + dpkg -s apt-transport-https
#9 0.824 + echo deb https://cli-assets.heroku.com/apt ./
#9 0.824 + dpkg -s heroku-toolbelt
#9 0.842 + true
#9 0.842 + + apt-keycurl add https://cli-assets.heroku.com/apt/release.key
#9 0.843  -
#9 0.855   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
#9 0.856                                  Dload  Upload   Total   Spent    Left  Speed
100  5393  100  5393    0     0  37713      0 --:--:-- --:--:-- --:--:-- 37713
#9 1.063 Warning: apt-key is deprecated. Manage keyring files in trusted.gpg.d instead (see apt-key(8)).
#9 1.570 OK
#9 1.592 + apt-get update
#9 1.723 Get:1 http://deb.debian.org/debian bullseye InRelease [116 kB]
#9 1.725 Get:2 http://security.debian.org/debian-security bullseye-security InRelease [44.1 kB]
#9 1.786 Get:3 http://deb.debian.org/debian bullseye-updates InRelease [39.4 kB]
#9 1.906 Get:4 http://security.debian.org/debian-security bullseye-security/main arm64 Packages [123 kB]
#9 2.040 Get:5 http://deb.debian.org/debian bullseye/main arm64 Packages [8070 kB]
#9 2.095 Get:6 https://cli-assets.heroku.com/apt ./ InRelease [2895 B]
#9 2.402 Get:7 https://cli-assets.heroku.com/apt ./ Packages [612 B]
#9 2.424 Get:8 http://deb.debian.org/debian bullseye-updates/main arm64 Packages [2596 B]
#9 3.312 Fetched 8399 kB in 2s (5088 kB/s)
#9 3.312 Reading package lists...
#9 3.708 + apt-get install -y heroku
#9 3.718 Reading package lists...
#9 4.012 Building dependency tree...
#9 4.096 Reading state information...
#9 4.163 E: Unable to locate package heroku
executor failed running [/bin/sh -c curl https://cli-assets.heroku.com/install-ubuntu.sh | sh]: exit code: 100
ERROR: Service 'web' failed to build : Build failed
make[1]: *** [rebuild] Error 1
make: *** [setup] Error 2

Not sure if there's a URL that needs to be updated or if there is a bug on heroku's end, but if anyone has a workaround for this, please let me know.

Redirect loop on live website

Have recently noticed a redirect issue on this URL: http://wagtail.io/

The "About Wagtail" page refers to Django 2.0 as "the latest version of Django"

If you go to https://wagtail.org/about-wagtail/ today, you'll see this about halfway down the page:

The problem is that Django 2.0 is no longer "the latest version of Django", and it hasn't been for quite some time. As I write this, the latest release of Django is version 4.0.2.

To future-proof this bit of website copy, maybe just say something about Wagtail's commitment to working with the latest version of Django and the latest LTS version of Django. (Wagtail 2.16 is compatible with the latest version of Django (4.0), as well as Django 3.2 (LTS); see https://wagtail.org/blog/wagtail-216-and-upcoming-breaking-changes/ ).

Wagtail statistics for site

(originally posted by @heymonkeyriot)

In the footer of the site there's an idea to introduce statistics about Wagtail
e.g.

3,509 Stargazers
659 forks
58 closed issues in last 30 days
91 commits in the last 30 days
160 contributors

Wagtail 3 compatibility

Hello

There's a Wagtail 3 upgrade PR here: #159

Can it be considered please?

I am also putting a Wagtail 4 upgrade together which will rely on this upgrade. Thanks

Accessibility: fix colour contrast

Mobile menu should be vertically scrollable for small screens

If I open the mobile menu on a device in landscape mode, the whole menu isn’t visible at once on the page, and can’t be scrolled. It should support scrolling.

Security issue with Pillow as reported by snyk.io

It seems there is a critical issue in Pillow 8.4 that is fixed in Pillow 9:
https://security.snyk.io/vuln/SNYK-PYTHON-PILLOW-2331901

Wagtail seems to be pinned to 8.4:
https://github.com/wagtail/wagtail.io/blob/main/requirements.txt#L6

XSS vulnerability in Markdown fields

Our Markdown blocks allow arbitrary HTML (tested with a <script>alert('!')</script>), there’s no sanitisation step:

wagtail.org/wagtailio/utils/blocks.py

Lines 133 to 135 in 0eb6cc2

	def render_basic(self, value, context=None):
	md = markdown(value, extensions=["markdown.extensions.fenced_code", "codehilite"])
	return mark_safe(md)

Example: https://wagtailio.production.torchbox.com/admin/pages/788/edit/

---

Based on a discussion with @wagtail/security, we believe this is unlikely to be exploited, and as such can be added to our backlog without an immediate plan to fix.

Possible solutions we discussed:

• Switch to wagtail-markdown, which appears to sanitize its output https://github.com/torchbox/wagtail-markdown/blob/main/src/wagtailmarkdown/utils.py#L21
• Use Wagtail’s own HTML filtering (https://github.com/wagtail/wagtail/blob/main/wagtail/whitelist.py), or bleach
• Switch to rich text

RSS feeds contain no content

They only have links to the online articles. This means you can't read the content with a feed reader.

Wagtail can export content in a format friendly for RSS readers so I think it would be nice to demonstrate this on our website

Aging pages report triggering failed lookup

The aging pages report is not functioning properly. The XLSX option triggers an "internal server error" page and the CSV file is blank when you download it. The logs from my local copy indicate there is a failed lookup for a key for a particular blog post.

Here is the full traceback:

Traceback (most recent call last):
  File "/home/wagtailio/.local/lib/python3.8/site-packages/wagtail/core/utils.py", line 351, in multigetattr
    current = current[bit]

During handling of the above exception ('Page' object is not subscriptable), another exception occurred:
  File "/home/wagtailio/.local/lib/python3.8/site-packages/wagtail/core/utils.py", line 356, in multigetattr
    current = getattr(current, bit)

During handling of the above exception ('Page' object has no attribute 'last_published_by_user'), another exception occurred:
  File "/home/wagtailio/.local/lib/python3.8/site-packages/wagtail/core/utils.py", line 362, in multigetattr
    current = current[int(bit)]

During handling of the above exception (invalid literal for int() with base 10: 'last_published_by_user'), another exception occurred:
  File "/home/wagtailio/.local/lib/python3.8/site-packages/django/core/handlers/exception.py", line 47, in inner
    response = get_response(request)
  File "/home/wagtailio/.local/lib/python3.8/site-packages/django/core/handlers/base.py", line 181, in _get_response
    response = wrapped_callback(request, *callback_args, **callback_kwargs)
  File "/home/wagtailio/.local/lib/python3.8/site-packages/django/views/decorators/vary.py", line 20, in inner_func
    response = func(*args, **kwargs)
  File "/home/wagtailio/.local/lib/python3.8/site-packages/django/views/decorators/cache.py", line 44, in _wrapped_view_func
    response = view_func(request, *args, **kwargs)
  File "/home/wagtailio/.local/lib/python3.8/site-packages/wagtail/admin/urls/__init__.py", line 125, in wrapper
    return view_func(request, *args, **kwargs)
  File "/home/wagtailio/.local/lib/python3.8/site-packages/wagtail/admin/auth.py", line 174, in decorated_view
    response = view_func(request, *args, **kwargs)
  File "/home/wagtailio/.local/lib/python3.8/site-packages/django/views/generic/base.py", line 70, in view
    return self.dispatch(request, *args, **kwargs)
  File "/home/wagtailio/.local/lib/python3.8/site-packages/django/views/generic/base.py", line 98, in dispatch
    return handler(request, *args, **kwargs)
  File "/home/wagtailio/.local/lib/python3.8/site-packages/wagtail/admin/views/reports/base.py", line 41, in get
    return self.as_spreadsheet(self.object_list, self.request.GET.get("export"))
  File "/home/wagtailio/.local/lib/python3.8/site-packages/wagtail/admin/views/mixins.py", line 259, in as_spreadsheet
    return self.write_xlsx_response(queryset)
  File "/home/wagtailio/.local/lib/python3.8/site-packages/wagtail/admin/views/mixins.py", line 241, in write_xlsx_response
    self.write_xlsx(queryset, response)
  File "/home/wagtailio/.local/lib/python3.8/site-packages/wagtail/admin/views/mixins.py", line 230, in write_xlsx
    self.write_xlsx_row(worksheet, self.to_row_dict(item), row_number + 1)
  File "/home/wagtailio/.local/lib/python3.8/site-packages/wagtail/admin/views/mixins.py", line 148, in to_row_dict
    row_dict = OrderedDict(
  File "/home/wagtailio/.local/lib/python3.8/site-packages/wagtail/admin/views/mixins.py", line 149, in <genexpr>
    (field, multigetattr(item, field)) for field in self.list_export
  File "/home/wagtailio/.local/lib/python3.8/site-packages/wagtail/core/utils.py", line 369, in multigetattr
    raise AttributeError(

Exception Type: AttributeError at /admin/reports/aging-pages/
Exception Value: Failed lookup for key [last_published_by_user] in <Page: Team meeting notes 3rd February>

Create downloadable resource pack

(originally posted by @zerolab)

From the Wagtail slack:

maartenkling [8:50 AM]
There should be a official logopack somewhere on wagtail.io

This is a good idea. The pack should contain the Wagtail logo, "made with Wagtail" badge and variations. Maybe even a short brand styleguide.

UI need adjustments

From the wagtail features section, when the page is viewed on mobile or with smaller screen size, the texts overflows it box

Primary nav sub-menus should be dismiss-able with the Esc key

Related: #307. We don’t use a focus trap for those sub-menus, but there should nonetheless be a way to dismiss them with the keyboard.

See https://www.w3.org/WAI/ARIA/apg/example-index/disclosure/disclosure-navigation.html as an example.

Blog styling for inline code snippets

Currently looks a bit jarring. They're bold snippets inserted into light text. They probably should be a little smaller and highlighted with a grey box to help recognise them as code snippets.

https://wagtail.io/blog/wagtail-api-how-customize-detail-url/

Footer – At larger font sizes, content sits very closely and runs into each other in the footer

Suggested fix: Make sure spacing remains consistent at larger font sizes

Streamfield image output as original

Best to avoid this and use a proper rendition

Migrations not being run on deployment