feat: add view source link and CC license declaration

- Add viewSource config for raw markdown link (GitHub raw URL)
- Add license config for CC BY-NC-SA 4.0 declaration
- Create ViewSource.astro component with GitHub icon
- Create License.astro component with official CC badge and post URL
- Integrate components into PostDetails layout
- Simplify BackToTopButton and move to TOC sidebar
- Add tech stack info to Footer (Astro & AstroPaper)
- Remove ShareLinks from post details
- Update TableOfContents to support slot for BackToTopButton

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: xkcoding

openspec/changes/add-source-link-and-license/proposal.md

@@ -0,0 +1,23 @@
+# Change: 新增查看原文链接和 CC 协议声明
+
+## Why
+
+当前博客文章页面只有"编辑"链接（指向 GitHub edit 页面），缺少以下功能：
+1. 读者无法快速查看文章的 Markdown 原始内容（source 模式）
+2. 没有明确的版权协议声明，不利于内容保护和合规转载
+
+## What Changes
+
+- 新增"查看原文"链接组件，跳转到 GitHub 仓库文件的 blob 页面（只读模式）
+- 新增 CC BY-NC-SA 4.0 协议声明组件，显示在文章正文下方
+- 在 `config.ts` 中添加相关配置项（协议类型、仓库 URL 等）
+- 修改 `PostDetails.astro` 布局，集成新组件
+
+## Impact
+
+- Affected code:
+  - `src/config.ts` - 新增配置项
+  - `src/components/ViewSource.astro` - 新建组件
+  - `src/components/License.astro` - 新建组件
+  - `src/layouts/PostDetails.astro` - 集成新组件
+  - `src/assets/icons/` - 可能需要新增图标

openspec/changes/add-source-link-and-license/specs/post-details/spec.md

@@ -0,0 +1,63 @@
+## ADDED Requirements
+
+### Requirement: View Source Link
+
+The system SHALL provide a "View Source" link on article detail pages that opens the raw Markdown file in the GitHub repository (blob view, not edit mode).
+
+#### Scenario: User clicks View Source link
+
+- **WHEN** user clicks the "View Source" link on an article page
+- **THEN** a new tab opens with the GitHub blob URL for the article's Markdown file
+- **AND** the URL format is `https://github.com/{owner}/{repo}/blob/{branch}/{filePath}`
+
+#### Scenario: View Source link visibility
+
+- **WHEN** `SITE.viewSource.enabled` is `true`
+- **THEN** the View Source link is displayed on the article page
+- **WHEN** `SITE.viewSource.enabled` is `false`
+- **THEN** the View Source link is hidden
+
+### Requirement: CC License Declaration
+
+The system SHALL display a Creative Commons license declaration (CC BY-NC-SA 4.0) at the bottom of each article's content area.
+
+#### Scenario: License display position
+
+- **WHEN** an article page is rendered
+- **THEN** the CC license declaration appears after the article content
+- **AND** before the share links section
+
+#### Scenario: License content elements
+
+- **WHEN** the license component is rendered
+- **THEN** it displays:
+  - The CC BY-NC-SA 4.0 license icon/badge
+  - A brief license description in Chinese
+  - A link to the full license text on Creative Commons website
+
+#### Scenario: License visibility control
+
+- **WHEN** `SITE.license.enabled` is `true`
+- **THEN** the license declaration is displayed
+- **WHEN** `SITE.license.enabled` is `false`
+- **THEN** the license declaration is hidden
+
+### Requirement: Configuration Options
+
+The system SHALL provide configuration options in `src/config.ts` for View Source and License features.
+
+#### Scenario: viewSource configuration
+
+- **WHEN** configuring the View Source feature
+- **THEN** the following options are available:
+  - `enabled`: boolean to show/hide the link
+  - `text`: display text for the link (default: "查看原文")
+  - `url`: base URL for the repository blob path
+
+#### Scenario: license configuration
+
+- **WHEN** configuring the License feature
+- **THEN** the following options are available:
+  - `enabled`: boolean to show/hide the license
+  - `type`: license type identifier (e.g., "CC BY-NC-SA 4.0")
+  - `url`: URL to the full license text

openspec/changes/add-source-link-and-license/tasks.md

