⚡ Perf: optimize fixit-encryptor shortcode and add documentations for it (#123)

assets/css/_partial/_single/_fixit-decryptor.scss

@@ -3,8 +3,8 @@
   text-align: center;
   margin-top: 3rem;
 
-  .fixit-encryptor-shortcode.decrypted & {
-    margin-top: 0;
+  .fixit-encryptor-shortcode & {
+    margin-top: 1rem;
   }
 
   #fixit-decryptor-input,

assets/js/fixit-decryptor.js

@@ -14,7 +14,6 @@ FixItDecryptor = function (options = {}) {
   this.decryptedEventSet = new Set();
   this.resetEventSet = new Set();
   this.$el = document.querySelector('.fixit-decryptor-container');
-  this.$shortcodes = document.querySelectorAll('fixit-encryptor');
 
   /**
    * decrypt content
@@ -32,6 +31,11 @@ FixItDecryptor = function (options = {}) {
     } catch (err) {
       return console.error(err);
     }
+    // decrypted hook
+    console.log(this.decryptedEventSet)
+    for (const event of this.decryptedEventSet) {
+      event();
+    }    
   };
 
   /**
@@ -97,8 +101,12 @@ FixItDecryptor = function (options = {}) {
    * initialize fixit-encryptor shortcodes
    */
   _proto.initShortcodes = () => {
+    // TODO TODO shortcode decrypted event
+    // this.addEventListener('decrypted', this.options?.decrypted);
     const _decryptor = this;
-    this.$shortcodes.forEach($shortcode => {
+    const $shortcodes = document.querySelectorAll('fixit-encryptor:not(.decrypted)');
+
+    $shortcodes.forEach($shortcode => {
       $shortcode.querySelector('.fixit-decryptor-input')?.addEventListener('keydown', function (e) {
         if (e.key === 'Enter') {
           e.preventDefault();
@@ -131,10 +139,10 @@ FixItDecryptor = function (options = {}) {
           } catch (err) {
             return console.error(err);
           }
-          // decrypted hook
-          for (const event of _decryptor.decryptedEventSet) {
-            event();
-          }
+          // TODO shortcode decrypted hook
+          // for (const event of _decryptor.decryptedEventSet) {
+          //   event();
+          // }
         }
       });
     });

exampleSite/content/posts/theme-documentation-content-encryption/index.en.md

@@ -95,9 +95,39 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 {{< /script >}}
 
-## Partial encryption
+## Partial Encryption
 
-- [ ] fixit-encryptor shortcode
+{{< version 0.2.15 >}}
+
+You can use `fixit-encryptor` shortcode to encrypt partial content.
+
+The `fixit-encryptor` shortcode has the following named parameters:
+
+* **password** *[required]* (**first** positional parameter)
+
+    Password of the partial encrypted content.
+
+* **message** *[optional]* (**second** positional parameter)
+
+    Placeholder of the decryptor input.
+
+Example `fixit-encryptor` input:
+
+```go-html-template
+{{%/* fixit-encryptor "1212" "Password is 1212" */%}}
+The `fixit-encryptor` shortcode was supported in version {{</* version 0.2.15 */>}}.
+{{%/* /fixit-encryptor */%}}
+Or
+{{%/* fixit-encryptor password="1212" message="Password is 1212" */%}}
+The `fixit-encryptor` shortcode was supported in version {{</* version 0.2.15 */>}}.
+{{%/* /fixit-encryptor */%}}
+```
+
+The rendered output looks like this:
+
+{{% fixit-encryptor "1212" "Password is 1212" %}}
+The `fixit-encryptor` shortcode was supported in version {{< version 0.2.15 >}}.
+{{% /fixit-encryptor %}}
 
 ## Summary
 
@@ -106,6 +136,10 @@ Compared with encrypting content through script batch processing such as golang/
 * **Advantages**: High usability, out of the box, without further batch processing
 * **Disadvantages**: Low security, the encryption algorithm is limited by the `go-html-template` syntax
 
+> "The simplest password is enough to prevent 90% of people!"
+>
+> There is no trivial matter about privacy. Please do not upload important and private contents, and keep them properly!
+
 ## Class FixItDecryptor API {#fixit-decryptor-api}
 
 FixIt decryptor for encrypted pages
@@ -132,6 +166,10 @@ FixIt decryptor for encrypted pages
 
 initialize FixIt decryptor
 
+#### initShortcodes()
+
+initialize fixit-encryptor shortcodes
+
 #### validateCache()
 
 validate the cached decryption statistics in localStorage

exampleSite/content/posts/theme-documentation-content-encryption/index.zh-cn.md

@@ -94,7 +94,37 @@ document.addEventListener('DOMContentLoaded', () => {
 
 ## 部分加密
 
-- [ ] fixit-encryptor shortcode
+{{< version 0.2.15 >}}
+
+您可以使用 `fixit-encryptor` shortcode 来加密部分内容。
+
+`fixit-encryptor` shortcode 具有以下命名参数：
+
+* **password** *[必选]*（**第一个**位置参数）
+
+    部分加密内容的密码。
+
+* **message** *[可选]*（**第二个**位置参数）
+
+    解密输入框的提示信息。
+
+一个 `fixit-encryptor` 示例：
+
+```go-html-template
+{{%/* fixit-encryptor "1212" "密码是 1212" */%}}
+`fixit-encryptor` shortcode 在版本 {{</* version 0.2.15 */>}} 得到支持。
+{{%/* /fixit-encryptor */%}}
+Or
+{{%/* fixit-encryptor password="1212" message="密码是 1212" */%}}
+`fixit-encryptor` shortcode 在版本 {{</* version 0.2.15 */>}} 得到支持。
+{{%/* /fixit-encryptor */%}}
+```
+
+呈现的输出效果如下：
+
+{{% fixit-encryptor "1212" "密码是 1212" %}}
+`fixit-encryptor` shortcode 在版本 {{< version 0.2.15 >}} 得到支持。
+{{% /fixit-encryptor %}}
 
 ## 结语
 

exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md

@@ -1386,6 +1386,15 @@ The rendered output looks like this:
 this is a center-quote shortcode example.
 {{% /center-quote %}}
 
+
+## fixit-encryptor
+
+{{< version 0.2.15 >}}
+
+You can use `fixit-encryptor` shortcode to encrypt partial content.
+
+The full documentation is provided in [Theme Documentation - Content Encryption](../theme-documentation-content-encryption/#partial-encryption).
+
 ---
 
 {{< admonition quote "Thanks" >}}

exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md

@@ -1386,6 +1386,14 @@ this is a center-quote shortcode example.
 this is a center-quote shortcode example.
 {{% /center-quote %}}
 
+## fixit-encryptor
+
+{{< version 0.2.15 >}}
+
+您可以使用 `fixit-encryptor` shortcode 来加密部分内容。
+
+完整文档请查看页面 [主题文档 - 内容加密](../theme-documentation-content-encryption/#partial-encryption).
+
 ---
 
 {{< admonition quote "感谢" >}}

exampleSite/content/tests/encryption.md

@@ -258,3 +258,25 @@ document.addEventListener('DOMContentLoaded', () => {
 **hello** *world*  
 this is a center-quote shortcode example.
 {{% /center-quote %}}
+
+
+### fixit-encryptor
+
+All the following shortcodes passwords are `1212`.
+
+{{% fixit-encryptor "1212" %}}
+This is a `fixit-encryptor` shortcode example.
+{{% /fixit-encryptor %}}
+
+{{% fixit-encryptor "1212" %}}
+
+**hello**
+{{% fixit-encryptor "1212" %}}
+*world*
+
+{{< admonition >}}
+The `fixit-encryptor` shortcode was supported in version {{</* version 0.2.15 */>}}.
+{{< /admonition >}}
+{{% /fixit-encryptor %}}
+
+{{% /fixit-encryptor %}}

exampleSite/content/tests/shortcodes.md

@@ -57,16 +57,3 @@ A **tip** banner
 ```
 {{< version 0.2.0 changed >}} {{< link "https://katex.org/" KaTeX >}} mathematical formulas (https://katex.org)
 ```
-
-Nested **fixit-encryptor** shortcode
-
-{{% fixit-encryptor "1212" %}}
-  **hello**
-{{% /fixit-encryptor %}}
-
-{{% fixit-encryptor "1212" %}}
-  *world*
-  {{< admonition >}}
-    fixit-encryptor shortcode was supported in {{< version 0.2.15 >}}
-  {{< /admonition >}}
-{{% /fixit-encryptor %}}

layouts/partials/assets.html

@@ -186,7 +186,6 @@
 
 {{- /* Content Decryption */ -}}
 {{- $encryptPartial := (.Scratch.Get "this").encryptPartial -}}
-{{- $config = dict "all" (isset $params "password") "shortcode" ($encryptPartial | default false) | dict "encryption" | merge $config -}}
 {{- if $params.password | or $encryptPartial -}}
   {{- $cryptoCoreJS := $cdn.cryptoCoreJS | default "lib/crypto-js/core.js" -}}
   {{- $cryptoEncBase64JS := $cdn.cryptoEncBase64JS | default "lib/crypto-js/enc-base64.js" -}}
@@ -197,6 +196,7 @@
   {{- dict "Source" $cryptoMd5JS "Minify" true "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
   {{- dict "Source" $cryptoSha256JS "Minify" true "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
   {{- dict "Source" "js/fixit-decryptor.js" "Minify" hugo.IsProduction "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+  {{- $config = dict "all" (isset $params "password") "shortcode" ($encryptPartial | default false) | dict "encryption" | merge $config -}}
 {{- end -}}
 
 {{- /* 不蒜子 */ -}}

layouts/shortcodes/fixit-encryptor.html

@@ -1,6 +1,13 @@
-{{- $password := .Get 0 | default "" -}}
-<!-- TODO get msg from shortcode param -->
-{{- $msg := (.Scratch.Get "params").message | default (T "encryptedMessage") -}}
+{{- $password := "" -}}
+{{- $message := "" -}}
+
+{{- if .IsNamedParams -}}
+  {{- $password = .Get "password" | default "" -}}
+  {{- $message = .Get "message" | default (T "encryptedMessage") -}}
+{{- else -}}
+  {{- $password = .Get 0 | default "" -}}
+  {{- $message = .Get 1 | default (T "encryptedMessage") -}}
+{{- end -}}
 
 {{- if $password -}}
   {{- $content := .Inner | .Page.RenderString -}}
@@ -16,7 +23,7 @@
   <fixit-encryptor class="fixit-encryptor-shortcode">
     <div class="fixit-decryptor-container">
       <label title='{{ T "password" }}'>
-        <input type="password" class="fixit-decryptor-input" placeholder="🔑 {{ $msg }}" />
+        <input type="password" class="fixit-decryptor-input" placeholder="🔑 {{ $message }}" />
       </label>
     </div>
     <div data-password="{{ md5 $password }}" data-content="{{ $content }}"></div>

src/js/theme.js

@@ -925,8 +925,13 @@ class FixIt {
         });
       }
     });
+    if (this.config.encryption?.shortcode) {
+      this.decryptor.addEventListener('decrypted', () => {
+        this.decryptor.initShortcodes();
+      })
+      this.decryptor.initShortcodes();
+    }
     this.config.encryption?.all && this.decryptor.init();
-    this.config.encryption?.shortcode && this.decryptor.initShortcodes();
   }
 
   onScroll() {