Removing all the unneccessary items from our docs. We might need it later on. But we don't for now...

This commit is contained in:
Copple
2020-01-08 12:51:46 +08:00
parent 684524b43b
commit a050f9be2c
11 changed files with 524 additions and 718 deletions

View File

@@ -0,0 +1,12 @@
#### 400 Bad request
An invalid syntax or configuration was sent.
#### 401 Unauthorized
Invalid credentials were provided.
#### 404 Not found
Requested resource cannot be found.
#### 500 Internal Server Error
The server was unable to encounter the situation it encountered.

View File

@@ -1,472 +0,0 @@
---
id: filters
title: 'Query Filters'
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
We will be using this table as reference for our examples:
```json
{
"companies":[
{ "name": "Pied Piper", "employeeCount": 10 },
{ "name": "Hooli", "employeeCount": 1000 },
{ "name": "Yao Net", "employeeCount": 100 },
{ "name": "See Food App", "employeeCount": null }
]
}
```
## Order
```js
order(columnName, ascending=false, nullsFirst=false)
```
Returns an ordered array of rows based on stated preferences.
### Method arguments
#### columnName
`required` string
Name of chosen column to base the order on.
#### ascending
`optional` boolean
Determines whether the order will be ascending or descending. Default value will be **false**.
#### nullsFirst
`optional` boolean
Determines whether null values will be displayed first or not. Default value will be **false**.
### Example
```js
supabase.get("companies").order("employeeCount", true, true)
```
The following will be returned with status code `200 OK`:
```json
[
{ "name": "See Food App", "employeeCount": null },
{ "name": "Pied Piper", "employeeCount": 10 },
{ "name": "Yao Net", "employeeCount": 100 },
{ "name": "Hooli", "employeeCount": 1000 }
]
```
---
## Range
```js
range(from, to?)
```
Returns an array of rows based on specified range and position of rows with regards to the table.
### Method arguments
#### from
`required` integer
Index or position of the start of the specified range.
#### to
`optional` integer
Index or position of the end of the specified range. If not stated, all remaining rows after the starting index will be returned.
### Example
#### With both `from` and `to` specified
```js
supabase.get("companies").range(0,2)
```
The following will be returned with status code `200 OK`:
```json
[
{ "name": "Pied Piper", "employeeCount": 10 },
{ "name": "Hooli", "employeeCount": 1000 },
{ "name": "Yao Net", "employeeCount": 100 }
]
```
#### With `from` only specified
```js
supabase.get("companies").range(1)
```
The following will be returned with status code `200 OK`:
```json
[
{ "name": "Yao Net", "employeeCount": 100 },
{ "name": "See Food App", "employeeCount": null }
]
```
---
## Single
```js
single()
```
Returns the first row of the table as an object and **not** as an array.
### Example
```js
supabase.get("companies").single()
```
The following will be returned with status code `200 OK`:
```json
{ "name": "Pied Piper", "employeeCount": 10 }
```
---
## Match
```js
match(filterObject)
```
Returns an array of rows that exactly match the specified filterObject.
### Method arguments
#### filterObject
`required` object
Object contains column names and the desired values.
### Example
#### Generic
```js
supabase.get("companies").match({ "name": "Pied Piper", "employeeCount": 10 })
```
The following will be returned with status code `200 OK`:
```json
[
{ "name": "Pied Piper", "employeeCount": 10 }
]
```
#### No matches
```js
supabase.get("companies").match({ "name": "Pied Piper", "employeeCount": 50 })
```
The following will be returned with status code `200 OK`:
```json
[]
```
---
# Advanced Filtering
## Equals
```js
eq(columnName, filterValue)
```
Returns an array of rows whose value on the stated columnName exactly matches the specified filterValue.
### Method arguments
#### columnName
`required` string
Name of chosen column to base the match on.
#### filterValue
`required`
Value to match. Data type is dependent on the columnName specified.
### Example
```js
supabase.get("companies").eq("name", "Hooli")
```
The following will be returned with status code `200 OK`:
```json
[
{ "name": "Hooli", "employeeCount": 1000 }
]
```
---
## Greater Than
```js
gt(columnName, filterValue)
```
Returns an array of rows whose value on the stated columName is greater than the specified filterValue.
### Method arguments
#### columnName
`required` string
Name of chosen column to base the comparison on.
#### filterValue
`required`
Value to compare to. Data type is dependent on the columnName specified.
### Example
```js
supabase.get("companies").gt("employeeCount", 10)
```
The following will be returned with status code `200 OK`:
```json
[
{ "name": "Hooli", "employeeCount": 1000 },
{ "name": "Yao Net", "employeeCount": 100 }
]
```
---
## Less Than
```js
lt(columnName, filterValue)
```
Returns an array of rows whose value on the stated columnName is less than the specified filterValue.
### Method arguments
#### columnName
`required` string
Name of chosen column to base the comparison on.
#### filterValue
`required`
Value to compare to. Data type is dependent on the columnName specified.
### Example
```js
supabase.get("companies").lt("employeeCount", "1000")
```
The following will be returned with status code `200 OK`:
```json
[
{ "name": "Pied Piper", "employeeCount": 10 },
{ "name": "Yao Net", "employeeCount": 100 }
]
```
---
## Greater Than or Equal
```js
gte(columnName, filterValue)
```
Returns an array of rows whose value on the stated columName is greater than or equal to the specified filterValue.
### Method arguments
#### columnName
`required` string
Name of chosen column to base the comparison on.
#### filterValue
`required`
Value to compare to. Data type is dependent on the columnName specified.
### Example
```js
supabase.get("companies").gte("employeeCount", 10)
```
The following will be returned with status code `200 OK`:
```json
[
{ "name": "Pied Piper", "employeeCount": 10 },
{ "name": "Hooli", "employeeCount": 1000 },
{ "name": "Yao Net", "employeeCount": 100 }
]
```
---
## Less Than or Equal
```js
lte(columnName, filterValue)
```
Returns an array of rows whose value on the stated columnName is less than or equal to the specified filterValue.
### Method arguments
#### columnName
`required` string
Name of chosen column to base the comparison on.
#### filterValue
`required`
Value to compare to. Data type is dependent on the columnName specified.
### Example
```js
supabase.get("companies").lte("employeeCount", "1000")
```
The following will be returned with status code `200 OK`:
```json
[
{ "name": "Pied Piper", "employeeCount": 10 },
{ "name": "Hooli", "employeeCount": 1000 },
{ "name": "Yao Net", "employeeCount": 100 }
]
```
---
## Like
```js
like(columnName, stringPattern)
```
Returns an array of rows whose value in the stated columnName matches the supplied pattern.
### Method arguments
#### columnName
`required` string
Name of chosen column to base the comparison on.
#### stringPattern
`required` string
String pattern to compare to. A comprehensive guide on how to form proper patterns can be found [here](https://www.postgresql.org/docs/current/functions-matching.html).
### Example
```js
supabase.get("companies").like("name", "%ao%")
```
The following will be returned with status code `200 OK`:
```json
[
{ "name": "Yao Net", "employeeCount": 100 }
]
```
---
## Ilike
```js
ilike(columnName, filterValue)
```
A case-insensitive version of [like(columnName, filterValue)](../library/filters#like).
### Method arguments
#### columnName
`required` string
Name of chosen column to base the match on.
#### stringPattern
`required` string
String pattern to compare to. A comprehensive guide on how to form patterns can be found [here](https://www.postgresql.org/docs/current/functions-matching.html).
### Example
#### Using like
```js
supabase.get("companies").like("name", "_pi%")
```
The following will be returned with status code `200 OK`:
```json
[]
```
#### Using ilike
```js
supabase.get("companies").ilike("name", "_pi%")
```
The following will be returned with status code `200 OK`:
```json
[
{ "name": "Pied Piper", "employeeCount": 10}
]
```
---
## Is
```js
is(columnName, filterValue)
```
A check for exact equality (**null**, **true**, **false**), returns an array of rows whose value on the stated columnName exactly match the specified filterValue.
### Method arguments
#### columnName
`required` string
Name of chosen column to base the match on.
#### filterValue
`required` boolean **OR** null
Value to match.
### Example
```js
supabase.get("companies").is("employeeCount", null)
```
The following will be returned with status code `200 OK`:
```json
[
{ "name": "See Food App", "employeeCount": null }
]
```
---
## In
```js
in(columnName, filterArray)
```
Returns an array of rows whose value on the stated columnName is found on the specified filterArray.
### Method arguments
#### columnName
`required` string
Name of chosen column to base the match on.
#### filterArray
`required` array
Array of values to find a match. Data type of values is dependent on the columnName specified.
### Example
```js
supabase.get("companies").in("name", ["Hooli", "Pied Piper", "Google"])
```
The following will be returned with status code `200 OK`:
```json
[
{ "name": "Pied Piper", "employeeCount": 10 },
{ "name": "Hooli", "employeeCount": 1000 }
]
```
---
## Not
```js
not(columnName, filterValue)
```
Returns of array of rows whose value on the stated columnName is **not** equal to the specified value.
### Method arguments
#### columnName
`required` string
Name of chosen column to base the match on.
#### filterValue
`required`
Value to **not** match. Data type is dependent on the columnName specified.
### Example
```js
supabase.get("companies").not("name", "See Food App")
```
The following will be returned with status code `200 OK`:
```json
[
{ "name": "Pied Piper", "employeeCount": 10 },
{ "name": "Hooli", "employeeCount": 1000 },
{ "name": "Yao Net", "employeeCount": 100 }
]
```

View File

@@ -6,6 +6,8 @@ title: 'Reading your data'
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import DummyData from '../common/DummyData.mdx'
import CommonResponses from '../common/CommonResponses.mdx'
import Collapsable from '../../src/components/Collapsable'
We will be using these tables as reference for our examples:
@@ -32,6 +34,10 @@ const getCities = async () => {
}
```
<details>
<summary>Show response</summary>
<div>
Calling `getCities()` will return the following response:
```json
@@ -45,6 +51,9 @@ Calling `getCities()` will return the following response:
]
```
</div>
</details>
### Getting specific columns
Get all cities but only return the name.
@@ -67,6 +76,10 @@ const getCities = async () => {
}
```
<details>
<summary><b>Show response</b></summary>
<div>
Calling `getCities()` will return the following response:
```json
@@ -80,6 +93,9 @@ Calling `getCities()` will return the following response:
]
```
</div>
</details>
### Query foreign tables
Get all users and return all information about them and the companies they belong to.
@@ -109,8 +125,8 @@ const getCountries = async () => {
<details>
<summary><b>Show response</b></summary>
<div>
<summary><b>Show response</b></summary>
<div>
Calling `getCountries()` will return the following response:
@@ -155,88 +171,448 @@ Calling `getCountries()` will return the following response:
]
```
</div>
</div>
</details>
## Reference
---
---
---
--
```js
supabase.get(tableName, options?)
### `get()`
<!-- prettier-ignore -->
```js {2}
supabase
.get(tableName)
```
Given the `options?` set (if any), this **asynchronously** gets all rows from the specified `tableName` in your database.
## Method arguments
### tableName
`required` string
##### tableName `:string`
Name of table in the database that will be read from.
### options
`optional` object
All available options and examples it their usage can be found [here](../library/options).
----
## Additional filtering
### `select()`
### Select
```js
select(columnQuery)
<!-- prettier-ignore -->
```js {3}
supabase
.get(tableName)
.select(columnNames)
```
Returns an array of rows with only columns specified in `columnQuery`.
#### Method arguments
##### columnQuery
`required` array
##### columnName `:string`
Select only the specified columns. For example `select('id, name')`. Similar to a GraphQL, if a foreign key constraint exists between this table
and another, information from the other table can be requested as well. For example:
<!-- prettier-ignore -->
```js
// From the 'users' table
;`
Id,
fullName,
companyId
`
```
String containing column names that are found in the table. The pattern/ syntax would be as shown above.
If a foreign key constraint exists between this table and another, information from
the other table can be requested as well. The pattern/ syntax is shown below:
```js
// From the 'users' table
;`
fullName,
companies {
supabase
.get('countries')
.select(`
name,
employeeCount
}
`
cities {
name,
population
}
`)
```
Instead of stating the column name with the foreign key constraint, the name of the other table is mentioned instead
along with the desired column names from that table.
##### Example
----
### `order()`
<!-- prettier-ignore -->
```js {3}
supabase
.get(tableName)
.order(columnName, sortAscending, nullsFirst)
```
Orders your data before fetching.
##### columnName `:string`
Name of chosen column to base the order on.
##### sortAscending `:boolean? | Default is false`
Specifies whether the order will be ascending or descending.
##### nullsFirst `:boolean? | Default is false`
Specifies whether null values will be displayed first.
----
### `range()`
<!-- prettier-ignore -->
```js {3}
supabase
.get(tableName)
.range(fromIndex, toIndex)
```
Paginates your request.
##### fromIndex `:integer`
Index or position of the start of the specified range.
##### toIndex `:integer?`
Index or position of the end of the specified range. If not stated, all remaining rows after the starting index will be returned.
----
### `single()`
<!-- prettier-ignore -->
```js {3}
supabase
.get(tableName)
.single()
```
Returns the first row of the table as an object and **not** as an array.
----
### `match()`
<!-- prettier-ignore -->
```js {3}
supabase
.get(tableName)
.match(filterObject)
```
Returns an array of rows that exactly match the specified filterObject.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js
supabase
.get('countries')
.match({ 'continent': 'Asia'})
```
</Collapsable>
##### filterObject `:object`
An object of `{ 'columnName': 'criteria' }`
----
### `eq()`
<!-- prettier-ignore -->
```js {3}
supabase
.get(tableName)
.eq(columnName, filterValue)
```
"Equals": Returns an array of rows whose value on the stated columnName exactly matches the specified filterValue.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js
supabase
.get('countries')
.eq('name', 'New Zealand')
```
</Collapsable>
##### columnName `:string`
Name of database column.
##### filterValue `{:string|:integer|:boolean}`
Value to match.
----
### `gt()`
<!-- prettier-ignore -->
```js {3}
supabase
.get(tableName)
.gt(columnName, filterValue)
```
"Greater Than": Returns an array of rows whose value on the stated columnName exactly matches the specified filterValue.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js
supabase
.get('countries')
.gt('id', 20)
```
</Collapsable>
##### columnName `:string`
Name of database column.
##### filterValue `{:string|:integer|:boolean}`
Value to compare to.
----
### `lt()`
<!-- prettier-ignore -->
```js {3}
supabase
.get(tableName)
.lt(columnName, filterValue)
```
"Less Than": Returns an array of rows whose value on the stated columnName is less than the specified filterValue.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js
supabase
.get('countries')
.lt('id', 20)
```
</Collapsable>
##### columnName `:string`
Name of database column.
##### filterValue `{:string|:integer|:boolean}`
Value to compare to.
----
### `gte()`
<!-- prettier-ignore -->
```js {3}
supabase
.get(tableName)
.gte(columnName, filterValue)
```
"Greater Than or Equal": Returns an array of rows whose value on the stated columName is greater than or equal to the specified filterValue.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js
supabase
.get('countries')
.gte('id', 20)
```
</Collapsable>
##### columnName `:string`
Name of database column.
##### filterValue `{:string|:integer|:boolean}`
Value to compare to.
----
### `lte()`
<!-- prettier-ignore -->
```js {3}
supabase
.get(tableName)
.lte(columnName, filterValue)
```
"Less Than or Equal": Returns an array of rows whose value on the stated columnName is less than or equal to the specified filterValue.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js
supabase
.get('countries')
.gte('id', 20)
```
</Collapsable>
##### columnName `:string`
Name of database column.
##### filterValue `{:string|:integer|:boolean}`
Value to compare to.
----
### `like()`
<!-- prettier-ignore -->
```js {3}
supabase
.get(tableName)
.like(columnName, stringPattern)
```
Returns an array of rows whose value in the stated columnName matches the supplied pattern.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js
supabase
.get('countries')
.like('name', '%United%')
```
</Collapsable>
##### columnName `:string`
Name of database column.
##### stringPattern `:string`
String pattern to compare to. A comprehensive guide on how to form proper patterns can be found [here](https://www.postgresql.org/docs/current/functions-matching.html).
----
### `ilike()`
<!-- prettier-ignore -->
```js {3}
supabase
.get(tableName)
.ilike(columnName, stringPattern)
```
A case-insensitive version of `like()`.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js
supabase
.get('countries')
.ilike('name', '%united%')
```
</Collapsable>
##### columnName `:string`
Name of database column.
##### stringPattern `:string`
String pattern to compare to. A comprehensive guide on how to form proper patterns can be found [here](https://www.postgresql.org/docs/current/functions-matching.html).
----
### `is()`
<!-- prettier-ignore -->
```js {3}
supabase
.get(tableName)
.is(columnName, stringPattern)
```
A check for exact equality (**null**, **true**, **false**), returns an array of rows whose value on the stated columnName exactly match the specified filterValue.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js
supabase
.get('countries')
.is('name', null)
```
</Collapsable>
##### columnName `:string`
Name of database column.
##### stringPattern `{:null|:boolean}`
Value to match.
----
### `in()`
<!-- prettier-ignore -->
```js {3}
supabase
.get(tableName)
.is(columnName, filterArray)
```
Returns an array of rows whose value on the stated columnName is found on the specified filterArray.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js
supabase
.get('countries')
.in('name', ['China', 'France'])
```
</Collapsable>
##### columnName `:string`
Name of database column.
##### filterArray `:array`
Array of values to find a match. Data type of values is dependent on the columnName specified.
----
### `not()`
<!-- prettier-ignore -->
```js {3}
supabase
.get(tableName)
.not(columnName, filterValue)
```
Returns an array of rows whose value on the stated columnName is found on the specified filterArray.
<Collapsable title="Toggle Example">
<!-- prettier-ignore -->
```js
supabase
.get('countries')
.not('name', 'China')
```
</Collapsable>
##### columnName `:string`
Name of database column.
##### filterValue `{:string|:integer|:boolean}`
Value to **not** match.
----
Click [here](../library/get#using-select) to view some examples.
### Common Filters
Other common filters can be found [here](../library/filters).
## Responses
Aside from the status code `200 OK`, other common responses can be found [here](../library/responses).
#### 200 OK
Successful request
<CommonResponses />

View File

@@ -18,7 +18,7 @@ yarn install @supabase/supabase-js
```js
import { createClient } from '@supabase/supabase-js'
// Create a single supbase client for interacting with your database
// Create a single supabase client for interacting with your database
const supabase = createClient("https://xyzcompany.supabase.io", "1a2b-3c4d-5e6f-7g8h");
```

View File

@@ -1,146 +0,0 @@
---
id: options
title: 'Available Options'
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
A list of all available options that can be specified under the `options?` parameter.
## headers
`optional` object
Custom headers to be sent. A complete list of headers can be found [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers).
### Example
<Tabs
defaultValue="nodeJs"
values={[
{ label: 'Node.js', value: 'nodeJs', },
{ label: 'Python', value: 'py', },
]
}>
<TabItem value="nodeJs">
```js {9-14}
const postUsers = async () => {
try {
let users = await supabase
.post(
"users",
[
{ name: "Nelson Bighetti" },
],
{
headers:{
"Content-Type": "application/x-www-form-urlencoded"
"X-requested-With": "XMLHttpRequest"
}
}
)
return users
} catch (error) {
console.log('Error:', error)
}
}
```
</TabItem>
<TabItem value="py">
```py
# TODO
```
</TabItem>
</Tabs>
---
## withCredentials
`optional` boolean
Determines the ability to send cookies from origin.
### Example
Setting withCredentials with value **true** allows the request to send cookies from origin
<Tabs
defaultValue="nodeJs"
values={[
{ label: 'Node.js', value: 'nodeJs', },
{ label: 'Python', value: 'py', },
]
}>
<TabItem value="nodeJs">
```js {9}
const postUsers = async () => {
try {
let users = await supabase
.post(
"users",
[
{ name: "Nelson Bighetti" },
],
{ withCredentials: true }
)
return users
} catch (error) {
console.log('Error:', error)
}
}
```
</TabItem>
<TabItem value="py">
```py
# TODO
```
</TabItem>
</Tabs>
---
## timeout
`optional` integer
Specifies the amount of time in milliseconds before the request times out.
### Example
Setting a timeout of value 5000 will cause the request to time out after 5000 milliseconds.
<Tabs
defaultValue="nodeJs"
values={[
{ label: 'Node.js', value: 'nodeJs', },
{ label: 'Python', value: 'py', },
]
}>
<TabItem value="nodeJs">
```js {9}
const postUsers = async () => {
try {
let users = await supabase
.post(
"users",
[
{ name: "Nelson Bighetti" },
],
{ timeout: 5000 }
)
return users
} catch (error) {
console.log('Error:', error)
}
}
```
</TabItem>
<TabItem value="py">
```py
# TODO
```
</TabItem>
</Tabs>

View File

@@ -1,16 +0,0 @@
---
id: responses
title: 'Common Responses'
---
## 400 Bad request
An invalid syntax or configuration was sent.
<!-- ## 401 Unauthorized
Either authentication is required or invalid credentials were provided under the [`auth` object](https://google.com). -->
## 404 Not found
Requested resource cannot be found.
## 500 Internal Server Error
The server was unable to encounter the situation it encountered.

View File

@@ -101,6 +101,39 @@ const listener = supabase
.join()
```
### Listening to multiple events
<!-- prettier-ignore -->
```js {9-10}
import { createClient } from '@supabase/supabase-js'
// Create a single supabase client for interacting with your database
const supabase = createClient('https://world.supabase.io', '1a2b-3c4d-5e6f-7g8h')
// Listen to changes
const listener = supabase
.subscribe('countries')
.on('INSERT', handleRecordInserted)
.on('DELETE', handleRecordDeleted)
.join()
```
### Unsubscribing
<!-- prettier-ignore -->
```js {10}
import { createClient } from '@supabase/supabase-js'
// Create a single supabase client for interacting with your database
const supabase = createClient('https://world.supabase.io', '1a2b-3c4d-5e6f-7g8h')
// Listen to changes
const myListener = supabase.subscribe('countries')
// Unsubscribe from changes
supabase.unsubscribe(myListener)
```
@@ -139,17 +172,31 @@ supabase
supabase
.subscribe('tableName')
.join()
.on('eventName', callbackFunction)
.on('eventType', callbackFunction)
```
###### eventType `:string {INSERT|UPDATE|DELETE|*}`
The database event which you would like to receive updates for, or you can use the special wildcard `*` to listen to all changes.
###### eventName `REQUIRED`
Can be either a table in your database, or you can use the special wildcard `*` to listen to all changes.
###### callbackFunction `REQUIRED`
###### callbackFunction `:function`
A callback that will handle the payload that is sent whenever your database changes. See all Change Events below to understand all the possible payloads.
----
### `unsubscribe()`
<!-- prettier-ignore -->
```js {2}
supabase
.unsubscribe(yourSubscription)
```
###### yourSubscription `:subscription`
A listener that was previously created.
----
## Change Events

View File

@@ -17,10 +17,7 @@ module.exports = {
"library/post",
"library/get",
"library/patch",
"library/delete",
"library/filters",
"library/options",
"library/responses"
"library/delete"
],
Guides:[
"guides/examples"

View File

@@ -1,5 +1,12 @@
import React from 'react'
export default function Collapsable({ children }) {
return <div>{children}</div>
export default function Collapsable({ title, children }) {
return (
<details className="Collapsable">
<summary>
{title}
</summary>
<div>{children}</div>
</details>
)
}

View File

@@ -462,7 +462,10 @@ div[class^='sidebar_'] .menu__link.menu__link--active:not(.menu__link--sublist)
.DummyData div{
padding-right: 10px;
}
summary:hover {
.Collapsable summary {
font-size: 0.9rem;
margin-bottom:20px;
}
.Collapsable summary:hover {
cursor: pointer;
}

View File

@@ -1,13 +1,11 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="512" height="512" rx="100" fill="white"/>
<rect x="41" y="41" width="430" height="430" rx="80" fill="#1F1F1F"/>
<path d="M286.909 92.4831C286.909 85.5889 281.322 80 274.431 80C271.004 80 267.9 81.382 265.645 83.6192L263.912 85.548L167.675 215.658H263.18L286.429 96.0055L286.853 93.6682C286.89 93.2781 286.909 92.8828 286.909 92.4831Z" fill="#3ECF8E"/>
<path d="M133 269.336C133 280.366 141.939 289.308 152.965 289.308L153.053 289.308H248.87L263.18 215.658H167.675L138.736 254.783L136.872 257.512C134.438 260.822 133 264.911 133 269.336Z" fill="#3ECF8E"/>
<path d="M378 235.631C378 224.6 369.061 215.658 358.035 215.658H357.245H263.18L248.87 289.308H343.202L373.604 248.205L374.817 246.455C376.831 243.337 378 239.62 378 235.631Z" fill="#3ECF8E"/>
<path d="M225.533 410.517C225.533 417.411 231.119 423 238.011 423C241.706 423 245.027 421.393 247.311 418.839L247.803 418.285L343.202 289.308H248.87L225.985 407.089L225.924 407.405C225.668 408.4 225.533 409.443 225.533 410.517Z" fill="#3ECF8E"/>
<path d="M225.533 410.517C225.533 417.411 231.119 423 238.011 423C241.706 423 245.027 421.393 247.311 418.839L247.803 418.285L343.202 289.308H248.87L225.985 407.089L225.924 407.405C225.668 408.4 225.533 409.443 225.533 410.517Z" fill="url(#paint0_linear)"/>
<svg width="375" height="375" viewBox="0 0 375 375" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M218.909 28.4831C218.909 21.5889 213.322 16 206.431 16C203.004 16 199.9 17.382 197.645 19.6192L195.912 21.548L99.675 151.658H195.18L218.429 32.0055L218.853 29.6682C218.89 29.2781 218.909 28.8828 218.909 28.4831Z" fill="#3ECF8E"/>
<path d="M65 205.336C65 216.366 73.9385 225.308 84.9647 225.308L85.053 225.308H180.87L195.18 151.658H99.675L70.736 190.783L68.8725 193.512C66.4382 196.822 65 200.911 65 205.336Z" fill="#3ECF8E"/>
<path d="M310 171.631C310 160.6 301.061 151.658 290.035 151.658H289.245H195.18L180.87 225.308H275.202L305.604 184.205L306.817 182.455C308.831 179.337 310 175.62 310 171.631Z" fill="#3ECF8E"/>
<path d="M157.533 346.517C157.533 353.411 163.119 359 170.011 359C173.706 359 177.027 357.393 179.311 354.839L179.803 354.285L275.202 225.308H180.87L157.985 343.089L157.924 343.405C157.668 344.4 157.533 345.443 157.533 346.517Z" fill="#3ECF8E"/>
<path d="M157.533 346.517C157.533 353.411 163.119 359 170.011 359C173.706 359 177.027 357.393 179.311 354.839L179.803 354.285L275.202 225.308H180.87L157.985 343.089L157.924 343.405C157.668 344.4 157.533 345.443 157.533 346.517Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="304" y1="301" x2="235" y2="423" gradientUnits="userSpaceOnUse">
<linearGradient id="paint0_linear" x1="236" y1="237" x2="167" y2="359" gradientUnits="userSpaceOnUse">
<stop stop-color="#23915F"/>
<stop offset="1" stop-color="#3ECF8E" stop-opacity="0"/>
</linearGradient>

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB