@xingwangzhe/stalux 1.55.4 → 1.55.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.55.4",
+    "version": "1.55.6",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",

package/src/components/stalux/archives/archivesList.astro

@@ -57,76 +57,76 @@ const archiveYears = [...archivesByYearMonth.entries()]
 ---
 
 <section class="stalux-archive-container" data-stalux-motion-content data-stalux-motion-stage>
-    <div class="stalux-archive-page-header">
-        <div class="stalux-archive-timeline-container">
-            {archiveYears.length > 0 ? (
-                archiveYears.map((archiveYear) => (
-                    <div class="stalux-archive-year-section" data-year={String(archiveYear.year)}>
-                        <div class="stalux-archive-year-header">
-                            <h2 class="stalux-archive-year-title">{archiveYear.year}</h2>
-                            <div class="stalux-archive-year-count">
-                                {t("archives.postCount", { n: archiveYear.count })}
-                            </div>
-                        </div>
-                        {archiveYear.months.map(({ month, posts: monthPosts }) => (
-                            <div class="stalux-archive-month-section" data-archive-month>
-                                <h3 class="stalux-archive-month-title">
-                                    {t("archives.month", { n: month })}
-                                </h3>
-                                {Array.from(
-                                    { length: Math.ceil(monthPosts.length / 12) },
-                                    (_, index) => monthPosts.slice(index * 12, (index + 1) * 12),
-                                ).map((group) => (
-                                    <ul class="stalux-archive-post-list" data-stalux-reveal>
-                                        {group.map((post) => (
-                                            <li
-                                                class="stalux-archive-post-item"
-                                                data-stalux-reveal-item
+    <!-- Modern Web Guidance (html): 年份/月份是带标题的内容分组 => <section> + <header>；
+         文章条目用 <ul>/<li>；计数与空态是纯文字 => <p>。
+         仅剩的 <div> 是时间轴装饰容器（::before 画线 + --tl-* 变量），没有语义对等元素。 -->
+    <div class="stalux-archive-timeline-container stalux-archive-page-header">
+        {archiveYears.length > 0 ? (
+            archiveYears.map((archiveYear) => (
+                <section class="stalux-archive-year-section" data-year={String(archiveYear.year)}>
+                    <header class="stalux-archive-year-header">
+                        <h2 class="stalux-archive-year-title">{archiveYear.year}</h2>
+                        <p class="stalux-archive-year-count">
+                            {t("archives.postCount", { n: archiveYear.count })}
+                        </p>
+                    </header>
+                    {archiveYear.months.map(({ month, posts: monthPosts }) => (
+                        <section class="stalux-archive-month-section" data-archive-month>
+                            <h3 class="stalux-archive-month-title">
+                                {t("archives.month", { n: month })}
+                            </h3>
+                            {Array.from({ length: Math.ceil(monthPosts.length / 12) }, (_, index) =>
+                                monthPosts.slice(index * 12, (index + 1) * 12),
+                            ).map((group) => (
+                                <ul class="stalux-archive-post-list" data-stalux-reveal>
+                                    {group.map((post) => (
+                                        <li
+                                            class="stalux-archive-post-item"
+                                            data-stalux-reveal-item
+                                        >
+                                            <time
+                                                class="stalux-archive-post-date"
+                                                datetime={toMachineDateTime(
+                                                    post.data.date,
+                                                    timezone,
+                                                )}
                                             >
-                                                <time
-                                                    class="stalux-archive-post-date"
-                                                    datetime={toMachineDateTime(
-                                                        post.data.date,
-                                                        timezone,
-                                                    )}
-                                                >
-                                                    {formatInTimeZone(
-                                                        parseDate(post.data.date, timezone),
-                                                        timezone,
-                                                        "yyyy-MM-dd",
-                                                    )}
-                                                </time>
-                                                <a
-                                                    href={`/posts/${post.data.abbrlink}/`}
-                                                    class="stalux-archive-post-link"
-                                                    data-archive-description={post.data.desc || ""}
-                                                    data-astro-prefetch="viewport"
-                                                >
-                                                    {post.data.title}
-                                                </a>
-                                            </li>
-                                        ))}
-                                    </ul>
-                                ))}
-                            </div>
-                        ))}
-                    </div>
-                ))
-            ) : (
-                <div class="stalux-archive-no-posts">{t("archives.noPosts")}</div>
-            )}
-        </div>
+                                                {formatInTimeZone(
+                                                    parseDate(post.data.date, timezone),
+                                                    timezone,
+                                                    "yyyy-MM-dd",
+                                                )}
+                                            </time>
+                                            <a
+                                                href={`/posts/${post.data.abbrlink}/`}
+                                                class="stalux-archive-post-link"
+                                                data-archive-description={post.data.desc || ""}
+                                                data-astro-prefetch="viewport"
+                                            >
+                                                {post.data.title}
+                                            </a>
+                                        </li>
+                                    ))}
+                                </ul>
+                            ))}
+                        </section>
+                    ))}
+                </section>
+            ))
+        ) : (
+            <p class="stalux-archive-no-posts">{t("archives.noPosts")}</p>
+        )}
 
         <slot name="main" />
     </div>
 </section>
-<div
+<p
     id="stalux-archive-description"
     class="stalux-archive-description"
     data-archive-tooltip
     role="tooltip"
     hidden
-></div>
+></p>
 
 <script>
 import { mountArchiveDescriptions } from "../../../scripts/archive-descriptions";

package/src/components/stalux/archives/toArchive.astro

@@ -9,6 +9,7 @@ const siteConfig = getSiteData(configEntries);
 const { t } = createTranslator(siteConfig.lang || "zh-CN");
 ---
 
-<div id={"stalux-to-archive-archs"}>
+<!-- Modern Web Guidance (html): 一行“查看全部归档”文字 + 链接 => <p>。 -->
+<p id={"stalux-to-archive-archs"}>
     <a data-stalux-control="button" href="/archives" data-astro-prefetch>{t("archives.viewAll")}</a>
-</div>
+</p>

package/src/components/stalux/categories/categoriesCard.astro

@@ -20,37 +20,37 @@ const siteConfig = (configEntries.find((e) => e.id === "site")?.data ?? {}) as R
 const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
 ---
 
-<div class="stalux-category-shell">
-    <article class="stalux-category-card" data-stalux-control="category-card">
-        <a
-            href={`/categories/${props.category.name}/`}
-            class="stalux-categoryheader a-none"
-            data-astro-prefetch
-        >
-            <div class="stalux-category-icon">
-                <svg
-                    aria-hidden="true"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    height="24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                >
-                    <path
-                        d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
-                    ></path>
-                </svg>
-            </div>
-            <div class="stalux-category-content">
-                <h2 class="categoryName">{props.category.name}</h2>
-                <div class="categoryCount">
-                    {t("categories.postCount", { n: props.category.count })}
-                </div>
-            </div>
-        </a>
-    </article>
-</div>
+<!-- Modern Web Guidance (html): 分类卡本身即 <article>；外层曾经的 <div class="stalux-category-shell">
+     已上移到列表的 <li>（见 categoriesList.astro），避免多一层无语义容器。 -->
+<article class="stalux-category-card" data-stalux-control="category-card">
+    <a
+        href={`/categories/${props.category.name}/`}
+        class="stalux-categoryheader a-none"
+        data-astro-prefetch
+    >
+        <span class="stalux-category-icon">
+            <svg
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            >
+                <path
+                    d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
+                ></path>
+            </svg>
+        </span>
+        <section class="stalux-category-content">
+            <h2 class="categoryName">{props.category.name}</h2>
+            <p class="categoryCount">
+                {t("categories.postCount", { n: props.category.count })}
+            </p>
+        </section>
+    </a>
+</article>

package/src/components/stalux/categories/categoriesList.astro

