Add website URL info

src/dashboardWebView/components/Common/Link.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+export interface ILinkProps {
+  title: string;
+  href: string;
+  className?: string;
+}
+
+export const Link: React.FunctionComponent<ILinkProps> = ({ children, title, href, className }: React.PropsWithChildren<ILinkProps>) => {
+  return (
+    <a
+      className={`text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)] ${className || ""}`}
+      title={title}
+      href={href}>
+      {children}
+    </a>
+  );
+};

src/dashboardWebView/components/Common/LinkButton.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface ILinkButtonProps {
   title: string;
@@ -7,17 +6,10 @@ export interface ILinkButtonProps {
 }
 
 export const LinkButton: React.FunctionComponent<ILinkButtonProps> = ({ children, title, onClick }: React.PropsWithChildren<ILinkButtonProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <button
       type="button"
-      className={
-        getColors(
-          `text-gray-500 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600`,
-          `text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)]`
-        )
-      }
+      className={`text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)]`}
       title={title}
       onClick={onClick}>
       {children}

src/dashboardWebView/components/Header/Header.tsx

@@ -16,7 +16,7 @@ import { ChoiceButton } from '../Common/ChoiceButton';
 import { MediaHeaderBottom } from '../Media/MediaHeaderBottom';
 import { Tabs } from './Tabs';
 import { CustomScript } from '../../../models';
-import { BoltIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { ArrowTopRightOnSquareIcon, BoltIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { routePaths } from '../..';
 import { useEffect, useMemo } from 'react';
@@ -30,6 +30,7 @@ import { ProjectSwitcher } from './ProjectSwitcher';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { SettingsLink } from '../SettingsView/SettingsLink';
+import { Link } from '../Common/Link';
 
 export interface IHeaderProps {
   header?: React.ReactNode;
@@ -146,9 +147,22 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
       <div className={`mb-0 border-b flex justify-between bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]`}>
         <Tabs onNavigate={updateView} />
 
-        <div className='flex'>
+        <div className='flex items-center'>
           <ProjectSwitcher />
 
+          {
+            settings?.websiteUrl && (
+              <Link
+                className='inline-flex items-center mr-2'
+                href={settings?.websiteUrl}
+                title={settings?.websiteUrl}>
+                <span>{settings?.websiteUrl}</span>
+
+                <ArrowTopRightOnSquareIcon className='w-4 h-4 ml-1' aria-hidden="true" />
+              </Link>
+            )
+          }
+
           <SettingsLink onNavigate={updateView} />
         </div>
       </div>