hexo-theme-lnote 1.2.5 → 1.2.6

package/source/css/_pages/_base/base.styl

@@ -28,11 +28,10 @@ body
       transition color .2s ease-in-out, background-color .2s ease-in-out
 
 code
-  color inherit
+  user-select all
 
-table
-  font-size inherit
-  color var(--post-text-color)
+pre code
+  user-select auto
 
 img[lazyload]
   object-fit cover

package/source/css/_pages/_base/color-schema.styl

@@ -21,6 +21,8 @@
   --inlinecode-bg-color $inlinecode-bg-color
   --code-mac-top-bg #f2f2f2
   --code-mac-body-bg #fff
+  // --chat-sender #f0f0f0
+  // --chat-responder #d7ecff
 
 dark-colors()
   --body-bg-color $body-bg-color-dark
@@ -44,6 +46,8 @@ dark-colors()
   --inlinecode-bg-color $inlinecode-bg-color-dark
   --code-mac-top-bg #181818
   --code-mac-body-bg #000
+  // --chat-sender #16171a
+  // --chat-responder #002440
 
   .navbar .dropdown-collapse, .top-nav-collapse, .navbar-col-show
     if $navbar-glass-enable

package/source/css/_pages/_post/highlight.styl

@@ -7,8 +7,9 @@
 
   .highlight
     position relative
-    border-radius 8px
-    padding-top: 28px
+    border-radius 0.5rem
+    padding-top: 1.75rem
+    margin-top: 1rem
     background-color: var(--code-mac-top-bg)
     &::before
       background: #fc625d
@@ -35,8 +36,8 @@
       table-layout: fixed
       width: 100%
 
-figure
-  margin 1rem 0
+/* figure
+  margin 1rem 0 */
 
 figure.highlight
   position relative

package/source/css/_pages/_post/markdown.styl

@@ -24,8 +24,8 @@
     &:focus
       outline none
 
-  a
-    color var(--bs-link-color);
+  /* a
+    color var(--bs-link-color); */
 
   strong
     font-weight bold
@@ -83,7 +83,7 @@ hr, .markdown-body hr
   margin 2rem 0
 
 // Rewrite figcaption
-.markdown-body
+/* .markdown-body
   figcaption.image-caption
     font-size .8rem
     color var(--post-text-color)
@@ -93,4 +93,4 @@ hr, .markdown-body hr
     text-align center
 
   figcaption:not(.image-caption)
-    display none
+    display none */

package/source/css/_pages/_post/post-tag.styl

@@ -1,5 +1,3 @@
-
-
 // popover
 .lnote-popover-btn
     --bs-btn-padding-y 0
@@ -7,10 +5,23 @@
     --bs-btn-line-height 1
 .lnote-popover
     --bs-popover-border-color var(--bs-primary)
-    --bs-popover-header-bg var(--bs-primary)
-    --bs-popover-header-color var(--bs-white)
-    --bs-popover-body-padding-x 1rem
-    --bs-popover-body-padding-y .5rem
+    --bs-popover-body-padding-x 0
+    --bs-popover-body-padding-y 0
+    --bs-popover-bg transparent
+    &.secondary
+      --bs-popover-border-color var(--bs-secondary)
+    &.info
+      --bs-popover-border-color var(--bs-info)
+    &.success
+      --bs-popover-border-color var(--bs-success)
+    &.warning
+      --bs-popover-border-color var(--bs-warning)
+    &.danger
+      --bs-popover-border-color var(--bs-danger)
+    &.light
+      --bs-popover-border-color var(--bs-light)
+    &.dark
+      --bs-popover-border-color var(--bs-dark)
 
 // note
 .note
@@ -26,18 +37,39 @@
 
 // group-image
 .group-image-container
-  margin 1.5rem auto
+  margin 1rem auto
   img
-    width: 100%
-    height: 100%
-    // object-fit: cover
+    width 100%
+    height 100%
   .image-adapter
-    padding-bottom: 100%
-    position: relative
+    padding-bottom 100%
+    position relative
     > div
