From bb9ea851fc6e6153538ecb9bbfca3a80394231c9 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Wed, 17 May 2023 11:21:15 +0200
Subject: [PATCH] Use `Raw` button to navigate to raw file

For toggling Markdown view, we add a button that either shows `Plain` or
`Markdown`.

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>
---
 src/views/projects/Blob.svelte | 14 +++++++-------
 tests/e2e/project.spec.ts      | 12 +++++-------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/views/projects/Blob.svelte b/src/views/projects/Blob.svelte
index 4f18b9ae0..2cb1135c9 100644
--- a/src/views/projects/Blob.svelte
+++ b/src/views/projects/Blob.svelte
@@ -118,7 +118,7 @@
     margin-right: 0.25rem;
   }
 
-  .markdown-toggle {
+  .toggle {
     margin-right: 0.5rem;
   }
 
@@ -228,15 +228,15 @@
       </span>
       <div class="right">
         {#if isMarkdown}
-          <div class="markdown-toggle">
-            <SquareButton
-              active={!showMarkdown}
-              clickable
-              on:click={toggleMarkdown}>
-              Raw
+          <div class="toggle">
+            <SquareButton clickable on:click={toggleMarkdown}>
+              {showMarkdown ? "Plain" : "Markdown"}
             </SquareButton>
           </div>
         {/if}
+        <a href="{rawPath}/{blob.path}" class="toggle">
+          <SquareButton clickable>Raw</SquareButton>
+        </a>
         <div class="last-commit" title={lastCommit.author.name} use:twemoji>
           <span class="hash">
             {lastCommit.id.slice(0, 7)}
diff --git a/tests/e2e/project.spec.ts b/tests/e2e/project.spec.ts
index baafe57e1..fa442ba74 100644
--- a/tests/e2e/project.spec.ts
+++ b/tests/e2e/project.spec.ts
@@ -96,7 +96,7 @@ test("source file highlighting", async ({ page }) => {
 
 test("navigate line numbers", async ({ page }) => {
   await page.goto(`${projectFixtureUrl}/tree/main/markdown/cheatsheet.md`);
-  await page.locator(".markdown-toggle").click();
+  await page.locator('text="Plain"').click();
 
   await page.locator('[href="#L5"]').click();
   await expect(page.locator("#L5")).toHaveClass("line highlight");
@@ -231,14 +231,12 @@ test("markdown files", async ({ page }) => {
 
   // Switch between raw and rendered modes.
   {
-    const rawButton = page.locator(".markdown-toggle .square-button");
-
-    await rawButton.click();
-    await expect(rawButton).toHaveClass(/active/);
+    const plainButton = page.locator('text="Plain"');
+    await plainButton.click();
     await expect(page.locator("text=##### Table of Contents")).toBeVisible();
 
-    await rawButton.click();
-    await expect(rawButton).not.toHaveClass("active");
+    const markdownButton = page.locator('text="Markdown"');
+    await markdownButton.click();
   }
 
   // Internal links go to anchor.