💄 Add PrismJS and create homepage with example

2025-08-03 13:48:09 +02:00 · 2021-05-21 17:51:51 +02:00 · 2021-05-21 17:51:51 +02:00 · 6d94d43d67
commit 6d94d43d67
parent fa27b2f9a2
4 changed files with 162 additions and 0 deletions
--- a/app/package.json
+++ b/app/package.json
@ -10,6 +10,7 @@
  },
  "devDependencies": {
    "@sveltejs/kit": "next",
+    "@types/prismjs": "^1.16.5",
    "@typescript-eslint/eslint-plugin": "^4.19.0",
    "@typescript-eslint/parser": "^4.19.0",
    "autoprefixer": "^10.2.5",
@ -32,6 +33,7 @@
    "@fontsource/fira-mono": "^4.3.0",
    "@fontsource/inter": "^4.3.0",
    "clsx": "^1.1.1",
+    "prismjs": "^1.23.0",
    "svelte-kit-auth": "link:../"
  }
 }
--- a/app/src/routes/__layout.svelte
+++ b/app/src/routes/__layout.svelte
@ -21,6 +21,7 @@
    "p-4",
    "items-center",
    "shadow-md",
+    "bg-white",
  )}
 >
  <a href="/" class={clsx("flex", "items-center", "space-x-2")}>
@ -179,3 +180,19 @@
 >
  <slot />
 </main>
+
+<footer
+  class={clsx(
+    "p-4",
+    "md:p-8",
+    "shadow-2xl",
+    "w-full",
+    "flex",
+    "items-center",
+    "flex-col",
+    "bg-orange-600",
+    "text-white"
+  )}
+>
+  <span>© RaviAnand M, 2021</span>
+</footer>
--- a/app/src/routes/index.svelte
+++ b/app/src/routes/index.svelte
@ -0,0 +1,100 @@
+<script context="module">
+  import { dev } from "$app/env";
+  import clsx from "clsx";
+  import Prism from "prismjs";
+  import { onMount } from "svelte";
+  import "prismjs/plugins/toolbar/prism-toolbar.css";
+  import "prismjs/themes/prism-tomorrow.css";
+  import "clipboard";
+
+  export const hydrate = dev;
+</script>
+
+<script lang="ts">
+  const code = `export const appAuth = new SvelteKitAuth({
+  providers: [
+    new GoogleOAuthProvider({
+      clientId: import.meta.env.VITE_GOOGLE_OAUTH_CLIENT_ID,
+      clientSecret: import.meta.env.VITE_GOOGLE_OAUTH_CLIENT_SECRET,
+      profile(profile) {
+        return { ...profile, provider: "google" };
+      },
+    }),
+  ],
+  callbacks: {
+    jwt(token, profile) {
+      if (profile?.provider) {
+        const { provider, ...account } = profile;
+        token = {
+          ...token,
+          user: {
+            ...token.user,
+            connections: { [provider]: account },
+          },
+        };
+      }
+
+      return token;
+    },
+  },
+  jwtSecret: import.meta.env.JWT_SECRET_KEY,
+});`;
+
+  onMount(async () => {
+    await import("prismjs/components/prism-clike");
+    await import("prismjs/components/prism-javascript");
+    await import("prismjs/components/prism-typescript");
+    Prism.highlightAll();
+  });
+</script>
+
+<div class={clsx("flex", "justify-center", "items-center", "p-6", "md:p-12", "mb-6", "md:mb-12")}>
+  <img src="/logo.svg" class="h-36 md:h-48" alt="" />
+  <div class={clsx("space-y-6")}>
+    <h1 class={clsx("text-center", "text-5xl", "md:text-6xl", "lg:text-7xl", "font-bold")}>
+      SvelteKitAuth
+    </h1>
+    <p class={clsx("text-center", "text-xl")}>
+      Authentication built from the ground up for SvelteKit.
+    </p>
+  </div>
+</div>
+
+<div class={clsx("flex", "justify-between", "mb-6", "md:mb-12")}>
+  <div class={clsx("flex-1", "p-4")}>
+    <p class={clsx("font-bold", "text-xl", "text-center", "mb-6")}>Easy</p>
+    <ul class={clsx("text-center", "space-y-2")}>
+      <ol>Supports OAuth and credential login out of the box</ol>
+      <ol>Works with SvelteKit and Vite</ol>
+      <ol>Easily extensible with alternative providers</ol>
+      <ol>Build dynamic login screens and fetch sessions using client helpers within minutes</ol>
+    </ul>
+  </div>
+  <div class={clsx("flex-1", "p-4")}>
+    <p class={clsx("font-bold", "text-xl", "text-center", "mb-6")}>Flexible</p>
+    <ul class={clsx("text-center", "space-y-2")}>
+      <ol>Add new providers in minutes with class-based architecture</ol>
+      <ol>Connect to a custom backend with callbacks</ol>
+      <ol>Transform the session and JWT as you like using hooks</ol>
+      <ol>Fetch additional account information after the initial sign-on</ol>
+    </ul>
+  </div>
+  <div class={clsx("flex-1", "p-4")}>
+    <p class={clsx("font-bold", "text-xl", "text-center", "mb-6")}>Secure</p>
+    <ul class={clsx("text-center", "space-y-2")}>
+      <ol>Uses signed JWT and HTTP-only cookies for secure sessions</ol>
+      <ol>Allows you to manually sign and secure JWTs using an object-oriented approach</ol>
+      <ol>Replay and state validation with supporting providers</ol>
+      <ol>CSRF token validation</ol>
+    </ul>
+  </div>
+</div>
+
+<p class={clsx("text-2xl", "text-center", "mb-2")}>Dead-Simple Authentication in Minutes!</p>
+<p class={clsx("text-lg", "text-center", "mb-6")}>Test it out for yourself <a href="/login" class={clsx("hover:text-orange-500", "transition-colors")}>here</a>.</p>
+
+<pre class="language-ts">
+  <code class="language-ts">
+    {code}
+  </code>
+</pre>
--- a/app/yarn.lock
+++ b/app/yarn.lock
@ -135,6 +135,11 @@
  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==

