🚧 Feat: add content encryption crude demo (#123)

exampleSite/content/tests/encrypt-content.md

@@ -0,0 +1,49 @@
+---
+title: "Encrypt Test"
+date: 2022-05-21T22:31:22+08:00
+description: "Test for encrypting content"
+type: 'posts'
+draft: true
+password: 1212
+message: password is 1212
+
+tags:
+- Test
+- Encrypt
+categories:
+- Test
+
+menu:
+  main:
+    title: "Test for encrypting content"
+    parent: "tests"
+    pre: "<i class='fa-solid fa-vial fa-fw fa-sm'></i>"
+---
+
+I was shy, so I hid.
+
+<!-- emoji render error -->
+
+## Shortcodes in encrypted Content
+
+{{< version 0.2.8 >}}
+
+`script` is a shortcode to insert custom **:(fa-brands fa-js fa-fw): Javascript** in your post.
+
+{{< admonition >}}
+The script content can be guaranteed to be executed in order after all third-party libraries are loaded. So you are free to use third-party libraries.
+{{< /admonition >}}
+
+Example `script` input:
+
+```go-html-template
+{{</* script */>}}
+console.log('Hello FixIt!');
+{{</* /script */>}}
+```
+
+You can see the output in the console of the developer tool.
+
+{{< script >}}
+console.log('Hello FixIt!');
+{{< /script >}}

layouts/partials/single/decrypt-form.html

@@ -0,0 +1,32 @@
+<div class="text-center" style="margin-top: 1rem;">
+  <input type="password" id="fixit-encrypt-gate" placeholder="{{ .Message }}">
+</div>
+
+<!-- Temporary attempt -->
+<script type="text/javascript">
+  document.querySelector('#fixit-encrypt-gate')?.addEventListener('keydown', function(e) {
+    if (e.code === 'Enter') {
+      e.preventDefault();
+      const $content = document.querySelector('#content');
+      const password = $content.getAttribute('data-password');
+      const base64EncodeContent = $content.getAttribute('data-content');
+      // TODO 密码正则验证，只允许数字和字母 (maybe)
+      const input = this.value.trim()
+      const saltLen = input.length % 2 ? input.length : input.length + 1;
+      // TODO 仅测试解密流程，md5 和 sha256 实现后，此处移除 明文密码
+      const inputMd5 = input === '1212' ? 'a01610228fe998f515a72dd730294d87' : 'md5_feature_todo';
+      const inputSha256 = 'cbfad02f9ed2a8d1e08d8f74f5303e9eb93637d47f82ab6f1c15871cf8dd0481';
+      if (inputMd5 !== password) {
+        return console.log('password error')
+      }
+      console.log('password passed')
+      const base64DecodeContent = atob(base64EncodeContent.replace(inputSha256.slice(saltLen), ''));
+      // TODO 记住解密状态
+      this.classList.add('d-none')
+      const $decryptedContent = document.createElement('div');
+      $decryptedContent.innerHTML = base64DecodeContent;
+      $decryptedContent.className = 'decrypted-ontent';
+      $content.insertAdjacentElement('afterbegin', $decryptedContent);
+    }
+  })
+</script>

layouts/posts/single.html

@@ -129,10 +129,30 @@
     {{- end -}}
 
     {{- /* Content */ -}}
-    <div class="content" id="content">
-      {{- /* Expiration Reminder */ -}}
-      {{- partial "single/expiration-reminder.html" . -}}
-      {{- dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
+    {{- $content := dict "Content" .Content "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
+    {{- if $params.password -}}
+      {{- $saltLen := strings.RuneCount (trim $params.password "") -}}
+      {{- $saltLen = cond (eq (mod $saltLen 2) 0) (add $saltLen 1) $saltLen -}}
+      {{- $base64EncodeContent := $content | base64Encode -}}
+      {{- $content = printf "%v%v%v"
+        (substr $base64EncodeContent 0 $saltLen)
+        (substr (sha256 $params.password) $saltLen)
+        (substr $base64EncodeContent $saltLen)
+      -}}
+    {{- end -}}
+    <div
+      class="content"
+      id="content"
+      {{ with $params.password }}data-password="{{ md5 $params.password }}"{{ end }}
+      {{ with $params.password }}data-content="{{ $content }}"{{ end }}
+    >
+      {{- if not $params.password -}}
+        {{- /* Expiration Reminder */ -}}
+        {{- partial "single/expiration-reminder.html" . -}}
+        {{- $content -}}
+      {{- else -}}
+        {{- partial "single/decrypt-form.html" $params -}}
+      {{- end -}}
     </div>
 
     {{- /* Footer */ -}}