- Want to suggest a new extension or modification? Head over to our GitHub
- repository and file an{" "}
-
- issue
- {" "}
- or submit a pull request to{" "}
-
- edit the extensions.xml
- {" "}
- file! (A GitHub account is required.)
+ Want to suggest a new extension or modification? Check out our{" "}
+ guide on how to submit
+ an extension to Awesome Arcade!
{resultCount != undefined ? (
diff --git a/src/pages/help/contributing/extensions.tsx b/src/pages/help/contributing/extensions.tsx
new file mode 100644
index 0000000..558fd37
--- /dev/null
+++ b/src/pages/help/contributing/extensions.tsx
@@ -0,0 +1,210 @@
+import React from "react";
+import getAppProps, { AppProps } from "@/components/WithAppProps";
+import Layout from "@/components/Layout";
+import ClickableFigure from "@/components/Figure/ClickableFigure";
+import EmptyNewExtensionIssueImage from "@/assets/images/help/contributing/extensions/empty-new-extension-issue.png";
+import FilledOutNewExtensionIssueImage from "@/assets/images/help/contributing/extensions/filled-out-new-extension-issue-template.png";
+import ThemedSyntaxHighlighter from "@/components/Themed/SyntaxHighlighter";
+import { LinkableH2, LinkableH3 } from "@/components/Linkable/Header";
+
+const pageName = "Contributing extensions";
+const url = "/help/contributing/extensions";
+
+export function ContributingExtensions({
+ appProps,
+}: {
+ appProps: AppProps;
+}): JSX.Element {
+ return (
+
+ <>
+
{pageName}
+ <>
+
+ Thanks for considering to contribute to Awesome Arcade! Submitting
+ an extension will allow others to find it, helping others in their
+ game making process!
+
+
+ There are two main ways to contribute extensions to Awesome Arcade:
+ Issues and pull requests.
+
+
+
+ Submit an issue
+
+ <>
+
+ The GitHub repository that hosts the source code for Awesome Arcade
+ accepts issues on new extensions! You can use the{" "}
+
+ new extension issue template
+ {" "}
+ to help you quickly file an issue for me to add an extension to the
+ list.
+
+
+ Please insert the relevant information, replacing the brackets as
+ necessary.
+
+
+ For example, if I wanted to contribute{" "}
+
+ riknoll{"'"}s arcade-mini-menu extension
+ {" "}
+ that helps you use menus in a MakeCode Arcade game, I would choose
+ the {'"'}New extension{'"'} issue template:
+
+
+
+ And then I would fill out the template with information, like this:
+
+
+
+ As you can see, the only required information is the extension URL
+ (obviously) but filling out the other details will help me out.
+ Thanks!
+
+
+
+ Submit a pull request
+
+ <>
+
+ The GitHub repository that hosts the source code for Awesome Arcade
+ accepts pull requests on new extensions! You can{" "}
+
+ edit the extensions.xml
+ {" "}
+ file to add an extension to the list. (Yes, it resides in an XML
+ file.) Editing it will automatically fork the repository, afterwards
+ you can submit a pull request to merge your changes into the main
+ repository.
+
+
You{"'"}ll see an XML file like this:
+ {`
+
+
+
+ Help your sprites find their way around your tilemaps with this extension! Just provide 2 locations on a tilemap, and it will automagically compute the fastest path between the 2 spots while also moving around walls using the [A* algorithm](https://en.wikipedia.org/wiki/A*_search_algorithm)! This will add another section in the \`Scene\` category called \`Path Following\` in the toolbox.
+
+ https://github.com/jwunderl/arcade-tilemap-a-star
+ https://forum.makecode.com/t/tilemap-path-finding-a-beta/1846?u=unsignedarduino
+ https://arcade.makecode.com/12103-88074-48013-42311
+ https://en.wikipedia.org/wiki/A*_search_algorithm
+
+
+
+
+`}
+
+ To add an extension, add it to the end of the{" "}
+
+ {"<"}extensionList{">"}
+ {" "}
+ element.
+
+
+ For example, if I wanted to contribute{" "}
+
+ riknoll{"'"}s arcade-mini-menu extension
+ {" "}
+ that helps you use menus in a MakeCode Arcade game, I would add the
+ following XML to the end of the{" "}
+
+ {"<"}extensionList{">"}
+ {" "}
+ element like so:
+
+ {`
+ This extension is a much more advanced and highly customizable version of (the now depreciated) \`arcade-custom-menu\` that has tons of options to customize your menus to fit your game's theme! The menu is also a sprite, which allows you to use all standard sprite blocks on it. This adds a category to the toolbox called \`Mini Menu\`.
+
+ https://github.com/riknoll/arcade-mini-menu
+ https://forum.makecode.com/t/arcade-mini-menu-extension/14368?u=unsignedarduino
+ https://riknoll.github.io/arcade-mini-menu/
+
+ `}
+
+
+ Extension XML elements
+
+ <>
+
+ Here is a sample using all the possible XML elements in an{" "}
+ {``}:
+
+ {`
+ Some description about the extension's capabilities.
+
+ GitHub repo link
+ Link to forum post
+ Link to demo
+
+
+
+
+
+
+
+
+
+
+
+ Some description why.
+
+
+`}
+
+
+
+ );
+}
+
+export async function getStaticProps(): Promise<{
+ props: { appProps: AppProps };
+}> {
+ return {
+ props: {
+ appProps: await getAppProps(),
+ },
+ };
+}
+
+export default ContributingExtensions;
diff --git a/src/pages/help/contributing/index.tsx b/src/pages/help/contributing/index.tsx
new file mode 100644
index 0000000..f2a2cdb
--- /dev/null
+++ b/src/pages/help/contributing/index.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import getAppProps, { AppProps } from "@/components/WithAppProps";
+import Layout from "@/components/Layout";
+import { QuickLink } from "@/components/QuickLinks/types";
+import QuickLinkCards from "@/components/QuickLinks/QuickLinkCards";
+
+const pageName = "Contributing";
+
+export function Contributing({
+ appProps,
+}: {
+ appProps: AppProps;
+}): JSX.Element {
+ const helpPages: QuickLink[] = [
+ {
+ name: "Contributing extensions",
+ description: "A guide on how to contribute extensions to Awesome Arcade.",
+ link: "/help/contributing/extensions",
+ linkText: "Contribute extensions",
+ },
+ {
+ name: "Contributing tools",
+ description: "A guide on how to contribute tools to Awesome Arcade.",
+ link: "/help/contributing/tools",
+ linkText: "Contribute tools",
+ },
+ ];
+
+ return (
+
+
+ Thanks for considering to contribute to Awesome Arcade! Submitting a
+ tool will allow others to find it, helping others in their game making
+ process!
+
+
+ There are two main ways to contribute tools to Awesome Arcade: Issues
+ and pull requests
+
+
+
+ Submit an issue
+
+ <>
+
+ The GitHub repository that hosts the source code for Awesome Arcade
+ accepts issues on new tools! You can use the{" "}
+
+ new tool issue template
+ {" "}
+ to help you quickly file an issue for me to add a tool to the list.
+
+
+ Please insert the relevant information, replacing the brackets as
+ necessary.
+
+
+ For example, if I wanted to contribute{" "}
+
+ my Arcade-MIDI-to-Song tool
+ {" "}
+ that helps you play MIDI music in a MakeCode Arcade game, I would
+ choose the {'"'}New tool{'"'} issue template:
+
+
+
+ And then I would fill out the template with information, like this:
+
+
+
+ As you can see, the only required information is the tool URL
+ (obviously) and the GitHub URL but filling out the other details will
+ help me out. Thanks!
+
+
+
+ Submit a pull request
+
+ <>
+
+ The GitHub repository that hosts the source code for Awesome Arcade
+ accepts pull requests on new tools! You can{" "}
+
+ edit the tools.xml
+ {" "}
+ file to add a tool the list. (Yes, it resides in an XML file.) Editing
+ it will automatically fork the repository, afterwards you can submit a
+ pull request to merge your changes into the main repository.
+
+
You{"'"}ll see an XML file like this:
+ {`
+
+
+
+ This tool will convert your images (like \`.png\` files) to Arcade code! Simply copy the output, open JavaScript mode in your project, navigate to where you want the image block to go, and paste in the image code! You may need to remove some redundant characters. Remember that Arcade has a maximum image size of 500x500!
+
+ https://kristianpedersen.github.io/Convert-Image-to-MakeCode-Arcade-Sprite/
+ https://github.com/kristianpedersen/Convert-Image-to-MakeCode-Arcade-Sprite
+ https://forum.makecode.com/t/ive-made-an-image-file-to-arcade-sprite-converter-feedback-and-code-improvements-wanted/2076?u=unsignedarduino
+
+
+
+
+`}
+
+ To add a tool, add it to the end of the {``}{" "}
+ element.
+
+
+ For example, if I wanted to contribute{" "}
+
+ my Arcade-MIDI-to-Song tool
+ {" "}
+ that helps you play MIDI music in a MakeCode Arcade game, I would add
+ the following XML to the end of the {``}{" "}
+ element like so:
+
+ {`
+ I have written a Python script that will turn MIDI files into MakeCode Arcade songs! Note that this tools requires at least Python 3.11 on a computer, and command line knowledge is highly recommended!
+
+ https://github.com/UnsignedArduino/Arcade-MIDI-to-Song
+ https://forum.makecode.com/t/new-song-format/17763/11?u=unsignedarduino
+ https://forum.makecode.com/t/piano-synthesia/22138?u=unsignedarduino
+
+ `}
+
+
+ Tool XML elements
+
+ <>
+
+ Here is a sample using all the possible XML elements in a{" "}
+ {``}:
+
+ {`
+ Some description about the tool's capabilities.
+
+ The tool's link (for example, a web page)
+ GitHub repo link
+ Link to forum post
+
+
+
+
+
+
+
+
+
+
+
+ Some description why.
+
+ `}
+
+
+ );
+}
+
+export async function getStaticProps(): Promise<{
+ props: { appProps: AppProps };
+}> {
+ return {
+ props: {
+ appProps: await getAppProps(),
+ },
+ };
+}
+
+export default ContributingTools;
diff --git a/src/pages/help/index.ts b/src/pages/help/index.ts
deleted file mode 100644
index dd65e12..0000000
--- a/src/pages/help/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default, getStaticProps } from "./help";
diff --git a/src/pages/help/help.tsx b/src/pages/help/index.tsx
similarity index 54%
rename from src/pages/help/help.tsx
rename to src/pages/help/index.tsx
index ea640a7..36806f0 100644
--- a/src/pages/help/help.tsx
+++ b/src/pages/help/index.tsx
@@ -1,25 +1,25 @@
-import Link from "next/link";
import React from "react";
import Layout from "../../components/Layout";
import getAppProps, { AppProps } from "../../components/WithAppProps";
+import { QuickLink } from "@/components/QuickLinks/types";
+import QuickLinkCards from "@/components/QuickLinks/QuickLinkCards";
const pageName = "Help";
export function Help({ appProps }: { appProps: AppProps }): JSX.Element {
- type HelpPage = {
- name: string;
- description: string;
- link: string;
- linkText: string;
- };
-
- const helpPages: HelpPage[] = [
+ const helpPages: QuickLink[] = [
{
name: "Adding extensions",
description: "A guide on how to add extensions to MakeCode Arcade.",
link: "/help/adding-extensions",
linkText: "View the guide",
},
+ {
+ name: "Contributing",
+ description: "Guides on how to contribute to Awesome Arcade.",
+ link: "/help/contributing",
+ linkText: "Contribute to Awesome Arcade",
+ },
{
name: "Legal",
description:
@@ -38,43 +38,7 @@ export function Help({ appProps }: { appProps: AppProps }): JSX.Element {
keywords="Awesome Arcade, Game development, Awesome, Modules, Libraries, Extensions, Curated, Arcade, Useful, Curated list, MakeCode, Awesome extensions, Useful extensions, MakeCode Arcade, MakeCode Arcade Extensions, Arcade Extensions, Help, Help page, Main help page"
>
Please note that this website is not developed, affiliated, or endorsed
by Microsoft, the owner of MakeCode Arcade.
@@ -106,16 +68,9 @@ export function Home({ appProps }: HomeProps): JSX.Element {
)}
- Want to suggest a new extension, tool, or modification? Head over to our
- GitHub repository and file an{" "}
-
- issue
-
- ! (A GitHub account is required.)
+ Want to suggest a new extension, tool, or modification? Check out our{" "}
+ guides on contributing to Awesome
+ Arcade!
);
diff --git a/src/pages/tools.tsx b/src/pages/tools.tsx
index 12dbf4f..ecaa67c 100644
--- a/src/pages/tools.tsx
+++ b/src/pages/tools.tsx
@@ -138,24 +138,9 @@ export function Tools({ appProps, list }: ToolsProps): JSX.Element {
)}
- Want to suggest a new tool or modification? Head over to our GitHub
- repository and file an{" "}
-
- issue
- {" "}
- or submit a pull request to{" "}
-
- edit the tools.xml
- {" "}
- file! (A GitHub account is required.)
+ Want to suggest a new tool or modification? Check out our{" "}
+ guide on how to submit a
+ tool to Awesome Arcade!