feat: store and show pkgbuild (implements #157)

frontend/src/components/common/CodeBlock.tsx

@@ -17,47 +17,57 @@
  * You should have received a copy of the GNU General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import { Box } from "@mui/material";
+import "components/common/syntaxLanguages";
+
+import { Box, useTheme } from "@mui/material";
 import CopyButton from "components/common/CopyButton";
+import { useThemeMode } from "hooks/useThemeMode";
 import React, { type RefObject } from "react";
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import { githubGist, vs2015 } from "react-syntax-highlighter/dist/esm/styles/hljs";
 
 interface CodeBlockProps {
-    preRef?: RefObject<HTMLElement | null>;
-    getText: () => string;
+    content: string;
     height?: number | string;
+    language?: string;
     onScroll?: () => void;
-    wordBreak?: boolean;
+    preRef?: RefObject<HTMLElement | null>;
 }
 
 export default function CodeBlock({
-    preRef,
-    getText,
+    content,
     height,
+    language = "text",
     onScroll,
-    wordBreak,
+    preRef,
 }: CodeBlockProps): React.JSX.Element {
+    const { mode } = useThemeMode();
+    const theme = useTheme();
+
     return <Box sx={{ position: "relative" }}>
         <Box
             ref={preRef}
-            component="pre"
             onScroll={onScroll}
-            sx={{
-                backgroundColor: "action.hover",
-                p: 2,
-                borderRadius: 1,
-                overflow: "auto",
-                height,
-                fontSize: "0.8rem",
-                fontFamily: "monospace",
-                ...wordBreak ? { whiteSpace: "pre-wrap", wordBreak: "break-all" } : {},
-            }}
+            sx={{ overflow: "auto", height }}
         >
-            <code>
-                {getText()}
-            </code>
-        </Box>
-        <Box sx={{ position: "absolute", top: 8, right: 8 }}>
-            <CopyButton getText={getText} />
+            <SyntaxHighlighter
+                language={language}
+                style={mode === "dark" ? vs2015 : githubGist}
+                wrapLongLines
+                customStyle={{
+                    padding: theme.spacing(2),
+                    borderRadius: `${theme.shape.borderRadius}px`,
+                    fontSize: "0.8rem",
+                    fontFamily: "monospace",
+                    margin: 0,
+                    minHeight: "100%",
+                }}
+            >
+                {content}
+            </SyntaxHighlighter>
         </Box>
+        {content && <Box sx={{ position: "absolute", top: 8, right: 8 }}>
+            <CopyButton text={content} />
+        </Box>}
     </Box>;
 }

frontend/src/components/common/CopyButton.tsx

@@ -23,17 +23,17 @@ import { IconButton, Tooltip } from "@mui/material";
 import React, { useEffect, useRef, useState } from "react";
 
 interface CopyButtonProps {
-    getText: () => string;
+    text: string;
 }
 
-export default function CopyButton({ getText }: CopyButtonProps): React.JSX.Element {
+export default function CopyButton({ text }: CopyButtonProps): React.JSX.Element {
     const [copied, setCopied] = useState(false);
     const timer = useRef<ReturnType<typeof setTimeout>>(undefined);
 
     useEffect(() => () => clearTimeout(timer.current), []);
 
     const handleCopy: () => Promise<void> = async () => {
-        await navigator.clipboard.writeText(getText());
+        await navigator.clipboard.writeText(text);
         setCopied(true);
         clearTimeout(timer.current);
         timer.current = setTimeout(() => setCopied(false), 2000);

frontend/src/components/common/RepositorySelect.tsx

@@ -25,12 +25,12 @@ import type React from "react";
 export default function RepositorySelect({
     repositorySelect,
 }: { repositorySelect: SelectedRepositoryResult }): React.JSX.Element {
-    const { repositories, current } = useRepository();
+    const { repositories, currentRepository } = useRepository();
 
     return <FormControl fullWidth margin="normal">
         <InputLabel>repository</InputLabel>
         <Select
-            value={repositorySelect.selectedKey || (current?.key ?? "")}
+            value={repositorySelect.selectedKey || (currentRepository?.key ?? "")}
             label="repository"
             onChange={event => repositorySelect.setSelectedKey(event.target.value)}
         >

frontend/src/components/common/syntaxLanguages.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2021-2026 ahriman team.
+ *
+ * This file is part of ahriman
+ * (see https://github.com/arcan1s/ahriman).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import bash from "react-syntax-highlighter/dist/esm/languages/hljs/bash";
+import diff from "react-syntax-highlighter/dist/esm/languages/hljs/diff";
+import plaintext from "react-syntax-highlighter/dist/esm/languages/hljs/plaintext";
+
+SyntaxHighlighter.registerLanguage("bash", bash);
+SyntaxHighlighter.registerLanguage("diff", diff);
+SyntaxHighlighter.registerLanguage("text", plaintext);