Skip to content

Commit 257b15b

Browse files
yjoseyjose
committed
feat: add docs website
1 parent e8a000f commit 257b15b

File tree

22 files changed

+5549
-283
lines changed

22 files changed

+5549
-283
lines changed

‎README.md‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,32 @@
1-
![Input OTP Native](./demo.gif)
2-
3-
# Input OTP Native 🔐
4-
5-
One time passcode Input For React Native/Expo. Unstyled and fully customizable.
1+
<p align="center">
2+
<img alt="Input OTP Native" src="./demo.gif" />
3+
</p>
4+
<h1 align="center">
5+
Input OTP Native 🔐
6+
</h1>
7+
<p align="center">
8+
✨ One time passcode Input For React Native/Expo. Unstyled and fully customizable. ✨
9+
</p>
10+
11+
<p align="center">
12+
<a href="https://github.com/yjose/input-otp-native/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/yjose/input-otp-native/ci.yml?style=flat-square&label=Test&logo=github&color=32A9C3&labelColor=1B3C4A" alt="Test status"></a>
13+
<a href="https://www.npmjs.com/package/input-otp-native"><img src="https://img.shields.io/npm/v/input-otp-native.svg?style=flat-square&color=32A9C3&labelColor=1B3C4A" alt="version"></a>
14+
<a href="http://www.npmtrends.com/input-otp-native"><img src="https://img.shields.io/npm/dt/input-otp-native.svg?style=flat-square&color=32A9C3&labelColor=1B3C4A" alt="downloads"></a>
15+
<a href="https://github.com/yjose/input-otp-native/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/input-otp-native.svg?style=flat-square&color=32A9C3&labelColor=1B3C4A" alt="license"></a>
16+
<a href="https://github.com/yjose/input-otp-native/stargazers"><img src="https://img.shields.io/github/stars/yjose/input-otp-native.svg?style=flat-square&color=32A9C3&labelColor=1B3C4A" alt="Star on GitHub"></a>
17+
18+
</p>
19+
20+
<hr/>
621

722
## Features
823

924
- 📱 Built specifically for React Native/Expo
1025
- 🎨 Fully customizable styling with render props ( supports nativewind )
1126
- 📋 Four copy paste styles (Apple, Stripe, Revolt, Dashed)
1227
- 🧪 100% test coverage
13-
14-
## Installation
28+
- 🔄 Easily animated with react-native-reanimated
29+
- 🌐 Web support with using `otp-input`
1530

1631
```sh
1732
## npm
@@ -24,6 +39,12 @@ yarn add input-otp-native
2439
pnpm add input-otp-native
2540
```
2641

42+
## Full Documentation
43+
44+
[Homepage](https://input-otp-native.better-app.dev)
45+
[Getting Started](https://input-otp-native.better-app.dev/getting-started)
46+
[Examples](https://input-otp-native.better-app.dev/examples)
47+
2748
## Examples
2849

2950
We create a few examples that you can copy paste and use in your project.

‎docs/.gitignore‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# build output
2+
dist/
3+
# generated types
4+
.astro/
5+
6+
# dependencies
7+
node_modules/
8+
9+
# logs
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
pnpm-debug.log*
14+
15+
16+
# environment variables
17+
.env
18+
.env.production
19+
20+
# macOS-specific files
21+
.DS_Store

‎docs/README.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Starlight Starter Kit: Tailwind
2+
3+
[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
4+
5+
```
6+
yarn create astro@latest -- --template starlight/tailwind
7+
```
8+
9+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/tailwind)
10+
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/tailwind)
11+
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/withastro/starlight&create_from_path=examples/tailwind)
12+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Ftailwind&project-name=my-starlight-docs&repository-name=my-starlight-docs)
13+
14+
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
15+
16+
## 🚀 Project Structure
17+
18+
Inside of your Astro + Starlight project, you'll see the following folders and files:
19+
20+
```
21+
.
22+
├── public/
23+
├── src/
24+
│ ├── assets/
25+
│ ├── content/
26+
│ │ ├── docs/
27+
│ └── content.config.ts
28+
├── astro.config.mjs
29+
├── package.json
30+
├── tailwind.config.mjs
31+
└── tsconfig.json
32+
```
33+
34+
Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
35+
36+
Images can be added to `src/assets/` and embedded in Markdown with a relative link.
37+
38+
Static assets, like favicons, can be placed in the `public/` directory.
39+
40+
## 🧞 Commands
41+
42+
All commands are run from the root of the project, from a terminal:
43+
44+
| Command | Action |
45+
| :------------------------ | :----------------------------------------------- |
46+
| `yarn install` | Installs dependencies |
47+
| `yarn dev` | Starts local dev server at `localhost:4321` |
48+
| `yarn build` | Build your production site to `./dist/` |
49+
| `yarn preview` | Preview your build locally, before deploying |
50+
| `yarn astro ...` | Run CLI commands like `astro add`, `astro check` |
51+
| `yarn astro -- --help` | Get help using the Astro CLI |
52+
53+
## 👀 Want to learn more?
54+
55+
Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).

