Merge pull request #29 from Shopify/fix/release

Get documentation ready for the release

Author: william-candillon

README.md

@@ -4,19 +4,24 @@ https://shopify.github.io/react-native-skia
 
 React Native Skia brings the Skia Graphics Library to React Native. Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox and, Firefox OS, and many other products.
 
+* This is an alpha release. Use with caution. *
+
 ## Installation
 
 React Native Skia brings the [Skia Graphics Library](https://skia.org/) to React Native.
 Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox and, Firefox OS, and many other products.
 
+When reading these lines, the package is not yet available on npm.
+Use the link below to install the package.
+
 ```sh
-$ yarn add @shopify/react-native-skia
+$ yarn add https://github.com/Shopify/react-native-skia/releases/download/v0.1.43-alpha/shopify-react-native-skia-0.1.43.tgz
 ```
 
 Or using npm:
 
 ```sh
-$ npm install @shopify/react-native-skia
+$ npm install https://github.com/Shopify/react-native-skia/releases/download/v0.1.43-alpha/shopify-react-native-skia-0.1.43.tgz
 ```
 
 ### iOS

docs/docs/getting-started/installation.md

@@ -8,14 +8,25 @@ slug: /getting-started/installation
 React Native Skia brings the [Skia Graphics Library](https://skia.org/) to React Native.
 Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox and, Firefox OS, and many other products.
 
+
+:::warning
+
+This is an alpha release.
+Use with caution.
+
+:::
+
+When reading these lines, the package is not yet available on npm.
+Use the link below to install the package.
+
 ```sh
-$ yarn add @shopify/react-native-skia
+$ yarn add https://github.com/Shopify/react-native-skia/releases/download/v0.1.43-alpha/shopify-react-native-skia-0.1.43.tgz
 ```
 
 Or using npm:
 
 ```sh
-$ npm add @shopify/react-native-skia
+$ npm install https://github.com/Shopify/react-native-skia/releases/download/v0.1.43-alpha/shopify-react-native-skia-0.1.43.tgz
 ```
 
 ## iOS

docs/docusaurus.config.js

@@ -8,8 +8,8 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 const config = {
   title: "React Native Skia",
   tagline: "High Performance 2D Graphics",
-  url: "https://your-docusaurus-test-site.com",
-  baseUrl: "/",
+  url: "https://shopify.github.io/",
+  baseUrl: "/react-native-skia/",
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
   favicon: "img/favicon.ico",
@@ -71,7 +71,7 @@ const config = {
         title: "React Native Skia",
         logo: {
           alt: "React Native Skia",
-          src: "img/logo.png",
+          src: "/react-native-skia/img/logo.png",
         },
         items: [
           {

docs/src/pages/index.module.css

@@ -8,6 +8,7 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  /* background-color: #85b3ff; */
 }
 
 @media screen and (max-width: 966px) {

docs/src/pages/index.tsx

@@ -11,6 +11,7 @@ function HomepageHeader() {
   return (
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
+        {/* <img src="/img/skia2.png" alt="Skia" height="200" width="auto" /> */}
         <h1 className="hero__title">{siteConfig.title}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
@@ -35,7 +36,29 @@ export default function Home() {
       description="High Performance 2D Graphics"
     >
       <HomepageHeader />
-      <main />
+      <main>
+        <div
+          className="container"
+          style={{
+            display: "flex",
+            flexGrow: 1,
+            justifyContent: "center",
+            alignItems: "center",
+            marginTop: "2rem",
+            marginBottom: "2rem",
+          }}
+        >
+          <iframe
+            width="560"
+            height="315"
+            src="https://www.youtube.com/embed/EHxEX78alZE"
+            title="YouTube video player"
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          />
+        </div>
+      </main>
     </Layout>
   );
 }