Socket
Socket
Sign inDemoInstall

remark-frontmatter

Package Overview
Dependencies
Maintainers
2
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

remark-frontmatter - npm Package Compare versions

Comparing version 4.0.1 to 5.0.0

lib/index.d.ts

17

index.d.ts

@@ -1,15 +0,2 @@

/**
* Plugin to add support for frontmatter.
*
* @type {import('unified').Plugin<[Options?]|void[], Root>}
*/
export default function remarkFrontmatter(
options?:
| void
| import('micromark-extension-frontmatter/matters').Options
| undefined
):
| void
| import('unified').Transformer<import('mdast').Root, import('mdast').Root>
export type Root = import('mdast').Root
export type Options = import('micromark-extension-frontmatter').Options
export { default } from "./lib/index.js";
export type Options = import('./lib/index.js').Options;
/**
* @typedef {import('mdast').Root} Root
* @typedef {import('micromark-extension-frontmatter').Options} Options
* @typedef {import('./lib/index.js').Options} Options
*/
import {frontmatter} from 'micromark-extension-frontmatter'
import {
frontmatterFromMarkdown,
frontmatterToMarkdown
} from 'mdast-util-frontmatter'
/**
* Plugin to add support for frontmatter.
*
* @type {import('unified').Plugin<[Options?]|void[], Root>}
*/
export default function remarkFrontmatter(options = 'yaml') {
const data = this.data()
add('micromarkExtensions', frontmatter(options))
add('fromMarkdownExtensions', frontmatterFromMarkdown(options))
add('toMarkdownExtensions', frontmatterToMarkdown(options))
/**
* @param {string} field
* @param {unknown} value
*/
function add(field, value) {
const list = /** @type {unknown[]} */ (
// Other extensions
/* c8 ignore next 2 */
data[field] ? data[field] : (data[field] = [])
)
list.push(value)
}
}
export {default} from './lib/index.js'
{
"name": "remark-frontmatter",
"version": "4.0.1",
"version": "5.0.0",
"description": "remark plugin to support frontmatter (yaml, toml, and more)",
"license": "MIT",
"keywords": [
"unified",
"frontmatter",
"markdown",
"mdast",
"plugin",
"remark",
"remark-plugin",
"plugin",
"mdast",
"markdown",
"frontmatter",
"yaml",
"toml"
"toml",
"unified",
"yaml"
],

@@ -31,5 +31,5 @@ "repository": "remarkjs/remark-frontmatter",

"type": "module",
"main": "index.js",
"types": "index.d.ts",
"exports": "./index.js",
"files": [
"lib/",
"index.d.ts",

@@ -39,53 +39,39 @@ "index.js"

"dependencies": {
"@types/mdast": "^3.0.0",
"mdast-util-frontmatter": "^1.0.0",
"micromark-extension-frontmatter": "^1.0.0",
"unified": "^10.0.0"
"@types/mdast": "^4.0.0",
"mdast-util-frontmatter": "^2.0.0",
"micromark-extension-frontmatter": "^2.0.0",
"unified": "^11.0.0"
},
"devDependencies": {
"@types/tape": "^4.0.0",
"c8": "^7.0.0",
"@types/node": "^20.0.0",
"c8": "^8.0.0",
"is-hidden": "^2.0.0",
"prettier": "^2.0.0",
"remark": "^14.0.0",
"remark-cli": "^10.0.0",
"prettier": "^3.0.0",
"remark": "^15.0.0",
"remark-cli": "^11.0.0",
"remark-preset-wooorm": "^9.0.0",
"rimraf": "^3.0.0",
"tape": "^5.0.0",
"to-vfile": "^7.0.0",
"type-coverage": "^2.0.0",
"typescript": "^4.0.0",
"xo": "^0.45.0"
"typescript": "^5.0.0",
"vfile": "^6.0.0",
"xo": "^0.56.0"
},
"scripts": {
"build": "rimraf \"test/**/*.d.ts\" \"*.d.ts\" && tsc && type-coverage",
"format": "remark . -qfo --ignore-pattern test/ && prettier . -w --loglevel warn && xo --fix",
"build": "tsc --build --clean && tsc --build && type-coverage",
"format": "remark . --frail --output --quiet && prettier . --log-level warn --write && xo --fix",
"prepack": "npm run build && npm run format",
"test": "npm run build && npm run format && npm run test-coverage",
"test-api": "node --conditions development test/index.js",
"test-coverage": "c8 --check-coverage --branches 100 --functions 100 --lines 100 --statements 100 --reporter lcov npm run test-api",
"test": "npm run build && npm run format && npm run test-coverage"
"test-coverage": "c8 --100 --reporter lcov npm run test-api"
},
"prettier": {
"tabWidth": 2,
"useTabs": false,
"bracketSpacing": false,
"singleQuote": true,
"bracketSpacing": false,
"semi": false,
"trailingComma": "none"
"tabWidth": 2,
"trailingComma": "none",
"useTabs": false
},
"xo": {
"prettier": true,
"ignores": [
"types/"
]
},
"remarkConfig": {
"plugins": [
[
"./index.js",
[
"yaml",
"toml"
]
],
"preset-wooorm"
"remark-preset-wooorm"
]

@@ -96,5 +82,18 @@ },

"detail": true,
"strict": true,
"ignoreCatch": true
"ignoreCatch": true,
"strict": true
},
"xo": {
"overrides": [
{
"files": [
"test/**/*.js"
],
"rules": {
"no-await-in-loop": "off"
}
}
],
"prettier": true
}
}

