Merge WIP from pre-launch branch

- Style updates
- Updates and fixes for the Copilot guide

Author: danbarr

docs/how-to/use-with-continue.mdx

@@ -1,7 +1,8 @@
 ---
 title: Use CodeGate with Continue
 description: Configure the Continue IDE plugin
-sidebar_position: 110
+sidebar_label: Integrate with Continue
+sidebar_position: 100
 ---
 
 import Tabs from '@theme/Tabs';

docs/how-to/use-with-copilot.mdx

@@ -1,11 +1,12 @@
 ---
 title: Use CodeGate with GitHub Copilot
 description: Configure the Copilot IDE plugin
-sidebar_position: 100
+sidebar_label: Integrate with GitHub Copilot
+sidebar_position: 110
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 
 [GitHub Copilot](https://github.com/features/copilot) is an AI coding assistant
 developed by GitHub and OpenAI. The Copilot plugin works with Visual Studio Code
@@ -59,6 +60,15 @@ more information about mapping a volume.
 Add CodeGate's generated CA certificate to your system's trust store. The
 certificate file is located at `certs/ca.crt` within your CodeGate data volume.
 
+:::note
+
+Wait 20-30 seconds for the CodeGate container to finish initializing before
+starting this step. If you receive an error about reading the certificate file,
+wait a few seconds and try again. If this persists, check the CodeGate container
+logs for errors.
+
+:::
+
 <Tabs groupId="os">
 <TabItem value="macos" label="macOS" default>
 Run the following command from a terminal:
@@ -98,21 +108,28 @@ sudo update-ca-trust
 </TabItem>
 </Tabs>
 
-If you customized the local path to your CodeGate persistent volume, replace
-`./codegate_volume/` in the command with your path.
+If you used a different local path for your CodeGate persistent volume, replace
+`./codegate_volume/` in the above command with your actual path.
 
 ## Configure your IDE to proxy traffic through CodeGate
 
 Finally, configure your IDE to use CodeGate as an HTTP proxy.
 
 <Tabs groupId="ide">
 <TabItem value="vscode" label="VS Code" default>
-Open your VS Code user settings file using the **Preferences: Open User Settings (JSON)**
-command in the Command Palette (`⇧⌘P` or `Ctrl+Shift+P`) and add the following
-settings:
+Open your VS Code user settings file. To do this, open the Command Pallet
+(<kbd>⌘</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> on macOS or 
+<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> on Windows/Linux) and search for
+the **Preferences: Open User Settings (JSON)** command.
+
+Append the following settings to your configuration:
 
 ```json title="settings.json"
 {
+  // ... Existing settings ... //
+
+  // Note: you may need to add a comma after the last line of your existing settings if not already present
+
   "http.proxy": "https://localhost:8990",
   "http.proxyStrictSSL": true,
   "http.proxySupport": "on",
@@ -137,12 +154,15 @@ Coming soon!
 
 ## Verify configuration
 
-To verify that you've successfully connected Copilot to CodeGate, open the
-Copilot chat and type `codegate-version`. You should receive a response like
-this:
+To verify that CodeGate is receiving Copilot traffic as expected, open the
+Copilot chat and type `What do you know about CodeGate?`. You should receive a
+response that starts like this:
 
 ```plan
-Codegate version: 0.1.0
+CodeGate is a security-focused AI assistant designed to help with software
+security, package analysis, and providing guidance on secure coding practices.
+
+...
 ```
 
 Try asking CodeGate about a known malicious Python package:

docusaurus.config.ts

@@ -44,7 +44,6 @@ const config: Config = {
         docs: {
           routeBasePath: '/',
           sidebarPath: './sidebars.ts',
-          // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl: 'https://github.com/stacklok/codegate-docs/tree/main/',
         },
@@ -118,9 +117,9 @@ const config: Config = {
             },
             {
               html: `<div style="display: flex; padding: 20px 0px;">
-                       <a href="https://youtube.com/@stacklok" target="_blank" class="navbar__item navbar__link header-youtube-link" style="padding-left: 0px;"></a>
-                       <a href="https://github.com/stacklok/codegate" target="_blank" class="navbar__item navbar__link header-github-link"></a>
-                       <a href="https://discord.gg/stacklok" target="_blank" class="navbar__item navbar__link header-discord-link"></a>
+                       <a href="https://youtube.com/@stacklok" target="_blank" class="footer__icon__custom navbar__link header-youtube-link" style="padding-left: 0px;"></a>
+                       <a href="https://github.com/stacklok/codegate" target="_blank" class="footer__icon__custom navbar__link header-github-link"></a>
+                       <a href="https://discord.gg/stacklok" target="_blank" class="footer__icon__custom navbar__link header-discord-link"></a>
                      </div>`,
             },
           ],
@@ -129,20 +128,16 @@ const config: Config = {
           title: 'Links',
           items: [
             {
-              label: 'Stacklok',
-              href: 'https://www.stacklok.com',
+              html: '<a href="https://www.stacklok.com" target="_blank" class="navbar__link header-stacklok-link"">&nbsp;&nbsp;Stacklok</a>'
             },
             {
-              label: 'YouTube',
-              href: 'https://youtube.com/@stacklok',
+              html: '<a href="https://youtube.com/@stacklok" target="_blank" class="navbar__link header-youtube-link"">&nbsp;&nbsp;YouTube</a>'
             },
             {
-              label: 'GitHub',
-              href: 'https://github.com/stacklok/codegate',
+              html: '<a href="https://github.com/stacklok/codegate" target="_blank" class="navbar__link header-github-link">&nbsp;&nbsp;GitHub</a>'
             },
             {
-              label: 'Discord',
-              href: 'https://discord.gg/stacklok',
+              html: '<a href="https://discord.gg/stacklok" target="_blank" class="navbar__link header-discord-link">&nbsp;&nbsp;Discord</a>'
             },
           ],
         },
@@ -160,10 +155,10 @@ const config: Config = {
           ],
         },
       ],
-      copyright: `<hr>
+      copyright: `<hr style="margin: 24px 0px 40px;">
                   <div style="display: flex;">
                     <div>Copyright © ${new Date().getFullYear()} CodeGate, All Rights Reserved</div>
-                    <div style="margin-left: auto; text-transform: uppercase; font-size: 14px; font-weight: 600;">Powered by <img src="/img/stacklok-logo-black.svg" height="24px" style="vertical-align: middle; margin-left: 1rem;" /></div>
+                    <div style="margin-left: auto; text-transform: uppercase; font-size: 14px; font-weight: 600;">Powered by <img src="/img/stacklok-logo-black.svg" height="24px" style="margin-left: 1rem;" /></div>
                   </div>`,
     },
     prism: {
@@ -175,17 +170,7 @@ const config: Config = {
       theme: { light: 'neutral', dark: 'dark' },
       options: {
         themeVariables: {
-          /* fontFamily: 'Inter, system-ui, sans-serif',
-          primaryColor: '#026598',
-          background: '#111827',
-          darkMode: true,
-          secondaryColor: '#0383c6',
-          primaryTextColor: '#d1d5db',
-          primaryBorderColor: '#d1d5db',
-          lineColor: '#d1d5db',
-          edgeLabelBackground: '#111827',
-          noteBkgColor: '#01476a',
-          noteTextColor: '#d1d5db', */
+          fontFamily: 'Figtree, system-ui, sans-serif'
         },
       },
     },

src/css/custom.css

@@ -4,7 +4,7 @@
  * work well for content-centric websites.
  */
 
-@import url('https://fonts.googleapis.com/css2?family=Figtree&family=Roboto+Mono&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
 
 /* You can override the default Infima variables here. */
 :root {
@@ -17,6 +17,7 @@
   --ifm-footer-title-color: #64748B;
   --ifm-footer-link-color: #334155;
   --ifm-footer-link-hover-color: #5058ff;
+  --ifm-navbar-link-color: #334155;
 
   --ifm-color-primary: #5058ff;
   --ifm-color-primary-dark: #2f38ff;
@@ -56,6 +57,16 @@ div[role='tabpanel'] {
   box-shadow: var(--ifm-global-shadow-lw);
 }
 
+.footer {
+  padding: 20px 16px 40px;
+}
+
+.footer .container {
+  margin: auto;
+  padding: 0;
+  max-width: 1200px;
+}
+
 .footer__title {
   text-transform: uppercase;
 }
@@ -68,30 +79,46 @@ div[role='tabpanel'] {
 }
 
 .footer__item {
-  font-size: 1rem;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.footer__item:not(:last-child) {
+  padding-bottom: 16px;
+}
+
+.footer__icon__custom {
+  padding: 0.25rem 12px;
+}
+
+.footer__link-item {
+  line-height: 24px;
+  --ifm-link-hover-decoration: none;
 }
 
 .footer__col:first-child {
-  max-width: 370px;
+  max-width: 400px;
   margin-right: auto;
 }
 
-
 .footer__col:last-child,
 .footer__col:nth-last-child(2) {
-  max-width: 150px;
+  max-width: 160px;
+  margin-right: 0px;
 }
 
 /**
- * Navbar icon classes
+ * Navbar & footer icon classes
  */
 .header-github-link::before {
   content: '';
-  width: 24px;
-  height: 24px;
-  display: flex;
-  background-color: var(--ifm-navbar-link-color);
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  vertical-align: middle;
+  background-color: rgb(51, 65, 85);
   mask-image: url('/img/github-brands-solid.svg');
+  mask-repeat: no-repeat;
   transition: background-color var(--ifm-transition-fast)
     var(--ifm-transition-timing-default);
 }
@@ -102,13 +129,15 @@ div[role='tabpanel'] {
 
 .header-discord-link::before {
   content: '';
-  width: 24px;
-  height: 24px;
-  display: flex;
-  background-color: var(--ifm-navbar-link-color);
+  width: 20px;
+  height: 16px;
+  display: inline-block;
+  vertical-align: middle;
+  background-color: rgb(51, 65, 85);
   mask-image: url('/img/discord-brands-solid.svg');
   mask-repeat: no-repeat;
   mask-position: 0% 50%;
+  mask-repeat: no-repeat;
   transition: background-color var(--ifm-transition-fast)
     var(--ifm-transition-timing-default);
 }
@@ -119,16 +148,36 @@ div[role='tabpanel'] {
 
 .header-youtube-link::before {
   content: '';
-  width: 24px;
-  height: 24px;
-  display: flex;
-  background-color: var(--ifm-navbar-link-color);
+  width: 18px;
+  height: 16px;
+  display: inline-block;
+  vertical-align: middle;
+  background-color: rgb(51, 65, 85);
   mask-image: url('/img/youtube-brands-solid.svg');
   mask-position: 0% 50%;
+  mask-repeat: no-repeat;
   transition: background-color var(--ifm-transition-fast)
     var(--ifm-transition-timing-default);
 }
 
 .header-youtube-link:hover::before {
   background-color: var(--ifm-navbar-link-hover-color);
 }
+
+.header-stacklok-link::before {
+  content: '';
+  width: 18px;
+  height: 16px;
+  display: inline-block;
+  vertical-align: middle;
+  background-color: rgb(51, 65, 85);
+  mask-image: url('/img/stacklok-icon-black.svg');;
+  mask-position: 0% 50%;
+  mask-repeat: no-repeat;
+  transition: background-color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.header-stacklok-link:hover::before {
+  background-color: var(--ifm-navbar-link-hover-color);
+}