fix bug 、 添加了一个临时暗黑模式

Author: “云云”

README.md

@@ -1,6 +1,6 @@
 # WebCIA Weekly (Web 情报局)
 
-> 分享每周从 RSS 源获取到的优质信息聚合，包含：技术文章、产品设计、思维观点、开源项目、资源和工具、焦点资讯等，一切值得关注的事物，为大家提供保持领先所需的见解，也让自己实现了信息资源存档。
+> 分享每周从 RSS 源获取到的优质信息聚合，包含：技术文章、产品设计、思维观点、开源项目、资源和工具、焦点资讯等，一切值得关注的事物，为大家提供保持领先所需的见解，也帮自己完成了信息资源存档。
 
 ## 部署地址:
 

src/components/HeadCommon.astro

@@ -3,6 +3,7 @@ import '../styles/theme.css';
 import '../styles/index.css';
 import { SITE } from '@/config';
 const {icon} =SITE;
+
 ---
 
 <!-- Global Metadata -->
@@ -16,3 +17,26 @@ const {icon} =SITE;
 
 <link rel="stylesheet" href="https://gw.alipayobjects.com/os/k/font/lxgwwenkaiscreenr.css" rel="preload" as="font">
 
+
+
+<script>
+  const changeTheme = (e) => {
+    const darkModeOn = e.matches;
+    const body = document.querySelector('body');
+    if (darkModeOn) {
+      body.className='dark';
+    } else {
+      body.className='light';
+    }
+  }
+  const darkModeMediaQuery = window?.matchMedia(
+        '(prefers-color-scheme: dark)'
+  );
+
+  changeTheme(darkModeMediaQuery);
+
+  darkModeMediaQuery.addListener(e => {
+    changeTheme(e);
+  });
+
+</script>

src/components/Header/HeaderRight.astro

@@ -15,7 +15,7 @@ import Search from './Search.astro';
     target="_blank"
     class="lg:inline-block hidden">GitHub</HeaderLink
   >
-  <HeaderLink href="/rss.xml" target="_blank" class="lg:inline-block hidden"
+  <HeaderLink href=href={`${SITE.homePage}rss.xml`} target="_blank" class="lg:inline-block hidden"
     >RSS</HeaderLink
   >
 </div>

src/pages/posts/01-Web情报局.md

@@ -0,0 +1,86 @@
+---
+date: 2024/01/19
+---
+
+<img src="https://p.ipic.vip/0hc58k.jpg" width="800" />
+
+<small>本期封面图来源于收藏的一张 Midjourney 生成 AI 图：中国龙年。</small>
+
+> **本周刊内容来源于我的 RSS 信息订阅源精选，包含：技术文章、产品设计、思维观点、开源项目、资源工具、焦点资讯等。提供保持领先所需的见解。欢迎订阅下方 RSS，以便获取更新推送。**
+
+
+## 经验（Tips）
+
+缺乏实战经验，会更容易对不熟悉的技术产生遗漏和错误的理解。
+
+## 技术
+
+**2024年更快的性能 ，优化网页性能的重要性**  
+https://rviscomi.dev/2023/11/a-faster-web-in-2024/    
+介绍了 2024 年互联网应用速度的提升以及改变。强调了优化网页性能的重要性,包括减少跳出率、提高转化率、增加用户满意度等，前端工程师建议细读。
+
+**React Libraries for 2024**  
+<https://www.robinwieruch.de/react-libraries/>  
+在 2024 年可能会流行或者被广泛使用的 React 库。包含: 包管理、状态管理、数据获取、路由、CSS 样式、UI 库、动画库、可视化和图表库、表单库、类型检查、代码结构、身份验证、后端、数据库、托管、测试等。
+
+**2023 React 调试指南（英文）**  
+https://raygun.com/blog/react-debugging-guide/  
+想要构建高质量的 Web 应用程序，无法跳过调试阶段，是否熟练掌握调试技巧也是衡量一个 Web 工程师的重要手段。本文章将介绍 React 调试的来龙去脉，了解常见的 React 错误及其调试工具和方式。虽然该文章以 React 作为承载，但大部分工具和方法适用于任何 JavaScript 应用。
+
+**重新思考 React 最佳实践**  
+https://frontendmastery.com/posts/rethinking-react-best-practices/  
+从前端“ MVC 中的视图”，到Web应用程序架构领域的思考。
+
+
+**让用户养成使用习惯的产品逻辑**  
+<https://zcool.com.cn/work/ZNjczMDA1NzY=.html>   
+交互设计师胡三七 写的「让用户养成使用习惯的产品逻辑」的万字文章，介绍了上瘾模型和福格模型的原理和在互联网产品中的运用等各种行为设计模型，还带上一些不靠谱的案例和靠谱的互联网案例，帮助更好的理解学习。
+
+## AI 工具
+
+**生成式 AI 动画技术概述**  
+https://quail.ink/op7418/p/overview-of-generative-ai-animation-technology-2023-december  
+详细的介绍了 AI 视频生成中所有的技术分类和对应技术的优劣势，还有对应的工具以及典型的案例。基本上看完就能对 AI 视频生成有比较完整的了解.  
+<img src="https://static.quail.ink/media/ryz6fl8x.webp" width="800" />
+
+**PetThoughts**  
+【我知道你的宠物在想什么】 是一个基于 Gemini Pro API 构建的图片识别项目，通过上传你宠物的照片，该项目能够智能分析你的宠物的表情和环境，并推测出它们可能在想些什么。
+
+ -   图片识别：利用 Gemini-pro-vision 的图像识别技术，能够准确地识别宠物的表情和环境。  
+ -   表情分析：通过分析宠物的表情 Gemini-pro-vision 可以推测出宠物可能的情绪状态，如开心、惊讶、困惑等。  
+ -   环境分析：Gemini-pro-vision 还能根据宠物所处的环境，推测出它们可能的活动场景，如户外玩耍、室内休息等。  
+ -   自然语言处理：结合图像识别和自然语言处理技术，Gemini-pro-vision 可以将宠物的情绪和活动场景转化为可读性高的文字描述。  
+ -   用户友好界面：提供简洁直观的用户界面，使用户能够轻松上传照片并获取宠物分析结果。  
+
+<img src="https://p.ipic.vip/zog69n.jpg" width="800" />
+
+**看看现在死掉的 AI 产品**   
+<https://dang.ai/ai-graveyard>  
+这个有点儿意思，看新的 AI 产品列表看多了，还可以看看死掉的 AI 产品，研究研究为啥这个产品挂了，就可以打消掉一些不实际想法。
+<img src="https://gw.alipayobjects.com/zos/k/lp/SCR-20240107-skon.png" width="800" />
+
+**jan：离线运行大模型的桌面端**   
+<https://github.com/janhq/jan>  
+号称 Jan 是一个开源的 ChatGPT 替代方案，可以完全离线在计算机上运行， 这个 UI 设计得挺舒服的。和这个类似的还有 Mozilla-Ocho 出品的 llamafile，也属于 run LLMs with a single file。
+<img src="https://cdn.fliggy.com/upic/kv0MZZ.gif" width="800" />
+
+
+## 开源
+
+**简的 RSS 在线浏览工具**  
+<https://github.com/srcrs/rss-reader>  
+部署后，自定义配置好自己的 RRS 原，即可实时获取并展示 rss 订阅最新消息，支持夜间模式。
+<img src="https://p.ipic.vip/edvh1v.png" width="800" />
+
+## 资讯
+
+#### 以前靠信息不对称赚钱，现在靠什么赚钱？
+<https://zhihu.com/question/268481226>  
+知乎上一个 18 年的回答「以前靠信息不对称赚钱，现在靠什么赚钱？」，在国内想方设法搞钱是一个经久不衰的话题。
+
+#### 年轻人的体检指南 系列
+解析体检中各种检查项目的意义，体检相关的基础知识，以及能够自己在家完成的健康自查项目。全文约一万两千字，推荐完整阅读全文，并在体检前后对照使用，及时发现自己身体有没有什么潜在Bug。 
+
+ -   年轻人的体检指南 01：体检在检查什么 https://sspai.com/post/66539
+ -   年轻人的体检指南 02：个性化筛查  https://sspai.com/post/66635
+ -   年轻人的体检指南 03：你该掌握的自查手段 https://sspai.com/post/67800

src/pages/posts/1-Web情报局.md

@@ -14,20 +14,20 @@ posts.splice(10);
 
 export const get = () =>
   rss({
-    title: "WebCIA Weekly",
-    description: "保持领先所需的见解",
-    site: "https://markyun.github.io/weekly/",
+    title: 'WebCIA Weekly',
+    description: '保持领先所需的见解',
+    site: 'https://markyun.github.io/weekly/',
     customData: `<image><url>https://markyun.github.io/images/avatar.png</url></image>`,
     items: posts.map((item) => {
       const url = item.url;
       const oldTitle = url.split("/posts/")[1];
       const title =
         "第" + oldTitle.split("-")[0] + "期 - " + oldTitle.split("-")[1];
       return {
-        link: url,
         title,
-        description: item.compiledContent(),
+        link: url,
         pubDate: item.frontmatter.date,
+        description: item.compiledContent(),
       };
     }),
   });

src/pages/rss.xml.js

@@ -118,7 +118,7 @@ a,
 }
 
 .heti p {
-  margin-block-start: 1.8em;
+  margin-block-start: 1.6em;
   margin-block-end: 1.8em;
   text-align: left;
 }

src/styles/heti.min.css

@@ -77,3 +77,13 @@ body {
   color: var(--theme-selection-color);
   background-color: var(--theme-selection-bg);
 }
+
+body:not(img):not(canvas):not(video):not(svg):not(.ant-segmented).dark{
+  background: #191A27;
+  filter: invert(1) hue-rotate(180deg) brightness(120%) contrast(90%);
+}
+.dark aside{
+  background: #232423!important;
+  border-right: 1px solid #505050;
+  filter: invert(1) hue-rotate(180deg) brightness(120%) contrast(90%);
+}