+"@types/prismjs@^1.16.5":
+  version "1.16.5"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.16.5.tgz#378f491ff02304ce50924b05283111d4a286ecba"
+  integrity sha512-nSU7U6FQDJJCraFNwaHmH5YDsd/VA9rTnJ7B7AGFdn+m+VSt3FjLWN7+AbqxZ67dbFazqtrDFUto3HK4ljrHIg==
+
 "@types/pug@^2.0.4":
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.4.tgz#8772fcd0418e3cd2cc171555d73007415051f4b2"
@ -445,6 +450,15 @@ chokidar@^3.5.1:
  optionalDependencies:
    fsevents "~2.3.1"

+clipboard@^2.0.0:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
+  integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 clsx@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
@ -671,6 +685,11 @@ defined@^1.0.0:
  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=

+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 detect-indent@^6.0.0:
  version "6.0.0"
  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
@ -1072,6 +1091,13 @@ globby@^11.0.1:
    merge2 "^1.3.0"
    slash "^3.0.0"

+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+  dependencies:
+    delegate "^3.1.2"
+
 graceful-fs@^4.1.6, graceful-fs@^4.2.0:
  version "4.2.6"
  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
@ -1900,6 +1926,13 @@ pretty-hrtime@^1.0.3:
  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=

+prismjs@^1.23.0:
+  version "1.23.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
+  integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
+  optionalDependencies:
+    clipboard "^2.0.0"
+
 progress@^2.0.0:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
@ -2026,6 +2059,11 @@ safe-buffer@^5.0.1:
  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==

+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+
 semver@^5.6.0:
  version "5.7.1"
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@ -2238,6 +2276,11 @@ timsort@^0.3.0:
  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=

+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 to-regex-range@^5.0.1:
  version "5.0.1"
  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"