Frameworks frontend implementation

cspell-dict.txt

@@ -1,2 +1,3 @@
 quicksnip
 slugifyed
+sublanguage

public/consolidated/_index.json

@@ -37,12 +37,22 @@
     {
         "name": "JAVASCRIPT",
         "icon": "/icons/javascript.svg",
-        "subLanguages": []
+        "subLanguages": [
+            {
+                "name": "REACT",
+                "icon": "/icons/javascript--react.svg"
+            }
+        ]
     },
     {
         "name": "PYTHON",
         "icon": "/icons/python.svg",
-        "subLanguages": []
+        "subLanguages": [
+            {
+                "name": "FASTAPI",
+                "icon": "/icons/python--fastapi.svg"
+            }
+        ]
     },
     {
         "name": "REGEX",

public/consolidated/cpp.json

@@ -33,7 +33,6 @@
         ]
     },
     {
-        "categoryName": "Debuging",
         "name": "Debugging",
         "snippets": [
             {
@@ -50,6 +49,23 @@
             }
         ]
     },
+    {
+        "name": "Debuging",
+        "snippets": [
+            {
+                "title": "Vector Print",
+                "description": "Overloads the << operator to print the contents of a vector just like in python.",
+                "author": "Mohamed-faaris",
+                "tags": [
+                    "printing",
+                    "debuging",
+                    "vector"
+                ],
+                "contributors": [],
+                "code": "#include <iostream> \n#include <vector>   \n\ntemplate <typename T>\nstd::ostream& operator<<(std::ostream& os, const std::vector<T>& vec) {\n    os << \"[\"; \n    for (size_t i = 0; i < vec.size(); ++i) {\n        os << vec[i]; // Print each vector element\n        if (i != vec.size() - 1) {\n            os << \", \"; // Add separator\n        }\n    }\n    os << \"]\"; \n    return os; // Return the stream\n}\n\n// Usage:\nstd::vector<int> numbers = {1, 2, 3, 4, 5};\nstd::cout << numbers << std::endl; // Outputs: [1, 2, 3, 4, 5]\n\n"
+            }
+        ]
+    },
     {
         "name": "Math And Numbers",
         "snippets": [

public/consolidated/css.json

@@ -1,4 +1,67 @@
 [
+    {
+        "name": "Animations",
+        "snippets": [
+            {
+                "title": "Blink Animation",
+                "description": "Adds an infinite blinking animation to an element",
+                "author": "AlsoKnownAs-Ax",
+                "tags": [
+                    "animation",
+                    "blink",
+                    "infinite"
+                ],
+                "contributors": [],
+                "code": ".blink {\n    animation: blink 1s linear infinite;\n}\n\n@keyframes blink{\n    0%{\n        opacity: 0;\n    }\n    50%{\n        opacity: 1;\n    }\n    100%{\n        opacity: 0;\n    }\n}\n"
+            },
+            {
+                "title": "Pulse Animation",
+                "description": "Adds a smooth pulsing animation with opacity and scale effects",
+                "author": "AlsoKnownAs-Ax",
+                "tags": [
+                    "animation",
+                    "pulse",
+                    "pulse-scale"
+                ],
+                "contributors": [],
+                "code": ".pulse {\n    animation: pulse 2s ease-in-out infinite;\n}\n\n@keyframes pulse {\n  0% {\n    opacity: 0.5;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1.05);\n  }\n  100% {\n    opacity: 0.5;\n    transform: scale(1);\n  }\n}\n"
+            },
+            {
+                "title": "Shake Animation",
+                "description": "Adds a shake animation ( commonly used to mark invalid fields )",
+                "author": "AlsoKnownAs-Ax",
+                "tags": [
+                    "shake",
+                    "shake-horizontal"
+                ],
+                "contributors": [],
+                "code": ".shake {\n    animation: shake .5s ease-in-out;\n}\n\n@keyframes shake {\n  0%, 100% {\n    transform: translateX(0);\n  }\n  25% {\n    transform: translateX(-10px);\n  }\n  50% {\n    transform: translateX(10px);\n  }\n  75% {\n    transform: translateX(-10px);\n  }\n}\n"
+            },
+            {
+                "title": "Slide-in Animation",
+                "description": "Adds a slide-in from the right side of the screen",
+                "author": "AlsoKnownAs-Ax",
+                "tags": [
+                    "animation",
+                    "slide-in",
+                    "slide-right"
+                ],
+                "contributors": [],
+                "code": ".slide-in {\n    animation: slide-in 1s ease-in-out;\n}\n\n@keyframes slide-in {\n    from {\n        scale: 300% 1;\n        translate: 150vw 0;\n    }\n\n    to {\n        scale: 100% 1;\n        translate: 0 0;\n    }\n}\n"
+            },
+            {
+                "title": "Typewriter Animation",
+                "description": "Adds a typewriter animation + blinking cursor",
+                "author": "AlsoKnownAs-Ax",
+                "tags": [
+                    "blinking",
+                    "typewriter"
+                ],
+                "contributors": [],
+                "code": "    <div class=\"typewriter\">\n      <div>\n          <p>Typerwriter Animation</p>\n      </div>\n    </div>\n```\n\n```css\n    .typewriter{\n        display: flex;\n        justify-content: center;\n    }\n\n    .typewriter p {\n        overflow: hidden;\n        font-size: 1.5rem;\n        font-family: monospace;\n        border-right: 1px solid;\n        margin-inline: auto;\n        white-space: nowrap;\n        /* The cursor will inherit the text's color by default */\n        /* border-color: red */                \n        /* Steps: number of chars (better to set directly in js)*/\n        animation: typing 3s steps(21) forwards,\n        blink 1s step-end infinite;\n    }\n\n    @keyframes typing{\n        from{\n            width: 0%\n        }\n        to{\n            width: 100%\n        }\n    }\n\n    @keyframes blink{\n        50%{\n            border-color: transparent;\n        }\n    }\n"
+            }
+        ]
+    },
     {
         "name": "Buttons",
         "snippets": [

public/consolidated/java.json

@@ -1,4 +1,22 @@
 [
+    {
+        "name": "Array Manipulation",
+        "snippets": [
+            {
+                "title": "Zip Two Lists",
+                "description": "Zips two lists into a list of paired elements, combining corresponding elements from both lists.",
+                "author": "davidanukam",
+                "tags": [
+                    "lists",
+                    "zip",
+                    "stream-api",
+                    "collections"
+                ],
+                "contributors": [],
+                "code": "import java.util.*; // Importing utility classes for List and Arrays\nimport java.util.stream.IntStream; // Importing IntStream for range and mapping\nimport java.util.stream.Collectors; // Importing Collectors for collecting stream results\n\npublic <A, B> List<List<Object>> zip(List<A> list1, List<B> list2) {\n    // Create pairs by iterating through the indices of both lists\n    return IntStream.range(0, Math.min(list1.size(), list2.size())) // Limit the range to the smaller list\n            .mapToObj(i -> Arrays.asList(list1.get(i), list2.get(i))) // Pair elements from both lists at index i\n            .collect(Collectors.toList()); // Collect the pairs into a List\n}\n\n// Usage:\nList<String> arr1 = Arrays.asList(\"a\", \"b\", \"c\");\nList<Integer> arr2 = Arrays.asList(1, 2, 3);\nList<List<Object>> zipped = zip(arr1, arr2);\n\nSystem.out.println(zipped); // Output: [[a, 1], [b, 2], [c, 3]]\n"
+            }
+        ]
+    },
     {
         "name": "Basics",
         "snippets": [

public/consolidated/javascript--react.json

@@ -0,0 +1,18 @@
+[
+    {
+        "name": "Basics",
+        "snippets": [
+            {
+                "title": "Hello, World!",
+                "description": "Show Hello World on the page.",
+                "author": "ACR1209",
+                "tags": [
+                    "printing",
+                    "hello-world"
+                ],
+                "contributors": [],
+                "code": "import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst App = () => {\n    return (\n        <div>\n            <h1>Hello, World!</h1>\n        </div>\n    );\n};\n\nReactDOM.render(<App />, document.getElementById('root'));\n"
+            }
+        ]
+    }
+]

public/consolidated/python--fastapi.json

@@ -0,0 +1,20 @@
+[
+    {
+        "name": "Basics",
+        "snippets": [
+            {
+                "title": "Hello, World!",
+                "description": "Returns Hello, World! when it recives a GET request made to the root endpoint.",
+                "author": "ACR1209",
+                "tags": [
+                    "printing",
+                    "hello-world",
+                    "web",
+                    "api"
+                ],
+                "contributors": [],
+                "code": "from typing import Union\nfrom fastapi import FastAPI\n\napp = FastAPI()\n\n\n@app.get(\"/\")\ndef read_root():\n    return {\"msg\": \"Hello, World!\"}\n\n# Usage: \n# -> Go to http://127.0.0.1:8000/ and you'll see {\"msg\", \"Hello, World!\"}\n"
+            }
+        ]
+    }
+]

snippets/javascript/[react]/basics/hello-world.md

@@ -0,0 +1,21 @@
+---
+title: Hello, World!
+description: Show Hello World on the page.
+author: ACR1209
+tags: printing,hello-world
+---
+
+```tsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const App = () => {
+    return (
+        <div>
+            <h1>Hello, World!</h1>
+        </div>
+    );
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```

snippets/python/[fastapi]/basics/hello-world.md

@@ -0,0 +1,21 @@
+---
+title: Hello, World!
+description: Returns Hello, World! when it recives a GET request made to the root endpoint.
+author: ACR1209
+tags: printing,hello-world,web,api
+---
+
+```py
+from typing import Union
+from fastapi import FastAPI
+
+app = FastAPI()
+
+
+@app.get("/")
+def read_root():
+    return {"msg": "Hello, World!"}
+
+# Usage: 
+# -> Go to http://127.0.0.1:8000/ and you'll see {"msg", "Hello, World!"}
+```