Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

doc: docs compile #211

Merged
merged 2 commits into from
Jan 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules
lib
docs

base64.js
112 changes: 90 additions & 22 deletions README.MD
Original file line number Diff line number Diff line change
Expand Up @@ -34,20 +34,26 @@
* [React Native](#react-native)
* [Expo](#expo)
* [Compatibility](#compatibility)
* [Usage](#usage)
* [Text background fit](#text-background-fit)
* [Text background stretchX](#text-background-stretchx)
* [Text background stretchY](#text-background-stretchy)
* [Text background border radius](#text-background-border-radius)
* [Text with shadow](#text-with-shadow)
* [Multiple text watermarks](#multiple-text-watermarks)
* [Text rotation](#text-rotation)
* [Icon watermarks](#icon-watermarks)
* [Multiple icon watermarks](#multiple-icon-watermarks)
* [Background rotation](#background-rotation)
* [Icon rotation](#icon-rotation)
* [Transparent background](#transparent-background)
* [Transparent icon](#transparent-icon)

* <details>
<summary><a href="#usage">Usage</a></summary>

* [Text background fit](#text-background-fit)
* [Text background stretchX](#text-background-stretchx)
* [Text background stretchY](#text-background-stretchy)
* [Text background border radius](#text-background-border-radius)
* [Text with shadow](#text-with-shadow)
* [Multiple text watermarks](#multiple-text-watermarks)
* [Text rotation](#text-rotation)
* [Icon watermarks](#icon-watermarks)
* [Multiple icon watermarks](#multiple-icon-watermarks)
* [Background rotation](#background-rotation)
* [Icon rotation](#icon-rotation)
* [Transparent background](#transparent-background)
* [Transparent icon](#transparent-icon)

</details>

* [API](#api-6)
* [Save image to file](#save-image-to-file)
* [Contributors](#contributors)
Expand Down Expand Up @@ -133,6 +139,9 @@ npx expo prebuild

#### Example

<details>
<summary>example code</summary>

```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Expand Down Expand Up @@ -172,6 +181,7 @@ const options = {
Marker.markText(options);

```
</details>

### Text background stretchX

Expand All @@ -185,6 +195,9 @@ Marker.markText(options);

#### Example

<details>
<summary>example code</summary>

```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Expand Down Expand Up @@ -223,6 +236,7 @@ const options = {
};
Marker.markText(options);
```
</details>

### Text background stretchY

Expand All @@ -236,6 +250,9 @@ Marker.markText(options);

#### Example

<details>
<summary>example code</summary>

```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Expand Down Expand Up @@ -276,6 +293,8 @@ ImageMarker.markText(options);

```

</details>

### Text background border radius

#### API
Expand All @@ -288,6 +307,9 @@ ImageMarker.markText(options);

#### Example

<details>
<summary>example code</summary>

```typescript
import Marker, { Position } from "react-native-image-marker"
路路路
Expand Down Expand Up @@ -337,6 +359,8 @@ ImageMarker.markText(options);

```

</details>

### Text with shadow

#### API
Expand All @@ -349,6 +373,9 @@ ImageMarker.markText(options);

#### Example

<details>
<summary>example code</summary>

```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Expand Down Expand Up @@ -384,6 +411,8 @@ Marker.markText(options);

```

</details>

### Multiple text watermarks

#### Sample
Expand All @@ -392,6 +421,9 @@ Marker.markText(options);

#### Example

<details>
<summary>example code</summary>

```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Expand Down Expand Up @@ -433,18 +465,23 @@ Marker.markText({

```

</details>

### Text rotation

#### Sample

<p>
<img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/rotatetexts_1.png" width='300'>
<img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/textswihoutbg.png" width='300'>
<img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/rotatetexts.png" width='300'>
<p style="display: flex">
<img style="flex: 1" src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/rotatetexts_1.png" width='250'>
<img style="flex: 1; margin-left: 4px" src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/textswihoutbg.png" width='250'>
<img style="flex: 1; margin-left: 4px" src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/rotatetexts.png" width='250'>
</p>

#### Example

<details>
<summary>example code</summary>

```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Expand Down Expand Up @@ -493,6 +530,8 @@ Marker.markText({

```

</details>

### Icon watermarks

#### Sample
Expand All @@ -501,6 +540,9 @@ Marker.markText({

#### Example

<details>
<summary>example code</summary>

```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Expand All @@ -518,6 +560,7 @@ Marker.markImage({
})

```
</details>

### Multiple icon watermarks

Expand All @@ -533,6 +576,9 @@ Marker.markImage({

#### Example

<details>
<summary>example code</summary>

```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Expand Down Expand Up @@ -561,17 +607,22 @@ Marker.markImage({

```

</details>

### Background rotation

#### Sample

<p>
<img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/rotatebg.png" width='400'>
<img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/rotateimageicon.png" width='400'>
<p style="display:flex">
<img style="flex: 1" src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/rotatebg.png" width='400'>
<img style="flex: 1;margin-left: 8px" src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/rotateimageicon.png" style="" width='400'>
</p>

#### Example

<details>
<summary>example code</summary>

```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Expand Down Expand Up @@ -639,6 +690,8 @@ Marker.markText({

```

</details>

### Icon rotation

#### Sample
Expand All @@ -647,6 +700,9 @@ Marker.markText({

#### Example

<details>
<summary>example code</summary>

```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Expand All @@ -665,6 +721,8 @@ Marker.markImage({
});
```

</details>

### Transparent background

#### Sample
Expand All @@ -673,6 +731,9 @@ Marker.markImage({

#### Example

<details>
<summary>example code</summary>

```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Expand All @@ -691,6 +752,8 @@ Marker.markImage({
});
```

</details>

### Transparent icon

#### Sample
Expand All @@ -699,6 +762,9 @@ Marker.markImage({

#### Example

<details>
<summary>example code</summary>

```typescript
import Marker, { Position, TextBackgroundType } from "react-native-image-marker"
路路路
Expand All @@ -717,6 +783,8 @@ Marker.markImage({
});
```

</details>

## API

* [the latest version](https://jimmydaddy.github.io/react-native-image-marker/classes/Marker.html)
Expand All @@ -738,7 +806,7 @@ Marker.markImage({
[@gaoxiaosong](https://github.com/gaoxiaosong)
[@onka13](https://github.com/onka13)
[@OrangeFlavoredColdCoffee](https://github.com/OrangeFlavoredColdCoffee)
[@Dendi](https://github.com/vioku)
[@vioku](https://github.com/vioku)

## Examples

Expand Down
24 changes: 12 additions & 12 deletions docs/latest/assets/highlight.css
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
:root {
--light-hl-0: #AF00DB;
--dark-hl-0: #C586C0;
--light-hl-1: #000000;
--dark-hl-1: #D4D4D4;
--light-hl-2: #001080;
--dark-hl-2: #9CDCFE;
--light-hl-0: #008000;
--dark-hl-0: #6A9955;
--light-hl-1: #795E26;
--dark-hl-1: #DCDCAA;
--light-hl-2: #000000;
--dark-hl-2: #D4D4D4;
--light-hl-3: #A31515;
--dark-hl-3: #CE9178;
--light-hl-4: #0000FF;
--dark-hl-4: #569CD6;
--light-hl-5: #0070C1;
--dark-hl-5: #4FC1FF;
--light-hl-6: #008000;
--dark-hl-6: #6A9955;
--light-hl-7: #795E26;
--dark-hl-7: #DCDCAA;
--light-hl-5: #AF00DB;
--dark-hl-5: #C586C0;
--light-hl-6: #001080;
--dark-hl-6: #9CDCFE;
--light-hl-7: #0070C1;
--dark-hl-7: #4FC1FF;
--light-hl-8: #098658;
--dark-hl-8: #B5CEA8;
--light-hl-9: #EE0000;
Expand Down