mkdocs-document-dates 3.5__tar.gz → 3.5.2__tar.gz

{mkdocs_document_dates-3.5/mkdocs_document_dates.egg-info → mkdocs_document_dates-3.5.2}/PKG-INFO

@@ -1,7 +1,7 @@
 Metadata-Version: 2.4
 Name: mkdocs-document-dates
-Version: 3.5
-Summary: A new generation MkDocs plugin for displaying exact creation time, last update time, authors, email of documents
+Version: 3.5.2
+Summary: A new generation MkDocs plugin for displaying exact creation date, last updated date, authors, email of documents
 Home-page: https://github.com/jaywhj/mkdocs-document-dates
 Author: Aaron Wang
 Author-email: aaronwqt@gmail.com
@@ -44,9 +44,7 @@ A new generation MkDocs plugin for displaying exact **creation date, last update
 - [x] Support for manually configuring author's name, link, avatar, email, etc.
 - [x] Flexible display position (top or bottom)
 - [x] Elegant styling (fully customizable)
-- [x] Smart Tooltip Hover Tips
 - [x] Multi-language support, localization support, intelligent recognition of user language, automatic adaptation
-- [x] Cross-platform support (Windows, macOS, Linux)
 - [x] **Ultimate build efficiency**: O(1), no need to set the env var `!ENV` to distinguish runs
 
 | Build Speed Comparison:     | 100 md: | 1000 md: | Time Complexity: |
@@ -81,9 +79,6 @@ plugins:
         - blog/*                   # Example: exclude all files in blog folder, including subfolders
       date_format: '%Y-%m-%d'  # Date format strings (e.g., %Y-%m-%d, %b %d, %Y)
       time_format: '%H:%M:%S'  # Time format strings (valid only if type=datetime)
-      show_created: true       # Show creation date: true false, default: true
-      show_updated: true       # Show last updated date: true false, default: true
-      show_author: true        # Show author: true(avatar) text(text) false(hidden), default: true
 ```
 
 ## Customization Settings
@@ -93,11 +88,22 @@ In addition to the above basic configuration, the plug-in also provides a wealth
 - [Specify Datetime](https://jaywhj.netlify.app/document-dates-en#Specify-Datetime): Introduces the mechanism for obtaining document dates and methods for personalized customization, you can manually specify the creation date and last updated date for each document
 - [Specify Author](https://jaywhj.netlify.app/document-dates-en#Specify-Author): Introduces the mechanism for obtaining document authors and methods for personalized customization, you can manually specify the author information for each document, such as name, link, avatar, email, etc.
 - [Specify Avatar](https://jaywhj.netlify.app/document-dates-en#Specify-Avatar): You can manually specify the avatar for each author, support local file path and URL path
-- [Set Plugin Style](https://jaywhj.netlify.app/document-dates-en#Set-Plugin-Style): You can quickly set the plugin styles through preset entrances, such as icons, themes, colors, fonts, animations, dividing line and so on
-- [Add Localization Language](https://jaywhj.netlify.app/document-dates-en#Add-Localization-Language): More localization languages for `timeago` and `tooltip` 
-- [Use Template Variables](https://jaywhj.netlify.app/document-dates-en#Use-Template-Variables): Can be used to optimize `sitemap.xml` for site SEO, can be used to re-customize plug-ins, etc.
+- [Configuration Structure and Style](https://jaywhj.netlify.app/document-dates-en#Structure-and-Style): You can freely configure the plugin's display structure in mkdocs.yml or Front Matter. You can quickly set the plugin styles through preset entrances, such as icons, themes, colors, fonts, animations, dividing line and so on
+- [Use Template Variables](https://jaywhj.netlify.app/document-dates-en#Use-Template-Variables): Can be used to optimize `sitemap.xml` for site SEO; Can be used to re-customize plug-ins, etc.
 - [Add Recently Updated Module](https://jaywhj.netlify.app/document-dates-en#Add-Recently-Updated-Module): Enable list of recently updated documents (in descending order of update date), this is ideal for sites with a large number of documents, so that readers can quickly see what's new
+- [Add Localization Language](https://jaywhj.netlify.app/document-dates-en#Add-Localization-Language): More localization languages for `timeago` and `tooltip` 
 - [Other Tips](https://jaywhj.netlify.app/document-dates-en#Other-Tips): Introducing the Do's of using plugin in Docker
 - [Development Stories](https://jaywhj.netlify.app/document-dates-en#Development-Stories): Describes the origin of the plug-in, the difficulties and solutions encountered in development, and the principles and directions of product design
 
 See the documentation for details: https://jaywhj.netlify.app/document-dates-en
+
+
+<br />
+
+## Chat Group
+
+**Discord**: https://discord.gg/cvTfge4AUy
+
+**Wechat**: 
+
+<img src="wechat-group.jpg" width="140" />

{mkdocs_document_dates-3.5 → mkdocs_document_dates-3.5.2}/README.md

@@ -18,9 +18,7 @@ A new generation MkDocs plugin for displaying exact **creation date, last update
 - [x] Support for manually configuring author's name, link, avatar, email, etc.
 - [x] Flexible display position (top or bottom)
 - [x] Elegant styling (fully customizable)
-- [x] Smart Tooltip Hover Tips
 - [x] Multi-language support, localization support, intelligent recognition of user language, automatic adaptation
-- [x] Cross-platform support (Windows, macOS, Linux)
 - [x] **Ultimate build efficiency**: O(1), no need to set the env var `!ENV` to distinguish runs
 
 | Build Speed Comparison:     | 100 md: | 1000 md: | Time Complexity: |
@@ -55,9 +53,6 @@ plugins:
         - blog/*                   # Example: exclude all files in blog folder, including subfolders
       date_format: '%Y-%m-%d'  # Date format strings (e.g., %Y-%m-%d, %b %d, %Y)
       time_format: '%H:%M:%S'  # Time format strings (valid only if type=datetime)
-      show_created: true       # Show creation date: true false, default: true
-      show_updated: true       # Show last updated date: true false, default: true
-      show_author: true        # Show author: true(avatar) text(text) false(hidden), default: true
 ```
 
 ## Customization Settings
@@ -67,11 +62,22 @@ In addition to the above basic configuration, the plug-in also provides a wealth
 - [Specify Datetime](https://jaywhj.netlify.app/document-dates-en#Specify-Datetime): Introduces the mechanism for obtaining document dates and methods for personalized customization, you can manually specify the creation date and last updated date for each document
 - [Specify Author](https://jaywhj.netlify.app/document-dates-en#Specify-Author): Introduces the mechanism for obtaining document authors and methods for personalized customization, you can manually specify the author information for each document, such as name, link, avatar, email, etc.
 - [Specify Avatar](https://jaywhj.netlify.app/document-dates-en#Specify-Avatar): You can manually specify the avatar for each author, support local file path and URL path
-- [Set Plugin Style](https://jaywhj.netlify.app/document-dates-en#Set-Plugin-Style): You can quickly set the plugin styles through preset entrances, such as icons, themes, colors, fonts, animations, dividing line and so on
-- [Add Localization Language](https://jaywhj.netlify.app/document-dates-en#Add-Localization-Language): More localization languages for `timeago` and `tooltip` 
-- [Use Template Variables](https://jaywhj.netlify.app/document-dates-en#Use-Template-Variables): Can be used to optimize `sitemap.xml` for site SEO, can be used to re-customize plug-ins, etc.
+- [Configuration Structure and Style](https://jaywhj.netlify.app/document-dates-en#Structure-and-Style): You can freely configure the plugin's display structure in mkdocs.yml or Front Matter. You can quickly set the plugin styles through preset entrances, such as icons, themes, colors, fonts, animations, dividing line and so on
+- [Use Template Variables](https://jaywhj.netlify.app/document-dates-en#Use-Template-Variables): Can be used to optimize `sitemap.xml` for site SEO; Can be used to re-customize plug-ins, etc.
 - [Add Recently Updated Module](https://jaywhj.netlify.app/document-dates-en#Add-Recently-Updated-Module): Enable list of recently updated documents (in descending order of update date), this is ideal for sites with a large number of documents, so that readers can quickly see what's new
+- [Add Localization Language](https://jaywhj.netlify.app/document-dates-en#Add-Localization-Language): More localization languages for `timeago` and `tooltip` 
 - [Other Tips](https://jaywhj.netlify.app/document-dates-en#Other-Tips): Introducing the Do's of using plugin in Docker
 - [Development Stories](https://jaywhj.netlify.app/document-dates-en#Development-Stories): Describes the origin of the plug-in, the difficulties and solutions encountered in development, and the principles and directions of product design
 
 See the documentation for details: https://jaywhj.netlify.app/document-dates-en
+
+
+<br />
+
+## Chat Group
+
+**Discord**: https://discord.gg/cvTfge4AUy
+
+**Wechat**: 
+
+<img src="wechat-group.jpg" width="140" />

{mkdocs_document_dates-3.5 → mkdocs_document_dates-3.5.2}/mkdocs_document_dates/plugin.py

@@ -54,7 +54,6 @@ class DocumentDatesPlugin(BasePlugin):
         docs_dir_path = Path(config['docs_dir'])
 
         # 加载 author 配置
-        self._extract_github_username(config.get('repo_url'))
         authors_file = docs_dir_path / 'authors.yml'
         if not authors_file.exists():
             try:
@@ -133,6 +132,7 @@ class DocumentDatesPlugin(BasePlugin):
         
         # 添加自定义 JS 文件
         config['extra_javascript'].extend([
+            'assets/document_dates/core/md5.min.js',
             'assets/document_dates/core/default.config.js',
             'assets/document_dates/user.config.js',
             'assets/document_dates/core/utils.js',
@@ -158,10 +158,6 @@ class DocumentDatesPlugin(BasePlugin):
         
         # 获取作者信息
         authors = self._get_author_info(rel_path, page, config)
-        if authors and len(authors) == 1:
-            a = authors[0]
-            if not a.avatar and self.github_username:
-                a.avatar = f"https://avatars.githubusercontent.com/{self.github_username}"
         
         # 在排除前暴露 meta 信息给前端使用
         page.meta['document_dates_created'] = created.isoformat()
@@ -173,7 +169,7 @@ class DocumentDatesPlugin(BasePlugin):
             return markdown
         
         # 生成日期和作者信息 HTML
-        info_html = self._generate_html_info(created, updated, authors)
+        info_html = self._generate_html_info(page.meta, created, updated, authors)
         
         # 将信息写入 markdown
         return self._insert_date_info(markdown, info_html)
@@ -225,17 +221,6 @@ class DocumentDatesPlugin(BasePlugin):
                     shutil.copy2(item, target_dir / item.name)
 
 
-    def _extract_github_username(self, url):
-        try:
-            parsed = urlparse(url)
-            if parsed.netloc != 'github.com':
-                return
-            path_parts = [p for p in parsed.path.split('/') if p]
-            if path_parts:
-                self.github_username = path_parts[0]
-        except Exception as e:
-            logger.info(f"Error parsing URL: {e}")
-
     def _load_authors_from_yaml(self, file_path: Path):
         if not file_path.exists():
             return
@@ -378,9 +363,18 @@ class DocumentDatesPlugin(BasePlugin):
             return date.strftime(f"{self.config['date_format']} {self.config['time_format']}")
         return date.strftime(self.config['date_format'])
 
-    def _generate_html_info(self, created: datetime, updated: datetime, authors=None):
+    def _generate_html_info(self, meta, created: datetime, updated: datetime, authors=None):
         try:
-            # 构建基本的日期信息 HTML
+            show_created = self.config['show_created'] and meta.get('show_created') is not False
+            show_updated = self.config['show_updated'] and meta.get('show_updated') is not False
+            show_author  = self.config['show_author']  and meta.get('show_author')  is not False
+
+            show_dates = show_created or show_updated
+            show_plugin = show_dates or show_author
+            if not show_plugin:
+                return ""
+
+            # 构建插件骨架 HTML
             html_parts = []
             position_class = 'document-dates-top' if self.config['position'] == 'top' else 'document-dates-bottom'
             html_parts.append(f"<div class='document-dates-plugin-wrapper {position_class}'>")
@@ -389,19 +383,24 @@ class DocumentDatesPlugin(BasePlugin):
             def build_time_icon(time_obj: datetime, icon: str):
                 formatted = time_obj.strftime(self.config['date_format'])
                 return (
-                    f"<span data-tippy-content data-tippy-raw='{formatted}'>"
+                    f"<span class='dd-item' data-tippy-content data-tippy-raw='{formatted}'>"
                     f"<span class='material-icons' data-icon='{icon}'></span>"
-                    f"<time datetime='{time_obj.isoformat()}'>"
-                    f"{self._get_formatted_date(time_obj)}</time></span>"
+                    f"<time datetime='{time_obj.isoformat()}'>{self._get_formatted_date(time_obj)}</time>"
+                    f"</span>"
                 )
 
-            if self.config['show_created']:
+            # 构建日期
+            if show_dates:
+                html_parts.append("<div class='dd-left'>")
+            if show_created:
                 html_parts.append(build_time_icon(created, 'doc_created'))
-            if self.config['show_updated']:
+            if show_updated:
                 html_parts.append(build_time_icon(updated, 'doc_updated'))
+            if show_dates:
+                html_parts.append("</div>")
 
-            # 添加作者信息
-            if self.config['show_author'] and authors:
+            # 构建作者
+            if show_author and authors:
                 def get_author_tooltip(author):
                     if author.url:
                         return f'<a href="{author.url}" target="_blank">{author.name}</a>'
@@ -409,32 +408,33 @@ class DocumentDatesPlugin(BasePlugin):
                         return f'<a href="mailto:{author.email}">{author.name}</a>'
                     return author.name
 
-                if self.config['show_author'] == 'text':
+                if show_dates:
+                    html_parts.append("<div class='dd-right'>")
+                else:
+                    html_parts.append("<div class='dd-right dd-right-start'>")
+                icon = 'doc_author' if len(authors) == 1 else 'doc_authors'
+                html_parts.append(f"<span class='material-icons' data-icon='{icon}'></span>")
+                html_parts.append("<div class='author-group'>")
+                show_text = self.config['show_author'] == 'text' or meta.get('show_author') == 'text'
+                if show_text:
                     # 显示文本模式
-                    tooltip_text = ',&nbsp;'.join(get_author_tooltip(author) for author in authors)
-                    # author_text = ', '.join(author.name for author in authors)
-                    icon = 'doc_author' if len(authors) == 1 else 'doc_authors'
-                    html_parts.append(
-                        f"<span data-tippy-content data-tippy-raw='{tooltip_text}'>"
-                        f"<span class='material-icons' data-icon='{icon}'></span>"
-                        f"{tooltip_text}"
-                        # f"{author_text}"
-                        f"</span>"
-                    )
+                    for index, author in enumerate(authors):
+                        if index > 0:
+                            html_parts.append(",&nbsp;&nbsp;")
+                        tooltip = get_author_tooltip(author)
+                        html_parts.append(f"<span class='text-wrapper' data-tippy-content data-tippy-raw='{ tooltip }'>{ tooltip }</span>")
                 else:
                     # 显示头像模式（默认）
-                    icon = 'doc_author' if len(authors) == 1 else 'doc_authors'
-                    html_parts.append(f"<span class='material-icons' data-icon='{icon}'></span>")
-                    html_parts.append("<div class='avatar-group'>")
                     for author in authors:
                         tooltip = get_author_tooltip(author)
                         html_parts.append(
                             f"<div class='avatar-wrapper' data-name='{author.name}' data-tippy-content data-tippy-raw='{tooltip}'>"
                             f"<span class='avatar-text'></span>"
-                            f"<img class='avatar' src='{author.avatar}' onerror=\"this.style.display='none'\" />"
+                            f"<img class='avatar' data-src='{author.avatar}' data-email='{author.email}' />"
                             f"</div>"
                         )
-                    html_parts.append("</div>")
+                html_parts.append("</div>")
+                html_parts.append("</div>")
 
             html_parts.append("</div></div>")
             return ''.join(html_parts)
@@ -445,6 +445,8 @@ class DocumentDatesPlugin(BasePlugin):
 
 
     def _insert_date_info(self, markdown: str, date_info: str):
+        if not date_info:
+            return markdown
         if self.config['position'] == 'top':
             first_line, insert_pos = self._find_markdown_body_start(markdown)
             if first_line.startswith(('# ', '<h1')):

{mkdocs_document_dates-3.5 → mkdocs_document_dates-3.5.2}/mkdocs_document_dates/static/config/user.config.css

@@ -1,7 +1,20 @@
-/* 1. Plug-in styles
-    including icons, fonts, colors, etc
+/* 1. Plug-in wrapper styles
+    including divider line, margin, padding, and the hiding of this plugin, etc
     */
