mkdocs-document-dates 3.3.5__tar.gz → 3.4.1__tar.gz

mkdocs_document_dates-3.4.1/PKG-INFO

@@ -0,0 +1,102 @@
+Metadata-Version: 2.4
+Name: mkdocs-document-dates
+Version: 3.4.1
+Summary: A new generation MkDocs plugin for displaying exact creation time, last update time, authors, email of documents
+Home-page: https://github.com/jaywhj/mkdocs-document-dates
+Author: Aaron Wang
+Author-email: aaronwqt@gmail.com
+License: MIT
+Classifier: Programming Language :: Python :: 3
+Classifier: Operating System :: OS Independent
+Requires-Python: >=3.7
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: mkdocs>=1.1.0
+Dynamic: author
+Dynamic: author-email
+Dynamic: classifier
+Dynamic: description
+Dynamic: description-content-type
+Dynamic: home-page
+Dynamic: license
+Dynamic: license-file
+Dynamic: requires-dist
+Dynamic: requires-python
+Dynamic: summary
+
+# mkdocs-document-dates
+
+English | [简体中文](README_zh.md)
+
+<br />
+
+A new generation MkDocs plugin for displaying exact **creation time, last update time, authors, email** of documents
+
+![render](render.gif)
+
+## Features
+
+- [x] Always display **exact** meta-info of the document for any environment (no-Git, Git, all CI/CD build systems, etc.)
+- [x] Support for manually specifying time and author in `Front Matter`
+- [x] Support for multiple time formats (date, datetime, timeago)
+- [x] Support for multiple author modes (avatar, text, hidden)
+- [x] Flexible display position (top or bottom)
+- [x] Elegant styling (fully customizable)
+- [x] Smart Tooltip Hover Tips
+- [x] Supports display of recently updated documents in an overall list
+- [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 env vars to distinguish runs
+
+| PK of Build Efficiency:     | 100 md: | 1000 md: | Time Complexity: |
+| --------------------------- | :-----: | :------: | :----------: |
+| git-revision-date-localized |  > 3 s   |  > 30 s   |    O(n)    |
+| document-dates              | < 0.1 s  | < 0.15 s  |    O(1)    |
+
+
+## Installation
+
+```bash
+pip install mkdocs-document-dates
+```
+
+## Configuration
+
+Just add the plugin to your `mkdocs.yml`:
+
+```yaml
+plugins:
+  - document-dates
+```
+
+Or, full configuration:
+
+```yaml
+plugins:
+  - document-dates:
+      position: top            # Display position: top(after title) bottom(end of document)
+      type: date               # Date type: date datetime timeago, default: date
+      exclude:                 # List of excluded files
+        - temp.md              # Exclude specific file
+        - drafts/*             # Exclude all files in drafts 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_author: true        # Author display mode: true(avatar) text(text) false(hidden)
+      recently-updated: true   # Whether to turn on recently updated data, default: false
+```
+
+## Customization Settings
+
+In addition to the above basic configuration, the plug-in also provides a wealth of customization options to meet a variety of individual needs:
+
+- [Specify Datetime](https://jaywhj.netlify.app/document-dates-en#Specify-Datetime): You can manually specify the creation time and last update time for each document
+- [Specify Author](https://jaywhj.netlify.app/document-dates-en#Specify-Author): You can manually specify the author information for each document
+- [Specify Avatar](https://jaywhj.netlify.app/document-dates-en#Specify-Avatar): You can manually specify the avatar for each author
+- [Set Plugin Style](https://jaywhj.netlify.app/document-dates-en#Set-Plugin-Style): Such as icons, themes, colors, fonts, animations, dividing line, etc.
+- [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.
+- [Add Recently Updated Module](https://jaywhj.netlify.app/document-dates-en#Add-Recently-Updated-Module): Enable list of recently updated documents
+- [Other Tips](https://jaywhj.netlify.app/document-dates-en#Other-Tips): Introduction to technical principles, caching mechanisms
+- [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

mkdocs_document_dates-3.4.1/README.md

@@ -0,0 +1,76 @@
+# mkdocs-document-dates
+
+English | [简体中文](README_zh.md)
+
+<br />
+
+A new generation MkDocs plugin for displaying exact **creation time, last update time, authors, email** of documents
+
+![render](render.gif)
+
+## Features
+
+- [x] Always display **exact** meta-info of the document for any environment (no-Git, Git, all CI/CD build systems, etc.)
+- [x] Support for manually specifying time and author in `Front Matter`
+- [x] Support for multiple time formats (date, datetime, timeago)
+- [x] Support for multiple author modes (avatar, text, hidden)
+- [x] Flexible display position (top or bottom)
+- [x] Elegant styling (fully customizable)
+- [x] Smart Tooltip Hover Tips
+- [x] Supports display of recently updated documents in an overall list
+- [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 env vars to distinguish runs
+
+| PK of Build Efficiency:     | 100 md: | 1000 md: | Time Complexity: |
+| --------------------------- | :-----: | :------: | :----------: |
+| git-revision-date-localized |  > 3 s   |  > 30 s   |    O(n)    |
+| document-dates              | < 0.1 s  | < 0.15 s  |    O(1)    |
+
+
+## Installation
+
+```bash
+pip install mkdocs-document-dates
+```
+
+## Configuration
+
+Just add the plugin to your `mkdocs.yml`:
+
+```yaml
+plugins:
+  - document-dates
+```
+
+Or, full configuration:
+
+```yaml
+plugins:
+  - document-dates:
+      position: top            # Display position: top(after title) bottom(end of document)
+      type: date               # Date type: date datetime timeago, default: date
+      exclude:                 # List of excluded files
+        - temp.md              # Exclude specific file
+        - drafts/*             # Exclude all files in drafts 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_author: true        # Author display mode: true(avatar) text(text) false(hidden)
+      recently-updated: true   # Whether to turn on recently updated data, default: false
+```
+
+## Customization Settings
+
+In addition to the above basic configuration, the plug-in also provides a wealth of customization options to meet a variety of individual needs:
+
+- [Specify Datetime](https://jaywhj.netlify.app/document-dates-en#Specify-Datetime): You can manually specify the creation time and last update time for each document
+- [Specify Author](https://jaywhj.netlify.app/document-dates-en#Specify-Author): You can manually specify the author information for each document
+- [Specify Avatar](https://jaywhj.netlify.app/document-dates-en#Specify-Avatar): You can manually specify the avatar for each author
+- [Set Plugin Style](https://jaywhj.netlify.app/document-dates-en#Set-Plugin-Style): Such as icons, themes, colors, fonts, animations, dividing line, etc.
+- [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.
+- [Add Recently Updated Module](https://jaywhj.netlify.app/document-dates-en#Add-Recently-Updated-Module): Enable list of recently updated documents
+- [Other Tips](https://jaywhj.netlify.app/document-dates-en#Other-Tips): Introduction to technical principles, caching mechanisms
+- [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

{mkdocs_document_dates-3.3.5 → mkdocs_document_dates-3.4.1}/mkdocs_document_dates/plugin.py

@@ -2,13 +2,14 @@ import os
 import yaml
 import shutil
 import logging
+from jinja2 import Environment, FileSystemLoader, select_autoescape
 from datetime import datetime
 from pathlib import Path
 from mkdocs.plugins import BasePlugin
 from mkdocs.config import config_options
 from mkdocs.structure.pages import Page
 from urllib.parse import urlparse
-from .utils import get_file_creation_time, load_git_cache, read_jsonl_cache
+from .utils import get_file_creation_time, load_git_cache, read_jsonl_cache,is_excluded, get_recently_modified_files
 
 logger = logging.getLogger("mkdocs.plugins.document_dates")
 logger.setLevel(logging.WARNING)  # DEBUG, INFO, WARNING, ERROR, CRITICAL
@@ -42,7 +43,8 @@ class DocumentDatesPlugin(BasePlugin):
         ('exclude', config_options.Type(list, default=[])),
         ('created_field_names', config_options.Type(list, default=['created', 'date', 'creation'])),
         ('modified_field_names', config_options.Type(list, default=['modified', 'updated', 'last_modified', 'last_updated'])),
-        ('show_author', config_options.Type(bool, default=True))
+        ('show_author', config_options.Choice((True, False, 'text'), default=True)),
+        ('recently-updated', config_options.Type((dict, bool), default={}))
     )
 
     def __init__(self):
@@ -50,6 +52,8 @@ class DocumentDatesPlugin(BasePlugin):
         self.dates_cache = {}
         self.authors_yml = {}
         self.github_username = None
+        self.recent_docs_html = None
+        self.recent_enable = False
 
     def on_config(self, config):
         docs_dir_path = Path(config['docs_dir'])
@@ -69,7 +73,7 @@ class DocumentDatesPlugin(BasePlugin):
 
         # 加载 git 缓存
         self.dates_cache = load_git_cache(docs_dir_path)
-        # 加载 jsonl 缓存覆盖
+        # 覆盖 jsonl 文件缓存
         jsonl_cache_file = docs_dir_path / '.dates_cache.jsonl'
         if jsonl_cache_file.exists():
             jsonl_cache = read_jsonl_cache(jsonl_cache_file)
@@ -77,35 +81,9 @@ class DocumentDatesPlugin(BasePlugin):
                 if filename in self.dates_cache:
                     self.dates_cache[filename].update(new_info)
 
-        """
-        Tippy.js, for Tooltip
-        # core
-            https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js
-            https://unpkg.com/tippy.js@6/dist/tippy.umd.min.js
-            https://unpkg.com/tippy.js@6/dist/tippy.css
-        # animations
-            https://unpkg.com/tippy.js@6/animations/scale.css
-        # animations: Material filling effect
-            https://unpkg.com/tippy.js@6/dist/backdrop.css
-            https://unpkg.com/tippy.js@6/animations/shift-away.css
-        # themes
-            https://unpkg.com/tippy.js@6/themes/light.css
-            https://unpkg.com/tippy.js@6/themes/material.css
-        """
-        # 复制静态资源到用户目录
+        # 复制配置文件到用户目录（如果不存在）
         dest_dir = docs_dir_path / 'assets' / 'document_dates'
         dest_dir.mkdir(parents=True, exist_ok=True)
-        
-        for dir_name in ['tippy', 'core', 'fonts']:
-            source_dir = Path(__file__).parent / 'static' / dir_name
-            target_dir = dest_dir / dir_name
-            # shutil.copytree(source_dir, target_dir, dirs_exist_ok=True)
-            target_dir.mkdir(parents=True, exist_ok=True)
-            for item in source_dir.iterdir():
-                if item.is_file():
-                    shutil.copy2(item, target_dir / item.name)
-        
-        # 复制配置文件模板到用户目录（如果不存在）
         config_files = ['user.config.css', 'user.config.js']
         for config_file in config_files:
             source_config = Path(__file__).parent / 'static' / 'config' / config_file
@@ -113,35 +91,49 @@ class DocumentDatesPlugin(BasePlugin):
             if not target_config.exists():
                 shutil.copy2(source_config, target_config)
 
-        # 加载离线 Google Fonts Icons: https://fonts.google.com/icons
+        # 添加离线 Google Fonts Icons: https://fonts.google.com/icons
         # material_icons_url = 'https://fonts.googleapis.com/icon?family=Material+Icons'
         material_icons_url = 'assets/document_dates/fonts/material-icons.css'
-        if material_icons_url not in config['extra_css']:
-            config['extra_css'].append(material_icons_url)
-        
-        # 加载 timeago.js
+        config['extra_css'].append(material_icons_url)
+
+        # 添加 timeago.js
         # https://cdn.jsdelivr.net/npm/timeago.js@4.0.2/dist/timeago.min.js
         # https://cdnjs.cloudflare.com/ajax/libs/timeago.js/4.0.2/timeago.full.min.js
         if self.config['type'] == 'timeago':
             config['extra_javascript'].insert(0, 'assets/document_dates/core/timeago.min.js')
 
-        # 加载 Tippy CSS 文件
-        tippy_css_dir = dest_dir / 'tippy'
+        """
+        Tippy.js, for Tooltip
+        # core
+            https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js
+            https://unpkg.com/tippy.js@6/dist/tippy.umd.min.js
+            https://unpkg.com/tippy.js@6/dist/tippy.css
+        # animations
+            https://unpkg.com/tippy.js@6/animations/scale.css
+        # animations: Material filling effect
+            https://unpkg.com/tippy.js@6/dist/backdrop.css
+            https://unpkg.com/tippy.js@6/animations/shift-away.css
+        # themes
+            https://unpkg.com/tippy.js@6/themes/light.css
+            https://unpkg.com/tippy.js@6/themes/material.css
+        """
+        # 添加 Tippy CSS 文件
+        tippy_css_dir = Path(__file__).parent / 'static' / 'tippy'
         for css_file in tippy_css_dir.glob('*.css'):
             config['extra_css'].append(f'assets/document_dates/tippy/{css_file.name}')
         
-        # 加载自定义 CSS 文件
+        # 添加自定义 CSS 文件
         config['extra_css'].extend([
             'assets/document_dates/core/core.css',
             'assets/document_dates/user.config.css'
         ])
         
-        # 按顺序加载 Tippy JS 文件
+        # 按顺序添加 Tippy JS 文件
         js_core_files = ['popper.min.js', 'tippy.umd.min.js']
         for js_file in js_core_files:
             config['extra_javascript'].append(f'assets/document_dates/tippy/{js_file}')
         
-        # 加载自定义 JS 文件
+        # 添加自定义 JS 文件
         config['extra_javascript'].extend([
             'assets/document_dates/core/default.config.js',
             'assets/document_dates/user.config.js',
@@ -151,13 +143,65 @@ class DocumentDatesPlugin(BasePlugin):
 
         return config
 
+    def on_nav(self, nav, config, files):
+        recently_updated_config = self.config.get('recently-updated')
+        if not recently_updated_config:
+            return nav
+
+        self.recent_enable = True
+        # 兼容 true 配置
+        if recently_updated_config is True:
+            recently_updated_config = {}
+
+        # 获取配置
+        exclude_list = recently_updated_config.get('exclude', [])
+        limit = recently_updated_config.get('limit', 10)
+        template_path = recently_updated_config.get("template")
+
+        # 获取 docs 目录下最近更新的文档
+        recently_modified_files = get_recently_modified_files(files, exclude_list, limit)
+
+        # 将数据注入到 config['extra'] 中供全局访问
+        if 'extra' not in config:
+            config['extra'] = {}
+        config['extra']['recently_updated_docs'] = recently_modified_files
+
+        # 渲染HTML
+        docs_dir = Path(config['docs_dir'])
+        self.recent_docs_html = self._render_recently_updated_html(docs_dir, template_path, recently_modified_files)
+
+        return nav
+
+    def _render_recently_updated_html(self, docs_dir, template_path, recently_updated_data):
+        # 获取自定义模板路径
+        if template_path:
+            user_full_path = docs_dir / template_path
+
+        # 选择模板路径
+        if template_path and user_full_path.is_file():
+            template_dir = user_full_path.parent
+            template_file = user_full_path.name
+        else:
+            # 默认模板路径
+            default_template_path = Path(__file__).parent / 'static' / 'templates' / 'recently_updated.html'
+            template_dir = default_template_path.parent
+            template_file = default_template_path.name
+
+        # 加载模板
+        env = Environment(
+            loader=FileSystemLoader(str(template_dir)),
+            autoescape=select_autoescape(["html", "xml"])
+        )
+        template = env.get_template(template_file)
+
+        # 渲染模板
+        return template.render(recent_docs=recently_updated_data)
+
     def on_page_markdown(self, markdown, page: Page, config, files):
         # 获取相对路径，src_uri 总是以"/"分隔
-        rel_path = getattr(page.file, 'src_uri', None)
-        if not rel_path:
-            rel_path = page.file.src_path
-            if os.sep != '/':
-                rel_path = rel_path.replace(os.sep, '/')
+        rel_path = getattr(page.file, 'src_uri', page.file.src_path)
+        if os.sep != '/':
+            rel_path = rel_path.replace(os.sep, '/')
         file_path = page.file.abs_src_path
         
         # 获取时间信息
@@ -176,8 +220,12 @@ class DocumentDatesPlugin(BasePlugin):
         page.meta['document_dates_modified'] = modified.isoformat()
         page.meta['document_dates_authors'] = authors
         
+        # 占位符替换
+        if self.recent_enable and '<!-- RECENTLY_UPDATED_DOCS -->' in markdown:
+            markdown = markdown.replace('<!-- RECENTLY_UPDATED_DOCS -->', self.recent_docs_html or '')
+        
         # 检查是否需要排除
-        if self._is_excluded(rel_path):
+        if is_excluded(rel_path, self.config['exclude']):
             return markdown
         
         # 生成日期和作者信息 HTML
@@ -186,6 +234,16 @@ class DocumentDatesPlugin(BasePlugin):
         # 将信息写入 markdown
         return self._insert_date_info(markdown, info_html)
 
+    def on_post_build(self, config):
+        site_dest_dir = Path(config['site_dir']) / 'assets' / 'document_dates'
+        for dir_name in ['tippy', 'core', 'fonts']:
+            source_dir = Path(__file__).parent / 'static' / dir_name
+            target_dir = site_dest_dir / dir_name
+            # shutil.copytree(source_dir, target_dir, dirs_exist_ok=True)
+            target_dir.mkdir(parents=True, exist_ok=True)
+            for item in source_dir.iterdir():
+                if item.is_file():
+                    shutil.copy2(item, target_dir / item.name)
 
     def _extract_github_username(self, url):
         try:
@@ -217,17 +275,6 @@ class DocumentDatesPlugin(BasePlugin):
             logger.info(f"Error parsing .authors.yml: {e}")
 
 
-    def _is_excluded(self, rel_path):
-        for pattern in self.config['exclude']:
-            if pattern.endswith('*'):
-                if rel_path.startswith(pattern.partition('*')[0]):
-                    return True
-            else:
-                if rel_path == pattern:
-                    return True
-        return False
-
-
     def _find_meta_date(self, meta, field_names):
         for field in field_names:
             if field in meta:
@@ -337,9 +384,9 @@ class DocumentDatesPlugin(BasePlugin):
             if self.config['show_author'] and authors:
                 def get_author_tooltip(author):
                     if author.url:
-                        return f'&lt;a href="{author.url}" target="_blank"&gt;{author.name}&lt;/a&gt;'
+                        return f'<a href="{author.url}" target="_blank">{author.name}</a>'
                     elif author.email:
-                        return f'&lt;a href="mailto:{author.email}"&gt;{author.name}&lt;/a&gt;'
+                        return f'<a href="mailto:{author.email}">{author.name}</a>'
                     return author.name
 
                 def get_avatar_img_url(author):
@@ -349,19 +396,32 @@ class DocumentDatesPlugin(BasePlugin):
                         return f"https://avatars.githubusercontent.com/{self.github_username}"
                     return ""
 
-                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)
-                    img_url = get_avatar_img_url(author)
+                if self.config['show_author'] == '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"<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='{img_url}' />"
-                        f"</div>"
+                        f"<span data-tippy-content data-tippy-raw='{tooltip_text}'>"
+                        f"<span class='material-icons' data-icon='{icon}'></span>"
+                        f"{author_text}"
+                        f"</span>"
                     )
-                html_parts.append("</div>")
+                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)
+                        img_url = get_avatar_img_url(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='{img_url}' />"
+                            f"</div>"
+                        )
+                    html_parts.append("</div>")
 
             html_parts.append("</div></div>")
             return ''.join(html_parts)

{mkdocs_document_dates-3.3.5 → mkdocs_document_dates-3.4.1}/mkdocs_document_dates/static/config/user.config.js

@@ -33,7 +33,7 @@ TooltipConfig.setConfig({
 
 /*
 Part 2: 
-    Demonstrates how to register a local language when using 'timeago.js', 
+    Demonstrates how to register a local language for 'timeago.js', 
         then you can configure the localeStr you just registered anywhere!
 */
 /*

{mkdocs_document_dates-3.3.5 → mkdocs_document_dates-3.4.1}/mkdocs_document_dates/static/core/default.config.js

@@ -126,6 +126,18 @@ window.TooltipLanguage = (function () {
             author: "작성자",
             authors: "작성자"
         },
+        nl: {
+            created_time: "Gecreëerd",
+            modified_time: "Laatst geüpdatet",
+            author: "Auteur",
+            authors: "Auteurs"            
+        },
+        pt: {
+            created_time: "Criado em",
+            modified_time: "Última atualização",
+            author: "Autor",
+            authors: "Autores"
+        },
         ru: {
             created_time: "Дата создания",
             modified_time: "Дата изменения",
@@ -150,4 +162,4 @@ window.TooltipLanguage = (function () {
     Object.entries(defaultLanguages).forEach(([locale, data]) => {
         TooltipLanguage.register(locale, data);
     });
-})();
+})();

mkdocs_document_dates-3.4.1/mkdocs_document_dates/static/templates/recently_updated.html

@@ -0,0 +1,42 @@
+<style>
+.recently-updated {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 10px;
+    margin: 0;
+    padding: 16px;
+    border: 1px solid rgba(142, 142, 142, 0.15);
+    border-radius: 4px;
+    font-family: system-ui, sans-serif;
+}
+.recently-updated-item {
+    display: flex;
+    align-items: center;
+}
+.recently-updated-item span {
+    font-size: 0.85em;
+    color: rgba(142, 142, 142, 0.5);
+    margin-right: 8px;
+    flex-shrink: 0;
+    width: 90px;
+}
+.recently-updated-item a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #0077cc;
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+.recently-updated-item a:hover {
+    text-decoration: underline;
+}
+</style>
+<div class="recently-updated">
+    {%- for mtime, rel_path, title, url in recent_docs %}
+    <div class="recently-updated-item">
+        <span>{{ mtime[:10] }}</span>
+        <a href="{{ url }}" target="_blank">{{ title }}</a>
+    </div>
+    {%- endfor %}
+</div>