Merge pull request #559 from talkjs/docs/add-folder-download-links

Add project zip download links to READMEs

android/basic-example/README.md

@@ -1,8 +1,6 @@
-TalkJS Basic Android Example
-============================
+# TalkJS and Android basic example
 
-This code shows how you can embed TalkJS into a WebView using Android.
-The app itself is a minimal WhatsApp clone with a hardcoded contact list.
+This code shows how you can embed TalkJS into a WebView using Android. The app itself is a minimal WhatsApp clone with a hardcoded contact list.
 
 It shows off three use cases:
 - Show a conversation list (the "inbox")
@@ -13,3 +11,6 @@ How it works, in brief:
 1. When the Inbox (`InboxTab`) is opened, a webview is created which runs the JS code in `asserts/chat.js`, which is generic for all three use cases
 2. The JS code calls back into the app via `JavascriptCallbacks.getOptions` to determine what to do (open an inbox, start a chat with somebody, etc). Then, it calls TalkJS SDK methods as described in the [TalkJS docs](https://talkjs.com/docs).
 3. When a user clicks on a conversation in the inbox, an intent is generated to navigate to the `ChatboxActivity`, which reuses the code above to display a chatbox of a single conversation, instead of a conversation list.
+
+> [!TIP]
+> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/android.basic-example.zip)

android/file-upload-example/README.md

@@ -1,17 +1,20 @@
-# TalkJS Android File Upload Example
+# Android file upload example
 
 This code shows how to implement file upload support in Android's WebView.
 Despite TalkJS already supporting uploading of files, the default Android WebView implementation
 does not implement file uploads. The code also shows how to upload rich content
 to TalkJS via the [unified API](https://developer.android.com/develop/ui/views/receive-rich-content)
 This enables users to upload images and videos from the clipboard, keyboard or through drag and drop.
 
+> [!TIP]
+> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/android.file-upload-example.zip)
+
 ## Getting Started
 
 It is recommended to open this project in Android Studio so that Gradle sync is handled
 automatically for you.
 
-Before running the app, don’t forget to replace the string, YOUR_APP_ID, with your TalkJS app ID from the dashboard.
+Before running the app, don’t forget to replace the string, `YOUR_APP_ID`, with your app ID from the [TalkJS dashboard](https://talkjs.com/dashboard/).
 
 This code sample was used as part of two tutorials:
 

angular/angular-chat-app/README.md

@@ -2,6 +2,9 @@
 
 This is an example project for TalkJS's tutorial on [how to build a chat into an Angular app with TalkJS](https://talkjs.com/resources/angular-chat-app/).
 
+> [!TIP]
+> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/angular.angular-chat-app.zip)
+
 ## Prerequisites
 
 To run this tutorial, you will need:
@@ -13,7 +16,7 @@ To run this tutorial, you will need:
 
 ## How to run the tutorial
 
-1. Clone or download the project.
+1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/angular.angular-chat-app.zip).
 2. Replace `YOUR_APP_ID_HERE` in `src/app/talk.service.ts` with your own app ID. You can find your app ID on the **Settings** page of your [TalkJS dashboard](https://talkjs.com/dashboard/).
 3. Run `npm install` to install dependencies.
 4. Run `ng serve` to start the server.

angular/angular-getting-started/README.md

@@ -2,6 +2,9 @@
 
 This is the example code for the [Angular getting started guide](https://talkjs.com/docs/Getting_Started/Frameworks/Angular/).
 
+> [!TIP]
+> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/angular.angular-getting-started.zip)
+
 ## Prerequisites
 
 To run this tutorial, you will need:
@@ -12,7 +15,7 @@ To run this tutorial, you will need:
 
 ## How to run the tutorial
 
-1. Clone or download the project.
+1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/angular.angular-getting-started.zip).
 2. Replace `<APP_ID>` in `src/app/talkjs-chat/talkjs-chat.component.ts` with the value found in the **Settings** tab of your [TalkJS dashboard](https://talkjs.com/dashboard/login).
 3. Run `npm install` to install dependencies.
 4. Run `ng serve` to start the server.

chatbot-integration/anthropic-claude/README.md

@@ -1,5 +1,10 @@
+# How to integrate Claude into your TalkJS chat with the Anthropic API
+
 This is an example project for TalkJS's tutorial on [How to integrate Claude into your TalkJS chat with the Anthropic API](https://talkjs.com/resources/how-to-integrate-claude-into-your-talkjs-chat-with-the-anthropic-api/). The project uses TalkJS webhooks to listen for new message events from the TalkJS server, calls the Anthropic API to generate a message reply, and then adds the reply to the conversation with the TalkJS API.
 
+> [!TIP]
+> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/chatbot-integration.anthropic-claude.zip)
+
 ## Prerequisites
 
 To run this tutorial, you will need:
