Merge pull request #404 from live-codes/docs

docs

README.md

@@ -110,7 +110,7 @@ Add this code to your page:
 - [Client-side!](https://livecodes.io/docs/why#client-side)
 - Very [configurable](https://livecodes.io/docs/configuration/)
 - Developer-friendly build-free environment
-- Powerful [SDK](https://livecodes.io/docs/sdk/) (available for [JavaScript, TypeScript](https://livecodes.io/docs/sdk/js-ts), [React](https://livecodes.io/docs/sdk/react) and [Vue](https://livecodes.io/docs/sdk/vue))
+- Powerful [SDK](https://livecodes.io/docs/sdk/) (available for [vanilla JavaScript, TypeScript](https://livecodes.io/docs/sdk/js-ts), [React](https://livecodes.io/docs/sdk/react), [Vue](https://livecodes.io/docs/sdk/vue) and [Svelte](https://livecodes.io/docs/sdk/svelte))
 - Comprehensive [Documentations](https://livecodes.io/docs/)
 - Focused on [privacy and security](https://livecodes.io/docs/features/security)
 - Free and [Open-Source](https://livecodes.io/docs/license)

docs/docs/features/index.md

@@ -8,7 +8,7 @@ sidebar_class_name: exclude_from_sidebar
 
 _LiveCodes_ is an open-source, client-side, code playground that runs in the browser. It enables quick prototyping and experimenting with a wide variety of [technologies](../languages/) (including 80+ languages, frameworks and processors) without having to manually setup a development environment for each. The [result](./result.md) is displayed as a regular web page. The rapid feedback of previewing the result page without waiting for build steps significantly boosts productivity.
 
-![LiveCodes screenshot](../../static/img/screenshots/react-template.png)
+![LiveCodes screenshot](../../static/img/screenshots/features.jpg)
 
 In this page, a quick overview of the important features are presented. A more detailed description of each feature is described in the following sections.
 
@@ -18,19 +18,19 @@ The default code editor is the powerful editor that powers [VS Code](https://cod
 
 ## Mobile-friendly
 
-The responsive layout allows working on devices with different screen sizes. On mobile, a lighter-weight touch-friendly code editor (Code Mirror 6) is used, so that you can experiment your ideas on the go.
+The responsive layout allows working on devices with different screen sizes. On mobile, a lighter-weight touch-friendly code editor (CodeMirror 6) is used, so that you can experiment your ideas on the go.
 
-## External code/libraries
+## External Code/Libraries
 
-[External scripts/stylesheets](./external-resources.md) can be added to the web page. There is a UI screen that helps you search for and add NPM libraries and google fonts. Moreover, [NPM modules can be imported](./module-resolution.md) without having to do any `npm install`s.
+[External scripts/stylesheets](./external-resources.md) can be added to the web page. There is a UI screen that helps you search for and add NPM libraries and google fonts. Moreover, [NPM modules can be imported](./module-resolution.md) without the need for any `npm install`s.
 
 ## Import and Code Pre-fill
 
 Code can be [imported](./import.md) from a variety of sources including GitHub gist, GitHub file, directory in a GitHub repo, Gitlab snippet, Gitlab file, directory in a Gitlab repo, JS Bin, raw code, code in web page DOM and code in zip file. You can also [pre-fill code](./code-prefill.md) using various ways.
 
 ## Share/Export
 
-Projects can be easily [shared](./share.md) as URLs or QR codes. In addition, you may export any project as HTML, JSON or zip file containing source code files. You may also export to other services like GitHub gists, CodePen or JSFiddle.
+Projects can be easily [shared](./share.md) as URLs or QR codes. In addition, you may [export](./export.md) any project as HTML, JSON or zip file containing source code files. You may also export to other services like GitHub gists, CodePen or JSFiddle.
 
 ## Embed
 
@@ -44,6 +44,8 @@ Projects can be [deployed](./deploy.md) to public URLs that can be shared with o
 
 A large number of [starter templates](./templates.md) are available. They can be used to get you started with most of the supported technologies.
 
+![Starter templates](../../static/img/screenshots/templates1.png)
+
 ## Assets
 
 Your own local assets (e.g. images, icons, fonts, local scripts and stylesheets) can be added to the app and then used in any project. The assets are made available even when the projects are shared, exported or deployed.
@@ -66,18 +68,15 @@ LiveCodes runs in the browser, where all the processing/transpilation occurs, wi
 
 ## Developer-friendly
 
-LiveCodes makes it easy to [get started](../getting-started). It is highly [configurable](../configuration). Lots of features can be
-configured by URL [query params](../configuration/query-params). The [SDK](../sdk/) facilitates [embedding](./embeds.md)
-playgrounds and allows easy [communication](../sdk/js-ts#sdk-methods) with
-them. The SDK is available for use in [JS/TS](../sdk/js-ts.md), [React](../sdk/react.md) [Vue](../sdk/vue.md) and [Svelte](../sdk/svelte.md).
+LiveCodes makes it easy to [get started](../getting-started). It is highly [configurable](../configuration). Lots of features can be configured by URL [query params](../configuration/query-params). The [SDK](../sdk/) facilitates [embedding](./embeds.md) playgrounds and allows easy [communication](../sdk/js-ts#sdk-methods) with them. The SDK is available for use in [JS/TS](../sdk/js-ts.md), [React](../sdk/react.md) [Vue](../sdk/vue.md) and [Svelte](../sdk/svelte.md).
 
 ## Comprehensive Documentations
 
 Rich documentations with screenshots, code samples and live demos are available. They cover the app [features](../features/), [configuration](../configuration/), [supported languages](../languages/) and [SDK](../sdk/) (including [TypeScript Types](../api/modules)). A gallery of usage examples is provided as a [storybook](pathname:///../stories).
 
 ## Focused on Privacy
 
-Projects are private by default. The code you write in LiveCodes never leaves your computer, unless you choose to [share](./share.md), [export](./export.md), [broadcast](./broadcast.md) or [sync](./sync.md) it. No cookies are used. User data is stored in the browser.
+Projects are private by default. The code you write in LiveCodes never leaves your computer, unless you choose to [share](./share.md), [export](./export.md), [broadcast](./broadcast.md) or [sync](./sync.md) it. User data is stored in the browser.
 
 ## Free and Open-Source
 

docs/docs/features/intellisense.md

@@ -1,4 +1,4 @@
-# Intellisense
+# IntelliSense
 
 import LiveCodes from '../../src/components/LiveCodes.tsx';
 

docs/docs/sdk/react.md

@@ -116,15 +116,15 @@ In addition, the following props are also available:
   Example:
 
   ```tsx title="TSX"
-  import React from 'react';
+  import React, { useState } from 'react';
   import LiveCodes from 'livecodes/react';
   import type { Playground } from 'livecodes';
 
   export const App = () => {
-    let playground: Playground | undefined;
+    const [playground, setPlayground] = useState<Playground>();
 
     const onReady = (sdk: Playground) => {
-      playground = sdk;
+      setPlayground(sdk);
     };
 
     const run = async () => {

docs/docs/sponsor.md

@@ -6,9 +6,11 @@ import MailLink from '../src/components/MailLink.tsx';
 
 # Sponsor LiveCodes
 
-Thank you for considering becoming a sponsor of LiveCodes!
+Thank you for considering becoming a sponsor of LiveCodes! 💚
 
-LiveCodes is an open source application that allows users to collaborate on code in real time. It is MIT-licensed, which means that it is freely available for anyone to use (including commercial use), modify, and distribute.
+LiveCodes is a feature-rich, open source code playground with a wide range of language support. With LiveCodes, learning, prototyping, experimenting, documenting, teaching, and sharing code is easier and more enjoyable than ever.
+
+LiveCodes is free, with no limits for use, no ads and no account required. The MIT license allows anyone to use (including commercial use), modify, and distribute.
 
 As a sponsor of LiveCodes, you will be supporting the ongoing development and maintenance of the project, as well as helping to ensure that it remains a valuable resource for the developer community. In return, you will receive recognition as a sponsor on the documentation website, GitHub repo and social media channels, as well as the opportunity to engage with our community of users and contributors.
 
@@ -20,7 +22,7 @@ LiveCodes relies on the support of sponsors like you to fund its ongoing develop
 
 Payments can be done via:
 
-- [GitHub Sponsors](https://github.com/sponsors/hatemhosny/)
+- [GitHub Sponsors](https://github.com/sponsors/live-codes/)
 - [PayPal](https://paypal.me/hatemhosni)
 - [Ko-fi](https://ko-fi.com/hatemhosny)
 
@@ -40,25 +42,26 @@ Help us to spread the word about LiveCodes by sharing our content on your social
 
 ### Sponsorship Benefits
 
-#### Friends (USD$5/mo):
+#### ☕️ Backers (USD$5/mo):
 
+- Name listed in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes).
 - Thank you 💚  
   Your support is really appreciated.
 
-#### Backers (USD$50/mo):
+#### 🍹 Generous Backers (USD$25/mo):
 
 - Name listed in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes).
 - Priority in feature requests.
 
-#### Bronze Sponsors (USD$100/mo):
+#### 🥉 Bronze Sponsors (USD$100/mo):
 
 - Access to a hosted (always-on) [broadcast API](./features/broadcast.md) and [custom services](./advanced/services.md).
 - Small logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs).
 - Small logo placement in [this page](#livecodes-sponsors).
 - Small logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes).
 - Priority in feature requests.
 
-#### Silver Sponsors (USD$250/mo):
+#### 🥈 Silver Sponsors (USD$250/mo):
 
 - Access to a hosted (always-on) [broadcast API](./features/broadcast.md) and [custom services](./advanced/services.md).
 - Medium logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs).
@@ -67,7 +70,7 @@ Help us to spread the word about LiveCodes by sharing our content on your social
 - Medium logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes).
 - Priority in feature requests.
 
-#### Gold Sponsors (USD$500/mo):
+#### 🥇 Gold Sponsors (USD$500/mo):
 
 - Access to a hosted (always-on) [broadcast API](./features/broadcast.md) and [custom services](./advanced/services.md).
 - Large logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs).
@@ -76,7 +79,7 @@ Help us to spread the word about LiveCodes by sharing our content on your social
 - Large logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes).
 - Priority in feature requests.
 
-#### Platinum Sponsors (USD$1,000/mo):
+#### 🏆 Platinum Sponsors (USD$1,000/mo):
 
 - Access to a hosted (always-on) [broadcast API](./features/broadcast.md) and [custom services](./advanced/services.md).
 - Prominent logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs).
@@ -85,17 +88,17 @@ Help us to spread the word about LiveCodes by sharing our content on your social
 - Prominent logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes).
 - Priority in feature requests.
 
-#### Diamond Sponsors (USD$2,000/mo):
+#### 💎 Diamond Sponsors (USD$2,000/mo):
 
-- **Custom build** of the playground with your **logo, brand**. The custom build is maintained and receives new updates.
+- **Custom build** of the playground with your **logo and brand**. The custom build is maintained and receives new updates.
 - Access to a hosted (always-on) [broadcast API](./features/broadcast.md) and [custom services](./advanced/services.md).
 - Prominent logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs).
 - Prominent logo placement in sidebar of all content pages.
 - Prominent logo placement at the top of [this page](#).
 - Prominent logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes).
 - Priority in feature requests.
 
-#### Special Sponsors (> USD$2,000/mo):
+#### 🌟 Special Sponsors (> USD$2,000/mo):
 
 &nbsp;&nbsp;&nbsp;&nbsp;<MailLink email="sponsor&#64;livecodes&#46;io" text="Let's discuss" />.
 
@@ -105,4 +108,4 @@ If you are interested in becoming a sponsor of LiveCodes, please don't hesitate
 
 ## LiveCodes Sponsors
 
-<div style={{display: "flex", alignItems: "center", justifyContent: "center", height:" 60px", width: "300px", border: "1px solid #3c3c3c75", borderRadius: "3px", backgroundColor: "#f9f9f9", margin: "0.5em", marginBottom: "1.5em", color: "#3c3c3c54"}}>You logo here</div>
+<div style={{display: "flex", alignItems: "center", justifyContent: "center", height:" 60px", width: "300px", border: "1px solid #3c3c3c75", borderRadius: "3px", backgroundColor: "#f9f9f9", margin: "0.5em", marginBottom: "1.5em", color: "#3c3c3c54"}}>Your logo here</div>