Merge pull request #1165 from RRRG3/Links-to-the-Editor-version

Add version parameter to editor links (fixes #1036)

Author: limzykenneth

src/components/Footer/index.astro

@@ -3,6 +3,7 @@ import { getEntry } from "astro:content";
 import { getCurrentLocale, getUiTranslator } from "@/src/i18n/utils";
 import { Icon } from "../Icon";
 import Banner from "@components/Banner/index.astro";
+import { p5Version } from "@/src/globals/p5-version";
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
@@ -32,7 +33,7 @@ const bannerEntry = await getEntry("banner", currentLocale);
       <li><a href="/contribute/">{t("Contribute")}</a></li>
       <li><a href="/community/">{t("Community")}</a></li>
       <li><a href="/about/">{t("About")}</a></li>
-      <li><a href="https://editor.p5js.org">{t("Start Coding")}</a></li>
+      <li><a href={`https://editor.p5js.org?version=${p5Version}`}>{t("Start Coding")}</a></li>
       <li><a href="/donate/">{t("Donate")}</a></li>
     </ul>
   </div>

src/components/Nav/MainNavLinks.tsx

@@ -1,6 +1,7 @@
 import styles from "./styles.module.scss";
 import { Logo } from "../Logo";
 import { Icon } from "../Icon";
+import { p5Version } from "@/src/globals/p5-version";
 
 type MainNavLinksProps = {
   links: {
@@ -81,7 +82,7 @@ export const MainNavLinks = ({
       </ul>
       <ul class="flex flex-col gap-[15px]">
         <li>
-          <a className={styles.buttonlink} href="https://editor.p5js.org">
+          <a className={styles.buttonlink} href={`https://editor.p5js.org?version=${p5Version}`}>
             <div class="mr-xxs">
               <Icon kind="code-brackets" />
             </div>

src/content/text-detail/en/download.mdx

@@ -11,13 +11,14 @@ import {
   p5LatestUrl,
   p5MajorVersion
 } from '@src/globals/globals'
+import { p5Version } from '@src/globals/p5-version'
 
 Welcome! This page contains the links to start using p5.js in the way that suits you best. Open the p5.js Editor in your web browser, or download the library to your own computer. We’ve tried to order the links to reflect what a beginner might want first, then what a more experienced programmer may be looking for.
 
 ### Start Coding Online
 This link redirects you to the p5.js Editor online so you can begin using p5.js immediately.
 
-<LinkButton variant='link' url='https://editor.p5js.org/'> p5.js Editor </LinkButton>
+<LinkButton variant='link' url={`https://editor.p5js.org?version=${p5Version}`}> p5.js Editor </LinkButton>
 
 ### Download the Complete Library
 This is a download containing the p5.js library file, the p5.sound addon, and an example project. It does not contain an editor. Visit [Get Started](/tutorials/get-started) to learn how to setup a p5.js project.

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

@@ -9,13 +9,14 @@ import {
   libraryDownloadUrl,
   minifiedLibraryDownloadUrl
 } from '@src/globals/globals'
+import { p5Version } from '@src/globals/p5-version'
 
 欢迎！本页面包含了开始使用 p5.js 的各种方式的链接。您可以在网络浏览器中打开 p5.js 编辑器，或者将库下载到您的计算机上。我们按照从初学者到进阶开发者的需求顺序来组织这些链接。
 
 ### 在线开始编程
 此链接将带您前往在线 p5.js 编辑器，您可以立即开始使用 p5.js。
 
-<LinkButton variant='link' url='https://editor.p5js.org/'> p5.js 编辑器 </LinkButton>
+<LinkButton variant='link' url={`https://editor.p5js.org?version=${p5Version}`}> p5.js 编辑器 </LinkButton>
 
 ### 下载完整库
 这个下载包含了 p5.js 库文件、p5.sound 插件和一个示例项目。不包含编辑器。访问[入门指南](/tutorials/get-started)了解如何设置 p5.js 项目。