@@ -12,7 +17,7 @@ To run this tutorial, you will need:
 
 ## How to run the tutorial
 
-1. Clone or download the project.
+1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/chatbot-integration.anthropic-claude.zip).
 2. Replace `<APP_ID>` and `<TALKJS_SECRET_KEY>` in `index.html` and `server.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login).
 3. Replace `<ANTHROPIC_SECRET_KEY>` with your Anthropic API key
 4. Enable the `message.sent` option in the **Webhooks** section of the TalkJS dashboard.

chatbot-integration/google-gemini/README.md

@@ -1,5 +1,10 @@
+# How to integrate Google's Gemini into your TalkJS chat
+
 This is an example project for TalkJS's tutorial on [How to integrate Google's Gemini into your TalkJS chat](https://talkjs.com/resources/create-a-chatbot-with-talkjs-and-gemini/). The project uses TalkJS webhooks to listen for new message events from the TalkJS server, calls the Gemini API to generate a message reply, and then adds the reply to the conversation with the TalkJS API.
 
+> [!TIP]
+> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/chatbot-integration.google-gemini.zip)
+
 ## Prerequisites
 
 To run this tutorial, you will need:
@@ -12,7 +17,7 @@ To run this tutorial, you will need:
 
 ## How to run the tutorial
 
-1. Clone or download the project.
+1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/chatbot-integration.google-gemini.zip).
 2. Replace `<APP_ID>` and `<TALKJS_SECRET_KEY>` in `index.html` and `server.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login).
 3. Replace `<GEMINI_SECRET_KEY>` with your Anthropic API key
 4. Enable the `message.sent` option in the **Webhooks** section of the TalkJS dashboard.

chatbot-integration/openai-chatgpt/README.md

@@ -1,7 +1,12 @@
+# How to integrate a chatbot into your TalkJS chat with the OpenAI API
+
 This is an example project for TalkJS's tutorial on [How to integrate a chatbot into your TalkJS chat with the OpenAI API](https://talkjs.com/resources/how-to-make-a-customizable-chatbot-frontend-with-talkjs-and-the-openai-api/).
 
 The project uses TalkJS webhooks to listen for new message events from the TalkJS server, calls the OpenAI API to generate a message reply, and then adds the reply to the conversation with the TalkJS API.
 
+> [!TIP]
+> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/chatbot-integration.openai-chatgpt.zip)
+
 ## Prerequisites
 
 To run this tutorial, you will need:
@@ -14,7 +19,7 @@ To run this tutorial, you will need:
 
 ## How to run the tutorial
 
-1. Clone or download the project.
+1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/chatbot-integration.openai-chatgpt.zip).
 2. Replace `<APP_ID>` and `<TALKJS_SECRET_KEY>` in `index.html` and `server.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login).
 3. Replace `<OPENAI_SECRET_KEY>` with your OpenAI API key
 4. Enable the `message.sent` option in the **Webhooks** section of the TalkJS dashboard.

csharp/blazor_talkjs/README.md

@@ -1,11 +1,14 @@
-# TalkJS and Blazor integration tutorial example 
+# TalkJS and Blazor example
 
 This is an example project for TalkJS's tutorial on [how to integrate TalkJS with a Blazor app](https://talkjs.com/resources/how-to-add-chat-to-a-blazor-web-app-with-talkjs/).
 
 This example demonstrates how to integrate TalkJS with a Blazor web application. There is one project present inside the repo:
 
 - The `Blazor Web App` Interactive Server project which uses TalkJS's [JavaScript SDK](https://talkjs.com/docs/Getting_Started/JavaScript_SDK) to create a one on one chat.
 
+> [!TIP]
+> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/csharp.blazor_talkjs.zip)
+
 ## Prerequisites
 
 To run this tutorial project, you will need:
@@ -14,7 +17,7 @@ To run this tutorial project, you will need:
 - .NET 8 [SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0)
 - A code editor like [Visual Studio Code](https://code.visualstudio.com/download) or IDE like [Visual Studio](https://visualstudio.microsoft.com/vs/community/)
 
-1. Clone or download the project.
+1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/csharp.blazor_talkjs.zip).
 1. Open the project in your code editor or IDE.
 1. In the `Home.razor` page, replace `<APP_ID>` in the `AppId` string property with your App Id which can be found in the **Settings** tab of your [TalkJS dashboard](https://talkjs.com/dashboard/login). 
 1. From the `blazor_talkjs` directory, run the command `dotnet watch` to render your project on the browser.

django/django_talkjs/README.md

@@ -2,6 +2,9 @@
 
 This is an example project for TalkJS's tutorial on [how to build a Django chat app with TalkJS](https://talkjs.com/resources/how-to-build-a-django-chat-app-with-talkjs/). This example demonstrates how to integrate TalkJS with a Python application that uses the Django framework.
 
+> [!TIP]
+> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/django.django_talkjs.zip)
+
 ## Prerequisites
 
 To run this tutorial, you will need:
@@ -11,7 +14,7 @@ To run this tutorial, you will need:
 
 ## How to run the tutorial
 
-1. Clone or download the project.
+1. Clone or [download this project](https://github.com/talkjs/talkjs-examples/releases/latest/download/django.django_talkjs.zip).
 2. Replace `<APP_ID>` in `talkjs/templates/talkjs/chat.html` with the value found in the **Settings** tab of your [TalkJS dashboard](https://talkjs.com/dashboard/login).
 3. Install Django:
    ```bash

django/gameschat/README.md

@@ -1,25 +1,21 @@
-# Games Chat App with Django and TalkJS
+# Games chat app with Django and TalkJS
 
-## Context
 This directory contains two games chat applications: one with and one without TalkJS integrated.
 
 The application without chat functionality serves as a start application for the TalkJS implementation tutorial, in which chat functionalities are being added within a project. The final product of the tutorial is the games chat application with chat functionality. 
 
-## First things first
+You can find additional information in the tutorial [How to add chat to a Django app with TalkJS](https://talkjs.com/tutorials/article/how-to-add-direct-messaging-to-a-discussion-forum-with-django-and-talkjs/).
 
-### Python version
-Make sure you're working with Python 3.7.4 or above.
-You can download it from [here](https://www.python.org/).
+> [!TIP]
+> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/django.gameschat.zip)
 
-Make sure you tick the box that says 'Add Python to PATH'.
+## Prerequisites
 
-### PostgreSQL version
-Make sure you're working with PostgreSQL 11.6 or above.
-You can download it from [here](https://www.enterprisedb.com/downloads/postgres-postgresql-downloads).
-
-Through the installation you will be asked to enter a password for your database. In this example the password `gameschat` is used, but you can write whatever you want, just make sure to remember it because you will need it later. 
+- **Python version:** Make sure you're working with Python 3.7.4 or above. You can download it from [here](https://www.python.org/). Make sure you tick the box that says 'Add Python to PATH'.
+- **PostgreSQL version:** Make sure you're working with PostgreSQL 11.6 or above. You can download it from [here](https://www.enterprisedb.com/downloads/postgres-postgresql-downloads). You'll be asked to enter a password for your database. In this example the password `gameschat` is used, but you can write whatever you want. Just make sure to remember your password because you'll need it later. 
 
 ## Getting started
+
 The following steps should be executed in either the ```gameschat-with-talkjs``` or ```gameschat-without-talkjs``` directory.
 
 - After the installation of PostgreSQL is done, start the `pgAdmin` which will open the database in your browser. Enter the password you chose during the installation. Expand the Servers section from the `Browser` on the right (if asked enter the same password again). Right click on `Databases->Create->Database...`, then enter the name you want and click `Save`.
@@ -39,7 +35,8 @@ The following steps should be executed in either the ```gameschat-with-talkjs```
 
 - After you've cloned/downloaded the repository, open the terminal in the project's directory and write `pip install -r requirements.txt`. After the installation is done, write `python manage.py migrate`. Lastly, write `python manage.py runserver`, this will start the server on port 8000. Go ahead and write the following in your browser `http://localhost:8000`.
 
-Good job! Additional information can be found in the [tutorial](https://talkjs.com/tutorials/article/how-to-add-direct-messaging-to-a-discussion-forum-with-django-and-talkjs/) of this application.
+Good job!
 
 ## Documentation
+
 For more information on how to integrate TalkJS into your projects, check out our [documentation](https://talkjs.com/docs/?ref=gh-example-readme).

flask/README.md

@@ -4,8 +4,8 @@ This is an example project for TalkJS's tutorial on [how to build a Flask chat a
 
 This example demonstrates how to integrate TalkJS with a Python application that uses the Flask framework. There are two projects present inside the repo:
 
-- The `talkjs-flask-python` project contains the Flask backend, which serves a REST endpoint with user data.
-- The `talkjs-frontend` project contains the frontend code, which uses TalkJS's [JavaScript SDK](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/) to create chats between users.
+- `talkjs-flask-python`: This project contains the Flask backend, which serves a REST endpoint with user data.  [Download `talkjs-flask-python` as a zip file.](https://github.com/talkjs/talkjs-examples/releases/latest/download/flask.talkjs-flask-python.zip)
+- `talkjs-frontend`: This project contains the frontend code, which uses TalkJS's [JavaScript SDK](https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/) to create chats between users. [Download `talkjs-frontend` as a zip file.](https://github.com/talkjs/talkjs-examples/releases/latest/download/flask.talkjs-frontend.zip)
 
 ## Prerequisites
 
@@ -16,7 +16,7 @@ To run this tutorial, you will need:
 
 ## How to run the tutorial
 
-1. Clone or download the project.
+1. Clone or download the project (as zip files: [`talkjs-flask-python`](https://github.com/talkjs/talkjs-examples/releases/latest/download/flask.talkjs-flask-python.zip) and [`talkjs-frontend`](https://github.com/talkjs/talkjs-examples/releases/latest/download/flask.talkjs-frontend.zip)).
 1. From the `talkjs-flask-python` directory:
    1. Run `pip install flask` and `pip install flask-cors` to install the dependencies
    1. Run `python3 flask-python.py` to run the project

flutter_sdk/basic-example/README.md

@@ -1,8 +1,11 @@
-# TalkJS Flutter SDK example
+# TalkJS and Flutter example
 
-An example project that shows both the ChatBox and ConversationList widgets of TalkJS
+An example project that shows both the [ChatBox](https://talkjs.com/docs/Reference/Flutter_SDK/Widgets/Chatbox/) and [ConversationList](https://talkjs.com/docs/Reference/Flutter_SDK/Widgets/ConversationList/) widgets of TalkJS.
 
-## Getting Started
+> [!TIP]
+> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/flutter_sdk.basic-example.zip)
+
+## Getting started
 
 The first thing to do is to install all the dependencies with the command:
 
@@ -12,8 +15,7 @@ flutter pub get
 
 This is to be done only once.
 
-After that, change in the `lib/main.dart` file the 'YOUR_APP_ID' string with a
-valid appId.
+After that, change in the `lib/main.dart` file the 'YOUR_APP_ID' string with a valid appId.
 
 Finally, connect an Android/iOS device or emulator and run:
 
@@ -27,29 +29,17 @@ to run the example.
 
 This example uses the 'provider' package to manage a global app state.
 
-The `MyAppState` class has a `session` and a `conversation` properties, that
-are used by the ChatBox and ConversationList widgets.
+The `MyAppState` class has a `session` and a `conversation` properties, that are used by the ChatBox and ConversationList widgets.
 
-The `conversation` property is in reality a getter and setter pair, in order
-to call the `notifyListeners()` functions whenever the `conversation` property
-is changed.
+The `conversation` property is in reality a getter and setter pair, in order to call the `notifyListeners()` functions whenever the `conversation` property is changed.
 
-In our `main()` function the TalkJS Session is initialized, and is used as the
-global app state.
+In our `main()` function the TalkJS Session is initialized, and is used as the global app state.
 
 The app has 3 routes:
-'/' contains the buttons to select either a ChatBox or ConversationList
-'/chatbox' is the ChatBox screen, and finally
-'/conversationlist' is the ConversationList screen.
-
-The ChatBoxScreen uses Consumer<MyAppState> in order to get the global session
-and conversation objects, and be able to rebuild itself whenever the global
-state changes.
+- '/' contains the buttons to select either a ChatBox or ConversationList
+- '/chatbox' is the ChatBox screen, and finally
+- '/conversationlist' is the ConversationList screen.
 
-The ConversationList has an event called `onSelectConversation` that is
-triggered when the user clicks on a conversation.
-When the event is triggered, a new `Conversation` object is built, using the
-`id` ov the selected conversation, then this object is assigned to the global
-app state, and finally we navigate to the '/chatbox' route to show a ChatBox
-widget with the selected conversation.
+The ChatBoxScreen uses Consumer<MyAppState> in order to get the global session and conversation objects, and be able to rebuild itself whenever the global state changes.
 
+The ConversationList has an event called `onSelectConversation` that is triggered when the user clicks on a conversation. When the event is triggered, a new `Conversation` object is built, using the `id` of the selected conversation, then this object is assigned to the global app state, and finally we navigate to the '/chatbox' route to show a ChatBox widget with the selected conversation.