-      width: 100%
-      height: 100%
-      position: absolute
-      left: 0
-      top: 0
-      z-index: 2
+      width 100%
+      height 100%
+      position absolute
+      left 0
+      top 0
+      z-index 2
+
+// chat
+.chats
+  .chat-avatar
+    width: 2.8rem
+    height: 2.8rem
+  .chat-name
+    font-size: 0.8rem
+    line-height: 1
+    max-width: 84%
+    white-space: nowrap
+    text-overflow: ellipsis
+  .chat-content
+    max-width: 84%
+    :last-child
+      margin-bottom: 0
+  /* .chat-sender
+    .chat-content
+      background-color: var(--chat-sender)
+  .chat-responder
+    .chat-content
+      background-color: var(--chat-responder) */

package/source/css/_variables/base.styl

@@ -7,7 +7,7 @@ $code-font-size = 85%
 
 // body
 $body-bg-color = #fff
-$body-bg-color-dark = #000
+$body-bg-color-dark = #181818
 
 // text
 $text-color = #000

package/source/js/post/img-swipe.js

@@ -1,7 +1,7 @@
-import PhotoSwipeLightbox from '//lib.baomitu.com/photoswipe/5.4.2/photoswipe-lightbox.esm.min.js'
+import PhotoSwipeLightbox from '//cdn.staticfile.net/photoswipe/5.4.2/photoswipe-lightbox.esm.min.js'
 
 const lightbox = new PhotoSwipeLightbox({
-    pswpModule: () => import('//lib.baomitu.com/photoswipe/5.4.2/photoswipe.esm.min.js'),
+    pswpModule: () => import('//cdn.staticfile.net/photoswipe/5.4.2/photoswipe.esm.min.js'),
     wheelToZoom: true,
 })
 const groups = []
