StandWithUkraine

README.md

@@ -1,3 +1,5 @@
+[![SWUbanner](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct.svg)](https://stand-with-ukraine.pp.ua)
+
 <p align="center">
      <img src="https://user-images.githubusercontent.com/1780255/105469025-56759000-5ca0-11eb-993d-3568c1fd54f4.png" height="250px" style="display:block"/>
 </p>
@@ -6,13 +8,12 @@
      <img src="https://user-images.githubusercontent.com/1780255/105469340-bec47180-5ca0-11eb-8986-3eb986f884d9.jpg"/>
 </p>
 
-
 ---
+
 [![Build Status](https://travis-ci.org/wix/react-native-ui-lib.svg?branch=master)](https://travis-ci.org/wix/react-native-ui-lib)
 [![npm](https://img.shields.io/npm/v/react-native-ui-lib.svg)](https://www.npmjs.com/package/react-native-ui-lib)
 [![NPM Downloads](https://img.shields.io/npm/dm/react-native-ui-lib.svg?style=flat)](https://www.npmjs.com/package/react-native-ui-lib)
- <a href="https://twitter.com/rnuilib"><img src="https://img.shields.io/twitter/follow/rnuilib.svg?style=flat&colorA=1DA1F2&colorB=20303C&label=Follow%20us%20on%20Twitter" alt="Follow on Twitter"></a>
-
+<a href="https://twitter.com/rnuilib"><img src="https://img.shields.io/twitter/follow/rnuilib.svg?style=flat&colorA=1DA1F2&colorB=20303C&label=Follow%20us%20on%20Twitter" alt="Follow on Twitter"></a>
 
 Check out our [Docs](https://wix.github.io/react-native-ui-lib/). <br>
 Our [Discord Channel](https://discord.gg/2eW4g6Z)
@@ -21,23 +22,26 @@ Download our Expo demo app <br>
 <img height="120" src="https://user-images.githubusercontent.com/1780255/76164023-f2171400-6153-11ea-962d-d57b64a08a80.png"> <br>
 (You will need the Expo App)
 
-
 ## Installing
 
 See setup instructions [here](https://wix.github.io/react-native-ui-lib/docs/getting-started/setup).
 
 #### New Major Version 6.0
+
 See [breaking changes](https://wix.github.io/react-native-ui-lib/docs/getting-started/v6)
 
 #### For React Native >= 0.60.0
+
 please use `react-native-ui-lib`
 
 #### For React Native < 0.60.0
+
 please use `react-native-ui-lib@^3.0.0`
 
 ## Create your own Design System in 3 easy steps
 
 ### Step 1
+
 Load your foundations and presets (colors, typography, spacings, etc...)
 
 ```js
@@ -57,18 +61,18 @@ Colors.loadColors({
 Typography.loadTypographies({
   heading: {fontSize: 36, fontWeight: '600'},
   subheading: {fontSize: 28, fontWeight: '500'},
-  body: {fontSize: 18, fontWeight: '400'},
+  body: {fontSize: 18, fontWeight: '400'}
 });
 
 Spacings.loadSpacings({
   page: 20,
   card: 12,
   gridGutter: 16
 });
-
 ```
 
 ### Step 2
+
 Set default configurations to your components
 
 ```js
@@ -94,8 +98,9 @@ ThemeManager.setComponentTheme('Button', (props, context) => {
 ```
 
 ### Step 3
-Use it all together. 
-Your configurations will be applied on uilib components so you can use them easily with [modifiers](https://wix.github.io/react-native-ui-lib/docs/foundation/modifiers). 
+
+Use it all together.
+Your configurations will be applied on uilib components so you can use them easily with [modifiers](https://wix.github.io/react-native-ui-lib/docs/foundation/modifiers).
 
 ```jsx
 // MyScreen.js
@@ -107,15 +112,16 @@ class MyScreen extends Component {
   render() {
     return (
       <View flex padding-page>
-        <Text heading marginB-s4>My Screen</Text>
+        <Text heading marginB-s4>
+          My Screen
+        </Text>
         <Card height={100} center padding-card marginB-s4>
           <Text body>This is an example card </Text>
         </Card>
-        
+
         <Button label="Button" body bg-primaryColor square></Button>
       </View>
     );
   }
 }
 ```
-

docuilib/docusaurus.config.js

@@ -29,7 +29,8 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
             sidebarPath: require.resolve('./sidebars.js'),
             path: '../docs',
             // Please change this to your repo.
-            editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/'
+            editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
+            docLayoutComponent: '@site/src/components/CustomLayout'
           },
           blog: {
             showReadingTime: true,

docuilib/src/components/CustomLayout.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import DocPage from '@theme/DocPage';
+import StandWithUkraine from '@site/src/components/StandWithUkraine';
+
+export default function CustomLayout(props) {
+  return (
+    <>
+      <StandWithUkraine />
+      <DocPage {...props} />
+    </>
+  );
+}

docuilib/src/components/StandWithUkraine.module.scss

@@ -0,0 +1,28 @@
+.banner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #1f243c;
+  padding: 0.5em;
+}
+
+.link {
+  color: #fff;
+  font-weight: bolder;
+  text-align: center;
+}
+
+.link:hover {
+  color: #fff;
+  text-decoration: none;
+}
+
+.hashtag {
+  color: #ffd600;
+}
+
+@media (min-width: 768px) {
+  .banner {
+    height: 56px;
+  }
+}

docuilib/src/components/StandWithUkraine.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './StandWithUkraine.module.scss';
+import Link from '@docusaurus/Link';
+
+export default function StandWithUkraine(props) {
+  return (
+    <div className={styles.banner}>
+      <Link to="https://stand-with-ukraine.pp.ua" className={styles.link}>
+        🇺🇦 This project is created with substantial contributions from our Ukrainian colleagues.{' '}
+        <span className={styles.hashtag}>#StandWithUkraine</span>
+      </Link>
+    </div>
+  );
+}

docuilib/src/pages/index.tsx

@@ -4,6 +4,7 @@ import Layout from '@theme/Layout';
 // import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 // import HomepageFeatures from '../components/HomepageFeatures';
 
+import StandWithUkraine from '../components/StandWithUkraine';
 import MainSection from '../components/MainSection';
 import ComponentsSection from '../components/ComponentsSection';
 import FeaturesSection from '../components/FeaturesSection';
@@ -13,16 +14,19 @@ import LibrariesSection from '../components/LibrariesSection';
 export default function Home(): JSX.Element {
   // const {siteConfig} = useDocusaurusContext();
   return (
-    <Layout
-      /* title={`Hello from ${siteConfig.title}`} */ description="Description will go into a meta tag in <head />"
-    >
-      <main>
-        <MainSection/>
-        <ComponentsSection/>
-        <FeaturesSection/>
-        <CodeSection/>
-        <LibrariesSection/>
-      </main>
-    </Layout>
+    <>
+      <StandWithUkraine />
+      <Layout
+        /* title={`Hello from ${siteConfig.title}`} */ description="Description will go into a meta tag in <head />"
+      >
+        <main>
+          <MainSection />
+          <ComponentsSection />
+          <FeaturesSection />
+          <CodeSection />
+          <LibrariesSection />
+        </main>
+      </Layout>
+    </>
   );
 }