Updates the left sidebar and relative settings link in both the
current and new help center documentation.
Co-authored-by: Lauryn Menard <lauryn@zulip.com>
We chose not to edit the original markdown files to make this change
since the conversion script logic can be used for removing these lines
with very little changes and we don't need the original markdown source
files to be edited before the cutover.
The css for making loose and ordered lists look same has been removed
since we wanted to to respect commonmark specification.
We remove the ol > li margin rule to space out ordered list items since
that was the result of us overriding an upstream margin rule in
steps.css.
We inserted Steps inside include files only if they are not entirely
composed of an ordered list. If they are, they will eventually be
wrapped inside FlattenedSteps and wrapping these macros with Steps will
not give us the results we desire.
Using steps.css right now might feel like the more convenient way out,
but it might introduce friction in upgrades when the upstream code
changes. To tackle that, we convert FlattenList to FlattenedSteps and
explicitly use the steps component.
The format step was converting our ordered list items to have
incremental numbering instead of using `1.` for every list item. This
was not because of any remark-lint rule, but because of
`remark-stringify` which auto increments any lists it processes. We
followed the recommended fix from
ae2f941d88/packages/remark-lint-ordered-list-marker-value/readme.md (L185)
We also don't need remark-lint-ordered-list-marker-value package, since
that is already part of the markdown style guide with the value we
desire. Setting it to false was a mistake in the first place.
We should ideally be having this styling on class, but there is no
default class for li elements inside an ol. Maybe the best thing here is
to attach classes at different places if possible once have some spare
time after the important post cutover issues are done.
In the commits following this, we are going to make changes which will
introduce cases with paragraphs, code blocks and other elements inside
list items. Right now, FlattenList will just break in those cases. We
need to return those elements without flattening since those are valid
elements inside a list item.
Fixes#35118.
Visual tuning for this was done on a call, some of it was done in
https://chat.zulip.org/#narrow/channel/19-documentation/topic/new.20help.20center.3A.20design
For dark theme, we use the same color as we use in styling
`.tooltip-hotkey-hint`. For light theme, we brainstormed a color that
looked fine to us. Padding and font-size was also experimented and set.
Since we just took inspiration from `tooltip-hotkey-hint` and did not
use the same styling i.e. tweaked them, we do not add any comments
declaring dependency b/w both styles.
We increase the font-size from 0.85em to 1.2em, so we don't need to
increase font-size for ⌘ and ⌥ in scripts/adjust_mac_kbd_tags.ts.
Current help center had special styling for arrow keys, we don't port
that over here, since the styling we do for our keyboard shortcuts does
not necessitate that.
This commit does not apply the gradient for the idle user circle icon.
We are instead just displaying --color-user-circle-idle for now. #35496
tracks this followup.
We need to use icon tags in our markdown for the icons to be converted
to unplugin icons by the conversion script, this commit fixes that
problem at source for the availability icons.
The css is duplicated from portico/markdown.css, we have not added any
notes that this is duplicated since the css for these classes is already
being duplicated without warning and a simple grep while making those
changes would make it obvious on what changes need to happen.
Updates the NavigationSteps astro component to add a the
navigation-step-relative-type class for any instructions
that include icons as part of the potential relative link
label.
We remove the space between the icon and text in the label
item and instead use a CSS rule to add white space between
the icon and text. This way any text decoration rules will
not apply to the visual white space between the label's
icon and text.
We do not want icon + `Keyboard Tip:` to occupy it's own row. Our
approach for this component and most of the logic is similar to
ZulipTip. We prefer having separate components for note, tip and
keyboard tip, that is why we have duplicated code between ZulipTip and
KeyboardTip, we should think about having a single underlying component
for both to avoid duplication in the future.
We do not have any cases of non paragraph content in keyboard tip, so we
have removed that chunk of code when copying over logic from ZulipTip.
We do not want to have a heading for every tip and thus we created a
custom component for our aside. We want to add a lightbulb icon and the
text `Tip:` is bold as a prefix for every tip as if it was already part
of the text. To do that, we cannot insert both of those as html seperate
from the slot html, we had to access the slot html and insert both of
them into the HTML tree.
Fixes#35404.
The styling is just copy-pasted from existing styling.
For ⌘ and ⌥, we removed vertical align as middle, since it was not
aligning with the new css and it looked fine without it. The font-size
was also looking too big, which has been reduced but not all the way to
0.85em. At 0.85em, the symbol is not legible.
Even though we do not allow classes in svgs anymore, astro inserts it's
own class in some cases, causing problems with the icons. `defaultClass`
is only applicable if the svg does not have a class already. So we have
switched to using iconCustomizer instead so the zulip icons always have
the `zulip-unplugin-icon` class.
Somehow defaultStyle was not getting applied in all cases, but
defaultClass was getting applied in all cases. We don't have time to
investigate, but using a class is better anyways, so this change should
be fine.
Partially fixes#35129.
Prettier could not be used because of prettier issue number 12209, not
linked here to avoid spam backlinks on the original issue. Prettier does
not have support for mdx v2 and v3.
We are using remarkLintRulesLintRecommended and
remarkPresentLintMarkdownStyleGuide as our starting set of rules.
None of the rules were giving an error on the starting set, but some
rules were giving lots of warnings on the generated mdx. They are
set to false in this file, we can add them back later as and when
required.
We have not inserted this in the main lint tool, we should do that in
the final cutover PR since we don't want the lint here to give any
unexpected warnings when people are linting stuff unrelated to the mdx
files.
This commit has been tested out on the current state of help center to
not produce any errors or warnings. The first run of format will produce
tons of warnings which are the issues being auto-fixed by the linter.
After that, the second run should produce zero errors.
In some cases, some of the starlight css was inserting a margin top of
1rem to the svg tag inserted by unplgin-icons. We make the top margin
0 explicitly to make sure that extra margin is not added.
Slug was mentioned for the two entries in question as if they were
normal help pages, but they were external links and should have been
mentioned accordingly.
Having some options not set to true was causing hard to debug issues
when it comes to types. While that can be solved by changing `allowJs`
to true, it would be good to use the standard tsconfig they recommend in
order to avoid such issues in the future.
Fixes#31287.
These tags are not limited to just KeyboardTip, so we want to run the
transformation on all html.
We need to run the transformation client-side since the user's keyboard
style is only known at that time.
We had to override the HEAD component since that's what starlight
recommends to do if we want to include local assets on every page. If we
were using a remote js file, we could have modified the head config
option provided by starlight.
The script file to adjust the tags is mostly just copy-paste of the
original function to adjust for the lack of JQuery. Most of the comments
are also copy-pasted.
One change in the new script is to just use ⌘ symbol directly instead of
using zulip-icon since we don't have any centering problems in the new
help center.
Partially fixes#35130.
We will still need to do a second check before the cutover, but this
commit does most of the work before the cutover happens.
The comparison was done manually.
Added comment to sidebar index should help update these changes to astro
config, although we will not solely rely on people reading that. A
second check before cutover would be prudent.
Fixes#35119.
In the old help center, our css used to target each heading tag, h1, h2,
etc. individually. We don't need to do that anymore since the first
child of .sl-heading-wrapper is the heading element in starlight.
The rounded border on the top left and top right has been removed since
it did not look good with the default starlight theme.
Fixes#35116.
We copied whatever logic we needed from documentation_main.html. We have
not added the policy footer case from that html file into our footer
since that case does not apply to the new help center yet.
We process and pass the support email in the build help center step.
Even though we have separate packages for `help-beta`, we have opted to
put the prettier plugin and config for astro files in the main project
itself, so that linting needs to be configured only at one place.
