Merge pull request #12 from IQ-tech/IQL-7306/feat/add-theme

Iql 7306/feat/add theme

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+	"recommendations": [
+		"vivaxy.vscode-conventional-commits"
+	]
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "conventionalCommits.promptScopes": false,
+  "conventionalCommits.promptFooter": false,
+  "conventionalCommits.promptBody": false
+}

README.md

@@ -77,19 +77,6 @@ For more SEO related properties, look at `src/components/HeadSEO.astro`
 
 The sidebar navigation is controlled by the `SIDEBAR` variable in your `src/config.ts` file. You can customize the sidebar by modifying this object. A default, starter navigation has already been created for you.
 
-```ts
-export const SIDEBAR = {
-  en: [
-    { text: 'Section Header', header: true, },
-    { text: 'Introduction', link: 'en/introduction' },
-    { text: 'Page 2', link: 'en/page-2' },
-    { text: 'Page 3', link: 'en/page-3' },
-
-    { text: 'Another Section', header: true },
-    { text: 'Page 4', link: 'en/page-4' },
-  ],
-};
-```
 
 Note the top-level `en` key: This is needed for multi-language support. You can change it to whatever language you'd like, or add new languages as you go. More details on this below.
 

astro.config.mjs

@@ -1,18 +1,12 @@
+import react from '@astrojs/react';
 // Full Astro Configuration API Documentation:
 // https://docs.astro.build/reference/configuration-reference
 
-// @type-check enabled!
-// VSCode and other TypeScript-enabled text editors will provide auto-completion,
-// helpful tooltips, and warnings if your exported object is invalid.
-// You can disable this by removing "@ts-check" and `@type` comments below.
 
 // @ts-check
 export default /** @type {import('astro').AstroUserConfig} */ ({
-	renderers: [
-		// Enable the Preact renderer to support Preact JSX components.
-		'@astrojs/renderer-preact',
-		// Enable the React renderer, for the Algolia search component
-		'@astrojs/renderer-react',
+	integrations: [
+    react(),
 	],
 
 	dist: "dist/firebolt-docs/"

package.json

@@ -6,21 +6,27 @@
     "post-build": "node ./post-build.mjs -path https://iq-tech.github.io/firebolt-docs/",
     "dev": "astro dev",
     "start": "astro dev",
-    "build": "yarn generate-json-docs && astro build && yarn post-build",
+    "astro-build": "astro build",
+    "build": "astro build && yarn post-build",
     "preview": "astro preview",
     "cms": "npx netlify-cms-proxy-server",
     "predeploy": "yarn run build",
-    "deploy": "gh-pages -d dist/firebolt-docs",
-    "generate-json-docs": "node scripts/generate-json-docs.js "
+    "deploy": "gh-pages -d dist/firebolt-docs"
   },
   "dependencies": {
-    "@docsearch/react": "^1.0.0-alpha.28",
-    "@iq-firebolt/json-schema": "^0.6.0"
+    "@algolia/client-search": "4.13.0",
+    "@docsearch/css": "3.0.0",
+    "@docsearch/react": "3.0.0",
+    "@iq-firebolt/json-schema": "0.6.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "@astrojs/renderer-preact": "^0.4.0",
-    "astro": "^0.22.20",
-    "gh-pages": "^3.2.3",
-    "json-schema-to-markdown": "^1.1.1"
+    "@astrojs/react": "0.0.2",
+    "@types/react": "17.0.43",
+    "@types/react-dom": "17.0.14",
+    "astro": "0.25.4",
+    "gh-pages": "3.2.3",
+    "json-schema-to-markdown": "1.1.1"
   }
-}
+}

post-build.mjs

@@ -2,7 +2,9 @@ import fs from 'fs'
 import path from 'path'
 import astroConfig from './astro.config.mjs'
 
-
+/**
+ * used for github pages limitation
+ */
 const PUBLIC_DIR = astroConfig.dist || "dist"
 const argvs = process.argv.slice(2);
 

src/components/Header/Header.astro

@@ -2,9 +2,8 @@
 import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages.ts';
 import * as CONFIG from '../../config.ts';
 import SkipToContent from './SkipToContent.astro';
-import SidebarToggle from './SidebarToggle.tsx';
-import LanguageSelect from './LanguageSelect.tsx';
-import Search from './Search.tsx';
+import SidebarToggle from '../react/SidebarToggle';
+import LanguageSelect from '../react/LanguageSelect';
 
 const { currentPage } = Astro.props;
 const lang = currentPage && getLanguageFromURL(currentPage);
@@ -18,17 +17,9 @@ const lang = currentPage && getLanguageFromURL(currentPage);
 		</div>
 		<div class="logo flex">
 			<img src="/logo.png" alt="Firebolt Logo" />
-			<a href="/">
-				<!-- <h1>{CONFIG.SITE.title ?? "Documentation"}</h1> -->
-			</a>
 		</div>
 		<div style="flex-grow: 1;"></div>
 		{KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle />}
-		{CONFIG.ALGOLIA && (
-			<div class="search-item">
-				<Search client:idle />
-			</div>
-		)}
 	</nav>
 </header>
 

src/components/PageContent/PageContent.astro

@@ -1,17 +1,17 @@
 ---
 import MoreMenu from '../RightSidebar/MoreMenu.astro';
-import TableOfContents from '../RightSidebar/TableOfContents.tsx';
+import TableOfContents from '../react/TableOfContents';
 
 const { content, githubEditUrl } = Astro.props;
-const title = content.title;
-const headers = content.astro.headers;
+const title = content?.title;
+const headers = content?.astro?.headers || [];
 ---
 
 <article id="article" class="content">
 	<section class="main-section">
 		<h1 class="content-title" id="overview">{title}</h1>
 		<nav class="block sm:hidden">
-			<TableOfContents client:media="(max-width: 50em)" {headers} />
+			<TableOfContents client:media="(max-width: 50em)" headers={headers} />
 		</nav>
 		<slot />
 	</section>