feat: loading files from manifest

This commit is contained in:
Pihkaal
2024-01-28 01:11:56 +01:00
parent 73297d046a
commit 9bb6ccdd4f
8 changed files with 190 additions and 39 deletions

View File

@@ -1,9 +1,11 @@
import { useState, useEffect } from "react";
import { useApp } from "~/context/AppContext";
import { useTerminal } from "~/context/TerminalContext";
import { api } from "~/utils/api";
import { FILE_STYLES, File } from "~/utils/filesystem";
import { type Cell } from "~/utils/terminal/cell";
import { TerminalRenderer } from "~/utils/terminal/renderer";
import { theme } from "~/utils/terminal/theme";
import { Manifest } from "~/utils/types";
const PATH_FOLDED: Cell = {
char: "",
@@ -15,36 +17,6 @@ const PATH_UNFOLDED: Cell = {
foreground: theme.blue,
};
const FILE_STYLES = {
directory: {
char: "\ue6ad", // \ue6ad ||| \ueaf6
foreground: theme.blue,
},
md: {
char: "\ue73e",
foreground: theme.blue,
},
asc: {
char: "\uf43d",
foreground: theme.yellow,
},
} as const satisfies Record<string, Cell>;
type FileType = keyof typeof FILE_STYLES;
type File = {
name: string;
} & (
| {
type: Exclude<FileType, "directory">;
}
| {
type: "directory";
children: Array<File>;
folded: boolean;
}
);
const FILES_SRC: Array<File> = [
{
name: "projects",
@@ -59,11 +31,39 @@ const FILES_SRC: Array<File> = [
{ name: "pubkey.asc", type: "asc" },
];
const buildFileTree = (manifest: Manifest): Array<File> => {
if (manifest === undefined) return [];
const files: Array<File> = [];
manifest.projects.forEach(project => {
if (project.name === "pihkaal") {
project.files.forEach(file => {
files.push({
name: file,
type: "md",
});
});
} else {
files.push({
name: project.name,
type: "directory",
folded: true,
children: project.files.map(file => ({
name: file,
type: "md",
})),
});
}
});
return files;
};
export const NvimTree = () => {
const { data: repos } = api.github.getRepos.useQuery();
const manifest = useApp();
const [selected, setSelected] = useState(0);
const [files, setFiles] = useState(FILES_SRC);
const [files, setFiles] = useState(buildFileTree(manifest));
const { cols: width, rows: height } = useTerminal();
const canvas = new TerminalRenderer(width * 0.2, height - 2, {

View File

@@ -0,0 +1,39 @@
import {
createContext,
useEffect,
useContext,
useState,
ReactNode,
} from "react";
import axios from "axios";
import { Manifest } from "~/utils/types";
const AppContext = createContext<Manifest | undefined>(undefined);
export const AppContextProvider = (props: {
children: Array<ReactNode> | ReactNode;
}) => {
const [manifest, setManifest] = useState<Manifest>();
useEffect(() => {
axios
.get<Manifest>(
"https://raw.githubusercontent.com/pihkaal/pihkaal/main/manifest.json",
)
.then(x => {
setManifest(x.data);
console.log(x.data);
});
}, []);
return (
<AppContext.Provider value={manifest}>{props.children}</AppContext.Provider>
);
};
export const useApp = () => {
const context = useContext(AppContext);
if (!context) throw new Error("useApp must be used inside the app lol");
return context;
};

View File

@@ -3,10 +3,11 @@ import { Terminal } from "~/components/Terminal";
import { MusicVisualizer } from "~/components/MusicVisualizer";
import { MusicPlayer } from "~/components/MusicPlayer";
import { Nvim } from "~/components/Nvim/Nvim";
import { AppContextProvider } from "~/context/AppContext";
export default function Home() {
return (
<>
<AppContextProvider>
<Head>
<title>pihkaal</title>
</Head>
@@ -36,6 +37,6 @@ export default function Home() {
</Terminal>
</div>
</main>
</>
</AppContextProvider>
);
}

View File

@@ -1,10 +1,18 @@
import { Octokit } from "@octokit/rest";
import { publicProcedure } from "../../trpc";
import axios from "axios";
type Manifest = {
projects: Array<{
name: string;
files: Array<string>;
}>;
};
export const getRepos = publicProcedure.query(async () => {
const octokit = new Octokit();
const { data: manifest } = await axios.get<Manifest>(
"https://raw.githubusercontent.com/pihkaal/pihkaal/main/manifest.json",
);
//const response = await octokit.repos.listForUser({ username: "pihkaal" });
//const repos = response.data.filter(x => x.name !== "pihkaal");
return [];
return manifest;
});

32
src/utils/filesystem.ts Normal file
View File

@@ -0,0 +1,32 @@
import { Cell } from "./terminal/cell";
import { theme } from "./terminal/theme";
export const FILE_STYLES = {
directory: {
char: "\ue6ad", // \ue6ad ||| \ueaf6
foreground: theme.blue,
},
md: {
char: "\ue73e",
foreground: theme.blue,
},
asc: {
char: "\uf43d",
foreground: theme.yellow,
},
} as const satisfies Record<string, Cell>;
export type FileType = keyof typeof FILE_STYLES;
export type File = {
name: string;
} & (
| {
type: Exclude<FileType, "directory">;
}
| {
type: "directory";
children: Array<File>;
folded: boolean;
}
);

6
src/utils/types.ts Normal file
View File

@@ -0,0 +1,6 @@
export type Manifest = {
projects: Array<{
name: string;
files: Array<string>;
}>;
};