docs: update docs

Author: luthfimasruri

docs/content/guide/index.md

@@ -1,15 +1,23 @@
 # Introduction
 
-## What is Quill
+<div class="replaceable-area">
 
-**Quill** is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and actively maintained by [Slab](https://slab.com/).
+::: warning
+🚀 **VueQuill** is in **@alpha** version! Currently the focus is on making VueQuill stable and feature complete first. It is not recommended to use this for anything serious yet. Some of its features are not "finalized" and will have breaking changes over time as we discover better solutions.
+:::
 
-You can learn more about the rationale behind the project in the [Why Quill](https://quilljs.com/guides/why-quill/) guides.
+</div>
 
 ## What is VueQuill
 
 **VueQuill** is a **Vue Component** for building rich text editors, this package is a thin wrapper around Quill to make it easier to use in a Vue 3 application.
 
+## What is Quill
+
+**Quill** is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and actively maintained by [Slab](https://slab.com/).
+
+You can learn more about the rationale behind the project in the [Why Quill](https://quilljs.com/guides/why-quill/) guides.
+
 ## Browser Support
 
 Cross-platform support is important to many Javascript libraries, but the criteria for what this means often differ. For Quill, the bar is not just that it runs or works, it has to run or work the same way. Not only is functionality a cross-platform consideration, but the user and developer experience are as well. If some content produces a particular markup in Chrome on OSX, it will produce the same markup on IE. If hitting enter preserves bold format state in Firefox on Windows, it will be preserved on mobile Safari.
@@ -19,3 +27,23 @@ Quill supports all modern browsers on desktops, tablets, and phones. Experience
 ## Community
 
 If you have questions or need help, reach out to the community at [GitHub Discussions](https://github.com/vueup/vue-quill/discussions).
+
+<!-- TextReplacer used to replace text after component mounted -->
+<ClientOnly>
+  <TextReplacer 
+    container=".replaceable-area"
+    pattern="@alpha" 
+    :replacement="latestRelease"
+  ></TextReplacer>
+</ClientOnly>
+
+<script setup>
+  import { onMounted, ref } from 'vue'
+  import TextReplacer from '../../components/TextReplacer.vue'
+  import { getLatestRelease } from '../../utils/github-api.ts'
+
+  const latestRelease = ref('')
+  onMounted(async () => {
+    latestRelease.value = await getLatestRelease('vueup', 'vue-quill').then(data => data)
+  })
+</script>

docs/content/guide/installation.md

@@ -8,48 +8,64 @@ This guide assumes intermediate-level knowledge of Vue 3. If you are totally new
 
 VueQuill ships as a UMD module that is accessible in the browser. When loaded in the browser, you can access the component through the `VueQuill.QuillEditor` global variable. You'll need to load Vue.js, VueQuill JS & VueQuill CSS theme.
 
-<div id="cdn-install">
+<div class="replaceable-area">
 
-  ```html
-  <!-- include VueJS first -->
-  <script src="https://unpkg.com/vue@latest"></script>
+```html
+<!-- include VueJS first -->
+<script src="https://unpkg.com/vue@next"></script>
 
-  <!-- use the latest VueQuill release -->
-  <script src="https://unpkg.com/@vueup/vue-quill@latest"></script>
-  <link rel="stylesheet" href="https://unpkg.com/@vueup/vue-quill@latest/dist/vue-quill.snow.css">
+<!-- use the latest VueQuill release -->
+<script src="https://unpkg.com/@vueup/vue-quill@latest"></script>
+<link rel="stylesheet" href="https://unpkg.com/@vueup/vue-quill@latest/dist/vue-quill.snow.css">
 
-  <!-- or point to a specific VueQuill release -->
-  <script src="https://unpkg.com/@vueup/vue-quill@$latestVersion"></script>
-  <link rel="stylesheet" href="https://unpkg.com/@vueup/vue-quill@$latestVersion/dist/vue-quill.snow.css">
-  ```
-</div>
+<!-- or point to a specific VueQuill release -->
+<script src="https://unpkg.com/@vueup/vue-quill@version"></script>
+<link rel="stylesheet" href="https://unpkg.com/@vueup/vue-quill@version/dist/vue-quill.snow.css">
+```
 
-  ::: warning 
-  For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions.
-  :::
+::: warning 
+For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions.
+:::
 
 ## NPM / Yarn
 
 Use the package manager [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) to install VueQuill.
 
 ```bash
-npm install @vueup/vue-quill --save
+npm install @vueup/vue-quill@latest --save
 # OR
-yarn add @vueup/vue-quill
+yarn add @vueup/vue-quill@latest
 ```
 
+</div>
+
 npm or yarn is the recommended installation method when you are using [Single File Component](usage.md#in-single-file-component), and then you can register the [Component](usage.md#in-single-file-component) in your app.
 
-<!-- GithubVersionSetter used to replace target with the latest github-release tag name -->
+<!-- TextReplacer used to replace text after component mounted -->
 <ClientOnly>
-  <GithubVersionSetter 
-    container="#cdn-install" 
-    target="$latestVersion" 
-    owner="vueup" 
-    repo="vue-quill"
-  ></GithubVersionSetter>
+  <TextReplacer 
+    container=".replaceable-area"
+    pattern="@latest" 
+    prefix="@"
+    :replacement="latestRelease"
+  ></TextReplacer>
+  <TextReplacer 
+    container=".replaceable-area"
+    pattern="@version"
+    prefix="@"
+    :replacement="latestReleaseVersion"
+  ></TextReplacer>
 </ClientOnly>
 
 <script setup>
-  import GithubVersionSetter from '../../components/GithubVersionSetter.vue'
+  import { onMounted, ref } from 'vue'
+  import TextReplacer from '../../components/TextReplacer.vue'
+  import { getLatestRelease, getLatestReleaseVersion } from '../../utils/github-api.ts'
+
+  const latestRelease = ref('')
+  const latestReleaseVersion = ref('')
+  onMounted(async () => {
+    latestRelease.value = await getLatestRelease('vueup', 'vue-quill').then(data => data)
+    latestReleaseVersion.value = await getLatestReleaseVersion('vueup', 'vue-quill').then(data => data)
+  })
 </script>