Support storing to GitHub Gist

apps/repl/app/components/limber/github.gts

@@ -0,0 +1,26 @@
+import { on } from '@ember/modifier';
+
+import { service } from 'ember-primitives';
+
+import type EditorService from 'limber/services/editor';
+
+function getAuth(editor: EditorService) {
+  return editor.auth;
+}
+
+export const GitHubLogin = <template>
+  {{#let (getAuth (service 'editor')) as |auth|}}
+    {{#if auth.isPending}}
+      ...
+    {{else if auth.isAuthenticated}}
+      Logged in
+      <button {{on 'click' auth.logout}}>
+        Logout
+      </button>
+    {{else}}
+      <button {{on 'click' auth.login}}>
+        Login with GitHub
+      </button>
+    {{/if}}
+  {{/let}}
+</template>;

apps/repl/app/components/limber/header.gts

@@ -2,6 +2,7 @@ import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
 
 import ExternalLink from '../external-link';
 import DemoSelect from './demo-select';
+import { GitHubLogin } from './github';
 
 <template>
   <header
@@ -21,6 +22,7 @@ import DemoSelect from './demo-select';
     </h1>
 
     <nav class='text-white mt-1 flex gap-2 items-baseline'>
+      <GitHubLogin />
 
       <DemoSelect />
 

apps/repl/app/routes/application.ts

@@ -2,11 +2,18 @@
 // @ts-ignore
 import { DEBUG } from '@glimmer/env';
 import Route from '@ember/routing/route';
+import { service } from '@ember/service';
 
 import { notInIframe } from 'limber/helpers/in-iframe';
 
+import type EditorService from 'limber/services/editor';
+
 export default class ApplicationRoute extends Route {
+  @service declare editor: EditorService;
+
   async beforeModel() {
+    await this.editor.auth.check();
+
     document.querySelector('#initial-loader')?.remove();
 
     if (DEBUG) {

apps/repl/app/services/editor.ts

@@ -4,6 +4,7 @@ import Service, { inject as service } from '@ember/service';
 
 import { link } from 'ember-resources/link';
 
+import { Auth0 } from 'limber/utils/auth';
 import { FileURIComponent } from 'limber/utils/editor-text';
 
 import type RouterService from '@ember/routing/router-service';
@@ -18,6 +19,7 @@ export default class EditorService extends Service {
   @tracked scrollbarWidth = 0;
 
   @link(FileURIComponent) declare fileURIComponent: FileURIComponent;
+  @link(Auth0) declare auth: Auth0;
 
   @action
   updateText(text: string) {

apps/repl/app/utils/auth.ts

@@ -0,0 +1,72 @@
+import { tracked } from '@glimmer/tracking';
+
+import type { Auth0Client } from '@auth0/auth0-spa-js';
+
+export class Auth0 {
+  #client: Auth0Client | null = null;
+
+  constructor() {
+    this.#setup();
+  }
+
+  @tracked isAuthenticated: boolean | null = null;
+
+  get isPending() {
+    return this.isAuthenticated === null;
+  }
+
+  #setup = async () => {
+    if (this.#client) return this.#client;
+
+    const { createAuth0Client } = await import('@auth0/auth0-spa-js');
+
+    this.#client = await createAuth0Client({
+      domain: 'glimdown.us.auth0.com',
+      clientId: 'QwKnvGVl1KzoVAuBGc8WYSReeNXahvv2',
+    });
+
+    await this.#updateAuthStatus();
+
+    return this.#client;
+  };
+
+  #updateAuthStatus = async () => {
+    if (!this.#client) return;
+
+    let status = await this.#client.isAuthenticated();
+
+    this.isAuthenticated = status;
+
+    return this.isAuthenticated;
+  };
+
+  check = async () => {
+    await this.#setup();
+    await this.#updateAuthStatus();
+  };
+
+  login = async () => {
+    let client = await this.#setup();
+
+    if (this.isAuthenticated) return;
+
+    await client.loginWithPopup();
+    await this.#updateAuthStatus();
+  };
+
+  /**
+   * Auth0 should make this easier...
+   * - https://community.auth0.com/t/is-login-via-auth0-possible-without-reloading-my-spa/18846
+   * - https://community.auth0.com/t/auth0js-logout-without-redirect/23966/2
+   * - https://community.auth0.com/t/how-to-logout-without-reload/100289
+   */
+  logout = async () => {
+    await this.#setup();
+
+    if (!this.isAuthenticated) return;
+
+    document.cookie = '';
+    this.#client = null;
+    await this.#setup();
+  };
+}

apps/repl/config/environment.js

@@ -1,20 +1,6 @@
 'use strict';
 
-const fs = require('fs');
-const path = require('path');
-
-function ref() {
-  const rev = fs.readFileSync(path.join(__dirname, '../../../.git/HEAD')).toString().trim();
-
-  if (rev.indexOf(':') === -1) {
-    return rev;
-  } else {
-    return fs
-      .readFileSync(path.join(__dirname, '../../../.git/' + rev.substring(5)))
-      .toString()
-      .trim();
-  }
-}
+const { refAbbr } = require('@glimdown/app-node-support/git');
 
 module.exports = function (environment) {
   let ENV = {
@@ -34,7 +20,7 @@ module.exports = function (environment) {
     },
 
     APP: {
-      version: `REPL :: ${ref()} :: ${new Date()}`,
+      version: `REPL :: ${refAbbr()} :: ${new Date()}`,
       // Here you can pass flags/options to your application instance
       // when it is created
     },

apps/repl/package.json

@@ -54,6 +54,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@glimdown/app-node-support": "workspace:*",
     "@glint/core": "^1.0.2",
     "@glint/environment-ember-loose": "^1.0.2",
     "@glint/environment-ember-template-imports": "^1.0.2",
@@ -132,6 +133,7 @@
     "extends": "../../package.json"
   },
   "dependencies": {
+    "@auth0/auth0-spa-js": "^2.1.1",
     "@ember/test-waiters": "^3.0.2",
     "@embroider/macros": "1.13.1",
     "@embroider/router": "2.1.3",

packages/app-support/node/.eslintignore

@@ -0,0 +1,7 @@
+dist/
+node_modules/
+tmp/
+vendor/
+public/
+coverage/
+*.ember-try

packages/app-support/node/.eslintrc.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+const { configs } = require('@nullvoxpopuli/eslint-configs');
+
+const config = configs.node();
+
+module.exports = {
+  ...config,
+  overrides: [...config.overrides],
+};

packages/app-support/node/.prettierignore

@@ -0,0 +1,13 @@
+*.yml
+*.yaml
+*.md
+*.json
+renovate.json5
+docs/
+
+node_modules/
+dist/
+public/
+vendor/
+coverage/
+.lint-todo/

packages/app-support/node/.prettierrc.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+module.exports = {
+  printWidth: 100,
+  overrides: [
+    {
+      // Lol, JavaScript
+      files: ['*.js', '*.ts', '*.cjs', '.mjs', '.cts', '.mts', '.cts'],
+      options: {
+        singleQuote: true,
+        trailingComma: 'es5',
+      },
+    },
+    {
+      files: ['*.json'],
+      options: {
+        singleQuote: false,
+      },
+    },
+    {
+      files: ['**/*.hbs'],
+      options: {
+        singleQuote: false,
+      },
+    },
+    {
+      files: ['**/*.gjs', '**/*.gts'],
+      options: {
+        singleQuote: true,
+        trailingComma: 'es5',
+      },
+      plugins: ['prettier-plugin-ember-template-tag'],
+    },
+  ],
+};

packages/app-support/node/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@glimdown/app-node-support",
+  "private": true,
+  "type": "module",
+  "license": "MIT",
+  "author": "NullVoxPopuli",
+  "exports": {
+    "./git": "./src/git.cjs"
+  },
+  "scripts": {
+    "lint:fix": "pnpm -w exec lint fix",
+    "build": "tailwindcss -o dist/tailwind.css",
+    "start": "tailwindcss -o dist/tailwind.css --watch",
+    "lint": "pnpm -w exec lint",
+    "lint:js": "pnpm -w exec lint js",
+    "lint:js:fix": "pnpm -w exec lint js:fix",
+    "lint:prettier:fix": "pnpm -w exec lint prettier:fix",
+    "lint:prettier": "pnpm -w exec lint prettier"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "@nullvoxpopuli/eslint-configs": "^3.2.0",
+    "concurrently": "^8.2.0",
+    "eslint": "^8.45.0",
+    "prettier": "^2.8.8",
+    "prettier-plugin-ember-template-tag": "^1.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NullVoxPopuli/limber.git",
+    "directory": "packages/app-support/node"
+  },
+  "engines": {
+    "node": ">= v16",
+    "npm": "use pnpm",
+    "yarn": "use pnpm"
+  },
+  "volta": {
+    "extends": "../../../package.json"
+  }
+}

packages/app-support/node/src/git.cjs

@@ -0,0 +1,34 @@
+const { spawnSync } = require('child_process');
+
+function currentCommitSHA() {
+  const result = spawnSync('git', ['rev-parse', 'HEAD'], { encoding: 'utf-8' });
+
+  if (result.error) {
+    throw result.error;
+  }
+
+  if (result.status !== 0) {
+    throw new Error(`Git command failed with status ${result.status}: ${result.stderr}`);
+  }
+
+  return result.stdout.trim();
+}
+function currentGitBranch() {
+  const result = spawnSync('git', ['rev-parse', '--abbrev-ref', 'HEAD'], { encoding: 'utf-8' });
+
+  if (result.error) {
+    throw result.error;
+  }
+
+  if (result.status !== 0) {
+    throw new Error(`Git command failed with status ${result.status}: ${result.stderr}`);
+  }
+
+  return result.stdout.trim();
+}
+
+function refAbbr() {
+  return `${currentGitBranch()} :: ${currentCommitSHA()}`;
+}
+
+module.exports = { currentCommitSHA, currentGitBranch, refAbbr };