Skip to content

Commit ede530c

Browse files
luizbaldiarturbien
luizbaldi
authored and
arturbien
committed
docs: tweak docs
1 parent 0c83345 commit ede530c

File tree

6 files changed

+108
-63
lines changed

6 files changed

+108
-63
lines changed

‎docs/contributing.mdx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
name: Contributing
3+
route: /contributing
4+
---
5+
6+
### Contributing
7+
8+
Any help from UI / UX designers would be EXTREMELY appreciated. The challenge is to come up with new component designs / layouts that are broadly used in modern UIs, that weren't present back in 95.
9+
10+
If you want to help with the project, feel free to open pull requests and submit issues or component proposals. Let's bring this UI back to life ♥️

‎docs/index.mdx

+33-3
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,42 @@ import { Link } from 'docz';
77

88
## Welcome to React95
99

10-
The _refreshed_ Windows95 UI components for your modern React apps. Built with [`styled-components`](https://github.com/styled-components/styled-components) 💅
10+
<p align="center">
11+
<a href="https://www.npmjs.com/package/react95"><img src="https://flat.badgen.net/npm/dt/react95" alt="NPM" /></a>
12+
<a href="https://circleci.com/gh/arturbien/React95"><img src="https://flat.badgen.net/circleci/github/arturbien/React95/master" alt="circleCI build" /></a>
13+
<a href="https://www.npmjs.com/package/react95"><img src="https://flat.badgen.net/npm/v/react95" alt="React95 version" /></a>
14+
<a href="https://www.npmjs.com/package/react95"><img src="https://flat.badgen.net/npm/license/react95" alt="React95 license" /></a>
1115

12-
### Motivation
16+
</p>
1317

14-
Create modern mobile/web applications with the retro and old school Windows 95 style. Our goal is not to exactly recreate Windows95 components, but to provide a solid component library for current scenarios.
18+
<h3 align="center">
19+
<a href="https://storybook.react95.io/?path=/story/window--default">Components</a>
20+
&nbsp;-&nbsp;
21+
<a href="https://coins95.web.app/">Demo app</a>
22+
&nbsp;-&nbsp;
23+
<a href="https://react95.io/">Website</a>
24+
&nbsp;-&nbsp;
25+
<a href="https://join.slack.com/t/react95/shared_invite/enQtOTA1NzEyNjAyNTc4LWYxZjU3NWRiMWJlMGJiMjhkNzE2MDA3ZmZjZDc1YmY0ODdlZjMwZDA1NWJiYWExYmY1NTJmNmE4OWVjNWFhMTE">Slack</a>
26+
&nbsp;-&nbsp;
27+
<a href="https://www.paypal.me/react95">PayPal donation 💰</a>
28+
</h3>
29+
30+
<p align="center">
31+
<b>Refreshed</b> Windows95 UI components for your modern React apps.
32+
Built with <a href="https://github.com/styled-components/styled-components" target="_blank">styled-components</a> 💅
33+
</p>
34+
35+
![hero](https://user-images.githubusercontent.com/28541613/81947711-28b05580-9601-11ea-964a-c3a6de998496.png)
1536

1637
### Getting Started
1738

1839
<span>Check out our <Link to='/installation'>getting started</Link> docs!</span>
40+
41+
### Motivation
42+
43+
Create modern mobile/web applications with the retro and old school Windows 95 style. Our goal is not to exactly recreate Windows95 components, but to provide a solid component library for current scenarios.
44+
45+
### Support
46+
47+
- [Become a backer or sponsor on Patreon](https://www.patreon.com/arturbien)
48+
- [One-time donation via PayPal](https://www.paypal.me/react95)

‎docs/installation.mdx

+54-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
2-
name: Installation
3-
menu: Getting Started
2+
name: Getting Started
43
route: /installation
54
---
65

@@ -20,4 +19,56 @@ yarn react95 styled-components
2019
npm i react95 styled-components
2120
```
2221

23-
In order to have `react95` working properly, you'll also need [`styled-components`](https://github.com/styled-components/styled-components), this way you can use custom themes and get the best of the library 🙂 _(but that might change in the future)_.
22+
In order to have `react95` working properly, you'll also need [`styled-components`](https://github.com/styled-components/styled-components), this way you can use custom themes and get the best of the library 🙂
23+
24+
## Usage
25+
26+
Apply style reset, wrap your app content with ThemeProvider with theme of your choice... and you are ready to go! 🚀
27+
28+
```jsx
29+
import React from 'react';
30+
import { createGlobalStyle, ThemeProvider } from 'styled-components';
31+
import { styleReset, List, ListItem, Divider } from 'react95';
32+
33+
/* Pick a theme of your choice */
34+
import original from "react95/dist/themes/original";
35+
36+
/* Original Windows95 font (optional) */
37+
import ms_sans_serif from "react95/dist/fonts/ms_sans_serif.woff2";
38+
import ms_sans_serif_bold from "react95/dist/fonts/ms_sans_serif_bold.woff2";
39+
40+
const GlobalStyles = createGlobalStyle`
41+
@font-face {
42+
font-family: 'ms_sans_serif';
43+
src: url('${ms_sans_serif}') format('woff2');
44+
font-weight: 400;
45+
font-style: normal
46+
}
47+
@font-face {
48+
font-family: 'ms_sans_serif';
49+
src: url('${ms_sans_serif_bold}') format('woff2');
50+
font-weight: bold;
51+
font-style: normal
52+
}
53+
body {
54+
font-family: 'ms_sans_serif';
55+
}
56+
${styleReset}
57+
`;
58+
59+
const App = () => (
60+
<div>
61+
<GlobalStyles />
62+
<ThemeProvider theme={original}>
63+
<List>
64+
<ListItem>🎤 Sing</ListItem>
65+
<ListItem>💃🏻 Dance</ListItem>
66+
<Divider />
67+
<ListItem disabled>😴 Sleep</ListItem>
68+
</List>
69+
</ThemeProvider>
70+
</div>
71+
);
72+
73+
export default App;
74+
```

‎docs/submit-project.mdx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
name: Submit your project
3+
route: /submit-project
4+
---
5+
6+
### Submit your project
7+
8+
Apps built with React95 will be featured on the official React95 [website](https://react95.io) 🤟🏻
9+
10+
In order to submit your project, just drop a comment on [this issue](https://github.com/arturbien/React95/issues/25)!

‎docs/usage.mdx

-56
This file was deleted.

‎doczrc.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export default {
22
typescript: false,
3-
menu: ['Welcome', 'Getting Started'],
3+
menu: ['Welcome', 'Getting Started', 'Contributing', 'Submit your project'],
44
themeConfig: {
55
initialColorMode: 'light'
66
},

0 commit comments

Comments
 (0)