+
+/* Remove the divider line: */
 /* 
+.document-dates-plugin-wrapper.document-dates-top,
+.document-dates-plugin-wrapper.document-dates-bottom {
+    border-bottom: none;
+} */
+
+
+
+/* 2. Plug-in styles
+    including icons, fonts, colors, etc
+    */
+/*
 .md-main .document-dates-plugin {
     color: rgba(109, 157, 204, 0.7);
     font-size: 0.75rem;
@@ -18,7 +31,7 @@
     doc_author:   person, account_circle
     doc_authors:  group, groups */
 
-/* 
+/*
 .document-dates-plugin .material-icons[data-icon="doc_created"]::before {
     content: "more_time";
 }
@@ -34,23 +47,28 @@
 
 
 
-/* 2. Plug-in wrapper styles
-    including divider line, margin, padding, and the hiding of this plugin, etc
+/* 3. Author Avatar styles
+    e.g. shape, hover scale, grayscale mode
     */
-
-/* Remove the divider line: */
 /* 
-.document-dates-plugin-wrapper.document-dates-top,
-.document-dates-plugin-wrapper.document-dates-bottom {
-    border-bottom: none;
+.avatar-wrapper {
+    border-radius: 4px;
+    filter: grayscale(0%);
+}
+.avatar-wrapper:hover {
+    transform: scale(1.08);
 } */
 
 
 
-/* 3. Tooltip styles
+/* 4. Tooltip styles
     including theme, arrow, font, color, background color, etc
     */
 
+/* .tippy-box {
+    font-size: 12px;
+} */
+
 /* Demo of the custom theme 'sorrel' and 'sublime', you can configure it in user.config.js (optional) */
 /* 
 .tippy-box[data-theme~='sorrel'] {
@@ -68,17 +86,3 @@
 .tippy-box[data-theme~='sublime'] > .tippy-arrow::before {
     color: #474747;
 } */
-
-
-
-/* 4. Author Avatar styles
-    e.g. shape, hover scale, grayscale mode
-    */
-/* 
-.avatar-wrapper {
-    border-radius: 4px;
-    filter: grayscale(0%);
-}
-.avatar-wrapper:hover {
-    transform: scale(1.08);
-} */

{mkdocs_document_dates-3.5 → mkdocs_document_dates-3.5.2}/mkdocs_document_dates/static/config/user.config.js

@@ -8,6 +8,7 @@ Part 1:
 // tooltip_config.theme.light = 'tomato';
 // tooltip_config.placement = 'top';
 // tooltip_config.arrow = false;
+// tooltip_config.zIndex = 2;
 
 /* Or, override all configuration items: */
 /*
@@ -23,6 +24,7 @@ TooltipConfig.setConfig({
     interactive: true,      // content in Tooltip is interactive
     animation: 'scale',     // animation type: scale shift-away
     inertia: true,          // animation inertia
+    // zIndex: 2,              // control the display layer(z-index) of the tooltip element
     // arrow: false,           // whether to allow arrows
     // animateFill: true,      // determines if the background fill color should be animated
     // delay: [400, null],     // delay: [show, hide]: show is 400ms, and hide is null for the default value

{mkdocs_document_dates-3.5 → mkdocs_document_dates-3.5.2}/mkdocs_document_dates/static/core/core.css

@@ -1,26 +1,39 @@
+/* ==========================================================================
+   1. Plug-in wrapper styles
+   ========================================================================== */
+.document-dates-plugin-wrapper.document-dates-top,
+.document-dates-plugin-wrapper.document-dates-bottom {
+    margin: 1rem 0;
+    border-bottom: 1px solid rgba(142, 142, 142, 0.1);
+}
+.md-main .document-dates-plugin-wrapper.document-dates-top {
+    margin: -1rem 0 1rem 0;
+}
 