@@ -0,0 +1,28 @@
+## 1. 配置扩展
+
+- [x] 1.1 在 `src/config.ts` 中添加 `viewSource` 配置项（enabled、text、url）
+- [x] 1.2 在 `src/config.ts` 中添加 `license` 配置项（enabled、type、url）
+
+## 2. 组件开发
+
+- [x] 2.1 创建 `src/components/ViewSource.astro` 组件
+  - 接收 `post` 参数，生成 raw URL
+  - 使用 GitHub 图标
+  - 样式与 EditPost 保持一致
+- [x] 2.2 创建 `src/components/License.astro` 组件
+  - 显示 CC BY-NC-SA 4.0 协议信息
+  - 包含协议图标和链接
+  - 简洁的版权声明文案
+
+## 3. 布局集成
+
+- [x] 3.1 修改 `src/layouts/PostDetails.astro`
+  - 在文章正文后、分享链接前添加 License 组件
+  - 在元信息区添加 ViewSource 链接
+- [x] 3.2 确保移动端和桌面端响应式显示正常
+
+## 4. 验证
+
+- [x] 4.1 本地构建测试，确保无类型错误
+- [x] 4.2 验证链接跳转正确（raw 页面）
+- [x] 4.3 检查暗色/亮色模式下样式正常

src/components/BackToTopButton.astro

@@ -1,74 +1,44 @@
 ---
-import IconChevronLeft from "@/assets/icons/IconChevronLeft.svg";
 import IconArrowNarrowUp from "@/assets/icons/IconArrowNarrowUp.svg";
 ---
 
 <div
   id="btt-btn-container"
-  class:list={[
-    "fixed end-4 bottom-8 z-50",
-    "md:sticky md:end-auto md:float-end md:me-1",
-    "translate-y-14 opacity-0 transition duration-500",
-  ]}
+  class="mt-4 translate-y-4 opacity-0 transition duration-500"
 >
   <button
     data-button="back-to-top"
-    class:list={[
-      "group relative bg-background px-2 py-1",
-      "size-14 rounded-full shadow-xl",
-      "md:h-8 md:w-fit md:rounded-md md:shadow-none md:focus-visible:rounded-none",
-      "md:bg-background/35 md:bg-clip-padding md:backdrop-blur-lg",
-    ]}
+    class="flex items-center gap-1 rounded-md border border-foreground/10 bg-background/50 px-3 py-1.5 text-sm text-foreground/70 backdrop-blur-sm transition-colors hover:border-accent hover:text-accent"
   >
-    <span
-      id="progress-indicator"
-      class="absolute inset-0 -z-10 block size-14 scale-110 rounded-full bg-transparent md:hidden md:h-8 md:rounded-md"
-    ></span>
-    <IconChevronLeft class="inline-block rotate-90 md:hidden" />
-    <span class="sr-only text-sm group-hover:text-accent md:not-sr-only">
-      <IconArrowNarrowUp class="inline-block size-4" />
-      返回顶部
-    </span>
+    <IconArrowNarrowUp class="inline-block size-4" />
+    返回顶部
   </button>
 </div>
 
 <script is:inline data-astro-rerun>