@@ -69,9 +69,12 @@ Promise.allSettled(promiseds).then(() => {
             order: 9,
             isButton: false,
             appendTo: 'root',
-            html: 'Caption text',
+            html: null,
             onInit(el, pswp) {
                 pswp.on('change', () => {
+                    if (pswp.currSlide.data.alt == null) {
+                        return
+                    }
                     el.innerHTML = `<div>${pswp.currSlide.data.alt}</div>`
                 })
             },

package/templates/Chat.vue

@@ -0,0 +1,52 @@
+<template>
+    <article class="chats">
+        <template v-for="item in chats">
+            <section
+                v-if="item.role === 'sender'"
+                class="chat-sender py-3 d-flex align-items-start justify-content-start"
+            >
+                <img
+                    class="chat-avatar rounded"
+                    :src="uriFor(['/img/chat/sender.jpg'])"
+                />
+                <div
+                    class="chat-part overflow-hidden ms-3 flex-fill d-flex flex-column align-items-start"
+                >
+                    <div class="chat-name mb-2 overflow-hidden">
+                        {{ item.name }}
+                    </div>
+                    <div
+                        class="chat-content rounded bg-secondary-subtle px-3 py-2"
+                        v-html="item.content"
+                    ></div>
+                </div>
+            </section>
+            <section
+                v-else
+                class="chat-responder py-3 flex-row-reverse d-flex align-items-start justify-content-start"
+            >
+                <img
+                    class="chat-avatar rounded"
+                    :src="uriFor(['/img/chat/responder.jpg'])"
+                />
+                <div
+                    class="chat-part overflow-hidden me-3 flex-fill d-flex flex-column align-items-end"
+                >
+                    <div class="chat-name mb-2 overflow-hidden">
+                        {{ item.name }}
+                    </div>
+                    <div
+                        class="chat-content rounded bg-primary-subtle px-3 py-2"
+                        v-html="item.content"
+                    ></div>
+                </div>
+            </section>
+        </template>
+    </article>
+</template>
+
+<script lang="ts" setup>
+import { uriFor } from './utils/uri'
+import type { Chat } from '../types/tag'
+const chats: Chat[] = []
+</script>

package/templates/GroupImage.vue

@@ -0,0 +1,36 @@
+<template>
+    <div v-if="rowCol === 1" class="group-image-container">
+        <img
+            class="img-fluid object-fit-cover w-100 img-swipe-single"
+            :alt="list[0].title"
+            :src="uriFor([list[0].url])"
+        />
+    </div>
+    <div v-else class="group-image-container img-swipe-group">
+        <div :class="['row', `row-cols-${rowCol}`, 'gx-2', 'gy-2']">
+            <div class="col" v-for="item in list">
+                <img
+                    v-if="isSameSize"
+                    class="img-fluid object-fit-cover"
+                    :alt="item.title"
+                    :src="uriFor([item.url])"
+                />
+                <div class="image-adapter" v-else>
+                    <div>
+                        <img
+                            class="img-fluid object-fit-cover"
+                            :alt="item.title"
+                            :src="uriFor([item.url])"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { uriFor } from './utils/uri'
+const rowCol: number = 1
+const isSameSize: boolean = false
+const list: { title: string; url: string }[] = []
+</script>

package/templates/MenuNav.vue

@@ -0,0 +1,39 @@
+<template>
+    <div :class="['btn-group', typeBgClass(type)]" role="group">
+        <div class="btn-group" role="group" v-for="menu in menus">
+            <button
+                type="button"
+                :class="['btn', `btn-outline-${type}`, 'dropdown-toggle']"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+            >
+                {{ menu.text }}
+            </button>
+            <ul :class="['dropdown-menu']">
+                <li v-for="item in menu.secondaryMenus">
+                    <a
+                        :class="['dropdown-item']"
+                        :href="uriFor([item.link])"
+                    >
+                        {{ item.text }}
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { uriFor, typeBgClass } from './utils/uri'
+import type { Type } from '../types/tag'
+type SecondaryMenu = {
+    text: string
+    link: string
+}
+type FirstMenu = {
+    text: string
+    secondaryMenus: SecondaryMenu[]
+}
+const type: Type = 'warning'
+const menus: FirstMenu[] = []
+</script>

package/templates/Note.vue

@@ -0,0 +1,33 @@
+<template>
+    <div
+        v-if="iconType"
+        :class="[
+            'note',
+            'alert',
+            `alert-${alertType}`,
+            'd-flex',
+            'align-items-top',
+        ]"
+        role="alert"
+    >
+        <svg
+            class="flex-shrink-0 me-2"
+            role="img"
+            width="1.2em"
+            height="1.2em"
+            :style="{marginTop: '0.2rem'}"
+        >
+            <use :xlink:href="`#${iconType}`"></use>
+        </svg>
+        <div v-html="html"></div>
+    </div>
+    <div v-else :class="['note', 'alert', `alert-${alertType}`]">
+        <div v-html="html"></div>
+    </div>
+</template>
+<script lang="ts" setup>
+import type { Type } from '../types/tag'
+const alertType: Type = 'info'
+const iconType: Type = 'info'
+const html: string = ''
+</script>

package/templates/Noun.vue

@@ -0,0 +1,25 @@
+<template>
+    <button
+        type="button"
+        :class="['btn', 'btn-link', `text-${type}-emphasis`, 'lnote-popover-btn']"
+        data-bs-toggle="popover"
+        data-bs-trigger="hover focus"
+        data-bs-placement="right"
+        :data-bs-custom-class="`lnote-popover ${type}`"
+        data-bs-html="true"
+        :data-bs-content="content"
+    >
+        {{ text }}
+        <svg width="18" height="18">
+            <use xlink:href="#question-circle-fill"></use>
+        </svg>
+    </button>
+</template>
+
+<script lang="ts" setup>
+import { typeBgClass } from './utils/uri'
+import type { Type } from '../types/tag'
+const type: Type = 'primary'
+const content = ''
+const text = ''
+</script>

package/templates/NounContent.vue

@@ -0,0 +1,29 @@
+<template>
+    <div :class="['card', `border-${type}`]">
+        <div :class="['card-header', 'fw-bold', `text-bg-${type}`]">{{ title }}</div>
+        <div :class="['card-body', `bg-${type}-subtle`, 'rounded-bottom']">
+            <!-- <h5 class="card-title" v-if="title">{{ title }}</h5> -->
+            <p class="card-text">
+                {{ text }}
+            </p>
+            <a
+                v-if="link"
+                :href="uriFor([link])"
+                :class="['card-link', `text-${type}-emphasis`]"
+            >
+                {{ moreText }}
+            </a>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { uriFor, typeBgClass } from './utils/uri'
+import type { Type } from '../types/tag'
+const type: Type = 'primary'
+// const promptText = ''
+const moreText = ''
+const title = ''
+const text = ''
+const link = ''
+</script>

package/templates/Tab.vue

@@ -0,0 +1,40 @@
+<template>
+    <nav>
+        <ul
+            class="nav nav-underline mb-3 d-flex flex-nowrap overflow-x-auto text-nowrap border-bottom"
+            role="tablist"
+        >
+            <li class="nav-item" role="presentation" v-for="(item, index) in tabs">
+                <button
+                    data-bs-toggle="tab"
+                    role="tab"
+                    type="button"
+                    :aria-selected="index === 0 ? 'true' : 'false'"
+                    :class="['nav-link', { active: index === 0 }]"
+                    :id="`tab-${key}-${index}`"
+                    :data-bs-target="`#nav-${key}-${index}`"
+                    :aria-controls="`nav-${key}-${index}`"
+                >
+                    {{ item.name }}
+                </button>
+            </li>
+        </ul>
+        <div class="tab-content">
+            <div
+                v-for="(item, index) in tabs"
+                :class="['tab-pane', 'fade', index === 0 && 'show active']"
+                :id="`nav-${key}-${index}`"
+                role="tabpanel"
+                :aria-labelledby="`tab-${key}-${index}`"
+                :tabindex="index"
+            >
+                <div v-html="item.content"></div>
+            </div>
+        </div>
+    </nav>
+</template>
+<script lang="ts" setup>
+import type { Tab } from '../types/tag'
+const key: string = ''
+const tabs: Tab[] = []
+</script>

package/templates/utils/uri.ts

@@ -1,12 +1,40 @@
 import fs from 'fs'
 import path from 'path'
+import type { Type } from '../../types/tag'
 
 function runtimeProjectInfo() {
     const projectPath = path.resolve(process.cwd(), 'package.json')
     return JSON.parse(fs.readFileSync(projectPath, 'utf-8'))
 }
 
-export function uriFor(resUri: string) {
+function linkIsCDN(url: string) {
+    if (/^https*:\/\//.test(url) || /^\/\//.test(url)) {
+        return true
+    }
+    return false
+}
+
+/**
+ * @description 图片链接生成
+ *  1. http或https开头的cdn链接，将原样转换回去，且只会返回第一个
+ *  2. 多个链接组合成一个，并在前面添加上当前项目的name
+ * @param {string[]} uris uri组，每一个uri必须带 / 开头，保持和 hexo 图片标签一样
+ * @returns 
+ */
+export function uriFor(uris: string[]) {
+    if (uris.length === 1 && linkIsCDN(uris[0])) {
+        return uris[0]
+    }
     const { name } = runtimeProjectInfo()
-    return ['', name, resUri.replace(/^\//, '')].join('/')
+    return ['/', name, ...uris].join('')
+}
+
+export function typeBgClass(type: Type) {
+    if (['warning', 'info', 'light'].includes(type)) {
+        return 'bg-dark'
+    }
+    if (['dark'].includes(type)) {
+        return 'bg-light'
+    }
+    return ''
 }

package/templates/noun.vue

@@ -1,15 +0,0 @@
-<template>
-    <button type="button" class="btn btn-link lnote-popover-btn" data-bs-toggle="popover" data-bs-trigger="hover focus"
-        data-bs-placement="right" data-bs-custom-class="lnote-popover" :data-bs-title="title" :data-bs-content="desc">
-        {{ text }}
-        <svg width="18" height="18">
-            <use xlink:href="#question-circle-fill"></use>
-        </svg>
-    </button>
-</template>
-
-<script lang="ts" setup>
-const title: string | undefined = undefined
-const desc = ''
-const text = ''
-</script>