-/* 1. Plug-in styles
-    including icons, fonts, colors, etc
-    */
+/* Hide the footnote divider immediately following the date information with the CSS adjacent sibling selector */
+.document-dates-plugin-wrapper + .footnote hr {
+    display: none;
+}
+
+
+/* ==========================================================================
+   2. Plug-in Layout & Fonts
+   ========================================================================== */
 .document-dates-plugin {
     color: #666;
     font-size: 0.9rem;
     display: flex;
     align-items: center;
-    padding: 0.2rem 0;
-    margin-bottom: 0.6rem;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    padding: 0.1rem 0;
+    margin-bottom: 0.5rem;
 }
 .md-main .document-dates-plugin {
     color: rgba(142, 142, 142, 0.7);
     font-size: 0.75rem;
 }
-.document-dates-plugin > span {
-    display: inline-flex;
-    align-items: center;
-}
-.document-dates-plugin > span:not(:first-child) {
-    margin-left: 1.5rem;
-}
+
 .document-dates-plugin .material-icons {
     font-size: 1rem;
     opacity: 0.85;
@@ -51,92 +64,93 @@
     content: "group";
 }
 
-
-
-/* 2. Plug-in wrapper styles
-    including divider, margin, padding, etc
-    */
-.document-dates-plugin-wrapper.document-dates-top,
-.document-dates-plugin-wrapper.document-dates-bottom {
-    margin: 1rem 0;
-    border-bottom: 1px solid rgba(142, 142, 142, 0.1);
+.dd-left {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-right: 1.4rem;
 }
-.md-main .document-dates-plugin-wrapper.document-dates-top {
-    margin: -1rem 0 1rem 0;
+.dd-item {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    flex-shrink: 0;
 }
-
-/* Hide the footnote divider immediately following the date information with the CSS adjacent sibling selector */
-.document-dates-plugin-wrapper + .footnote hr {
-    display: none;
+.dd-left > .dd-item + .dd-item {
+    margin-left: 1.4rem;
 }
 
-
-
-/* 3. Tooltip styles
-    including theme, arrow, font, color, background color, etc
-    */
-
-/* .tippy-box {
-    font-size: 12px;
-} */
-
-/* Demo of the custom theme 'tomato' (optional) */
-.tippy-box[data-theme~='tomato'] {
-    background-color: tomato;
-    color: white;
+.dd-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
 }
-/* Customize the arrow corresponding to the theme tomato */
-.tippy-box[data-theme~='tomato'] > .tippy-arrow::before {
-    color: tomato;
+/* Left-aligned when only dd-right */
+.dd-right.dd-right-start {
+    justify-content: flex-start;
 }
-/* 
-Recommended Colors:
-    tomato: rgb(241, 112, 91);
-    mung_bean: rgb(122, 145, 109);
-    cloisonné: rgb(15, 89, 164);
-    soft_blue: rgb(16, 104, 152);
-*/
 
-/* Customize arrows, resize */
-.tippy-arrow::before {
-    -webkit-transform: scale(0.75);
-    -ms-transform: scale(0.75);
-    transform: scale(0.75);
+/* JS control toggle */
+.document-dates-plugin.is-wrapped {
+    flex-wrap: wrap;
+}
+.document-dates-plugin.is-wrapped .dd-right {
+    flex: 0 0 100%;
+    justify-content: flex-start;
+    margin-top: 10px;
 }
 
 
-
-/* 4. Author Avatar styles */
-.avatar-group {
+/* ==========================================================================
+   3. Author Avatar styles
+   ========================================================================== */
+.author-group {
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
-    margin: -0.15rem;
-    padding-left: 0.15rem;
+    flex-wrap: nowrap;
+
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    /* Prevent overflow of child elements when scaling */
+    padding: 0.15rem 0.15rem 0.15rem 0;
+
+    margin-right: 10px;
+
+    /* Hide Firefox, IE scrollbar */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+/* Hide Chrome/Safari scrollbar */
+.author-group::-webkit-scrollbar {
+    display: none;
 }
+
 .avatar-wrapper {
-    margin: 0.15rem;
+    margin-left: 0.3rem;
     position: relative;
-    width: 30px;
-    height: 30px;
+    width: 32px;
+    height: 32px;
     border-radius: 50%;
     overflow: hidden;
     flex-shrink: 0;
-    opacity: 0.7;
+    opacity: 0.85;
     filter: grayscale(90%);
     transition: transform 0.2s ease, filter 0.2s ease;
+    display: block;
+
+    /* Fix bug in Safari: rounded corners may blink to show square corners */
+    will-change: transform;
+    transform: translateZ(0);
 }
 .avatar-wrapper:hover {
     transform: scale(1.08);
     filter: grayscale(0%);
     cursor: pointer;
 }
-.avatar-wrapper img.avatar {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
 .avatar-wrapper .avatar-text {
     position: absolute;
     width: 100%;
@@ -150,3 +164,50 @@ Recommended Colors:
     justify-content: center;
     text-transform: capitalize;
 }
+.avatar-wrapper img.avatar {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* Show authors in text mode */
+.author-group .text-wrapper {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+
+/* ==========================================================================
+   4. Tooltip styles, including theme, arrow, font, color, background color, etc
+   ========================================================================== */
+
+/* .tippy-box {
+    font-size: 12px;
+} */
+
+/* Demo of the custom theme 'tomato' (optional) */
+.tippy-box[data-theme~='tomato'] {
+    background-color: tomato;
+    color: white;
+}
+/* Customize the arrow corresponding to the theme tomato */
+.tippy-box[data-theme~='tomato'] > .tippy-arrow::before {
+    color: tomato;
+}
+/* 
+Recommended Colors:
+    tomato: rgb(241, 112, 91);
+    mung_bean: rgb(122, 145, 109);
+    cloisonné: rgb(15, 89, 164);
+    soft_blue: rgb(16, 104, 152);
+*/
+
+/* Customize arrows, resize */
+.tippy-arrow::before {
+    -webkit-transform: scale(0.75);
+    -ms-transform: scale(0.75);
+    transform: scale(0.75);
+}