This commit is contained in:
parent
07266f70a7
commit
04950b84bb
6 changed files with 110 additions and 110 deletions
|
|
@ -3,57 +3,57 @@ import eolasApi from "@/api/eolas-api"
|
|||
import { convertDate } from "@/utils/convertDate"
|
||||
|
||||
const EolasEntries = ({ entries }) => {
|
||||
return (
|
||||
entries &&
|
||||
entries.map((entry, i) => (
|
||||
<ul>
|
||||
<li className="mb-4">
|
||||
<div className="flex justify-between items-center relative gap-3 hover:bg-[#504945]">
|
||||
<span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed">
|
||||
{convertDate(entry.last_modified)}
|
||||
</span>
|
||||
<a
|
||||
href={`https://eolas.systemsobscure.net/entries/${entry.title}`}
|
||||
key={i}
|
||||
className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1 "
|
||||
>
|
||||
{entry.title.replace(/_/g, " ")}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
))
|
||||
)
|
||||
return (
|
||||
entries &&
|
||||
entries.map((entry, i) => (
|
||||
<ul>
|
||||
<li className="mb-4">
|
||||
<div className="flex justify-between items-center relative gap-3 hover:bg-[#504945]">
|
||||
<span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed">
|
||||
{convertDate(entry.last_modified)}
|
||||
</span>
|
||||
<a
|
||||
href={`https://eolas.systemsobscure.net/entries/${entry.title}`}
|
||||
key={i}
|
||||
className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1 "
|
||||
>
|
||||
{entry.title.replace(/_/g, " ")}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
))
|
||||
)
|
||||
}
|
||||
|
||||
const EolasListing = () => {
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: [`eolas_listing`],
|
||||
queryFn: () =>
|
||||
eolasApi.get(`entries?limit=5&sort=date`).then((res) => res.data),
|
||||
})
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: [`eolas_listing`],
|
||||
queryFn: () =>
|
||||
eolasApi.get(`entries?limit=5&sort=date`).then((res) => res.data),
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-4 grow">
|
||||
<div className="space-my-8">
|
||||
<section className="container">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! scanlined inline-block px-1">
|
||||
recent notes (external)
|
||||
</h2>
|
||||
return (
|
||||
<div className="container mx-auto p-4 grow">
|
||||
<div className="space-my-8">
|
||||
<section className="container">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! scanlined inline-block px-2">
|
||||
{`> recent learning (external)`}
|
||||
</h2>
|
||||
|
||||
{isLoading && <div>Loading...</div>}
|
||||
{isLoading && <div>Loading...</div>}
|
||||
|
||||
{error ? (
|
||||
<div className="border-l-2 border-[#cc241d] px-3 bg-[#cc241d]/20">
|
||||
Error fetching recent learning
|
||||
</div>
|
||||
) : (
|
||||
<EolasEntries entries={data?.data} />
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
{error ? (
|
||||
<div className="border-l-2 border-[#cc241d] px-3 bg-[#cc241d]/20">
|
||||
Error fetching recent learning
|
||||
</div>
|
||||
) : (
|
||||
<EolasEntries entries={data?.data} />
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default EolasListing
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ const CodeStats = () => {
|
|||
<section className="container">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center md:justify-between">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-[#458588]! scanlined inline-block px-1">
|
||||
code stats
|
||||
{`> code stats`}
|
||||
</h2>
|
||||
<div className="mb-4 text-sm text-muted">
|
||||
{convertDateFriendly(data?.from)} -{" "}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ const PostListing = ({ posts, title, showAllButton }) => {
|
|||
<div className="container mx-auto p-4 grow">
|
||||
<div className="space-my-8">
|
||||
<section className="container">
|
||||
<h2 className="text-2xl font-semibold mb-4 scanlined inline-block px-1">
|
||||
{title}
|
||||
<h2 className="text-2xl font-semibold mb-4 scanlined block px-2">
|
||||
{`> ${title}`}
|
||||
</h2>
|
||||
{posts.map((post) => (
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -7,69 +7,69 @@ import CodeStats from "../containers/CodeStats"
|
|||
// import TodayILearned from "@/containers/TodayILearned"
|
||||
|
||||
const HomePage = () => {
|
||||
const { posts } = usePosts()
|
||||
return (
|
||||
<MainTemplate>
|
||||
<div className="container mx-auto p-4 grow">
|
||||
<div className="space-my-8">
|
||||
<section className="space-y-4">
|
||||
<div className="gap-6 flex flex-col items-center sm:flex-row">
|
||||
<div className="scanlined">
|
||||
<img src={gruvboxComputer} className="md:w-80 w-50" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold py-3 text-center sm:text-left md:text-left">
|
||||
<div className="scanlined inline-block py-1 px-2">
|
||||
systems obscure
|
||||
</div>
|
||||
</h1>
|
||||
<p className="text-center sm:text-left md:text-left text-muted condensed font-medium text-lg">
|
||||
Software engineer at ITV, formerly BBC. This is my technical
|
||||
scrapbook and digital garden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
const { posts } = usePosts()
|
||||
return (
|
||||
<MainTemplate>
|
||||
<div className="container mx-auto p-4 grow">
|
||||
<div className="space-my-8">
|
||||
<section className="space-y-4">
|
||||
<div className="gap-6 flex flex-col items-center sm:flex-row">
|
||||
<div className="scanlined">
|
||||
<img src={gruvboxComputer} className="md:w-80 w-50" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold py-3 text-center sm:text-left md:text-left">
|
||||
<div className="scanlined inline-block py-1 px-2">
|
||||
systems obscure
|
||||
</div>
|
||||
</h1>
|
||||
<p className="text-center sm:text-left md:text-left text-muted condensed font-medium text-lg">
|
||||
Software engineer at ITV, formerly BBC. This is my technical
|
||||
scrapbook and digital garden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PostListing title="recent posts" posts={posts.slice(0, 5)} />
|
||||
<PostListing title="recent posts" posts={posts.slice(0, 5)} />
|
||||
|
||||
<PostListing
|
||||
title="highlights"
|
||||
posts={posts.filter((post) => post.tags.includes("highlight"))}
|
||||
/>
|
||||
<PostListing
|
||||
title="highlights"
|
||||
posts={posts.filter((post) => post.tags.includes("highlight"))}
|
||||
/>
|
||||
|
||||
<div className="container mx-auto p-4 grow">
|
||||
<div className="space-my-8">
|
||||
<section className="container">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! scanlined inline-block px-1">
|
||||
projects
|
||||
</h2>
|
||||
<ul>
|
||||
<li className="pb-2">
|
||||
<a
|
||||
className="underline underline-offset-4 text-[18px] text-primary hover:text-primary/80 font-medium"
|
||||
href="https://eolas.systemsobscure.net"
|
||||
target="_blank"
|
||||
>
|
||||
eolas
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<p className="">
|
||||
A public frontend for my local Zettelkasten created with
|
||||
NodeJS, Python and React.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<CodeStats />
|
||||
<EolasListing />
|
||||
</MainTemplate>
|
||||
)
|
||||
<div className="container mx-auto p-4 grow">
|
||||
<div className="space-my-8">
|
||||
<section className="container">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! scanlined block px-2">
|
||||
{`> projects`}
|
||||
</h2>
|
||||
<ul>
|
||||
<li className="pb-2">
|
||||
<a
|
||||
className="underline underline-offset-4 text-[18px] text-primary hover:text-primary/80 font-medium"
|
||||
href="https://eolas.systemsobscure.net"
|
||||
target="_blank"
|
||||
>
|
||||
eolas
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<p className="">
|
||||
A public frontend for my local Zettelkasten created with
|
||||
NodeJS, Python and React.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<CodeStats />
|
||||
<EolasListing />
|
||||
</MainTemplate>
|
||||
)
|
||||
}
|
||||
|
||||
export { HomePage }
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const PostsPage = () => {
|
|||
|
||||
return (
|
||||
<MainTemplate>
|
||||
<PostListing title={null} posts={posts} />
|
||||
<PostListing title="all posts" posts={posts} />
|
||||
</MainTemplate>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const BlogTemplate = () => {
|
|||
) : (
|
||||
<article className="prose prose-lg max-w-none">
|
||||
<header className="mb-6 pb-4">
|
||||
<h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-1">
|
||||
<h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-3">
|
||||
{post?.title}
|
||||
</h1>
|
||||
<div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue