base docs

docs/intro.md

@@ -1,47 +1,44 @@
 ---
 sidebar_position: 1
+label: 'Guides Overview'
 ---
+import ReactPlayer from "react-player"
 
-# Tutorial Intro
+# Overview
-
+User guides provided in this section are proxied to serve as both training and **User Acceptance Tests (UATs)** for all NPIS users as detailed in the [Software Requirements Specification (SRS) Document](project-requirements/SRS#system-users-and-characteristics) to execute their respective [system roles in the same SRS Document](project-requirements/SRS#user-roles).
-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
+Users reading this guide are to select their respective user group/roles in the sidebar on the left under User Guides to complete these UATs and training by expanding the menu to further reveal a breakdown of all the usecases for the system tasks executable by their user role/group.
 
-- [Node.js](https://nodejs.org/en/download/) version 20.0 or above:
-  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
 
-## Generate a new site
+:::tip[Specialized Users]
 
-Generate a new Docusaurus site using the **classic template**.
+Executing certain system task roles does require the user to have the neccesary knowledge underlying the technical standards used to
+implement the features and functionality pertaining to those tasks. For example: 
 
-The classic template will automatically be added to your project after you run the command:
+The Admin User Guides do require the admin user to have the technical know how on technical standard (IETF RFC 6749 and 6750) known as **OpenID Connect (OIDC)**, an interoperable authentication protocol based on the OAuth 2.0 framework of specifications.
 
-```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.
+:::danger[Missconfigured System]
 
-## Start your site
+The failure for a certain user to configure the system right, most certainly causes the system to be unusable.
 
-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.
+:::info[Learning Resources]
 
-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/.
+The user guide therefore provides such an introduction to the user in form of a prime, or brief introductory notes on the subject matter. An in the case the where is the is more ground to cover beyond the scope of the project, the guide refers the users to curated resources online like links to learning material, standards, or vendor documentation. 
 
-Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
+:::
+<div className="video__wrapper">
+    <ReactPlayer className="video__player" controls height="50%" src="/videos/Big_Buck_Bunny_360_10s_1MB.webm" width="50%" />
+</div>
+
+<!--     Adds a import GifPlayer from "react-gif-player"; to the markdown.
+    Inserts html like <GifPlayer gif="https://media.giphy.com/media/VhiAuDYHkNPydiNnOs/giphy.gif" /> -->

docusaurus.config.js

@@ -5,14 +5,15 @@
 // See: https://docusaurus.io/docs/api/docusaurus-config
 
 import {themes as prismThemes} from 'prism-react-renderer';
+//import '@cmfcmf/docusaurus-search-local';
 
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: 'My Site',
+  title: 'Documentation and User Training Portal',
-  tagline: 'Dinosaurs are cool',
+  tagline: 'A Self-Referencing KnowledgeBase for the NPIS Project',
-  favicon: 'img/favicon.ico',
+  favicon: 'img/favicon.png',
 
   // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
   future: {
@@ -20,17 +21,17 @@ const config = {
   },
 
   // Set the production url of your site here
-  url: 'https://your-docusaurus-site.example.com',
+  url: 'http://npis.go.ug:6060',
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
   baseUrl: '/',
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
-  organizationName: 'facebook', // Usually your GitHub org/user name.
+  organizationName: 'memd', // Usually your GitHub org/user name.
-  projectName: 'docusaurus', // Usually your repo name.
+  projectName: 'npis-docs', // Usually your repo name.
 
-  onBrokenLinks: 'throw',
+  onBrokenLinks: 'ignore',
 
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
@@ -49,8 +50,8 @@ const config = {
           sidebarPath: './sidebars.js',
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          editUrl:
+          //editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+          //  'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },
         blog: {
           showReadingTime: true,
@@ -60,8 +61,8 @@ const config = {
           },
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          editUrl:
+          //editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+          //  'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
           // Useful options to enforce blogging best practices
           onInlineTags: 'warn',
           onInlineAuthors: 'warn',
@@ -74,6 +75,83 @@ const config = {
     ],
   ],
 
+  //plugins: [require.resolve("@cmfcmf/docusaurus-search-local")],
+/*   plugins: [
+    [
+      require.resolve("@cmfcmf/docusaurus-search-local"),
+      {
+        // Options here
+        // whether to index docs pages
+        indexDocs: true,
+
+        // Whether to also index the titles of the parent categories in the sidebar of a doc page.
+        // 0 disables this feature.
+        // 1 indexes the direct parent category in the sidebar of a doc page
+        // 2 indexes up to two nested parent categories of a doc page
+        // 3...
+        //
+        // Do _not_ use Infinity, the value must be a JSON-serializable integer.
+        indexDocSidebarParentCategories: 4,
+
+        // Includes parent categories path in search result
+        includeParentCategoriesInPageTitle: true,
+
+        // whether to index blog pages
+        indexBlog: true,
+
+        // whether to index static pages
+        // /404.html is never indexed
+        indexPages: true,
+
+        // language of your documentation, see next section
+        language: "en",
+
+        // setting this to "none" will prevent the default CSS to be included. The default CSS
+        // comes from autocomplete-theme-classic, which you can read more about here:
+        // https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-theme-classic/
+        // When you want to overwrite CSS variables defined by the default theme, make sure to suffix your
+        // overwrites with `!important`, because they might otherwise not be applied as expected. See the
+        // following comment for more information: https://github.com/cmfcmf/docusaurus-search-local/issues/107#issuecomment-1119831938.
+        style: undefined,
+
+        // The maximum number of search results shown to the user. This does _not_ affect performance of
+        // searches, but simply does not display additional search results that have been found.
+        maxSearchResults: 8,
+
+        // lunr.js-specific settings
+        lunr: {
+          // When indexing your documents, their content is split into "tokens".
+          // Text entered into the search box is also tokenized.
+          // This setting configures the separator used to determine where to split the text into tokens.
+          // By default, it splits the text at whitespace and dashes.
+          //
+          // Note: Does not work for "ja" and "th" languages, since these use a different tokenizer.
+          tokenizerSeparator: /[\s\-]+/,
+          // https://lunrjs.com/guides/customising.html#similarity-tuning
+          //
+          // This parameter controls the importance given to the length of a document and its fields. This
+          // value must be between 0 and 1, and by default it has a value of 0.75. Reducing this value
+          // reduces the effect of different length documents on a term’s importance to that document.
+          b: 0.75,
+          // This controls how quickly the boost given by a common word reaches saturation. Increasing it
+          // will slow down the rate of saturation and lower values result in quicker saturation. The
+          // default value is 1.2. If the collection of documents being indexed have high occurrences
+          // of words that are not covered by a stop word filter, these words can quickly dominate any
+          // similarity calculation. In these cases, this value can be reduced to get more balanced results.
+          k1: 1.2,
+          // By default, we rank pages where the search term appears in the title higher than pages where
+          // the search term appears in just the text. This is done by "boosting" title matches with a
+          // higher value than content matches. The concrete boosting behavior can be controlled by changing
+          // the following settings.
+          titleBoost: 5,
+          contentBoost: 1,
+          tagsBoost: 3,
+          parentCategoriesBoost: 2, // Only used when indexDocSidebarParentCategories > 0
+        }  
+      },
+    ],
+  ], */
+
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
@@ -83,22 +161,43 @@ const config = {
         respectPrefersColorScheme: true,
       },
       navbar: {
-        title: 'My Site',
+        title: 'DOCs',
         logo: {
-          alt: 'My Site Logo',
+          alt: 'Logo',
           src: 'img/logo.svg',
         },
         items: [
           {
+            type: 'docSidebar',
+            sidebarId: 'introSidebar',
+            position: 'left',
+            label: 'Introduction',
+          },
+          {
+            type: 'docSidebar',
+            sidebarId: 'userGuideSidebar',
+            position: 'left',
+            label: 'User Guides',
+          },
+          /* {
             type: 'docSidebar',
             sidebarId: 'tutorialSidebar',
             position: 'left',
             label: 'Tutorial',
-          },
+          }, */
-          {to: '/blog', label: 'Blog', position: 'left'},
+/*            {
+            type: 'docSidebar',
+            sidebarId: 'userGuideSidebar',
+            position: 'left',
+            label: 'User Guides',
+          },  */
+/*           {to: '/blog', 
+            label: 'Blog', 
+            position: 'left'
+          }, */
           {
-            href: 'https://github.com/facebook/docusaurus',
+            href: 'http://npis.go.ug:3000',
-            label: 'GitHub',
+            label: 'NPIS',
             position: 'right',
           },
         ],
@@ -106,7 +205,7 @@ const config = {
       footer: {
         style: 'dark',
         links: [
-          {
+/*           {
             title: 'Docs',
             items: [
               {
@@ -114,8 +213,8 @@ const config = {
                 to: '/docs/intro',
               },
             ],
-          },
+          }, */
-          {
+/*           {
             title: 'Community',
             items: [
               {
@@ -131,8 +230,8 @@ const config = {
                 href: 'https://x.com/docusaurus',
               },
             ],
-          },
+          }, */
-          {
+/*           {
             title: 'More',
             items: [
               {
@@ -144,9 +243,9 @@ const config = {
                 href: 'https://github.com/facebook/docusaurus',
               },
             ],
-          },
+          }, */
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
+        copyright: `Copyright © ${new Date().getFullYear()} NPIS, MEMD.`,
       },
       prism: {
         theme: prismThemes.github,

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
-    "start": "docusaurus start",
+    "start": "docusaurus start --host 0.0.0.0",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
@@ -14,17 +14,23 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "3.9.0",
+    "@cmfcmf/docusaurus-search-local": "^1.2.0",
-    "@docusaurus/preset-classic": "3.9.0",
+    "@devbookhq/docusaurus-code-video-plugin": "^1.2.1",
+    "@docusaurus/core": "^3.9.1",
+    "@docusaurus/preset-classic": "^3.9.1",
+    "@easyops-cn/docusaurus-search-local": "^0.52.1",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-player": "^3.3.3",
+    "video.js": "^8.23.4",
+    "videojs-playlist": "^5.2.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.9.0",
+    "@docusaurus/module-type-aliases": "^3.9.1",
-    "@docusaurus/types": "3.9.0"
+    "@docusaurus/types": "^3.9.1"
   },
   "browserslist": {
     "production": [

sidebars.js

@@ -16,7 +16,118 @@
  */
 const sidebars = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+  //tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+
+  /* userGuideSidebar: [
+    {
+      type: 'autogenerated',
+      dirName: 'user-guide', // '.' means the current docs folder
+      //description: 'This section is to acquiant NPIS users with the step by step guides on how to execute their system tasks.'
+    },
+  ], */
+
+  userGuideSidebar: [
+    {
+      type: 'category',
+      label: 'User Guides',
+      link: {
+        type: 'generated-index',
+        title: 'NPIS User Guides',
+        description: 
+          'This section is to acquiant NPIS users with the step by step guides on how to execute their system tasks. This is as par the user reqiurements detailed in the introdution sections of the documentation portal.',
+        slug: '/category/user-guide',
+        keywords: ['guides'],
+        image: '/img/shortcut.png',
+      },
+      items: [
+        'user-guide/intro',
+        {
+          'admin':
+            [
+              'user-guide/admin/goals-and-objectives',
+              'user-guide/admin/core-concepts-and-terms',
+                {
+                'admin console':
+                  [
+                  'user-guide/admin/admin-console/admin-console-login',
+                  'user-guide/admin/admin-console/create-realm',
+                  'user-guide/admin/admin-console/ssl-mode',
+                  'user-guide/admin/admin-console/email-settings',
+                  ]
+                }
+
+            ],
+            'form designer':
+            [
+              'user-guide/form-designer/goals-and-objectives',
+            ],
+              'workflow modeller':
+            [
+              'user-guide/workflow-modeller/goals-and-objectives',
+            ],
+            'npis-client':
+            [
+              'user-guide/client/goals-and-objectives',
+            ],
+            'npis-reviewer':
+            [
+              'user-guide/reviewer/goals-and-objectives',
+            ],
+            'npis-evaluator':
+            [
+              'user-guide/evaluater/goals-and-objectives',
+            ],
+            'npis-approver':
+            [
+              'user-guide/approver/goals-and-objectives',
+            ],
+          }],
+    },
+  ],
+
+/*   userGuideSidebar: [
+    'user-guide/intro',
+    {
+      type: 'category', 
+      label: 'User Guides',
+      //items: ['user-guide/admin/congratulations'],
+      items: [
+        {
+          'admin':
+            [
+              'user-guide/admin/course',
+              'user-guide/admin/core-concepts-and-terms',
+              'user-guide/admin/congratulations',
+              'user-guide/admin/create-a-blog-post',
+              'user-guide/admin/create-a-document',
+              'user-guide/admin/create-a-page',
+
+                {
+                'user account management':
+                  [
+                  'user-guide/admin/user-account-management/admin-login',
+                  'user-guide/admin/create-a-page',
+                  ]
+                }
+
+            ],
+            'form designer':
+            [
+              'user-guide/form-designer/congratulations',
+              'user-guide/form-designer/create-a-blog-post',
+              'user-guide/form-designer/create-a-document',
+              'user-guide/form-designer/create-a-page',
+            ],
+              'workflow modeller':
+            [
+              'user-guide/workflow-modeller/congratulations',
+              'user-guide/workflow-modeller/create-a-blog-post',
+              'user-guide/workflow-modeller/create-a-document',
+              'user-guide/workflow-modeller/create-a-page',
+            ],
+  },]
+    }
+  ], */
 
   // But you can create a sidebar manually
   /*
@@ -30,6 +141,25 @@ const sidebars = {
     },
   ],
    */
+
+    introSidebar: [
+    //'intro',
+    //'hello',
+    {
+      type: 'category',
+      label: 'Requirements',
+      link: {
+        type: 'generated-index',
+        title: 'Project Requirements',
+        description: 
+          'This section is to acquiant NPIS users with the step by step guides on how to execute their system tasks. This section is to acquiant NPIS users with the step by step guides on how to execute their system tasks. This section is to acquiant NPIS users with the step by step guides on how to execute their system tasks.  This section is to acquiant NPIS users with the step by step guides on how to execute their system tasks.',
+        slug: '/category/project-requirements',
+        keywords: ['requirements'],
+        image: '/img/shortcut.png',
+      },
+      items: ['project-requirements/ToR', 'project-requirements/SRS'],
+    },
+  ],
 };
 
 export default sidebars;

src/components/HomepageFeatures/index.js

@@ -4,32 +4,29 @@ import styles from './styles.module.css';
 
 const FeatureList = [
   {
-    title: 'Easy to Use',
+    title: 'User Acceptance Tests',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    Svg: require('@site/static/img/tests.svg').default,
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
+        This documentation portal is to serve as a step by step walkthroughs for System User Acceptace Testing (UATs).
-        used to get your website up and running quickly.
       </>
     ),
   },
   {
-    title: 'Focus on What Matters',
+    title: 'Training',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    Svg: require('@site/static/img/train.svg').default,
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
+        The user guides presented are to serve as part of the project training phase for current users of NPIS 
-        ahead and move your docs into the <code>docs</code> directory.
       </>
     ),
   },
   {
-    title: 'Powered by React',
+    title: 'Capacity Building',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    Svg: require('@site/static/img/onboarding.svg').default,
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
+        The documentation portal is also meant to onboard future staff as NPIS users for capacity building. 
-        be extended while reusing the same header and footer.
       </>
     ),
   },

src/css/custom.css

@@ -28,3 +28,15 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+
+.video__wrapper {
+  position: relative;
+  padding-bottom: 56.25%; /* Video aspect ratio: 100 / (16 / 9) */
+}
+
+.video__player {
+  position: absolute;
+  top: 0;
+  left: 0;
+}

src/pages/index.js

@@ -20,7 +20,7 @@ function HomepageHeader() {
           <Link
             className="button button--secondary button--lg"
             to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
+            Get Started
           </Link>
         </div>
       </div>
@@ -32,8 +32,9 @@ export default function Home() {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
+      //title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      title={`NPIS Docs`}
+      description="The NPIS Documentation Portal">
       <HomepageHeader />
       <main>
         <HomepageFeatures />