Skip to content

Commit

Permalink
FIX img lazyload
Browse files Browse the repository at this point in the history
  • Loading branch information
@pubkey
pubkey committed May 21, 2024
1 parent 3d2fe68 commit a613d9d
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 42 deletions.
1 change: 0 additions & 1 deletion docs-src/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
"hast-util-select": "4.0.0",
"hast-util-to-text": "2.0.0",
"hogan.js": "3.0.2",
"lazysizes": "5.3.2",
"lunr": "2.3.8",
"lunr-languages": "1.4.0",
"mark.js": "8.11.1",
Expand Down
19 changes: 10 additions & 9 deletions docs-src/src/components/review-block.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,15 +76,15 @@ export function ReviewsBlock() {
href: 'https://readwise.io/',
target: '_blank',
logo: '/files/companies/readwise.svg',
logoStyle: 'slider-logo-black lazyload'
logoStyle: 'slider-logo-black '
},
{
label: 'myAgro, Africa',
description: 'Transitioning to RxDB was a breath of fresh air due to its comprehensive features, including schema migration, real-time replication, conflict resolution, and reactive programming.',
href: 'https://www.myagro.org/',
target: '_blank',
logo: '/files/companies/myagro.svg',
logoStyle: 'slider-logo-black lazyload',
logoStyle: 'slider-logo-black ',
},
{
label: 'MoreApp, Germany',
Expand All @@ -94,7 +94,7 @@ export function ReviewsBlock() {
href: 'https://moreapp.com/',
target: '_blank',
logo: '/files/companies/moreapp.png',
logoStyle: 'slider-logo-black lazyload',
logoStyle: 'slider-logo-black ',
},
{
label: 'ALTGRAS, Africa',
Expand All @@ -104,7 +104,7 @@ export function ReviewsBlock() {
href: 'https://altgras.com/',
target: '_blank',
logo: '/files/companies/altgras.png',
logoStyle: 'slider-logo-white lazyload',
logoStyle: 'slider-logo-white ',
},
{
label: 'WooCommerce POS, Australia',
Expand All @@ -113,7 +113,7 @@ export function ReviewsBlock() {
href: 'https://wcpos.com/',
target: '_blank',
logo: '/files/companies/woopos.png',
logoStyle: 'slider-logo-black lazyload',
logoStyle: 'slider-logo-black ',
},
{
label: 'atroo GmbH, Germany',
Expand All @@ -123,22 +123,22 @@ export function ReviewsBlock() {
href: 'https://atroo.de/',
target: '_blank',
logo: '/files/companies/atroo.png',
logoStyle: 'slider-logo-black lazyload',
logoStyle: 'slider-logo-black ',
},
{
label: 'Nutrien, Canada',
description: 'With RxDB we have built an offline capable Progressive Web Application that is used by our borer operators to report on conditions at the mineface.',
href: 'https://www.nutrien.com/',
target: '_blank',
logo: '/files/companies/nutrien.svg',
logoStyle: 'slider-logo-black lazyload',
logoStyle: 'slider-logo-black ',
},
// {
// label: "Mapgl Grafana plugins",
// description: `"We use RxDB to store clients network topology modifications made with our map plugin visual editor"`,
// href: "https://raw.githubusercontent.com/vaduga/mapgl-community/",
// logo: "https://raw.githubusercontent.com/vaduga/mapgl-community/main/src/img/logo.png",
// logoStyle: 'slider-logo-black lazyload',
// logoStyle: 'slider-logo-black ',
// },
];

Expand All @@ -156,7 +156,8 @@ export function ReviewsBlock() {
<div className="slider-profile">
<img
className={item.logoStyle}
data-src={item.logo}
src={item.logo}
loading="lazy"
alt="logo"
/>
<div className="slider-info">
Expand Down
1 change: 0 additions & 1 deletion docs-src/src/pages/consulting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import BrowserOnly from '@docusaurus/BrowserOnly';

import Layout from '@theme/Layout';
import Head from '@docusaurus/Head';
import 'lazysizes';

import React, { useEffect } from 'react';

Expand Down
65 changes: 34 additions & 31 deletions docs-src/src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import Head from '@docusaurus/Head';
import 'lazysizes';

import {
merge,
Expand Down Expand Up @@ -400,7 +399,7 @@ export default function Home() {
target="_blank"
>
<div className="trophy discord">
<img className="lazyload" data-src="./files/icons/discord.svg" alt="RxDB Discord chat" />
<img loading="lazy" src="./files/icons/discord.svg" alt="RxDB Discord chat" />
<div style={{ flex: 1 }}>
<div className="subtitle">Chat on</div>
<div className="title">Discord</div>
Expand Down Expand Up @@ -555,7 +554,7 @@ export default function Home() {
target="_blank"
>
<div className="trophy twitter">
<img className="lazyload" data-src="./files/icons/twitter-blue.svg" alt="RxDB Twitter" />
<img loading="lazy" src="./files/icons/twitter-blue.svg" alt="RxDB Twitter" />
<div style={{ flex: 1 }}>
<div className="subtitle">Follow on</div>
<div className="title">Twitter</div>
Expand Down Expand Up @@ -613,25 +612,28 @@ export default function Home() {
<div className="half right">
<div className="replication-icons">
<img
data-src="./files/logo/logo.svg"
src="./files/logo/logo.svg"
alt="RxDB"
className="replicate-logo tilt-to-mouse lazyload"
className="replicate-logo tilt-to-mouse"
loading="lazy"
/>
<a href="/replication-graphql.html" target="_blank">
<div className="neumorphism-circle-xl centered replicate-graphql enlarge-on-mouse">
<img
data-src="./files/icons/graphql-text.svg"
src="./files/icons/graphql-text.svg"
alt="GraphQL"
className="protocol lazyload"
className="protocol"
loading="lazy"
/>
</div>
</a>
<a href="/replication-couchdb.html" target="_blank">
<div className="neumorphism-circle-xl centered replicate-couchdb enlarge-on-mouse">
<img
data-src="./files/icons/couchdb-text.svg"
src="./files/icons/couchdb-text.svg"
alt="CouchDB"
className="protocol lazyload"
className="protocol"
loading="lazy"
/>
</div>
</a>
Expand Down Expand Up @@ -662,7 +664,7 @@ export default function Home() {
>
<div className="trophy github">
<img
className="lazyload" data-src="./files/icons/github-star-with-logo.svg"
loading="lazy" src="./files/icons/github-star-with-logo.svg"
alt="RxDB github star"
/>
<div style={{ flex: 1 }}>
Expand All @@ -685,8 +687,9 @@ export default function Home() {
<div className="block offline-first dark">
<div className="offline-image-wrapper">
<img
data-src="files/icons/wifi/wifi_1a202c.svg"
className="offline-image beating-second lazyload"
src="files/icons/wifi/wifi_1a202c.svg"
className="offline-image beating-second"
loading="lazy"
alt="offline"
/>
</div>
Expand Down Expand Up @@ -736,22 +739,22 @@ export default function Home() {
className="neumorphism-circle-m circle centered enlarge-on-mouse"
style={{ top: '-10%', left: '10%' }}
>
<img className="lazyload" data-src="./files/icons/angular.svg" alt="angular" />
<img loading="lazy" src="./files/icons/angular.svg" alt="angular" />
Angular
</div>
</a>
<div
className="neumorphism-circle-m circle centered enlarge-on-mouse"
style={{ top: '10%', left: '58%' }}
>
<img className="lazyload" data-src="./files/icons/capacitor.svg" alt="capacitor" />
<img loading="lazy" src="./files/icons/capacitor.svg" alt="capacitor" />
Capacitor
</div>
<div
className="neumorphism-circle-s circle centered enlarge-on-mouse"
style={{ top: '-4%', left: '44%' }}
>
<img className="lazyload" data-src="./files/icons/deno.svg" alt="deno" />
<img loading="lazy" src="./files/icons/deno.svg" alt="deno" />
Deno
</div>
<a
Expand All @@ -762,7 +765,7 @@ export default function Home() {
className="neumorphism-circle-m circle centered enlarge-on-mouse"
style={{ top: '-5%', left: '85%' }}
>
<img className="lazyload" data-src="./files/icons/nodejs.svg" alt="Node.js" />
<img loading="lazy" src="./files/icons/nodejs.svg" alt="Node.js" />
Node.js
</div>
</a>
Expand All @@ -774,15 +777,15 @@ export default function Home() {
className="neumorphism-circle-m circle centered enlarge-on-mouse"
style={{ top: '4%', left: '26%' }}
>
<img className="lazyload" data-src="./files/icons/react.svg" alt="React" />
<img loading="lazy" src="./files/icons/react.svg" alt="React" />
React
</div>
</a>
<div
className="neumorphism-circle-s circle centered enlarge-on-mouse"
style={{ top: '15%', left: '90%', marginLeft: '-35px' }}
>
<img className="lazyload" data-src="./files/icons/svelte.svg" alt="Svelte" />
<img loading="lazy" src="./files/icons/svelte.svg" alt="Svelte" />
Svelte
</div>
<br />
Expand All @@ -809,7 +812,7 @@ export default function Home() {
className="neumorphism-circle-s circle centered enlarge-on-mouse"
style={{ top: '2%', left: '18%' }}
>
<img className="lazyload" data-src="./files/icons/electron.svg" alt="electron" />
<img loading="lazy" src="./files/icons/electron.svg" alt="electron" />
Electron
</div>
</a>
Expand All @@ -821,7 +824,7 @@ export default function Home() {
className="neumorphism-circle-s circle centered enlarge-on-mouse"
style={{ top: '3%', left: '45%' }}
>
<img className="lazyload" data-src="./files/icons/vuejs.svg" alt="Vue.js" />
<img loading="lazy" src="./files/icons/vuejs.svg" alt="Vue.js" />
Vue.js
</div>
</a>
Expand All @@ -833,15 +836,15 @@ export default function Home() {
className="neumorphism-circle-s circle centered enlarge-on-mouse"
style={{ top: '2%', left: '71%' }}
>
<img className="lazyload" data-src="./files/icons/ionic.svg" alt="ionic" />
<img loading="lazy" src="./files/icons/ionic.svg" alt="ionic" />
Ionic
</div>
</a>
<div
className="neumorphism-circle-m circle centered enlarge-on-mouse"
style={{ top: '46%', left: '11%' }}
>
<img className="lazyload" data-src="./files/icons/nativescript.svg" alt="NativeScript" />
<img loading="lazy" src="./files/icons/nativescript.svg" alt="NativeScript" />
NativeScript
</div>
<a
Expand All @@ -852,15 +855,15 @@ export default function Home() {
className="neumorphism-circle-m circle centered enlarge-on-mouse"
style={{ top: '45%', left: '35%' }}
>
<img className="lazyload" data-src="./files/icons/react.svg" alt="React Native" />
<img loading="lazy" src="./files/icons/react.svg" alt="React Native" />
React Native
</div>
</a>
<div
className="neumorphism-circle-m circle centered enlarge-on-mouse"
style={{ top: '45%', left: '62%' }}
>
<img className="lazyload" data-src="./files/icons/nextjs.svg" alt="Next.js" />
<img loading="lazy" src="./files/icons/nextjs.svg" alt="Next.js" />
Next.js
</div>
<a
Expand All @@ -871,7 +874,7 @@ export default function Home() {
className="neumorphism-circle-s circle centered enlarge-on-mouse"
style={{ top: '40%', left: '86%' }}
>
<img className="lazyload" data-src="./files/icons/flutter.svg" alt="Flutter" />
<img loading="lazy" src="./files/icons/flutter.svg" alt="Flutter" />
Flutter
</div>
</a>
Expand All @@ -886,7 +889,7 @@ export default function Home() {
Trusted and <b className="underline">open source</b>
</h2>
<div className="box dark">
<img className="lazyload" data-src="files/icons/github-star.svg" alt="github star" />
<img loading="lazy" src="files/icons/github-star.svg" alt="github star" />
<div className="label">Github Stars</div>
<a
className="value"
Expand All @@ -899,7 +902,7 @@ export default function Home() {
<div className="clear" />
</div>
<div className="box dark">
<img className="lazyload" data-src="files/icons/download.svg" alt="npm downloads" />
<img loading="lazy" src="files/icons/download.svg" alt="npm downloads" />
<div className="label">npm downloads</div>
<a
className="value beating-number"
Expand All @@ -913,7 +916,7 @@ export default function Home() {
</div>
<div className="clear" />
<div className="box dark">
<img className="lazyload" data-src="files/icons/person.svg" alt="contributor" />
<img loading="lazy" src="files/icons/person.svg" alt="contributor" />
<div className="label">Contributors</div>
<a
className="value"
Expand All @@ -926,7 +929,7 @@ export default function Home() {
<div className="clear" />
</div>
<div className="box dark">
<img className="lazyload" data-src="files/icons/commit.svg" alt="commit" />
<img loading="lazy" src="files/icons/commit.svg" alt="commit" />
<div className="label">Commits</div>
<a
className="value"
Expand All @@ -940,7 +943,7 @@ export default function Home() {
</div>
<div className="clear" />
<div className="box dark">
<img className="lazyload" data-src="files/icons/gear.svg" alt="gear" />
<img loading="lazy" src="files/icons/gear.svg" alt="gear" />
<div className="label">RxDB made Projects</div>
<a
className="value"
Expand All @@ -953,7 +956,7 @@ export default function Home() {
<div className="clear" />
</div>
<div className="box dark">
<img className="lazyload" data-src="files/icons/twitter.svg" alt="twitter" />
<img loading="lazy" src="files/icons/twitter.svg" alt="twitter" />
<div className="label">Twitter followers</div>
<a
className="value"
Expand Down

0 comments on commit a613d9d

Please sign in to comment.