Fix formatting

reddit · Aug 1, 2024 · fc9db81 · fc9db81
1 parent a6d6eb4
commit fc9db81
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 77 deletions.
diff --git a/readme.md b/readme.md
@@ -34,13 +34,13 @@ Devvit.addCustomPostType({
 });
 ```
 
-| Component Name    | Description                                                                                                      | Links                                                  |
-|-------------------|------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------|
+| Component Name    | Description                                                                                                       | Links                                                  |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
 | Columns           | A component that provides a simple column layout and optionally allows you to specify gap sizing between elements | [Usage Instructions](./src/columns/readme.md)          |
-| Item pagination   | A helper that enables pagination of data including UI elements for navigating through the elements               | [Usage Instructions](./src/item-pagination/readme.md)  |
-| PixelPadding      | A component that lets you set padding from any side using pixel values.                                          | [Usage Instructions](./src/pixel-padding/readme.md)    |
-| Developer toolbar | Adds a toolbar of actions only visible to developers.                                                            | [Usage Instructions](./src/dev-toolbar/readme.md)      |
-| Watermark         | Adds a Developer Platform watermark.                                                      | [Usage Instructions](./src/devvit-watermark/readme.md) |
+| Item pagination   | A helper that enables pagination of data including UI elements for navigating through the elements                | [Usage Instructions](./src/item-pagination/readme.md)  |
+| PixelPadding      | A component that lets you set padding from any side using pixel values.                                           | [Usage Instructions](./src/pixel-padding/readme.md)    |
+| Developer toolbar | Adds a toolbar of actions only visible to developers.                                                             | [Usage Instructions](./src/dev-toolbar/readme.md)      |
+| Watermark         | Adds a Developer Platform watermark.                                                                              | [Usage Instructions](./src/devvit-watermark/readme.md) |
 
 ## Contributing to the devvit-kit public repo
 

diff --git a/src/devvit-watermark/DevvitWatermark.tsx b/src/devvit-watermark/DevvitWatermark.tsx
@@ -1,4 +1,4 @@
-import {Devvit} from '@devvit/public-api';
+import { Devvit } from "@devvit/public-api";
 
 /**
  * appName - the app name that is specified in devvit.yaml.
@@ -11,89 +11,125 @@ export type WatermarkProps = { appName: string; developer: string };
  * @param appName - the app name that is specified in devvit.yaml
  * @param developer - username of the app creator
  */
-export const DevvitWatermarkWrapper: Devvit.BlockComponent<WatermarkProps> = (props) => {
-    return (
-        <vstack height={100} width={100}>
-            <vstack grow width={100}>
-                {props.children}
-            </vstack>
-            <DevvitWatermark appName={props.appName} developer={props.developer}/>
-        </vstack>
-    );
+export const DevvitWatermarkWrapper: Devvit.BlockComponent<WatermarkProps> = (
+  props,
+) => {
+  return (
+    <vstack height={100} width={100}>
+      <vstack grow width={100}>
+        {props.children}
+      </vstack>
+      <DevvitWatermark appName={props.appName} developer={props.developer} />
+    </vstack>
+  );
 };
 
 /**
  * A component that places the watermark over the container it is wrapped around
  * @param appName - the app name that is specified in devvit.yaml
  * @param developer - username of the app creator
  */
-export const DevvitWatermarkOverlay: Devvit.BlockComponent<WatermarkProps> = (props) => {
-    return (
-        <zstack height={100} width={100} alignment="bottom center">
-            <vstack height={100} width={100}>
-                {props.children}
-            </vstack>
-            <DevvitWatermark appName={props.appName} developer={props.developer}/>
-        </zstack>
-    );
+export const DevvitWatermarkOverlay: Devvit.BlockComponent<WatermarkProps> = (
+  props,
+) => {
+  return (
+    <zstack height={100} width={100} alignment="bottom center">
+      <vstack height={100} width={100}>
+        {props.children}
+      </vstack>
+      <DevvitWatermark appName={props.appName} developer={props.developer} />
+    </zstack>
+  );
 };
 
 /**
  * A watermark component. Renders Devvit logo, link to the author profile page and link to the app details
  * @param appName - the app name that is specified in devvit.yaml
  * @param developer - username of the app creator
  */
-const DevvitWatermark: Devvit.BlockComponent<WatermarkProps> = (props, context) => {
-    const is1stPartyApp = props.developer === "Reddit";
+const DevvitWatermark: Devvit.BlockComponent<WatermarkProps> = (
+  props,
+  context,
+) => {
+  const is1stPartyApp = props.developer === "Reddit";
 
-    return (
-        <vstack darkBackgroundColor="#04090A" lightBackgroundColor="#F5F5F5" height="32px" width={100}>
-            <hstack height={'1px'} grow darkBackgroundColor="#FFFFFF1A"></hstack>
-            <hstack height={100}>
-                <spacer size="small"/>
-                <hstack gap="small" grow alignment="start middle">
-                    <DevvitLogo/>
-                    <hstack>
-                        <hstack alignment="start middle">
-                            <text size="small" darkColor="#B8C5C9" lightColor="#000" selectable={false}>
-                                {is1stPartyApp ? "Built on" : "Built by"}
-                            </text>
-                            <text selectable={false}>&nbsp;</text>
-                            <vstack
-                                onPress={() =>
-                                    context.ui.navigateTo(is1stPartyApp
-                                        ? `https://developers.reddit.com?utm_medium=watermark&utm_source=${props.appName}`
-                                        : `https://www.reddit.com/user/${props.developer}/`
-                                    )
-                                }
-                            >
-                                <text size="small" darkColor="#B8C5C9" lightColor="#000" selectable={false}>
-                                    {is1stPartyApp ? "DevPlatform" : props.developer}
-                                </text>
-                                <hstack height={'1px'} backgroundColor="#B8C5C9"></hstack>
-                            </vstack>
-                        </hstack>
-                    </hstack>
-                </hstack>
-                <hstack>
-                    <vstack
-                        onPress={() =>
-                            context.ui.navigateTo(`https://developers.reddit.com/apps/${props.appName}`)
-                        }
-                        alignment="middle"
-                    >
-                        <text size="small" darkColor="#B8C5C9" lightColor="#000" selectable={false}>
-                            Details
-                        </text>
-                        <hstack height={'1px'} backgroundColor="#B8C5C9"></hstack>
-                    </vstack>
-                </hstack>
-                <spacer size="small"/>
+  return (
+    <vstack
+      darkBackgroundColor="#04090A"
+      lightBackgroundColor="#F5F5F5"
+      height="32px"
+      width={100}
+    >
+      <hstack height={"1px"} grow darkBackgroundColor="#FFFFFF1A"></hstack>
+      <hstack height={100}>
+        <spacer size="small" />
+        <hstack gap="small" grow alignment="start middle">
+          <DevvitLogo />
+          <hstack>
+            <hstack alignment="start middle">
+              <text
+                size="small"
+                darkColor="#B8C5C9"
+                lightColor="#000"
+                selectable={false}
+              >
+                {is1stPartyApp ? "Built on" : "Built by"}
+              </text>
+              <text selectable={false}>&nbsp;</text>
+              <vstack
+                onPress={() =>
+                  context.ui.navigateTo(
+                    is1stPartyApp
+                      ? `https://developers.reddit.com?utm_medium=watermark&utm_source=${props.appName}`
+                      : `https://www.reddit.com/user/${props.developer}/`,
+                  )
+                }
+              >
+                <text
+                  size="small"
+                  darkColor="#B8C5C9"
+                  lightColor="#000"
+                  selectable={false}
+                >
+                  {is1stPartyApp ? "DevPlatform" : props.developer}
+                </text>
+                <hstack height={"1px"} backgroundColor="#B8C5C9"></hstack>
+              </vstack>
             </hstack>
-        </vstack>
-    );
+          </hstack>
+        </hstack>
+        <hstack>
+          <vstack
+            onPress={() =>
+              context.ui.navigateTo(
+                `https://developers.reddit.com/apps/${props.appName}`,
+              )
+            }
+            alignment="middle"
+          >
+            <text
+              size="small"
+              darkColor="#B8C5C9"
+              lightColor="#000"
+              selectable={false}
+            >
+              Details
+            </text>
+            <hstack height={"1px"} backgroundColor="#B8C5C9"></hstack>
+          </vstack>
+        </hstack>
+        <spacer size="small" />
+      </hstack>
+    </vstack>
+  );
 };
 
 function DevvitLogo(): JSX.Element {
-    return <image imageHeight={14} imageWidth={14} url={'https://i.redd.it/llj3dnlz1ufd1.png'}/>;
+  return (
+    <image
+      imageHeight={14}
+      imageWidth={14}
+      url={"https://i.redd.it/llj3dnlz1ufd1.png"}
+    />
+  );
 }
diff --git a/src/devvit-watermark/readme.md b/src/devvit-watermark/readme.md
@@ -1,12 +1,13 @@
 # Devvit Watermark
 
-A watermark component that helps to distinguish your app as one that is built on Developer Platform. 
+A watermark component that helps to distinguish your app as one that is built on Developer Platform.
 
 <img src="https://i.redd.it/cdnom5lo41gd1.png" alt="Usage example: 'Built by kebakark. Details'">
 
 Served in two options
- - `DevvitWatermarkWrapper` - appends the watermark to the container it is wrapped around. Reduces the space available in the container, but does not overlap with the content. 
- - `DevvitWatermarkOverlay` - places the watermark over the container it is wrapped around. Does not reduce the space available in the container, but overlaps with the content.
+
+- `DevvitWatermarkWrapper` - appends the watermark to the container it is wrapped around. Reduces the space available in the container, but does not overlap with the content.
+- `DevvitWatermarkOverlay` - places the watermark over the container it is wrapped around. Does not reduce the space available in the container, but overlaps with the content.
 
 ## How to use
 
@@ -34,4 +35,4 @@ return (
 );
 ```
 
-Make sure that `appName` matches the `name` in the `devvit.yaml` in your project folder and `developer` matches your Reddit username
+Make sure that `appName` matches the `name` in the `devvit.yaml` in your project folder and `developer` matches your Reddit username