Docs - jpeg webp conversion

sitevision · Jul 13, 2023 · 5a81647 · 5a81647
1 parent 05a988f
commit 5a81647
Show file tree

Hide file tree

Showing 139 changed files with 72 additions and 51 deletions.
diff --git a/packages/envision-docs/gatsby-config.js b/packages/envision-docs/gatsby-config.js
@@ -42,7 +42,22 @@ module.exports = {
  {
  resolve: 'gatsby-remark-prismjs',
  options: {
- inlineCodeMarker: '~',
+ languageExtensions: [
+ {
+ language: 'html-no-example',
+ extend: 'html',
+ definition: {
+ superscript_types: /(SuperType)/,
+ },
+ },
+ {
+ language: 'js-no-expand',
+ extend: 'javascript',
+ definition: {
+ superscript_types: /(SuperType)/,
+ },
+ },
+ ],
  },
  },
  {
@@ -86,7 +101,7 @@ module.exports = {
  background_color: '#444',
  theme_color: '#444',
  display: 'minimal-ui',
- icon: 'static/images/envision_logo.png',
+ icon: 'static/images/envision_logo.webp',
  },
  },
  ],

diff --git a/packages/envision-docs/src/components/Header/index.js b/packages/envision-docs/src/components/Header/index.js
@@ -18,7 +18,7 @@ const Header = ({ title, menuItems }) => {
  <link
  rel="icon"
  type="image/png"
- href="/images/envision_logo.png"
+ href="/images/envision_logo.webp"
  sizes="32x32"
  />
  </Helmet>

diff --git a/packages/envision-docs/src/hooks/expandCode.js b/packages/envision-docs/src/hooks/expandCode.js
@@ -15,6 +15,12 @@ export const useExpandCode = (content) => {
  content.current
  .querySelectorAll('.gatsby-highlight[data-language]')
  .forEach((element) => {
+ if (
+ element.dataset.language.includes('no-example') ||
+ element.dataset.language.includes('no-expand')
+ ) {
+ return;
+ }
  const pre = element.querySelector('pre');
  if (pre && pre.clientHeight > window.innerHeight * 0.25) {
  const button = document.createElement('button');

diff --git a/packages/envision-docs/src/pages/components/cards.md b/packages/envision-docs/src/pages/components/cards.md
@@ -45,7 +45,7 @@ its width and height to make a nice aligned grid of cards.
  <div class="env-card__body">
  <img
  class="env-card__image env-profile-image env-profile-image--small"
- src="https://envisionui.io/placeholders/profile/200x200/01.jpeg"
+ src="https://envisionui.io/placeholders/profile/200x200/01.webp"
  alt="Example profile image"
  />
  <h2 class="env-ui-text-subheading">Lorem Ipsumsson</h2>
@@ -68,7 +68,7 @@ its width and height to make a nice aligned grid of cards.
  <a href="#">
  <img
  class="env-profile-image env-profile-image--small"
- src="https://envisionui.io/placeholders/profile/200x200/02.jpeg"
+ src="https://envisionui.io/placeholders/profile/200x200/02.webp"
  alt="Example profile image"
  />
  </a>
@@ -132,7 +132,7 @@ Use one `env-cardholder__slot` to hold each Card. See configuration options belo
  <div class="env-card__body">
  <img
  class="env-card__image env-profile-image env-profile-image--small"
- src="https://envisionui.io/placeholders/profile/200x200/05.jpeg"
+ src="https://envisionui.io/placeholders/profile/200x200/05.webp"
  alt="Example profile image"
  />
  <h2 class="env-ui-text-subheading">Lorem Ipsumsson</h2>
@@ -155,7 +155,7 @@ Use one `env-cardholder__slot` to hold each Card. See configuration options belo
  <div class="env-card__body">
  <img
  class="env-card__image env-profile-image env-profile-image--small"
- src="https://envisionui.io/placeholders/profile/200x200/04.jpeg"
+ src="https://envisionui.io/placeholders/profile/200x200/04.webp"
  alt="Example profile image"
  />
  <h2 class="env-ui-text-subheading">Lorem Ipsumsson</h2>
@@ -172,7 +172,7 @@ Use one `env-cardholder__slot` to hold each Card. See configuration options belo
  <div class="env-card__body">
  <img
  class="env-card__image env-profile-image env-profile-image--small"
- src="https://envisionui.io/placeholders/profile/200x200/01.jpeg"
+ src="https://envisionui.io/placeholders/profile/200x200/01.webp"
  alt="Example profile image"
  />
  <h2 class="env-ui-text-subheading">Lorem Ipsumsson</h2>
@@ -190,7 +190,7 @@ Use one `env-cardholder__slot` to hold each Card. See configuration options belo
  <div class="env-card__body">
  <img
  class="env-card__image env-profile-image env-profile-image--small"
- src="https://envisionui.io/placeholders/profile/200x200/02.jpeg"
+ src="https://envisionui.io/placeholders/profile/200x200/02.webp"
  alt="Example profile image"
  />
  <h2 class="env-ui-text-subheading">Lorem Ipsumsson</h2>
@@ -203,7 +203,7 @@ Use one `env-cardholder__slot` to hold each Card. See configuration options belo
  <div class="env-card__body">
  <img
  class="env-card__image env-profile-image env-profile-image--small"
- src="https://envisionui.io/placeholders/profile/200x200/03.jpeg"
+ src="https://envisionui.io/placeholders/profile/200x200/03.webp"
  alt="Example profile image"
  />
  <h2 class="env-ui-text-subheading">Lorem Ipsumsson</h2>
@@ -327,7 +327,7 @@ Columns will always be equal width and aligned.
  <div class="env-card__body">
  <img
  class="env-card__image env-profile-image env-profile-image--small"
- src="https://envisionui.io/placeholders/profile/200x200/01.jpeg"
+ src="https://envisionui.io/placeholders/profile/200x200/01.webp"
  alt="Example profile image"
  />
  <h2 class="env-ui-text-subheading">
@@ -353,7 +353,7 @@ Columns will always be equal width and aligned.
  <div class="env-card__body">
  <img
  class="env-card__image env-profile-image env-profile-image--small"
- src="https://envisionui.io/placeholders/profile/200x200/02.jpeg"
+ src="https://envisionui.io/placeholders/profile/200x200/02.webp"
  alt="Example profile image"
  />
  <h2 class="env-ui-text-subheading">
@@ -371,7 +371,7 @@ Columns will always be equal width and aligned.
  <div class="env-card__body">
  <img
  class="env-card__image env-profile-image env-profile-image--small"
- src="https://envisionui.io/placeholders/profile/200x200/04.jpeg"
+ src="https://envisionui.io/placeholders/profile/200x200/04.webp"
  alt="Example profile image"
  />
  <h2 class="env-ui-text-subheading">

diff --git a/packages/envision-docs/src/pages/components/image-slider.md b/packages/envision-docs/src/pages/components/image-slider.md
@@ -18,21 +18,21 @@ Image slider is deprecated since 2023.07.1 and will eventually be removed. Pleas
  <div class="env-image-slider__inner">
  <div class="env-image-slider__item env-image-slider__item--active">
  <img
- src="https://envisionui.io/placeholders/900x400/10.jpeg"
+ src="https://envisionui.io/placeholders/900x400/10.webp"
  class="env-embedded__img"
  alt="First slide"
  />
  </div>
  <div class="env-image-slider__item">
  <img
- src="https://envisionui.io/placeholders/900x400/05.jpeg"
+ src="https://envisionui.io/placeholders/900x400/05.webp"
  class="env-embedded__img"
  alt="Second slide"
  />
  </div>
  <div class="env-image-slider__item">
  <img
- src="https://envisionui.io/placeholders/900x400/02.jpeg"
+ src="https://envisionui.io/placeholders/900x400/02.webp"
  class="env-embedded__img"
  alt="Third slide"
  />
@@ -52,21 +52,21 @@ Image slider is deprecated since 2023.07.1 and will eventually be removed. Pleas
  <div class="env-image-slider__inner">
  <div class="env-image-slider__item env-image-slider__item--active">
  <img
- src="https://envisionui.io/placeholders/900x400/01.jpeg"
+ src="https://envisionui.io/placeholders/900x400/01.webp"
  class="env-embedded__img"
  alt="First slide"
  />
  </div>
  <div class="env-image-slider__item">
  <img
- src="https://envisionui.io/placeholders/900x400/07.jpeg"
+ src="https://envisionui.io/placeholders/900x400/07.webp"
  class="env-embedded__img"
  alt="First slide"
  />
  </div>
  <div class="env-image-slider__item">
  <img
- src="https://envisionui.io/placeholders/900x400/06.jpeg"
+ src="https://envisionui.io/placeholders/900x400/06.webp"
  class="env-embedded__img"
  alt="First slide"
  />
@@ -86,21 +86,21 @@ Image slider is deprecated since 2023.07.1 and will eventually be removed. Pleas
  <div class="env-image-slider__inner">
  <div class="env-image-slider__item env-image-slider__item--active">
  <img
- src="https://envisionui.io/placeholders/900x400/04.jpeg"
+ src="https://envisionui.io/placeholders/900x400/04.webp"
  class="env-embedded__img"
  alt="First slide"
  />
  </div>
  <div class="env-image-slider__item">
  <img
- src="https://envisionui.io/placeholders/900x400/08.jpeg"
+ src="https://envisionui.io/placeholders/900x400/08.webp"
  class="env-embedded__img"
  alt="Second slide"
  />
  </div>
  <div class="env-image-slider__item">
  <img
- src="https://envisionui.io/placeholders/900x400/09.jpeg"
+ src="https://envisionui.io/placeholders/900x400/09.webp"
  class="env-embedded__img"
  alt="Third slide"
  />
@@ -140,7 +140,7 @@ Image slider is deprecated since 2023.07.1 and will eventually be removed. Pleas
  <div class="env-image-slider__inner">
  <div class="env-image-slider__item env-image-slider__item--active">
  <img
- src="https://envisionui.io/placeholders/900x400/02.jpeg"
+ src="https://envisionui.io/placeholders/900x400/02.webp"
  class="env-embedded__img"
  alt="First slide"
  />
@@ -151,7 +151,7 @@ Image slider is deprecated since 2023.07.1 and will eventually be removed. Pleas
  </div>
  <div class="env-image-slider__item">
  <img
- src="https://envisionui.io/placeholders/900x400/10.jpeg"
+ src="https://envisionui.io/placeholders/900x400/10.webp"
  class="env-embedded__img"
  alt="Second slide"
  />
@@ -162,7 +162,7 @@ Image slider is deprecated since 2023.07.1 and will eventually be removed. Pleas
  </div>
  <div class="env-image-slider__item">
  <img
- src="https://envisionui.io/placeholders/900x400/05.jpeg"
+ src="https://envisionui.io/placeholders/900x400/05.webp"
  class="env-embedded__img"
  alt="Third slide"
  />
@@ -186,21 +186,21 @@ Image slider is deprecated since 2023.07.1 and will eventually be removed. Pleas
  <div class="env-image-slider__inner">
  <div class="env-image-slider__item env-image-slider__item--active">
  <img
- src="https://envisionui.io/placeholders/900x400/11.jpeg"
+ src="https://envisionui.io/placeholders/900x400/11.webp"
  class="env-embedded__img"
  alt="First slide"
  />
  </div>
  <div class="env-image-slider__item">
  <img
- src="https://envisionui.io/placeholders/900x400/03.jpeg"
+ src="https://envisionui.io/placeholders/900x400/03.webp"
  class="env-embedded__img"
  alt="Second slide"
  />
  </div>
  <div class="env-image-slider__item">
  <img
- src="https://envisionui.io/placeholders/900x400/12.jpeg"
+ src="https://envisionui.io/placeholders/900x400/12.webp"
  class="env-embedded__img"
  alt="Third slide"
  />
@@ -210,7 +210,7 @@ Image slider is deprecated since 2023.07.1 and will eventually be removed. Pleas
  <li data-target="#exampleSlider4">
  <img
  data-target="#exampleSlider4"
- src="https://envisionui.io/placeholders/900x400/11.jpeg"
+ src="https://envisionui.io/placeholders/900x400/11.webp"
  class="env-image-slider__thumbnail env-image-slider__item--active"
  data-move-to="0"
  alt="First thumbnail"
@@ -219,7 +219,7 @@ Image slider is deprecated since 2023.07.1 and will eventually be removed. Pleas
  <li data-target="#exampleSlider4">
  <img
  data-target="#exampleSlider4"
- src="https://envisionui.io/placeholders/900x400/03.jpeg"
+ src="https://envisionui.io/placeholders/900x400/03.webp"
  class="env-image-slider__thumbnail"
  data-move-to="1"
  alt="Second thumbnail"
@@ -228,7 +228,7 @@ Image slider is deprecated since 2023.07.1 and will eventually be removed. Pleas
  <li data-target="#exampleSlider4">
  <img
  data-target="#exampleSlider4"
- src="https://envisionui.io/placeholders/900x400/12.jpeg"
+ src="https://envisionui.io/placeholders/900x400/12.webp"
  class="env-image-slider__thumbnail"
  data-move-to="2"
  alt="Third thumbnail"

diff --git a/packages/envision-docs/src/pages/components/image-viewer.md b/packages/envision-docs/src/pages/components/image-viewer.md
@@ -10,10 +10,10 @@ Image viewer is deprecated since 2023.07.1 and will eventually be removed. Pleas
  <div>
  <a
  class="env-image-viewer__images"
- href="https://envisionui.io/placeholders/originals/10.jpeg"
+ href="https://envisionui.io/placeholders/originals/10.webp"
  >
  <img
- src="https://envisionui.io/placeholders/900x400/10.jpeg"
+ src="https://envisionui.io/placeholders/900x400/10.webp"
  class="env-image-viewer__img"
  alt="Image"
  />
@@ -23,10 +23,10 @@ Image viewer is deprecated since 2023.07.1 and will eventually be removed. Pleas
  <li>
  <a
  class="env-image-viewer__images"
- href="https://envisionui.io/placeholders/originals/05.jpeg"
+ href="https://envisionui.io/placeholders/originals/05.webp"
  >
  <img
- src="https://envisionui.io/placeholders/200x100/05.jpeg"
+ src="https://envisionui.io/placeholders/200x100/05.webp"
  class="env-image-viewer__thumbnail"
  alt="First thumbnail"
  />
@@ -35,10 +35,10 @@ Image viewer is deprecated since 2023.07.1 and will eventually be removed. Pleas
  <li>
  <a
  class="env-image-viewer__images"
- href="https://envisionui.io/placeholders/originals/02.jpeg"
+ href="https://envisionui.io/placeholders/originals/02.webp"
  >
  <img
- src="https://envisionui.io/placeholders/200x100/02.jpeg"
+ src="https://envisionui.io/placeholders/200x100/02.webp"
  class="env-image-viewer__thumbnail"
  alt="Second thumbnail"
  />