Merge pull request #16 from MaddyGuthridge/maddy-dev-qol

Quality-of-life improvements

Author: MaddyGuthridge

src/components/markdown/Markdown.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-  import { marked } from 'marked';
-  import hljs from 'highlight.js';
-  import 'highlight.js/styles/stackoverflow-light.css';
+  import { marked } from "marked";
+  import hljs from "highlight.js";
+  import "highlight.js/styles/stackoverflow-light.css";
 
   export let source: string;
 
   // https://github.com/markedjs/marked/discussions/2982#discussioncomment-6979586
   const renderer = {
     link(href: string, title: string | null | undefined, text: string) {
       const link = marked.Renderer.prototype.link.call(this, href, title, text);
-      return link.replace('<a', "<a target='_blank' rel='noreferrer' ");
-    }
+      return link.replace("<a", "<a target='_blank' rel='noreferrer' ");
+    },
   };
   marked.use({ renderer });
 
@@ -31,7 +31,7 @@
     // function when we just subscribe to what their contents are supposed to
     // be
     setTimeout(() => {
-      renderElement.querySelectorAll('pre code').forEach((el) => {
+      renderElement.querySelectorAll("pre code").forEach((el) => {
         hljs.highlightElement(el as HTMLElement);
       });
     });
@@ -48,7 +48,8 @@
 </div>
 
 <style>
-  .markdown-render :global(p > code), .markdown-render :global(pre) {
+  .markdown-render :global(p > code),
+  .markdown-render :global(pre) {
     background-color: rgb(245, 245, 245);
     padding: 2px 5px;
     border-radius: 3px;
@@ -67,6 +68,28 @@
     padding: 1em;
   }
 
+  /*
+    Pretty block-quotes
+    Source: https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
+  */
+  .markdown-render :global(blockquote) {
+    background: #f9f9f973;
+    border-left: 5px solid #ccccccc2;
+    margin: 1.5em 10px;
+    padding: 0.5em 10px;
+  }
+  .markdown-render :global(blockquote:before) {
+    color: #ccccccc2;
+    content: "\201C";
+    font-size: 4em;
+    line-height: 0.1em;
+    margin-right: 0.25em;
+    vertical-align: -0.4em;
+  }
+  .markdown-render :global(blockquote p) {
+    display: inline;
+  }
+
   .markdown-render :global(a) {
     text-decoration: none;
   }

src/routes/[group]/+page.svelte

@@ -54,6 +54,7 @@
   async function finishEditing(save: boolean) {
     if (save) {
       // Update readme
+      console.log(readme);
       groupData.readme = readme;
       await api().group.withId(data.groupId).readme.set(readme);
       groupData.info.listedItems = [...shownItems];
@@ -117,7 +118,7 @@
   <div id="readme">
     <div id="info-container">
       <EditableMarkdown
-        source={groupData.readme}
+        bind:source={readme}
         editing={editing}
       />
     </div>

src/routes/[group]/[item]/+page.svelte

@@ -112,7 +112,7 @@
   {/if}
   <div id="info-container">
     <EditableMarkdown
-      source={readme}
+      bind:source={readme}
       {editing}
     />
     <!-- Display linked items as chips -->

src/routes/admin/GitSettings.svelte

@@ -34,9 +34,9 @@
 
     <!-- Push/pull -->
     {#if data.repo.behind}
-      <button on:click={() => api().admin.git.push()}>Push</button>
-    {:else if data.repo.ahead}
       <button on:click={() => api().admin.git.pull()}>Pull</button>
+    {:else if data.repo.ahead}
+      <button on:click={() => api().admin.git.push()}>Push</button>
     {/if}
 
     <!-- Commit -->

src/routes/admin/firstrun/+page.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
-  import type { FirstRunCredentials } from '$lib/server/auth';
-  import api from '$endpoints';
-  import Paper from '$components/Paper.svelte';
-  import Background from '$components/Background.svelte';
-  import Spinner from '$components/modals/Spinner.svelte';
-  import Error from '$components/modals/Error.svelte';
-  import Modal from '$components/modals/Modal.svelte';
-  import { goto } from '$app/navigation';
-  import Navbar from '$components/navbar';
-  import blankConfig from '$lib/blankConfig';
-  import CopyButton from '$components/CopyButton.svelte';
-  import consts from '$lib/consts';
-
-  let repoUrl = '';
-  let repoBranch = '';
+  import { dev } from "$app/environment";
+  import type { FirstRunCredentials } from "$lib/server/auth";
+  import api from "$endpoints";
+  import Paper from "$components/Paper.svelte";
+  import Background from "$components/Background.svelte";
+  import Spinner from "$components/modals/Spinner.svelte";
+  import Error from "$components/modals/Error.svelte";
+  import Modal from "$components/modals/Modal.svelte";
+  import { goto } from "$app/navigation";
+  import Navbar from "$components/navbar";
+  import blankConfig from "$lib/blankConfig";
+  import CopyButton from "$components/CopyButton.svelte";
+  import consts from "$lib/consts";
+
+  // In dev mode, use my portfolio data by default
+  let repoUrl = dev ? "git@github.com:MaddyGuthridge/portfolio-data.git" : "";
+  let repoBranch = "";
   let credentials: FirstRunCredentials | undefined;
 
   async function submitMain() {
@@ -39,33 +41,33 @@
   async function onSubmit(e: SubmitEvent) {
     const submitter = e.submitter?.id;
     switch (submitter) {
-      case 'submit-main':
+      case "submit-main":
         await submitMain();
         break;
-      case 'submit-no-git':
+      case "submit-no-git":
         await submitNoGit();
         break;
       default:
-        console.error('Submitter not recognised!');
+        console.error("Submitter not recognised!");
     }
   }
 
   let showLoading = false;
 
-  let errorText = '';
+  let errorText = "";
 </script>
 
 <svelte:head>
   <title>Setup - {consts.APP_NAME}</title>
-  <meta name="generator" content="{consts.APP_NAME}">
-  <meta name="theme-color" content="#aa00aa">
+  <meta name="generator" content={consts.APP_NAME} />
+  <meta name="theme-color" content="#aa00aa" />
   <!--
     Prevent web crawlers from indexing the firstrun page. Of course, if someone
     has an instance of this exposed to the open web without it being set up,
     that's absolutely on them, but the least we can do is stop instances that
     aren't set up from being easily searchable.
   -->
-  <meta name="robots" content="noindex">
+  <meta name="robots" content="noindex" />
 </svelte:head>
 
 <Background color="#aa00aa"></Background>
@@ -76,50 +78,78 @@
   <Paper>
     <main>
       <div class="center">
-        <h1 style="font-size: 3rem"> Welcome to your fancy new portfolio website! </h1>
+        <h1 style="font-size: 3rem">
+          Welcome to your fancy new portfolio website!
+        </h1>
         <h2>Let's get set up!</h2>
       </div>
 
       <form on:submit={onSubmit}>
         <h3>Data repository URL</h3>
-        <input type="text" id="repo-url" bind:value={repoUrl} placeholder="git@github.com:MaddyGuthridge/portfolio.git" />
+        <input
+          type="text"
+          id="repo-url"
+          bind:value={repoUrl}
+          placeholder="git@github.com:MaddyGuthridge/portfolio-data.git"
+        />
         <p>
-          It's a good idea to set up a repository to back up your portfolio data.
+          It's a good idea to set up a repository to back up your portfolio
+          data.
           <a
             href="https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository"
-            target="_blank"
-          >Create an empty git repository</a>
+            target="_blank">Create an empty git repository</a
+          >
           and enter the clone URL here. If you want to import existing data, enter
           your existing repository URL here.
         </p>
 
         <h3>Repository branch</h3>
-        <input type="text" id="repo-branch" bind:value={repoBranch} placeholder="main" />
+        <input
+          type="text"
+          id="repo-branch"
+          bind:value={repoBranch}
+          placeholder="main"
+        />
         <p>If you want to use a specific branch, you can enter it above.</p>
 
         <h3>Ready to get started?</h3>
         <input type="submit" id="submit-main" value="Let's go!" />
 
         <h3>Don't want to use a git repo?</h3>
         <p>
-          Using a git repo is a great idea if you want your data to be  safely
+          Using a git repo is a great idea if you want your data to be safely
           backed up. But if you're just testing {consts.APP_NAME}, it's much
           quicker to get started without a git repo.
         </p>
-        <input type="submit" id="submit-no-git" value="I don't want to use git" />
+        <input
+          type="submit"
+          id="submit-no-git"
+          value="I don't want to use git"
+        />
       </form>
     </main>
   </Paper>
 </div>
 
 <!-- Spinner shows while setting up data dir -->
-<Spinner show={showLoading} header="Just a moment..." text="We're setting up your data" />
+<Spinner
+  show={showLoading}
+  header="Just a moment..."
+  text="We're setting up your data"
+/>
 
 <!-- Error shows if error occurs with setup -->
-<Error show={errorText !== ''} header="Oh no!" text={errorText} on:close={() => { errorText = ''; }} />
+<Error
+  show={errorText !== ""}
+  header="Oh no!"
+  text={errorText}
+  on:close={() => {
+    errorText = "";
+  }}
+/>
 
 {#if credentials}
-  <Modal show={true} on:close={() => goto('/')}>
+  <Modal show={true} on:close={() => goto("/")}>
     <h1 slot="header">Your data is set up!</h1>
     <p>This is your login information. Please ensure you do not lose it.</p>
     <!-- TODO: Add copy buttons for convenience -->
@@ -128,7 +158,9 @@
     </p>
     <div class="horizontal">
       Password: <b>{credentials.password}</b>
-      <CopyButton text={credentials.password} hint='Copy password'>Copy</CopyButton>
+      <CopyButton text={credentials.password} hint="Copy password"
+        >Copy</CopyButton
+      >
     </div>
   </Modal>
 {/if}