feat - added ability to add css overrides (#473)

* feat - added ability to add css overrides

---------

Co-authored-by: Boyne <[email protected]>

.changeset/gorgeous-buses-turn.md

@@ -0,0 +1,6 @@
+---
+"@eventcatalog/create-eventcatalog": minor
+"@eventcatalog/core": minor
+---
+
+feat - added ability to add css overrides

.github/workflows/canary.yml

@@ -18,10 +18,10 @@ jobs:
           fetch-depth: 0
 
       # If you use a version of Node other than 12, change it here.
-      - name: Set up Node.js 16.x
+      - name: Set up Node.js 18.x
         uses: actions/setup-node@master
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       # If you use npm instead of yarn, change this to `npm install`.
       - name: Install dependencies
@@ -45,8 +45,9 @@ jobs:
 
       - name: Release snapshot
         run: |
-          npx changeset version --snapshot
-          npx changeset publish --tag canary
+          npx changeset version --snapshot --openssl-legacy-provider
+          npx changeset publish --tag canary --openssl-legacy-provider
         env:
+          NODE_OPTIONS: --openssl-legacy-provider
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

.github/workflows/lint.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           cache: yarn
-          node-version: '16.14.0'
+          node-version: '18.17.0'
       - name: Installation
         run: yarn
       - name: Check immutable yarn.lock

.github/workflows/release.yml

@@ -14,10 +14,10 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Use Node.js 16.x
+      - name: Use Node.js 18.x
         uses: actions/setup-node@v1
         with:
-          version: 16.x
+          version: 18.x
 
       - name: Install deps and build (with cache)
         uses: bahmutov/npm-install@v1

.github/workflows/tests.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: ['16', '18']
+        node: ['18']
     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node }}

.github/workflows/verify-build.yml

@@ -17,7 +17,7 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           cache: yarn
-          node-version: '16'
+          node-version: '18'
       - name: Installation
         run: yarn
       - name: Check immutable yarn.lock

.gitignore

@@ -5,7 +5,6 @@ packages/*/lib
 !packages/eventcatalog/lib
 .eslintcache
 /packages/eventcatalog/eventcatalog.config.js
-/packages/eventcatalog/eventcatalog.styles.css
 
 packages/eventcatalog/public/schemas
 

packages/create-eventcatalog/templates/default/eventcatalog.styles.css

@@ -11,5 +11,5 @@ Note: Override based on custom selectors / hacks at your own risk. EventCatalog
 
 */
 .ec-homepage{
-    /* background:red; */
+    background:black;
 }

packages/eventcatalog/eventcatalog.styles.css

@@ -0,0 +1,15 @@
+
+/**
+
+Stylesheet overrides for EventCatalog. 
+There is currently a limit on what can be changed. 
+
+If you want to override some styles of particular elements, raise an issue for discussion. (https://github.com/boyney123/eventcatalog)
+
+Note: Override based on custom selectors / hacks at your own risk. EventCatalog selectors will change over time, which may break your styles.
+      use the styles marked with `ec-` for non breaking styling changes.
+
+*/
+.ec-homepage{
+    background:black;
+}

packages/eventcatalog/pages/_app.tsx

@@ -1,5 +1,4 @@
 import '../styles/globals.css';
-// import '../eventcatalog.styles.css';
 
 import { AppProps } from 'next/app';
 
@@ -38,7 +37,7 @@ function Page({ Component, pageProps }: AppProps) {
       try {
         // @ts-ignore
         await import('../eventcatalog.styles.css');
-        console.log('Styles loaded successfully.');
+        console.log('Styles loaded successfully');
       } catch (error) {
         console.log('Custom stylesheet does not exist. If you want to add one add eventcatalog.styles.css to your project');
       }

website/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
 };

website/docusaurus.config.js

@@ -4,48 +4,48 @@
 // There are various equivalent ways to declare your Docusaurus config.
 // See: https://docusaurus.io/docs/api/docusaurus-config
 
-import { themes as prismThemes } from "prism-react-renderer";
-import * as path from 'path'
+import { themes as prismThemes } from 'prism-react-renderer';
+import * as path from 'path';
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'EventCatalog',
   tagline: 'Discover, Explore and Document your Event Driven Architectures.',