@@ -11,3 +11,3 @@ # remark-frontmatter

[**remark**][remark] plugin to support frontmatter (YAML, TOML, and more).
**[remark][]** plugin to support frontmatter (YAML, TOML, and more).

@@ -22,5 +22,10 @@ ## Contents

* [`unified().use(remarkFrontmatter[, options])`](#unifieduseremarkfrontmatter-options)
* [`Options`](#options)
* [Examples](#examples)
* [Example: custom marker](#example-custom-marker)
* [Example: custom fence](#example-custom-fence)
* [Example: different markers and fences](#example-different-markers-and-fences)
* [Example: frontmatter as metadata](#example-frontmatter-as-metadata)
* [Example: frontmatter in MDX](#example-frontmatter-in-mdx)
* [Authoring](#authoring)
* [HTML](#html)
* [CSS](#css)
* [Syntax](#syntax)

@@ -39,26 +44,29 @@ * [Syntax tree](#syntax-tree)

and other frontmatter.
You can use this to add support for parsing and serializing this syntax
extension.
unified is an AST (abstract syntax tree) based transform project.
**remark** is everything unified that relates to markdown.
The layer under remark is called mdast, which is only concerned with syntax
trees.
Another layer underneath is micromark, which is only concerned with parsing.
This package is a small wrapper to integrate all of these.
Frontmatter is a metadata format in front of the content.
It’s typically written in YAML and is often used with markdown.
This plugin follow how GitHub handles frontmatter.
GitHub only supports YAML frontmatter, but this plugin also supports different
flavors (such as TOML).
## When should I use this?
Frontmatter is a metadata format in front of content.
It’s typically written in YAML and is often used with markdown.
This mechanism works well when you want authors, that have some markup
You can use frontmatter when you want authors, that have some markup
experience, to configure where or how the content is displayed or supply
metadata about content.
Frontmatter does not work everywhere so it makes markdown less portable.
metadata about content, and know that the markdown is only used in places
that support frontmatter.
A good example use case is markdown being rendered by (static) site generators.
If you *just* want to turn markdown into HTML (with maybe a few extensions such
as frontmatter), we recommend [`micromark`][micromark] with
[`micromark-extension-frontmatter`][micromark-extension-frontmatter] instead.
If you don’t use plugins and want to access the syntax tree, you can use
[`mdast-util-from-markdown`][mdast-util-from-markdown] with
[`mdast-util-frontmatter`][mdast-util-frontmatter].
## Install
This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
In Node.js (12.20+, 14.14+, 16.0+), install with [npm][]:
This package is [ESM only][esm].
In Node.js (version 16+), install with [npm][]:

@@ -69,13 +77,13 @@ ```sh

In Deno with [Skypack][]:
In Deno with [`esm.sh`][esmsh]:
```js
import remarkFrontmatter from 'https://cdn.skypack.dev/remark-frontmatter@4?dts'
import remarkFrontmatter from 'https://esm.sh/remark-frontmatter@5'
```
In browsers with [Skypack][]:
In browsers with [`esm.sh`][esmsh]:
```html
<script type="module">
import remarkFrontmatter from 'https://cdn.skypack.dev/remark-frontmatter@4?min'
import remarkFrontmatter from 'https://esm.sh/remark-frontmatter@5?bundle'
</script>

@@ -86,38 +94,36 @@ ```

Say we have the following file, `example.md`:
Say our document `example.md` contains:
```markdown
+++
title = "New Website"
layout = "solar-system"
+++
# Other markdown
# Jupiter
```
And our module, `example.js`, looks as follows:
…and our module `example.js` contains:
```js
import {read} from 'to-vfile'
import {unified} from 'unified'
import remarkFrontmatter from 'remark-frontmatter'
import remarkParse from 'remark-parse'
import remarkFrontmatter from 'remark-frontmatter'
import remarkStringify from 'remark-stringify'
import {unified} from 'unified'
import {read} from 'to-vfile'
main()
async function main() {
const file = await unified()
.use(remarkParse)
.use(remarkStringify)
.use(remarkFrontmatter, ['yaml', 'toml'])
.use(() => (tree) => {
const file = await unified()
.use(remarkParse)
.use(remarkStringify)
.use(remarkFrontmatter, ['yaml', 'toml'])
.use(function () {
return function (tree) {
console.dir(tree)
})
.process(await read('example.md'))
}
})
.process(await read('example.md'))
console.log(String(file))
}
console.log(String(file))
```
Now, running `node example` yields:
…then running `node example.js` yields:

@@ -128,3 +134,3 @@ ```js

children: [
{type: 'toml', value: 'title = "New Website"', position: [Object]},
{type: 'toml', value: 'layout = "solar-system"', position: [Object]},
{type: 'heading', depth: 1, children: [Array], position: [Object]}

@@ -134,3 +140,3 @@ ],

start: {line: 1, column: 1, offset: 0},
end: {line: 6, column: 1, offset: 48}
end: {line: 6, column: 1, offset: 43}
}

@@ -142,6 +148,6 @@ }

+++
title = "New Website"
layout = "solar-system"
+++
# Other markdown
# Jupiter
```

@@ -152,52 +158,142 @@

This package exports no identifiers.
The default export is `remarkFrontmatter`.
The default export is [`remarkFrontmatter`][api-remark-frontmatter].
### `unified().use(remarkFrontmatter[, options])`
Configures remark so that it can parse and serialize frontmatter (YAML, TOML,
and more).
Doesn’t parse the data inside them: [create your own plugin][create-plugin] to
do that.
Add support for frontmatter.
##### `options`
###### Parameters
One `preset` or `Matter`, or an array of them, defining all the supported
frontmatters (default: `'yaml'`).
* `options` ([`Options`][api-options], default: `'yaml'`)
— configuration
##### `preset`
###### Returns
Either `'yaml'` or `'toml'`:
Nothing (`undefined`).
* `'yaml'` — `Matter` defined as `{type: 'yaml', marker: '-'}`
* `'toml'` — `Matter` defined as `{type: 'toml', marker: '+'}`
###### Notes
##### `Matter`
Doesn’t parse the data inside them:
[create your own plugin][unified-create-plugin] to do that.
An object with a `type` and either a `marker` or a `fence`:
### `Options`
* `type` (`string`)
— Type to tokenize as
* `marker` (`string` or `{open: string, close: string}`)
— Character used to construct fences.
By providing an object with `open` and `close` different characters can be
used for opening and closing fences.
For example the character `'-'` will result in `'---'` being used as the
fence
* `fence` (`string` or `{open: string, close: string}`)
— String used as the complete fence.
By providing an object with `open` and `close` different values can be used
for opening and closing fences.
This can be used too if fences contain different characters or lengths other
than 3
* `anywhere` (`boolean`, default: `false`)
– if `true`, matter can be found anywhere in the document.
If `false` (default), only matter at the start of the document is recognized
Configuration (TypeScript type).
###### Type
```ts
type Options = Array<Matter | Preset> | Matter | Preset
/**
* Sequence.
*
* Depending on how this structure is used, it reflects a marker or a fence.
*/
export type Info = {
/**
* Closing.
*/
close: string
/**
* Opening.
*/
open: string
}
/**
* Fence configuration.
*/
type FenceProps = {
/**
* Complete fences.
*
* This can be used when fences contain different characters or lengths
* other than 3.
* Pass `open` and `close` to interface to specify different characters for opening and
* closing fences.
*/
fence: Info | string
/**
* If `fence` is set, `marker` must not be set.
*/
marker?: never
}
/**
* Marker configuration.
*/
type MarkerProps = {
/**
* Character repeated 3 times, used as complete fences.
*
* For example the character `'-'` will result in `'---'` being used as the
* fence
* Pass `open` and `close` to specify different characters for opening and
* closing fences.
*/
marker: Info | string
/**
* If `marker` is set, `fence` must not be set.
*/
fence?: never
}
/**
* Fields describing a kind of matter.
*
* > 👉 **Note**: using `anywhere` is a terrible idea.
* > It’s called frontmatter, not matter-in-the-middle or so.
* > This makes your markdown less portable.
*
* > 👉 **Note**: `marker` and `fence` are mutually exclusive.
* > If `marker` is set, `fence` must not be set, and vice versa.
*/
type Matter = (MatterProps & FenceProps) | (MatterProps & MarkerProps)
/**
* Fields describing a kind of matter.
*/
type MatterProps = {
/**
* Node type to tokenize as.
*/
type: string
/**
* Whether matter can be found anywhere in the document, normally, only matter
* at the start of the document is recognized.
*
* > 👉 **Note**: using this is a terrible idea.
* > It’s called frontmatter, not matter-in-the-middle or so.
* > This makes your markdown less portable.
*/
anywhere?: boolean | null | undefined
}
/**
* Known name of a frontmatter style.
*/
type Preset = 'toml' | 'yaml'
```
## Examples
### Example: custom marker
### Example: different markers and fences
A custom frontmatter with different open and close markers, repeated 3 times,
that looks like this:
Here are a couple of example of different matter objects and what frontmatter
they match.
To match frontmatter with the same opening and closing fence, namely three of
the same markers, use for example `{type: 'yaml', marker: '-'}`, which matches:
```yaml
---
key: value
---
```
To match frontmatter with different opening and closing fences, which each use
three different markers, use for example
`{type: 'custom', marker: {open: '<', close: '>'}}`, which matches:
```text

@@ -207,55 +303,179 @@ <<<

>>>
# hi
```
…can be supported with:
To match frontmatter with the same opening and closing fences, which both use
the same custom string, use for example `{type: 'custom', fence: '+=+=+=+'}`,
which matches:
```js
// …
.use(remarkFrontmatter, {type: 'custom', marker: {open: '<', close: '>'}})
// …
```text
+=+=+=+
data
+=+=+=+
```
### Example: custom fence
To match frontmatter with different opening and closing fences, which each use
different custom strings, use for example
`{type: 'json', fence: {open: '{', close: '}'}}`, which matches:
A custom frontmatter with custom fences that are not repeated like this:
```text
```json
{
"key": "value"
}
```
# hi
### Example: frontmatter as metadata
This plugin handles the syntax of frontmatter in markdown.
It does not *parse* that frontmatter as say YAML or TOML and expose it
somewhere.
In unified, there is a place for metadata about files:
[`file.data`][vfile-file-data].
For frontmatter specifically, it’s customary to expose parsed data at `file.data.matter`.
We can make a plugin that does this.
This example uses the utility [`vfile-matter`][vfile-matter], which is specific
to YAML.
To support other data languages, look at this utility for inspiration.
`my-unified-plugin-handling-yaml-matter.js`:
```js
/**
* @typedef {import('unist').Node} Node
* @typedef {import('vfile').VFile} VFile
*/
import {matter} from 'vfile-matter'
/**
* Parse YAML frontmatter and expose it at `file.data.matter`.
*
* @returns
* Transform.
*/
export default function myUnifiedPluginHandlingYamlMatter() {
/**
* Transform.
*
* @param {Node} tree
* Tree.
* @param {VFile} file
* File.
* @returns {undefined}
* Nothing.
*/
return function (tree, file) {
matter(file)
}
}
```
…can be supported with:
…with an example markdown file `example.md`:
```markdown
---
key: value
---
# Venus
```
…and using the plugin with an `example.js` containing:
```js
// …
.use(remarkFrontmatter, {type: 'json', fence: {open: '{', close: '}'}})
// …
import remarkParse from 'remark-parse'
import remarkFrontmatter from 'remark-frontmatter'
import remarkStringify from 'remark-stringify'
import {read} from 'to-vfile'
import {unified} from 'unified'
import myUnifiedPluginHandlingYamlMatter from './my-unified-plugin-handling-yaml-matter.js'
const file = await unified()
.use(remarkParse)
.use(remarkStringify)
.use(remarkFrontmatter)
.use(myUnifiedPluginHandlingYamlMatter)
.process(await read('example.md'))
console.log(file.data.matter) // => {key: 'value'}
```
## Syntax
### Example: frontmatter in MDX
This plugin applies a micromark extensions to parse the syntax.
See its readme for how it works:
MDX has the ability to export data from it, where markdown does not.
When authoring MDX, you can write `export` statements and expose arbitrary data
through them.
It is also possible to write frontmatter, and let a plugin turn those into
export statements.
* [`micromark-extension-frontmatter`](https://github.com/micromark/micromark-extension-frontmatter)
To automatically turn frontmatter into export statements, use
[`remark-mdx-frontmatter`][remark-mdx-frontmatter].
The syntax supported depends on the given configuration.
With an `example.mdx` as follows:
## Syntax tree
```mdx
---
key: value
---
This plugin applies one mdast utility to build and serialize the AST.
See its readme for how it works:
# Mars
```
* [`mdast-util-frontmatter`](https://github.com/syntax-tree/mdast-util-directive)
This plugin can be used as follows:
The node types supported in the tree depend on the given configuration.
```js
import {compile} from '@mdx-js/mdx'
import remarkFrontmatter from 'remark-frontmatter'
import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
import {read, write} from 'to-vfile'
const file = await compile(await read('example.mdx'), {
remarkPlugins: [remarkFrontmatter, [remarkMdxFrontmatter, {name: 'matter'}]]
})
file.path = 'output.js'
await write(file)
const mod = await import('./output.js')
console.log(mod.matter) // => {key: 'value'}
```
## Authoring
When authoring markdown with frontmatter, it’s recommended to use YAML
frontmatter if possible.
While YAML has some warts, it works in the most places, so using it guarantees
the highest chance of portability.
In certain ecosystems, other flavors are widely used.
For example, in the Rust ecosystem, TOML is often used.
In such cases, using TOML is an okay choice.
When possible, do not use other types of frontmatter, and do not allow
frontmatter anywhere.
## HTML
Frontmatter does not relate to HTML elements.
It is typically stripped, which is what [`remark-rehype`][remark-rehype] does.
## CSS
This package does not relate to CSS.
## Syntax
See [*Syntax* in
`micromark-extension-frontmatter`](https://github.com/micromark/micromark-extension-frontmatter#syntax).
## Syntax tree
See [*Syntax tree* in
`mdast-util-frontmatter`](https://github.com/syntax-tree/mdast-util-frontmatter#syntax-tree).
## Types
This package is fully typed with [TypeScript][].
It exports the additional type [`Options`][api-options].
The YAML node type is supported in `@types/mdast` by default.

@@ -266,6 +486,7 @@ To add other node types, register them by adding them to

```ts
import type {Literal} from 'mdast'
import type {Data, Literal} from 'mdast'
interface TOML extends Literal {
interface Toml extends Literal {
type: 'toml'
data?: TomlData
}

@@ -275,4 +496,4 @@

interface FrontmatterContentMap {
// Allow using toml nodes defined by `remark-frontmatter`.
toml: TOML
// Allow using TOML nodes defined by `remark-frontmatter`.
toml: Toml
}

@@ -284,7 +505,10 @@ }

Projects maintained by the unified collective are compatible with all maintained
Projects maintained by the unified collective are compatible with maintained
versions of Node.js.
As of now, that is Node.js 12.20+, 14.14+, and 16.0+.
Our projects sometimes work with older versions, but this is not guaranteed.
When we cut a new major release, we drop support for unmaintained versions of
Node.
This means we try to keep the current release line, `remark-frontmatter@^5`,
compatible with Node.js 16.
This plugin works with unified 6+ and remark 13+.

@@ -294,5 +518,5 @@

Use of `remark-frontmatter` does not involve [**rehype**][rehype]
([**hast**][hast]) or user content so there are no openings for
[cross-site scripting (XSS)][xss] attacks.
Use of `remark-frontmatter` does not involve **[rehype][]** ([hast][]) or user
content so there are no openings for [cross-site scripting (XSS)][wiki-xss]
attacks.

@@ -304,6 +528,6 @@ ## Related

* [`remark-gfm`](https://github.com/remarkjs/remark-gfm)
— support GFM (autolink literals, strikethrough, tables, tasklists)
* [`remark-github`](https://github.com/remarkjs/remark-github)
— link references to commits, issues, pull-requests, and users, like on
GitHub
— support GFM (autolink literals, footnotes, strikethrough, tables,
tasklists)
* [`remark-mdx`](https://github.com/mdx-js/mdx/tree/main/packages/remark-mdx)
— support MDX (ESM, JSX, expressions)
* [`remark-directive`](https://github.com/remarkjs/remark-directive)

@@ -342,5 +566,5 @@ — support directives

[size-badge]: https://img.shields.io/bundlephobia/minzip/remark-frontmatter.svg
[size-badge]: https://img.shields.io/bundlejs/size/remark-frontmatter
[size]: https://bundlephobia.com/result?p=remark-frontmatter
[size]: https://bundlejs.com/?q=remark-frontmatter

@@ -359,11 +583,13 @@ [sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg

[skypack]: https://www.skypack.dev
[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
[esmsh]: https://esm.sh
[health]: https://github.com/remarkjs/.github
[contributing]: https://github.com/remarkjs/.github/blob/HEAD/contributing.md
[contributing]: https://github.com/remarkjs/.github/blob/main/contributing.md
[support]: https://github.com/remarkjs/.github/blob/HEAD/support.md
[support]: https://github.com/remarkjs/.github/blob/main/support.md
[coc]: https://github.com/remarkjs/.github/blob/HEAD/code-of-conduct.md
[coc]: https://github.com/remarkjs/.github/blob/main/code-of-conduct.md

@@ -374,14 +600,34 @@ [license]: license

[unified]: https://github.com/unifiedjs/unified
[mdast-util-from-markdown]: https://github.com/syntax-tree/mdast-util-from-markdown
[mdast-util-frontmatter]: https://github.com/syntax-tree/mdast-util-frontmatter
[micromark]: https://github.com/micromark/micromark
[micromark-extension-frontmatter]: https://github.com/micromark/micromark-extension-frontmatter
[hast]: https://github.com/syntax-tree/hast
[rehype]: https://github.com/rehypejs/rehype
[remark]: https://github.com/remarkjs/remark
[xss]: https://en.wikipedia.org/wiki/Cross-site_scripting
[remark-rehype]: https://github.com/remarkjs/remark-rehype
[remark-mdx-frontmatter]: https://github.com/remcohaszing/remark-mdx-frontmatter
[typescript]: https://www.typescriptlang.org
[rehype]: https://github.com/rehypejs/rehype
[unified]: https://github.com/unifiedjs/unified
[hast]: https://github.com/syntax-tree/hast
[unified-create-plugin]: https://unifiedjs.com/learn/guide/create-a-plugin/
[create-plugin]: https://unifiedjs.com/learn/guide/create-a-plugin/
[vfile-file-data]: https://github.com/vfile/vfile#filedata
[vfile-matter]: https://github.com/vfile/vfile-matter
[wiki-xss]: https://en.wikipedia.org/wiki/Cross-site_scripting
[api-options]: #options
[api-remark-frontmatter]: #unifieduseremarkfrontmatter-options
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc