-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adds a simple watermark component
- Loading branch information
Showing
4 changed files
with
185 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| import { Devvit } from "@devvit/public-api"; | ||
|
|
||
| /** | ||
| * @field appName - the app name that is specified in devvit.yaml. | ||
| * | ||
| * @field developer - username of the app creator. | ||
| */ | ||
| export type WatermarkProps = { appName: string; developer: string }; | ||
|
|
||
| /** | ||
| * A component that appends the watermark to the container it is wrapped around | ||
| */ | ||
| 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 | ||
| */ | ||
| 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"; | ||
|
|
||
| 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}> </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" /> | ||
| </hstack> | ||
| </vstack> | ||
| ); | ||
| }; | ||
|
|
||
| function DevvitLogo(): JSX.Element { | ||
| return ( | ||
| <image | ||
| imageHeight={14} | ||
| imageWidth={14} | ||
| url={"https://i.redd.it/llj3dnlz1ufd1.png"} | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| # Devvit watermark | ||
|
|
||
| A watermark indicates that your app was built on Developer Platform. | ||
|
|
||
| <img src="https://i.redd.it/cdnom5lo41gd1.png" alt="Usage example: 'Built by kebakark. Details'"> | ||
|
|
||
| You can add a watermark to your app in one of two ways: | ||
|
|
||
| - `DevvitWatermarkWrapper` appends the watermark to the container it is wrapped around. This reduces the space available in the container, but the watermark does not overlap with the content. | ||
| - `DevvitWatermarkOverlay` places the watermark over the container it is wrapped around. This does not reduce the space available in the container, and the watermark overlaps with the content. | ||
|
|
||
| ## How to use | ||
|
|
||
| ### Step 1: Install Devvit Kit | ||
|
|
||
| Open your project folder in the terminal app. | ||
|
|
||
| Run `npm install @devvit/kit --save` | ||
|
|
||
| ### Step 2: Import the `DevvitWatermarkWrapper` or `DevvitWatermarkOverlay` component | ||
|
|
||
| Add the line `import { DevvitWatermarkWrapper } from '@devvit/kit';` in the beginning of the component file. | ||
|
|
||
| ### Step 3: Use the watermark in your app | ||
|
|
||
| Wrap the `DevToolbarWrapper` around the top element of your root component, like this: | ||
|
|
||
| ```typescript jsx | ||
| return ( | ||
| <DevvitWatermarkWrapper appName="my-cool-app" developer="username"> | ||
| <hstack width={100} height={100}> | ||
| ... | ||
| </hstack> | ||
| </DevvitWatermarkWrapper> | ||
| ); | ||
| ``` | ||
|
|
||
| Make sure that `appName` matches the `name` in the `devvit.yaml` in your project folder and `developer` matches your Reddit username |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters