ClearML/clearml-docs
1
0
Fork 0
mirror of https://github.com/clearml/clearml-docs synced 2025-04-05 13:45:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix image zoom darkens documentation page (#957)

Browse Source
This commit is contained in:
pollfly 2024-11-05 12:28:45 +02:00 committed by GitHub
parent 701cfb4b8f
commit c8892b54a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 38 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docusaurus.config.js
View File

@ -27,6 +27,17 @@ module.exports = {
theme: prismThemes.dracula,
darkTheme: prismThemes.dracula,
},
imageZoom: {
// CSS selector to apply the plugin to, defaults to '.markdown img'
selector: '.markdown img',
// Optional medium-zoom options
// see: https://www.npmjs.com/package/medium-zoom#options
options: {
margin: 24,
background: "transparent"
},
},
//algolia algolia: {
//algolia appId: 'ALGOLIA_APP_ID', // The application ID provided by Algolia
//algolia apiKey: 'ALGOLIA_APP_KEY', // Public API key
@ -265,6 +276,6 @@ module.exports = {
id: 'none', // GTM Container ID
}
],
path.resolve(__dirname, 'src/zoom-plugin')
require.resolve('plugin-image-zoom'),
],
};

9
package-lock.json generated
View File

@ -19,6 +19,7 @@
"clsx": "^1.1.1",
"joi": "^17.4.0",
"medium-zoom": "^1.0.6",
"plugin-image-zoom": "github:flexanalytics/plugin-image-zoom",
"prism-react-renderer": "^2.1.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
@ -13707,6 +13708,14 @@
"node": ">=4"
}
},
"node_modules/plugin-image-zoom": {
"version": "1.1.0",
"resolved": "git+ssh://git@github.com/flexanalytics/plugin-image-zoom.git#8e1b866c79ed6d42cefc4c52f851f1dfd1d0c7de",
"license": "MIT",
"dependencies": {
"medium-zoom": "^1.0.8"
}
},
"node_modules/postcss": {
"version": "8.4.47",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",

1
package.json
View File

@ -26,6 +26,7 @@
"@mdx-js/react": "^3.0.0",
"clsx": "^1.1.1",
"medium-zoom": "^1.0.6",
"plugin-image-zoom": "github:flexanalytics/plugin-image-zoom",
"prism-react-renderer": "^2.1.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",

20
src/css/custom.css
View File

@ -556,10 +556,7 @@ html[data-theme="dark"] .footer__link-item:hover {
/* ===MARKDOWN=== */
.markdown img.medium-zoom-image[src*="png"],
.markdown img.medium-zoom-image[src*="gif"] {
border:1px solid #2c3246;
}
.getting-started-buttons > .col {
margin-top: 1rem;
}
@ -573,11 +570,26 @@ html[data-theme="dark"] .footer__link-item:hover {
white-space: normal;
}
/* IMAGE ZOOM */
/* disable medium-zoom-image on svg icons */
.markdown img.medium-zoom-image[src*="svg"] {
pointer-events: none;
}
.markdown img.medium-zoom-image[src*="png"],
.markdown img.medium-zoom-image[src*="gif"] {
border:1px solid #2c3246;
}
html[data-theme=light] .medium-zoom--opened .medium-zoom-overlay {background: white !important; opacity: 0.4}
html[data-theme=dark] .medium-zoom--opened .medium-zoom-overlay {background: black !important; opacity: 0.6}
html[data-theme=light] .medium-zoom-image.medium-zoom-image--opened {border-radius: 6px; border: 1px solid #666;}
html[data-theme=dark] .medium-zoom-image.medium-zoom-image--opened {border-radius: 6px; border: 1px solid #333;}
.medium-zoom--opened .medium-zoom-overlay {z-index: 1000;}
.medium-zoom-image.medium-zoom-image--opened {z-index: 1001;}
/* table */
.markdown table {
border-spacing: 0;

18
src/zoom-plugin/index.js
View File

@ -1,18 +0,0 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const path = require('path');
module.exports = function(context, options) {
return {
name: 'docusaurus-plugin-image-zoom',
getClientModules(options) {
return [path.resolve(__dirname, './zoom')];
},
};
};

46
src/zoom-plugin/zoom.js
View File

@ -1,46 +0,0 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import siteConfig from '@generated/docusaurus.config';
import mediumZoom from 'medium-zoom'
const {themeConfig} = siteConfig;
export default (function () {
if (typeof window === 'undefined') {
return null;
}
const selector = (themeConfig && themeConfig.zoomSelector) || '.markdown img';
setTimeout(() => {
mediumZoom(selector, {
margin: 48,
background: '#00000090',
}
);
}, 1000);
return {
onRouteUpdate({location}) {
if (location && location.hash && location.hash.length) {
return;
}
setTimeout(() => {
mediumZoom(selector, {
margin: 48,
background: '#00000090',
});
}, 1000);
},
};
})();