Skip to content

Commit c6055ab

Browse files
elijah-potterelijah-potter
authored
feat(web): Add testimonials (#2139)
1 parent f7f8e0a commit c6055ab

File tree

3 files changed

+113
-0
lines changed

3 files changed

+113
-0
lines changed

‎packages/web/src/lib/components/Testimonial.svelte‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script lang="ts">
2+
export let authorName: string;
3+
export let authorSubtitle: string;
4+
export let testimonial: string;
5+
</script>
6+
7+
<article class="flex h-full flex-col justify-between gap-6 rounded-xl border border-neutral-200 bg-white p-6 shadow-sm break-inside-avoid dark:border-neutral-800 dark:bg-neutral-900">
8+
<p class="text-base leading-relaxed text-neutral-700 dark:text-neutral-200">
9+
{testimonial}
10+
</p>
11+
<footer class="flex flex-col gap-1">
12+
<span class="font-semibold text-neutral-900 dark:text-neutral-50">{authorName}</span>
13+
<span class="text-sm text-neutral-600 dark:text-neutral-400">{authorSubtitle}</span>
14+
</footer>
15+
</article>

‎packages/web/src/lib/components/TestimonialCollection.svelte‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script lang="ts">
2+
import Testimonial from './Testimonial.svelte';
3+
4+
type TestimonialItem = {
5+
authorName: string;
6+
authorSubtitle: string;
7+
testimonial: string;
8+
/** The URL the testimonial was sourced from. */
9+
source: string;
10+
};
11+
12+
export let testimonials: TestimonialItem[] = [];
13+
14+
const { class: extraClass = '', ...restProps } = $$restProps;
15+
</script>
16+
17+
<section
18+
{...restProps}
19+
class={`mx-auto w-full max-w-6xl ${extraClass}`.trim()}
20+
>
21+
<div class="columns-1 gap-6 sm:columns-2 lg:columns-3">
22+
{#each testimonials as item, index (item.authorName + index)}
23+
<a href={item.source} class={`block mb-6 break-inside-avoid no-underline ${index % 2 == 0 ? "skew-hover" : "skew-hover-left"}`}>
24+
<Testimonial
25+
authorName={item.authorName}
26+
authorSubtitle={item.authorSubtitle}
27+
testimonial={item.testimonial}
28+
/>
29+
</a>
30+
{/each}
31+
</div>
32+
</section>

‎packages/web/src/routes/+page.svelte‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import ObsidianLogo from '$lib/components/ObsidianLogo.svelte';
1414
import Logo from '$lib/components/Logo.svelte';
1515
import Graph from '$lib/components/Graph.svelte';
1616
import Section from '$lib/components/Section.svelte';
17+
import TestimonialCollection from '$lib/components/TestimonialCollection.svelte';
1718
import EmacsLogo from '$lib/components/EmacsLogo.svelte';
1819
import HelixLogo from '$lib/components/HelixLogo.svelte';
1920
import NeovimLogo from '$lib/components/NeovimLogo.svelte';
@@ -22,6 +23,7 @@ import WordPressLogo from '$lib/components/WordPressLogo.svelte';
2223
import ZedLogo from '$lib/components/ZedLogo.svelte';
2324
import EdgeLogo from '$lib/components/EdgeLogo.svelte';
2425
import { browser } from '$app/environment';
26+
import Testimonial from '$lib/components/Testimonial.svelte';
2527
2628
/**
2729
* @param {string} keyword
@@ -33,6 +35,65 @@ function agentHas(keyword: string): boolean | undefined {
3335
3436
return navigator.userAgent.toLowerCase().includes(keyword.toLowerCase());
3537
}
38+
39+
40+
const testimonials = [
41+
{
42+
authorName: "Rich Edmonds",
43+
authorSubtitle: "Lead PC Hardware Editor, XDA Developers",
44+
testimonial: "Written in Rust, everything is processed in an instant and I find it neat to see the browser extension highlight words as I type, effectively checking per letter. And no account is required, allowing me to get up and running in no time.",
45+
source: "https://www.xda-developers.com/ditched-grammarly-for-this-amazing-open-source-alternative/"
46+
},
47+
{
48+
authorName: "Justin Pot",
49+
authorSubtitle: "Tech journalist, Lifehacker",
50+
testimonial: "Obsidian is my favorite productivity app, and Harper is a grammar checking tool that works well with it.",
51+
source: "https://lifehacker.com/tech/harper-offline-alternative-to-grammarly?test_uuid=02DN02BmbRCcASIX6xMQtY9&test_variant=B"
52+
},
53+
{
54+
authorName: "Filip Cujanovic",
55+
authorSubtitle: "Chrome Extension Review",
56+
testimonial: "Awesome extension! It's privacy focused, that means that every check it done locally on your computer, there is no server where your data goes! And because of that it's blazingly fast compared to Grammarly.",
57+
source: "https://chromewebstore.google.com/detail/private-grammar-checker-h/lodbfhdipoipcjmlebjbgmmgekckhpfb/reviews"
58+
},
59+
{
60+
authorName: "Tim Miller",
61+
authorSubtitle: "Author, Obsidian Rocks",
62+
testimonial: "Harper is great: it is discreet, fast, powerful, and private.",
63+
source: "https://obsidian.rocks/resource-harper/"
64+
},
65+
{
66+
authorName: "Prakash Joshi Pax",
67+
authorSubtitle: "Writer, Medium",
68+
testimonial: "What I loved about this tool is that it's private, and open source and really fast.",
69+
source: "https://beingpax.medium.com/9-new-obsidian-plugins-you-need-to-check-out-today-d55dba29bfb8"
70+
},
71+
{
72+
authorName: "imbolc",
73+
authorSubtitle: "Chrome Extension Review",
74+
testimonial: "I've been using Harper in Neovim for a long time and am glad to see it as an extension!",
75+
source: "https://chromewebstore.google.com/detail/private-grammar-checker-h/lodbfhdipoipcjmlebjbgmmgekckhpfb/reviews"
76+
77+
},
78+
{
79+
authorName: "Martijn Gribnau",
80+
authorSubtitle: "Software Engineer",
81+
testimonial: "What a delightful way to check for flagrant spelling errors in markdown files. Thanks Harper authors!",
82+
source: "https://gribnau.dev/posts/harper-cli/"
83+
},
84+
{
85+
authorName: "Chloe Ferguson",
86+
authorSubtitle: "Writer, We Are Founders",
87+
testimonial: "Harper excels at catching the kinds of mistakes that matter in technical writing – improper capitalization, misspelled words, and awkward phrasing that can make documentation unclear.",
88+
source: "https://www.wearefounders.uk/the-grammar-checker-that-actually-gets-developers-meet-harper/"
89+
},
90+
{
91+
authorName: "Rogerio Taques",
92+
authorSubtitle: "Chrome Extension Review",
93+
testimonial: "I've been using Harper instead of Grammarly for a few months already, and I can't be happier! I can't wait to see the great improvement when this tool reaches version 1.0.0! Great job! I hope that, eventually, it will also support languages other than English.",
94+
source: "https://chromewebstore.google.com/detail/private-grammar-checker-h/lodbfhdipoipcjmlebjbgmmgekckhpfb/reviews"
95+
},
96+
];
3697
</script>
3798

3899
<main class="mx-auto flex w-full max-w-5xl flex-col gap-12 py-12">
@@ -232,6 +293,11 @@ function agentHas(keyword: string): boolean | undefined {
232293
</svelte:fragment>
233294
</Section>
234295

296+
<Section>
297+
<svelte:fragment slot="title">Loved by Thousands</svelte:fragment>
298+
<TestimonialCollection testimonials={testimonials} />
299+
</Section>
300+
235301
<Section id="faqs">
236302
<svelte:fragment slot="title">FAQs</svelte:fragment>
237303
<div class="space-y-4">

0 commit comments

Comments
 (0)