Merge pull request #20 from gabrielcsapo/add-prettier

.prettierrc.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'es5',
+  printWidth: 100,
+};

CHANGELOG.md

@@ -1,21 +1,22 @@
-
 ## v0.1.2 (2023-04-13)
 
 #### :memo: Documentation
-* [#12](https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom/pull/12) fix: update documentation ([@noobinthisgame](https://github.com/noobinthisgame))
-* [#4](https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom/pull/4) Docs: update zoom config ([@JPeer264](https://github.com/JPeer264))
+
+- [#12](https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom/pull/12) fix: update documentation ([@noobinthisgame](https://github.com/noobinthisgame))
+- [#4](https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom/pull/4) Docs: update zoom config ([@JPeer264](https://github.com/JPeer264))
 
 #### :house: Internal
-* [#18](https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom/pull/18) Adds release-it setup ([@scalvert](https://github.com/scalvert))
-* [#17](https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom/pull/17) Pinning versions of node and npm via volta ([@scalvert](https://github.com/scalvert))
+
+- [#18](https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom/pull/18) Adds release-it setup ([@scalvert](https://github.com/scalvert))
+- [#17](https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom/pull/17) Pinning versions of node and npm via volta ([@scalvert](https://github.com/scalvert))
 
 #### Committers: 4
+
 - Jan Peer Stöcklmair ([@JPeer264](https://github.com/JPeer264))
 - Johann Ehlers ([@noobinthisgame](https://github.com/noobinthisgame))
 - Steve Calvert ([@scalvert](https://github.com/scalvert))
 - ZhibingHong ([@lkhzb](https://github.com/lkhzb))
 
-
 # 0.1.1 (05/22/2022)
 
 - @gabrielcsapo: Publishes package without workspace root.

RELEASE.md

@@ -17,24 +17,24 @@ guiding principle here is that changelogs are for humans, not machines.
 
 When reviewing merged PR's the labels to be used are:
 
-* breaking - Used when the PR is considered a breaking change.
-* enhancement - Used when the PR adds a new feature or enhancement.
-* bug - Used when the PR fixes a bug included in a previous release.
-* documentation - Used when the PR adds or updates documentation.
-* internal - Used for internal changes that still require a mention in the
+- breaking - Used when the PR is considered a breaking change.
+- enhancement - Used when the PR adds a new feature or enhancement.
+- bug - Used when the PR fixes a bug included in a previous release.
+- documentation - Used when the PR adds or updates documentation.
+- internal - Used for internal changes that still require a mention in the
   changelog/release notes.
 
 ## Release
 
 Once the prep work is completed, the actual release is straight forward:
 
-* First, ensure that you have installed your projects dependencies:
+- First, ensure that you have installed your projects dependencies:
 
 ```sh
 npm install
 ```
 
-* Second, ensure that you have obtained a
+- Second, ensure that you have obtained a
   [GitHub personal access token][generate-token] with the `repo` scope (no
   other permissions are needed). Make sure the token is available as the
   `GITHUB_AUTH` environment variable.
@@ -47,7 +47,7 @@ npm install
 
 [generate-token]: https://github.com/settings/tokens/new?scopes=repo&description=GITHUB_AUTH+env+variable
 
-* And last (but not least 😁) do your release.
+- And last (but not least 😁) do your release.
 
 ```sh
 npx release-it

package.json

@@ -28,6 +28,7 @@
     "@release-it-plugins/lerna-changelog": "^5.0.0",
     "@tsconfig/docusaurus": "^1.0.7",
     "@types/node": "^18.15.11",
+    "prettier": "^2.8.7",
     "release-it": "^15.5.0",
     "typescript": "^5.0.4"
   },

src/zoom.ts

@@ -28,8 +28,7 @@ export default (function () {
   let zoomObject: Zoom;
 
   const { zoom }: { zoom?: ZoomConfig } = themeConfig;
-  const { selector = '.markdown img', config = {} } =
-    zoom || ({} as ZoomConfig);
+  const { selector = '.markdown img', config = {} } = zoom || ({} as ZoomConfig);
 
   if (!zoom) {
     return null;
@@ -38,7 +37,9 @@ export default (function () {
   config.background = getBackgroundColor(zoom);
 
   var observer = new MutationObserver(function () {
-    if (!zoomObject) return;
+    if (!zoomObject) {
+      return;
+    }
 
     zoomObject.update({ background: getBackgroundColor(zoom) });
   });
@@ -51,14 +52,20 @@ export default (function () {
   });
 
   setTimeout(() => {
-    if (zoomObject) zoomObject.detach();
+    if (zoomObject) {
+      zoomObject.detach();
+    }
+
     zoomObject = mediumZoom(selector, config);
   }, 1000);
 
   return {
     onRouteUpdate() {
       setTimeout(() => {
-        if (zoomObject) zoomObject.detach();
+        if (zoomObject) {
+          zoomObject.detach();
+        }
+
         zoomObject = mediumZoom(selector, config);
       }, 1000);
     },

website/docs/getting-started.md

@@ -16,7 +16,7 @@ npm install docusaurus-plugin-image-zoom --save
 
 ```js title=docusaurus.config.js
 {
-  plugins: [require.resolve("docusaurus-plugin-image-zoom")];
+  plugins: [require.resolve('docusaurus-plugin-image-zoom')];
 }
 ```
 

website/docusaurus.config.js

@@ -1,30 +1,29 @@
-const lightCodeTheme = require("prism-react-renderer/themes/github");
-const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+const lightCodeTheme = require('prism-react-renderer/themes/github');
+const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 
 module.exports = {
-  title: "docusaurus-plugin-image-zoom",
-  tagline: "Docusaurus plugin to utilize https://www.npmjs.com/package/medium-zoom in your projects easily!",
-  url: "https://gabrielcsapo.github.io",
-  baseUrl: "/docusaurus-plugin-image-zoom/",
+  title: 'docusaurus-plugin-image-zoom',
+  tagline:
+    'Docusaurus plugin to utilize https://www.npmjs.com/package/medium-zoom in your projects easily!',
+  url: 'https://gabrielcsapo.github.io',
+  baseUrl: '/docusaurus-plugin-image-zoom/',
   trailingSlash: true,
-  onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
-  favicon: "img/favicon.ico",
-  organizationName: "gabrielcsapo",
-  projectName: "docusaurus-plugin-image-zoom",
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+  favicon: 'img/favicon.ico',
+  organizationName: 'gabrielcsapo',
+  projectName: 'docusaurus-plugin-image-zoom',
   presets: [
     [
-      "@docusaurus/preset-classic",
+      '@docusaurus/preset-classic',
       {
         docs: {
-          sidebarPath: require.resolve("./sidebars.js"),
-          editUrl:
-            "https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom/edit/main",
+          sidebarPath: require.resolve('./sidebars.js'),
+          editUrl: 'https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom/edit/main',
         },
         blog: {
           showReadingTime: true,
-          editUrl:
-            "https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom/edit/main",
+          editUrl: 'https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom/edit/main',
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
@@ -35,48 +34,48 @@ module.exports = {
   themeConfig: {
     zoom: {},
     navbar: {
-      title: "docusaurus-plugin-image-zoom",
+      title: 'docusaurus-plugin-image-zoom',
       logo: {
-        alt: "docusaurus-plugin-image-zoom logo",
-        src: "img/logo.svg",
+        alt: 'docusaurus-plugin-image-zoom logo',
+        src: 'img/logo.svg',
       },
       items: [
         {
-          to: "/docs/getting-started",
-          position: "left",
-          label: "Documentation",
+          to: '/docs/getting-started',
+          position: 'left',
+          label: 'Documentation',
         },
-        { to: "/blog", label: "Blog", position: "left" },
+        { to: '/blog', label: 'Blog', position: 'left' },
         {
-          href: "https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom",
-          label: "GitHub",
-          position: "right",
+          href: 'https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom',
+          label: 'GitHub',
+          position: 'right',
         },
       ],
     },
     footer: {
-      style: "dark",
+      style: 'dark',
       links: [
         {
-          title: "Docs",
+          title: 'Docs',
           items: [
             {
-              label: "Configuration",
-              to: "/docs/getting-started",
+              label: 'Configuration',
+              to: '/docs/getting-started',
             },
           ],
         },
         {},
         {
-          title: "More",
+          title: 'More',
           items: [
             {
-              label: "Blog",
-              to: "/blog",
+              label: 'Blog',
+              to: '/blog',
             },
             {
-              label: "GitHub",
-              href: "https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom",
+              label: 'GitHub',
+              href: 'https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom',
             },
           ],
         },
@@ -89,9 +88,9 @@ module.exports = {
     },
   },
   plugins: [
-    [require.resolve('../src/index.js'), { id: 'docusaurus-plugin-image-zoom'}],
+    [require.resolve('../src/index.js'), { id: 'docusaurus-plugin-image-zoom' }],
     [
-      require.resolve("docusaurus-plugin-search-local"),
+      require.resolve('docusaurus-plugin-search-local'),
       {
         highlightSearchTermsOnTargetPage: true,
       },

website/sidebars.js

@@ -11,7 +11,7 @@
 
 module.exports = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+  tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }],
 
   // But you can create a sidebar manually
   /*

website/src/css/custom.css

@@ -6,27 +6,27 @@
 
 /* You can override the default Infima variables here. */
 :root {
-    --ifm-color-primary: #25c2a0;
-    --ifm-color-primary-dark: rgb(33, 175, 144);
-    --ifm-color-primary-darker: rgb(31, 165, 136);
-    --ifm-color-primary-darkest: rgb(26, 136, 112);
-    --ifm-color-primary-light: rgb(70, 203, 174);
-    --ifm-color-primary-lighter: rgb(102, 212, 189);
-    --ifm-color-primary-lightest: rgb(146, 224, 208);
-    --ifm-code-font-size: 95%;
-  }
-  
-  .docusaurus-highlight-code-line {
-    background-color: rgba(0, 0, 0, 0.1);
-    display: block;
-    margin: 0 calc(-1 * var(--ifm-pre-padding));
-    padding: 0 var(--ifm-pre-padding);
-  }
-  
-  html[data-theme='dark'] .docusaurus-highlight-code-line {
-    background-color: rgba(0, 0, 0, 0.3);
-  }
-  
-  .main-wrapper {
-    display: flex;
-  }
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: rgb(33, 175, 144);
+  --ifm-color-primary-darker: rgb(31, 165, 136);
+  --ifm-color-primary-darkest: rgb(26, 136, 112);
+  --ifm-color-primary-light: rgb(70, 203, 174);
+  --ifm-color-primary-lighter: rgb(102, 212, 189);
+  --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-code-font-size: 95%;
+}
+
+.docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.1);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+html[data-theme='dark'] .docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.main-wrapper {
+  display: flex;
+}

website/src/pages/index.js

@@ -1,22 +1,19 @@
-import React from "react";
-import clsx from "clsx";
-import Layout from "@theme/Layout";
-import Link from "@docusaurus/Link";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import styles from "./index.module.css";
+import React from 'react';
+import clsx from 'clsx';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import styles from './index.module.css';
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
         <h1 className="hero__title">{siteConfig.title}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/getting-started"
-          >
+          <Link className="button button--secondary button--lg" to="/docs/getting-started">
             Getting Started
           </Link>
         </div>