- Link injection for document headers has been broken for a while due to my
misunderstanding of the "for in" syntax in JavaScript. This now works as expected.
- Same problem also prevented the feature that causes every link to outside of istio.io
to be opened in a separate window. This now works as intended.
- Made the gear dropdown menu be right-aligned such that it doesn't go off-screen on
portrait mode tablets.
- Stop importing Popper.js since it's only needed for dropdown menus that aren't in the
nav bar. Ours is in a nav bar...
- Added link injection for <dt> terms, which makes it easy to create links to individual glossary entries.
- Fix another issue with my arch-nemesis, the Copy button. My last fix for Copy button issues
resulted in screen flickering upon page loading. This is now fixed.
- Pin the size of the gear and magnifying glass icons in the header to avoid flicker as the
fonts for those renders a few ms too late and lead to flickering on page load.
- Cleaned up the site's JavaScript for clarity, and include minimized versions in the
site for improved perf.
The Google Crawl Engine reported a bunch of broken links pointing into istio.io.
This adds redirects so that these links work.
Add a hack such that the gear menu logic that lets you time travel through versions
of the site will insist that if a page existed in a given version, it must also exist
in subsequent versions. This will ensure we always create redirects when we move site
content, and thus avoid breaking links into the site. If a page is moved or removed,
this will lead to rake test errors when checking the content of archive.istio.io.
- We now automatically detect when a TOC has no entries in it and omit the spacing on the right side
for the TOC. This improves the formatting of a few pages on the site.
- Make an another attempt at preventing the dropdown arrow from wrapping under the cog on smaller screens.
This new solution seems to work across several browsers I've tried.
- Remove an extraneous header in one page.
- Add support for showing the archive date in the footer.
- Fix invalid HTML in the header which improves the responsive layout. In particular, the down arrow
for the dropdown menu tends to stay on the same line as the cog more than before.
- Tone down the blue color of links so it's not so intense. There's still good contrast
between links and normal text.
- Remove broken og:image meta tag from each page. It used to point to a logo.png
file, which we deleted months ago. Turns out it's not intended for web site logos
anyway.
- Add og:url and og:site_name per best practices.
- Remove one more stray border on the community page. I thought I got rid of 'em last time,
but I missed one.
- When you hover over an HTML header, we now pop up a link icon holding a link to the
header. Useful to support deep linking to a header.
- When you click on a link that points outside of istio.io, the target is now
opened in a separate tab.
- Improved the coloring of links in the light theme so they're more visible. I was almost not able to
see the difference between normal text and links, now the color delta is greater. Additionally, when
you hover on a link, we now draw an underline.
- Change the color of H1 headers to be black instead of being the same color
as links. They're not links, they shouldn't be that color.
* Add support for a dark color themes.
- The version dropdown is now replaced with a gear dropdown. This dropdown lets you
pick the version of the site to look at, and lets you pick the light or dark color
themes for the site.
- Fixed a rendering glitch on the community page where a stray right and bottom border
was rendered.
Four major themes to this work:
* Performance. This new site is fast. It loads considerably faster, especially on mobile.
Every pixel is drawn exactly once. Clicking around doesn't result in things jiggling everywhere.
* Navigation. I wanted to make it easier to get around the site, especially on mobile. To that end, we now have:
- Sticky navigation elements. The top nav bar, the left sidebar and the right TOC are now sticky and remain
on screen even as page content is scrolled.
- Tabs in the Docs section have been removed and integrated as accordion items in the left sidebar.
* Layout. I moved a bit of content around to make it easier to find and give us some room to grow:
- The Help page is now replaced with a full Help section. This provides a home for the FAQ, glossary,
bug reporting, and troubleshooting pages.
- The About page is now replaced with a full About section. This provides a home for the release notes, roadmap, upcoming "in the news" section, etc.
* Design. I tried to improve consistency across the site and provide a slightly lighter feel by minimizing the impact of some design elements. Specifics:
- Font sizes are now consistent across the site.
- The site does a much better job at adjusting to different screen sizes which makes the mobile experience better.
- Accessibility is improved by adding many attributes for screen readers, and by ensuring the site scales properly based on user-selected fonts.
Martin Taillefer