thomasabishop/eolas-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: plex sans font and tidy up
All checks were successful
Deploy eolas-app / deploy (push) Successful in 52s
Details

Browse source
This commit is contained in:
Thomas Bishop 2025-12-06 15:52:43 +00:00
parent 4c6a4d619f
commit 7143d0f389
8 changed files with 405 additions and 383 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/App.css
View file

@ -1,4 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");
code {
font-family: "JetBrains Mono";

2
src/components/EntriesListSidebar.tsx
View file

@ -48,7 +48,7 @@ export default function EntriesListSidebar() {
<SidebarMenuButton asChild className="rounded-none">
<a href="#">
<FileText />
<span>Entries</span>
<span className="font-medium">Entries</span>
<Badge className="ml-0" variant="secondary">
{entries?.count}
</Badge>

19
src/components/EntryReferences.tsx
View file

@ -1,24 +1,7 @@
import { useQuery } from "@tanstack/react-query"
import api from "../api/eolas-api"
import { Link } from "react-router"
import { Badge } from "./ui/badge"
export default function EntryReferences({ entryTitle }) {
const { data: tags, isLoading: tagsLoading } = useQuery({
queryKey: [`tags_for_${entryTitle}`],
queryFn: () => api.get(`/tags/${entryTitle}`).then((res) => res.data),
})
const { data: backlinks, isLoading: backlinksLoading } = useQuery({
queryKey: [`backlinks_for_${entryTitle}`],
queryFn: () => api.get(`/entries/backlinks/${entryTitle}`).then((res) => res.data),
})
const { data: outlinks, isLoading: outlinksLoading } = useQuery({
queryKey: [`outlinks_for_${entryTitle}`],
queryFn: () => api.get(`/entries/outlinks/${entryTitle}`).then((res) => res.data),
})
export default function EntryReferences({ tags, backlinks, outlinks }) {
return (
<div className="w-full md:flex flex-row justify-stretch gap-3">
<div className="w-full">

2
src/components/NetworkGraph.tsx
View file

@ -14,7 +14,7 @@ export default function NetworkGraph({ data }) {
allowInvalidContainer: true,
defaultEdgeColor: "#a4a4a4",
labelColor: { color: "#0a0a0a" },
labelFont: "Inter",
labelFont: "IBM Plex Sans",
labelSize: 14,
labelWeight: "400",
labelRenderedSizeThreshold: nodeCount > 15 ? 10 : 8,

2
src/components/TagListSidebar.tsx
View file

@ -48,7 +48,7 @@ export default function TagListSidebar() {
<SidebarMenuButton asChild className="rounded-none">
<a href="#">
<Tags />
<span>Tags</span>
<span className="font-medium">Tags</span>
<Badge className="ml-0" variant="secondary">
{tags?.count}
</Badge>

49
src/containers/EntryMetadata.tsx
View file

@ -1,10 +1,29 @@
import { useQuery } from "@tanstack/react-query"
import api from "../api/eolas-api"
import EntryReferences from "@/components/EntryReferences"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Bookmark } from "lucide-react"
import { History } from "lucide-react"
import { Braces } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { convertDateFriendly } from "@/lib/utils"
export default function EntryMetadata({ entryTitle, history, metadata }) {
const { data: tags } = useQuery({
queryKey: [`tags_for_${entryTitle}`],
queryFn: () => api.get(`/tags/${entryTitle}`).then((res) => res.data),
})
const { data: backlinks } = useQuery({
queryKey: [`backlinks_for_${entryTitle}`],
queryFn: () => api.get(`/entries/backlinks/${entryTitle}`).then((res) => res.data),
})
const { data: outlinks } = useQuery({
queryKey: [`outlinks_for_${entryTitle}`],
queryFn: () => api.get(`/entries/outlinks/${entryTitle}`).then((res) => res.data),
})
const sizeInKb = parseFloat((metadata?.fileSize / 1000).toFixed(1))
return (
<Tabs defaultValue="references" className="w-full h-full flex flex-col">
<TabsList className="rounded-none shadow-none drop-shadow-none w-full bg-sidebar sticky top-0 z-10 flex-shrink-0">
@ -16,14 +35,6 @@ export default function EntryMetadata({ entryTitle, history, metadata }) {
References
</TabsTrigger>
<TabsTrigger
className="pl-2 justify-start text-sm font-semibold rounded-none shadow-none data-[state=active]:border-1 data-[state=active]:border-border py-4"
value="history"
>
<History />
History
</TabsTrigger>
<TabsTrigger
className="pl-2 justify-start text-sm font-semibold rounded-none shadow-none data-[state=active]:border-1 data-[state=active]:border-border py-4"
value="metadata"
@ -35,16 +46,20 @@ export default function EntryMetadata({ entryTitle, history, metadata }) {
<div className="flex-1 overflow-auto">
<TabsContent value="references" className="px-2 lg:px-2 m-0">
<EntryReferences entryTitle={entryTitle} />
<EntryReferences tags={tags} backlinks={backlinks} outlinks={outlinks} />
</TabsContent>
<TabsContent className="pl-4 lg:pl-6 m-0" value="history">
<TabsContent className="px-2 lg:px-2 m-0" value="metadata">
<div className="w-full">
<p>Last modified: {history.lastModified}</p>
<div className="flex mb-4 gap-2">
<Badge variant="secondary">Last modified</Badge>
<div className="text-sm">
{convertDateFriendly(new Date(history.lastModified))}
</div>
</div>
<div className="flex mb-2 gap-2">
<Badge variant="secondary">Size on disk</Badge>
<div className="text-sm">{sizeInKb} Kb</div>
</div>
</TabsContent>
<TabsContent className="pl-4 lg:pl-6 m-0" value="metadata">
<div className="w-full">
<p>Size on disk: {metadata.fileSize} B</p>
</div>
</TabsContent>
</div>

2
src/index.css
View file

@ -122,7 +122,7 @@ html {
}
html {
font-family: "Inter", sans-serif;
font-family: "IBM Plex Sans", sans-serif;
}
body {

23
src/lib/utils.ts
View file

@ -4,3 +4,26 @@ import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
export const convertDateFriendly = (isoStamp) => {
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
]
const unixSeconds = new Date(isoStamp)
const day = unixSeconds.getDate()
const month = months[unixSeconds.getMonth()]
const year = unixSeconds.getFullYear()
return `${day} ${month} ${year}`
}