Skip to content

Commit 7ac0b6a

Browse files
committed
Fixed setting first category as default and Introduced new code format
1 parent 71d65fd commit 7ac0b6a

File tree

9 files changed

+439
-51
lines changed

9 files changed

+439
-51
lines changed

CONTRIBUTING.md

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,10 @@ Look for the categoryName where your snippet belongs.
3636
{
3737
"title": "Name of the snippet",
3838
"description": "A short explanation of what the snippet does",
39-
"code": "your code goes here",
39+
"code": [
40+
"your code goes here",
41+
" this is a newline with a space"
42+
],
4043
"tags": ["tag1", "tag2", "tag3"],
4144
"author": "your_github_username"
4245
}
@@ -53,7 +56,12 @@ Here’s an example for JavaScript:
5356
{
5457
"title": "Format Date",
5558
"description": "Formats a date in 'YYYY-MM-DD' format.",
56-
"code": "const formatDate = (date) => date.toISOString().split('T')[0];\n\n// Usage:\nconsole.log(formatDate(new Date())); // Output: '2024-12-10'",
59+
"code": [
60+
"const formatDate = (date) => date.toISOString().split('T')[0];",
61+
"",
62+
"// Usage:",
63+
"console.log(formatDate(new Date())); // Output: '2024-12-10'"
64+
],
5765
"tags": ["javascript", "date", "format"],
5866
"author": "technoph1le"
5967
}
@@ -76,7 +84,10 @@ Use this format:
7684
{
7785
"title": "Name of the snippet",
7886
"description": "A short explanation of what it does",
79-
"code": "your code goes here",
87+
"code": [
88+
"your code goes here",
89+
" this is a newline with a space"
90+
],
8091
"tags": ["tag1", "tag2", "tag3"],
8192
"author": "your_github_username"
8293
}

