diff --git a/src/components/LanguagesChart.jsx b/src/components/LanguagesChart.jsx index 73d15a3..34de4fc 100644 --- a/src/components/LanguagesChart.jsx +++ b/src/components/LanguagesChart.jsx @@ -1,29 +1,35 @@ import MetricBar from "./MetricBar" const LanguagesChart = ({ chartData, error }) => { - return ( -
-
- Programming languages -
+ return ( +
+
+ Programming languages +
- {error ? ( -
Data could not be found!
- ) : !chartData?.length ? ( -
No data for time period.
- ) : ( - chartData.map((x) => ( - - )) - )} -
- ) + {error ? ( +
Data could not be found!
+ ) : !chartData?.length ? ( +
No data for time period.
+ ) : ( + chartData.map((x) => ( + + )) + )} +
+ ) } export default LanguagesChart diff --git a/src/components/MetricBar.jsx b/src/components/MetricBar.jsx index 66d0e7c..ceebd5b 100644 --- a/src/components/MetricBar.jsx +++ b/src/components/MetricBar.jsx @@ -1,36 +1,36 @@ const MetricBar = ({ metric, hours, percentage, color }) => ( -
-
- {metric} - - {hours}h ({percentage}%) - -
-
-
-
-
+
+
+ {metric} + + {hours}h ({percentage}%) + +
+
+
+
+
) export default MetricBar diff --git a/src/components/ProjectsChart.jsx b/src/components/ProjectsChart.jsx index 707d363..900462e 100644 --- a/src/components/ProjectsChart.jsx +++ b/src/components/ProjectsChart.jsx @@ -1,30 +1,38 @@ import MetricBar from "./MetricBar" const ProjectsChart = ({ chartData, error }) => { - return ( -
-
Repos
+ return ( +
+
+ Repos +
- {error ? ( -
Data could not be found!
- ) : !chartData?.length ? ( -
No data for time period.
- ) : ( - chartData.map((x) => ( - - )) - )} -
- Data excludes workplace repos. -
-
- ) + {error ? ( +
Data could not be found!
+ ) : !chartData?.length ? ( +
No data for time period.
+ ) : ( + chartData.map((x) => ( + + )) + )} +
+ Data excludes workplace repos. +
+
+ ) } export default ProjectsChart diff --git a/src/containers/CodeStats.jsx b/src/containers/CodeStats.jsx index e48daaa..717a38e 100644 --- a/src/containers/CodeStats.jsx +++ b/src/containers/CodeStats.jsx @@ -1,4 +1,5 @@ import { useQuery } from "@tanstack/react-query" + import wakapiApi from "../api/wakapi-api" import { convertDateFriendly } from "../utils/convertDate" import Scorecard from "../components/Scorecard" @@ -32,7 +33,9 @@ const CodeStats = () => { data && data?.projects.filter( (project) => - !project.key.includes("gp-") && !project.key.includes("unknown") && !project.key.includes("amber") + !project.key.includes("gp-") && + !project.key.includes("unknown") && + !project.key.includes("amber") ) const personalProjectsSorted = @@ -67,43 +70,52 @@ const CodeStats = () => { .slice(0, 4) return ( -
+
-

- {`Code stats`} -

-
- Period: - {convertDateFriendly(data?.from)} -{" "} - {convertDateFriendly(data?.to)} -
-
-
- +

{`Code this month`}

- - - + {/* + + + + + + + + + + + + + +
Period: + {convertDateFriendly(data?.from)} -{" "} + {convertDateFriendly(data?.to)} +
Total time: + {error + ? "Error" + : isLoading + ? "Loading..." + : grandTotalFormatted} +
Main project: + {error ? "Error" : isLoading ? "Loading..." : mainProject} +
+ +*/}
+ +
Data sourced from my self-hosted{" "} - + Wakapi {" "} instance. diff --git a/src/containers/PostListing.jsx b/src/containers/PostListing.jsx index a7a48ce..b039b7b 100644 --- a/src/containers/PostListing.jsx +++ b/src/containers/PostListing.jsx @@ -4,62 +4,56 @@ import { Link } from "react-router" import { convertDate } from "@/utils/convertDate" const PostListing = ({ posts, title, showAllButton }) => { - return ( -
-
-
-

- {`${title}`} -

- {posts.map((post) => ( -
    -
  • -
    - - {convertDate(post.date)} - - - {post.title} - -
    -
    • -
- ))} -
-
-
- ) + return ( +
+
+
+

{`${title}`}

+ {posts.map((post) => ( +
    +
  • +
    + + {convertDate(post.date)} + + + {post.title} + +
    +
    • +
+ ))} +
+
+
+ ) } export default PostListing { - /* + /* - - - - {post.title} - - -
- {convertDate(post.date)} -
- - - - + to={`/posts/${post.slug}`} + key={post.slug} + className="block no-underline" + > + + + + {post.title} + + +
+ {convertDate(post.date)} +
+ + + + */ } diff --git a/src/index.css b/src/index.css index 28eee42..bbf02c3 100644 --- a/src/index.css +++ b/src/index.css @@ -15,20 +15,35 @@ display: flex; flex-direction: column; } + + .title-link { + letter-spacing: 0 !important; + } } .post-listing-item { display: flex; } -h1.site-title { - font-weight: 800; +html { + font-family: + system-ui, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Oxygen, + Ubuntu, + Cantarell, + "Open Sans", + "Helvetica Neue", + sans-serif; } .header-links { display: flex; list-style: none; - gap: 0.5rem; + gap: 1rem; margin: 0; padding: 0; } @@ -71,6 +86,10 @@ figure img { overflow: auto; } +.code-stats-sect { + font-family: sans-serif !important; +} + .code-stat-grid { display: flex; flex-direction: row; @@ -79,8 +98,8 @@ figure img { } .code-stat-label { - font-weight: 500; - font-style: italic; + font-weight: bold; + font-family: sans-serif; } .code-stats-disclaimer { @@ -92,3 +111,18 @@ figure img { .about-li-padding { padding-right: 1rem; } + +h1.site-title, +h1.post-title { + margin-bottom: 0.75rem; +} + +.big-title { + padding-bottom: 0.5rem; + margin-bottom: 0.5rem; + border-bottom: 1px solid black; +} + +.blog-meta { + font-size: 14px; +} diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 2001d45..53f716c 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -7,25 +7,22 @@ import CodeStats from "../containers/CodeStats" import { Link } from "react-router" const HomePage = () => { - const { posts } = usePosts() - return ( - -

A wizard who goes to bed early. This is my technical scrapbook - and digital garden. -

+ const { posts } = usePosts() + return ( + +

+ A wizard who goes to bed early. This is my{" "} + technical scrapbook and digital garden. +

+ - - - post.tags.includes("highlight"))} - /> - - - - - ) + post.tags.includes("highlight"))} + /> + + ) } export { HomePage } diff --git a/src/templates/BlogTemplate.jsx b/src/templates/BlogTemplate.jsx index f70a52c..ebed93f 100644 --- a/src/templates/BlogTemplate.jsx +++ b/src/templates/BlogTemplate.jsx @@ -17,11 +17,19 @@ const BlogTemplate = () => {
Loading...
) : (
-
-

- {post?.title} -

-
+
+

{post?.title}

+
@@ -29,7 +37,7 @@ const BlogTemplate = () => { Tag(s): {post?.tags?.map((tag, i) => ( @@ -40,9 +48,7 @@ const BlogTemplate = () => {
-
+
)}
diff --git a/src/templates/MainTemplate.jsx b/src/templates/MainTemplate.jsx index 720426c..ebac9c7 100644 --- a/src/templates/MainTemplate.jsx +++ b/src/templates/MainTemplate.jsx @@ -6,15 +6,15 @@ const Header = () => {
@@ -69,4 +68,5 @@ const MainTemplate = ({ children }) => { } export default MainTemplate //antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper -//main: flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0 \ No newline at end of file +//main: flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0 +