-  favicon: "img/favicon.ico",
+  favicon: 'img/favicon.ico',
 
   // Set the production url of your site here
   url: 'https://eventcatalog.dev',
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: "/",
+  baseUrl: '/',
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
-  organizationName: "eventcatalog", // Usually your GitHub org/user name.
-  projectName: "eventcatalog", // Usually your repo name.
+  organizationName: 'eventcatalog', // Usually your GitHub org/user name.
+  projectName: 'eventcatalog', // Usually your repo name.
 
-  onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
 
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
   // may want to replace "en" with "zh-Hans".
   i18n: {
-    defaultLocale: "en",
-    locales: ["en"],
+    defaultLocale: 'en',
+    locales: ['en'],
   },
 
   presets: [
     [
-      "classic",
+      'classic',
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         gtag: {
-          trackingID: "G-NGSDGQK7V1",
+          trackingID: 'G-NGSDGQK7V1',
           anonymizeIP: true,
         },
         docs: {
-          sidebarPath: "./sidebars.js",
+          sidebarPath: './sidebars.js',
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl: 'https://github.com/boyney123/eventcatalog/edit/master/website/blog/',
@@ -57,7 +57,7 @@ const config = {
           editUrl: 'https://github.com/boyney123/eventcatalog/edit/master/website/blog/',
         },
         theme: {
-          customCss: "./src/css/custom.css",
+          customCss: './src/css/custom.css',
         },
       }),
     ],
@@ -67,14 +67,14 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       // Replace with your project's social card
-      image: "img/opengraph.png",
-      
+      image: 'img/opengraph.png',
+
       colorMode: {
-        defaultMode: "light",
+        defaultMode: 'light',
       },
       announcementBar: {
         content:
-        '⭐️ If you like EventCatalog, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/boyney123/eventcatalog">GitHub</a>! ⭐️',
+          '⭐️ If you like EventCatalog, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/boyney123/eventcatalog">GitHub</a>! ⭐️',
       },
       docs: {
         sidebar: {
@@ -129,7 +129,7 @@ const config = {
           },
         ],
       },
-      
+
       footer: {
         style: 'dark',
         links: [
@@ -183,11 +183,11 @@ const config = {
   plugins: [
     async function myPlugin(context, options) {
       return {
-        name: "docusaurus-tailwindcss",
+        name: 'docusaurus-tailwindcss',
         configurePostCss(postcssOptions) {
           // Appends TailwindCSS and AutoPrefixer.
-          postcssOptions.plugins.push(require("tailwindcss"));
-          postcssOptions.plugins.push(require("autoprefixer"));
+          postcssOptions.plugins.push(require('tailwindcss'));
+          postcssOptions.plugins.push(require('autoprefixer'));
           return postcssOptions;
         },
       };
@@ -199,7 +199,7 @@ const config = {
           resolve: {
             alias: {
               // assuming root node_modules is up from "./packages/<your-docusaurus>
-              react: path.resolve('./node_modules/react'), 
+              react: path.resolve('./node_modules/react'),
             },
           },
         };

website/sidebars.js

@@ -70,8 +70,8 @@ const sidebars = {
   ],
   api: [
     {
-      type: "autogenerated",
-      dirName: "api",
+      type: 'autogenerated',
+      dirName: 'api',
     },
   ],
   community: [

website/src/components/Features.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import {
   GlobeAltIcon,
-  ChatAltIcon,
   HeartIcon,
   CodeBracketIcon,
   DocumentIcon,
   ChartBarIcon,
   UserGroupIcon,
   DocumentCheckIcon,
-  ChatBubbleBottomCenterIcon
+  ChatBubbleBottomCenterIcon,
 } from '@heroicons/react/24/outline';
 
 const features = [

website/src/components/Hero.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { ArrowLeftIcon, ArrowRightIcon, RefreshIcon } from '@heroicons/react/20/solid';
 
 import 'prismjs';
 import 'prismjs/themes/prism-tomorrow.css';

website/tailwind.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     extend: {},
   },