Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Quick Visual Improvements #168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
psychlone77 merged 5 commits into quicksnip-dev:main from neoRandom:main
Jan 9, 2025
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions public/consolidated/cpp.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,23 @@
}
]
},
{
"categoryName": "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"
}
]
},
{
"categoryName": "Math And Numbers",
"snippets": [
Expand Down
18 changes: 6 additions & 12 deletions public/consolidated/javascript.json
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,8 @@
"description": "Converts RGB color values to hexadecimal color code.",
"author": "jjcantu",
"tags": [
"javascript",
"color",
"conversion",
"utility"
"conversion"
],
"contributors": [],
"code": "function rgbToHex(r, g, b) {\n const toHex = (n) => {\n const hex = n.toString(16);\n return hex.length === 1 ? '0' + hex : hex;\n };\n \n return '#' + toHex(r) + toHex(g) + toHex(b);\n}\n\n// Usage:\nconsole.log(rgbToHex(255, 128, 0)); // Output: \"#ff8000\"\nconsole.log(rgbToHex(0, 255, 0)); // Output: \"#00ff00\"\n"
Expand Down Expand Up @@ -407,10 +405,8 @@
"description": "Converts bytes into human-readable file size format.",
"author": "jjcantu",
"tags": [
"javascript",
"format",
"size",
"utility"
"size"
],
"contributors": [],
"code": "function formatFileSize(bytes) {\n if (bytes === 0) return '0 Bytes';\n \n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n \n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n}\n\n// Usage:\nconsole.log(formatFileSize(1234)); // Output: \"1.21 KB\"\nconsole.log(formatFileSize(1234567)); // Output: \"1.18 MB\"\n"
Expand Down Expand Up @@ -506,13 +502,11 @@
"description": "Creates a deep copy of an object or array without reference.",
"author": "jjcantu",
"tags": [
"javascript",
"object",
"clone",
"utility"
"clone"
],
"contributors": [],
"code": "function deepClone(obj) {\n if (obj === null || typeof obj !== 'object') return obj;\n \n const clone = Array.isArray(obj) ? [] : {};\n \n for (let key in obj) {\n if (Object.prototype.hasOwnProperty.call(obj, key)) {\n clone[key] = deepClone(obj[key]);\n }\n }\n \n return clone;\n}\n\n// Usage:\nconst original = { a: 1, b: { c: 2 }, d: [1, 2, 3] };\nconst cloned = deepClone(original);\nconsole.log(cloned); // Output: { a: 1, b: { c: 2 }, d: [1, 2, 3] }\n"
"code": "function deepClone(obj) {\n if (obj === null || typeof obj !== 'object') return obj;\n \n const clone = Array.isArray(obj) ? [] : {};\n \n for (let key in obj) {\n if (Object.prototype.hasOwnProperty.call(obj, key)) {\n clone[key] = deepClone(obj[key]);\n }\n }\n \n return clone;\n}\n\n// Usage:\nconst original = { a: 1, b: { c: 2 }, d: [1, 2, 3] };\nconst cloned = deepClone(original);\nconsole.log(cloned); // Output: 'original' but cloned\n"
},
{
"title": "Filter Object",
Expand Down Expand Up @@ -758,9 +752,9 @@
"description": "Generates a UUID (v4) string.",
"author": "jjcantu",
"tags": [
"javascript",
"uuid",
"utility"
"generate",
"string"
],
"contributors": [],
"code": "function generateUUID() {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n const r = Math.random() * 16 | 0;\n const v = c === 'x' ? r : (r & 0x3 | 0x8);\n return v.toString(16);\n });\n}\n\n// Usage:\nconsole.log(generateUUID()); // Output: \"a1b2c3d4-e5f6-4g7h-8i9j-k0l1m2n3o4p5\"\n"
Expand Down
2 changes: 1 addition & 1 deletion src/components/CodePreview.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
48 changes: 25 additions & 23 deletions src/components/SnippetModal.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,29 +58,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
Expand Down
28 changes: 19 additions & 9 deletions src/styles/main.css
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -599,20 +596,33 @@ body:has(.modal-overlay) {

.modal {
background-color: var(--clr-bg-secondary);
padding: 2rem;
width: 90%;
max-width: 800px;
width: fit-content;
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 {
Expand Down
Loading

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /