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>
This commit adds a "Create your own" button on the integrations page. It
redirects to "api/integrations-overview" page and is placed by the side
of "Request an Integration" button.
Fixes#7935
There was no proper documentation to guide user to request an integration.
The following changes documents the whole process and links it from the
`/integrations/` page making it visible to the end-user.
Fixes#7935
This fixes a bundle of issues where we were missing "" around
attributes coming from variables. In most cases, the variables were
integers or fixed constants from the Zulip codebase (E.g. the name of
an installed integration), but in at least one case it was
user-provided data that could potentially have security impact.
We now prevent these variations:
* <hr/>
* <hr />
* <br/>
* <br />
We could enforce similar consistency for other void
tags, if we wished, but these two are particularly
prevalent.
I rearranged the elements of the left sidebar in HTML in order to appear
in the order they are displayed and removed the absolute positioning,
because it was not needed if the elements are arranged correctly. I used
`flex` display to arrange them on column.
I removed the styling that positioned the elements absolutely.
Then I tweaked the margins in order to make the elements look good.
Fixes: #12929
This addition was made so I can deduplicate the selectors like this one:
`.markdown ol > li, .portico-landing.integrations ol > li `and move the
`.markdown` CSS in another file (in a further commit).
Change the display from `block` to `flex` in order to be able to
arrange the elements as wanted. Reset the css of the header elements
only for the description view. Add `font-size: 1.2em` because the font
doesn't need resizing in this case, it needs resizing only when the
title is in the box.
Removed the `padding-bottom` from the `nav` on mobile because it
overlaps the new header and you cannot click the back button from the
integrations.
Fixes: #12365.
Here we just fix the behaviour of angle icon which is present
in the integration categories dropdown. It used to change direction
from down to right only if "All" options from the dropdown was
selected (which is also the initial and default option). This behaviour
was pretty inconsistent and looked odd. Rather than having a direction
changing icon here, it migth be just better to stick with just the
down facing angle arrow. Arrow direction in general represents in
which direction the dropdown is gonna open up (in addition to the
fact that a dropdown exits here).
Otherwise validator.nu warns about the empty header tags. The
placeholder text is replaced by JavaScript.
Signed-off-by: Anders Kaseorg <andersk@mit.edu>
This commit transitions landing-page.css from the Django pipeline
to being compiled by webpack as landing-page.scss under the
'landing-page' and 'integration' bundles.
Apparently, essentially every one of our landing pages extending
portico.html had two copies of portico.css included in their head
section; one from porticocustomhead (or the super of customhead) and
the other directly included.
Clean this up by removing all these duplicate inclusions of the
portico stylesheet.
We make some specific cases of tags use 2 space indents.
The case description:
* A tag with opening tag spread over multiple lines and closing tag
on the same line as of the closing angle bracket of the opening tag.
* A tag with opening tag spread over multiple lines and closing tag
not on the same line as of the closing angle bracket of the opening
tag.
Example:
Case 1:
Not linted:
<button type="button"
class="btn btn-primary btn-small">{{t "Yes" }}</button>
After linting:
<button type="button"
class="btn btn-primary btn-small">{{t "Yes" }}</button>
Case 2:
Before linting:
<div class = "foo"
id = "bar"
role = "whatever">
{{ bla }}
</div>
After linting:
<div class = "foo"
id = "bar"
role = "whatever">
{{ bla }}
</div>
Category 'All' -> text 'Filter by category'; icon chevron right when
the dropdown is closed, icon chevron down when the dropdown is open
All other categories -> text CATEGORIES[state.category]; icon chevron down
A large portion of the diff for landing-page.js is due to refactoring the
contents of integrations_search into top level UI update functions.
State flows as follows: dispatch(action) -> render(state) -> update UI
Routes now use pushState instead of hashes.
On transition between categories scrolling position is fixed,
and on transition between catalog and integration sub-pages the page
scrolls to the top.
Prior to this commit, 7 megabytes of images (through 253 individual requests)
were heavily slowing down the initial load. With this commit, we load only the
logos (60 or so images).
Documentation and images for the individual integration sub-pages is requested
separately using the /integrations/doc/ endpoint, which returns HTML.
On /integrations.
For scalability and people who type fast, update_integrations is
debounced; the function will postpone its execution until after
50 milliseconds after it was last invoked.
This preserves the scrolltop state of the user when they enter into
an integration's specifics, so when they exit out it scrolls them
back down the page.
Fixes: #4424.
