This content originally appeared on DEV Community and was authored by Mitchell Mutandah
This is a submission for the The Pinata Challenge
What I Built
I developed SnipShot, a web application that allows developers to easily create, format, and share beautiful images of their code snippets. The app uses React for the frontend, with Material-UI for a sleek user interface. The core functionality leverages Pinata's IPFS service to store the original code snippets, while also generating stylized images of the formatted code.
Key features include:
- Support for multiple programming languages
- Automatic code formatting with customizable indentation
- Syntax highlighting for improved readability
- Easy sharing via downloadable images
- Secure storage of original snippets on IPFS through Pinata
Demo
Check out the live app here and generate awesome images for free: https://snipshot-eta.vercel.app/
Screenshots showcasing the app features:
Landing:
Snippet Uploader and Image Generation Interface:
Generated snippet image:
My Code
The project is available on GitHub: https://github.com/mitchiemt11/codesnap
Here's a key component of the project, the SnippetRenderer:
import React, { forwardRef } from 'react';
import { Box } from '@mui/material';
import hljs from 'highlight.js';
import 'highlight.js/styles/vs2015.css';
import { Language } from '../types';
interface SnippetRendererProps {
codeContent: string;
language: Language;
spacesPerIndent?: number;
}
const formatCode = (code: string, spacesPerIndent: number): string => {
// ... [formatCode function implementation]
};
export const SnippetRenderer = forwardRef<HTMLDivElement, SnippetRendererProps>(
({ codeContent, language, spacesPerIndent = 2 }, ref) => {
const formattedCode = formatCode(codeContent, spacesPerIndent);
return (
<Box
ref={ref}
sx={{
p: 3,
backgroundColor: "#1e1e1e",
color: "#dcdcdc",
borderRadius: 2,
display: "none",
fontFamily: "monospace",
}}
>
<pre>
<code
dangerouslySetInnerHTML={{
__html: hljs.highlight(formattedCode, { language }).value,
}}
/>
</pre>
</Box>
);
}
);
SnippetRenderer.displayName = 'SnippetRenderer';
This component is responsible for rendering the formatted and syntax-highlighted code snippet, which is then captured as an image.
More Details
Pinata's IPFS service plays a crucial role in SnipShot. Here's how I utilized Pinata in the project:
- Uploading Snippets: When a user submits a code snippet, it's first uploaded to Pinata's IPFS network. This ensures that the original code is securely stored and can be retrieved later if needed.
const blob = new Blob([codeContent], { type: 'text/plain' });
const file = new File([blob], `snippet.${language}`, { type: 'text/plain' });
const upload = await pinata.upload.file(file);
- Creating Shareable Links: After uploading, I use Pinata's gateway to create a signed URL for the snippet. This URL can be used to access the original code directly from IPFS.
await pinata.gateways.createSignedURL({
cid: upload.cid,
expires: 30,
});
- Image Generation: While the original snippet is stored on IPFS, I generate a stylized image of the code using HTML5 Canvas. This image is what users can easily share on social media or in documentation.
By using Pinata, SnipShot ensures that code snippets are not only beautifully presented but also securely stored and easily retrievable. This combination of visual appeal and robust storage makes SnipShot a powerful tool for developers looking to share their code in a more engaging way.
This content originally appeared on DEV Community and was authored by Mitchell Mutandah
Mitchell Mutandah | Sciencx (2024-10-12T21:45:24+00:00) SnipShot: A Stylish Code Snippet Uploader Using Pinata IPFS. Retrieved from https://www.scien.cx/2024/10/12/snipshot-a-stylish-code-snippet-uploader-using-pinata-ipfs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.