create a homepage

JeelDobariya38 · Jun 13, 2024 · 9565047 · 9565047
1 parent 1384a46
commit 9565047
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en" class="overflow-x-hidden">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Coding Notes | Home</title>
+
+
+        <!-- Tailwind stuff!!! -->
+        <script src="https://cdn.tailwindcss.com"></script>
+
+        <!-- FontAwesome stuff!!! -->
+        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+            integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+            crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
+
+        <!-- Local stuff!!! -->
+        <link rel="stylesheet" href="stylesheets/style.css">
+
+        <!-- Prismjs stuff!!! -->
+        <!-- <link rel="stylesheet" href="stylesheets/prism.css" />
+        <script src="scripts/trimmer.js"></script>
+        <script src="scripts/prism.js"></script> -->
+    </head>
+
+    <body class="bg-slate-900 text-slate-400">
+        <!-- Hero Section -->
+        <div class="w-screen h-screen flex flex-col justify-center items-center">
+            <h1 class="text-6xl text-blue-500">Coding Notes</h1>
+            <p class="p-2 text-blue-800">A CheatSheet of Commonly used Snippites</p>
+        </div>
+        <hr class="mx-4 p-2" />
+        <main class="m-2 p-4">
+            <h2 class="text-xl">Commonly Used Snippites Category</h2>
+            <div class="categories">
+                <div>
+                    <a href="#">
+                        <div class="category p-4 border-cyan-700 bg-cyan-800">
+                            <h2 class="text-lg font-black">Git & Github Automation Snippites</h2>
+                            <p class="text-sm font-bold">here, you will find snipptes that automate git and github
+                                workflows!!!</p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </main>
+
+    </body>
+
+</html>
diff --git a/scripts/trimmer.js b/scripts/trimmer.js
@@ -0,0 +1,56 @@
+function trimCodeElements(className) {
+    // This script is designed to format code blocks on a webpage by removing unnecessary leading spaces while preserving the intended indentation. Here's a step-by-step explanation of how it works:
+
+    // 1. Element Selection: The script selects all elements with a specific class name, typically elements with the class name "trim-code," found on the webpage.
+
+    // 2. Text Content Retrieval: For each selected element, which is expected to contain code blocks, the script retrieves the text content. This content may include code with uneven indentation.
+
+    // 3. Line Separation: The code content is split into individual lines based on newline characters (newline character `\n`). This operation transforms the code into an array where each element represents a line of code.
+
+    // 4. Minimum Indentation Calculation: To maintain consistent indentation, the script calculates the minimum indentation level. It does so by examining each line within the code block, excluding the first and last lines. For each non-empty line, the script determines the number of leading spaces and keeps track of the smallest number of leading spaces.
+
+    // 5. Indentation Removal: The script processes each line in the code block, including the first line, and removes the minimum indentation from each line. This ensures that the code's indentation remains uniform while eliminating unnecessary leading spaces.
+
+    // 6. Text Content Update: After completing the cleaning process, the script updates the text content of the element with the formatted code, making it more readable and visually consistent.
+
+    // This script is useful for enhancing the display of code on webpages, improving its readability by aligning indentation while preserving code structure.
+
+    let elements = document.querySelectorAll("." + className);
+    for (let i = 0; i < elements.length; i++) {
+        let codeElement = elements[i];
+        let codeContent = codeElement.textContent;
+
+        // Split the code content into lines
+        let codeLines = codeContent.split('\n');
+        let minIndent = Number.MAX_SAFE_INTEGER;
+
+        // Find the minimum indentation level
+        for (let j = 0; j < codeLines.length - 1; j++) {
+            let line = codeLines[j];
+            if (line.trim() !== "") {
+                let leadingSpaces = line.length - line.trim().length;
+                minIndent = Math.min(minIndent, leadingSpaces);
+            }
+        }
+
+        let cleanedCode = "";
+
+        // Remove the minimum indentation from each line, including the last line
+        for (let j = 0; j < codeLines.length; j++) {
+            let line = codeLines[j];
+            cleanedCode += line.slice(minIndent) + (j === codeLines.length - 1 ? '' : "\n");
+        }
+
+        codeElement.innerHTML = "<code>" + cleanedCode + "</code>";
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    let preElements = document.querySelectorAll("pre");
+
+    // Loop through the selected elements and add the class
+    preElements.forEach(function (preElement) {
+        preElement.classList.add("trim-code");
+    });
+    trimCodeElements("trim-code");
+});
diff --git a/stylesheets/style.css b/stylesheets/style.css
@@ -0,0 +1,21 @@
+*::-webkit-scrollbar {
+    display: none;
+}
+
+.categories {
+    margin: 32px 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 16px;
+    justify-items: center;
+}
+
+.category {
+    overflow-y: hidden;
+    overflow-clip-margin: padding-box;
+    width: 320px;
+    height: 140px;
+    padding: 8px;
+    border: solid black 8px;
+    border-radius: 24px;
+}