feat(core): added ability to customise header text and logo (#591)

* add ability to customise header * Create neat-peaches-buy.md * add ability to customise header --------- Co-authored-by: David Boyne <[email protected]>
event-catalog · Jul 12, 2024 · 6337769 · 6337769
1 parent 79cc2c5
commit 6337769
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 6 deletions.
diff --git a/.changeset/neat-peaches-buy.md b/.changeset/neat-peaches-buy.md
@@ -0,0 +1,5 @@
+---
+"@eventcatalog/core": patch
+---
+
+feat(core): added ability to customise header text and logo
diff --git a/bin/eventcatalog.config.ts b/bin/eventcatalog.config.ts
@@ -10,9 +10,10 @@ export interface Config {
   editUrl: string;
   base?: string;
   trailingSlash?: boolean;
-  logo: {
+  logo?: {
     alt: string;
     src: string;
+    text?: string;
   };
   docs: {
     sidebar: {

diff --git a/examples/default/eventcatalog.config.js b/examples/default/eventcatalog.config.js
@@ -6,8 +6,9 @@ export default {
   homepageLink: 'https://eventcatalog.dev/',
   editUrl: 'https://github.com/event-catalog/eventcatalog/edit/main',
   logo: {
-    alt: 'EventCatalog Logo',
-    src: 'logo.svg'
+    alt: 'EventCatalog',
+    src: '/logo.png',
+    text: "EventCatalog",
   },
   base: '/',
   trailingSlash: false,

diff --git a/examples/default/public/logo.png b/examples/default/public/logo.png
diff --git a/scripts/catalog-to-astro-content-directory.js b/scripts/catalog-to-astro-content-directory.js
@@ -100,6 +100,15 @@ export const catalogToAstro = async (source, astroContentDir, catalogFilesDir) =
   // ensureDirSync(astroContentDir);
   fs.writeFileSync(path.join(astroContentDir, 'config.ts'), astroConfigFile);
 
+  // Copy the public directory files into the astro public directory
+  const usersPublicDirectory = path.join(source, 'public');
+  const astroPublicDir = path.join(astroContentDir, '../../public');
+
+  if (fs.existsSync(usersPublicDirectory)) {
+    // fs.mkdirSync(astroPublicDir, { recursive: true });
+    fs.cpSync(usersPublicDirectory, astroPublicDir, { recursive: true });
+  }
+
   // Copy all the event files over
   await copyFiles({
     source,

diff --git a/scripts/start-catalog-locally.js b/scripts/start-catalog-locally.js
@@ -11,7 +11,6 @@ const catalogDir = join(__dirname, '../');
 const projectDIR = join(__dirname, `../examples/${catalog}`);
 
 fs.copyFileSync(join(projectDIR, 'eventcatalog.config.js'), join(catalogDir, 'eventcatalog.config.js'));
-
 fs.copyFileSync(join(projectDIR, 'eventcatalog.styles.css'), join(catalogDir, 'eventcatalog.styles.css'));
 
 execSync(

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -21,13 +21,19 @@ const navItems = [
   }
 ];
 
+const logo = {
+  src: catalog?.logo?.src || '/logo.png',
+  alt: catalog?.logo?.alt || 'Event Catalog',
+  text: catalog?.logo?.text || "EventCatalog"
+}
+
 ---
 <nav class="md:fixed top-0 w-full z-20 bg-white border-b border-gray-200 py-4 font-bold text-xl max-w-[70em]">
   <div class="flex justify-between items-center">
     <div class="w-1/3 flex space-x-2 items-center">
       <a href={buildUrl('/docs')} class="flex space-x-2 items-center">
-        <img src={buildUrl('/logo.png', true)} class="w-8" />
-        <span class="hidden sm:inline-block text-[1em]">{catalog.title}</span>
+        {logo.src && <img alt={logo.alt} src={buildUrl(logo.src, true)} class="w-8" />}
+        {logo.text && <span class="hidden sm:inline-block text-[1em]">{logo.text}</span>}
       </a>
     </div>
     <div class="w-1/3 md:block hidden">