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