@@ -14,7 +14,9 @@ const categoryList = await getCategoryCountList(Astro.logger);
     data-stalux-reveal
 >
     {categoryList.map((category) => (
-        <li data-stalux-reveal-item>
+        /* Modern Web Guidance (html): shell 的 hover/focus-within 作用范围由 <li> 承担，
+           卡片组件本身不再输出多余的包裹 <div>。 */
+        <li class="stalux-category-shell" data-stalux-reveal-item>
             <CategoriesCard category={category} />
         </li>
     ))}

package/src/components/stalux/common/Typewriter.astro

@@ -10,7 +10,8 @@ const texts = normalizeMessages(messages);
 ---
 
 {texts.length > 0 && (
-    <div class={className} data-stalux-typewriter data-messages={JSON.stringify(texts)}>
+    /* Modern Web Guidance (html): 打字机输出是一段文字 => <p>，内部只用行内 <span>。 */
+    <p class={className} data-stalux-typewriter data-messages={JSON.stringify(texts)}>
         <span class="stalux-typewriter-accessible">{texts.join(", ")}</span>
         <span class="stalux-typewriter-reserve" aria-hidden="true">
             {texts.map((text) => (
@@ -20,7 +21,7 @@ const texts = normalizeMessages(messages);
         <span class="stalux-typewriter-text" data-typewriter-text aria-hidden="true">
             {texts[0]}
         </span>
-    </div>
+    </p>
 )}
 
 <script>

package/src/components/stalux/common/Weather.astro

@@ -19,10 +19,10 @@ const zh = (site.lang || "zh-CN").startsWith("zh");
         data-lang={site.lang || "zh-CN"}
         aria-label={zh ? "附近城市天气" : "Nearby weather"}
     >
-        <div class="stalux-weather-heading">
+        <p class="stalux-weather-heading">
             <CloudSun size={18} aria-hidden="true" />
             <span>{zh ? "附近天气" : "Nearby weather"}</span>
-        </div>
+        </p>
         <p class="stalux-weather-main" data-weather-output role="status">
             {zh ? "正在获取附近城市天气…" : "Loading nearby weather…"}
         </p>
@@ -96,6 +96,7 @@ registerPageLifecycle("weather", () => {
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    margin: 0;
     color: var(--accent-90p);
     font-size: 0.85rem;
 }

package/src/components/stalux/common/date.astro

@@ -1,7 +1,7 @@
-<div id={"stalux-date-date-time"} class="date-time">
+<p id={"stalux-date-date-time"} class="date-time">
     <time id={"stalux-date-date"} data-ref="date" datetime=""></time>
     <time id={"stalux-date-time"} data-ref="time" datetime=""></time>
-</div>
+</p>
 
 <script is:inline>
 (() => {
@@ -11,16 +11,20 @@
     const now = new Date();
     const pad = (value) => String(value).padStart(2, "0");
     const lang = document.documentElement.lang || "zh-CN";
-    dateElement.textContent = lang.startsWith("zh")
-        ? `${now.getFullYear()}年${pad(now.getMonth() + 1)}月${pad(now.getDate())}日`
-        : new Intl.DateTimeFormat("en-US", {
-              year: "numeric",
-              month: "short",
-              day: "2-digit",
-          }).format(now);
-    dateElement.dateTime = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
-    timeElement.textContent = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
-    timeElement.dateTime = timeElement.textContent;
+    const zh = lang.toLowerCase().startsWith("zh");
+    // Modern Web Guidance (javascript): 本地化文案交给 Intl.DateTimeFormat，
+    // 不再按语言手写拼接年月日；只有机器可读的 datetime 值仍按本地日历拼装。
+    dateElement.textContent = new Intl.DateTimeFormat(lang, {
+        year: "numeric",
+        month: zh ? "long" : "short",
+        day: "2-digit",
+    }).format(now);
+    // datetime 必须是访客本地日历值：toISOString() 给的是 UTC，跨时区会差一天。
+    const machineDate = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
+    dateElement.dateTime = machineDate;
+    const machineTime = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
+    timeElement.textContent = machineTime;
+    timeElement.dateTime = machineTime;
 })();
 </script>
 

package/src/components/stalux/common/search.astro

@@ -5,7 +5,8 @@
 import { sitePath } from "../../../utils/site-path";
 ---
 
-<div data-pf-theme="dark">
+<!-- Modern Web Guidance (html): <search> 包裹搜索与过滤机制，自带 search 地标。 -->
+<search data-pf-theme="dark">
     <pagefind-config bundle-path={sitePath("pagefind-enhanced/")}></pagefind-config>
     <pagefind-modal id="search"></pagefind-modal>
-</div>
+</search>

package/src/components/stalux/footer/FooterBadges.astro

@@ -42,35 +42,45 @@ function badgeImg(opts: BadgeOptions) {
 ---
 
 {badges && badges.length > 0 && (
-    <div class="stalux-badges-wrapper stalux-u-flex stalux-u-items-center stalux-u-justify-center stalux-u-flex-wrap">
+    /* Modern Web Guidance (html): 徽章集合是一组条目 => <ul>/<li>；分组用原生的
+       <details>/<summary> 折叠，无需 ARIA 模拟。 */
+    <ul class="stalux-badges-wrapper stalux-u-flex stalux-u-items-center stalux-u-justify-center stalux-u-flex-wrap">
         {badges.map((item: BadgeItem, idx: number) => {
             if (isBadgeGroup(item)) {
                 const groupId = `badge-group-${idx}`;
                 return (
-                    <details
-                        data-stalux-module="badge-group"
-                        class="stalux-badge-group stalux-u-w-full badge-group"
-                        id={groupId}
-                    >
-                        <summary class="stalux-badge-group-summary stalux-u-flex stalux-u-items-center stalux-u-justify-center">
-                            <span class="stalux-badge-group-arrow">&#9654;</span>
-                            <span class="stalux-badge-group-title">{item.title}</span>
-                            <span class="stalux-badge-group-hint" data-hint="expanded">
-                                {t("footer.collapse")}
-                            </span>
-                            <span class="stalux-badge-group-hint" data-hint="collapsed">
-                                {t("footer.expand")}
-                            </span>
-                        </summary>
-                        <div class="stalux-badge-group-items stalux-badges stalux-u-flex stalux-u-items-center stalux-u-justify-center stalux-u-flex-wrap">
-                            {item.items.map((b) => (
-                                <Fragment set:html={badgeImg(b)} />
-                            ))}
-                        </div>
-                    </details>
+                    <li class="stalux-badge-group-item stalux-u-w-full">
+                        <details
+                            data-stalux-module="badge-group"
+                            class="stalux-badge-group stalux-u-w-full badge-group"
+                            id={groupId}
+                        >
+                            <summary class="stalux-badge-group-summary stalux-u-flex stalux-u-items-center stalux-u-justify-center">
+                                <span class="stalux-badge-group-arrow">&#9654;</span>
+                                <span class="stalux-badge-group-title">{item.title}</span>
+                                <span class="stalux-badge-group-hint" data-hint="expanded">
+                                    {t("footer.collapse")}
+                                </span>
+                                <span class="stalux-badge-group-hint" data-hint="collapsed">
+                                    {t("footer.expand")}
+                                </span>
+                            </summary>
+                            <ul class="stalux-badge-group-items stalux-badges stalux-u-flex stalux-u-items-center stalux-u-justify-center stalux-u-flex-wrap">
+                                {item.items.map((b) => (
+                                    <li>
+                                        <Fragment set:html={badgeImg(b)} />
+                                    </li>
+                                ))}
+                            </ul>
+                        </details>
+                    </li>
                 );
             }
-            return <Fragment set:html={badgeImg(item)} />;
+            return (
+                <li>
+                    <Fragment set:html={badgeImg(item)} />
+                </li>
+            );
         })}
-    </div>
+    </ul>
 )}

package/src/components/stalux/footer/FooterBeian.astro

@@ -19,7 +19,8 @@ const showBeian = !!(icp || pubsec);
 ---
 
 {showBeian && (
-    <div class="stalux-beian-beian-info stalux-u-flex stalux-u-justify-center stalux-u-flex-wrap">
+    /* Modern Web Guidance (html): 备案号是一行文字链接 => <p>。 */
+    <p class="stalux-beian-beian-info stalux-u-flex stalux-u-justify-center stalux-u-flex-wrap">
         {icp && (
             <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
                 {icp}
@@ -41,5 +42,5 @@ const showBeian = !!(icp || pubsec);
                 {pubsec}
             </a>
         )}
-    </div>
+    </p>
 )}

package/src/components/stalux/footer/FooterStats.astro

@@ -41,7 +41,8 @@ const machineBuildtime = buildtime
 )}
 
 {machineBuildtime && (
-    <div
+    /* Modern Web Guidance (html): 构建时间是一行统计文字，用 <p> 而非通用 <div>。 */
+    <p
         class="stalux-stats-site-build-time stalux-u-text-center"
         data-stalux-buildtime={machineBuildtime}
         data-stalux-runtime-format={t("footer.runtimeFormat")}
@@ -50,5 +51,5 @@ const machineBuildtime = buildtime
             {t("footer.runningTime")}
             <span id="runtime-counter" />
         </span>
-    </div>
+    </p>
 )}

package/src/components/stalux/footer/FooterThemeInfo.astro

@@ -9,7 +9,8 @@ const showThemeInfoSection = !!(showPoweredBy || showThemeInfo);
 ---
 
 {showThemeInfoSection && (
-    <div class="stalux-theme-info stalux-u-flex stalux-u-justify-center stalux-u-flex-wrap">
+    /* Modern Web Guidance (html): 一行主题署名文字 => <p>。 */
+    <p class="stalux-theme-info stalux-u-flex stalux-u-justify-center stalux-u-flex-wrap">
         {showPoweredBy && (
             <span>
                 Powered by
@@ -31,5 +32,5 @@ const showThemeInfoSection = !!(showPoweredBy || showThemeInfo);
                 </a>
             </span>
         )}
-    </div>
+    </p>
 )}

package/src/components/stalux/layout/PageHeading.astro

@@ -7,13 +7,14 @@ interface Props {
 const { heading, description } = Astro.props;
 ---
 
-<div data-stalux-motion-region>
+<!-- Modern Web Guidance (html): 页面标题块是列表页的 header，描述是 <p>。 -->
+<header data-stalux-motion-region>
     <h1 class="stalux-page-title stalux-u-text-center" data-stalux-motion-focus>
         {heading}
     </h1>
     {description && (
-        <div class="stalux-page-description stalux-u-text-center" data-stalux-motion-content>
+        <p class="stalux-page-description stalux-u-text-center" data-stalux-motion-content>
             {description}
-        </div>
+        </p>
     )}
-</div>
+</header>

package/src/components/stalux/layout/navs.astro

@@ -67,15 +67,16 @@ const navs = navsConfig?.items ?? [];
                 );
             })}
             <li class="stalux-nav-item stalux-u-flex stalux-u-items-center">
