Merge pull request #8 from nhanluongoe/docs/init-document-site

Docs/init document site

.eslintrc.js

@@ -66,5 +66,9 @@ module.exports = {
     ],
     'react/prop-types': 'off', // Disable react/prop-types rule
     'arrow-body-style': 'off', // Disable arrow-body-style rule
+    'global-require': 'off', // Disable global-require rule
+    'react/no-array-index-key': 'warn', // Disable react/no-array-index-key rule
+    'import/no-relative-packages': 'off', // Disable import/no-relative-parent-imports rule
+    'jsx-a11y/anchor-is-valid': 'off', // Disable jsx-a11y/anchor-is-valid rule
   },
 };

.prettierignore

@@ -10,4 +10,5 @@ yarn.lock
 .editorconfig
 .env.template
 public
-LICENSE
+LICENSE
+*.svg

README.md

@@ -4,7 +4,9 @@
 [![npm downloads](https://img.shields.io/npm/dm/react-stacked-toast.svg?style=flat-square)](https://www.npmjs.com/package/react-stacked-toast)
 [![npm license](https://img.shields.io/npm/l/react-stacked-toast.svg?style=flat-square)](https://www.npmjs.com/package/react-stacked-toast) -->
 
-Take a look at [Demo](https://nhanluongoe.me/os/react-stacked-toast)
+<div style="text-align: center">
+  <img src="./site/assets/logo.svg" alt="logo" style="">
+</div>
 
 ## 🔥 Features
 
@@ -28,7 +30,7 @@ yarn add react-stacked-toast
 
 ## 📚 Usage
 
-### 1. Add the `Toaster` component to the root of your application
+### 1. Add the `Toaster` component to the your application
 
 ```tsx
 import { Toaster } from 'react-stacked-toast';
@@ -64,83 +66,9 @@ const Component = () => {
 
 ## 🔧 API
 
-### 1. `Toaster` component
+<!-- Find the full API reference on [official documentation](https://updatelater). -->
 
-The `Toaster` component is used to render the toast notifications. It should be placed at the root of your application.
-
-#### Available props
-
-```tsx
-<Toaster
-  position="right"
-  toastOptions={{
-    duration: 3 * 1000,
-    icon: '👋',
-    style: {
-      backgroundColor: '#333',
-      color: '#fff',
-    },
-  }}
-/>
-```
-
-##### `position` Prop
-
-This prop is used to set the position of the toast notifications. The default value is `right`.
-
-##### `toastOptions` Prop
-
-This prop is used to set the options applying to all toasts.
-
-### 2. the `toast()` API
-
-The `toast()` API is used to create a toast notification
-
-#### Available options
-
-```tsx
-toast({
-  title: 'Hello world!',
-  description: 'This is a toast notification.',
-  duration: 5000,
-  icon: '👋',
-  style: {
-    backgroundColor: '#333',
-    color: '#fff',
-  },
-});
-
-// Also you can use built-in toasts
-toast.success({
-  title: 'Success Toast',
-  description: 'This is a success toast',
-});
-
-toast.error({
-  title: 'Error Toast',
-  description: 'This is an error toast',
-});
-```
-
-##### `title` Option
-
-The title of the toast notification. You can customize the title by passing a React component.
-
-##### `description` Option
-
-The description of the toast notification. You can customize the description by passing a React component.
-
-##### `duration` Option
-
-This is the duration of the toast instance in milliseconds. This will overwrite the duration in `toastOptions` prop of the `Toaster` component.
-
-##### `icon` Option
-
-This is the icon of the toast instance. This will overwrite the icon in `toastOptions` prop of the `Toaster` component.
-
-##### `style` Option
-
-This is the style of the toast instance. This will overwrite the style in `toastOptions` prop of the `Toaster` component.
+Update later
 
 ## Acknowledgements
 

site/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

site/README.md

@@ -0,0 +1 @@
+# The document site for `react-stacked-toast`

site/components/code.tsx

@@ -0,0 +1,145 @@
+import clsx from 'clsx';
+import React from 'react';
+import Highlight, {
+  defaultProps,
+  Language,
+  PrismTheme,
+} from 'prism-react-renderer';
+
+const theme: PrismTheme = {
+  plain: {
+    backgroundColor: '#282828',
+    color: '#ebdbb2',
+  },
+  styles: [
+    {
+      types: ['comment', 'prolog', 'doctype', 'cdata', 'punctuation'],
+      style: {
+        color: '#928374',
+      },
+    },
+    {
+      types: ['namespace'],
+      style: {
+        opacity: 0.7,
+      },
+    },
+    {
+      types: ['tag', 'operator', 'number', 'module'],
+      style: {
+        color: '#fabd2f',
+      },
+    },
+    {
+      types: ['property', 'function'],
+      style: {
+        color: '#b8bb26',
+      },
+    },
+    {
+      types: ['tag-id', 'selector', 'atrule-id'],
+      style: {
+        color: '#fb4934',
+      },
+    },
+    {
+      types: ['attr-name'],
+      style: {
+        color: '#83a598',
+      },
+    },
+    {
+      types: [
+        'boolean',
+        'string',
+        'entity',
+        'url',
+        'attr-value',
+        'keyword',
+        'control',
+        'directive',
+        'unit',
+        'statement',
+        'regex',
+        'at-rule',
+        'placeholder',
+        'variable',
+      ],
+      style: {
+        color: '#fe8019',
+      },
+    },
+    {
+      types: ['deleted'],
+      style: {
+        textDecorationLine: 'line-through',
+      },
+    },
+    {
+      types: ['inserted'],
+      style: {
+        textDecorationLine: 'underline',
+      },
+    },
+    {
+      types: ['italic'],
+      style: {
+        fontStyle: 'italic',
+      },
+    },
+    {
+      types: ['important', 'bold'],
+      style: {
+        fontWeight: 'bold',
+      },
+    },
+    {
+      types: ['important'],
+      style: {
+        color: '#fb4934',
+      },
+    },
+  ],
+};
+
+export const Code: React.FC<{
+  snippet: string;
+  language?: Language;
+  className?: string;
+}> = (props) => {
+  const language = props.language || 'jsx';
+
+  return (
+    <Highlight
+      {...defaultProps}
+      code={props.snippet}
+      theme={theme}
+      language={language}
+    >
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <pre
+          className={clsx(
+            props.className,
+            className,
+            'h-full w-full rounded-lg p-4 overflow-x-auto flex flex-col items justify-center'
+          )}
+          style={style}
+        >
+          {tokens.map((line, i) => {
+            if (tokens.length - 1 === i && line[0].empty) {
+              return null;
+            }
+
+            return (
+              <div {...getLineProps({ line, key: i })}>
+                {line.map((token, key) => (
+                  <span {...getTokenProps({ token, key })} />
+                ))}
+              </div>
+            );
+          })}
+        </pre>
+      )}
+    </Highlight>
+  );
+};

site/components/docs-layout.tsx

@@ -0,0 +1,65 @@
+import { NextSeo } from 'next-seo';
+import Link from 'next/link';
+import * as React from 'react';
+import { Footer } from './sections/footer';
+
+const TableItem: React.FC<{
+  href: string;
+  children?: React.ReactNode;
+}> = ({ children, href }) => (
+  <Link href={href}>
+    <button
+      type="button"
+      className="rounded px-3 py-1.5 transition-colors duration-200 relative block hover:text-toast-500 text-toast-700"
+    >
+      {children}
+    </button>
+  </Link>
+);
+
+const TableHeader: React.FC<{
+  children?: React.ReactNode;
+}> = ({ children }) => (
+  <span className="px-3 mt-3 mb-1 text-sm font-semibold tracking-wide text-toast-900 uppercase">
+    {children}
+  </span>
+);
+
+export default function DocsLayout({ meta, children }) {
+  return (
+    <div className="bg-white bg-opacity-50 min-h-screen flex flex-col">
+      <NextSeo titleTemplate="%s - react-stacked-toast" title={meta.title} />
+
+      <div className="flex-1 mx-auto px-2 max-w-4xl w-full">
+        <header className=" col-start-1 col-end-6 mt-12 mb-16 px-2 flex justify-between items-center">
+          <a href="/" className="font-bold text-2xl">
+            react-stacked-toast
+          </a>
+          <a
+            className="flex text-toast-600 underline"
+            href="https://github.com/nhanluongoe/react-stacked-toast"
+          >
+            GitHub
+          </a>
+        </header>
+
+        <div className="md:flex md:space-x-4">
+          <nav className="font-medium rounded-lg ">
+            <div className="flex flex-col mb-8 sticky top-0">
+              <TableHeader>Overview</TableHeader>
+              <TableItem href="/docs">Get Started</TableItem>
+              <TableHeader>API</TableHeader>
+              <TableItem href="/docs/toaster">Toaster</TableItem>
+              <TableItem href="/docs/toast">toast()</TableItem>
+            </div>
+          </nav>
+
+          <main className="col-span-4 w-full prose prose-toast text-toast-900 flex-1 pl-12 border-l border-toast-500">
+            {children}
+          </main>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+}