Merge pull request #765 from arifszn/v4

Release v4

Author: arifszn

README.md

@@ -43,7 +43,7 @@
 **Features:**
 
 ✓ [Easy to Setup](#-installation--setup)  
-✓ [33 Themes](#themes)  
+✓ [37 Themes](#themes)  
 ✓ [Google Analytics](#google-analytics)  
 ✓ [Hotjar](#hotjar)  
 ✓ [SEO](#seo)  
@@ -202,11 +202,7 @@ const CONFIG = {
       ],
     },
   },
-  seo: {
-    title: 'Portfolio of Ariful Alam',
-    description: '',
-    imageURL: '',
-  },
+  seo: { title: 'Portfolio of Ariful Alam', description: '', imageURL: '' },
   social: {
     linkedin: 'ariful-alam',
     x: 'arif_szn',
@@ -317,10 +313,7 @@ const CONFIG = {
     id: '', // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
   },
   // Track visitor interaction and behavior. https://www.hotjar.com
-  hotjar: {
-    id: '',
-    snippetVersion: 6,
-  },
+  hotjar: { id: '', snippetVersion: 6 },
   themeConfig: {
     defaultTheme: 'nord',
 
@@ -369,19 +362,11 @@ const CONFIG = {
       'dim',
       'nord',
       'sunset',
+      'caramellatte',
+      'abyss',
+      'silk',
       'procyon',
     ],
-
-    // Custom theme, applied to `procyon` theme
-    customTheme: {
-      primary: '#fc055b',
-      secondary: '#219aaf',
-      accent: '#e8d03a',
-      neutral: '#2A2730',
-      'base-100': '#E3E3ED',
-      '--rounded-box': '3rem',
-      '--rounded-btn': '3rem',
-    },
   },
 
   // Optional Footer. Supports plain text or HTML.
@@ -399,7 +384,7 @@ export default CONFIG;
 
 ### Themes
 
-There are 33 themes available that can be selected from the dropdown.
+There are 37 themes available that can be selected from the dropdown.
 
 The default theme can be specified.
 
@@ -418,34 +403,23 @@ const CONFIG = {
   <img src="https://github.com/arifszn/gitprofile/assets/45073703/91a2d9e6-67e5-47b4-9752-1881ac0f907f" alt="Theme Dropdown" width="50%">
 </p>
 
-You can create your own custom theme by modifying these values. Theme `procyon` will have the custom styles.
-
-```ts
-// gitprofile.config.ts
-const CONFIG = {
-  /**
-   * Defines the custom theme colors and styles for the application.
-   * The theme includes the following properties:
-   * - `primary`: The primary color used throughout the application.
-   * - `secondary`: The secondary color used for accents and highlights.
-   * - `accent`: The accent color used for special elements.
-   * - `neutral`: The neutral color used for backgrounds and text.
-   * - `base-100`: The base background color.
-   * - `--rounded-box`: The border radius for boxes and containers.
-   * - `--rounded-btn`: The border radius for buttons.
-   */
-  themeConfig: {
-    customTheme: {
-      primary: '#fc055b',
-      secondary: '#219aaf',
-      accent: '#e8d03a',
-      neutral: '#2A2730',
-      'base-100': '#E3E3ED',
-      '--rounded-box': '3rem',
-      '--rounded-btn': '3rem',
-    },
-  },
-};
+You can create your own custom theme by modifying the CSS variables in `src/assets/index.css`. Theme `procyon` is defined as a custom theme.
+
+```css
+/* src/assets/index.css */
+@plugin "daisyui/theme" {
+  name: 'procyon';
+  color-scheme: light;
+
+  --color-base-100: #e3e3ed;
+  --color-base-200: #d1d1db;
+  --color-base-300: #bfbfc9;
+  --color-base-content: #2a2730;
+  --color-primary: #fc055b;
+  --color-primary-content: #ffffff;
+  --color-secondary: #219aaf;
+  --color-secondary-content: #ffffff;
+}
 ```
 
 ### Google Analytics
@@ -456,9 +430,7 @@ const CONFIG = {
 // gitprofile.config.ts
 const CONFIG = {
   // ...
-  googleAnalytics: {
-    id: 'G-XXXXXXXXX',
-  },
+  googleAnalytics: { id: 'G-XXXXXXXXX' },
 };
 ```
 
@@ -472,10 +444,7 @@ Besides tracking visitors, it will track `click events` on projects and blog pos
 // gitprofile.config.ts
 const CONFIG = {
   // ...
-  hotjar: {
-    id: '',
-    snippetVersion: 6,
-  },
+  hotjar: { id: '', snippetVersion: 6 },
 };
 ```
 
@@ -487,11 +456,7 @@ You can customize the meta tags for SEO in `seo`.
 // gitprofile.config.ts
 const CONFIG = {
   // ...
-  seo: {
-    title: 'Portfolio of Ariful Alam',
-    description: '',
-    imageURL: '',
-  },
+  seo: { title: 'Portfolio of Ariful Alam', description: '', imageURL: '' },
 };
 ```
 
@@ -730,11 +695,7 @@ If you have [medium](https://medium.com) or [dev](https://dev.to) account, you c
 // gitprofile.config.ts
 const CONFIG = {
   // ...
-  blog: {
-    source: 'dev',
-    username: 'arifszn',
-    limit: 5,
-  },
+  blog: { source: 'dev', username: 'arifszn', limit: 5 },
 };
 ```
 

gitprofile.config.ts

@@ -51,11 +51,7 @@ const CONFIG = {
       ],
     },
   },
-  seo: {
-    title: 'Portfolio of Ariful Alam',
-    description: '',
-    imageURL: '',
-  },
+  seo: { title: 'Portfolio of Ariful Alam', description: '', imageURL: '' },
   social: {
     linkedin: 'ariful-alam',
     x: 'arif_szn',
@@ -166,10 +162,7 @@ const CONFIG = {
     id: '', // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
   },
   // Track visitor interaction and behavior. https://www.hotjar.com
-  hotjar: {
-    id: '',
-    snippetVersion: 6,
-  },
+  hotjar: { id: '', snippetVersion: 6 },
   themeConfig: {
     defaultTheme: 'lofi',
 
@@ -218,19 +211,11 @@ const CONFIG = {
       'dim',
       'nord',
       'sunset',
+      'caramellatte',
+      'abyss',
+      'silk',
       'procyon',
     ],
-
-    // Custom theme, applied to `procyon` theme
-    customTheme: {
-      primary: '#fc055b',
-      secondary: '#219aaf',
-      accent: '#e8d03a',
-      neutral: '#2A2730',
-      'base-100': '#E3E3ED',
-      '--rounded-box': '3rem',
-      '--rounded-btn': '3rem',
-    },
   },
 
   // Optional Footer. Supports plain text or HTML.

global.d.ts

@@ -284,43 +284,6 @@ interface Blog {
   limit?: number;
 }
 
-interface CustomTheme {
-  /**
-   * Primary color
-   */
-  primary?: string;
-
-  /**
-   * Secondary color
-   */
-  secondary?: string;
-
-  /**
-   * Accent color
-   */
-  accent?: string;
-
-  /**
-   * Neutral color
-   */
-  neutral?: string;
-
-  /**
-   * Base color of page
-   */
-  'base-100'?: string;
-
-  /**
-   * Border radius of rounded-box
-   */
-  '--rounded-box'?: string;
-
-  /**
-   * Border radius of rounded-btn
-   */
-  '--rounded-btn'?: string;
-}
-
 interface ThemeConfig {
   /**
    * Default theme
@@ -346,11 +309,6 @@ interface ThemeConfig {
    * Available themes
    */
   themes?: Array<string>;
-
-  /**
-   * Custom theme
-   */
-  customTheme?: CustomTheme;
 }
 
 interface Config {

index.html

@@ -23,6 +23,7 @@
     <meta name="twitter:title" content="<%- metaTitle %>" />
     <meta name="twitter:description" content="<%- metaDescription %>" />
     <meta name="twitter:image" content="<%- metaImageURL %>" />
+    <%- googleAnalyticsScript %>
   </head>
   <body>
     <div id="root"></div>