Skip to content

Commit

Permalink
add donate button; improve persistence
Browse files Browse the repository at this point in the history
  • Loading branch information
LyonSyonII committed Jul 4, 2024
1 parent c91291b commit ab3b762
Show file tree
Hide file tree
Showing 8 changed files with 84 additions and 30 deletions.
4 changes: 4 additions & 0 deletions frontend/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
node_modules
.direnv
.astro
dist
8 changes: 8 additions & 0 deletions frontend/src/components/Checkpoint/checkpoint.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,19 @@ export async function remove(id: string) {
v = new Set();
}
v.delete(id);
v.delete(`${level}-confetti`);
return v;
}, store);
await callSubscribed(level);
}

export async function removeAll(level: string) {
await idb.update<Set<string>>(level, () => {
return new Set();
}, store);
await callSubscribed(level);
}

export function subscribe(id: string, run: (checkpoints: Set<string>) => Promise<void>, runOnSubscribed: boolean = false) {
const level = getLevel(id);
let events = subscribed.get(level);
Expand Down
7 changes: 7 additions & 0 deletions frontend/src/components/CodeBlock/CodeBlock.astro
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,13 @@ const props = {
<output>
<p></p>
</output>
{
import.meta.env.DEV && (
<button class="DEV-RESET">
<b>RESET</b>
</button>
)
}
</x-code-block>

<style>
Expand Down
14 changes: 10 additions & 4 deletions frontend/src/components/CodeBlock/CodeBlock.ts
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ export class CodeBlock extends HTMLElement {
this.theme.of(theme === "light" ? githubLight : githubDark),
EditorView.editable.of(editable),
this.readonly.of(EditorState.readOnly.of(!editable)),
EditorView.updateListener.of(view => view.docChanged && this.persistCode())
],
}),
});
Expand All @@ -140,9 +141,14 @@ export class CodeBlock extends HTMLElement {
// To avoid line gutter collapsing
setTimeout(() => this.editor.requestMeasure(), 300);

this.addEventListener("keydown", () => {
this.persistCode();
})
if (import.meta.env.DEV) {
const reset = this.querySelector<HTMLButtonElement>(".DEV-RESET")!;
reset.addEventListener("click", async () => {
const remove = (await import("../Checkpoint/checkpoint")).remove;
await remove(this.id);
location.reload();
});
}
}

public setProps({ setup, vars = [], validator, onsuccess }: CodeQuestion) {
Expand Down Expand Up @@ -271,7 +277,7 @@ export class CodeBlock extends HTMLElement {

return true;
}

persistCode(value?: string) {
persistence.set(this.id, value || this.getValue());
}
Expand Down
46 changes: 34 additions & 12 deletions frontend/src/components/Donate.astro
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,42 @@
// https://developers.convertkit.com/#subscribers
---

<script is:inline src="https://rust-quest.ck.page/commerce.js" async defer></script>

<div>
<a class="convertkit-button" href="https://rust-quest.ck.page/products/rust-quest" data-commerce>Buy me a coffee</a>
<a class="convertkit-button" href="https://rust-quest.ck.page/products/rust-quest-subscription" data-commerce>Buy my product</a>
</div>
<article>
<h4>Join the Adventure!</h4>
Love Rust Quest? Your donation can help me keep writing and bring more chapters to life.
<a class="not-content" href="https://www.paypal.com/donate/?hosted_button_id=YCGMXV34KT7Y8" target="_blank"><button>Donate</button></a>
</article>

<style>
div {
display: grid;
width: 20%;
position: fixed;
button {
gap: 0.5em;
border: 1px;
border-radius: 999rem;
padding: 0.5rem 1.125rem;
line-height: 1.1875;
text-decoration: none;
font-size: var(--sl-text);
font-weight: 600;

background: var(--sl-color-text-accent);
color: var(--sl-color-black);

cursor: pointer;

width: 100%;
}

article {
--sl-card-border: var(--sl-color-gray-5);
display: flex;
flex-direction: column;
padding: var(--card-padding);
gap: var(--card-padding);

background-color: var(--sl-color-black);
border: 1px solid var(--sl-color-gray-5);
border-radius: var(--borderRadius);

bottom: 0%;
left: 50%;
position: relative;
}
</style>
29 changes: 17 additions & 12 deletions frontend/src/components/Progress.astro
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
---
import Feedback from "./Feedback/Feedback.astro";
import Donate from "./Donate.astro";
import Checkpoint from "./Checkpoint/Checkpoint.astro";
type Props = {
id: string;
Expand All @@ -9,7 +11,9 @@ type Props = {
const { id, total, confetti = true } = Astro.props;
---
<script is:inline src="https://rust-quest.ck.page/commerce.js" async defer></script>
<Checkpoint id=`${id}-${total}`>
<Donate />
</Checkpoint>

<x-progress data-confetti={`${confetti}`}>
<label for={id}>0 / {total}</label>
Expand Down Expand Up @@ -58,15 +62,15 @@ const { id, total, confetti = true } = Astro.props;
</style>

<script>
import { subscribe, add, remove } from "./Checkpoint/checkpoint";
import { subscribe, add, removeAll } from "./Checkpoint/checkpoint";
import { confetti } from "../utils/confetti";

class Progress extends HTMLElement {
constructor() {
super();

const progress = this.querySelector("progress") as HTMLProgressElement;
const label = this.querySelector("label") as HTMLLabelElement;
const progress = this.querySelector<HTMLProgressElement>("progress")!;
const label = this.querySelector<HTMLLabelElement>("label")!;
const launchConfetti: boolean = this.dataset.confetti === "true";
const id: string = progress.id;
const total: number = progress.max;
Expand All @@ -76,22 +80,23 @@ const { id, total, confetti = true } = Astro.props;
label.innerText = `${value} / ${total}`;
progress.value = value;
const confettiId = `${id}-confetti`;
if (!launchConfetti || value !== total || checkpoint.has(confettiId)) {
if (value !== total) {
return;
}

confetti();
add(confettiId);
if (launchConfetti && !checkpoint.has(confettiId)) {
confetti();
add(confettiId);
}
});

const feedback = this.querySelector("dialog")!;
this.querySelector(".feedback")!.addEventListener("click", () =>
feedback.showModal(),
);

if (import.meta.env.DEV) {
this.querySelector(".reset")!.addEventListener("click", () => {
remove(id);
this.querySelector(".reset")!.addEventListener("click", async () => {
await removeAll(id);
location.reload();
});
}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/QuestionCard.astro
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,11 @@ const borderRadius = rounded ? "var(--border-radius)" : "none";
flex-direction: column;
padding: var(--card-padding);
gap: var(--gap);

background-color: var(--background);
border: var(--borderStyle);
border-radius: var(--borderRadius);

position: relative;
}
</style>
2 changes: 2 additions & 0 deletions frontend/src/content/docs/en/first-steps/1-introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import CodeQuestion from "@components/CodeQuestion.astro";
import Checkpoint from "@components/Checkpoint/Checkpoint.astro";
import Hint from "@components/Hint.astro";
import Feedback from "@components/Feedback/Feedback.astro";
import Donate from "@components/Donate.astro";

Thank you for reading Rust Quest!
This book is designed for people with zero experience in Rust or programming in general, so don't worry, I'm sure you'll leave having learned something!
Expand Down Expand Up @@ -52,4 +53,5 @@ e.g. `"Hello Liam!"`.

Now the computer's talking to you, how nice!
When you're ready, click the arrow below to begin your journey!

</Checkpoint>

0 comments on commit ab3b762

Please sign in to comment.