Commit Graph

154 Commits

Author SHA1 Message Date
mtail 8103d1f6e1 Disable the Edit This Page functionality for generated files. 2019-02-23 12:54:27 -08:00
Martin Taillefer 0ef9135a83
Add some buttons in preliminary mode. (#3365)
- We now display an "Edit this Page" and a "Report Bugs" button on every page
when rendering the preliminary mode site.

- Optimized the SVG imagery for smaller size and thus faster download & parsing.
2019-02-23 08:34:21 -08:00
mtail aadab8322c Implement a hack to ensure deep-linked table rows don't land under the page header. 2019-02-23 06:46:00 -08:00
mtail 70f61a6549 Fix bad rendering that happened when deep-linking to a table row. 2019-02-22 17:49:35 -08:00
Martin Taillefer 591815c72f
Eliminate the use of bootstrap and jquery. (#3323)
This removes two very large dependencies which ends up making
each page load considerably faster, especially on mobile. Plus,
not using bootstrap actually made several things simpler throughout
the site's logic.
2019-02-21 09:40:10 -08:00
mtail 405ad98764 A few infrastructure fixes
- Added some missing styling on the landing page.

- Fixed extra margin values in the dropdown menu.

- Improved popover positioning on small screens.
2019-02-20 07:44:55 -08:00
Martin Taillefer 959da91043
Infrastructure improvements. (#3306)
- Stop using Bootstrap's tab component.

- Improve the formatting of the hesder on mobile.
2019-02-20 06:41:40 -08:00
mtail 3762b1eda0 Ensure menu links are left-aligned 2019-02-19 09:40:53 -08:00
Martin Taillefer d5a9610fde
Implement custom navbar logic. (#3292)
- Stop using the bootstrap navbar. This new logic is considerably
simpler and gives a much better experience on mobile.
2019-02-19 07:55:45 -08:00
Martin Taillefer 532fe7d365
Add an icon in the title area of glossary term popovers. (#3286) 2019-02-18 13:34:04 -08:00
Martin Taillefer 4fb531c106
Add a sticky effect on the glossary page. (#3283) 2019-02-18 09:10:46 -08:00
Martin Taillefer 2dac7e0ff3
Site infra cleanup. (#3281)
- Refactor script code into smaller more manageable files.

- Use consistent naming style in script code.

- Stop using Bootstrap's dropdowns and popovers in favor of custom implementation.
There are only a few uses of Bootstrap to purge before I can ditch
the dependency on the Bootstrap & JQuery libraries, which will speed
up page loads.

- Find a few more static strings that should come from the xlation
dictionary instead.
2019-02-18 07:35:37 -08:00
mtail 569a4cfde1 A few fixes.
- Fix ordering of the new "Older Notes" entry in the release notes
area to ensure it is always last.

- Fix layout issue with narrow widths clipping a few characters off the left
edge of the page.

- Remove offending href syntax leading to bogus complaints from htmlproofer.
2019-02-15 06:58:41 -08:00
mtail c8e6f0e285 Make switching site versions smarter.
When you select a different version of the site from the gear menu,
we now try to put you on the same page in the other version if that
page exists. If the same page can't be found, then you land at the
root of the other site, like you did before.
2019-02-14 21:34:52 -08:00
mtail a846186fc3 Eliminate manipulation of styles from JavaScript, only deal with classes. 2019-02-14 11:52:47 -08:00
mtail 3102359979 Simplify theme loading. 2019-02-14 05:52:50 -08:00
mtail 1a661fa80d Add support for legacy cookie values. 2019-02-13 22:28:27 -08:00
mtail 0077232110 Fix style switching problem in the updated JavaScript. 2019-02-13 20:34:17 -08:00
mtail 995ade5d61 Fix a null reference in JavaScript. 2019-02-13 20:02:34 -08:00
mtail 27ee224471 NOP changes to see if this will fix Chrome caching issues. 2019-02-13 15:51:16 -08:00
Martin Taillefer 3eba576a89
JavaScript cleanup (#3253)
- Upgrade from UglifyJS to Babel as a JS preprocessor. This lets me use modern ES6 syntax
in the JS code.

- Update JS code to leverage ES6.

- Remove most dependencies on JQuery for faster & smaller code. Once I remove the
dependency on the Bootstrap library, then the dependency on JQuery will also completely
go away.
2019-02-13 10:10:28 -08:00
Martin Taillefer d6b3bfac56
Add support for {{< quote >}} (#3237) 2019-02-12 08:22:28 -08:00
mtail 6875addb8c Layout tweaks. 2019-02-12 07:13:40 -08:00
mtail 99d49417ab Style tweak. 2019-02-11 22:11:02 -08:00
mtail 5728d9c7d1 Adjust callout icon position. 2019-02-11 21:55:10 -08:00
mtail 44db7ca6a0 Adjust color of callout icon. 2019-02-11 21:49:05 -08:00
mtail 8da1d3e8bc Update callout icons to be more in-line with our general style. 2019-02-11 21:42:05 -08:00
Martin Taillefer e9112e7a65
More style cleanup. (#3230) 2019-02-11 21:07:03 -08:00
Martin Taillefer eefe51cdac Fix #1324 to the code block EOF logic. (#3229) 2019-02-11 13:23:23 -08:00
mtail 8a204d754e Fix behavior of <<EOF in the middle of a line in a text block. 2019-02-11 10:07:02 -08:00
mtail a84091c02c A few more layout fixes.
- Improve primary layout to deal with edge cases better.

- Make FAQ landing page use a masonry layout.
2019-02-11 09:44:26 -08:00
mtail e2aec3458e Improve the glossary popovers so they work better on mobile. 2019-02-10 20:36:25 -08:00
mtail 9ad3ad771c A few more fixes. 2019-02-10 19:12:13 -08:00
mtail efdae03b36 A few more fixes following the big cleanup. 2019-02-10 16:17:45 -08:00
mtail 6f7fa1445f A few layout tweaks following the big cleanup. 2019-02-10 07:52:43 -08:00
Martin Taillefer 141a2182c2
A bunch of infrastructure cleanup. (#3221)
- Switch from the Bootstrap grid system to the CSS grid. Much cleaner and faster.

- Add "See also" and "Links" to the list of translation strings

- Prevent the breadcrumb line from being included in the link endnotes when printing a page.

- Cleanup/rename several of the CSS and layout files for clarity.

- Switch the community page from using clumsy tables to a much cleaner approach
with shortcodes.

- Don't show buttons in the link endnotes when printing a page.

- Don't render the link endnotes section at all if the page has no links to include
2019-02-10 07:21:19 -08:00
Martin Taillefer c32db038ed
Introduce support for glossary term highlighting. (#3211)
- You can now mark a word as being a glossary term. This will trigger special rendering inviting the
user to click on the item in order to get a popup window showing the glossary text for the term. This
is very nice when introducing a new term within a page.

- Updated our dependency  on Bootstrap and ClipboardJS to the latest versions.
2019-02-08 07:29:38 -08:00
Martin Taillefer 68bb3e5b4e
Fix hard-to-read color combination with table headers + code blocks. (#3207) 2019-02-07 10:05:25 -08:00
mtail 66b3dbee50 Quick CSS adjustments to the new warning/tip/idea callouts 2019-02-01 17:12:48 -08:00
Martin Taillefer dd782b3d12
Improve the looks of warnings, info blobs, and tips. (#3181) 2019-01-31 12:11:53 -08:00
Martin Taillefer 4b22211317
Add breadcrumbs at the top of each content page. (#3093) 2019-01-16 09:46:52 -08:00
Martin Taillefer 4c17edcd56
Fix a few issues. (#3092)
- Fix formatting for the Subscribe link on blog pages. That got broken in some refactoring I did a while back.

- Remove a few *NOTE* and _NOTE_ instances and replace with the canonical icons

- Add a link to our community repo in the Getting Involved page.
2019-01-15 20:50:00 -08:00
Martin Taillefer d7c4eb33f5
Switch to discuss.istio.io (#3071) 2019-01-10 07:11:00 -08:00
Martin Taillefer 777abf274a
Improve tab behavior. (#2923)
- Address rendering issue with text blocks nested in a tab that use
the magic @@ linking sequence.

- Made it so when selecting a tab in a particular tab set, other tabset
sharing the same cookie name on the current page will also switch to their
corresponding tab.
2018-11-27 07:25:15 -08:00
Martin Taillefer 9cbb0db783
Clearly indicate which version of k8s we support. (#2786) 2018-10-19 12:53:12 -07:00
Mark van Straten e146dbb97f Fix logo hover state rotation (#2781)
* Fix logo hover state rotation

The logo rotates upon hover but it was not centered correctly. This was caused
because no explicit height was defined for the logo container. By doing so
we now can have the transform use 50%,50% as the center point for smooth
rotations.

This change has been tested in Chrome Version 69.0.3497.100 (Official Build)

* Make the logo be actually circulair

The SVG radius did not account for the border of the circle
causing it to be chopped off at the edges. By subtracting
the border size from the radius (*2) we now have a perfect
looking circle.

This change has been tested in Chrome Version 69.0.3497.100 (Official Build)

* make build scss => css
2018-10-19 11:14:23 -07:00
Martin Taillefer a2026aab5e
Clean up a bunch of loose ends (#2745) 2018-10-05 22:21:56 -07:00
mtail ecbdbd787f Fix logo rendering for partner components. 2018-10-05 11:59:25 -07:00
Martin Taillefer aec96f3233
Add support for logos in partner components (#2724)
* Add support for logos for partner components.

* Update reference docs.
2018-10-02 12:04:15 -07:00
Martin Taillefer 208760597b
Add support for partner components. (#2704)
Partner components (adapters not controlled by the Istio org) are now
called out as such on their page. Component authors have a chance to put
all sorts of info about their component to make it easy for customers
to find and use their component.
2018-09-28 15:40:10 -07:00
Martin Taillefer edfdf7d795
Site improvements. (#2663)
* Site improvements.

- For SVG images, authors no longer need to specify image ratios
(which is a constant source of errors)

- Move more icons into the new icons.svg file to further reduce
average page load times.

- Rationalize Istio logo file names.

- Improve underlining behavior for sidebar headers and the RSS feed
Subscribe link.

- Made the RSS feed subscribe link open in a new tab.

- Increase the constract ratio for some elements in dark mode
text blocks (namely, YAML field names)

- Reduce the "brightness" of the light bulb icon which helps it
not pop so much in dark mode.

- Optimize the fonts we load and the order we load them in so as to improve page load time and
reduce the initial render time.

* Sadly, embedding SVGs into the HTML results in duplicate element ids, which is invalid HTML :-(
2018-09-21 17:56:46 -07:00
Martin Taillefer 0a4264417f
Site improvements (#2633)
- Use a new approach to managing icons. This has two primary benefits:

  - It makes it possible to color the icons such that they look good in the
    dark theme. Previously, the icons were rendered in black on dark grey when
    using the dark theme.

  - The average payload size for our web pages is reduced and we better use the
    browser cache.

- The new icon approach makes it possible to remove our dependency on the fontawesome
  package, which further slims down our payload requirement

- Refresh our iconography for a slightly lighter look.

- Remove the extra thick left-hand border of text blocks to lighten the
look.

- Added a "NN minutes to read" indication on top of each page. This is
only displayed if the count is > 1 minute.

- Added a calendar icon next to the blog post date.

- Exposed a bunch of strings that were buried in CSS/JS to translation.

- Add the 'keywords:' front-matter fields to the Hugo archetypes.
2018-09-17 08:52:23 -07:00
Martin Taillefer ab869ca88f
Fix compatibility issue with dynamic text and Firefox. (#2523) 2018-09-05 09:36:18 -07:00
mtail 69905f95da Fix rendering bug with the output section of some text blocks, 2018-09-02 08:53:42 -07:00
Martin Taillefer 815aaaa72e
Finish implementing tab support. (#2492)
- Support cookies. Tab setting are now remembered across page visits. Set it, and forget it.

- Fix problems with nested text blocks.
2018-09-01 08:59:39 -07:00
Martin Taillefer 99be6fd164
Add support for tabbed content. (#2484) 2018-08-31 08:13:21 -07:00
Martin Taillefer 2796aca4ac
Add download, diff, and docs links to release notes. (#2441) 2018-08-28 13:07:27 -07:00
Martin Taillefer 7c34e8aaa1
Add 'Customers' and 'Partners' pages (#2266) 2018-08-27 07:27:38 -07:00
Martin Taillefer 59fe531036
Formatting improvements for mobile. (#2397)
- Fix background color of text areas not being applied correctly for extra-wide blocks.

- Incressed padding around text areas in mobile to make selection easier.

- Removed the right-hand side indent of text areas and block quotas when in mobile.

- Reduced the left-hand side indent of block quotas on mobile.
2018-08-26 06:00:31 -07:00
mtail dc8076aba2 Fix overlapping sidenav button on mobile. 2018-08-25 07:17:07 -07:00
mtail 0cfa623f60 Fix position of hero text on landing page, on mobile. 2018-08-25 07:17:07 -07:00
Martin Taillefer 5e29d61ff2
Bunch of site fixes & improvements. (#2306)
- Correct the use of OpenGraph annotations. I used the wrong attribute name, so the
annotations were never recognized.

- Added support for Twitter cards to our site, improving the experience of referencing
the site from Twitter posts.

- Added support for the twitter: front matter field for use in blog posts. Specifying this
front-matter entry will show the author's twitter address on the blog post, and will
add a Twitter card entry to the page noting the author's address.

- Renamed the page_icon front matter field to just icon to be consistent with other
entries.

- Made it so the subtitle front matter field can be used anywhere, not just on blog posts.

- Added a lint check to ensure subtitles don't end with a period.

- We now insert an "author" metadata entry whenever the attribution: front matter
field is used.
2018-08-19 11:51:03 -07:00
Martin Taillefer 894b0b6b5a
CSS fixes (#2229)
Improve long-standing hack that makes link anchors and a sticky nav header
work together. The improved hack deals correctly with varying font sizes,
removing the need for custom hackery for the FAQ and Glossary pages.

Fixes a slight rendering discrepency when printing pages.
2018-08-12 05:46:57 -07:00
Martin Taillefer 6ac9175b3a
Fix scroll offset when linking to a FAQ entry (#2208) 2018-08-10 13:58:03 -07:00
Martin Taillefer 5d6c5c1e5c
Refresh the glossary and attribute vocabulary based on current reality. (#2142) 2018-08-06 13:44:05 -07:00
mtail 06980e3b1f Fix accidental CSS change, leading to a missing border on TOCs. 2018-08-06 13:22:00 -07:00
mtail 387e54c299 Make the big boxes on the home page clickable. 2018-08-03 16:08:14 -07:00
Martin Taillefer 26bd62e408
Final release material (#2028)
- New landing page layout and content.

- 1.0 announcement blog post

- New "what is istio" page
2018-07-30 21:37:03 -07:00
Martin Taillefer e904354a05
Improve FAQ page design (#2025) 2018-07-27 15:07:51 -07:00
Martin Taillefer 9d56f3dbe7
Various design changes. (#1976)
- Increase the size of the Copy button in preformatted blocks to make it stand out since it is the
most common used button.

- Shift the copy/download/print buttons in PRE blocks towards the left so they don't overlap the
scroll bar in large text blocks.

- Switch to new fonts.

- Instead of underlining <H2> headers, we now draw a blue bar above them.

- Add an "up level" button at the top of pages.

- Streamline the appearance of the next/previous page links at the bottom of most pages.

- Remove the right pointing arrows from index pages and see also sections. They were just
confusing.

- Add icons to the main pages.

- Slightly change the layout of the glossary page, more to come here.
2018-07-26 06:14:32 -07:00
mtail a5b61d5754 Trivial script fixes. 2018-07-22 08:59:52 -07:00
Martin Taillefer de8893a255
Add a Media Resources page. (#1832) 2018-07-16 15:54:17 -07:00
Martin Taillefer 8d43a50c8c
Add some cool arrows on section index pages and see also sections. (#1734) 2018-07-10 21:46:34 -07:00
Martin Taillefer 3d511f5a70
Various site fixes. (#1701)
- Prevent See Also sections from showing up on index pages.

- Clean up and simplify some JavaScript & CSS.

- Set a height for the idea and warning icons in order to prevent
screen flicker when loading pages with these icons.
2018-07-08 17:12:12 -07:00
Martin Taillefer 072abae8ce
Improve name selection process for the new PRE block download feature. (#1693)
- If an explicit downloadas filename is not supplied in markdown, it is
now derived from the document title, with a proper extension based on the
content syntax.

- Made things work correctly for PRE blocks introduced with normal markdown
``` instead of our magic {{< text >}} sequences.
2018-07-06 18:59:46 -07:00
Martin Taillefer 512fdb5b61
Add download & print buttons to all PRE blocks. (#1680)
Also, replaced the text in the Copy button with an icon instead.
2018-07-06 05:30:35 -07:00
mtail 0c11b76949 Use cards for See Also section 2018-06-30 19:22:12 -07:00
Martin Taillefer 0541000be8
Switch from ``` to {{< text >}} to indicate text blocks. (#1644)
This fixes a number of cases of incorrect formatting of code blocks
throughout the site.
2018-06-30 07:11:21 -07:00
Martin Taillefer c5ca64e5f2
Improve how we render section index pages. (#1643)
Instead of using a boring flat list of pages, we now render
modern-looking cards for each subsection.
2018-06-29 20:53:00 -07:00
Martin Taillefer d818d4713b
A few rendering fixes. (#1626)
- Workaround the fact some of the styles for code blocks were being overriden by
Bootstrap.

- Align table indent and code indent so things look nicer.

- Fix missing "sidebar button" when on mobile in the help and about sections. I forgot to set a
variable to trigger the thing to be present in those cases.

- Improve footer layout for mobile.

- Get a nicer looking light bulb icon.
2018-06-29 06:52:07 -07:00
Martin Taillefer 5a1b090fbc
Improve handling for code blocks (#1580)
- Add the {{< text >}} shortcode as a way to declare code blocks. This shortcode
is intended to hide the subtleties around code blocks. More specifically, it
provides a transparent workaround for the Hugo bug around converting indented
code blocks with lines starting with dashes. It also deals with the special
formatting case we have around command-lines that start with `cat <<EOF`.

- Rename the {{< file_content >}} shortcode to {{< text_file >}} and the
{{< fetch_content >}} shortcode to {{< text_dynamic >}} for consistency in naming.
2018-06-28 06:29:27 -07:00
mtail 4b0216e3bb Add the promotion CSS style for promo banners. 2018-06-26 23:29:47 -07:00
mtail 329984475b A bit of refactoring to improve clarity. 2018-06-26 11:10:03 -07:00
mtail c72a8257b8 TOC improvements.
- Make "See also" show up in the TOC.

- When inlining the TOC at the top of a page, surround it with a pair of <hr> tags to get a line on the screen

- Fix rendering bug with TOC when specific characters showed up in section titles.

- Fix extra indent in the TOC in certain cases.

- Rename "See Also" to "See also" to follow our naming guidelines.
2018-06-19 06:39:37 -07:00
mtail e406513c0b Change the border color around the dropdown menu so it shows up. 2018-06-16 22:44:47 -07:00
mtail b72cd28cb3 Undo experiment (it worked!) 2018-06-16 22:14:02 -07:00
mtail 5cf5c040b1 Experiment with Netlify language cookie override. 2018-06-16 21:59:12 -07:00
mtail 9e9bcb2d5d Make the infrastructure TOC stuff robust against incorrect HTML. 2018-06-11 14:59:05 -07:00
mtail 48f47d6feb Add missing ; in .scss files. 2018-06-09 21:58:11 -07:00
Martin Taillefer 1dcd301bd6
Introduce better linking support to github.com/istio/istio (#1443)
- Within a code block, you can now surround a relative file path with @@. This will
cause the path to be rendered as a link to raw.githubusercontent.com/istio/istio/<path>.
This lets the user click on the link to see the content of the file, which is mighty
handy.

- Updated all code blocks to take advantage of the above.

- Introduce support for {{< branch_name >}} which returns the source code branch
name associated with the current doc site.

- Use {{< branch_name >}} in all our references to content in istio/istio on GitHub. This thus
pins our references to the correct version of the content in GitHub. This prevents errors from
gradually appearing in our doc set as content in GitHub starts to diverge from the expectation
in the site content.
2018-06-06 08:21:18 -07:00
Martin Taillefer 9bd12eebd4
Fix a couple issues around code blocks. (#1440)
- Include JSON syntax coloring support in PrismJS. This prevents
JavaScript crashes when trying to format output that's marked as JSON.
This was happening on the tasks/traffic-management/mirroring.md page.

- Properly escape strings raw output strings before inserting them into the
document. This bug was causing strange things to happen if any of the content
contained stuff that looked like HTML, such as the word <none>.
2018-06-04 13:01:09 -07:00
mtail 33d2d38e77 Don't attach links to <h1> headers. 2018-06-03 05:39:26 -07:00
Martin Taillefer c389a3af38
Couple site fixes. (#1408)
- Get style switching working again.

- Don't show the Edit this Page option for the archived version of the site.
2018-06-01 06:16:21 -07:00
Martin Taillefer efce7c3a4e Workaround bug in Firefox causing bad formatting in some code blocks. (#1379)
- Fixed syntax highlighting of code blocks with multiple commands.
Each command is now run through the syntax highlighter separately, instead
of mushing all commands into one go. The leading $ is also excluded which
helps the highlighter.

- Fixed the CSS source maps which couldn't be found due to a path problem. Running with Firefox
alerted me to that.

- Add missing JS source maps while I was there.
2018-05-29 22:21:28 -07:00
Martin Taillefer ba0cf03b36 A number of visual improvements. (#1366)
- The privacy link in the footer is now actually visible and uses the same coloring as the rest of the
text in the footer.

- The gear menu in the top right now actually looks like a real menu instead of a panel of links. Highlights behave as expected and
visuals are cleaner.

- The :before hack to cause proper scrolling in the face of our header is now more selective. It's only applied to
header items instead of all items that have an id attribute. This is more surgical in nature and avoids
potential issues such as was worked around by a counter-hack for tables. The counter hack is no longer
needed.

- Don't show the Edit This Pages on GitHub menu items for pages that are generated outside of the main doc process
(reference pages mainly). This won't kick in until I regenerate the reference docs, at which point they'll
gain the 'generated' front-matter entry, which will trigger the removal of the menu item.

- Apply a number of script improvements suggested by my editor.
2018-05-29 21:07:13 -04:00
Martin Taillefer b7d8a08998
Workaround Hugo formatting bug with indented code blocks that have lines that start with - (#1372) 2018-05-28 09:14:31 -07:00
mtail 951a8ed9f4 Switch from Jekyll to Hugo. 2018-05-25 20:02:32 -07:00
mtail 401989fba6 Shuffle content around for the Hugo migration. 2018-05-25 19:27:39 -07:00
Frank Budinsky 3466086ed0 put image back from src (#231) 2017-05-16 01:45:35 -04:00
Frank Budinsky b31ce8ed73 zipkin-tracing task and bookinfo sample cleanup (#229)
* zipkin-tracing task and bookinfo sample cleanup

* resolve merge conflicts
2017-05-16 01:32:57 -04:00