Control avatar ring visibility

README.md

@@ -9,6 +9,9 @@
     <a href="https://codeclimate.com/github/arifszn/gitprofile/maintainability">
       <img src="https://api.codeclimate.com/v1/badges/c60f42d7d0b61bd33e98/maintainability" />
     </a>
+    <a href="https://github.com/arifszn/gitprofile/actions/workflows/test-deploy.yml">
+      <img src="https://github.com/arifszn/gitprofile/actions/workflows/test-deploy.yml/badge.svg" />
+    </a>
     <a href="https://github.com/arifszn/gitprofile/issues">
       <img src="https://img.shields.io/github/issues/arifszn/gitprofile"/>
     </a>
@@ -234,6 +237,9 @@ const config = {
     // using user system preferences, instead of the hardcoded defaultTheme
     respectPrefersColorScheme: true,
 
+    // Hide the ring in Profile picture
+    hideAvatarRing: false,
+
     // Available themes. To remove any theme, exclude from here.
     themes: [
       'light',

gitprofile.config.js

@@ -98,6 +98,9 @@ const config = {
     // using user system preferences, instead of the hardcoded defaultTheme
     respectPrefersColorScheme: false,
 
+    // Hide the ring in Profile picture
+    hideAvatarRing: false,
+
     // Available themes. To remove any theme, exclude from here.
     themes: [
       'light',

src/components/GitProfile.jsx

@@ -156,7 +156,11 @@ const GitProfile = ({ config }) => {
                           themeConfig={sanitizedConfig.themeConfig}
                         />
                       )}
-                      <AvatarCard profile={profile} loading={loading} />
+                      <AvatarCard
+                        profile={profile}
+                        loading={loading}
+                        avatarRing={!sanitizedConfig.themeConfig.hideAvatarRing}
+                      />
                       <Details
                         profile={profile}
                         loading={loading}
@@ -281,6 +285,7 @@ GitProfile.propTypes = {
       defaultTheme: PropTypes.string,
       disableSwitch: PropTypes.bool,
       respectPrefersColorScheme: PropTypes.bool,
+      hideAvatarRing: PropTypes.bool,
       themes: PropTypes.array,
       customTheme: PropTypes.shape({
         primary: PropTypes.string,

src/components/avatar-card/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { fallbackImage, skeleton } from '../../helpers/utils';
 import LazyImage from '../lazy-image';
 
-const AvatarCard = ({ profile, loading }) => {
+const AvatarCard = ({ profile, loading, avatarRing }) => {
   return (
     <div className="card shadow-lg compact bg-base-100">
       <div className="grid place-items-center py-8">
@@ -18,7 +18,13 @@ const AvatarCard = ({ profile, loading }) => {
           </div>
         ) : (
           <div className="avatar opacity-90">
-            <div className="mb-8 rounded-full w-32 h-32 ring ring-primary ring-offset-base-100 ring-offset-2">
+            <div
+              className={`mb-8 rounded-full w-32 h-32 ${
+                avatarRing
+                  ? 'ring ring-primary ring-offset-base-100 ring-offset-2'
+                  : ''
+              }`}
+            >
               {
                 <LazyImage
                   src={profile.avatar ? profile.avatar : fallbackImage}
@@ -57,6 +63,7 @@ const AvatarCard = ({ profile, loading }) => {
 AvatarCard.propTypes = {
   profile: PropTypes.object,
   loading: PropTypes.bool.isRequired,
+  avatarRing: PropTypes.bool.isRequired,
 };
 
 export default AvatarCard;

src/helpers/utils.jsx

@@ -177,6 +177,7 @@ export const sanitizeConfig = (config) => {
       disableSwitch: config?.themeConfig?.disableSwitch || false,
       respectPrefersColorScheme:
         config?.themeConfig?.respectPrefersColorScheme || false,
+      hideAvatarRing: config?.themeConfig?.hideAvatarRing || false,
       themes: themes,
       customTheme: customTheme,
     },

types/index.d.ts

@@ -186,6 +186,11 @@ export interface ThemeConfig {
    */
   respectPrefersColorScheme?: boolean;
 
+  /**
+   * Hide the ring in Profile picture
+   */
+  hideAvatarRing?: boolean;
+
   /**
    * Available themes
    */