-  /** Scrolls the document to the top when
-   * the "Back to Top" button is clicked. */
   function backToTop() {
     const rootElement = document.documentElement;
     const btnContainer = document.querySelector("#btt-btn-container");
     const backToTopBtn = document.querySelector("[data-button='back-to-top']");
-    const progressIndicator = document.querySelector("#progress-indicator");
 
-    if (!rootElement || !btnContainer || !backToTopBtn || !progressIndicator)
-      return;
+    if (!rootElement || !btnContainer || !backToTopBtn) return;
 
-    // Attach click event handler for back-to-top button
     backToTopBtn.addEventListener("click", () => {
-      document.body.scrollTop = 0; // For Safari
-      document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
     });
 
-    // Handle button visibility according to scroll position
     let lastVisible = null;
     function handleScroll() {
       const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
       const scrollTop = rootElement.scrollTop;
-      const scrollPercent = Math.floor((scrollTop / scrollTotal) * 100);
-
-      progressIndicator.style.setProperty(
-        "background-image",
-        `conic-gradient(var(--accent), var(--accent) ${scrollPercent}%, transparent ${scrollPercent}%)`
-      );
-
       const isVisible = scrollTop / scrollTotal > 0.3;
 
       if (isVisible !== lastVisible) {
         btnContainer.classList.toggle("opacity-100", isVisible);
         btnContainer.classList.toggle("translate-y-0", isVisible);
         btnContainer.classList.toggle("opacity-0", !isVisible);
-        btnContainer.classList.toggle("translate-y-14", !isVisible);
+        btnContainer.classList.toggle("translate-y-4", !isVisible);
         lastVisible = isVisible;
       }
     }

src/components/Footer.astro

@@ -17,10 +17,33 @@ const { noMarginTop = false, class: className, ...attrs } = Astro.props;
   <div
     class="flex flex-col items-center justify-between gap-2 border-t border-border py-4 sm:flex-row"
   >
-    <div class="flex items-center gap-1 text-sm text-foreground/70">
-      <span>&#169; {currentYear} xkcoding</span>
+    <div
+      class="flex flex-wrap items-center justify-center gap-x-1 gap-y-0.5 text-sm text-foreground/70 sm:justify-start"
+    >
+      <span>&#169; 2016-{currentYear} xkcoding</span>
       <span class="text-foreground/40">·</span>
       <span>保留所有权利</span>
+      <span class="text-foreground/40">·</span>
+      <span>
+        Powered by
+        <a
+          href="https://astro.build/"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-accent hover:underline"
+        >
+          Astro
+        </a>
+        &
+        <a
+          href="https://github.com/satnaing/astro-paper"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-accent hover:underline"
+        >
+          AstroPaper
+        </a>
+      </span>
     </div>
     <div class="flex items-center gap-2 text-xs text-foreground/50">
       <a

src/components/License.astro

@@ -0,0 +1,62 @@
+---
+import { SITE } from "@/config";
+
+type Props = {
+  class?: string;
+  postUrl: string;
+};
+
+const { class: className = "", postUrl } = Astro.props;
+
+const showLicense = SITE.license.enabled;
+const licenseType = SITE.license.type;
+const licenseUrl = SITE.license.url;
+const fullUrl = `${SITE.website.replace(/\/$/, "")}${postUrl}`;
+---
+
+{
+  showLicense && (
+    <div
+      class:list={[
+        "flex flex-wrap items-center gap-4 rounded-lg border border-foreground/10 bg-foreground/5 px-5 py-4",
+        className,
+      ]}
+    >
+      {/* CC BY-NC-SA Official Badge */}
+      <a
+        href={licenseUrl}
+        target="_blank"
+        rel="noopener noreferrer license"
+        class="shrink-0"
+      >
+        <img
+          src="https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png"
+          alt={licenseType}
+          class="h-8"
+          loading="lazy"
+        />
+      </a>
+      {/* License Text */}
+      <div class="flex flex-col gap-1 text-sm">
+        <p class="text-foreground/70">
+          本文采用
+          <a
+            href={licenseUrl}
+            target="_blank"
+            rel="noopener noreferrer license"
+            class="font-medium text-accent hover:underline"
+          >
+            {licenseType}
+          </a>
+          协议，转载请注明出处。
+        </p>
+        <p class="text-foreground/50">
+          原文链接：
+          <a href={fullUrl} class="break-all text-accent/80 hover:underline">
+            {fullUrl}
+          </a>
+        </p>
+      </div>
+    </div>
+  )
+}

src/components/TableOfContents.astro

@@ -30,6 +30,7 @@ const filteredHeadings = headings.filter(h => h.depth >= 2 && h.depth <= 4);
       ))
     }
   </ul>
+  <slot />
 </nav>
 
 <script is:inline data-astro-rerun>

src/components/ViewSource.astro

@@ -0,0 +1,32 @@
+---
+import type { CollectionEntry } from "astro:content";
+import IconGitHub from "@/assets/icons/IconGitHub.svg";
+import { SITE } from "@/config";
+
+type Props = {
+  class?: string;
+  post: CollectionEntry<"blog">;
+};
+
+const { post, class: className = "" } = Astro.props;
+
+const href = `${SITE.viewSource.url}${post.filePath}`;
+const showViewSource = SITE.viewSource.enabled && href.trim() !== "";
+---
+
+{
+  showViewSource && (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      class:list={[
+        "flex items-center gap-1.5 opacity-80 hover:text-accent",
+        className,
+      ]}
+    >
+      <IconGitHub class="inline-block" />
+      <span>{SITE.viewSource.text}</span>
+    </a>
+  )
+}

src/config.ts

@@ -17,6 +17,16 @@ export const SITE = {
     text: "内容有误？点此修正",
     url: "https://github.com/xkcoding/MyBlog/edit/master/",
   },
+  viewSource: {
+    enabled: true,
+    text: "查看原文",
+    url: "https://github.com/xkcoding/MyBlog/raw/master/",
+  },
+  license: {
+    enabled: true,
+    type: "CC BY-NC-SA 4.0",
+    url: "https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh-hans",
+  },
   dynamicOgImage: true,
   dir: "ltr",
   lang: "zh-CN",