Merge branch 'dostonnabotov:main' into main

Author: ashukr07

CONTRIBUTING.md

@@ -117,7 +117,7 @@ Here’s an example for JavaScript:
 title: Format Date
 description: Formats a date in 'YYYY-MM-DD' format.
 author: dostonnabotov
-tags: javascript,date,format
+tags: date,format
 ---
 
 ```js

README.md

@@ -63,7 +63,7 @@ Here's an example for JavaScript:
 title: Format Date
 description: Formats a date in 'YYYY-MM-DD' format.
 author: dostonnabotov
-tags: javascript,date,format
+tags: date,format
 ---
 
 ```js

snippets/bash/icon.svg

@@ -0,0 +1,20 @@
+---
+title: Kill Previous Instances
+description: Kill all previous instances of a script
+author: saminjay
+tags: kill,process,background
+---
+
+```bash
+function kill_prev() {
+    # $$ contains current pid (grep ignore so it doesn't suicide)
+    local processes
+    readarray -t processes < <(pgrep -f "$0" | grep -v "$$")
+    kill "${processes[@]}" >/dev/null 2>&1
+}
+
+# Usage:
+# Add this function to your background running script
+# It will make sure that only one instance of your script is running at a time
+kill_prev
+```

snippets/bash/system/kill-previous-instances.md

@@ -0,0 +1,22 @@
+---
+title: System Resource Monitor
+description: Monitors system resources (CPU, RAM, disk, users)
+author: sponkurtus2
+tags: file,system
+---
+
+```bash
+system_resources () {
+      echo "CPU Load: $(top -bn1 | grep "Cpu(s)" | awk '{print $2}')%"
+      echo "Memory Used: $(free -m | awk 'NR==2{printf "%.2f%%", $3*100/$2}')"
+      echo "Disk Used: $(df -h / | awk 'NR==2{print $5}')"
+      echo "Active Users: $(who | wc -l)"
+}
+
+system_resources "$@"
+
+# Usage:
+chmod a+x system-resource-monitor.sh # First make it executable for all the users
+
+./system-resource-monitor.sh  # It will print the following system resources (CPU, RAM, disk, and active users)
+```

snippets/bash/system/system-resource-monitor.md

@@ -3,25 +3,22 @@ title: Pulse Animation
 description: Adds a smooth pulsing animation with opacity and scale effects
 author: AlsoKnownAs-Ax
 tags: animation,pulse,pulse-scale
+contributors: alanb4rt
 ---
 
 ```css
 .pulse {
-    animation: pulse 2s ease-in-out infinite;
+  animation: pulse 1s ease-in-out infinite alternate;
 }
 
 @keyframes pulse {
-  0% {
+  from {
     opacity: 0.5;
     transform: scale(1);
   }
-  50% {
+  to {
     opacity: 1;
     transform: scale(1.05);
   }
-  100% {
-    opacity: 0.5;
-    transform: scale(1);
-  }
 }
 ```

snippets/css/animations/pulse-animation.md

@@ -0,0 +1,44 @@
+---
+title: Get Desktop Enviroment
+description: Get the Desktop Enviroment that the user is currently using.
+author: sponkurtus2 
+tags: linux,file 
+---
+
+```rust
+fn get_desktop_env() -> String {
+    // Return empty string if no X display is available
+    if env::var("DISPLAY").is_err() {
+        return String::new();
+    }
+
+    // Check common desktop environment variables.
+    for env_var in &[
+        "XDG_SESSION_DESKTOP",
+        "XDG_CURRENT_DESKTOP",
+        "DESKTOP_SESSION",
+    ] {
+        if let Ok(de) = env::var(env_var) {
+            return de;
+        }
+    }
+
+    // As fallback, try to get desktop name from last word of last line in .xinitrc
+    let path = format!("{}/.xinitrc", env::var("HOME").unwrap_or_default());
+    if let Ok(mut file) = File::open(&path) {
+        let mut buf = String::new();
+        if file.read_to_string(&mut buf).is_ok() {
+            if let Some(last_line) = buf.lines().last() {
+                let last_word = last_line.split(' ').last().unwrap_or("");
+                return last_word.to_string();
+            }
+        }
+    }
+
+    // Return "N/A" if no desktop environment could be detected
+    String::from("N/A")
+}
+
+// Usage:
+get_desktop_env(); // Returns: the desktop enviroment that the user actually has e.g. i3.
+```

