Create doc-deploy.yml

.github/workflows/doc-deploy.yml

@@ -0,0 +1,55 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+    # Review gh actions docs if you want to further define triggers, paths, etc
+    # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on
+
+jobs:
+  build:
+    name: Build Docusaurus
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: docs
+
+      - name: Build website
+        run: yarn build
+        working-directory: docs
+
+      - name: Upload Build Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/build
+
+  deploy:
+    name: Deploy to GitHub Pages
+    needs: build
+
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
+
+    # Deploy to the github-pages environment
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

docs/docs/available-scripts.md

@@ -4,38 +4,21 @@ title: Available Scripts
 sidebar_label: Available Scripts
 ---
 
-##
+:::warning
 
-In the project directory, you can run:
+This section is only for **`Javascript`** and **`Typescript`** templates, and if you use **`Nui`** integration
 
-## `npm start`
+:::
 
-Runs the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+### `pnpm watch`
 
-The page will reload if you make edits. You will also see any lint errors in the console.
+It will run the watch command in each sub package `client`, `server` and `web`.<br/>
+The command will create bundles in watch mode. So it will be rebuild if you make change
 
-## `npm test`
+### `pnpm build`
 
-Launches the test runner in the interactive watch mode. See the section about [running tests](running-tests.md) for more information.
+Builds the packages for production to the `dist` folder
 
-## `npm run build`
+### `npm run build`
 
-Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes. If necessary, classnames and function names can be enabled for profiling purposes. See the [production build](production-build.md) section for more information.
-
-Your app is ready to be deployed! See the section about [deployment](deployment.md) for more information about deploying your application to popular hosting providers.
-
-## `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc.) into your project as dependencies in `package.json`. Technically, the distinction between dependencies and development dependencies is pretty arbitrary for front-end apps that produce static bundles.
-
-In addition, it used to cause problems with some hosting platforms that didn't install development dependencies (and thus weren't able to build the project on the server or test it right before deployment). You are free to rearrange your dependencies in `package.json` as you see fit.
-
-All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+Builds the packages for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance.

docs/docs/supported-features.md

@@ -0,0 +1,70 @@
+---
+id: supported-features
+title: Supported Features
+sidebar_label: Supported Features
+---
+
+## Supported Runtime
+
+<div>
+  <div style="width: 33vw">
+    <img src="/img/ts-logo-512.svg"/>
+  </div>
+  <div style="width: 33vw">
+    <img src="/img/js-logo.png"/>
+  </div>
+  <div style="width: 33vw">
+   <img src="/img/lua.svg"/>
+  </div>
+</div>
+
+## Supported Nui Framework
+
+- React
+- Vue
+
+## Supported Language Features
+
+This project supports a superset of the latest JavaScript standard. In addition to [ES6](https://github.com/lukehoban/es6features) syntax features, it also supports:
+
+- [Exponentiation Operator](https://github.com/rwaldron/exponentiation-operator) (ES2016).
+- [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017).
+- [Object Rest/Spread Properties](https://github.com/tc39/proposal-object-rest-spread) (ES2018).
+- [Dynamic import()](https://github.com/tc39/proposal-dynamic-import) (stage 4 proposal)
+- [Class Fields and Static Properties](https://github.com/tc39/proposal-class-public-fields) (part of stage 3 proposal).
+- [JSX](https://facebook.github.io/react/docs/introducing-jsx.html), [Flow](./adding-flow) and [TypeScript](./adding-typescript).
+
+Learn more about [different proposal stages](https://tc39.github.io/process-document/).
+
+While we recommend using experimental proposals with some caution, Facebook heavily uses these features in the product code, so we intend to provide [codemods](https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb) if any of these proposals change in the future.
+
+Note that **this project includes no [polyfills](https://github.com/facebook/create-react-app/blob/main/packages/react-app-polyfill/README.md)** by default.
+
+If you use any other ES6+ features that need **runtime support** (such as `Array.from()` or `Symbol`), make sure you are [including the appropriate polyfills manually](https://github.com/facebook/create-react-app/blob/main/packages/react-app-polyfill/README.md), or that the browsers you are targeting already support them.
+
+## Configuring Supported Browsers
+
+By default, the generated project includes a [`browserslist`](https://github.com/browserslist/browserslist) configuration in your `package.json` file to target a broad range of browsers based on global usage (`> 0.2%`) for production builds, and modern browsers for development. This gives a good development experience, especially when using language features such as async/await, but still provides high compatibility with many browsers in production.
+
+The `browserslist` configuration controls the outputted JavaScript so that the emitted code will be compatible with the browsers specified. The `production` list will be used when creating a production build by running the `build` script, and the `development` list will be used when running the `start` script. You can use [https://browserl.ist](https://browserl.ist/?q=%3E+0.2%25%2C+not+dead%2C+not+op_mini+all) to see the browsers supported by your configured `browserslist`.
+
+Here is an example `browserslist` that is specified in `package.json`:
+
+```json
+"browserslist": {
+  "production": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
+  "development": [
+    "last 1 chrome version",
+    "last 1 firefox version",
+    "last 1 safari version"
+  ]
+}
+```
+
+> Note that this does not include polyfills automatically for you. You will still need to polyfill language features (see above) as needed based on the browsers you are supporting.
+
+> When editing the `browserslist` config, you may notice that your changes don't get picked up right away. This is due to an [issue in babel-loader](https://github.com/babel/babel-loader/issues/690) not detecting the change in your `package.json`. A quick solution is to delete the `node_modules/.cache` folder and try again.

docs/docusaurus.config.ts

@@ -9,7 +9,7 @@ const config: Config = {
   favicon: "img/favicon.ico",
 
   // Set the production url of your site here
-  url: "https://your-docusaurus-site.example.com",
+  url: "https://create-fivem-resource.dev",
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
   baseUrl: "/",
@@ -76,18 +76,14 @@ const config: Config = {
           title: "Docs",
           items: [
             {
-              label: "Welcome",
-              to: "/docs/documentation-intro",
+              label: "Getting Started",
+              to: "/docs/getting-started",
             },
           ],
         },
         {
           title: "More",
           items: [
-            {
-              label: "Blog",
-              to: "/blog",
-            },
             {
               label: "GitHub",
               href: "https://github.com/JustinMartinDev/create-fivem-resource",

docs/sidebars.ts

@@ -21,7 +21,12 @@ const sidebars: SidebarsConfig = {
     {
       type: "category",
       label: "Getting Started",
-      items: ["getting-started", "folder-structure", "available-scripts"],
+      items: [
+        "getting-started",
+        "folder-structure",
+        "available-scripts",
+        "supported-features",
+      ],
     },
   ],