-                <a
-                    href="#search"
+                <!-- Modern Web Guidance (html): 页内交互一律用 <button>，<a> 只负责 URL 导航 -->
+                <button
+                    type="button"
                     class="stalux-nav-link"
                     data-ref="stalux-search-btn"
                     aria-label={t("search.title")}
                 >
                     {SearchIcon && <SearchIcon size={20} stroke-width={2} class="nav-icon" />}
                     <span class="stalux-nav-text">{t("nav.search")}</span>
-                </a>
+                </button>
             </li>
         </ul>
 

package/src/components/stalux/links/linkCard.astro

@@ -29,6 +29,8 @@ const desc = link.description ?? "";
 const icon = link.icon ?? link.avatar ?? "/favicon.ico";
 ---
 
+<!-- Modern Web Guidance (html): 友链卡是自包含内容 => <article>；
+     头像是 <figure>（无题注的独立图像），标题 + 描述是卡片 <header>。 -->
 <a
     data-stalux-control="link-card"
     class="stalux-link-shell a-none"
@@ -36,8 +38,8 @@ const icon = link.icon ?? link.avatar ?? "/favicon.ico";
     target="_blank"
     rel="noopener"
 >
-    <div class="stalux-link-card">
-        <div class="stalux-link-card-avatar">
+    <article class="stalux-link-card">
+        <figure class="stalux-link-card-avatar">
             <img
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 data-src={icon}
@@ -49,10 +51,10 @@ const icon = link.icon ?? link.avatar ?? "/favicon.ico";
                 width="80"
                 height="80"
             >
