Chagne prettier printWidth and reformat

jhildenbiddle · Feb 29, 2024 · 14afa55 · 14afa55
1 parent 5632e96
commit 14afa55
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 92 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,5 +1,6 @@
 {
   "arrowParens": "avoid",
+  "printWidth": 100,
   "singleQuote": true,
   "trailingComma": "none"
 }
diff --git a/docs/index.html b/docs/index.html
@@ -11,14 +11,8 @@
       name="description"
       content="docsify-tabs - A docsify.js plugin for rendering tabbed content from markdown."
     />
-    <meta
-      name="google-site-verification"
-      content="_EWJaM8G6xwMtEqemO4yN8WqSU2CaKVi3jTj0gLg48E"
-    />
-    <title>
-      docsify-tabs - A docsify.js plugin for rendering tabbed content from
-      markdown
-    </title>
+    <meta name="google-site-verification" content="_EWJaM8G6xwMtEqemO4yN8WqSU2CaKVi3jTj0gLg48E" />
+    <title>docsify-tabs - A docsify.js plugin for rendering tabbed content from markdown</title>
     <link
       rel="stylesheet"
       media="(prefers-color-scheme: dark)"
@@ -38,10 +32,7 @@
     <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify@4/themes/pure.css"> -->
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-CBK388RWQM"
-    ></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CBK388RWQM"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() {
@@ -98,17 +89,13 @@
           function persistTitle(hook, vm) {
             var titleElm = document.querySelector('title');
             var rootTitle = titleElm && titleElm.textContent;
-            var pageTitlePrefix = window.$docsify.name
-              ? window.$docsify.name + ' - '
-              : '';
+            var pageTitlePrefix = window.$docsify.name ? window.$docsify.name + ' - ' : '';
 
             if (rootTitle) {
               hook.doneEach(function () {
                 var currentTitle = titleElm.textContent;
                 var isRoot = !/\/[a-z]/.test(location.hash);
-                var newTitle = isRoot
-                  ? rootTitle
-                  : pageTitlePrefix + currentTitle;
+                var newTitle = isRoot ? rootTitle : pageTitlePrefix + currentTitle;
 
                 titleElm.textContent = newTitle;
               });

diff --git a/docs/index.md b/docs/index.md
@@ -564,9 +564,7 @@ More advanced styling can be applied by leveraging the CSS class names and data
 When the tab is active, note the addition of the `docsify-tabs__tab--active` class:
 
 ```html
-<button class="docsify-tabs__tab docsify-tabs__tab--active" data-tab="my tab">
-  Basic Tab
-</button>
+<button class="docsify-tabs__tab docsify-tabs__tab--active" data-tab="my tab">Basic Tab</button>
 ```
 
 **Examples**
@@ -590,10 +588,7 @@ When the tab is active, note the addition of the `docsify-tabs__tab--active` cla
 **HTML Output**
 
 ```html
-<button
-  class="docsify-tabs__tab docsify-tabs__tab--active"
-  data-tab="active state"
->
+<button class="docsify-tabs__tab docsify-tabs__tab--active" data-tab="active state">
   Active State
 </button>
 <div class="docsify-tabs__content" data-tab-content="active state">...</div>
@@ -640,9 +635,7 @@ CodePen Embed Code...
 **HTML Output**
 
 ```html
-<button class="docsify-tabs__tab docsify-tabs__tab--active" data-tab="codepen">
-  CodePen
-</button>
+<button class="docsify-tabs__tab docsify-tabs__tab--active" data-tab="codepen">CodePen</button>
 <div class="docsify-tabs__content" data-tab-content="codepen">...</div>
 ```
 

diff --git a/src/js/index.js b/src/js/index.js
@@ -126,9 +126,7 @@ function renderTabsStage1(content, vm) {
 
     return codeMarker;
   });
-  const tabTheme = settings.theme
-    ? `${classNames.tabBlock}--${settings.theme}`
-    : '';
+  const tabTheme = settings.theme ? `${classNames.tabBlock}--${settings.theme}` : '';
   const tempElm = document.createElement('div');
 
   let tabBlockMatch = content.match(regex.tabBlockMarkup);
@@ -141,10 +139,8 @@ function renderTabsStage1(content, vm) {
     const tabBlockIndent = tabBlockMatch[1];
     const tabBlockStart = tabBlockMatch[2];
     const tabBlockEnd = tabBlockMatch[4];
-    const hasTabComments =
-      settings.tabComments && regex.tabCommentMarkup.test(tabBlockOut);
-    const hasTabHeadings =
-      settings.tabHeadings && regex.tabHeadingMarkup.test(tabBlockOut);
+    const hasTabComments = settings.tabComments && regex.tabCommentMarkup.test(tabBlockOut);
+    const hasTabHeadings = settings.tabHeadings && regex.tabHeadingMarkup.test(tabBlockOut);
 
     let tabMatch;
     let tabStartReplacement = '';
@@ -157,12 +153,8 @@ function renderTabsStage1(content, vm) {
       // Process each tab panel
       while (
         (tabMatch =
-          (settings.tabComments
-            ? regex.tabCommentMarkup.exec(tabBlockOut)
-            : null) ||
-          (settings.tabHeadings
-            ? regex.tabHeadingMarkup.exec(tabBlockOut)
-            : null)) !== null
+          (settings.tabComments ? regex.tabCommentMarkup.exec(tabBlockOut) : null) ||
+          (settings.tabHeadings ? regex.tabHeadingMarkup.exec(tabBlockOut) : null)) !== null
       ) {
         // Process tab title as markdown
         // Ex: <!-- tab:**Bold** and <span style="color: red;">red</span> -->
@@ -238,15 +230,10 @@ function renderTabsStage2(html) {
 function setDefaultTabs() {
   const tabsContainer = document.querySelector(`.${classNames.tabsContainer}`);
   const tabBlocks = tabsContainer
-    ? Array.apply(
-        null,
-        tabsContainer.querySelectorAll(`.${classNames.tabBlock}`)
-      )
+    ? Array.apply(null, tabsContainer.querySelectorAll(`.${classNames.tabBlock}`))
     : [];
-  const tabStoragePersist =
-    JSON.parse(sessionStorage.getItem(storageKeys.persist)) || {};
-  const tabStorageSync =
-    JSON.parse(sessionStorage.getItem(storageKeys.sync)) || [];
+  const tabStoragePersist = JSON.parse(sessionStorage.getItem(storageKeys.persist)) || {};
+  const tabStorageSync = JSON.parse(sessionStorage.getItem(storageKeys.sync)) || [];
 
   setActiveTabFromAnchor();
 
@@ -261,26 +248,19 @@ function setDefaultTabs() {
           .map(
             label =>
               Array.apply(null, tabBlock.children).filter(elm =>
-                matchSelector(
-                  elm,
-                  `.${classNames.tabButton}[data-tab="${label}"]`
-                )
+                matchSelector(elm, `.${classNames.tabButton}[data-tab="${label}"]`)
               )[0]
           )
           .filter(elm => elm)[0];
       }
 
       if (!activeButton && settings.persist) {
         activeButton = Array.apply(null, tabBlock.children).filter(elm =>
-          matchSelector(
-            elm,
-            `.${classNames.tabButton}[data-tab="${tabStoragePersist[index]}"]`
-          )
+          matchSelector(elm, `.${classNames.tabButton}[data-tab="${tabStoragePersist[index]}"]`)
         )[0];
       }
 
-      activeButton =
-        activeButton || tabBlock.querySelector(`.${classNames.tabButton}`);
+      activeButton = activeButton || tabBlock.querySelector(`.${classNames.tabButton}`);
       activeButton && activeButton.classList.add(classNames.tabButtonActive);
     }
   });
@@ -297,31 +277,23 @@ function setActiveTab(elm, _isMatchingTabSync = false) {
 
   if (activeButton) {
     const activeButtonLabel = activeButton.getAttribute('data-tab');
-    const tabsContainer = document.querySelector(
-      `.${classNames.tabsContainer}`
-    );
+    const tabsContainer = document.querySelector(`.${classNames.tabsContainer}`);
     const tabBlock = activeButton.parentNode;
     const tabButtons = Array.apply(null, tabBlock.children).filter(elm =>
       matchSelector(elm, 'button')
     );
     const tabBlockOffset = tabBlock.offsetTop;
 
-    tabButtons.forEach(buttonElm =>
-      buttonElm.classList.remove(classNames.tabButtonActive)
-    );
+    tabButtons.forEach(buttonElm => buttonElm.classList.remove(classNames.tabButtonActive));
     activeButton.classList.add(classNames.tabButtonActive);
 
     if (!_isMatchingTabSync) {
       if (settings.persist) {
         const tabBlocks = tabsContainer
-          ? Array.apply(
-              null,
-              tabsContainer.querySelectorAll(`.${classNames.tabBlock}`)
-            )
+          ? Array.apply(null, tabsContainer.querySelectorAll(`.${classNames.tabBlock}`))
           : [];
         const tabBlockIndex = tabBlocks.indexOf(tabBlock);
-        const tabStorage =
-          JSON.parse(sessionStorage.getItem(storageKeys.persist)) || {};
+        const tabStorage = JSON.parse(sessionStorage.getItem(storageKeys.persist)) || {};
 
         tabStorage[tabBlockIndex] = activeButtonLabel;
         sessionStorage.setItem(storageKeys.persist, JSON.stringify(tabStorage));
@@ -336,8 +308,7 @@ function setActiveTab(elm, _isMatchingTabSync = false) {
               )
             )
           : [];
-        const tabStorage =
-          JSON.parse(sessionStorage.getItem(storageKeys.sync)) || [];
+        const tabStorage = JSON.parse(sessionStorage.getItem(storageKeys.sync)) || [];
 
         tabButtonMatches.forEach(tabButtonMatch => {
           setActiveTab(tabButtonMatch, true);
@@ -365,12 +336,9 @@ function setActiveTab(elm, _isMatchingTabSync = false) {
  * Sets the active tab based on the anchor ID in the URL
  */
 function setActiveTabFromAnchor() {
-  const anchorID = decodeURIComponent(
-    (window.location.hash.match(/(?:id=)([^&]+)/) || [])[1]
-  );
+  const anchorID = decodeURIComponent((window.location.hash.match(/(?:id=)([^&]+)/) || [])[1]);
   const anchorSelector = anchorID && `.${classNames.tabBlock} #${anchorID}`;
-  const isAnchorElmInTabBlock =
-    anchorID && document.querySelector(anchorSelector);
+  const isAnchorElmInTabBlock = anchorID && document.querySelector(anchorSelector);
 
   if (isAnchorElmInTabBlock) {
     const anchorElm = document.querySelector(`#${anchorID}`);
@@ -424,9 +392,7 @@ function docsifyTabs(hook, vm) {
   });
 
   hook.mounted(function () {
-    const tabsContainer = document.querySelector(
-      `.${classNames.tabsContainer}`
-    );
+    const tabsContainer = document.querySelector(`.${classNames.tabsContainer}`);
 
     tabsContainer &&
       tabsContainer.addEventListener('click', function handleTabClick(evt) {
@@ -455,9 +421,6 @@ if (window) {
 
   // Init plugin
   if (settings.tabComments || settings.tabHeadings) {
-    window.$docsify.plugins = [].concat(
-      window.$docsify.plugins || [],
-      docsifyTabs
-    );
+    window.$docsify.plugins = [].concat(window.$docsify.plugins || [], docsifyTabs);
   }
 }
diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -122,25 +122,22 @@
   > .docsify-tabs__content {
     margin-top: calc(0px - var(--docsifytabs-border-px));
     border-top: 0;
-    border-radius: 0 var(--docsifytabs-border-radius-px)
-      var(--docsifytabs-border-radius-px) var(--docsifytabs-border-radius-px);
+    border-radius: 0 var(--docsifytabs-border-radius-px) var(--docsifytabs-border-radius-px)
+      var(--docsifytabs-border-radius-px);
   }
 }
 
 // Material
 // -----------------------------------------------------------------------------
 .docsify-tabs--material {
   > .docsify-tabs__tab {
-    margin-bottom: calc(
-      var(--docsifytabs-tab-highlight-px) - var(--docsifytabs-border-px)
-    );
+    margin-bottom: calc(var(--docsifytabs-tab-highlight-px) - var(--docsifytabs-border-px));
     background: transparent;
     border: 0;
   }
 
   > .docsify-tabs__tab--active {
-    box-shadow: 0 var(--docsifytabs-tab-highlight-px) 0 0
-      var(--docsifytabs-tab-highlight-color);
+    box-shadow: 0 var(--docsifytabs-tab-highlight-px) 0 0 var(--docsifytabs-tab-highlight-color);
     background: transparent;
   }