README.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,11 @@ If you’d like to add a snippet for an **existing language** and **category**,
2626
```json
2727
{
2828
"title": "Name of the snippet",
29-
"description": "A brief description of what it does",
30-
"code": "code goes here",
29+
"description": "A short explanation of what the snippet does",
30+
"code": [
31+
"your code goes here",
32+
" this is a newline with a space"
33+
],
3134
"tags": ["tag1", "tag2", "tag3"],
3235
"author": "your_github_username"
3336
}

public/data/css.json

Lines changed: 73 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
{
66
"title": "Responsive Font Sizing",
77
"description": "Adjusts font size based on viewport width.",
8-
"code": "h1 {\n font-size: calc(1.5rem + 2vw);\n}",
8+
"code": ["h1 {", " font-size: calc(1.5rem + 2vw);", "}"],
99
"tags": ["css", "font", "responsive", "typography"],
1010
"author": "dostonnabotov"
1111
},
1212
{
1313
"title": "Letter Spacing",
1414
"description": "Adds space between letters for better readability.",
15-
"code": "p {\n letter-spacing: 0.05em;\n}",
15+
"code": ["p {", " letter-spacing: 0.05em;", "}"],
1616
"tags": ["css", "typography", "spacing"],
1717
"author": "dostonnabotov"
1818
}
@@ -24,14 +24,34 @@
2424
{
2525
"title": "Sticky Footer",
2626
"description": "Ensures the footer always stays at the bottom of the page.",
27-
"code": "body {\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n}\n\nfooter {\n margin-top: auto;\n}",
27+
"code": [
28+
"body {",
29+
" display: flex;",
30+
" flex-direction: column;",
31+
" min-height: 100vh;",
32+
"}",
33+
"",
34+
"footer {",
35+
" margin-top: auto;",
36+
"}"
37+
],
2838
"tags": ["css", "layout", "footer", "sticky"],
2939
"author": "dostonnabotov"
3040
},
3141
{
3242
"title": "Equal-Width Columns",
3343
"description": "Creates columns with equal widths using flexbox.",
34-
"code": ".columns {\n display: flex;\n justify-content: space-between;\n}\n\n.column {\n flex: 1;\n margin: 0 10px;\n}",
44+
"code": [
45+
".columns {",
46+
" display: flex;",
47+
" justify-content: space-between;",
48+
"}",
49+
"",
50+
".column {",
51+
" flex: 1;",
52+
" margin: 0 10px;",
53+
"}"
54+
],
3555
"tags": ["css", "flexbox", "columns", "layout"],
3656
"author": "dostonnabotov"
3757
}
@@ -43,14 +63,43 @@
4363
{
4464
"title": "Button Hover Effect",
4565
"description": "Creates a hover effect with a color transition.",
46-
"code": ".button {\n background-color: #007bff;\n color: white;\n padding: 10px 20px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.button:hover {\n background-color: #0056b3;\n}",
66+
"code": [
67+
".button {",
68+
" background-color: #007bff;",
69+
" color: white;",
70+
" padding: 10px 20px;",
71+
" border: none;",
72+
" border-radius: 5px;",
73+
" cursor: pointer;",
74+
" transition: background-color 0.3s ease;",
75+
"}",
76+
"",
77+
".button:hover {",
78+
" background-color: #0056b3;",
79+
"}"
80+
],
4781
"tags": ["css", "button", "hover", "transition"],
4882
"author": "dostonnabotov"
4983
},
5084
{
5185
"title": "3D Button Effect",
5286
"description": "Adds a 3D effect to a button when clicked.",
53-
"code": ".button {\n background-color: #28a745;\n color: white;\n padding: 10px 20px;\n border: none;\n border-radius: 5px;\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n transition: transform 0.1s;\n}\n\n.button:active {\n transform: translateY(2px);\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);\n}",
87+
"code": [
88+
".button {",
89+
" background-color: #28a745;",
90+
" color: white;",
91+
" padding: 10px 20px;",
92+
" border: none;",
93+
" border-radius: 5px;",
94+
" box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);",
95+
" transition: transform 0.1s;",
96+
"}",
97+
"",
98+
".button:active {",
99+
" transform: translateY(2px);",
100+
" box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);",
101+
"}"
102+
],
54103
"tags": ["css", "button", "3D", "effect"],
55104
"author": "dostonnabotov"
56105
}
@@ -62,14 +111,30 @@
62111
{
63112
"title": "Blur Background",
64113
"description": "Applies a blur effect to the background of an element.",
65-
"code": ".blur-background {\n backdrop-filter: blur(10px);\n background: rgba(255, 255, 255, 0.5);\n}",
114+
"code": [
115+
".blur-background {",
116+
" backdrop-filter: blur(10px);",
117+
" background: rgba(255, 255, 255, 0.5);",
118+
"}"
119+
],
66120
"tags": ["css", "blur", "background", "effects"],
67121
"author": "dostonnabotov"
68122
},
69123
{
70124
"title": "Hover Glow Effect",
71125
"description": "Adds a glowing effect on hover.",
72-
"code": ".glow {\n background-color: #f39c12;\n padding: 10px 20px;\n border-radius: 5px;\n transition: box-shadow 0.3s ease;\n}\n\n.glow:hover {\n box-shadow: 0 0 15px rgba(243, 156, 18, 0.8);\n}",
126+
"code": [
127+
".glow {",
128+
" background-color: #f39c12;",
129+
" padding: 10px 20px;",
130+
" border-radius: 5px;",
131+
" transition: box-shadow 0.3s ease;",
132+
"}",
133+
"",
134+
".glow:hover {",
135+
" box-shadow: 0 0 15px rgba(243, 156, 18, 0.8);",
136+
"}"
137+
],
73138
"tags": ["css", "hover", "glow", "effects"],
74139
"author": "dostonnabotov"
75140
}

public/data/javascript.json

Lines changed: 97 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,26 @@
55
{
66
"title": "Remove Duplicates",
77
"description": "Removes duplicate values from an array.",
8-
"code": "const removeDuplicates = (arr) => [...new Set(arr)];\n\n// Usage:\nconst numbers = [1, 2, 2, 3, 4, 4, 5];\nconsole.log(removeDuplicates(numbers)); // Output: [1, 2, 3, 4, 5]",
8+
"code": [
9+
"const removeDuplicates = (arr) => [...new Set(arr)];",
10+
"",
11+
"// Usage:",
12+
"const numbers = [1, 2, 2, 3, 4, 4, 5];",
13+
"console.log(removeDuplicates(numbers)); // Output: [1, 2, 3, 4, 5]"
14+
],
915
"tags": ["javascript", "array", "deduplicate", "utility"],
1016
"author": "dostonnabotov"
1117
},
1218
{
1319
"title": "Flatten Array",
1420
"description": "Flattens a multi-dimensional array.",
15-
"code": "const flattenArray = (arr) => arr.flat(Infinity);\n\n// Usage:\nconst nestedArray = [1, [2, [3, [4]]]];\nconsole.log(flattenArray(nestedArray)); // Output: [1, 2, 3, 4]",
21+
"code": [
22+
"const flattenArray = (arr) => arr.flat(Infinity);",
23+
"",
24+
"// Usage:",
25+
"const nestedArray = [1, [2, [3, [4]]]];",
26+
"console.log(flattenArray(nestedArray)); // Output: [1, 2, 3, 4]"
27+
],
1628
"tags": ["javascript", "array", "flatten", "utility"],
1729
"author": "dostonnabotov"
1830
}
@@ -24,14 +36,24 @@
2436
{
2537
"title": "Capitalize String",
2638
"description": "Capitalizes the first letter of a string.",
27-
"code": "const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);\n\n// Usage:\nconsole.log(capitalize('hello')); // Output: 'Hello'",
39+
"code": [
40+
"const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);",
41+
"",
42+
"// Usage:",
43+
"console.log(capitalize('hello')); // Output: 'Hello'"
44+
],
2845
"tags": ["javascript", "string", "capitalize", "utility"],
2946
"author": "dostonnabotov"
3047
},
3148
{
3249
"title": "Reverse String",
3350
"description": "Reverses the characters in a string.",
34-
"code": "const reverseString = (str) => str.split('').reverse().join('');\n\n// Usage:\nconsole.log(reverseString('hello')); // Output: 'olleh'",
51+
"code": [
52+
"const reverseString = (str) => str.split('').reverse().join('');",
53+
"",
54+
"// Usage:",
55+
"console.log(reverseString('hello')); // Output: 'olleh'"
56+
],
3557
"tags": ["javascript", "string", "reverse", "utility"],
3658
"author": "dostonnabotov"
3759
}
@@ -43,14 +65,29 @@
4365
{
4466
"title": "Format Date",
4567
"description": "Formats a date in 'YYYY-MM-DD' format.",
46-
"code": "const formatDate = (date) => date.toISOString().split('T')[0];\n\n// Usage:\nconsole.log(formatDate(new Date())); // Output: '2024-12-10'",
68+
"code": [
69+
"const formatDate = (date) => date.toISOString().split('T')[0];",
70+
"",
71+
"// Usage:",
72+
"console.log(formatDate(new Date())); // Output: '2024-12-10'"
73+
],
4774
"tags": ["javascript", "date", "format", "utility"],
4875
"author": "dostonnabotov"
4976
},
5077
{
5178
"title": "Get Time Difference",
5279
"description": "Calculates the time difference in days between two dates.",
53-
"code": "const getTimeDifference = (date1, date2) => {\n const diff = Math.abs(date2 - date1);\n return Math.ceil(diff / (1000 * 60 * 60 * 24));\n};\n\n// Usage:\nconst date1 = new Date('2024-01-01');\nconst date2 = new Date('2024-12-31');\nconsole.log(getTimeDifference(date1, date2)); // Output: 365",
80+
"code": [
81+
"const getTimeDifference = (date1, date2) => {",
82+
" const diff = Math.abs(date2 - date1);",
83+
" return Math.ceil(diff / (1000 * 60 * 60 * 24));",
84+
"};",
85+
"",
86+
"// Usage:",
87+
"const date1 = new Date('2024-01-01');",
88+
"const date2 = new Date('2024-12-31');",
89+
"console.log(getTimeDifference(date1, date2)); // Output: 365"
90+
],
5491
"tags": ["javascript", "date", "time-difference", "utility"],
5592
"author": "dostonnabotov"
5693
}
@@ -62,14 +99,48 @@
6299
{
63100
"title": "Debounce Function",
64101
"description": "Delays a function execution until after a specified time.",
65-
"code": "const debounce = (func, delay) => {\n let timeout;\n return (...args) => {\n clearTimeout(timeout);\n timeout = setTimeout(() => func(...args), delay);\n };\n};\n\n// Usage:\nwindow.addEventListener('resize', debounce(() => console.log('Resized!'), 500));",
102+
"code": [
103+
"const debounce = (func, delay) => {",
104+
" let timeout;",
105+
" return (...args) => {",
106+
" clearTimeout(timeout);",
107+
" timeout = setTimeout(() => func(...args), delay);",
108+
" };",
109+
"};",
110+
"",
111+
"// Usage:",
112+
"window.addEventListener('resize', debounce(() => console.log('Resized!'), 500));"
113+
],
66114
"tags": ["javascript", "utility", "debounce", "performance"],
67115
"author": "dostonnabotov"
68116
},
69117
{
70118
"title": "Throttle Function",
71119
"description": "Limits a function execution to once every specified time interval.",
72-
"code": "const throttle = (func, limit) => {\n let lastFunc;\n let lastRan;\n return (...args) => {\n const context = this;\n if (!lastRan) {\n func.apply(context, args);\n lastRan = Date.now();\n } else {\n clearTimeout(lastFunc);\n lastFunc = setTimeout(() => {\n if (Date.now() - lastRan >= limit) {\n func.apply(context, args);\n lastRan = Date.now();\n }\n }, limit - (Date.now() - lastRan));\n }\n };\n};\n\n// Usage:\ndocument.addEventListener('scroll', throttle(() => console.log('Scrolled!'), 1000));",
120+
"code": [
121+
"const throttle = (func, limit) => {",
122+
" let lastFunc;",
123+
" let lastRan;",
124+
" return (...args) => {",
125+
" const context = this;",
126+
" if (!lastRan) {",
127+
" func.apply(context, args);",
128+
" lastRan = Date.now();",
129+
" } else {",
130+
" clearTimeout(lastFunc);",
131+
" lastFunc = setTimeout(() => {",
132+
" if (Date.now() - lastRan >= limit) {",
133+
" func.apply(context, args);",
134+
" lastRan = Date.now();",
135+
" }",
136+
" }, limit - (Date.now() - lastRan));",
137+
" }",
138+
" };",
139+
"};",
140+
"",
141+
"// Usage:",
142+
"document.addEventListener('scroll', throttle(() => console.log('Scrolled!'), 1000));"
143+
],
73144
"tags": ["javascript", "utility", "throttle", "performance"],
74145
"author": "dostonnabotov"
75146
}
@@ -81,14 +152,30 @@
81152
{
82153
"title": "Toggle Class",
83154
"description": "Toggles a class on an element.",
84-
"code": "const toggleClass = (element, className) => {\n element.classList.toggle(className);\n};\n\n// Usage:\nconst element = document.querySelector('.my-element');\ntoggleClass(element, 'active');",
155+
"code": [
156+
"const toggleClass = (element, className) => {",
157+
" element.classList.toggle(className);",
158+
"};",
159+
"",
160+
"// Usage:",
161+
"const element = document.querySelector('.my-element');",
162+
"toggleClass(element, 'active');"
163+
],
85164
"tags": ["javascript", "dom", "class", "utility"],
86165
"author": "dostonnabotov"
87166
},
88167
{
89168
"title": "Smooth Scroll to Element",
90169
"description": "Scrolls smoothly to a specified element.",
91-
"code": "const smoothScroll = (element) => {\n element.scrollIntoView({ behavior: 'smooth' });\n};\n\n// Usage:\nconst target = document.querySelector('#target');\nsmoothScroll(target);",
170+
"code": [
171+
"const smoothScroll = (element) => {",
172+
" element.scrollIntoView({ behavior: 'smooth' });",
173+
"};",
174+
"",
175+
"// Usage:",
176+
"const target = document.querySelector('#target');",
177+
"smoothScroll(target);"
178+
],
92179
"tags": ["javascript", "dom", "scroll", "ui"],
93180
"author": "dostonnabotov"
94181
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy