Repository: dostonnabotov/quicksnip Branch: main Commit: 40b4fc216b46 Files: 119 Total size: 152.8 KB Directory structure: gitextract_nak_pvkj/ ├── .gitignore ├── .source/ │ └── index.ts ├── CONTRIBUTING.md ├── README.md ├── components.json ├── content/ │ └── docs/ │ ├── comparison.mdx │ ├── contributing/ │ │ ├── adding-snippets.mdx │ │ ├── how-to-contribute.mdx │ │ ├── meta.json │ │ ├── modifying-snippets.mdx │ │ └── third-party-apps.mdx │ ├── extensions/ │ │ ├── meta.json │ │ ├── quicksnip-cli.mdx │ │ ├── quicksnip-raycast.mdx │ │ ├── quicksnip-vscode.mdx │ │ └── quicksnip.mdx │ ├── index.mdx │ ├── installation.mdx │ └── meta.json ├── eslint.config.mjs ├── mdx-components.tsx ├── next.config.ts ├── package.json ├── postcss.config.mjs ├── public/ │ └── data/ │ └── snippets/ │ ├── README.md │ ├── all.json │ ├── array-manipulation/ │ │ └── shuffle-array.json │ ├── data-handling/ │ │ └── add-localstorage.json │ ├── number-formatting/ │ │ └── number-to-currency.json │ └── string-manipulation/ │ ├── reverse-string.json │ ├── string-to-camel-case.json │ ├── string-to-param-case.json │ ├── string-to-pascal-case.json │ ├── string-to-snake-case.json │ ├── string-to-title-case.json │ └── truncate-sring.json ├── scripts/ │ └── merge-snippets.ts ├── snippets/ │ ├── README.md │ ├── array-manipulation/ │ │ ├── shuffle-array.json │ │ └── shuffle-array.md │ ├── data-handling/ │ │ ├── add-localstorage.json │ │ └── add-localstorage.md │ ├── number-formatting/ │ │ ├── number-to-currency.json │ │ └── number-to-currency.md │ └── string-manipulation/ │ ├── reverse-string.json │ ├── reverse-string.md │ ├── string-to-camel-case.json │ ├── string-to-camel-case.md │ ├── string-to-param-case.json │ ├── string-to-param-case.md │ ├── string-to-pascal-case.json │ ├── string-to-pascal-case.md │ ├── string-to-snake-case.json │ ├── string-to-snake-case.md │ ├── string-to-title-case.json │ ├── string-to-title-case.md │ ├── truncate-sring.json │ └── truncate-sring.md ├── source.config.ts ├── src/ │ ├── app/ │ │ ├── api/ │ │ │ └── search/ │ │ │ └── route.ts │ │ ├── community/ │ │ │ └── page.tsx │ │ ├── contributing/ │ │ │ └── page.tsx │ │ ├── extensions/ │ │ │ └── page.tsx │ │ ├── globals.css │ │ ├── guide/ │ │ │ ├── [[...slug]]/ │ │ │ │ └── page.tsx │ │ │ └── layout.tsx │ │ ├── layout.config.tsx │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── snippets/ │ │ ├── [category]/ │ │ │ ├── [snippet]/ │ │ │ │ └── page.tsx │ │ │ └── page.tsx │ │ ├── layout.tsx │ │ └── page.tsx │ ├── components/ │ │ ├── layouts/ │ │ │ ├── available-for.tsx │ │ │ ├── code-preview.tsx │ │ │ ├── features.tsx │ │ │ ├── footer.tsx │ │ │ ├── header.tsx │ │ │ ├── hero.tsx │ │ │ ├── snippet-header.tsx │ │ │ ├── snippet-list.tsx │ │ │ ├── snippet-sidebar.tsx │ │ │ └── sponsor.tsx │ │ └── ui/ │ │ ├── accordion.tsx │ │ ├── aspect-ratio.tsx │ │ ├── avatar.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── dark-mode-switch.tsx │ │ ├── extension-item.tsx │ │ ├── input-group.tsx │ │ ├── input.tsx │ │ ├── label.tsx │ │ ├── language-icons.tsx │ │ ├── logo.tsx │ │ ├── navigation-menu.tsx │ │ ├── select.tsx │ │ ├── separator.tsx │ │ ├── sheet.tsx │ │ ├── sidebar.tsx │ │ ├── skeleton.tsx │ │ ├── snippet-detail.tsx │ │ ├── snippet-item.tsx │ │ ├── snippet-search.tsx │ │ ├── switch.tsx │ │ ├── tabs.tsx │ │ ├── textarea.tsx │ │ └── tooltip.tsx │ ├── data/ │ │ ├── extensions.ts │ │ ├── meta.ts │ │ └── yt-videos.ts │ ├── hooks/ │ │ ├── use-fetch.ts │ │ └── use-mobile.ts │ ├── lib/ │ │ ├── source.ts │ │ └── utils.ts │ ├── store/ │ │ └── useSnippetsStore.ts │ └── types/ │ └── index.ts ├── tailwind.config.mjs └── tsconfig.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.* .yarn/* !.yarn/patches !.yarn/plugins !.yarn/releases !.yarn/versions # testing /coverage # next.js /.next/ /out/ # production /build # misc .DS_Store *.pem # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files (can opt-in for committing if needed) .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts _pagefind/ ================================================ FILE: .source/index.ts ================================================ // @ts-nocheck -- skip type checking import * as docs_10 from "../content/docs/extensions/quicksnip.mdx?collection=docs&hash=1765841507830" import * as docs_9 from "../content/docs/extensions/quicksnip-vscode.mdx?collection=docs&hash=1765841507830" import * as docs_8 from "../content/docs/extensions/quicksnip-raycast.mdx?collection=docs&hash=1765841507830" import * as docs_7 from "../content/docs/extensions/quicksnip-cli.mdx?collection=docs&hash=1765841507830" import * as docs_6 from "../content/docs/contributing/third-party-apps.mdx?collection=docs&hash=1765841507830" import * as docs_5 from "../content/docs/contributing/modifying-snippets.mdx?collection=docs&hash=1765841507830" import * as docs_4 from "../content/docs/contributing/how-to-contribute.mdx?collection=docs&hash=1765841507830" import * as docs_3 from "../content/docs/contributing/adding-snippets.mdx?collection=docs&hash=1765841507830" import * as docs_2 from "../content/docs/installation.mdx?collection=docs&hash=1765841507830" import * as docs_1 from "../content/docs/index.mdx?collection=docs&hash=1765841507830" import * as docs_0 from "../content/docs/comparison.mdx?collection=docs&hash=1765841507830" import { _runtime } from "fumadocs-mdx/runtime/next" import * as _source from "../source.config" export const docs = _runtime.docs([{ info: {"path":"comparison.mdx","fullPath":"content/docs/comparison.mdx"}, data: docs_0 }, { info: {"path":"index.mdx","fullPath":"content/docs/index.mdx"}, data: docs_1 }, { info: {"path":"installation.mdx","fullPath":"content/docs/installation.mdx"}, data: docs_2 }, { info: {"path":"contributing/adding-snippets.mdx","fullPath":"content/docs/contributing/adding-snippets.mdx"}, data: docs_3 }, { info: {"path":"contributing/how-to-contribute.mdx","fullPath":"content/docs/contributing/how-to-contribute.mdx"}, data: docs_4 }, { info: {"path":"contributing/modifying-snippets.mdx","fullPath":"content/docs/contributing/modifying-snippets.mdx"}, data: docs_5 }, { info: {"path":"contributing/third-party-apps.mdx","fullPath":"content/docs/contributing/third-party-apps.mdx"}, data: docs_6 }, { info: {"path":"extensions/quicksnip-cli.mdx","fullPath":"content/docs/extensions/quicksnip-cli.mdx"}, data: docs_7 }, { info: {"path":"extensions/quicksnip-raycast.mdx","fullPath":"content/docs/extensions/quicksnip-raycast.mdx"}, data: docs_8 }, { info: {"path":"extensions/quicksnip-vscode.mdx","fullPath":"content/docs/extensions/quicksnip-vscode.mdx"}, data: docs_9 }, { info: {"path":"extensions/quicksnip.mdx","fullPath":"content/docs/extensions/quicksnip.mdx"}, data: docs_10 }], [{"info":{"path":"meta.json","fullPath":"content/docs/meta.json"},"data":{"title":"Docs","pages":["---Introduction---","index.mdx","installation.mdx","comparison.mdx","---Extensions---","...extensions","---Contributing---","...contributing"],"root":true}}, {"info":{"path":"contributing/meta.json","fullPath":"content/docs/contributing/meta.json"},"data":{"title":"Contributing","pages":["how-to-contribute","adding-snippets","modifying-snippets","third-party-apps"]}}, {"info":{"path":"extensions/meta.json","fullPath":"content/docs/extensions/meta.json"},"data":{"title":"Extensions","pages":["quicksnip","quicksnip-cli","quicksnip-vscode","quicksnip-raycast"]}}]) ================================================ FILE: CONTRIBUTING.md ================================================ # Contributing to QuickSnip > THIS FILE NEEDS TO BE REWORKED. IT'S IMPORTED FROM PREVIOUS VERSION FOR TESTING. Hey there! 👋 First off, thanks for taking the time to contribute! ❤️ You can contribute in two main ways: - **Improving the code** (like fixing bugs or adding cool new features) - **Adding new code snippets** (or improving the existing ones!) --- ## Improving the code ### How to report bugs If you spot a bug in the codebase or issues with the documentation, please open up a [GitHub issue](https://github.com/technoph1le/quicksnip/issues) detailing the problem before creating a PR. Once confirmed with maintainers, you can then create a PR. ### How to propose new features If you are interested in proposing new features, please open up a new [GitHub discussion](https://github.com/technoph1le/quicksnip/discussions) with details for the proposed feature. Please do not create a PR for a new feature without first discussing it with the maintainers. If you create a PR for a new feature without discussing it first, then your PR will be closed. --- ## Snippets Guidelines ### Snippet Tags - Tags must describe the snippet with simple word. Here's an example: ```md --- title: Convert Number to Currency description: Converts a number to a currency format with a specific locale. author: axorax tags: number,currency --- ``` **Do not use generic keywords or the language itself as a tag `utility` or `javascript`!** ### Snippet Format **All** snippets should follow the following structure: - A `code` segment, containing a function with the actual snippet functionnality - An `example` segement, containing one or more examples of use Example in javascript: ```js function example(x) { return x * 2; } // Usage: example(5); // Returns: 10 ``` If your function doesn't return anything just show how to use it. If the result of your function is too complicated to be expressed in a single comment, your snippet is probably too complex to begin with. ### Snippet boundaries To ensure your snippet isn’t refused, consider these questions: - **Does the standard library of my language provide an easy way of doing this ?** - **Does that snippet not have a real, and practical use case ?** - **Could it be split into separate parts to be better understood ?** If any answer is yes, then your snippet will most likely get rejected. --- ## Adding Snippets ### Adding a New Snippet 1. **Ensure your snippet match [guidelines](#snippets-guidelines)** 2. **Navigate to the relevant folder:** - Go to the `/snippets` folder in the root directory. - Locate the folder for the programming language of your snippet, such as `javascript` or `python`. 3. **Choose the correct category:** - Within the language folder, find the relevant category folder for your snippet. - If no suitable category exists, refer to [Adding a New Category](#adding-a-new-category). 4. **Create a markdown file:** - Create a new file with a `.md` extension. - Name the file appropriately, keeping it descriptive and concise. 5. **Add your snippet:** - Use the following format to structure your snippet: ````md --- title: Name of the snippet description: A short explanation of what the snippet does tags: tag1, tag2, tag3 author: your-github-username --- ```lang // Your code here ``` ```` Here’s an example for JavaScript: ````md --- title: Format Date description: Formats a date in 'YYYY-MM-DD' format. author: technoph1le tags: date,format --- ```js const formatDate = (date) => date.toISOString().split("T")[0]; // Usage: console.log(formatDate(new Date())); // Output: '2024-12-10' ``` ```` 6. **Use syntax highlighting:** - Enclose your code with triple backticks (```). - Specify the language after the first set of backticks for syntax highlighting. 7. **Test your snippet:** - Ensure your code runs as expected. \ To test that your snippets are formatted correctly use the `snippets:check` script: ``` $ npm run snippets:check ``` It will return nothing if they are well formatted, otherwise it will tell you what the error is. *** To preview the snippets, start the vite server using: ``` $ npm run dev ``` It will use HMR to update the snippets in the `/public` folder, making them available to the frontend. Expected file structure: ```md /snippets |- language |- category-name |- your-snippet-here.md ``` > Please do **NOT** add or edit anything in `/public` folder. It will be used for consolidating snippets. ### Editing a Existing Snippet If you’d like to refine or improve an existing snippet: 1. **Add a `contributors` field:** - Include your GitHub username under the `contributors` field in the metadata section. ````md --- title: Name of the snippet description: A short explanation of what the snippet does tags: tag1, tag2, tag3 author: original-author contributors: your-github-username --- ``` Updated code here ``` ```` 2. **Credit all contributors:** - If contributors already exist, add your username separated by a comma ```md contributors: contributor1, contributor2, your-github-username ``` 3. **Document changes:** - Clearly indicate what you updated and why in your pull request description. > We want to make sure that original author and contributor(s) are credited for their work. ### Adding a New Category If your snippet doesn’t fit into any existing category, you can create a new one! Just make sure it’s unique and doesn’t overlap with others (e.g., don’t create separate categories for “Date” and “Time” when “Date and Time” works). 1. **Create a new category folder:** - In the relevant language directory, add a new folder. - Use a lowercase name with hyphens for separation (e.g., `file-handling`). 2. **Add snippets:** - Follow the [Adding a New Snippet](#adding-a-new-snippet) instructions. Example structure: ```md /snippets |- python |- file-handling |- list-manipulation |- .... ``` ### Adding a New Language If you want to introduce a new programming language, here's how to do it: 1. **Create a language folder:** - Add a new folder under the `snippets` directory. - Name it after the language in lowercase (e.g., `go`, `ruby`). 2. **Add categories and snippets:** - Follow the [Adding a New Snippet](#adding-a-new-snippet) and [Adding a New Category](#adding-a-new-category) guidelines. 3. **Include an icon:** - Add an `icon.svg` file (50x50px) in the same language folder. - Use tools like [Resize SVG](https://www.iloveimg.com/resize-image/resize-svg) to ensure the correct size. 4. **Double-check your work:** - Verify that everything is structured correctly and displays as intended. --- ## Testing Snippets To test that your snippets are formatted correctly use the following script: ``` $ npm run snippets:check ``` It will return nothing if they are well formatted, otherwise it will tell you what the error is. --- To preview the snippets, you need to consolidate them, use the following script: ``` $ npm run snippets:consolidate ``` It will update the snippets in the `/public` folder, making them available to the frontend. ## Final Notes Whether you’re fixing a tiny typo, writing a new snippet, or dreaming up big features, every bit counts! 🛠️ If you have any questions or need help, feel free to open a new [GitHub discussion](https://github.com/technoph1le/quicksnip/discussions). Happy coding! 💻✨ ================================================ FILE: README.md ================================================ # QuickSnip QuickSnip is an open-source tool designed for developers who want to organize, search, and share code snippets across various programming languages. It provides a centralized platform for managing handy snippets. Built with love and powered by an awesome community. 🚀
Watch on YouTube

![Website preview](/preview.png) ## How to Contribute Want to help make QuickSnip even better? You can contribute by: - **Improving the Code**: Fix bugs, suggest new features, or optimize the project. - **Adding New Snippets**: Share your favorite snippets to grow the database. Check out the [CONTRIBUTING.md](/CONTRIBUTING.md) file for detailed contribution guidelines. ## General Rules To keep everything smooth and consistent, please: - [x] Follow the project’s style and contribution rules. - [x] Be kind and respectful to others. - [x] If you’re unsure, ask questions. Following these rules helps us build an awesome community. 🚀 ## Third-Party We love to see the creativity of our community! If you build something using QuickSnip, let us know. Here are some featured examples: - ⚡️ [**Raycast Extension**](https://www.raycast.com/anders_morille/quicksnip): An extension to browse and use QuickSnip snippets directly from Raycast. (Thanks to the creator: [@lille-morille](https://github.com/lille-morille)) If you’d like to create your own extension or tool: - [x] Please ensure it adheres to our project’s licensing and attribution requirements. - [x] Please link to the [original QuickSnip repository](https://github.com/technoph1le/quicksnip) in your extension/tool to attribute the source. - [x] Share your work with us — we’d be thrilled to feature it! ## Project Vision For a detailed look into our goals, future direction, and aspirations, see the [VISION.md](/VISION.md) file. ## License QuickSnip is licensed under the [MIT License](/LICENSE). Feel free to use and share it as you like. Leave a Review ================================================ FILE: components.json ================================================ { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "src/app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } ================================================ FILE: content/docs/comparison.mdx ================================================ --- title: Comparison description: Hello World --- ## This is title This is description ================================================ FILE: content/docs/contributing/adding-snippets.mdx ================================================ --- title: Adding snippets description: Hello World --- ## This is title This is description ================================================ FILE: content/docs/contributing/how-to-contribute.mdx ================================================ --- title: How to contribute description: Hello World --- ## This is title This is description ================================================ FILE: content/docs/contributing/meta.json ================================================ { "title": "Contributing", "pages": [ "how-to-contribute", "adding-snippets", "modifying-snippets", "third-party-apps" ] } ================================================ FILE: content/docs/contributing/modifying-snippets.mdx ================================================ --- title: Modifying snippets description: Hello World --- ## This is title This is description ================================================ FILE: content/docs/contributing/third-party-apps.mdx ================================================ --- title: Third-party apps description: Hello World --- ## How to add an extension This is description ================================================ FILE: content/docs/extensions/meta.json ================================================ { "title": "Extensions", "pages": [ "quicksnip", "quicksnip-cli", "quicksnip-vscode", "quicksnip-raycast" ] } ================================================ FILE: content/docs/extensions/quicksnip-cli.mdx ================================================ --- title: QuickSnip CLI description: Hello World --- ## This is title This is description ================================================ FILE: content/docs/extensions/quicksnip-raycast.mdx ================================================ --- title: QuickSnip Raycast description: Hello World --- ## This is title This is description ================================================ FILE: content/docs/extensions/quicksnip-vscode.mdx ================================================ --- title: QuickSnip VS Code description: Hello World --- ## This is title This is description ================================================ FILE: content/docs/extensions/quicksnip.mdx ================================================ --- title: QuickSnip description: Hello World --- ## This is title This is description ================================================ FILE: content/docs/index.mdx ================================================ --- title: Get Started description: Hello World --- ## This is title This is description ================================================ FILE: content/docs/installation.mdx ================================================ --- title: Installation description: Hello World --- ## This is title This is description ================================================ FILE: content/docs/meta.json ================================================ { "title": "Docs", "root": true, "pages": [ "---Introduction---", "index.mdx", "installation.mdx", "comparison.mdx", "---Extensions---", "...extensions", "---Contributing---", "...contributing" ] } ================================================ FILE: eslint.config.mjs ================================================ import { dirname } from "path"; import { fileURLToPath } from "url"; import { FlatCompat } from "@eslint/eslintrc"; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); const compat = new FlatCompat({ baseDirectory: __dirname, }); const eslintConfig = [ ...compat.extends("next/core-web-vitals", "next/typescript"), ]; export default eslintConfig; ================================================ FILE: mdx-components.tsx ================================================ import defaultMdxComponents from "fumadocs-ui/mdx"; import type { MDXComponents } from "mdx/types"; export function getMDXComponents(components?: MDXComponents): MDXComponents { return { ...defaultMdxComponents, ...components, }; } ================================================ FILE: next.config.ts ================================================ import { createMDX } from "fumadocs-mdx/next"; const withMDX = createMDX(); /** @type {import('next').NextConfig} */ const config = { reactStrictMode: true, images: { remotePatterns: [ new URL("https://img.youtube.com/vi/**"), new URL("https://storage.ko-fi.com/cdn/**"), ], }, }; export default withMDX(config); ================================================ FILE: package.json ================================================ { "name": "quicksnip", "version": "2.0.0", "private": true, "scripts": { "dev": "next dev", "prebuild": "tsx scripts/merge-snippets.ts", "build": "next build", "start": "next start", "lint": "next lint", "postinstall": "fumadocs-mdx" }, "dependencies": { "@radix-ui/react-accordion": "^1.2.11", "@radix-ui/react-aspect-ratio": "^1.1.7", "@radix-ui/react-avatar": "^1.1.10", "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-label": "^2.1.7", "@radix-ui/react-navigation-menu": "^1.2.13", "@radix-ui/react-select": "^2.2.6", "@radix-ui/react-separator": "^1.1.7", "@radix-ui/react-slot": "^1.2.3", "@radix-ui/react-switch": "^1.2.5", "@radix-ui/react-tabs": "^1.1.13", "@radix-ui/react-tooltip": "^1.2.8", "@types/mdx": "^2.0.13", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "framer-motion": "^12.23.12", "fumadocs-core": "^15.6.9", "fumadocs-mdx": "^12.0.3", "fumadocs-ui": "^15.6.9", "lucide-react": "^0.535.0", "next": "15.4.10", "radix-ui": "^1.4.3", "react": "^19.1.0", "react-dom": "^19.1.0", "react-icons": "^5.5.0", "react-markdown": "^10.1.0", "react-syntax-highlighter": "^15.6.6", "remark-gfm": "^4.0.1", "tailwind-merge": "^3.3.1", "zustand": "^5.0.8" }, "devDependencies": { "@eslint/eslintrc": "^3", "@tailwindcss/postcss": "^4", "@tailwindcss/typography": "^0.5.16", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "@types/react-syntax-highlighter": "^15.5.13", "eslint": "^9", "eslint-config-next": "15.4.5", "pagefind": "^1.3.0", "tailwindcss": "^4", "tsx": "^4.20.5", "tw-animate-css": "^1.3.6", "typescript": "^5" } } ================================================ FILE: postcss.config.mjs ================================================ const config = { plugins: ["@tailwindcss/postcss"], }; export default config; ================================================ FILE: public/data/snippets/README.md ================================================ # IMPORTANT ### This folder is read-only. Do NOT modify this folder! ================================================ FILE: public/data/snippets/all.json ================================================ [ { "id": "shuffle-array", "category": "array-manipulation", "title": "Shuffle Array", "description": "Shuffles the items in an array.", "languages": [ "js" ], "contributors": [ "loxt-nixo" ], "tags": [ "array", "shuffle", "random" ] }, { "id": "add-localstorage", "category": "data-handling", "title": "Add Item to localStorage", "description": "Stores a value in localStorage under the given key.", "languages": [ "js" ], "contributors": [ "technoph1le" ], "tags": [ "localStorage", "storage", "memory" ] }, { "id": "number-to-currency", "category": "number-formatting", "title": "Convert Number to Currency", "description": "Converts a number to a currency format with a specific locale.", "languages": [ "js" ], "contributors": [ "axorax" ], "tags": [ "number", "currency" ] }, { "id": "reverse-string", "category": "string-manipulation", "title": "Reverse String", "description": "Reverses the characters in a string.", "languages": [ "js", "cpp", "py" ], "contributors": [ "technoph1le", "Vaibhav-kesarwani" ], "tags": [ "string", "reverse" ] }, { "id": "string-to-camel-case", "category": "string-manipulation", "title": "Convert String to Camel Case", "description": "Converts a given string into camelCase.", "languages": [ "js", "java" ], "contributors": [ "aumirza", "Mcbencrafter" ], "tags": [ "string", "case" ] }, { "id": "string-to-param-case", "category": "string-manipulation", "title": "Convert String to Param Case", "description": "Converts a given string into param-case.", "languages": [ "js", "java" ], "contributors": [ "aumirza", "Mcbencrafter" ], "tags": [ "string", "case" ] }, { "id": "string-to-pascal-case", "category": "string-manipulation", "title": "Convert String to Pascal Case", "description": "Converts a given string into PascalCase.", "languages": [ "js", "java" ], "contributors": [ "aumirza", "Mcbencrafter" ], "tags": [ "string", "case" ] }, { "id": "string-to-snake-case", "category": "string-manipulation", "title": "Convert String to Snake Case", "description": "Converts a given string into snake_case.", "languages": [ "js", "java" ], "contributors": [ "axorax", "Mcbencrafter" ], "tags": [ "string", "case" ] }, { "id": "string-to-title-case", "category": "string-manipulation", "title": "Convert String to Title Case", "description": "Converts a given string into Title Case.", "languages": [ "js" ], "contributors": [ "aumirza" ], "tags": [ "string", "case" ] }, { "id": "truncate-sring", "category": "string-manipulation", "title": "Truncate String", "description": "Truncates a string after a specified length.", "languages": [ "js", "java", "py" ], "contributors": [ "realvishalrana", "Mcbencrafter", "axorax", "MinerMinerMods" ], "tags": [ "string", "truncate", "mask", "hide" ] } ] ================================================ FILE: public/data/snippets/array-manipulation/shuffle-array.json ================================================ { "id": "shuffle-array", "category": "array-manipulation", "title": "Shuffle Array", "description": "Shuffles the items in an array.", "languages": [ "js" ], "contributors": [ "loxt-nixo" ], "tags": [ "array", "shuffle", "random" ], "snippets": { "js": "function shuffleArray(array) {\r\n for (let i = array.length - 1; i >= 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [array[i], array[j]] = [array[j], array[i]];\r\n }\r\n}\r\n\r\n// Usage:\r\nconst array = [1, 2, 3, 4, 5];\r\nshuffleArray(array); // Shuffles `array` in place" } } ================================================ FILE: public/data/snippets/data-handling/add-localstorage.json ================================================ { "id": "add-localstorage", "category": "data-handling", "title": "Add Item to localStorage", "description": "Stores a value in localStorage under the given key.", "languages": [ "js" ], "contributors": [ "technoph1le" ], "tags": [ "localStorage", "storage", "memory" ], "snippets": { "js": "const addToLocalStorage = (key, value) => {\r\n localStorage.setItem(key, JSON.stringify(value));\r\n};\r\n\r\n// Usage:\r\naddToLocalStorage('user', { name: 'John', age: 30 });" } } ================================================ FILE: public/data/snippets/number-formatting/number-to-currency.json ================================================ { "id": "number-to-currency", "category": "number-formatting", "title": "Convert Number to Currency", "description": "Converts a number to a currency format with a specific locale.", "languages": [ "js" ], "contributors": [ "axorax" ], "tags": [ "number", "currency" ], "snippets": { "js": "const convertToCurrency = (num, locale = 'en-US', currency = 'USD') => {\r\n return new Intl.NumberFormat(locale, {\r\n style: 'currency',\r\n currency: currency\r\n }).format(num);\r\n};\r\n\r\n// Usage:\r\nconvertToCurrency(1234567.89); // Returns: '$1,234,567.89'\r\nconvertToCurrency(987654.32, 'de-DE', 'EUR'); // Returns: '987.654,32 €'" } } ================================================ FILE: public/data/snippets/string-manipulation/reverse-string.json ================================================ { "id": "reverse-string", "category": "string-manipulation", "title": "Reverse String", "description": "Reverses the characters in a string.", "languages": [ "js", "cpp", "py" ], "contributors": [ "technoph1le", "Vaibhav-kesarwani" ], "tags": [ "string", "reverse" ], "snippets": { "js": "const reverseString = (str) => str.split('').reverse().join('');\r\n\r\n// Usage:\r\nreverseString('hello'); // Returns: 'olleh'", "cpp": "#include \r\n#include \r\n\r\nstd::string reverseString(const std::string& input) {\r\n std::string reversed = input;\r\n std::reverse(reversed.begin(), reversed.end());\r\n return reversed;\r\n}\r\n\r\n// Usage:\r\nreverseString(\"quicksnip\"); // Returns: \"pinskciuq\"", "py": "def reverse_string(s:str) -> str:\r\n return s[::-1]\r\n\r\n# Usage:\r\nreverse_string('hello') # Returns: 'olleh'" } } ================================================ FILE: public/data/snippets/string-manipulation/string-to-camel-case.json ================================================ { "id": "string-to-camel-case", "category": "string-manipulation", "title": "Convert String to Camel Case", "description": "Converts a given string into camelCase.", "languages": [ "js", "java" ], "contributors": [ "aumirza", "Mcbencrafter" ], "tags": [ "string", "case" ], "snippets": { "js": "function toCamelCase(str) {\r\n return str.replace(/\\W+(.)/g, (match, chr) => chr.toUpperCase());\r\n}\r\n\r\n// Usage:\r\ntoCamelCase('hello world test'); // Returns: 'helloWorldTest'", "java": "public static String stringToCamelCase(String text) {\r\n String[] words = text.split(\"\\\\s+\");\r\n StringBuilder camelCase = new StringBuilder(\r\n words[0].substring(0, 1).toLowerCase() + words[0].substring(1)\r\n );\r\n\r\n for (int i = 1; i < words.length; i++) {\r\n camelCase.append(words[i].substring(0, 1).toUpperCase());\r\n camelCase.append(words[i].substring(1));\r\n }\r\n\r\n return camelCase.toString();\r\n}\r\n\r\n// Usage:\r\nSystem.out.println(stringToCamelCase(\"Hello world test\")); // \"helloWorldTest\"" } } ================================================ FILE: public/data/snippets/string-manipulation/string-to-param-case.json ================================================ { "id": "string-to-param-case", "category": "string-manipulation", "title": "Convert String to Param Case", "description": "Converts a given string into param-case.", "languages": [ "js", "java" ], "contributors": [ "aumirza", "Mcbencrafter" ], "tags": [ "string", "case" ], "snippets": { "js": "function toParamCase(str) {\r\n return str.toLowerCase().replace(/\\s+/g, '-');\r\n}\r\n\r\n// Usage:\r\ntoParamCase('Hello World Test'); // Returns: 'hello-world-test'", "java": "public static String stringToParamCase(String text) {\r\n return text.toLowerCase().replaceAll(\"\\\\s+\", \"-\");\r\n}\r\n\r\n// Usage:\r\nSystem.out.println(stringToParamCase(\"Hello World 123\")); // \"hello-world-123\"" } } ================================================ FILE: public/data/snippets/string-manipulation/string-to-pascal-case.json ================================================ { "id": "string-to-pascal-case", "category": "string-manipulation", "title": "Convert String to Pascal Case", "description": "Converts a given string into PascalCase.", "languages": [ "js", "java" ], "contributors": [ "aumirza", "Mcbencrafter" ], "tags": [ "string", "case" ], "snippets": { "js": "function toPascalCase(str) {\r\n return str.replace(/\\b\\w/g, (s) => s.toUpperCase()).replace(/\\W+(.)/g, (match, chr) => chr.toUpperCase());\r\n}\r\n\r\n// Usage:\r\ntoPascalCase('hello world test'); // Returns: 'HelloWorldTest'", "java": "public static String stringToPascalCase(String text) {\r\n String[] words = text.split(\"\\\\s+\");\r\n StringBuilder pascalCase = new StringBuilder();\r\n\r\n for (String word : words) {\r\n pascalCase.append(word.substring(0, 1).toUpperCase());\r\n pascalCase.append(word.substring(1).toLowerCase());\r\n }\r\n\r\n return pascalCase.toString();\r\n}\r\n\r\n// Usage:\r\nSystem.out.println(stringToPascalCase(\"hello world\")); // \"HelloWorld\"" } } ================================================ FILE: public/data/snippets/string-manipulation/string-to-snake-case.json ================================================ { "id": "string-to-snake-case", "category": "string-manipulation", "title": "Convert String to Snake Case", "description": "Converts a given string into snake_case.", "languages": [ "js", "java" ], "contributors": [ "axorax", "Mcbencrafter" ], "tags": [ "string", "case" ], "snippets": { "js": "function toSnakeCase(str) {\r\n return str.replace(/([a-z])([A-Z])/g, '$1_$2')\r\n .replace(/\\s+/g, '_')\r\n .toLowerCase();\r\n}\r\n\r\n// Usage:\r\ntoSnakeCase('Hello World Test'); // Returns: 'hello_world_test'", "java": "public static String stringToSnakeCase(String text) {\r\n return text.toLowerCase().replaceAll(\"\\\\s+\", \"_\");\r\n}\r\n\r\n// Usage:\r\nSystem.out.println(stringToSnakeCase(\"Hello World 123\")); // \"hello_world_123\"" } } ================================================ FILE: public/data/snippets/string-manipulation/string-to-title-case.json ================================================ { "id": "string-to-title-case", "category": "string-manipulation", "title": "Convert String to Title Case", "description": "Converts a given string into Title Case.", "languages": [ "js" ], "contributors": [ "aumirza" ], "tags": [ "string", "case" ], "snippets": { "js": "function toTitleCase(str) {\r\n return str.toLowerCase().replace(/\\b\\w/g, (s) => s.toUpperCase());\r\n}\r\n\r\n// Usage:\r\ntoTitleCase('hello world test'); // Returns: 'Hello World Test'" } } ================================================ FILE: public/data/snippets/string-manipulation/truncate-sring.json ================================================ { "id": "truncate-sring", "category": "string-manipulation", "title": "Truncate String", "description": "Truncates a string after a specified length.", "languages": [ "js", "java", "py" ], "contributors": [ "realvishalrana", "Mcbencrafter", "axorax", "MinerMinerMods" ], "tags": [ "string", "truncate", "mask", "hide" ], "snippets": { "js": "const truncateText = (text = '', maxLength = 50) => {\r\n return `${text.slice(0, maxLength)}${text.length >= maxLength ? '...' : ''}`;\r\n};\r\n\r\n// Usage:\r\nconst title = \"Hello, World! This is a Test.\";\r\ntruncateText(title, 10); // Returns: 'Hello, Wor...'", "java": "public static String truncate(String text, int length, String suffix) {\r\n if (text.length() <= length)\r\n return text;\r\n \r\n return text.substring(0, length).trim() + (suffix != null ? suffix : \"\");\r\n}\r\n\r\n// Usage:\r\nSystem.out.println(truncate(\"hello world\", 5, \"...\")); // \"hello...\"", "py": "def truncate(s:str, length:int, suffix:bool = True) -> str :\r\n return (s[:length] + (\"...\" if suffix else \"\")) if len(s) > length else s\r\n\r\n# Usage:\r\ntruncate('This is a long string', 10) # Returns: 'This is a ...'\r\ntruncate('This is a long string', 10, False) # Returns: 'This is a '" } } ================================================ FILE: scripts/merge-snippets.ts ================================================ import fs from "fs"; import path from "path"; const SNIPPETS_DIR = path.join(process.cwd(), "snippets"); const OUTPUT_DIR = path.join(process.cwd(), "public", "data", "snippets"); /** * Extracts the code from markdown into a `{ language: code }` object. */ function parseMarkdown(mdContent: string) { const regex = /```([a-zA-Z0-9+#-]*)\s*([\s\S]*?)```/g; const snippets: { [lang: string]: string } = {}; let match; while ((match = regex.exec(mdContent)) !== null) { const lang = match[1]; const code = match[2].trim(); snippets[lang] = code; } return snippets; } /** * Loads the `.json` and `.md` file of each snippet, and combines them into one object. */ function mergeSnippet(category: string, name: string) { const basePath = path.join(SNIPPETS_DIR, category, name); const mdFile = basePath + ".md"; const jsonFile = basePath + ".json"; if (!fs.existsSync(mdFile) || !fs.existsSync(jsonFile)) return null; const mdContent = fs.readFileSync(mdFile, "utf-8"); const meta = JSON.parse(fs.readFileSync(jsonFile, "utf-8")); const snippets = parseMarkdown(mdContent); return { id: name, category, ...meta, snippets, }; } /** * Reads all categories inside `/snippets` and merge their snippets. */ function scanSnippets(dir: string) { const items = []; for (const category of fs.readdirSync(dir)) { const categoryPath = path.join(dir, category); if (!fs.statSync(categoryPath).isDirectory()) continue; for (const file of fs.readdirSync(categoryPath)) { if (file.endsWith(".json")) { const name = file.replace(".json", ""); const snippet = mergeSnippet(category, name); if (snippet) items.push(snippet); } } } return items; } /** * Generates JSON output for each snippet and a global all.json. */ function buildSnippets() { const allSnippets = scanSnippets(SNIPPETS_DIR); // write individual files for (const snippet of allSnippets) { const outDir = path.join(OUTPUT_DIR, snippet.category); if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true }); const outFile = path.join(outDir, `${snippet.id}.json`); fs.writeFileSync(outFile, JSON.stringify(snippet, null, 2)); } // write all.json (metadata only) const allMeta = allSnippets.map(({ snippets, ...meta }) => meta); fs.writeFileSync( path.join(OUTPUT_DIR, "all.json"), JSON.stringify(allMeta, null, 2) ); console.log("✅ Snippets built:", allSnippets.length); } buildSnippets(); ================================================ FILE: snippets/README.md ================================================ ## Markdown Format ```` ```js // code here ``` --- ```py # code here ``` ```` ## JSON Format ```json { "title": "", "description": "", "languages": [""], "contributors": [""], "tags": ["", ""] } ``` ================================================ FILE: snippets/array-manipulation/shuffle-array.json ================================================ { "title": "Shuffle Array", "description": "Shuffles the items in an array.", "languages": ["js"], "contributors": ["loxt-nixo"], "tags": ["array", "shuffle", "random"] } ================================================ FILE: snippets/array-manipulation/shuffle-array.md ================================================ ```js function shuffleArray(array) { for (let i = array.length - 1; i >= 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } } // Usage: const array = [1, 2, 3, 4, 5]; shuffleArray(array); // Shuffles `array` in place ``` ================================================ FILE: snippets/data-handling/add-localstorage.json ================================================ { "title": "Add Item to localStorage", "description": "Stores a value in localStorage under the given key.", "languages": ["js"], "contributors": ["technoph1le"], "tags": ["localStorage", "storage", "memory"] } ================================================ FILE: snippets/data-handling/add-localstorage.md ================================================ ```js const addToLocalStorage = (key, value) => { localStorage.setItem(key, JSON.stringify(value)); }; // Usage: addToLocalStorage('user', { name: 'John', age: 30 }); ``` ================================================ FILE: snippets/number-formatting/number-to-currency.json ================================================ { "title": "Convert Number to Currency", "description": "Converts a number to a currency format with a specific locale.", "languages": ["js"], "contributors": ["axorax"], "tags": ["number", "currency"] } ================================================ FILE: snippets/number-formatting/number-to-currency.md ================================================ ```js const convertToCurrency = (num, locale = 'en-US', currency = 'USD') => { return new Intl.NumberFormat(locale, { style: 'currency', currency: currency }).format(num); }; // Usage: convertToCurrency(1234567.89); // Returns: '$1,234,567.89' convertToCurrency(987654.32, 'de-DE', 'EUR'); // Returns: '987.654,32 €' ``` ================================================ FILE: snippets/string-manipulation/reverse-string.json ================================================ { "title": "Reverse String", "description": "Reverses the characters in a string.", "languages": ["js", "cpp", "py"], "contributors": ["technoph1le", "Vaibhav-kesarwani"], "tags": ["string", "reverse"] } ================================================ FILE: snippets/string-manipulation/reverse-string.md ================================================ ```js const reverseString = (str) => str.split('').reverse().join(''); // Usage: reverseString('hello'); // Returns: 'olleh' ``` --- ```cpp #include #include std::string reverseString(const std::string& input) { std::string reversed = input; std::reverse(reversed.begin(), reversed.end()); return reversed; } // Usage: reverseString("quicksnip"); // Returns: "pinskciuq" ``` --- ```py def reverse_string(s:str) -> str: return s[::-1] # Usage: reverse_string('hello') # Returns: 'olleh' ``` ================================================ FILE: snippets/string-manipulation/string-to-camel-case.json ================================================ { "title": "Convert String to Camel Case", "description": "Converts a given string into camelCase.", "languages": ["js", "java"], "contributors": ["aumirza", "Mcbencrafter"], "tags": ["string", "case"] } ================================================ FILE: snippets/string-manipulation/string-to-camel-case.md ================================================ ```js function toCamelCase(str) { return str.replace(/\W+(.)/g, (match, chr) => chr.toUpperCase()); } // Usage: toCamelCase('hello world test'); // Returns: 'helloWorldTest' ``` --- ```java public static String stringToCamelCase(String text) { String[] words = text.split("\\s+"); StringBuilder camelCase = new StringBuilder( words[0].substring(0, 1).toLowerCase() + words[0].substring(1) ); for (int i = 1; i < words.length; i++) { camelCase.append(words[i].substring(0, 1).toUpperCase()); camelCase.append(words[i].substring(1)); } return camelCase.toString(); } // Usage: System.out.println(stringToCamelCase("Hello world test")); // "helloWorldTest" ``` ================================================ FILE: snippets/string-manipulation/string-to-param-case.json ================================================ { "title": "Convert String to Param Case", "description": "Converts a given string into param-case.", "languages": ["js", "java"], "contributors": ["aumirza", "Mcbencrafter"], "tags": ["string", "case"] } ================================================ FILE: snippets/string-manipulation/string-to-param-case.md ================================================ ```js function toParamCase(str) { return str.toLowerCase().replace(/\s+/g, '-'); } // Usage: toParamCase('Hello World Test'); // Returns: 'hello-world-test' ``` --- ```java public static String stringToParamCase(String text) { return text.toLowerCase().replaceAll("\\s+", "-"); } // Usage: System.out.println(stringToParamCase("Hello World 123")); // "hello-world-123" ``` ================================================ FILE: snippets/string-manipulation/string-to-pascal-case.json ================================================ { "title": "Convert String to Pascal Case", "description": "Converts a given string into PascalCase.", "languages": ["js", "java"], "contributors": ["aumirza", "Mcbencrafter"], "tags": ["string", "case"] } ================================================ FILE: snippets/string-manipulation/string-to-pascal-case.md ================================================ ```js function toPascalCase(str) { return str.replace(/\b\w/g, (s) => s.toUpperCase()).replace(/\W+(.)/g, (match, chr) => chr.toUpperCase()); } // Usage: toPascalCase('hello world test'); // Returns: 'HelloWorldTest' ``` --- ```java public static String stringToPascalCase(String text) { String[] words = text.split("\\s+"); StringBuilder pascalCase = new StringBuilder(); for (String word : words) { pascalCase.append(word.substring(0, 1).toUpperCase()); pascalCase.append(word.substring(1).toLowerCase()); } return pascalCase.toString(); } // Usage: System.out.println(stringToPascalCase("hello world")); // "HelloWorld" ``` ================================================ FILE: snippets/string-manipulation/string-to-snake-case.json ================================================ { "title": "Convert String to Snake Case", "description": "Converts a given string into snake_case.", "languages": ["js", "java"], "contributors": ["axorax", "Mcbencrafter"], "tags": ["string", "case"] } ================================================ FILE: snippets/string-manipulation/string-to-snake-case.md ================================================ ```js function toSnakeCase(str) { return str.replace(/([a-z])([A-Z])/g, '$1_$2') .replace(/\s+/g, '_') .toLowerCase(); } // Usage: toSnakeCase('Hello World Test'); // Returns: 'hello_world_test' ``` --- ```java public static String stringToSnakeCase(String text) { return text.toLowerCase().replaceAll("\\s+", "_"); } // Usage: System.out.println(stringToSnakeCase("Hello World 123")); // "hello_world_123" ``` ================================================ FILE: snippets/string-manipulation/string-to-title-case.json ================================================ { "title": "Convert String to Title Case", "description": "Converts a given string into Title Case.", "languages": ["js"], "contributors": ["aumirza"], "tags": ["string", "case"] } ================================================ FILE: snippets/string-manipulation/string-to-title-case.md ================================================ ```js function toTitleCase(str) { return str.toLowerCase().replace(/\b\w/g, (s) => s.toUpperCase()); } // Usage: toTitleCase('hello world test'); // Returns: 'Hello World Test' ``` ================================================ FILE: snippets/string-manipulation/truncate-sring.json ================================================ { "title": "Truncate String", "description": "Truncates a string after a specified length.", "languages": ["js", "java", "py"], "contributors": [ "realvishalrana", "Mcbencrafter", "axorax", "MinerMinerMods" ], "tags": ["string", "truncate", "mask", "hide"] } ================================================ FILE: snippets/string-manipulation/truncate-sring.md ================================================ ```js const truncateText = (text = '', maxLength = 50) => { return `${text.slice(0, maxLength)}${text.length >= maxLength ? '...' : ''}`; }; // Usage: const title = "Hello, World! This is a Test."; truncateText(title, 10); // Returns: 'Hello, Wor...' ``` --- ```java public static String truncate(String text, int length, String suffix) { if (text.length() <= length) return text; return text.substring(0, length).trim() + (suffix != null ? suffix : ""); } // Usage: System.out.println(truncate("hello world", 5, "...")); // "hello..." ``` --- ```py def truncate(s:str, length:int, suffix:bool = True) -> str : return (s[:length] + ("..." if suffix else "")) if len(s) > length else s # Usage: truncate('This is a long string', 10) # Returns: 'This is a ...' truncate('This is a long string', 10, False) # Returns: 'This is a ' ``` ================================================ FILE: source.config.ts ================================================ import { defineConfig, defineDocs, frontmatterSchema, metaSchema, } from "fumadocs-mdx/config"; // You can customise Zod schemas for frontmatter and `meta.json` here // see https://fumadocs.vercel.app/docs/mdx/collections#define-docs export const docs = defineDocs({ docs: { schema: frontmatterSchema, }, meta: { schema: metaSchema, }, }); export default defineConfig({ mdxOptions: { // MDX options }, }); ================================================ FILE: src/app/api/search/route.ts ================================================ import { source } from "@/lib/source"; import { createFromSource } from "fumadocs-core/search/server"; export const { GET } = createFromSource(source, { // https://docs.orama.com/open-source/supported-languages language: "english", }); ================================================ FILE: src/app/community/page.tsx ================================================ "use client"; import { AspectRatio } from "@/components/ui/aspect-ratio"; import { Button } from "@/components/ui/button"; import { ExternalLink } from "lucide-react"; import Image from "next/image"; import Link from "next/link"; import { motion } from "framer-motion"; import { DISCORD_URL, GITHUB_URL } from "@/data/meta"; import { YOUTUBE_VIDEOS } from "@/data/yt-videos"; export default function Communitypage() { return ( <>
GitHub

QuickSnip is Open-Source

Discord

Join our Discord Community

Videos from Technophile

    {YOUTUBE_VIDEOS.map((video) => (
  • {video.title}

    {video.title}

    • ))}
); } /** * Fetch `CONTRIBUTING.md` */ ================================================ FILE: src/app/contributing/page.tsx ================================================ import fs from "fs"; import path from "path"; import remarkGfm from "remark-gfm"; import Markdown from "react-markdown"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism"; export default function ContributingPage() { const filePath = path.join(process.cwd(), "CONTRIBUTING.md"); const fileContent = fs.readFileSync(filePath, "utf-8"); return (
{String(children).replace(/\n$/, "")} ) : ( {children} ); }, }} > {fileContent}
); } ================================================ FILE: src/app/extensions/page.tsx ================================================ import ExtensionItem, { NewExtensionItem, } from "@/components/ui/extension-item"; import { EXTENSIONS } from "@/data/extensions"; export default function ExtensionsPage() { return (

Extensions

    {EXTENSIONS.map((extension) => ( ))}
); } /** * 📦 Official Extensions VS Code Extension (coming soon) QuickSnip CLI (optional later) 🔌 Community Extensions ✅ Raycast Extension 🔜 Vim Plugin ⌨️ Obsidian Snippet Sync 💡 (Form to submit your own tool) 📚 How to Build One Short guide: “Build your own extension using QuickSnip API” Link to API docs or SDK Example template repo */ ================================================ FILE: src/app/globals.css ================================================ @import "tailwindcss"; @import "tw-animate-css"; @import "fumadocs-ui/css/neutral.css"; @import "fumadocs-ui/css/preset.css"; @custom-variant dark (&:is(.dark *)); @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); } :root { --radius: 0.625rem; --background: hsl(0, 0%, 95%); --foreground: hsl(0, 0%, 16%); --card: hsl(0, 0%, 90%); --card-foreground: hsl(0, 0%, 24%); --popover: hsl(0, 0%, 90%); --popover-foreground: hsl(0, 0%, 24%); --primary: hsl(0, 0%, 95%); --primary-foreground: hsl(0, 0%, 11%); --secondary: hsl(0, 0%, 90%); --secondary-foreground: hsl(0, 0%, 16%); --muted: hsl(0, 0%, 80%); --muted-foreground: hsl(0, 0%, 24%); --accent: hsl(181, 100%, 22%); --accent-foreground: hsl(0, 0%, 11%); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); --fd-layout-width: 90rem; --fd-sidebar-margin: 0 2rem; --fd-banner-height: 4rem; /* --fd-nav-height: 4rem; */ --header-height: 4rem; --footer-height: 4rem; } .dark { --background: hsl(0, 0%, 11%); --foreground: hsl(0, 0%, 90%); --card: hsl(0, 0%, 16%); --card-foreground: hsl(0, 0%, 80%); --popover: hsl(0, 0%, 16%); --popover-foreground: hsl(0, 0%, 80%); --primary: hsl(0, 0%, 11%); --primary-foreground: hsl(0, 0%, 90%); --secondary: hsl(0, 0%, 16%); --secondary-foreground: hsl(0, 0%, 80%); --muted: hsl(0, 0%, 24%); --muted-foreground: hsl(0, 0%, 70%); --accent: hsl(181, 100%, 36%); --accent-foreground: hsl(0, 0%, 11%); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: hsl(0, 0%, 11%); --sidebar-foreground: hsl(0, 0%, 90%); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } @layer utilities { .wrapper { @apply max-w-7xl w-full mx-auto px-4; } .wrapper-sm { @apply max-w-6xl w-full mx-auto px-4; } .wrapper-xs { @apply max-w-4xl w-full mx-auto px-4; } .wrapper-2xs { @apply max-w-2xl w-full mx-auto px-4; } .wrapper-lg { @apply max-w-[90rem] w-full mx-auto px-4; } } /* #nd-docs-layout { padding: 0 !important; } #nd-page { border: 1px solid green; } */ #nd-sidebar { background: var(--background); bottom: var(--footer-height); position: absolute; } ================================================ FILE: src/app/guide/[[...slug]]/page.tsx ================================================ import { source } from "@/lib/source"; import { DocsBody, DocsDescription, DocsPage, DocsTitle, } from "fumadocs-ui/page"; import { getGithubLastEdit } from "fumadocs-core/server"; import { notFound } from "next/navigation"; import { getMDXComponents } from "../../../../mdx-components"; export default async function Page(props: { params: Promise<{ slug?: string[] }>; }) { const params = await props.params; const page = source.getPage(params.slug); if (!page) notFound(); const MDX = page.data.body; const time = await getGithubLastEdit({ owner: "fuma-nama", repo: "fumadocs", path: `content/guide/${page.path}`, }); return ( {page.data.title} {page.data.description} ); } export async function generateStaticParams() { return source.generateParams(); } export async function generateMetadata(props: { params: Promise<{ slug?: string[] }>; }) { const params = await props.params; const page = source.getPage(params.slug); if (!page) notFound(); return { title: page.data.title, description: page.data.description, }; } ================================================ FILE: src/app/guide/layout.tsx ================================================ import { source } from "@/lib/source"; import { DocsLayout } from "fumadocs-ui/layouts/docs"; import type { ReactNode } from "react"; import { baseOptions } from "@/app/layout.config"; export default function Layout({ children }: { children: ReactNode }) { return ( {children} ); } ================================================ FILE: src/app/layout.config.tsx ================================================ import { BaseLayoutProps } from "fumadocs-ui/layouts/shared"; export const baseOptions: BaseLayoutProps = { // githubUrl: "https://github.com/quicksnip-dev/quicksnip", nav: { enabled: false, }, }; ================================================ FILE: src/app/layout.tsx ================================================ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import { RootProvider } from "fumadocs-ui/provider"; import "./globals.css"; import Header from "@/components/layouts/header"; import Footer from "@/components/layouts/footer"; const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); export const metadata: Metadata = { title: "QuickSnip", description: "Find code snippets in seconds.", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return (
{children}