docs: add playground and github links on the first page

umaranis · Dec 1, 2024 · ed70df8 · ed70df8
1 parent ce7c3f5
commit ed70df8
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 5 deletions.
diff --git a/packages/svelte-lexical/src/routes/+page.svelte b/packages/svelte-lexical/src/routes/+page.svelte
@@ -1,17 +1,24 @@
 <script>
   import RichTextComposer from './RichTextComposer.svelte';
   import '../global.css';
+  import GitHubButton from './GitHubButton.svelte';
+  import PlaygroundButton from './PlaygroundButton.svelte';
 </script>
 
 <main>
   <img src="images/logo.svg" alt="Svelte Lexical!" />
   <p>
-    Welcome to <a href="https://github.com/umaranis/svelte-lexical/">
-      svelte-lexical
-    </a>
-    demo built using
-    <a href="https://kit.svelte.dev">SvelteKit</a>
+    Welcome to <span class="emp-sl">Svelte-Lexical</span>
+    , a rich text editor for
+    <span class="emp-svelte">Svelte</span>
+    and
+    <span class="emp-svelte">SvelteKit</span>
+    .
   </p>
+  <div style="margin-top: 5em">
+    <PlaygroundButton />
+    <GitHubButton />
+  </div>
   <div style="text-align: left;">
     <RichTextComposer />
   </div>
@@ -32,4 +39,20 @@
     margin: 2em;
     max-width: 800px;
   }
+
+  .emp-sl {
+    font-size: 1em;
+    background-color: #fb8500; /*#ff6600; */
+    color: white;
+    padding: 0.2em 0.2em;
+    border-radius: 0.2em;
+  }
+
+  .emp-svelte {
+    font-size: 1em;
+    background-color: #219ebc;
+    color: white;
+    padding: 0.2em 0.2em;
+    border-radius: 0.2em;
+  }
 </style>
diff --git a/packages/svelte-lexical/src/routes/GitHubButton.svelte b/packages/svelte-lexical/src/routes/GitHubButton.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import './button.css';
+</script>
+
+<a type="button" class="btn" href="https://github.com/umaranis/svelte-lexical">
+  <svg
+    class="btn-icon"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20">
+    <path
+      fill-rule="evenodd"
+      d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
+      clip-rule="evenodd" />
+  </svg>
+  Star on GitHub
+</a>
+
+<style>
+  a {
+    --bk-color: rgb(36 41 47);
+    --color: rgb(255 255 255);
+    --hover-bk-color: rgb(36 41 47 / 0.8);
+  }
+</style>
diff --git a/packages/svelte-lexical/src/routes/PlaygroundButton.svelte b/packages/svelte-lexical/src/routes/PlaygroundButton.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import './button.css';
+</script>
+
+<a class="btn" href="https://svelte-lexical-playground.vercel.app/">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="btn-icon"
+    viewBox="0 0 100.054 99.999">
+    <path
+      fill="#EBEEEF"
+      d="M100.032 59.967s-.01-1.188-2.021-2.002c-8.553-4.242-42.326-20.5-42.326-20.5c-1.232-.616-2.229-.616-3.461 0L1.997 62.111c-2.01.64-1.981 1.974-1.981 1.974c-.021.008-.02 8.983 0 8.979c0 0 .034 1.215 2.021 1.91c8.546 3.845 42.265 19.564 42.265 19.564c1.231.614 2.229.614 3.461 0c0 0 40.562-19.354 50.223-23.727c1.949-.666 2.047-1.926 2.047-1.926c.024.012.031-8.911-.001-8.918z" />
+    <path
+      fill="#34495E"
+      d="M30.514 60.747c4.684-2.346 12.275-2.346 16.96 0c4.684 2.344 4.684 6.146 0 8.488c-4.685 2.346-12.276 2.346-16.96 0c-4.683-2.343-4.683-6.145 0-8.488zm23-10c4.685-2.345 12.275-2.345 16.96 0c4.684 2.344 4.684 6.146 0 8.488c-4.685 2.346-12.275 2.346-16.96 0c-4.683-2.343-4.683-6.145 0-8.488z" />
+    <path
+      fill="#C0392C"
+      d="M55.638 49.31c3.514-1.758 9.207-1.758 12.721 0c1.625.814 2.498-.138 2.619.928c.018.161.02 3.322.004 3.482c-.106 1.075-.98 2.136-2.623 2.957c-3.514 1.758-9.207 1.758-12.721 0c-1.599-.8-2.469-1.826-2.613-2.871c-.021-.156-.024-3.312-.016-3.467c.075-1.101.951-.19 2.629-1.029z" />
+    <path
+      fill="#E74C3C"
+      d="M55.638 47.31c3.514-1.758 9.207-1.758 12.721 0c3.512 1.758 3.512 4.608 0 6.367c-3.514 1.758-9.207 1.758-12.721 0c-3.513-1.759-3.513-4.609 0-6.367z" />
+    <path
+      fill="#95A5A6"
+      d="M32.638 59.31c3.513-1.758 9.208-1.758 12.72 0c3.513 1.758 3.513 5.608 0 7.367c-3.512 1.758-9.207 1.758-12.72 0c-3.513-1.759-3.513-5.61 0-7.367z" />
+    <path
+      fill="#34495E"
+      d="M35.01 25v37c0 1.104 1.791 2 4 2s4-.896 4-2V25h-8z" />
+    <path
+      fill="#2C3E50"
+      d="M35.01 31.444c1.274.353 2.612.556 4 .556c1.387 0 2.725-.204 4-.556v-6.443h-8v6.443z" />
+    <path
+      fill="#E74C3C"
+      d="M39.01 0c8.284 0 15 6.716 15 15s-6.716 15-15 15s-15-6.716-15-15s6.716-15 15-15z" />
+    <path
+      fill="#C0392C"
+      d="M27.01 12c0-3.376 1.129-6.481 3.012-8.988C26.378 5.749 24.01 10.093 24.01 15c0 8.284 6.716 15 15 15c4.908 0 9.251-2.368 11.986-6.012A14.903 14.903 0 0 1 42.01 27c-8.284 0-15-6.716-15-15z" />
+    <path
+      fill="#BDC3C7"
+      d="M100.032 68.886s-.099 1.26-2.047 1.926c-9.66 4.371-50.224 23.726-50.224 23.726c-1.232.615-2.229.615-3.461 0c0 0-33.719-15.718-42.265-19.562c-1.987-.694-2.021-1.91-2.021-1.91c-.006.001-.01-.856-.012-2.039c-.006 2.642-.001 7.041.012 7.039c0 0 .034 1.216 2.021 1.91c8.548 3.843 42.267 19.562 42.267 19.562c1.231.614 2.229.614 3.461 0c0 0 40.562-19.354 50.223-23.727c1.949-.666 2.047-1.926 2.047-1.926c.02.008.025-4.646.02-7.231c-.007 1.281-.013 2.236-.021 2.232z" />
+    <path
+      fill="#D4D7DA"
+      d="M100.029 59.916c-.021.149-.227 1.272-2.043 1.896c-9.66 4.371-50.223 23.726-50.223 23.726c-1.232.615-2.229.615-3.461 0c0 0-33.718-15.718-42.265-19.562c-1.959-.685-2.02-1.869-2.021-1.903v.014c-.021.006-.02 8.983 0 8.979c0 0 .034 1.216 2.021 1.91c8.546 3.843 42.265 19.562 42.265 19.562c1.231.614 2.229.614 3.461 0c0 0 40.562-19.354 50.223-23.727c1.949-.666 2.047-1.926 2.047-1.926c.024.012.031-8.912 0-8.918l-.004-.051z" />
+    <path
+      fill="#BDC3C7"
+      d="M44.302 85.538S10.584 69.819 2.037 65.976C.078 65.289.017 64.107.016 64.073v.014c-.021.008-.02 8.983 0 8.979c0 0 .034 1.216 2.021 1.91c8.546 3.843 42.265 19.562 42.265 19.562c.615.307 1.173.461 1.73.461v-9c-.557 0-1.115-.154-1.73-.461z" />
+    <path
+      fill="#95A5A6"
+      d="M44.302 94.538S10.584 78.819 2.037 74.976C.05 74.282.016 73.066.016 73.066c-.006.001-.01-.854-.012-2.039c-.006 2.642-.001 7.041.012 7.039c0 0 .034 1.216 2.021 1.91c8.546 3.843 42.265 19.562 42.265 19.562c.616.308 1.173.461 1.73.461v-5c-.557 0-1.115-.154-1.73-.461z" />
+  </svg>
+  Visit Playground
+</a>
+
+<style>
+</style>
diff --git a/packages/svelte-lexical/src/routes/button.css b/packages/svelte-lexical/src/routes/button.css
@@ -0,0 +1,36 @@
+.btn {
+  --color: rgb(17 24 39);
+  --bk-color: rgb(255 255 255);
+  --hover-bk-color: rgb(243 244 246);
+  box-sizing: border-box;
+  border-style: solid;
+  border-color: #e5e7eb;
+  margin-inline-end: 0.5rem;
+  margin-bottom: 0.5rem;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-color: rgb(229 231 235 / 1);
+  background-color: var(--bk-color);
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  color: var(--color);
+  text-decoration: none;
+}
+
+.btn:hover {
+  background-color: var(--hover-bk-color);
+}
+
+.btn-icon {
+  margin-inline-end: 0.5rem;
+  height: 1rem;
+  width: 1rem;
+}