‎docs/astro.config.mjs‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// @ts-check
2+
import { defineConfig } from 'astro/config';
3+
import starlight from '@astrojs/starlight';
4+
import tailwindcss from '@tailwindcss/vite';
5+
6+
// https://astro.build/config
7+
export default defineConfig({
8+
integrations: [
9+
starlight({
10+
title: '🔐 Input OTP Native',
11+
social: [
12+
{
13+
icon: 'github',
14+
label: 'GitHub',
15+
href: 'https://github.com/yjose/input-otp-native',
16+
},
17+
],
18+
sidebar: [
19+
// Each item here is one entry in the navigation menu.
20+
{ label: 'Getting Started', slug: 'getting-started' },
21+
{
22+
label: 'Examples',
23+
autogenerate: { directory: 'examples' },
24+
},
25+
],
26+
customCss: [
27+
'./src/styles/global.css',
28+
'@fontsource/ibm-plex-serif/400.css',
29+
'@fontsource/ibm-plex-serif/600.css',
30+
],
31+
}),
32+
],
33+
vite: {
34+
plugins: [tailwindcss()],
35+
},
36+
});

‎docs/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "docs",
3+
"type": "module",
4+
"version": "0.0.1",
5+
"scripts": {
6+
"dev": "astro dev",
7+
"start": "astro dev",
8+
"build": "astro build",
9+
"preview": "astro preview",
10+
"astro": "astro"
11+
},
12+
"dependencies": {
13+
"@astrojs/starlight": "^0.34.4",
14+
"@astrojs/starlight-tailwind": "^4.0.1",
15+
"@fontsource/ibm-plex-serif": "^5.2.6",
16+
"@tailwindcss/vite": "^4.0.7",
17+
"astro": "^5.6.1",
18+
"sharp": "^0.32.5",
19+
"tailwindcss": "^4.0.7"
20+
}
21+
}

‎docs/public/demo.gif‎

133 KB
Loading

‎docs/public/favicon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎docs/src/assets/demo.gif‎

133 KB
Loading

‎docs/src/components/hero.astro‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
import { LinkButton } from '@astrojs/starlight/components';
3+
4+
---
5+
6+
<section class=" py-10 flex flex-col justify-center items-center text-center px-4">
7+
<h1 class="text-xl md:text-5xl font-extrabold mb-8 leading-tight max-w-3xl">
8+
The Right OTP Input Component for React Native/Expo
9+
</h1>
10+
<div class="w-full flex justify-center mb-2 rounded-lg shadow-3xl overflow-hidden">
11+
<img src="/demo.gif" alt="OTP Demo" class="w-full max-w-2xl" />
12+
</div>
13+
<p class=" text-lg md:text-xl max-w-2xl">
14+
✨ One time passcode Input For React Native/Expo. Unstyled and fully customizable. ✨ </p>
15+
<div class="flex flex-row gap-2 justify-center items-center">
16+
<a href="https://github.com/yjose/input-otp-native/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/yjose/input-otp-native/ci.yml?style=flat-square&label=Test&logo=github&color=32A9C3&labelColor=1B3C4A" alt="Test status"></a>
17+
<a href="https://www.npmjs.com/package/input-otp-native"><img src="https://img.shields.io/npm/v/input-otp-native.svg?style=flat-square&color=32A9C3&labelColor=1B3C4A" alt="version"></a>
18+
<a href="http://www.npmtrends.com/input-otp-native"><img src="https://img.shields.io/npm/dt/input-otp-native.svg?style=flat-square&color=32A9C3&labelColor=1B3C4A" alt="downloads"></a>
19+
<a href="https://github.com/yjose/input-otp-native/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/input-otp-native.svg?style=flat-square&color=32A9C3&labelColor=1B3C4A" alt="license"></a>
20+
<a href="https://github.com/yjose/input-otp-native/stargazers"><img src="https://img.shields.io/github/stars/yjose/input-otp-native.svg?style=flat-square&color=32A9C3&labelColor=1B3C4A" alt="Star on GitHub"></a>
21+
</div>
22+
</div>
23+
<div class="flex flex-col md:flex-row my-8 justify-center">
24+
<LinkButton href="/getting-started/">Getting Started</LinkButton>
25+
<LinkButton href="https://github.com/yjose/input-otp-native" variant="secondary">
26+
Give a Star ⭐
27+
</LinkButton>
28+
</div>
29+
30+
</section>

‎docs/src/content.config.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineCollection } from 'astro:content';
2+
import { docsLoader } from '@astrojs/starlight/loaders';
3+
import { docsSchema } from '@astrojs/starlight/schema';
4+
5+
export const collections = {
6+
docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
7+
};

0 commit comments

Comments
 (0)