From 1cab55ff2967af97a20b3502715a27913a979f08 Mon Sep 17 00:00:00 2001
From: Peter Harrison <16875803+palisadoes@users.noreply.github.com>
Date: Sun, 19 Jan 2025 20:55:38 -0800
Subject: [PATCH 1/2] Updated documentation layout
---
docs/docs/docs/introduction.md | 42 +++++
.../plugins/implementing-plugins-example.md | 101 ++++++++++++
.../docs/docs/plugins/implementing-plugins.md | 116 +++++++++++++
docs/docs/docs/plugins/plugin-architecture.md | 69 ++++++++
docs/docs/intro.md | 47 ------
docs/docs/tutorial-basics/_category_.json | 8 -
docs/docs/tutorial-basics/congratulations.md | 23 ---
.../tutorial-basics/create-a-blog-post.md | 34 ----
.../docs/tutorial-basics/create-a-document.md | 57 -------
docs/docs/tutorial-basics/create-a-page.md | 43 -----
docs/docs/tutorial-basics/deploy-your-site.md | 31 ----
.../tutorial-basics/markdown-features.mdx | 152 ------------------
docs/docs/tutorial-extras/_category_.json | 7 -
.../img/docsVersionDropdown.png | Bin 25427 -> 0 bytes
.../tutorial-extras/img/localeDropdown.png | Bin 27841 -> 0 bytes
.../tutorial-extras/manage-docs-versions.md | 55 -------
.../tutorial-extras/translate-your-site.md | 88 ----------
docs/docusaurus.config.ts | 10 +-
docs/sidebars.ts | 15 +-
docs/sidebars.ts.20250119 | 33 ++++
.../img/docs/plugin/plugin-store-navbar.PNG | Bin 0 -> 11433 bytes
docs/static/img/docs/plugin/plugin-types.PNG | Bin 0 -> 46950 bytes
docs/static/img/docs/plugin/store.PNG | Bin 0 -> 242532 bytes
docs/static/img/docs/plugin/talawa.PNG | Bin 0 -> 107089 bytes
24 files changed, 380 insertions(+), 551 deletions(-)
create mode 100644 docs/docs/docs/introduction.md
create mode 100644 docs/docs/docs/plugins/implementing-plugins-example.md
create mode 100644 docs/docs/docs/plugins/implementing-plugins.md
create mode 100644 docs/docs/docs/plugins/plugin-architecture.md
delete mode 100644 docs/docs/intro.md
delete mode 100644 docs/docs/tutorial-basics/_category_.json
delete mode 100644 docs/docs/tutorial-basics/congratulations.md
delete mode 100644 docs/docs/tutorial-basics/create-a-blog-post.md
delete mode 100644 docs/docs/tutorial-basics/create-a-document.md
delete mode 100644 docs/docs/tutorial-basics/create-a-page.md
delete mode 100644 docs/docs/tutorial-basics/deploy-your-site.md
delete mode 100644 docs/docs/tutorial-basics/markdown-features.mdx
delete mode 100644 docs/docs/tutorial-extras/_category_.json
delete mode 100644 docs/docs/tutorial-extras/img/docsVersionDropdown.png
delete mode 100644 docs/docs/tutorial-extras/img/localeDropdown.png
delete mode 100644 docs/docs/tutorial-extras/manage-docs-versions.md
delete mode 100644 docs/docs/tutorial-extras/translate-your-site.md
create mode 100644 docs/sidebars.ts.20250119
create mode 100644 docs/static/img/docs/plugin/plugin-store-navbar.PNG
create mode 100644 docs/static/img/docs/plugin/plugin-types.PNG
create mode 100644 docs/static/img/docs/plugin/store.PNG
create mode 100644 docs/static/img/docs/plugin/talawa.PNG
diff --git a/docs/docs/docs/introduction.md b/docs/docs/docs/introduction.md
new file mode 100644
index 0000000000..665ccc6da2
--- /dev/null
+++ b/docs/docs/docs/introduction.md
@@ -0,0 +1,42 @@
+---
+id: introduction
+title: Introduction
+slug: /
+---
+
+Talawa Admin is the web based administrative dashboard for the Talawa mobile app.
+
+## Core Features
+
+Talawa Admin has many core features that are explained in the sections below.
+
+### Admin Dashboard
+
+- Dashboard Provides Overview about the Admin's Organization.
+- Displays Statistics like number of Members, Admins, Blocked Users & Membership Requests, etc.
+
+### `People` Page
+
+- This shows the list of people who have joined the organization.
+- Admins can also approve membership requests from here and can also set the members permissions.
+
+### `Events` Page
+
+- These shows list of active `Events` in the organization.
+- Admins can also post new events from this page.
+
+### `Contributions` Page
+
+- These shows a list of Members of `Contributors` who've donated to the Organization.
+- Donations can be made from `Talawa` app and can be recurring or One time.
+
+### `Posts` Page
+
+- Shows a list of Posts posted within an Organization along with their likes and comments.
+- Posts are posted by Members from the `Talawa` App.
+- Admins can decide whether to keep or delete those posts.
+
+### `Plugins` Page
+
+- Contains `Plugin Store` from which the Admin can decide the features for the `Talawa` Mobile App.
+- Admins can `Install` or `Uninstall` the Plugins and can also see the list of installed plugins separately.
diff --git a/docs/docs/docs/plugins/implementing-plugins-example.md b/docs/docs/docs/plugins/implementing-plugins-example.md
new file mode 100644
index 0000000000..23b3dccd83
--- /dev/null
+++ b/docs/docs/docs/plugins/implementing-plugins-example.md
@@ -0,0 +1,101 @@
+---
+id: implementing-plugins-example
+title: Plugin Examples
+---
+
+:::note
+Pre-Requisites :
+
+1. [Plugin Architecture ](./plugin-architecture.md)
+2. [Implementing Plugins](./implementing-plugins.md)
+
+:::
+
+Previously we've seen an technical overview of how we can implement plugins for our features.
+
+Now let's see how we can implement a Donation feature as plugin and seeing it in actions. But before that let's take a look at the donation code.
+
+```js
+ CustomListTile(
+ key: homeModel!.keySPDonateUs,
+ index: 2,
+ type: TileType.option,
+ option: Options(
+ icon: Icon(
+ Icons.monetization_on,
+ color: Theme.of(context)
+ .colorScheme
+ .primary,
+ size: 30,
+ ),
+ title: AppLocalizations.of(context)!
+ .strictTranslate('Donate Us'),
+ subtitle: AppLocalizations.of(context)!
+ .strictTranslate(
+ 'Help us to develop for you',
+ ),
+ ),
+ onTapOption: () => donate(context, model),
+ )
+```
+
+To see the entire file go [here](https://github.com/Palisadoesfoundation/talawa/blob/2a14faa4363ca26426fb2f9a8b39082c08e6597b/lib/views/after_auth_screens/profile/profile_page.dart)
+
+It is a simple list option that says " Donate Us " and upon clicking that you get dialog with text "Help us to develop for you" for doing the payment.
+
+Now let's follow the steps.
+
+## 1. Plugin Registration
+
+- Go to the `Plugin Store` and click on the `Add New` button.
+- Give the name as `Donation`
+- You add your information for `Creator Name` and `Description` fields.
+- Your plugin should be at visible the store.
+
+let's wrap our widget with the `TalawaPluginProvider` widget as it comes in the type `B` of plugin
+
+## 2. Plugin Creation
+
+- Wrap the donation code with the `TalawaPluginProvider` widget as a `child` property.
+- Add `Donation` to `pluginName` property.
+
+This is how the code will look like
+
+```js
+ TalawaPluginProvider(
+ pluginName: "Donation",
+ visible: true,
+ child: Column(
+ children: [
+ CustomListTile(
+ key: homeModel!.keySPDonateUs,
+ index: 2,
+ type: TileType.option,
+ option: Options(
+ icon: Icon(
+ Icons.monetization_on,
+ color: Theme.of(context)
+ .colorScheme
+ .primary,
+ size: 30,
+ ),
+ title: AppLocalizations.of(context)!
+ .strictTranslate('Donate Us'),
+ subtitle: AppLocalizations.of(context)!
+ .strictTranslate(
+ 'Help us to develop for you',
+ ),
+ ),
+ onTapOption: () => donate(context, model),
+ ),
+ ],
+ ),
+ )
+
+```
+
+---
+
+Congrats! you've successfully converted your feature to a plugin. Now you can install/uninstall `Donation` plugin from the `Plugin Store` of the [Talawa Admin](https://github.com/PalisadoesFoundation/talawa-admin) to see the plugin UI becoming visible if it's installed for that organization otherwise hidden.
+
+For development purposes to see the plugin even if it's uninstalled you can set the `serverVisible` property to `true`
diff --git a/docs/docs/docs/plugins/implementing-plugins.md b/docs/docs/docs/plugins/implementing-plugins.md
new file mode 100644
index 0000000000..41bf644461
--- /dev/null
+++ b/docs/docs/docs/plugins/implementing-plugins.md
@@ -0,0 +1,116 @@
+---
+id: implementing-plugins
+title: Plugin Implementation
+---
+
+Plugins are existing features that are wrapped with some special logic or widgets to make them controllable.
+
+Plugin are activated from Plugin store of the Admin panel
+
+To implement features as plugins or to convert existing features into plugins, follow the below steps
+
+## Technical Overview of the Steps to Implement features as plugins
+
+### 1. Plugin Registration
+
+- Plugins have to be registered first before even they are created from the Plugin store in the `Talawa Admin` portal. This can be done by developer by creating an account in the admin portal and going to `Plugin Store`.
+- Plugin Store can be accessed from navbar
+
+
+
+- Once entered in store , you will see a list of available plugins
+
+
+
+- Click on the `Add New` Button
+- Enter the Details of the New Plugin and Click on `Create`.
+
+:::caution
+
+The `Name` of plugin provided is very important and will be used for later steps.
+Make sure to use unique names with trailing spaces.
+
+:::
+
+In next step we'll see how to create plugins
+
+### 2. Plugin Creation
+
+Based on where the feature UI is there are currently 2 ways to implement your features as plugins. Let's call them type A and B features for now.
+
+
+
+#### A. Feature that are located in the bottom navigation bar
+
+- For the features in the navbar we have maintained a list of them in [main_scree.dart](https://github.com/PalisadoesFoundation/talawa/blob/develop/lib/views/main_screen.dart) file.It has detailed comments to help you understand the operations.
+
+- `renderBottomNavBarPlugins` method combines current features and plugins in navbar and generates an array containing `navBarItems` and `navbarClasses` and then it is returned to `children` property of the navbar UI code.
+- Let's understand some important variables before understanding the process of conversion.
+
+:::caution
+
+The `Name` of property provided to any of the below variables should the exactly same for that feature only without any trailing spaces. Duplicate or Existing plugin names shouldn't be used keep the application consistent and predictable.
+
+:::
+
+1. `navBarItems`
+ - Type `[ BottomNavigationBarItem() ]`
+ - contains list of `BottomNavigationBarItem` widget to show `icon` and `text` to the navbar options.
+ - if your feature is not a plugin it should be added to this array.
+2. `navBarClasses`
+ - Type `[Widgets]`
+ - Array that contains the Widgets to be rendered on the navbar
+3. `navNameClasses`
+ - Type ` Map`
+ - Maps the feature names with their proper Icons and Widgets (named as `class`) used in navbar.
+4. `navNameIcon`
+ - Type `Map`
+ - Contains a key value pair of the feature name in the navbar and it's corresponding plugin.
+
+#### B. Other Features
+
+- `TalawaPluginProvider` is Flutter widget that is used here . The Source can be viewed [here](https://github.com/PalisadoesFoundation/talawa/blob/develop/lib/plugins/talawa_plugin_provider.dart)
+- Here's the basic use of `TalawaPluginProvider` with `Text()` widget.Let's discuss it's properties
+
+```js
+ const TalawaPluginProvider(child: Text("Demo") ,
+ visible: true,
+ pluginName: "My Plugin"
+ );
+```
+
+1. `child`
+
+ - Type `Widget?`
+ - It can be any flutter UI widget like `Container()`, `Text()`, `Row()`,etc. For example if your features is encapsulated within an `Container()` widget then wrap that widget into the `TalawaPluginProvider` .
+
+2. `visible`
+
+ - Type `Boolean`
+ - True if plugin is Installed and plugin will be visible, Otherwise false hence plugin is hidden.
+
+3. `pluginName`
+ - Type `String`
+ - Contains the name of the plugin. Make sure that the name provided here should match with the plugin name registered on the store from the
+ [Step 1 A ](#a-feature-that-are-located-in-the-bottom-navigation-bar)
+ - For example. If plugin stored on the store as `Members List` then here exactly enter `Members List` without any trialing spaces.
+
+
+
+#### Additional properties : [For Development Purpose Only]
+
+
+
+4. `serverVisible`
+
+ - Type `Boolean`
+ - True will make all plugins visible if set to `true` otherwise `false` won't change anything.
+ - This property is accessible for the developers only as it can be only set during development phase. We can see that it is defined in build method of the widget.
+
+ ```js
+ Widget build(BuildContext context) {
+ var serverVisible = false;
+ serverVisible = checkFromPluginList();
+ return serverVisible || visible ? child! : Container();
+ }
+ ```
diff --git a/docs/docs/docs/plugins/plugin-architecture.md b/docs/docs/docs/plugins/plugin-architecture.md
new file mode 100644
index 0000000000..661af27eee
--- /dev/null
+++ b/docs/docs/docs/plugins/plugin-architecture.md
@@ -0,0 +1,69 @@
+---
+id: plugin-architecture
+title: Plugin Architecture
+---
+
+# Plugin Architecture
+
+Plugin Architecture provides talawa projects an ability to control latent [Talawa Mobile App](https://docs.talawa.io/docs/developers/talawa/talawa-introduction) features from the [Talawa Admin](https://docs.talawa.io/docs/developers/talawa-admin/talawa-admin-introduction) Web Portal.
+
+
+
+## Plugin
+
+A Plugin is a feature in Talawa Mobile App that is controlled by the Admins of that organization. By having the control admins can decide the accessibility of that feature for the organization members.
+
+Programmatically the logic of this Plugin is stored in the mobile app but it's inaccessible to the users until the admin of the organization installs that plugin.
+
+You first have to be register the Plugins from the `Plugin store` in order to install them from the Talawa Admin.
+
+## High Level Overview of Plugin Architecture
+
+Let's discuss the role of the different apps to make the plugin architecture work.
+
+### Talawa Admin
+
+Admin Provides `Plugin Store` where has the following functionalities:
+
+- Ability to install or uninstall the plugins.
+- Ability to Toggle list of installed and available plugins.
+- Ability to Search the plugin using SearchBar (provided on the right) .
+
+#### Example
+
+
+
+### Talawa API
+
+It is a nodeJS API that is used to interface with the database containing list of the plugins with their different attributes.
+
+A sample Plugin Model can have the below properties.
+
+```js
+Plugin : {
+ pluginName: String, // plugin name
+ pluginCreatedBy: String, // name of the creator
+ pluginDesc : String, // description
+ pluginInstallStatus : Boolean, // TRUE if installed otherwise FALSE
+ installedOrgs : [ID] // a list containing ID of the organization who have installed the plugin
+}
+```
+
+### Talawa
+
+Plugin in the mobile App are mainly focused for the features on the navbar.but other functionalities can also be implemented as plugins using the `TalawaPluginProvider` Flutter Widget.
+
+
+## Plugin Store
+
+## Installing and Uninstalling Plugins
+
+The Following video showcases process of installing the plugin. We are uninstalling `Events` feature from the talawa app.
+
+:::note
+
+Admin portal and Talawa app must be of same organizations
+
+:::
+
+
diff --git a/docs/docs/intro.md b/docs/docs/intro.md
deleted file mode 100644
index 45e8604c8b..0000000000
--- a/docs/docs/intro.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-sidebar_position: 1
----
-
-# Tutorial Intro
-
-Let's discover **Docusaurus in less than 5 minutes**.
-
-## Getting Started
-
-Get started by **creating a new site**.
-
-Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
-
-### What you'll need
-
-- [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
- - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
-
-## Generate a new site
-
-Generate a new Docusaurus site using the **classic template**.
-
-The classic template will automatically be added to your project after you run the command:
-
-```bash
-npm init docusaurus@latest my-website classic
-```
-
-You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
-
-The command also installs all necessary dependencies you need to run Docusaurus.
-
-## Start your site
-
-Run the development server:
-
-```bash
-cd my-website
-npm run start
-```
-
-The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
-
-The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
-
-Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
diff --git a/docs/docs/tutorial-basics/_category_.json b/docs/docs/tutorial-basics/_category_.json
deleted file mode 100644
index 2e6db55b1e..0000000000
--- a/docs/docs/tutorial-basics/_category_.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "label": "Tutorial - Basics",
- "position": 2,
- "link": {
- "type": "generated-index",
- "description": "5 minutes to learn the most important Docusaurus concepts."
- }
-}
diff --git a/docs/docs/tutorial-basics/congratulations.md b/docs/docs/tutorial-basics/congratulations.md
deleted file mode 100644
index 04771a00b7..0000000000
--- a/docs/docs/tutorial-basics/congratulations.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-sidebar_position: 6
----
-
-# Congratulations!
-
-You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
-
-Docusaurus has **much more to offer**!
-
-Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
-
-Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
-
-## What's next?
-
-- Read the [official documentation](https://docusaurus.io/)
-- Modify your site configuration with [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config)
-- Add navbar and footer items with [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration)
-- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
-- Add a [search bar](https://docusaurus.io/docs/search)
-- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
-- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)
diff --git a/docs/docs/tutorial-basics/create-a-blog-post.md b/docs/docs/tutorial-basics/create-a-blog-post.md
deleted file mode 100644
index 550ae17ee1..0000000000
--- a/docs/docs/tutorial-basics/create-a-blog-post.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-sidebar_position: 3
----
-
-# Create a Blog Post
-
-Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed...
-
-## Create your first Post
-
-Create a file at `blog/2021-02-28-greetings.md`:
-
-```md title="blog/2021-02-28-greetings.md"
----
-slug: greetings
-title: Greetings!
-authors:
- - name: Joel Marcey
- title: Co-creator of Docusaurus 1
- url: https://github.com/JoelMarcey
- image_url: https://github.com/JoelMarcey.png
- - name: Sébastien Lorber
- title: Docusaurus maintainer
- url: https://sebastienlorber.com
- image_url: https://github.com/slorber.png
-tags: [greetings]
----
-
-Congratulations, you have made your first post!
-
-Feel free to play around and edit this post as much as you like.
-```
-
-A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).
diff --git a/docs/docs/tutorial-basics/create-a-document.md b/docs/docs/tutorial-basics/create-a-document.md
deleted file mode 100644
index c22fe29446..0000000000
--- a/docs/docs/tutorial-basics/create-a-document.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-sidebar_position: 2
----
-
-# Create a Document
-
-Documents are **groups of pages** connected through:
-
-- a **sidebar**
-- **previous/next navigation**
-- **versioning**
-
-## Create your first Doc
-
-Create a Markdown file at `docs/hello.md`:
-
-```md title="docs/hello.md"
-# Hello
-
-This is my **first Docusaurus document**!
-```
-
-A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).
-
-## Configure the Sidebar
-
-Docusaurus automatically **creates a sidebar** from the `docs` folder.
-
-Add metadata to customize the sidebar label and position:
-
-```md title="docs/hello.md" {1-4}
----
-sidebar_label: 'Hi!'
-sidebar_position: 3
----
-
-# Hello
-
-This is my **first Docusaurus document**!
-```
-
-It is also possible to create your sidebar explicitly in `sidebars.js`:
-
-```js title="sidebars.js"
-export default {
- tutorialSidebar: [
- 'intro',
- // highlight-next-line
- 'hello',
- {
- type: 'category',
- label: 'Tutorial',
- items: ['tutorial-basics/create-a-document'],
- },
- ],
-};
-```
diff --git a/docs/docs/tutorial-basics/create-a-page.md b/docs/docs/tutorial-basics/create-a-page.md
deleted file mode 100644
index 20e2ac3005..0000000000
--- a/docs/docs/tutorial-basics/create-a-page.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-sidebar_position: 1
----
-
-# Create a Page
-
-Add **Markdown or React** files to `src/pages` to create a **standalone page**:
-
-- `src/pages/index.js` → `localhost:3000/`
-- `src/pages/foo.md` → `localhost:3000/foo`
-- `src/pages/foo/bar.js` → `localhost:3000/foo/bar`
-
-## Create your first React Page
-
-Create a file at `src/pages/my-react-page.js`:
-
-```jsx title="src/pages/my-react-page.js"
-import React from 'react';
-import Layout from '@theme/Layout';
-
-export default function MyReactPage() {
- return (
-
-
My React page
-
This is a React page
-
- );
-}
-```
-
-A new page is now available at [http://localhost:3000/my-react-page](http://localhost:3000/my-react-page).
-
-## Create your first Markdown Page
-
-Create a file at `src/pages/my-markdown-page.md`:
-
-```mdx title="src/pages/my-markdown-page.md"
-# My Markdown page
-
-This is a Markdown page
-```
-
-A new page is now available at [http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page).
diff --git a/docs/docs/tutorial-basics/deploy-your-site.md b/docs/docs/tutorial-basics/deploy-your-site.md
deleted file mode 100644
index 1c50ee063e..0000000000
--- a/docs/docs/tutorial-basics/deploy-your-site.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-sidebar_position: 5
----
-
-# Deploy your site
-
-Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**).
-
-It builds your site as simple **static HTML, JavaScript and CSS files**.
-
-## Build your site
-
-Build your site **for production**:
-
-```bash
-npm run build
-```
-
-The static files are generated in the `build` folder.
-
-## Deploy your site
-
-Test your production build locally:
-
-```bash
-npm run serve
-```
-
-The `build` folder is now served at [http://localhost:3000/](http://localhost:3000/).
-
-You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**).
diff --git a/docs/docs/tutorial-basics/markdown-features.mdx b/docs/docs/tutorial-basics/markdown-features.mdx
deleted file mode 100644
index 35e00825ed..0000000000
--- a/docs/docs/tutorial-basics/markdown-features.mdx
+++ /dev/null
@@ -1,152 +0,0 @@
----
-sidebar_position: 4
----
-
-# Markdown Features
-
-Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
-
-## Front Matter
-
-Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
-
-```text title="my-doc.md"
-// highlight-start
----
-id: my-doc-id
-title: My document title
-description: My document description
-slug: /my-custom-url
----
-// highlight-end
-
-## Markdown heading
-
-Markdown text with [links](./hello.md)
-```
-
-## Links
-
-Regular Markdown links are supported, using url paths or relative file paths.
-
-```md
-Let's see how to [Create a page](/create-a-page).
-```
-
-```md
-Let's see how to [Create a page](./create-a-page.md).
-```
-
-**Result:** Let's see how to [Create a page](./create-a-page.md).
-
-## Images
-
-Regular Markdown images are supported.
-
-You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
-
-```md
-
-```
-
-
-
-You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them:
-
-```md
-
-```
-
-## Code Blocks
-
-Markdown code blocks are supported with Syntax highlighting.
-
-````md
-```jsx title="src/components/HelloDocusaurus.js"
-function HelloDocusaurus() {
- return