snippets/rust/linux/get-desktop-enviroment.md

@@ -40,7 +40,7 @@ const CodePreview = ({ language = "markdown", code }: Props) => {
         language={language}
         style={theme === "dark" ? oneDark : oneLight}
         wrapLines={true}
-        customStyle={{ margin: "0", maxHeight: "20rem" }}
+        customStyle={{ margin: "0", maxHeight: "32rem" }}
       >
         {code}
       </SyntaxHighlighter>

src/components/CodePreview.tsx

@@ -61,29 +61,31 @@ const SnippetModal: React.FC<Props> = ({
             <CloseIcon />
           </Button>
         </div>
-        <CodePreview language={slugify(language)} code={snippet.code} />
-        <p>
-          <b>Description: </b>
-          {snippet.description}
-        </p>
-        <p>
-          Contributed by{" "}
-          <a
-            href={`https://github.com/${snippet.author}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="styled-link"
-          >
-            @{snippet.author}
-          </a>
-        </p>
-        <ul role="list" className="modal__tags">
-          {snippet.tags.map((tag) => (
-            <li key={tag} className="modal__tag">
-              {tag}
-            </li>
-          ))}
-        </ul>
+        <div className="modal__body | flow">
+          <CodePreview language={slugify(language)} code={snippet.code} />
+          <p>
+            <b>Description: </b>
+            {snippet.description}
+          </p>
+          <p>
+            Contributed by{" "}
+            <a
+              href={`https://github.com/${snippet.author}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="styled-link"
+            >
+              @{snippet.author}
+            </a>
+          </p>
+          <ul role="list" className="modal__tags">
+            {snippet.tags.map((tag) => (
+              <li key={tag} className="modal__tag">
+                {tag}
+              </li>
+            ))}
+          </ul>
+        </div>
       </motion.div>
     </motion.div>,
     modalRoot

src/components/SnippetModal.tsx

@@ -550,22 +550,19 @@ abbr {
   border-radius: var(--br-lg);
   padding: 0.75em;
   text-align: start;
-  filter: grayscale(100%);
 
   &:is(:hover, :focus-visible) {
-    outline: 3px solid var(--clr-border-primary);
-    filter: grayscale(0);
+    outline: 2px solid var(--clr-border-primary);
   }
 }
 
 .snippet__preview {
   width: 100%;
   overflow: hidden;
-  aspect-ratio: 10 / 3;
+  aspect-ratio: 9 / 3;
   background-color: var(--clr-bg-secondary);
   /* background-image: var(--gradient-secondary); */
   border: 1px solid var(--clr-border-primary);
-  border-radius: var(--br-md);
   position: relative;
   padding-inline: 1em;
   display: grid;
@@ -599,20 +596,34 @@ body:has(.modal-overlay) {
 
 .modal {
   background-color: var(--clr-bg-secondary);
-  padding: 2rem;
-  width: 90%;
-  max-width: 800px;
+  width: fit-content;
+  min-width: 50%;
+  max-width: 1000px;
+  max-height: 90%;
   border-radius: var(--br-lg);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  gap: 0;
   position: relative;
-  gap: 1rem;
+  overflow: auto;
 }
 
 .modal__header {
+  z-index: 50;
   display: flex;
+  position: sticky;
+  top: 0;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
+  padding: 1rem 1.5rem;
+  background-color: var(--clr-bg-secondary);
+  border-radius: var(--br-lg);
+}
+
+.modal__body {
+  padding: 1.5rem;
+  padding-top: 0;
+  gap: 1rem;
 }
 
 .code-preview {