diff --git a/index.html b/index.html
index 82510817..83472184 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,24 @@
-
+
+
+
+
QuickSnip
diff --git a/public/data/index.json b/public/data/index.json
index 800501ca..b3a849ce 100644
--- a/public/data/index.json
+++ b/public/data/index.json
@@ -1,3 +1,3 @@
{
- "languages": ["JavaScript", "Python"]
+ "languages": ["JavaScript", "Sass"]
}
diff --git a/public/data/python.json b/public/data/python.json
deleted file mode 100644
index a0434458..00000000
--- a/public/data/python.json
+++ /dev/null
@@ -1,40 +0,0 @@
-[
- {
- "categoryName": "File Handling",
- "snippets": [
- {
- "title": "Read a File",
- "description": "Reads the entire content of a file.",
- "code": "with open('file.txt', 'r') as file:\n content = file.read()\n print(content)",
- "tags": ["file", "read", "python"],
- "author": "@technoph1le"
- },
- {
- "title": "Write to a File",
- "description": "Writes a string to a file.",
- "code": "with open('file.txt', 'w') as file:\n file.write('Hello, World!')",
- "tags": ["file", "write", "python"],
- "author": "@technoph1le"
- }
- ]
- },
- {
- "categoryName": "Data Structures",
- "snippets": [
- {
- "title": "Reverse a List",
- "description": "Reverses a list using slicing.",
- "code": "my_list = [1, 2, 3, 4, 5]\nreversed_list = my_list[::-1]\nprint(reversed_list)",
- "tags": ["list", "reverse", "python"],
- "author": "@technoph1le"
- },
- {
- "title": "Dictionary Comprehension",
- "description": "Creates a dictionary with squares of numbers.",
- "code": "squares = {x: x*x for x in range(6)}\nprint(squares)",
- "tags": ["dictionary", "comprehension", "python"],
- "author": "@technoph1le"
- }
- ]
- }
-]
diff --git a/public/data/sass.json b/public/data/sass.json
new file mode 100644
index 00000000..268e5403
--- /dev/null
+++ b/public/data/sass.json
@@ -0,0 +1,35 @@
+[
+ {
+ "categoryName": "Typography",
+ "snippets": [
+ {
+ "title": "Line Clamp Mixin",
+ "description": "A Sass mixin to clamp text to a specific number of lines.",
+ "code": "@mixin line-clamp($number) {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: $number;\n overflow: hidden;\n}",
+ "tags": ["sass", "mixin", "typography", "css"],
+ "author": "@technoph1le"
+ },
+ {
+ "title": "Text Overflow Ellipsis",
+ "description": "Ensures long text is truncated with an ellipsis.",
+ "code": "@mixin text-ellipsis {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}",
+ "tags": ["sass", "mixin", "text", "css"],
+ "author": "@technoph1le"
+ },
+ {
+ "title": "Font Import Helper",
+ "description": "Simplifies importing custom fonts in Sass.",
+ "code": "@mixin import-font($family, $weight: 400, $style: normal) {\n @font-face {\n font-family: #{$family};\n font-weight: #{$weight};\n font-style: #{$style};\n src: url('/fonts/#{$family}-#{$weight}.woff2') format('woff2'),\n url('/fonts/#{$family}-#{$weight}.woff') format('woff');\n }\n}",
+ "tags": ["sass", "mixin", "fonts", "css"],
+ "author": "@technoph1le"
+ },
+ {
+ "title": "Text Gradient",
+ "description": "Adds a gradient color effect to text.",
+ "code": "@mixin text-gradient($from, $to) {\n background: linear-gradient(to right, $from, $to);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}",
+ "tags": ["sass", "mixin", "gradient", "text", "css"],
+ "author": "@technoph1le"
+ }
+ ]
+ }
+]
diff --git a/public/favicon/android-chrome-192x192.png b/public/favicon/android-chrome-192x192.png
new file mode 100644
index 00000000..c47a68ea
Binary files /dev/null and b/public/favicon/android-chrome-192x192.png differ
diff --git a/public/favicon/android-chrome-512x512.png b/public/favicon/android-chrome-512x512.png
new file mode 100644
index 00000000..f0a822ee
Binary files /dev/null and b/public/favicon/android-chrome-512x512.png differ
diff --git a/public/favicon/apple-touch-icon.png b/public/favicon/apple-touch-icon.png
new file mode 100644
index 00000000..410c8e47
Binary files /dev/null and b/public/favicon/apple-touch-icon.png differ
diff --git a/public/favicon/favicon-16x16.png b/public/favicon/favicon-16x16.png
new file mode 100644
index 00000000..4790165c
Binary files /dev/null and b/public/favicon/favicon-16x16.png differ
diff --git a/public/favicon/favicon-32x32.png b/public/favicon/favicon-32x32.png
new file mode 100644
index 00000000..59e719dd
Binary files /dev/null and b/public/favicon/favicon-32x32.png differ
diff --git a/public/favicon/favicon.ico b/public/favicon/favicon.ico
new file mode 100644
index 00000000..39d901fb
Binary files /dev/null and b/public/favicon/favicon.ico differ
diff --git a/public/site.webmanifest b/public/site.webmanifest
new file mode 100644
index 00000000..710c1f35
--- /dev/null
+++ b/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+ "name": "QuickSnip",
+ "short_name": "QuickSnip",
+ "icons": [
+ {
+ "src": "/android-chrome-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "/android-chrome-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ],
+ "theme_color": "#ffffff",
+ "background_color": "#ffffff",
+ "display": "standalone"
+}
diff --git a/src/components/CodePreview.tsx b/src/components/CodePreview.tsx
index 26c5a59a..27318993 100644
--- a/src/components/CodePreview.tsx
+++ b/src/components/CodePreview.tsx
@@ -16,7 +16,7 @@ const CodePreview = ({ language, children }: CodePreviewProps) => {
language={language}
style={oneDark}
wrapLines={true}
- customStyle={{ background: "transparent" }}
+ customStyle={{ margin: "0" }}
>
{children}
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
index 15ed389a..70b6fb74 100644
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@@ -1,5 +1,5 @@
const DEFAULT_ICON_COLOR = "var(--clr-neutral-200)";
-const DEFAULT_GRADIENT_COLORS = ["var(--clr-accent)", "var(--clr-neutral-700)"];
+const ACCENT_ICON_COLOR = "var(--clr-accent)";
export const LogoIcon = () => (
);
-export const CopyIcon = ({
- gradient_1 = DEFAULT_GRADIENT_COLORS[0],
- gradient_2 = DEFAULT_GRADIENT_COLORS[1],
-}) => (
+export const CopyIcon = ({ fillColor = ACCENT_ICON_COLOR }) => (
);
diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx
index 3c093851..ea5d9b25 100644
--- a/src/components/SnippetModal.tsx
+++ b/src/components/SnippetModal.tsx
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
import { useNavigate, useParams } from "react-router-dom";
import { LanguageData, SnippetType } from "../types";
import { getSnippetByTitleAndCategory } from "../utils/filters";
-import { CloseIcon } from "./Icons";
+import { CloseIcon, CopyIcon } from "./Icons";
import Button from "./Button";
import CodePreview from "./CodePreview";
@@ -52,6 +52,9 @@ const SnippetModal = () => {
+
{snippet.code}
diff --git a/src/styles/main.css b/src/styles/main.css
index afa4defa..bca40c47 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -253,14 +253,6 @@ ol:where([role="list"]) {
}
}
-.code-preview {
- border: 1px solid var(--border-color);
- border-radius: var(--br-md);
- width: 100%;
- overflow-x: auto;
- height: 100%;
-}
-
/*------------------------------------*\
#HEADER
\*------------------------------------*/
@@ -371,7 +363,7 @@ ol:where([role="list"]) {
.snippet__preview {
width: 100%;
overflow: hidden;
- aspect-ratio: 16 / 9;
+ aspect-ratio: 10 / 3;
background-image: var(--gradient-secondary);
border: 1px solid var(--border-color);
border-radius: var(--br-md);
@@ -434,6 +426,23 @@ ol:where([role="list"]) {
gap: 1rem;
}
+.code-preview {
+ border: 1px solid var(--border-color);
+ border-radius: var(--br-md);
+ width: 100%;
+ overflow-x: auto;
+ height: 100%;
+ position: relative;
+}
+
+.modal__copy {
+ position: absolute;
+ top: 0.5em;
+ right: 1em;
+ z-index: 10;
+ isolation: isolate;
+}
+
.modal__tags {
display: flex;
gap: 1em;