Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create initial documentation structure #18

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions docs/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# Dependencies
/node_modules

# Production
/build

# Generated files
.docusaurus
.cache-loader

# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
38 changes: 38 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# Website

This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.

## Installation

```console
yarn install
```

## Local Development

```console
yarn start
```

This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.

## Build

```console
yarn build
```

This command generates static content into the `build` directory and can be served using any static contents hosting service.

## Deployment

```console
GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
```

If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

## To Do

[ ] Fonts page
[ ] Theming page
3 changes: 3 additions & 0 deletions docs/babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};
44 changes: 44 additions & 0 deletions docs/docs/button.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
---
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Writing all props manually doesn't sound like a good idea, I'll take a look to see if we can generate them based on the component's Props type.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes that should be a priority because updating it manually would be cumbersome

slug: /button
title: Button
---

Use buttons to trigger an action after a user interaction.

![img](../static/img/docs-button.png)

### Usage

```javascript
import { Button } from 'react95-native';

<Button variant='default' onPress={() => console.warn('onPress')} primary>
Primary
</Button>;
```

### Props

_(all props are optional)_

**`accessibilityLabel`**: `string`

**`active`**: `boolean`

**`children`**: `React.ReactNode`

**`disabled`**: `boolean`

**`onPress`**: `() => void`

**`onLongPress`**: `() => void`

**`primary`**: `boolean`

**`size`**: `Sizes`

**`square`**: `boolean`

**`style`**: `StyleProp<ViewStyle>`

**`variant`**: `ButtonVariants`
6 changes: 6 additions & 0 deletions docs/docs/fonts.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
slug: /fonts
title: Fonts
---

Fonts section (WIP)
40 changes: 40 additions & 0 deletions docs/docs/getting-started.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
slug: /
title: Getting Started
---

## Installation

React95 Native is available as an [npm package](https://www.npmjs.com/package/react95-native).

## npm

To install and save your `package.json` dependencies, run:

```sh
// yarn
yarn react95-native

// npm
npm i react95-native
```

## Usage

Simply rap your app content with our custom ThemeProvider (more on the [theming](theming) section) with the theme of your choice... and you're ready to go! 🚀

```jsx
import React from 'react';
import { ThemeProvider, themes } from 'react95-native';

/* Pick a theme of your choice */
const { original } = themes;

const App = () => (
<div>
<ThemeProvider theme={original}>/* ... */</ThemeProvider>
</div>
);

export default App;
```
6 changes: 6 additions & 0 deletions docs/docs/theming.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
slug: /theming
title: Theming
---

Theming section (WIP)
89 changes: 89 additions & 0 deletions docs/docusaurus.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
module.exports = {
title: 'React95 Native',
tagline:
'Refreshed Windows 95 style UI components for your React Native app.',
url: 'https://your-docusaurus-test-site.com',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.ico',
organizationName: 'react95-io', // Usually your GitHub org/user name.
projectName: 'react95-native', // Usually your repo name.
themeConfig: {
navbar: {
title: 'React95',
logo: {
alt: 'React95 Logo',
src: 'img/logo.svg',
},
items: [
{
to: 'docs/',
activeBasePath: 'docs',
label: 'Docs',
position: 'left',
},
{
href: 'https://github.com/react95-io/react95-native',
label: 'GitHub',
position: 'right',
},
],
},
footer: {
style: 'dark',
links: [
{
title: 'Docs',
items: [
{
label: 'Style Guide',
to: 'docs/',
},
],
},
{
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: 'GitHub',
href: 'https://github.com/facebook/docusaurus',
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} React95 Native`,
},
},
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
sidebarPath: require.resolve('./sidebars.js'),
editUrl: 'https://github.com/react95-io/react95-native',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
};
34 changes: 34 additions & 0 deletions docs/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{
"name": "react-95",
"version": "0.0.0",
"private": true,
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
"build": "docusaurus build",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"serve": "docusaurus serve",
"clear": "docusaurus clear"
},
"dependencies": {
"@docusaurus/core": "2.0.0-alpha.70",
"@docusaurus/preset-classic": "2.0.0-alpha.70",
"@mdx-js/react": "^1.6.21",
"clsx": "^1.1.1",
"react": "^16.8.4",
"react-dom": "^16.8.4"
},
"browserslist": {
"production": [
">0.5%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
6 changes: 6 additions & 0 deletions docs/sidebars.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
someSidebar: {
Guides: ['getting-started', 'theming', 'fonts'],
Components: ['button'],
},
};
25 changes: 25 additions & 0 deletions docs/src/css/custom.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/* stylelint-disable docusaurus/copyright-header */
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/

/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: teal;
--ifm-color-primary-dark: rgb(33, 175, 144);
--ifm-color-primary-darker: rgb(31, 165, 136);
--ifm-color-primary-darkest: rgb(26, 136, 112);
--ifm-color-primary-light: rgb(70, 203, 174);
--ifm-color-primary-lighter: rgb(102, 212, 189);
--ifm-color-primary-lightest: rgb(146, 224, 208);
--ifm-code-font-size: 95%;
}

.docusaurus-highlight-code-line {
background-color: rgb(72, 77, 91);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}
Loading