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!"}
+```