3.0.1 yarn version is updated to 4.1.0 live demo links are converted …

…to stackblitz

.github/workflows/node.js.yml

@@ -25,7 +25,7 @@ jobs:
                   node-version: ${{ matrix.node-version }}
             - name: Update yarn @v2
               run: corepack enable
-            - run: corepack prepare yarn@4.0.1 --activate
+            - run: corepack prepare yarn@4.1.0 --activate
             - run: yarn -v
             - name: Install dependencies
               run: rm -rf node_modules && yarn install

.yarnrc.yml

@@ -4,4 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.1.cjs
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

README.md

@@ -51,11 +51,10 @@ export default MyComponent;
 
 ## Examples
 
-[![Edit form-quickstart](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/react-curved-text-demo-99276l)
 
 Checkout live examples on [react-curved-text-demo](https://obss.github.io/react-curved-text) page for various customizations.
 
-Checkout a [Live Example with Rotate Animation](https://codesandbox.io/embed/react-curved-text-animation-pt8fvk).
+Checkout a [Live Example with Rotate Animation](https://stackblitz.com/edit/react-curved-text-animation).
 
 
 ## API

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-curved-text",
-    "version": "3.0.0",
+    "version": "3.0.1",
     "description": "A library for creating circular / curved texts in React projects",
     "keywords": [
         "react",
@@ -80,5 +80,5 @@
             "last 1 safari version"
         ]
     },
-    "packageManager": "yarn@4.0.1"
+    "packageManager": "yarn@4.1.0"
 }

src/App.css

@@ -86,7 +86,8 @@
 .currentJsxDiv {
     margin-top: 50px;
     max-width: 500px;
-    margin: auto;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .currentJsxDiv span {
@@ -97,7 +98,7 @@
     float: left;
 }
 
-.codesandboxDiv {
+.demoLinkDiv {
     margin-top: 20px;
 }
 

src/App.jsx

@@ -55,11 +55,11 @@ function App() {
             <HeaderInfo />
             <div className="exampleDemo">
                 <br />
-                <h2>
+                <h1>
                     <a href={'https://www.npmjs.com/package/react-curved-text'} target="_blank" rel="noreferrer">
                         react-curved-text
                     </a>
-                </h2>
+                </h1>
 
                 <div className="installationDiv">
                     <pre>npm install react-curved-text</pre>
@@ -195,35 +195,25 @@ function App() {
                     </div>
                 </div>
                 <div className="currentJsxDiv">
-                    <h3>Current JSX</h3>
+                    <h2>Current JSX</h2>
                     <span>{currentJsxString}</span>
                 </div>
 
-                <div className="codesandboxDiv">
-                    <h3>Live Demo</h3>
-                    <a href="https://codesandbox.io/s/react-curved-text-demo-99276l" target="_blank" rel="noreferrer">
-                        <img
-                            src="https://codesandbox.io/static/img/play-codesandbox.svg"
-                            alt="Edit react-curved-text-demo"
-                        />
+                <h2>LIVE DEMO</h2>
+
+                <div className="demoLinkDiv">
+                    <a href="https://stackblitz.com/edit/react-curved-text-demo" target="_blank" rel="noreferrer">
+                        <h3>Checkout Live Demo</h3>
                     </a>
                 </div>
-                <div className="codesandboxDiv">
-                    <h3>Live Demo with Rotate Animation</h3>
-                    <a
-                        href="https://codesandbox.io/embed/react-curved-text-animation-pt8fvk"
-                        target="_blank"
-                        rel="noreferrer"
-                    >
-                        <img
-                            src="https://codesandbox.io/static/img/play-codesandbox.svg"
-                            alt="Edit react-curved-text-animation"
-                        />
+                <div className="demoLinkDiv">
+                    <a href="https://stackblitz.com/edit/react-curved-text-animation" target="_blank" rel="noreferrer">
+                        <h3>Checkout Live Demo with Rotate Animation</h3>
                     </a>
                 </div>
 
                 <div className="apiDiv">
-                    <h3>API</h3>
+                    <h2>API</h2>
                     <table className="apiTable">
                         <thead>
                             <tr>