feat: fetch root files at build step and handle double click on mobile
This commit is contained in:
@@ -23,6 +23,11 @@ type Project = {
|
|||||||
private: boolean;
|
private: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type File = {
|
||||||
|
name: string;
|
||||||
|
content: string;
|
||||||
|
};
|
||||||
|
|
||||||
export const manifest = (): Plugin => ({
|
export const manifest = (): Plugin => ({
|
||||||
name: "generate-pages-plugin",
|
name: "generate-pages-plugin",
|
||||||
buildStart: async () => {
|
buildStart: async () => {
|
||||||
@@ -86,14 +91,27 @@ export const manifest = (): Plugin => ({
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const files: Array<File> = [];
|
||||||
|
for (const file of manifest.files) {
|
||||||
|
const content = await getRepoFileContent("pihkaal", file);
|
||||||
|
|
||||||
|
files.push({
|
||||||
|
name: file,
|
||||||
|
content,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const code = `
|
const code = `
|
||||||
const projects = ${JSON.stringify(projects, null, 2)} as const;
|
const projects = ${JSON.stringify(projects, null, 2)} as const;
|
||||||
|
|
||||||
const links = ${JSON.stringify(manifest.links, null, 2)} as const;
|
const links = ${JSON.stringify(manifest.links, null, 2)} as const;
|
||||||
|
|
||||||
|
const files = ${JSON.stringify(files, null, 2)} as const;
|
||||||
|
|
||||||
export const assets = {
|
export const assets = {
|
||||||
projects,
|
projects,
|
||||||
links
|
links,
|
||||||
|
files
|
||||||
};
|
};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { useState } from "react";
|
||||||
import { DEFAULT_ICON } from "~/utils/icons";
|
import { DEFAULT_ICON } from "~/utils/icons";
|
||||||
import { type Child } from "~/utils/tree";
|
import { type Child } from "~/utils/tree";
|
||||||
|
|
||||||
@@ -10,12 +11,26 @@ export const NvimTreeChild = (props: {
|
|||||||
onOpen: (file: Child) => void;
|
onOpen: (file: Child) => void;
|
||||||
}) => {
|
}) => {
|
||||||
const icon = props.child.icon ?? DEFAULT_ICON;
|
const icon = props.child.icon ?? DEFAULT_ICON;
|
||||||
|
const [lastClick, setLastClick] = useState<number>();
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
props.onSelect(props.y);
|
||||||
|
|
||||||
|
if (lastClick) {
|
||||||
|
if (Date.now() - lastClick <= 500) {
|
||||||
|
props.onOpen(props.child);
|
||||||
|
}
|
||||||
|
|
||||||
|
setLastClick(undefined);
|
||||||
|
} else {
|
||||||
|
setLastClick(Date.now());
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li
|
<li
|
||||||
style={{ background: props.selected ? "#504651" : "" }}
|
style={{ background: props.selected ? "#504651" : "" }}
|
||||||
onMouseDown={() => props.onSelect(props.y)}
|
onMouseDown={handleClick}
|
||||||
onDoubleClick={() => props.onOpen(props.child)}
|
|
||||||
>
|
>
|
||||||
{" "}
|
{" "}
|
||||||
{props.inDirectory && (
|
{props.inDirectory && (
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { useState } from "react";
|
||||||
import { type Folder } from "~/utils/tree";
|
import { type Folder } from "~/utils/tree";
|
||||||
|
|
||||||
export const NvimTreeDirectory = (props: {
|
export const NvimTreeDirectory = (props: {
|
||||||
@@ -6,12 +7,28 @@ export const NvimTreeDirectory = (props: {
|
|||||||
selected: boolean;
|
selected: boolean;
|
||||||
onSelect: (y: number) => void;
|
onSelect: (y: number) => void;
|
||||||
onOpen: (directory: Folder) => void;
|
onOpen: (directory: Folder) => void;
|
||||||
}) => (
|
}) => {
|
||||||
|
const [lastClick, setLastClick] = useState<number>();
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
props.onSelect(props.y);
|
||||||
|
|
||||||
|
if (lastClick) {
|
||||||
|
if (Date.now() - lastClick <= 500) {
|
||||||
|
props.onOpen(props.directory);
|
||||||
|
}
|
||||||
|
|
||||||
|
setLastClick(undefined);
|
||||||
|
} else {
|
||||||
|
setLastClick(Date.now());
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
<li
|
<li
|
||||||
className="text-[#a0b6ee]"
|
className="text-[#a0b6ee]"
|
||||||
style={{ background: props.selected ? "#504651" : "" }}
|
style={{ background: props.selected ? "#504651" : "" }}
|
||||||
onMouseDown={() => props.onSelect(props.y)}
|
onMouseDown={handleClick}
|
||||||
onDoubleClick={() => props.onOpen(props.directory)}
|
|
||||||
>
|
>
|
||||||
{props.directory.opened ? (
|
{props.directory.opened ? (
|
||||||
<> </>
|
<> </>
|
||||||
@@ -23,3 +40,4 @@ export const NvimTreeDirectory = (props: {
|
|||||||
{props.directory.name}
|
{props.directory.name}
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
|
};
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ const buildTree = () =>
|
|||||||
project(p.name, p.content, p.url, p.language, p.private),
|
project(p.name, p.content, p.url, p.language, p.private),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
file("README.md", "hey", getIcon("README.md")),
|
...assets.files.map((f) => file(f.name, f.content)),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
export const NvimTree = (
|
export const NvimTree = (
|
||||||
|
|||||||
@@ -43,7 +43,6 @@ const InnerNvimTree = (props: InnerKittyProps<typeof Nvim>) => {
|
|||||||
<NvimTree {...props} onOpen={handleOpenChild} />
|
<NvimTree {...props} onOpen={handleOpenChild} />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="overflow-y-auto break-all"
|
|
||||||
style={{
|
style={{
|
||||||
gridArea: "1 / 2 / 1 / 3",
|
gridArea: "1 / 2 / 1 / 3",
|
||||||
overflowY: "auto",
|
overflowY: "auto",
|
||||||
|
|||||||
@@ -16,7 +16,6 @@ import { WaybarPowerWidget } from "./Widgets/WaybarPowerWidget";
|
|||||||
import { WaybarTrayWidget } from "./Widgets/WaybarTrayWidget";
|
import { WaybarTrayWidget } from "./Widgets/WaybarTrayWidget";
|
||||||
import { WaybarToggleThemeWidget } from "./Widgets/WaybarToggleThemeWidget";
|
import { WaybarToggleThemeWidget } from "./Widgets/WaybarToggleThemeWidget";
|
||||||
import { WaybarWeatherWidget } from "./Widgets/WaybarWeatherWidget";
|
import { WaybarWeatherWidget } from "./Widgets/WaybarWeatherWidget";
|
||||||
import { Responsive } from "../Responsive";
|
|
||||||
import { cn, hideIf } from "~/utils/react";
|
import { cn, hideIf } from "~/utils/react";
|
||||||
import { useApp } from "~/hooks/useApp";
|
import { useApp } from "~/hooks/useApp";
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { DEFAULT_ICON, ICONS } from "./icons";
|
import { DEFAULT_ICON, ICONS, getIcon } from "./icons";
|
||||||
|
|
||||||
export type Icon = {
|
export type Icon = {
|
||||||
char: string;
|
char: string;
|
||||||
@@ -62,7 +62,11 @@ export const link = (name: string, url: string, icon: Icon): Link => ({
|
|||||||
icon,
|
icon,
|
||||||
});
|
});
|
||||||
|
|
||||||
export const file = (name: string, content: string, icon: Icon): File => ({
|
export const file = (
|
||||||
|
name: string,
|
||||||
|
content: string,
|
||||||
|
icon: Icon = getIcon(name),
|
||||||
|
): File => ({
|
||||||
type: "file",
|
type: "file",
|
||||||
name,
|
name,
|
||||||
content,
|
content,
|
||||||
|
|||||||
Reference in New Issue
Block a user