Add extension to the snippet to help rendering with highlights

Author: ACR1209

src/components/SnippetList.tsx

@@ -8,11 +8,6 @@ import { SnippetType } from "@types";
 import { LeftAngleArrowIcon } from "./Icons";
 import SnippetModal from "./SnippetModal";
 
-const extensions: { [key: string]: string } = {
-  REACT: "tsx",
-  FASTAPI: "py",
-};
-
 const SnippetList = () => {
   const { language, snippet, setSnippet } = useAppContext();
   const { fetchedSnippets } = useSnippets();
@@ -92,7 +87,7 @@ const SnippetList = () => {
           <SnippetModal
             snippet={snippet}
             handleCloseModal={handleCloseModal}
-            language={extensions[language.name] || language.name}
+            language={snippet.extension}
           />
         )}
       </AnimatePresence>

src/types/index.ts

@@ -19,6 +19,7 @@ export type SnippetType = {
   code: string;
   tags: string[];
   author: string;
+  extension: string;
 };
 
 export type AppState = {

utils/snippetParser.js

@@ -55,6 +55,7 @@ function parseSnippet(path, name, text) {
     match = headerEndCodeStartRegex.exec(fromCursor());
     if(match === null) return raise('Missing header end \'---\' or code start \'```\'', path);
     cursor += match[0].length;
+    const extension = match[0].replace(/[\r\n`-]/g, '');
 
     match = codeRegex.exec(fromCursor());
     if(match === null) return raise('Missing code block end \'```\'', path);
@@ -67,6 +68,7 @@ function parseSnippet(path, name, text) {
         tags: properties.tags.split(',').map((tag) => tag.trim()).filter((tag) => tag),
         contributors: 'contributors' in properties ? properties.contributors.split(',').map((contributor) => contributor.trim()).filter((contributor) => contributor) : [],
         code: code.replace(/\r\n/g, '\n'),
+        extension
     }
 }