feat: support logo text config (#855)

web-infra-dev · Mar 24, 2024 · 145bb16 · 145bb16
1 parent 7e0d6aa
commit 145bb16
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 4 deletions.
diff --git a/.changeset/wet-ears-suffer.md b/.changeset/wet-ears-suffer.md
@@ -0,0 +1,8 @@
+---
+"@rspress/theme-default": patch
+"@rspress/docs": patch
+"@rspress/shared": patch
+"@rspress/core": patch
+---
+
+feat: support logo text config
diff --git a/packages/core/src/node/runtimeModule/siteData/index.ts b/packages/core/src/node/runtimeModule/siteData/index.ts
@@ -96,6 +96,7 @@ export async function siteDataVMPlugin(context: FactoryContext) {
     lang: userConfig?.lang || '',
     locales: userConfig?.locales || userConfig.themeConfig?.locales || [],
     logo: userConfig?.logo || '',
+    logoText: userConfig?.logoText || '',
     ssg: userConfig?.ssg ?? true,
     multiVersion: {
       default: userConfig?.multiVersion?.default || '',

diff --git a/packages/document/docs/en/api/config/config-basic.mdx b/packages/document/docs/en/api/config/config-basic.mdx
@@ -116,6 +116,21 @@ export default defineConfig({
 });
 ```
 
+## logoText
+
+- Type: `string`
+- Default: `""`
+
+Site logo Text. This text will be used as the logo text in the upper left corner of the navbar. For example:
+
+```ts title="rspress.config.ts"
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  logoText: 'rspress',
+});
+```
+
 ## outDir
 
 - Type: `string`

diff --git a/packages/document/docs/zh/api/config/config-basic.mdx b/packages/document/docs/zh/api/config/config-basic.mdx
@@ -116,6 +116,21 @@ export default defineConfig({
 });
 ```
 
+## logoText
+
+- Type: `string`
+- Default: `""`
+
+站点 logo 文字。这个文字将用作导航栏左上角的 logo 文字。例如：
+
+```ts title="rspress.config.ts"
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  logoText: 'rspress',
+});
+```
+
 ## outDir
 
 - Type: `string`

diff --git a/packages/shared/src/types/index.ts b/packages/shared/src/types/index.ts
@@ -58,6 +58,10 @@ export interface UserConfig<ThemeConfig = DefaultThemeConfig> {
    * Path to the logo file in nav bar.
    */
   logo?: string | { dark: string; light: string };
+  /**
+   * The text of the logo in nav bar.
+   */
+  logoText?: string;
   /**
    * Base path of the site.
    */
@@ -182,6 +186,7 @@ export interface SiteData<ThemeConfig = NormalizedDefaultThemeConfig> {
   icon: string;
   themeConfig: ThemeConfig;
   logo: string | { dark: string; light: string };
+  logoText: string;
   pages: BaseRuntimePageInfo[];
   search: SearchOptions;
   ssg: boolean;

diff --git a/packages/theme-default/src/components/Nav/NavBarTitle.tsx b/packages/theme-default/src/components/Nav/NavBarTitle.tsx
@@ -11,7 +11,7 @@ import { getLogoUrl, useLocaleSiteData } from '../../logic';
 export const NavBarTitle = () => {
   const { siteData } = usePageData();
   const localeData = useLocaleSiteData();
-  const { logo: rawLogo } = siteData;
+  const { logo: rawLogo, logoText } = siteData;
   const title = localeData.title ?? siteData.title;
   const { theme } = useContext(ThemeContext);
   const [logo, setLogo] = useState(getLogoUrl(rawLogo, theme));
@@ -26,16 +26,16 @@ export const NavBarTitle = () => {
         href={withBase(localeData.langRoutePrefix || '/')}
         className="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"
       >
-        {logo ? (
+        {logo && (
           <img
             src={normalizeImagePath(logo)}
             alt="logo"
             id="logo"
             className="mr-4 rspress-logo"
           />
-        ) : (
-          <span>{title}</span>
         )}
+        {logoText && <span>{logoText}</span>}
+        {!logo && !logoText && <span>{title}</span>}
       </a>
     </div>
   );