Add recipes to more pages

Might be better if we had pages for each block, but this'll do for now.

src/main/java/dan200/computercraft/shared/peripheral/diskdrive/DiskDrivePeripheral.java

@@ -30,6 +30,11 @@
  * When a disk is inserted, a {@code disk} event is fired, with the side peripheral is on. Likewise, when the disk is
  * detached, a {@code disk_eject} event is fired.
  *
+ * ## Recipe
+ * <div class="recipe-container">
+ *     <mc-recipe recipe="computercraft:disk_drive"></mc-recipe>
+ * </div>
+ *
  * @cc.module drive
  */
 public class DiskDrivePeripheral implements IPeripheral

src/main/java/dan200/computercraft/shared/peripheral/modem/ModemPeripheral.java

@@ -75,6 +75,15 @@
  *
  * print("Received a reply: " .. tostring(message))
  * }</pre>
+ *
+ * ## Recipes
+ * <div class="recipe-container">
+ *     <mc-recipe recipe="computercraft:wireless_modem_normal"></mc-recipe>
+ *     <mc-recipe recipe="computercraft:wireless_modem_advanced"></mc-recipe>
+ *     <mc-recipe recipe="computercraft:wired_modem"></mc-recipe>
+ *     <mc-recipe recipe="computercraft:cable"></mc-recipe>
+ *     <mc-recipe recipe="computercraft:wired_modem_full_from"></mc-recipe>
+ * </div>
  */
 public abstract class ModemPeripheral implements IPeripheral, IPacketSender, IPacketReceiver
 {

src/main/java/dan200/computercraft/shared/peripheral/monitor/MonitorPeripheral.java

@@ -25,6 +25,12 @@
  *
  * Like computers, monitors come in both normal (no colour) and advanced (colour) varieties.
  *
+ * ## Recipes
+ * <div class="recipe-container">
+ *     <mc-recipe recipe="computercraft:monitor_normal"></mc-recipe>
+ *     <mc-recipe recipe="computercraft:monitor_advanced"></mc-recipe>
+ * </div>
+ *
  * @cc.module monitor
  * @cc.usage Write "Hello, world!" to an adjacent monitor:
  *

src/main/java/dan200/computercraft/shared/peripheral/printer/PrinterPeripheral.java

@@ -18,6 +18,11 @@
 /**
  * The printer peripheral allows pages and books to be printed.
  *
+ * ## Recipe
+ * <div class="recipe-container">
+ *     <mc-recipe recipe="computercraft:printer"></mc-recipe>
+ * </div>
+ *
  * @cc.module printer
  */
 public class PrinterPeripheral implements IPeripheral

src/main/java/dan200/computercraft/shared/peripheral/speaker/SpeakerPeripheral.java

@@ -41,8 +41,10 @@
  * - {@link #playSound} plays any built-in Minecraft sound, such as block sounds or mob noises.
  * - {@link #playAudio} can play arbitrary audio.
  *
- * <h2>Recipe</h2>
- * <McRecipe recipe="computercraft:speaker"></McRecipe>
+ * ## Recipe
+ * <div class="recipe-container">
+ *     <mc-recipe recipe="computercraft:speaker"></mc-recipe>
+ * </div>
  *
  * @cc.module speaker
  * @cc.since 1.80pr1

src/web/components/Recipe.tsx

@@ -10,9 +10,12 @@ const Item: FunctionComponent<{ item: string }> = ({ item }) => {
         src={`/images/items/${item.replace(":", "/")}.png`}
         alt={itemName}
         title={itemName}
+        className="recipe-icon"
     />
 };
 
+const EmptyItem: FunctionComponent = () => <span className="recipe-icon " />;
+
 const Arrow: FunctionComponent<JSX.IntrinsicElements["svg"]> = (props) => <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.513 45.512" {...props}>
     <g>
         <path d="M44.275,19.739L30.211,5.675c-0.909-0.909-2.275-1.18-3.463-0.687c-1.188,0.493-1.959,1.654-1.956,2.938l0.015,5.903
@@ -27,18 +30,17 @@ const Recipe: FunctionComponent<{ recipe: string }> = ({ recipe }) => {
     const recipeInfo = data.recipes[recipe];
     if (!recipeInfo) throw Error("Cannot find recipe for " + recipe);
 
-    return <div className="recipe-container">
-        <div className="recipe">
-            <strong className="recipe-title">{data.itemNames[recipeInfo.output]}</strong>
-            <div className="recipe-inputs">
-                {recipeInfo.inputs.map((items, i) => <div className="recipe-item recipe-input" key={i}>{items && <Item item={items[0]} />}</div>)}
-            </div>
-            <Arrow className="recipe-arrow" />
-            <div className="recipe-item recipe-output">
-                <Item item={recipeInfo.output} />
-                {recipeInfo.count > 1 && <span className="recipe-count">{recipeInfo.count}</span>}
-            </div>
+    return <div className="recipe">
+        <strong className="recipe-title">{data.itemNames[recipeInfo.output]}</strong>
+        <div className="recipe-inputs">
+            {recipeInfo.inputs.map((items, i) => <div className="recipe-item recipe-input" key={i}>{items ? <Item item={items[0]} /> : <EmptyItem />}</div>)}
         </div>
-    </div>;
-}
+        <Arrow className="recipe-arrow" />
+        <div className="recipe-item recipe-output">
+            <Item item={recipeInfo.output} />
+            {recipeInfo.count > 1 && <span className="recipe-count">{recipeInfo.count}</span>}
+        </div>
+    </div>
+};
+
 export default Recipe;

src/web/styles.css

@@ -40,7 +40,6 @@ pre.highlight {
     z-index: 200;
     top: 0px;
     top: 0px;
-    ;
 }
 
 /* Behold, the most cursed CSS! copy-cat's resizing algorithm is a weird, in
@@ -108,11 +107,12 @@ pre.highlight {
     --recipe-size: 32px;
 }
 
-
 .recipe-container {
     display: flex;
     justify-content: center;
     margin: 1em 0;
+    gap: 1em;
+    flex-wrap: wrap;
 }
 
 .recipe {
@@ -127,6 +127,7 @@ pre.highlight {
 }
 
 .recipe-title {
+    color: #222; /* Same as --foreground in light theme. Ugly, but too lazy to style in dark for now. */
     grid-column-start: span 3;
 }
 
@@ -148,7 +149,7 @@ pre.highlight {
     background-color: var(--recipe-hover);
 }
 
-.recipe-item > img {
+.recipe-icon {
     display: block;
     width: var(--recipe-size);
     height: var(--recipe-size);
@@ -163,6 +164,14 @@ pre.highlight {
 }
 
 .recipe-output {
-    /* Hrm! */
     align-self: center;
+    position: relative;
+}
+
+.recipe-count {
+    position: absolute;
+    bottom: 0;
+    right: var(--recipe-padding);
+    color: #fff;
+    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000
 }