3 files changed, 23 insertions, 8 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 093347f..3bdd11d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
     import { DateTime } from "luxon";
+    import RubySquareYear from "./RubySquareYear.svelte";
+    import Square from "./Square.svelte";
 
     const getCurrentYear = () => DateTime.now().year;
     const getRelative = (year: number) =>
@@ -10,9 +12,8 @@
     let isPerfectSquare = $derived(Number.isInteger(sqrt));
     let lastSqrt = $derived(isPerfectSquare ? sqrt - 1 : Math.floor(sqrt));
     let nextSqrt = $derived(isPerfectSquare ? sqrt + 1 : Math.ceil(sqrt));
-    let last = $derived(lastSqrt ** 2);
     let next = $derived(nextSqrt ** 2);
-    let nextRelative: string = $state("");
+    let nextRelative = $state("");
 
     const update = () => {
         year = getCurrentYear();
@@ -22,22 +23,25 @@
     setInterval(update, 500);
 </script>
 
-<div id="container">
+<div id="mainDisplay">
     <h1>Is the year a perfect square?</h1>
     {#if isPerfectSquare}
         <div id="answer">Yes.</div>
-        <strong>{sqrt}</strong><sup>2</sup> = {year}.
+        <strong>{sqrt}</strong><Square /> = {year}.
     {:else}
         <div id="answer">No.</div>
     {/if}
     The last was
-    <ruby>{last}<rp> (</rp><rt>{lastSqrt}<sup>2</sup></rt><rp>)</rp></ruby>, and
-    the next is
-    <ruby>{next}<rp> (</rp><rt>{nextSqrt}<sup>2</sup></rt><rp>)</rp></ruby>, {nextRelative}!
+    <RubySquareYear sqrt={lastSqrt} /> and the next is
+    <RubySquareYear sqrt={nextSqrt} />, {nextRelative}!
+</div>
+
+<div id="sourceLinkContainer">
+    <a href="https://github.com/arjunsatarkar/is-the-year-a-perfect-square">source code</a>
 </div>
 
 <style>
-    #container {
+    #mainDisplay {
         text-align: center;
         font-size: 2rem;
     }
@@ -52,4 +56,7 @@
         font-weight: bold;
         font-family: sans-serif;
     }
+    #sourceLinkContainer {
+        text-align: right;
+    }
 </style>
diff --git a/src/routes/RubySquareYear.svelte b/src/routes/RubySquareYear.svelte
new file mode 100644
index 0000000..53500bf
--- /dev/null
+++ b/src/routes/RubySquareYear.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import Square from "./Square.svelte";
+
+    let { sqrt }: { sqrt: number } = $props();
+</script>
+
+<ruby>{sqrt ** 2}<rp> (</rp><rt>{sqrt}<Square /></rt><rp>)</rp></ruby>
diff --git a/src/routes/Square.svelte b/src/routes/Square.svelte
new file mode 100644
index 0000000..bcd1286
--- /dev/null
+++ b/src/routes/Square.svelte
@@ -0,0 +1 @@
+<sup>2</sup>