Change CI in documentation page (#40)

* Initialize Docusaurus template

* Remove unused images and files, update homepage link and add blog post

* Update docusaurus.config.ts and sidebars.ts

* Add community part

* Update CLLM Blog link in support.md

* Change documentation website `README.md` to use `npm`

* Change `yarn` to `npm`

* Update CLLM documentation and website
- change maintainer to owner
- yarn to npm
- add short description in getting-started
- change `API key` to `OpenAI API key`

* Update deployment configuration and URLs

* Add edit URL for community page

* Update homepage description in index.tsx

* Update logo and social card images, and modify color palette

* Delete docusaurus-social-card.jpg

* Delete unused images and logo

---------

Co-authored-by: devleejb <[email protected]>

cllm-website/README.md

@@ -29,13 +29,13 @@ This command generates static content into the `build` directory and can be serv
 Using SSH:
 
 ```
-$ USE_SSH=true npm deploy
+$ USE_SSH=true npm run deploy
 ```
 
 Not using SSH:
 
 ```
-$ GIT_USER=<Your GitHub username> npm deploy
+$ GIT_USER=<Your GitHub username> npm run deploy
 ```
 
 If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

cllm-website/docusaurus.config.ts

@@ -8,11 +8,11 @@ const config: Config = {
   favicon: "img/favicon.ico",
 
   // Set the production url of your site here
-  url: "https://your-docusaurus-site.example.com",
+  url: "https://dev-backpack.github.io",
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: "/",
-
+  baseUrl: "/cllm/",
+  trailingSlash: false,
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
   organizationName: "dev-backpack", // Usually your GitHub org/user name.
@@ -37,13 +37,13 @@ const config: Config = {
           sidebarPath: "./sidebars.ts",
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          editUrl: "https://github.com/Dev-backpack/cllm/",
+          editUrl: "https://github.com/dev-backpack/cllm/cllm-website/",
         },
         blog: {
           showReadingTime: true,
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          editUrl: "https://github.com/Dev-backpack/cllm/",
+          editUrl: "https://github.com/dev-backpack/cllm/cllm-website/",
         },
         theme: {
           customCss: "./src/css/custom.css",
@@ -54,12 +54,12 @@ const config: Config = {
 
   themeConfig: {
     // Replace with your project's social card
-    image: "img/docusaurus-social-card.jpg",
+    image: "img/cllm-social-card.png",
     navbar: {
       title: "CLLM",
       logo: {
         alt: "My Site Logo",
-        src: "img/logo.svg",
+        src: "img/logo.png",
       },
       items: [
         {
@@ -136,6 +136,7 @@ const config: Config = {
         path: './community',
         routeBasePath: 'community',
         sidebarPath: './sidebarsCommunity.js',
+        editUrl: 'https://github.com/dev-backpack/cllm/cllm-website/',
         // ... other options
       },
     ]

cllm-website/src/components/HomepageFeatures/index.tsx

@@ -13,39 +13,6 @@ type ExampleItem = {
   description: JSX.Element;
 };
 
-const FeatureList: FeatureItem[] = [
-  {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
-      </>
-    ),
-  },
-  {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
-    description: (
-      <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
-      </>
-    ),
-  },
-  {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
-      </>
-    ),
-  },
-];
-
 const ExampleList: ExampleItem[] = [
   {
     // gif image of the example

cllm-website/src/css/custom.css

@@ -4,27 +4,26 @@
  * work well for content-centric websites.
  */
 
-/* You can override the default Infima variables here. */
-:root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+ :root {
+  --ifm-color-primary: #2e85b5; /* Updated to a light blue */
+  --ifm-color-primary-dark: #29749c; /* A slightly darker shade */
+  --ifm-color-primary-darker: #276794; /* Even darker for depth */
+  --ifm-color-primary-darkest: #20537b; /* Darkest blue for contrast */
+  --ifm-color-primary-light: #3396bd; /* Lighter for highlights */
+  --ifm-color-primary-lighter: #359bc2; /* A bit lighter */
+  --ifm-color-primary-lightest: #3ca6d8; /* Lightest blue for accents */
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #25a2c0; /* Lighter, vibrant blue */
+  --ifm-color-primary-dark: #2190af; /* Darker to contrast with the light blue */
+  --ifm-color-primary-darker: #1f88a5; /* Adds depth */
+  --ifm-color-primary-darkest: #1a7088; /* Darkest shade for solid backgrounds */
+  --ifm-color-primary-light: #29b5d0; /* Bright and light */
+  --ifm-color-primary-lighter: #32b8d4; /* Slightly lighter */
+  --ifm-color-primary-lightest: #4fcdbf; /* Lightest and most vibrant */
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

cllm-website/src/pages/index.tsx

@@ -33,7 +33,7 @@ export default function Home(): JSX.Element {
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      description="CLLM is a Command Line tool that is designed to help you write & find cli-command using Large Language Model.">
       <HomepageHeader />
       <main>
         <HomepageFeatures />