@dimerapp/docs-theme - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

build/js/main.js

@@ -13,3 +13,3 @@ /*
  */
-export default function (Alpine) {
+export function initBaseComponents(Alpine) {
   /**
@@ -186,3 +186,6 @@ * Dark mode store is used to toggle the dark mode
  */
-export const initSearch = (docsearch) => {
+export function initSearchComponent(docsearch) {
+  /**
+   * @param {import('alpinejs').default} Alpine
+   */
   return function (Alpine) {
@@ -206,1 +209,28 @@ /**
 }
+
+/**
+ * Initiate image zoom plugin
+ */
+export function initZoomComponent(mediumZoom) {
+  /**
+   * @param {import('alpinejs').default} Alpine
+   */
+  return function (Alpine) {
+    /**
+     * Search widget
+     */
+    Alpine.data('zoom', function () {
+      return {
+        zoom: null,
+        init() {
+          this.zoom = mediumZoom(this.$root.querySelector('img'))
+        },
+        destroy() {
+          if (this.zoom) {
+            this.zoom.detach()
+          }
+        },
+      }
+    })
+  }
+}

package.json

 {
   "name": "@dimerapp/docs-theme",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Documentation theme built on top of Dimer and used by AdonisJS",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -74,7 +74,13 @@ # @dimerapp/docs-theme
 ```js
+import mediumZoom from 'medium-zoom'
 import docsearch from '@docsearch/js'
-import { initAlpinePlugins, initSearch } from '@dimerapp/docs-theme/scripts'
+import {
+  initZoomComponent,
+  initBaseComponents,
+  initSearchComponent
+} from '@dimerapp/docs-theme/scripts'
 
-Alpine.plugin(initAlpinePlugins)
-Alpine.plugin(initSearch(docsearch))
+Alpine.plugin(initBaseComponents)
+Alpine.plugin(initSearchComponent(docsearch))
+Alpine.plugin(initZoomComponent(mediumZoom))
 ```
@@ -81,0 +87,0 @@

No alert changes

Improved metrics

Total package byte prevSize

73476

increased by0.97%

Lines of code

1920

increased by1.53%

Number of lines in readme file

100

increased by6.38%

No dependency changes