diff --git a/readme.md b/readme.md index 6964c93..fef49ea 100644 --- 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 index b4cb686..6866e34 100644 --- 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,15 +11,17 @@ 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 = (props) => { - return ( - - - {props.children} - - - - ); +export const DevvitWatermarkWrapper: Devvit.BlockComponent = ( + props, +) => { + return ( + + + {props.children} + + + + ); }; /** @@ -27,15 +29,17 @@ export const DevvitWatermarkWrapper: Devvit.BlockComponent = (pr * @param appName - the app name that is specified in devvit.yaml * @param developer - username of the app creator */ -export const DevvitWatermarkOverlay: Devvit.BlockComponent = (props) => { - return ( - - - {props.children} - - - - ); +export const DevvitWatermarkOverlay: Devvit.BlockComponent = ( + props, +) => { + return ( + + + {props.children} + + + + ); }; /** @@ -43,57 +47,89 @@ export const DevvitWatermarkOverlay: Devvit.BlockComponent = (pr * @param appName - the app name that is specified in devvit.yaml * @param developer - username of the app creator */ -const DevvitWatermark: Devvit.BlockComponent = (props, context) => { - const is1stPartyApp = props.developer === "Reddit"; +const DevvitWatermark: Devvit.BlockComponent = ( + props, + context, +) => { + const is1stPartyApp = props.developer === "Reddit"; - return ( - - - - - - - - - - {is1stPartyApp ? "Built on" : "Built by"} - -   - - context.ui.navigateTo(is1stPartyApp - ? `https://developers.reddit.com?utm_medium=watermark&utm_source=${props.appName}` - : `https://www.reddit.com/user/${props.developer}/` - ) - } - > - - {is1stPartyApp ? "DevPlatform" : props.developer} - - - - - - - - - context.ui.navigateTo(`https://developers.reddit.com/apps/${props.appName}`) - } - alignment="middle" - > - - Details - - - - - + return ( + + + + + + + + + + {is1stPartyApp ? "Built on" : "Built by"} + +   + + context.ui.navigateTo( + is1stPartyApp + ? `https://developers.reddit.com?utm_medium=watermark&utm_source=${props.appName}` + : `https://www.reddit.com/user/${props.developer}/`, + ) + } + > + + {is1stPartyApp ? "DevPlatform" : props.developer} + + + - - ); + + + + + context.ui.navigateTo( + `https://developers.reddit.com/apps/${props.appName}`, + ) + } + alignment="middle" + > + + Details + + + + + + + + ); }; function DevvitLogo(): JSX.Element { - return ; + return ( + + ); } diff --git a/src/devvit-watermark/readme.md b/src/devvit-watermark/readme.md index 5970c65..dcd4d9a 100644 --- 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. 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 \ No newline at end of file +Make sure that `appName` matches the `name` in the `devvit.yaml` in your project folder and `developer` matches your Reddit username