Skip to content

Commit

Permalink
Fix build errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@andraz
andraz committed May 26, 2024
1 parent bb072b8 commit 098c5ef
Show file tree
Hide file tree
Showing 19 changed files with 645 additions and 482 deletions.
57 changes: 36 additions & 21 deletions src/components/ArrowCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,59 @@
import { formatDate } from "@lib/utils"
import type { CollectionEntry } from "astro:content"
import { formatDate } from '@lib/utils'

type Props = {
entry: CollectionEntry<"blog"> | CollectionEntry<"projects">
entry: any
pill?: boolean
}

export default function ArrowCard({entry, pill}: Props) {
return (
<a href={`/${entry.collection}/${entry.slug}`} class="group p-4 gap-3 flex items-center border rounded-lg hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out">
export default function ArrowCard({ entry, pill }: Props) {
return (
<a
href={`/${entry.collection}/${entry.slug}`}
class="group p-4 gap-3 flex items-center border rounded-lg hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out">
<div class="w-full group-hover:text-black group-hover:dark:text-white blend">
<div class="flex flex-wrap items-center gap-2">
{pill &&
{pill && (
<div class="text-sm capitalize px-2 py-0.5 rounded-full border border-black/15 dark:border-white/25">
{entry.collection === "blog" ? "post" : "project"}
{entry.collection === 'blog' ? 'post' : 'project'}
</div>
}
<div class="text-sm uppercase">
{formatDate(entry.data.date)}
</div>
)}
<div class="text-sm uppercase">{formatDate(entry.data.date)}</div>
</div>
<div class="font-semibold mt-3 text-black dark:text-white">
{entry.data.title}
</div>

<div class="text-sm line-clamp-2">
{entry.data.summary}
</div>
<div class="text-sm line-clamp-2">{entry.data.summary}</div>
<ul class="flex flex-wrap mt-2 gap-1">
{entry.data.tags.map((tag:string) => ( // this line has an error; Parameter 'tag' implicitly has an 'any' type.ts(7006)
{entry.data.tags.map((tag: string) => (
<li class="text-xs uppercase py-0.5 px-1 rounded bg-black/5 dark:bg-white/20 text-black/75 dark:text-white/75">
{tag}
</li>
))}
</ul>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="stroke-current group-hover:stroke-black group-hover:dark:stroke-white">
<line x1="5" y1="12" x2="19" y2="12" class="scale-x-0 group-hover:scale-x-100 translate-x-4 group-hover:translate-x-1 transition-all duration-300 ease-in-out" />
<polyline points="12 5 19 12 12 19" class="translate-x-0 group-hover:translate-x-1 transition-all duration-300 ease-in-out" />
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
class="stroke-current group-hover:stroke-black group-hover:dark:stroke-white">
<line
x1="5"
y1="12"
x2="19"
y2="12"
class="scale-x-0 group-hover:scale-x-100 translate-x-4 group-hover:translate-x-1 transition-all duration-300 ease-in-out"
/>
<polyline
points="12 5 19 12 12 19"
class="translate-x-0 group-hover:translate-x-1 transition-all duration-300 ease-in-out"
/>
</svg>
</a>
)
}
)
}
61 changes: 37 additions & 24 deletions src/components/BaseHead.astro
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,66 @@
---
import { ViewTransitions } from "astro:transitions"
interface Props {
title: string
description: string
image?: string
}
const canonicalURL = new URL(Astro.url.pathname, Astro.site)
const { title, description, image = "/open-graph.jpg" } = Astro.props
const { title } = Astro.props
---

<!-- Global Metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<meta name="generator" content="{Astro.generator}" />

<link rel="preload" href="/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin>
<link rel="preload" href="/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin>
<link
rel="preload"
href="/fonts/atkinson-regular.woff"
as="font"
type="font/woff"
crossorigin
/>
<link
rel="preload"
href="/fonts/atkinson-bold.woff"
as="font"
type="font/woff"
crossorigin
/>

<!-- Canonical URL -->
<link rel="canonical" href={canonicalURL} />
<link rel="canonical" href="{canonicalURL}" />

<!-- Primary Meta Tags -->
<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />
<meta name="title" content="{title}" />
<meta name="description" content="{description}" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content={Astro.url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(image, Astro.url)} />
<meta property="og:url" content="{Astro.url}" />
<meta property="og:title" content="{title}" />
<meta property="og:description" content="{description}" />
<meta property="og:image" content="{new" URL(image, Astro.url)} />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={Astro.url} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={new URL(image, Astro.url)} />
<meta property="twitter:url" content="{Astro.url}" />
<meta property="twitter:title" content="{title}" />
<meta property="twitter:description" content="{description}" />
<meta property="twitter:image" content="{new" URL(image, Astro.url)} />

<!-- Sitemap -->
<link rel="sitemap" href="/sitemap-index.xml" />

<!-- RSS Feed -->
<link rel="alternate" type="application/rss+xml" title={title} href={`${Astro.site}rss.xml`}/>
<link
rel="alternate"
type="application/rss+xml"
title="{title}"
href="{`${Astro.site}rss.xml`}"
/>

<!-- Global Scripts -->
<script is:inline src="/js/theme.js"></script>
Expand All @@ -57,12 +70,12 @@ const { title, description, image = "/open-graph.jpg" } = Astro.props
<!-- <ViewTransitions /> -->

<script>
import type { TransitionBeforeSwapEvent } from "astro:transitions/client"
document.addEventListener("astro:before-swap", (e) =>
import type { TransitionBeforeSwapEvent } from 'astro:transitions/client'
document.addEventListener('astro:before-swap', e =>
[
...(e as TransitionBeforeSwapEvent).newDocument.head.querySelectorAll(
"link[as=\"font\"]"
'link[as="font"]'
),
].forEach((link) => link.remove())
].forEach(link => link.remove())
)
</script>
36 changes: 3 additions & 33 deletions src/components/Blog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import type { CollectionEntry } from 'astro:content'
import { createEffect, createSignal, For } from 'solid-js'
import { createEffect, createSignal } from 'solid-js'
import ArrowCard from '@components/ArrowCard'
import { cn } from '@lib/utils'

type Props = {
tags: string[]
data: CollectionEntry<'blog'>[]
}

export default function Blog({ data, tags }: Props) {
const [filter, setFilter] = createSignal(new Set<string>())
export default function Blog({ data }: Props) {
const [filter] = createSignal(new Set<string>())
const [posts, setPosts] = createSignal<CollectionEntry<'blog'>[]>([])

createEffect(() => {
Expand All @@ -24,37 +23,8 @@ export default function Blog({ data, tags }: Props) {
)
})

function toggleTag(tag: string) {
setFilter(
prev =>
new Set(
prev.has(tag) ? [...prev].filter(t => t !== tag) : [...prev, tag]
)
)
}

return (
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
{/* <div class="col-span-3 sm:col-span-1">
<div class="sticky top-24">
<div class="text-sm font-semibold uppercase mb-2 text-black dark:text-white">Filter</div>
<ul class="flex flex-wrap sm:flex-col gap-1.5">
<For each={tags}>
{(tag) => (
<li>
<button onClick={() => toggleTag(tag)} class={cn("w-full px-2 py-1 rounded", "whitespace-nowrap overflow-hidden overflow-ellipsis", "flex gap-2 items-center", "bg-black/5 dark:bg-white/10", "hover:bg-black/10 hover:dark:bg-white/15", "transition-colors duration-300 ease-in-out", filter().has(tag) && "text-black dark:text-white")}>
<svg class={cn("size-5 fill-black/50 dark:fill-white/50", "transition-colors duration-300 ease-in-out", filter().has(tag) && "fill-black dark:fill-white")}>
<use href={`/ui.svg#square`} class={cn(!filter().has(tag) ? "block" : "hidden")} />
<use href={`/ui.svg#square-check`} class={cn(filter().has(tag) ? "block" : "hidden")} />
</svg>
{tag}
</button>
</li>
)}
</For>
</ul>
</div>
</div> */}
<div class="col-span-3 sm:col-span-3">
<div class="flex flex-col">
<div class="text-sm uppercase mb-2">
Expand Down
73 changes: 50 additions & 23 deletions src/components/Projects.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,76 @@
import type { CollectionEntry } from "astro:content"
import { createEffect, createSignal, For } from "solid-js"
import ArrowCard from "@components/ArrowCard"
import { cn } from "@lib/utils"
import type { CollectionEntry } from 'astro:content'
import { createEffect, createSignal, For } from 'solid-js'
import ArrowCard from '@components/ArrowCard'
import { cn } from '@lib/utils'

type Props = {
tags: string[]
data: CollectionEntry<"projects">[]
data: CollectionEntry<'projects'>[]
}

export default function Projects({ data, tags }: Props) {
const [filter, setFilter] = createSignal(new Set<string>())
const [projects, setProjects] = createSignal<CollectionEntry<"projects">[]>([])
const [projects, setProjects] = createSignal<CollectionEntry<'projects'>[]>(
[]
)

createEffect(() => {
setProjects(data.filter((entry) =>
Array.from(filter()).every((value) =>
entry.data.tags.some((tag:string) =>
tag.toLowerCase() === String(value).toLowerCase()
setProjects(
data.filter((entry: any) =>
Array.from(filter()).every(value =>
entry.data.tags.some(
(tag: string) => tag.toLowerCase() === String(value).toLowerCase()
)
)
)
))
)
})

function toggleTag(tag: string) {
setFilter((prev) =>
new Set(prev.has(tag)
? [...prev].filter((t) => t !== tag)
: [...prev, tag]
)
setFilter(
prev =>
new Set(
prev.has(tag) ? [...prev].filter(t => t !== tag) : [...prev, tag]
)
)
}

return (
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
<div class="col-span-3 sm:col-span-1">
<div class="sticky top-24">
<div class="text-sm font-semibold uppercase mb-2 text-black dark:text-white">Filter</div>
<div class="text-sm font-semibold uppercase mb-2 text-black dark:text-white">
Filter
</div>
<ul class="flex flex-wrap sm:flex-col gap-1.5">
<For each={tags}>
{(tag) => (
{tag => (
<li>
<button onClick={() => toggleTag(tag)} class={cn("w-full px-2 py-1 rounded", "whitespace-nowrap overflow-hidden overflow-ellipsis", "flex gap-2 items-center", "bg-black/5 dark:bg-white/10", "hover:bg-black/10 hover:dark:bg-white/15", "transition-colors duration-300 ease-in-out", filter().has(tag) && "text-black dark:text-white")}>
<svg class={cn("size-5 fill-black/50 dark:fill-white/50", "transition-colors duration-300 ease-in-out", filter().has(tag) && "fill-black dark:fill-white")}>
<use href={`/ui.svg#square`} class={cn(!filter().has(tag) ? "block" : "hidden")} />
<use href={`/ui.svg#square-check`} class={cn(filter().has(tag) ? "block" : "hidden")} />
<button
onClick={() => toggleTag(tag)}
class={cn(
'w-full px-2 py-1 rounded',
'whitespace-nowrap overflow-hidden overflow-ellipsis',
'flex gap-2 items-center',
'bg-black/5 dark:bg-white/10',
'hover:bg-black/10 hover:dark:bg-white/15',
'transition-colors duration-300 ease-in-out',
filter().has(tag) && 'text-black dark:text-white'
)}>
<svg
class={cn(
'size-5 fill-black/50 dark:fill-white/50',
'transition-colors duration-300 ease-in-out',
filter().has(tag) && 'fill-black dark:fill-white'
)}>
<use
href={`/ui.svg#square`}
class={cn(!filter().has(tag) ? 'block' : 'hidden')}
/>
<use
href={`/ui.svg#square-check`}
class={cn(filter().has(tag) ? 'block' : 'hidden')}
/>
</svg>
{tag}
</button>
Expand All @@ -59,7 +86,7 @@ export default function Projects({ data, tags }: Props) {
SHOWING {projects().length} OF {data.length} PROJECTS
</div>
<ul class="flex flex-col gap-3">
{projects().map((project) => (
{projects().map(project => (
<li>
<ArrowCard entry={project} />
</li>
Expand Down
Loading

0 comments on commit 098c5ef

Please sign in to comment.