-        </div>
-        <div class="stalux-link-card-content">
+        </figure>
+        <header class="stalux-link-card-content">
             <h2 class="stalux-link-card-title">{title}</h2>
             {desc && <p class="stalux-link-card-description">{desc}</p>}
-        </div>
-    </div>
+        </header>
+    </article>
 </a>

package/src/components/stalux/links/socialMedia.astro

@@ -50,7 +50,7 @@ function getIconByTitle(iconName: string): SimpleIcon | undefined {
                         class="a-none"
                     >
                         {icon ? (
-                            <div class="icon-container">
+                            <span class="icon-container">
                                 <svg
                                     role="img"
                                     viewBox="0 0 24 24"
@@ -63,7 +63,7 @@ function getIconByTitle(iconName: string): SimpleIcon | undefined {
                                     <title>{icon.title}</title>
                                     <path d={icon.path} />
                                 </svg>
-                            </div>
+                            </span>
                         ) : (
                             <span class="custom-icon">
                                 {item.icon ? item.icon.charAt(0).toUpperCase() : ""}

package/src/components/stalux/posts/PostTaxonomy.astro

@@ -45,20 +45,23 @@ const cfg = {
 
 <nav class="stalux-post-taxonomy-container" aria-label={title ?? cfg.heading}>
     <h3 class="stalux-post-taxonomy-title">{title ?? cfg.heading}</h3>
+    <!-- Modern Web Guidance (html): 标签/分类是导航链接集合 => <ul>/<li>；
+         无条目时是一句提示 => <p>。reveal 钩子挂在 <li> 上（:scope > 直接子元素）。 -->
     {items.length > 0 ? (
-        <div class={cfg.listClass} data-stalux-reveal>
+        <ul class={cfg.listClass} data-stalux-reveal>
             {items.map((item) => (
-                <a
-                    href={`${cfg.prefix}${item}/`}
-                    class={`${cfg.itemClass} a-none`}
-                    data-astro-prefetch
-                    data-stalux-reveal-item
-                >
-                    {item}
-                </a>
+                <li data-stalux-reveal-item>
+                    <a
+                        href={`${cfg.prefix}${item}/`}
+                        class={`${cfg.itemClass} a-none`}
+                        data-astro-prefetch
+                    >
+                        {item}
+                    </a>
+                </li>
             ))}
-        </div>
+        </ul>
     ) : (
-        <div class="stalux-post-taxonomy-empty">{cfg.empty}</div>
+        <p class="stalux-post-taxonomy-empty">{cfg.empty}</p>
     )}
 </nav>

package/src/components/stalux/posts/WalineComment.astro

@@ -64,9 +64,9 @@ const walineConfig = {
         <button type="button" class="waline-retry" data-waline-retry hidden>
             {t("comment.retry")}
         </button>
-        <div class="comments-seo-notice" style="display:none">
+        <p class="comments-seo-notice" style="display:none">
             {t("comment.disclaimer")}
-        </div>
+        </p>
     </section>
 )}