Fixed scrollbar in example output frame

package.json

@@ -35,6 +35,7 @@
     "js-yaml": "^4.1.0",
     "keyword-extractor": "^0.0.28",
     "lodash": "^4.17.21",
+    "p5.js-website": "file:",
     "preact": "^10.19.5",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",

src/components/CodeEmbed/frame.tsx

@@ -165,9 +165,8 @@ export const CodeFrame = (props: CodeFrameProps) => {
         sandbox="allow-scripts allow-popups allow-modals allow-forms allow-same-origin"
         aria-label="Code Preview"
         title="Code Preview"
-        height={props.height}
-        width={props.width}
         loading={props.lazyLoad ? "lazy" : "eager"}
+        style={{width: "100%", height: "100%"}}
       />
     </div>
   );

src/content/text-detail/zh-Hans/code-of-conduct.mdx

@@ -0,0 +1,23 @@
+---
+title: "行为准则"
+---
+
+- **请注意您的言辞。** 任何以下行为都是不可接受的：
+
+  - 发表涉及性别认同和表达、性取向、种族、民族、语言、神经类型、体型、能力、社会阶层、宗教、文化、亚文化、政治观点、年龄、技能水平、职业或背景的冒犯性言论
+  - 暴力威胁
+  - 蓄意恐吓
+  - 发布没有上下文说明且未提前给予适当警告的露骨色情或暴力内容
+  - 不受欢迎的性关注
+  - 跟踪或尾随
+  - 以及任何其他形式的骚扰行为
+
+  请谨慎判断您的言行。请不要发布能让社区中的成员感到不适的内容。
+
+- **保持尊重。** 不赞同并不是攻击社区其他成员思想或观点的理由。即使存在意见分歧，也要以耐心和关怀的态度对待每一种情况。
+- **为他人着想。** 想想您的行为或贡献将如何影响社区中的其他成员。
+- **保持开放。** 接纳新成员和新想法。我们的社区在不断发展，我们欢迎积极的改变。
+
+如果您认为有人违反了行为准则，我们希望您通过电子邮件 [[email protected]](mailto:[email protected]) 向我们举报。请在邮件中写明您的姓名和对事件的描述，我们会将尽快向您回复。
+
+有时候，违反行为准则的参与者并没有意识到自己的行为是有害的。坦诚的沟通可以帮助澄清问题，使大家继续前进。然而，如果该参与者继续这种行为，p5.js 团队可能会采取任何适当的措施，其中包括将其逐出所有 p5.js 社区空间，并向 p5.js 社区中的成员或公众通报该参与者的不当行为。

src/content/text-detail/zh-Hans/donate.mdx

@@ -0,0 +1,34 @@
+---
+title: "捐赠"
+---
+import DonorBoxWidget from "../../../components/DonorBoxWidget/index.astro";
+import Image from "../../../components/Image/index.astro";
+import featuredDonate from "../images/contributor-conf-2019-17.webp";
+import donate1 from "../images/ccfest2018.webp";
+import donate2 from "../images/workshops-chile.webp";
+import donate3 from "../images/contributor-conf-2015.webp";
+import donate4 from "../images/p5for50plus.webp";
+import donate5 from "../images/tunapanda.webp";
+import donate6 from "../images/donate-6.jpeg";
+
+<Image
+  src={featuredDonate}
+  alt="参与者们围坐在办公桌前，使用着笔记本电脑，同时观看着屏幕上的代码。"
+  width="480"
+  class="max-w-[252px] md:max-w-[312px] lg:max-w-[480px]"
+/>
+
+我们需要您的帮助！p5.js 是一款免费且开源的软件。您可以通过向支持 p5.js 的组织 Processing Foundation 捐款来支持这一项目的发展。您的捐款将直接助力 p5.js 的软件开发、制作范例代码及教程之类的教育资源，以及奖学金和社群活动。所有这些努力都将让我们的社区变得更加开放和包容！
+
+<DonorBoxWidget />
+
+在原始的 Processing 软件研发了十多年后，Processing 基金会于 2012 年成立。Processing Foundation 的使命是推动艺术领域的软件学习，促进技术相关领域的艺术教育，并支持那些可以让这些领域充满活力、自由和创新的多元社区。我们致力于帮助不同背景的人们学习编程，并通过代码进行创意表达，尤其是那些可能缺乏获取相关工具和资源的人群。同时，我们也相信，一些最具变革性的未来发展和创新技术，正诞生于那些被主流科技边缘化的社群。我们希望通过提供时间、空间和有效资源，从而帮助这些群体在科技领域来持续实现自主发展。
+
+<div class="mt-xl content-grid [&>*]:col-span-3 [&>*:first-child]:col-span-4 [&>*:last-child]:col-span-4 lg:[&>*:first-child]:col-span-6 lg:[&>*:last-child]:col-span-6 lg:w-[calc(100vw-300px)]">
+  <Image src={donate1} alt="在 p5.js 工作坊中，参与者围坐在桌前，使用笔记本电脑观察屏幕上的代码。"/>
+  <Image src={donate2} alt="由Aarón Montoya-Moraga在智利主持的 p5.js 工作坊，大家展示了参与的项目 "/>
+  <Image src={donate3} alt="参与者们在绿色的草坪上跳跃、微笑，并欢快的手舞足蹈着。"/>
+  <Image src={donate4} alt="Inhwa Yeom 为 50 岁以上的人群教授 p5.js的编程技能"/>
+  <Image src={donate5} alt="学生们一边学习p5.js编程语言，一边翻阅着范例代码书籍。"/>
+  <Image src={donate6} alt="参与者们围坐在电脑桌前。"/>
+</div >