Remove overflow: hidden from the body and overflow: auto from the
.markdown element. Adjust the scroll-margin-top on the heading
elements so that using the hash, the page opens at perfect
location. Add position: fixed to .sidebar so that it does not scroll
with the content.
For the mobile view, change the .sidebar right from 100vw to 100%.
Also change how the hamburger menu changes its position: use right
instead of left as that works better than translate combined with
left.
If the script comes from a different origin than the requesting page,
and is not marked `crossorigin="anonymous"`, the `window.onerror`
handler receives no information other than "Script error." in the
event of a runtime error.
This effectively silences blueslip errors in development if the user
is developing on a remote host (such as a DigitalOcean droplet), since
static resources are served from `hostname.zulipdev.org`, and the
realm is served from `realmname.hostname.zulipdev.org`. It also
silenced blueslip reporting in production for any non-default (non-"")
realms. Sentry reporting, Vagrant developments, and truly ancient or
insecure browsers were unaffected.
Add the necessary `crossorigin="anonymous"` attribute to the
`<script>` tag to allow blueslip access to this error information.
Removes the default title element of "Zulip" from `base.html` and
the default meta-description sentence from `meta_tags.html`. Also
removes default open graph metadata.
For portico templates that would would fail tests, set both
`PAGE_TITLE` and `PAGE_DESCRIPTION` variables with appropriate
content.
Co-authored-by: Alya Abbott <alya@zulip.com>
Renames existing template variables starting with `OPEN_GRAPH` to be
either `PAGE` or `PAGE_METADATA` since these variables are used for
adding both open graph metdata and page titles/descriptions for SEO.
This reverses the policy that was set, but incompletely enforced, by
commit 951514dd7d. The self-closing tag
syntax is clearer, more consistent, simpler to parse, compatible with
XML, preferred by Prettier, and (most importantly now) required by
FormatJS.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
It does not seem like an official version supporting Webpack 4 (to say
nothing of 5) will be released any time soon, and we can reimplement
it in very little code.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Apparently, we were incorrectly using constants for title/description
rather than the nice non-constant values from og:title and
og:description in our meta tags.
With this implementation of the feature of the automatic theme
detection, we make the following changes in the backend, frontend and
documentation.
This replaces the previous night_mode boolean with an enum, with the
default value being to use the prefers-color-scheme feature of the
operating system to determine which theme to use.
Fixes: #14451.
Co-authored-by: @kPerikou <44238834+kPerikou@users.noreply.github.com>
Python 3.7 changed dict.update to avoid swallowing exceptions when
checking for the keys attribute (https://bugs.python.org/issue31572).
This broke {}.update(jinja2.Undefined()).
Fix it with an explicit default.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
In a gigantic realm where we send several MB of `page_params`, it’s
slightly better to have the rest of the `<body>` available to the
browser earlier, so it can show the “Loading…” spinner and start
fetching subresources.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
This sidesteps tricky escaping issues, and will make it easier to
build a strict Content-Security-Policy.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
This allows parsing and resource loading to continue in parallel with
script fetching. It also means we don’t need to concern ourselves
with explicitly waiting for the DOM to become ready.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
Commit db45d220a8 (#3996) disabled
mobile zooming on all pages, with the reasoning that focusing an input
may automatically zoom the page and break content. I’m not sure
whether that was a good reason, but at most it only applies to the app
page. Reenable zooming on all other pages like the portico and
documentation to improve their accessibility.
(Note: the other common reason to disable zooming, which was that
mobile browsers once added a 300ms tap delay to recognize double-tap
zoom gestures, has been obsolete since 2014:
https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away)
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
<script charset=…>, <script type=…>, and <style type=…> are “obsolete
but conforming” in HTML5. They make the validator.nu output noisier
and real problems a little harder to find.
(type was required in HTML 4, which is not relevant to us.)
Signed-off-by: Anders Kaseorg <andersk@mit.edu>
This commit moves all files previously under the 'app' bundle in
the Django pipeline to being compiled by webpack under the 'app'
entry point. In the process, it moves assets under the app entry
to a file called app.js that consumes all relevant css and js files.
This commit also edits the webpack config to be able to expose certain
variables for third party libraries that are currently required by
some modules. This is bad coding form and should be refactored to
requiring whatever dependencies a module may have; we're just
deferring that to the future to simplify the series of transitions we
need to do here. The variable exposure is done using expose-loader in
webpack.
The app/index.html template is edited to override the newly introduced
'commonjs' block in the base template. This is done as a temporary
measure so as not to disrupt other pages on the app during the transition.
It also fixes the value of the 'this' context that was being inferred
as window by third party libraries. This is done using imports-loader
in the webpack config. This is also messy and probably isn't how we
want things to work long term.
We use the attrs property provided by render_bundle function of
django-webpack-loader to add `nonce="<csp_nonce_val_here>" to
js scripts being rendered by webpack.
This disables the zooming ability of the mobile webpage which is good
as focusing on input will automatically zoom the page and sometimes
break content.
The portico template inherits base but not index, but index inherits
base. Therefore the viewport meta-tag should be moved to base so that
the entire site can have the meta tag.
This results in a substantial performance improvement for all of
Zulip's backend templates.
Changes in templates:
- Change `block.super` to `super()`.
- Remove `load` tag because Jinja2 doesn't support it.
- Use `minified_js()|safe` instead of `{% minified_js %}`.
- Use `compressed_css()|safe` instead of `{% compressed_css %}`.
- `forloop.first` -> `loop.first`.
- Use `{{ csrf_input }}` instead of `{% csrf_token %}`.
- Use `{# ... #}` instead of `{% comment %}`.
- Use `url()` instead of `{% url %}`.
- Use `_()` instead of `{% trans %}` because in Jinja `trans` is a block tag.
- Use `{% trans %}` instead of `{% blocktrans %}`.
- Use `{% raw %}` instead of `{% verbatim %}`.
Changes in tools:
- Check for `trans` block in `check-templates` instead of `blocktrans`
Changes in backend:
- Create custom `render_to_response` function which takes `request` objects
instead of `RequestContext` object. There are two reasons to do this:
1. `RequestContext` is not compatible with Jinja2
2. `RequestContext` in `render_to_response` is deprecated.
- Add Jinja2 related support files in zproject/jinja2 directory. It
includes a custom backend and a template renderer, compressors for js
and css and Jinja2 environment handler.
- Enable `slugify` and `pluralize` filters in Jinja2 environment.
Fixes#620.
Anders Kaseorg
Signior-X
Alex Vandiver
Lauryn Menard
Sahil Batra
Tim Abbott
MariaGkoulta
Anders Kaseorg
Tim Abbott
Anders Kaseorg
Armaan Ahluwalia
Steve Howell
Vishnu Ks
Aditya Bansal
Akash Nimare
Brock Whittaker
Harshit Bansal
Mehanig
Yago González
Raghav Jajodia
Tim Abbott
Umair Khan
David Roe