From 0f305592dab4b703d67c2541d452fee85930c416 Mon Sep 17 00:00:00 2001 From: Francesco Ceccon Date: Sat, 5 Feb 2022 21:41:35 +0000 Subject: [PATCH] docs: document hooks --- .changeset/afraid-insects-grin.md | 6 + packages/core/src/hooks/call.ts | 14 +- packages/core/src/hooks/contract.ts | 16 +- packages/core/src/hooks/invoke.ts | 10 +- packages/core/src/providers/block/context.ts | 10 +- .../core/src/providers/block/provider.tsx | 19 ++- packages/core/test/hooks/call.test.tsx | 4 +- packages/core/test/hooks/contract.test.tsx | 12 +- packages/core/test/hooks/invoke.test.tsx | 4 +- packages/core/test/providers/block.test.tsx | 16 +- .../core/test/providers/starknet.test.tsx | 4 +- website/docs/hooks/block.md | 25 +++ website/docs/hooks/call.md | 34 ++++ website/docs/hooks/contract.md | 34 ++++ website/docs/hooks/invoke.md | 34 ++++ website/docs/hooks/starknet.md | 25 +++ website/docs/intro.md | 58 +++---- website/docs/tutorial-basics/_category_.json | 4 - .../docs/tutorial-basics/congratulations.md | 21 --- .../tutorial-basics/create-a-blog-post.md | 34 ---- .../docs/tutorial-basics/create-a-document.md | 55 ------- website/docs/tutorial-basics/create-a-page.md | 43 ------ .../docs/tutorial-basics/deploy-your-site.md | 31 ---- .../tutorial-basics/markdown-features.mdx | 145 ------------------ website/docs/tutorial-extras/_category_.json | 4 - .../tutorial-extras/manage-docs-versions.md | 55 ------- .../tutorial-extras/translate-your-site.md | 88 ----------- website/docusaurus.config.js | 75 ++------- .../components/HomepageFeatures.module.css | 11 -- website/src/components/HomepageFeatures.tsx | 71 --------- website/src/css/custom.css | 28 ++-- website/src/pages/index.module.css | 23 --- website/src/pages/index.tsx | 39 ----- website/src/pages/markdown-page.md | 7 - 34 files changed, 288 insertions(+), 771 deletions(-) create mode 100644 .changeset/afraid-insects-grin.md create mode 100644 website/docs/hooks/block.md create mode 100644 website/docs/hooks/call.md create mode 100644 website/docs/hooks/contract.md create mode 100644 website/docs/hooks/invoke.md create mode 100644 website/docs/hooks/starknet.md delete mode 100644 website/docs/tutorial-basics/_category_.json delete mode 100644 website/docs/tutorial-basics/congratulations.md delete mode 100644 website/docs/tutorial-basics/create-a-blog-post.md delete mode 100644 website/docs/tutorial-basics/create-a-document.md delete mode 100644 website/docs/tutorial-basics/create-a-page.md delete mode 100644 website/docs/tutorial-basics/deploy-your-site.md delete mode 100644 website/docs/tutorial-basics/markdown-features.mdx delete mode 100644 website/docs/tutorial-extras/_category_.json delete mode 100644 website/docs/tutorial-extras/manage-docs-versions.md delete mode 100644 website/docs/tutorial-extras/translate-your-site.md delete mode 100644 website/src/components/HomepageFeatures.module.css delete mode 100644 website/src/components/HomepageFeatures.tsx delete mode 100644 website/src/pages/index.module.css delete mode 100644 website/src/pages/index.tsx delete mode 100644 website/src/pages/markdown-page.md diff --git a/.changeset/afraid-insects-grin.md b/.changeset/afraid-insects-grin.md new file mode 100644 index 00000000..21e91c5e --- /dev/null +++ b/.changeset/afraid-insects-grin.md @@ -0,0 +1,6 @@ +--- +'@starknet-react/core': minor +'website': minor +--- + +Change hooks interface diff --git a/packages/core/src/hooks/call.ts b/packages/core/src/hooks/call.ts index 350d9a87..af6cdd62 100644 --- a/packages/core/src/hooks/call.ts +++ b/packages/core/src/hooks/call.ts @@ -50,6 +50,12 @@ function starknetCallReducer(state: State, action: Action): State { return state } +interface UseStarknetCallArgs { + contract?: Contract + method?: string + args?: Args +} + export interface UseStarknetCall { data?: Args loading: boolean @@ -57,17 +63,13 @@ export interface UseStarknetCall { refresh: () => void } -export function useStarknetCall( - contract: Contract | undefined, - method: string | undefined, - args: Args | undefined -): UseStarknetCall { +export function useStarknetCall({ contract, method, args }: UseStarknetCallArgs): UseStarknetCall { const [state, dispatch] = useReducer(starknetCallReducer, { loading: true, lastUpdatedAt: '', }) - const block = useStarknetBlock() + const { data: block } = useStarknetBlock() const callContract = useCallback(async () => { if (contract && method && args) { diff --git a/packages/core/src/hooks/contract.ts b/packages/core/src/hooks/contract.ts index a81d0688..b9bcf3e4 100644 --- a/packages/core/src/hooks/contract.ts +++ b/packages/core/src/hooks/contract.ts @@ -2,10 +2,16 @@ import { useEffect, useState } from 'react' import { Abi, Contract } from 'starknet' import { useStarknet } from '../providers/starknet' -export function useContract( - abi: Abi[] | undefined, - address: string | undefined -): Contract | undefined { +interface UseContractArgs { + abi?: Abi[] + address?: string +} + +interface UseContract { + contract?: Contract +} + +export function useContract({ abi, address }: UseContractArgs): UseContract { const [contract, setContract] = useState(undefined) const { library } = useStarknet() @@ -15,5 +21,5 @@ export function useContract( } }, [abi, address, library]) - return contract + return { contract } } diff --git a/packages/core/src/hooks/invoke.ts b/packages/core/src/hooks/invoke.ts index f4e7cea4..f20ce66f 100644 --- a/packages/core/src/hooks/invoke.ts +++ b/packages/core/src/hooks/invoke.ts @@ -57,6 +57,11 @@ function starknetInvokeReducer(state: State, action: Action): State { return state } +interface UseStarknetInvokeArgs { + contract?: Contract + method?: string +} + export interface UseStarknetInvoke { data?: Args loading: boolean @@ -65,10 +70,7 @@ export interface UseStarknetInvoke { invoke: (args: Args) => Promise } -export function useStarknetInvoke( - contract: Contract | undefined, - method: string | undefined -): UseStarknetInvoke { +export function useStarknetInvoke({ contract, method }: UseStarknetInvokeArgs): UseStarknetInvoke { const [state, dispatch] = useReducer(starknetInvokeReducer, { loading: false, }) diff --git a/packages/core/src/providers/block/context.ts b/packages/core/src/providers/block/context.ts index b2802f49..77c35b8a 100644 --- a/packages/core/src/providers/block/context.ts +++ b/packages/core/src/providers/block/context.ts @@ -1,8 +1,14 @@ import { createContext, useContext } from 'react' import { GetBlockResponse } from 'starknet' -export const StarknetBlockContext = createContext(undefined) +export interface StarknetBlock { + data?: GetBlockResponse + loading?: boolean + error?: string +} + +export const StarknetBlockContext = createContext(undefined) -export function useStarknetBlock(): GetBlockResponse | undefined { +export function useStarknetBlock(): StarknetBlock { return useContext(StarknetBlockContext) } diff --git a/packages/core/src/providers/block/provider.tsx b/packages/core/src/providers/block/provider.tsx index e2831718..9fb20d25 100644 --- a/packages/core/src/providers/block/provider.tsx +++ b/packages/core/src/providers/block/provider.tsx @@ -17,12 +17,21 @@ export function StarknetBlockProvider({ const { library } = useStarknet() const [block, setBlock] = useState(undefined) + const [loading, setLoading] = useState(undefined) + const [error, setError] = useState(undefined) const fetchBlock = useCallback(() => { if (library) { - library.getBlock().then(setBlock) + setLoading(true) + library + .getBlock() + .then(setBlock) + .catch(() => { + setError('failed fetching block') + }) + .finally(() => setLoading(false)) } - }, [library]) + }, [library, setLoading, setError, setBlock]) useEffect(() => { fetchBlock() @@ -32,5 +41,9 @@ export function StarknetBlockProvider({ return () => clearInterval(intervalId) }, [fetchBlock, interval]) - return {children} + return ( + + {children} + + ) } diff --git a/packages/core/test/hooks/call.test.tsx b/packages/core/test/hooks/call.test.tsx index da175f42..533b5d98 100644 --- a/packages/core/test/hooks/call.test.tsx +++ b/packages/core/test/hooks/call.test.tsx @@ -16,7 +16,7 @@ describe('useStarknetCall', () => { ) const { result, waitForValueToChange } = renderHook( - () => useStarknetCall(contract, 'counter', {}), + () => useStarknetCall({ contract, method: 'counter', args: {} }), { wrapper } ) @@ -30,7 +30,7 @@ describe('useStarknetCall', () => { refresh() }) - await waitForValueToChange(() => result.current.data) + await waitForValueToChange(() => result.current.data, { timeout: 10000 }) expect(result.current.data.count).toBeDefined() expect(result.current.error).toBeUndefined() diff --git a/packages/core/test/hooks/contract.test.tsx b/packages/core/test/hooks/contract.test.tsx index 3e5ea4ad..4f259722 100644 --- a/packages/core/test/hooks/contract.test.tsx +++ b/packages/core/test/hooks/contract.test.tsx @@ -10,14 +10,16 @@ describe('useContract', () => { const wrapper = ({ children }) => {children} it('returns the connected Contract', async () => { - const { result } = renderHook(() => useContract(CounterAbi as Abi[], address), { wrapper }) + const { result } = renderHook(() => useContract({ abi: CounterAbi as Abi[], address }), { + wrapper, + }) expect(result.current).not.toBeUndefined() - expect(result.current.connectedTo).toEqual(address) + expect(result.current.contract.connectedTo).toEqual(address) }) it('updates the Contract if address changes', async () => { const { result, rerender } = renderHook( - ({ address }) => useContract(CounterAbi as Abi[], address), + ({ address }) => useContract({ abi: CounterAbi as Abi[], address }), { wrapper, initialProps: { @@ -27,12 +29,12 @@ describe('useContract', () => { } ) - expect(result.current).toBeUndefined() + expect(result.current.contract).toBeUndefined() act(() => { rerender({ address, children: undefined }) }) - expect(result.current).not.toBeUndefined() + expect(result.current.contract).toBeDefined() }) }) diff --git a/packages/core/test/hooks/invoke.test.tsx b/packages/core/test/hooks/invoke.test.tsx index 6874db33..d470a169 100644 --- a/packages/core/test/hooks/invoke.test.tsx +++ b/packages/core/test/hooks/invoke.test.tsx @@ -16,7 +16,7 @@ describe('useStarknetInvoke', () => { ) const { result, waitForValueToChange } = renderHook( - () => useStarknetInvoke(contract, 'incrementCounter'), + () => useStarknetInvoke({ contract, method: 'incrementCounter' }), { wrapper } ) @@ -28,7 +28,7 @@ describe('useStarknetInvoke', () => { result.current.invoke({ amount: '0x1' }) }) - await waitForValueToChange(() => result.current.data) + await waitForValueToChange(() => result.current.data, { timeout: 10000 }) expect(result.current.data.code).toEqual('TRANSACTION_RECEIVED') expect(result.current.error).toBeUndefined() diff --git a/packages/core/test/providers/block.test.tsx b/packages/core/test/providers/block.test.tsx index 3ce27218..bd8f9465 100644 --- a/packages/core/test/providers/block.test.tsx +++ b/packages/core/test/providers/block.test.tsx @@ -9,11 +9,15 @@ describe('useStarknetBlock', () => { {children} ) - const { result, waitForNextUpdate } = renderHook(() => useStarknetBlock(), { wrapper }) - expect(result.current).toBeUndefined() - // wait up to one minute for a block - await waitForNextUpdate({ timeout: 60000 }) - expect(result.current.timestamp).toBeGreaterThan(0) - expect(result.current.block_hash).not.toBeUndefined() + const { result, waitForValueToChange } = renderHook(() => useStarknetBlock(), { wrapper }) + + expect(result.current.data).toBeUndefined() + expect(result.current.loading).toBeTruthy() + + await waitForValueToChange(() => result.current.data, { timeout: 10000 }) + + expect(result.current.data.timestamp).toBeGreaterThan(0) + expect(result.current.data.block_hash).not.toBeUndefined() + expect(result.current.loading).toBeFalsy() }) }) diff --git a/packages/core/test/providers/starknet.test.tsx b/packages/core/test/providers/starknet.test.tsx index e66e54d2..8c1e3f55 100644 --- a/packages/core/test/providers/starknet.test.tsx +++ b/packages/core/test/providers/starknet.test.tsx @@ -2,8 +2,8 @@ import React from 'react' import { renderHook } from '@testing-library/react-hooks' import { useStarknet, StarknetProvider } from '../../src' -describe('useStarknetBlock', () => { - it('returns the current block', async () => { +describe('useStarknet', () => { + it('returns the current account', async () => { const wrapper = ({ children }) => {children} const { result } = renderHook(() => useStarknet(), { wrapper }) const { account, hasStarknet } = result.current diff --git a/website/docs/hooks/block.md b/website/docs/hooks/block.md new file mode 100644 index 00000000..9bb7f9ac --- /dev/null +++ b/website/docs/hooks/block.md @@ -0,0 +1,25 @@ +--- +sidebar_position: 2 +--- + +# useStarknetBlock + +Hook to access the current StarkNet block. + +```typescript +import { useStarknetBlock } from '@starknet-react/core' + +const { data, loading, error } = useStarknetBlock() +``` + +## Return Values + +```typescript +{ + data?: GetBlockResponse + loading?: boolean + error?: string +} +``` + +Where `GetBlockResponse` is from starknet.js. diff --git a/website/docs/hooks/call.md b/website/docs/hooks/call.md new file mode 100644 index 00000000..eeb90b46 --- /dev/null +++ b/website/docs/hooks/call.md @@ -0,0 +1,34 @@ +--- +sidebar_position: 4 +--- + +# useStarknetCall + +Hook to fetch data from a StarkNet contract. The data is automatically refreshed at every block. + +```typescript +import { useStarknetCall } from '@starknet-react/core' + +const { data, loading, error, refresh } = useStarknetCall({ contract, method, args }) +``` + +## Parameters + +```typescript +{ + contract?: Contract + method?: string + args?: Args +} +``` + +## Return Values + +```typescript +{ + data?: Args + loading: boolean + error?: string + refresh: () => void +} +``` diff --git a/website/docs/hooks/contract.md b/website/docs/hooks/contract.md new file mode 100644 index 00000000..247e9cbb --- /dev/null +++ b/website/docs/hooks/contract.md @@ -0,0 +1,34 @@ +--- +sidebar_position: 3 +--- + +# useContract + +Hook to build a `Contract` instance from its ABI and address. + +```typescript +import { useContract } from '@starknet-react/core' + +const { contract } = useContract({ abi, address }) +``` + +## Parameters + +```typescript +{ + abi?: Abi[] + address?: string +} +``` + +Where `Abi` is from starknet.js. + +## Return Values + +```typescript +{ + contract?: Contract +} +``` + +A contract is returned only if both `abi` and `address` are defined. diff --git a/website/docs/hooks/invoke.md b/website/docs/hooks/invoke.md new file mode 100644 index 00000000..c9124d4a --- /dev/null +++ b/website/docs/hooks/invoke.md @@ -0,0 +1,34 @@ +--- +sidebar_position: 5 +--- + +# useStarknetInvoke + +Hook to create a function that invokes a contract method and track the transaction status. + +```typescript +import { useStarknetInvoke } from '@starknet-react/core' + +const { data, loading, error, reset, invoke } = useStarknetInvoke({ contract, method }) +``` + +## Parameters + +```typescript +{ + contract?: Contract + method?: string +} +``` + +## Return Values + +```typescript + data?: Args + loading: boolean + error?: string + reset: () => void + invoke: (args: Args) => Promise +``` + +Where `Args` and `AddTransactionResponse` are from starknet.js. diff --git a/website/docs/hooks/starknet.md b/website/docs/hooks/starknet.md new file mode 100644 index 00000000..df73b1a4 --- /dev/null +++ b/website/docs/hooks/starknet.md @@ -0,0 +1,25 @@ +--- +sidebar_position: 1 +--- + +# useStarknet + +Hook to access the current instance of the underlying StarkNet library. + +```typescript +import { useStarknet } from '@starknet-react/core' + +const { account, hasStarknet, connectBrowserWallet, library, error } = useStarknet() +``` + +## Return Values + +```typescript +{ + account?: string + hasStarknet: boolean + connectBrowserWallet: () => void + library: ProviderInterface + error?: string +} +``` diff --git a/website/docs/intro.md b/website/docs/intro.md index 50026023..f21f0077 100644 --- a/website/docs/intro.md +++ b/website/docs/intro.md @@ -1,47 +1,53 @@ --- sidebar_position: 1 +slug: / --- -# Tutorial Intro +# StarkNet React -Let's discover **Docusaurus in less than 5 minutes**. +**StarkNet React** is a collection of providers and hooks for StarkNet. ## Getting Started -Get started by **creating a new site**. +1. Add `@starknet-react/core` to your dependencies. -Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**. - -### What you'll need - -- [Node.js](https://nodejs.org/en/download/) version 14 or above: - - When installing Node.js, you are recommended to check all checkboxes related to dependencies. - -## Generate a new site +``` +yarn add @starknet-react/core +``` -Generate a new Docusaurus site using the **classic template**. +2. Wrap your app with the providers -The classic template will automatically be added to your project after you run the command: +```typescript +import { StarknetProvider, StarknetBlockProvider } from '@starknet-react/core' -```bash -npm init docusaurus@latest my-website classic +function App() { + return ( + + + + + + ) +} ``` -You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor. - -The command also installs all necessary dependencies you need to run Docusaurus. +3. Access the hooks from your components. -## Start your site +```typescript +import { useStarknet } from '@starknet-react/core' -Run the development server: +function YourComponent() { + const { account } = useStarknet() -```bash -cd my-website -npm run start + return
gm {account}
+} ``` -The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there. +## Support and Feedback + +If you need help or you want to provide feedback, [create an issue or start a discussion +on GitHub](https://github.com/auclantis/starknet-react). -The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/. +## License -Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes. +This library is licensed under the MIT license. diff --git a/website/docs/tutorial-basics/_category_.json b/website/docs/tutorial-basics/_category_.json deleted file mode 100644 index 135e4a68..00000000 --- a/website/docs/tutorial-basics/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Tutorial - Basics", - "position": 2 -} diff --git a/website/docs/tutorial-basics/congratulations.md b/website/docs/tutorial-basics/congratulations.md deleted file mode 100644 index 9ef99bba..00000000 --- a/website/docs/tutorial-basics/congratulations.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -sidebar_position: 6 ---- - -# Congratulations! - -You have just learned the **basics of Docusaurus** and made some changes to the **initial template**. - -Docusaurus has **much more to offer**! - -Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**. - -Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610) - -## What's next? - -- Read the [official documentation](https://docusaurus.io/). -- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout) -- Add a [search bar](https://docusaurus.io/docs/search) -- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase) -- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support) diff --git a/website/docs/tutorial-basics/create-a-blog-post.md b/website/docs/tutorial-basics/create-a-blog-post.md deleted file mode 100644 index 0d50aaf3..00000000 --- a/website/docs/tutorial-basics/create-a-blog-post.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -sidebar_position: 3 ---- - -# Create a Blog Post - -Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed... - -## Create your first Post - -Create a file at `blog/2021-02-28-greetings.md`: - -```md title="blog/2021-02-28-greetings.md" ---- -slug: greetings -title: Greetings! -authors: - - name: Joel Marcey - title: Co-creator of Docusaurus 1 - url: https://github.com/JoelMarcey - image_url: https://github.com/JoelMarcey.png - - name: Sébastien Lorber - title: Docusaurus maintainer - url: https://sebastienlorber.com - image_url: https://github.com/slorber.png -tags: [greetings] ---- - -Congratulations, you have made your first post! - -Feel free to play around and edit this post as much you like. -``` - -A new blog post is now available at `http://localhost:3000/blog/greetings`. diff --git a/website/docs/tutorial-basics/create-a-document.md b/website/docs/tutorial-basics/create-a-document.md deleted file mode 100644 index feaced79..00000000 --- a/website/docs/tutorial-basics/create-a-document.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Create a Document - -Documents are **groups of pages** connected through: - -- a **sidebar** -- **previous/next navigation** -- **versioning** - -## Create your first Doc - -Create a markdown file at `docs/hello.md`: - -```md title="docs/hello.md" -# Hello - -This is my **first Docusaurus document**! -``` - -A new document is now available at `http://localhost:3000/docs/hello`. - -## Configure the Sidebar - -Docusaurus automatically **creates a sidebar** from the `docs` folder. - -Add metadata to customize the sidebar label and position: - -```md title="docs/hello.md" {1-4} ---- -sidebar_label: 'Hi!' -sidebar_position: 3 ---- - -# Hello - -This is my **first Docusaurus document**! -``` - -It is also possible to create your sidebar explicitly in `sidebars.js`: - -```diff title="sidebars.js" -module.exports = { - tutorialSidebar: [ - { - type: 'category', - label: 'Tutorial', -- items: [...], -+ items: ['hello'], - }, - ], -}; -``` diff --git a/website/docs/tutorial-basics/create-a-page.md b/website/docs/tutorial-basics/create-a-page.md deleted file mode 100644 index f5b51290..00000000 --- a/website/docs/tutorial-basics/create-a-page.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Create a Page - -Add **Markdown or React** files to `src/pages` to create a **standalone page**: - -- `src/pages/index.js` -> `localhost:3000/` -- `src/pages/foo.md` -> `localhost:3000/foo` -- `src/pages/foo/bar.js` -> `localhost:3000/foo/bar` - -## Create your first React Page - -Create a file at `src/pages/my-react-page.js`: - -```jsx title="src/pages/my-react-page.js" -import React from 'react' -import Layout from '@theme/Layout' - -export default function MyReactPage() { - return ( - -

My React page

-

This is a React page

- - ) -} -``` - -A new page is now available at `http://localhost:3000/my-react-page`. - -## Create your first Markdown Page - -Create a file at `src/pages/my-markdown-page.md`: - -```mdx title="src/pages/my-markdown-page.md" -# My Markdown page - -This is a Markdown page -``` - -A new page is now available at `http://localhost:3000/my-markdown-page`. diff --git a/website/docs/tutorial-basics/deploy-your-site.md b/website/docs/tutorial-basics/deploy-your-site.md deleted file mode 100644 index 492eae02..00000000 --- a/website/docs/tutorial-basics/deploy-your-site.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -sidebar_position: 5 ---- - -# Deploy your site - -Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**). - -It builds your site as simple **static HTML, JavaScript and CSS files**. - -## Build your site - -Build your site **for production**: - -```bash -npm run build -``` - -The static files are generated in the `build` folder. - -## Deploy your site - -Test your production build locally: - -```bash -npm run serve -``` - -The `build` folder is now served at `http://localhost:3000/`. - -You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**). diff --git a/website/docs/tutorial-basics/markdown-features.mdx b/website/docs/tutorial-basics/markdown-features.mdx deleted file mode 100644 index 01d18374..00000000 --- a/website/docs/tutorial-basics/markdown-features.mdx +++ /dev/null @@ -1,145 +0,0 @@ ---- -sidebar_position: 4 ---- - -# Markdown Features - -Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**. - -## Front Matter - -Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/): - -```text title="my-doc.md" -// highlight-start ---- -id: my-doc-id -title: My document title -description: My document description -slug: /my-custom-url ---- -// highlight-end - -## Markdown heading - -Markdown text with [links](./hello.md) -``` - -## Links - -Regular Markdown links are supported, using url paths or relative file paths. - -```md -Let's see how to [Create a page](/create-a-page). -``` - -```md -Let's see how to [Create a page](./create-a-page.md). -``` - -**Result:** Let's see how to [Create a page](./create-a-page.md). - -## Images - -Regular Markdown images are supported. - -Add an image at `static/img/docusaurus.png` and display it in Markdown: - -```md -![Docusaurus logo](/img/docusaurus.png) -``` - -![Docusaurus logo](/img/docusaurus.png) - -## Code Blocks - -Markdown code blocks are supported with Syntax highlighting. - - ```jsx title="src/components/HelloDocusaurus.js" - function HelloDocusaurus() { - return ( -

Hello, Docusaurus!

- ) - } - ``` - -```jsx title="src/components/HelloDocusaurus.js" -function HelloDocusaurus() { - return

Hello, Docusaurus!

-} -``` - -## Admonitions - -Docusaurus has a special syntax to create admonitions and callouts: - - :::tip My tip - - Use this awesome feature option - - ::: - - :::danger Take care - - This action is dangerous - - ::: - -:::tip My tip - -Use this awesome feature option - -::: - -:::danger Take care - -This action is dangerous - -::: - -## MDX and React Components - -[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**: - -```jsx -export const Highlight = ({children, color}) => ( - { - alert(`You clicked the color ${color} with label ${children}`) - }}> - {children} - -); - -This is Docusaurus green ! - -This is Facebook blue ! -``` - -export const Highlight = ({ children, color }) => ( - { - alert(`You clicked the color ${color} with label ${children}`) - }} - > - {children} - -) - -This is Docusaurus green ! - -This is Facebook blue ! diff --git a/website/docs/tutorial-extras/_category_.json b/website/docs/tutorial-extras/_category_.json deleted file mode 100644 index ca3f8e06..00000000 --- a/website/docs/tutorial-extras/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Tutorial - Extras", - "position": 3 -} diff --git a/website/docs/tutorial-extras/manage-docs-versions.md b/website/docs/tutorial-extras/manage-docs-versions.md deleted file mode 100644 index cd16718c..00000000 --- a/website/docs/tutorial-extras/manage-docs-versions.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Manage Docs Versions - -Docusaurus can manage multiple versions of your docs. - -## Create a docs version - -Release a version 1.0 of your project: - -```bash -npm run docusaurus docs:version 1.0 -``` - -The `docs` folder is copied into `versioned_docs/version-1.0` and `versions.json` is created. - -Your docs now have 2 versions: - -- `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs -- `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased docs** - -## Add a Version Dropdown - -To navigate seamlessly across versions, add a version dropdown. - -Modify the `docusaurus.config.js` file: - -```js title="docusaurus.config.js" -module.exports = { - themeConfig: { - navbar: { - items: [ - // highlight-start - { - type: 'docsVersionDropdown', - }, - // highlight-end - ], - }, - }, -} -``` - -The docs version dropdown appears in your navbar: - -![Docs Version Dropdown](/img/tutorial/docsVersionDropdown.png) - -## Update an existing version - -It is possible to edit versioned docs in their respective folder: - -- `versioned_docs/version-1.0/hello.md` updates `http://localhost:3000/docs/hello` -- `docs/hello.md` updates `http://localhost:3000/docs/next/hello` diff --git a/website/docs/tutorial-extras/translate-your-site.md b/website/docs/tutorial-extras/translate-your-site.md deleted file mode 100644 index e713004f..00000000 --- a/website/docs/tutorial-extras/translate-your-site.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Translate your site - -Let's translate `docs/intro.md` to French. - -## Configure i18n - -Modify `docusaurus.config.js` to add support for the `fr` locale: - -```js title="docusaurus.config.js" -module.exports = { - i18n: { - defaultLocale: 'en', - locales: ['en', 'fr'], - }, -} -``` - -## Translate a doc - -Copy the `docs/intro.md` file to the `i18n/fr` folder: - -```bash -mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/ - -cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md -``` - -Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French. - -## Start your localized site - -Start your site on the French locale: - -```bash -npm run start -- --locale fr -``` - -Your localized site is accessible at `http://localhost:3000/fr/` and the `Getting Started` page is translated. - -:::caution - -In development, you can only use one locale at a same time. - -::: - -## Add a Locale Dropdown - -To navigate seamlessly across languages, add a locale dropdown. - -Modify the `docusaurus.config.js` file: - -```js title="docusaurus.config.js" -module.exports = { - themeConfig: { - navbar: { - items: [ - // highlight-start - { - type: 'localeDropdown', - }, - // highlight-end - ], - }, - }, -} -``` - -The locale dropdown now appears in your navbar: - -![Locale Dropdown](/img/tutorial/localeDropdown.png) - -## Build your localized site - -Build your site for a specific locale: - -```bash -npm run build -- --locale fr -``` - -Or build your site to include all the locales at once: - -```bash -npm run build -``` diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 4ea6fe81..60260433 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -6,15 +6,15 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula') /** @type {import('@docusaurus/types').Config} */ const config = { - title: 'My Site', + title: 'StarkNet React', tagline: 'Dinosaurs are cool', url: 'https://your-docusaurus-test-site.com', baseUrl: '/', onBrokenLinks: 'throw', onBrokenMarkdownLinks: 'warn', favicon: 'img/favicon.ico', - organizationName: 'facebook', // Usually your GitHub org/user name. - projectName: 'docusaurus', // Usually your repo name. + organizationName: 'auclantis', + projectName: 'starknet-react', presets: [ [ @@ -23,16 +23,11 @@ const config = { ({ docs: { sidebarPath: require.resolve('./sidebars.js'), + routeBasePath: '/', // Please change this to your repo. - editUrl: - 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', - }, - blog: { - showReadingTime: true, - // Please change this to your repo. - editUrl: - 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', + editUrl: 'https://github.com/auclantis/starknet-react/tree/main/website/', }, + blog: false, theme: { customCss: require.resolve('./src/css/custom.css'), }, @@ -44,70 +39,24 @@ const config = { /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({ navbar: { - title: 'My Site', - logo: { - alt: 'My Site Logo', - src: 'img/logo.svg', - }, + title: 'StarkNet React', items: [ { type: 'doc', docId: 'intro', position: 'left', - label: 'Tutorial', + label: 'Documentation', }, - { to: '/blog', label: 'Blog', position: 'left' }, { - href: 'https://github.com/facebook/docusaurus', - label: 'GitHub', + href: 'https://github.com/auclantis/starknet-react', + label: '@auclantis/starknet-react', position: 'right', }, ], }, footer: { - style: 'dark', - links: [ - { - title: 'Docs', - items: [ - { - label: 'Tutorial', - to: '/docs/intro', - }, - ], - }, - { - title: 'Community', - items: [ - { - label: 'Stack Overflow', - href: 'https://stackoverflow.com/questions/tagged/docusaurus', - }, - { - label: 'Discord', - href: 'https://discordapp.com/invite/docusaurus', - }, - { - label: 'Twitter', - href: 'https://twitter.com/docusaurus', - }, - ], - }, - { - title: 'More', - items: [ - { - label: 'Blog', - to: '/blog', - }, - { - label: 'GitHub', - href: 'https://github.com/facebook/docusaurus', - }, - ], - }, - ], - copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`, + style: 'light', + copyright: `Copyright © ${new Date().getFullYear()} Auclantis and the StarkNet React contributors.`, }, prism: { theme: lightCodeTheme, diff --git a/website/src/components/HomepageFeatures.module.css b/website/src/components/HomepageFeatures.module.css deleted file mode 100644 index b248eb2e..00000000 --- a/website/src/components/HomepageFeatures.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; -} - -.featureSvg { - height: 200px; - width: 200px; -} diff --git a/website/src/components/HomepageFeatures.tsx b/website/src/components/HomepageFeatures.tsx deleted file mode 100644 index 0563d882..00000000 --- a/website/src/components/HomepageFeatures.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import useBaseUrl from '@docusaurus/useBaseUrl' -import React from 'react' -import clsx from 'clsx' -import styles from './HomepageFeatures.module.css' - -type FeatureItem = { - title: string - image: string - description: JSX.Element -} - -const FeatureList: FeatureItem[] = [ - { - title: 'Easy to Use', - image: '/img/undraw_docusaurus_mountain.svg', - description: ( - <> - Docusaurus was designed from the ground up to be easily installed and used to get your - website up and running quickly. - - ), - }, - { - title: 'Focus on What Matters', - image: '/img/undraw_docusaurus_tree.svg', - description: ( - <> - Docusaurus lets you focus on your docs, and we'll do the chores. Go ahead and move your - docs into the docs directory. - - ), - }, - { - title: 'Powered by React', - image: '/img/undraw_docusaurus_react.svg', - description: ( - <> - Extend or customize your website layout by reusing React. Docusaurus can be extended while - reusing the same header and footer. - - ), - }, -] - -function Feature({ title, image, description }: FeatureItem) { - return ( -
-
- {title} -
-
-

{title}

-

{description}

-
-
- ) -} - -export default function HomepageFeatures(): JSX.Element { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ) -} diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 3247c432..67a958b1 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -6,25 +6,25 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; + --ifm-color-primary: #8167b0; + --ifm-color-primary-dark: #8167b0; + --ifm-color-primary-darker: #8167b0; + --ifm-color-primary-darkest: #8167b0; + --ifm-color-primary-light: #d6bffe; + --ifm-color-primary-lighter: #e7dafe; + --ifm-color-primary-lightest: #f9f6ff; --ifm-code-font-size: 95%; } /* For readability concerns, you should choose a lighter palette in dark mode. */ html[data-theme='dark'] { - --ifm-color-primary: #25c2a0; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; + --ifm-color-primary: #c4a3fd; + --ifm-color-primary-dark: #8167b0; + --ifm-color-primary-darker: #8167b0; + --ifm-color-primary-darkest: #8167b0; + --ifm-color-primary-light: #d6bffe; + --ifm-color-primary-lighter: #e7dafe; + --ifm-color-primary-lightest: #f9f6ff; } .docusaurus-highlight-code-line { diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css deleted file mode 100644 index 666feb6a..00000000 --- a/website/src/pages/index.module.css +++ /dev/null @@ -1,23 +0,0 @@ -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ - -.heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; -} - -@media screen and (max-width: 966px) { - .heroBanner { - padding: 2rem; - } -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; -} diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx deleted file mode 100644 index 70a2f5b2..00000000 --- a/website/src/pages/index.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react' -import clsx from 'clsx' -import Layout from '@theme/Layout' -import Link from '@docusaurus/Link' -import useDocusaurusContext from '@docusaurus/useDocusaurusContext' -import styles from './index.module.css' -import HomepageFeatures from '../components/HomepageFeatures' - -function HomepageHeader() { - const { siteConfig } = useDocusaurusContext() - return ( -
-
-

{siteConfig.title}

-

{siteConfig.tagline}

-
- - Docusaurus Tutorial - 5min ⏱️ - -
-
-
- ) -} - -export default function Home(): JSX.Element { - const { siteConfig } = useDocusaurusContext() - return ( - - -
- -
- - ) -} diff --git a/website/src/pages/markdown-page.md b/website/src/pages/markdown-page.md deleted file mode 100644 index 9756c5b6..00000000 --- a/website/src/pages/markdown-page.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Markdown page example ---- - -# Markdown page example - -You don't need React to write simple standalone pages.