sitebuilder extension

.gitignore

@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+/temp

README.md

@@ -1,16 +1,25 @@
 # Extension Gallery
 
 ## Submitting an extension
+
+### NOTE!
+Once submitted, your extension CANNOT be removed from the files. Your extension may be delisted, but the code must NEVER be removed.
+
+This is to prevent projects being broken. If we remove your code, anyone who used your extension will have to remake their ENTIRE project without editing their file manually.
+
 ### Step 1.
 Create your extension. You can find a lot of details [here](https://docs.turbowarp.org/development/extensions/introduction).
 
-#### Important notes:
+#### Important Guidelines:
 - Your extension should not already exist on the gallery. Please check the
 [Pull Requests](https://github.com/PenguinMod/PenguinMod-ExtensionsGallery/pulls)
-and [Gallery page](https://penguinmod-extensions-gallery.vercel.app/) to confirm.
+and [Gallery page](https://extensions.penguinmod.com/) to confirm.
 - Your extension should be created for a specific purpose. An extension with random blocks someone might need will likely not get accepted if the blocks are not in a certain theme, like math or rendering.
 - Your extension should be easily explainable in 1-2 sentences or a single picture. This is what will determine whether you can be on the gallery or not.
 - Your extension should be MIT licensed (not compatible with the MIT license, should be the actual MIT license. This may change in the future.)
+- Your extension **CANNOT** reference or use any content from a website not suitable for ages 13+
+- Your extension **CANNOT** contain content not suitable for ages 10+ (including extension icon and extension code)
+- Your extension **CANNOT** contain discriminatory content or content that is against a certain group or minority
 
 ### Step 2.
 Create info for your extension, like a description and a banner / thumbnail.
@@ -54,6 +63,7 @@ You can post your extension banner / thumbnail and or description in the pull re
 Once your pull request is merged, it'll be on the site or upcoming onto the site. You may get responses about things you should change or fix though.
 
 *Note: Vercel may comment on your pull request. This is the hosting service we use.*
+
 *If it has a link to visit a preview, you can click on it and see your changes. See the Optional Steps for more info on how to edit the site to show your extension.*
 
 # Optional Steps
@@ -78,6 +88,108 @@ If you are using the website to add the file:
 This should create the folder with the uploaded image inside.
 
 ### Step 7.
+Create instructions on using your extension.
+
+***This really only makes sense if your extension has features that may need explanation.***
+
+Enter the `src/lib/Documentation` folder in the repository.
+
+Inside this folder are a lot of `.md` files. You will need to make one for your documentation.
+These are **Markdown** files. It's a simple way to write information nicely. Right now, you are reading a markdown file.
+
+To learn how to write markdown, you can visit https://www.markdowntutorial.com/
+or just write your `.md` file using the same formatting tools that Discord has.
+
+If you are using the website to add the `.md` file:
+
+1. Click `Add File` at the top and click `Create new file`.
+2. At the top where the file name is, type your extensions name, and then `.md`. **DO NOT TYPE A `/` HERE!**
+3. Now type your markdown code. GitHub may actually show you a preview of your markdown.
+
+#### Typing Scratch Blocks in your tutorial
+You might notice documentation pages like the one for [Particle Tools](https://extensions.penguinmod.com/docs/particle-tools)
+have blocks on them.
+
+To do this, `.md` files have something called code-blocks. You type \`\`\` and then some code, then type \`\`\` again.
+
+Example:
+````
+```
+this is probably code
+```
+````
+will become
+```
+this is probably code
+```
+
+You can also specify a programming language (which will be important for showing blocks)
+
+Example:
+````
+```js
+console.log("Hello world!");
+```
+````
+will become
+```js
+console.log("Hello world!");
+```
+
+To type blocks in your documentation, specify `scratch` as the programming lanugage.
+
+Example:
+````
+```scratch
+hello, i am a scratch block ()
+```
+````
+will become
+
+<img src="example_block.png" alt="Block" height="64"></img>
+
+*(visit https://scratchblocks.github.io to play with creating blocks like this)*
+
+Note that GitHub, Visual Studio Code or other Markdown editors likely will not support this. **This only works on the PenguinMod site.** This is also why Vercel may allow you to preview your pull request.
+
+#### Adding the tutorial to the site
+So far we have covered creating and filling out the `.md` file, but it's not available yet.
+
+To do this, enter the `src/lib/Documentation/pages.js` file.
+
+In this file you will see some instructions. First off at the start of the file, follow the instructions to import your `.md` file.
+
+Example:
+*The documentation file is called `extension.md` in these examples.*
+```js
+import PageExtension from "./extension.md?raw";
+```
+```js
+import PageDocumentationExtension from "./extension.md?raw";
+```
+
+Now you will see some more instructions below. Here, you will create the page that leads to the documentation.
+
+Example:
+*The above example helps visualize this section easier.*
+```js
+"extension": PageExtension,
+```
+`/docs/extension` will lead to the docs here
+```js
+"extension": PageDocumentationExtension,
+```
+`/docs/extension` will lead to the docs here
+```js
+"afdoiewhfoqwijel": PageExtension,
+```
+`/docs/afdoiewhfoqwijel` will lead to the docs here
+
+Do not type a `/` or any characters that cannot be used in a URL here. Uppercase letters may also not work for the page link.
+
+Also try to keep the name recognizable to your extension as this name will also be used on the `/docs` page.
+
+### Step 8.
 Add your extension onto the actual website.
 
 Enter the `src/lib/extensions.js` file in the repository.
@@ -91,6 +203,7 @@ Each extension is incased in `{}` brackets. Look below on how to copy it.
     description: "Blocks to return the result of an expression.", // The description for the extension.
     code: "Username/extension.js", // The folder and file name for the code of the extension.
     banner: "Username/Extension.png", // The folder and file name for the banner of the extension.
+    documentation: "page-name", // Only applies if you created a documentation page. This is the page name for that documentation.
     creator: "Username", // Your username. Adds a link to your profile.
     isGitHub: false, // Optional. false means this is your Scratch username, true means this is your GitHub username.
 },

package.json

@@ -13,5 +13,8 @@
 		"svelte": "^4.0.5",
 		"vite": "^4.4.2"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"markdown-it": "^13.0.1"
+	}
 }

src/app.html

@@ -3,14 +3,46 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+		<title>PenguinMod Extra Extensions</title>
+
+		<meta name="title" content="PenguinMod Extra Extensions">
+		<meta name="description" content="More community extensions that haven't made it to the menu yet.">
+		<meta property="theme-color" content="#51D3F4">
+
+		<meta property="og:type" content="website">
+		<meta property="og:url" content="https://extensions.penguinmod.com/">
+		<meta property="og:title" content="PenguinMod Extra Extensions">
+		<meta property="og:image" content="https://extensions.penguinmod.com/favicon.ico">
+
+		<meta property="twitter:url" content="https://extensions.penguinmod.com/">
+		<meta property="twitter:title" content="PenguinMod Extra Extensions">
+		<meta property="twitter:description" content="More community extensions that haven't made it to the menu yet.">
+		<meta property="twitter:image" content="https://extensions.penguinmod.com/favicon.ico">
+
 		<meta name="viewport" content="width=device-width" />
 		<style>
 			:root {
 				font-family: Arial, Helvetica, sans-serif;
 			}
+			.sb3-comment-label {
+				fill: black !important;
+			}
+			a {
+    		    color: dodgerblue;
+    		}
+    		a:visited {
+    		    color: #862aff;
+    		}
+    		body.dark-mode a {
+    		    color: #00c3ff;
+    		}
+    		body.dark-mode a:visited {
+    		    color: #af72ff;
+    		}
 		</style>
 		%sveltekit.head%
 	</head>
+
 	<body data-sveltekit-preload-data="hover" id="PAGE_BODY">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>