feat(embed): handle snippet not found

.github/workflows/deploy-code-embed.yml

@@ -19,6 +19,7 @@ jobs:
  EMBED_STYLE_URL: ${{ secrets.EMBED_STYLE_URL }}
  EMBED_JS_URL: ${{ secrets.EMBED_JS_URL }}
  WEB_APP_URL: ${{ secrets.WEB_APP_URL }}
+ WEB_APP_SNIPPET_VIEW_URL: ${{ secrets.WEB_APP_SNIPPET_VIEW_URL }}
  ENV: ${{ secrets.ENV }}
  SENTRY_DSN: ${{ secrets.CODE_EMBED_SENTRY_DSN }}
  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}

apps/functions/code-embed/.env.template

@@ -1,6 +1,7 @@
 DATABASE_URL="mysql:https://root:@127.0.0.1:3311/sharingan"
 EMBED_STYLE_URL=https://cdn.jsdelivr.net/npm/sharingan-embed@latest/style.min.css
 EMBED_JS_URL=https://cdn.jsdelivr.net/npm/sharingan-embed@latest/script.min.js
-WEB_APP_URL=http:https://localhost:7500
 ENV=development
 SENTRY_DSN=
+WEB_APP_URL=http:https://localhost:7500
+WEB_APP_SNIPPET_VIEW_URL=http:https://localhost:7500/snippets

apps/functions/code-embed/serverless.ts

@@ -68,6 +68,7 @@ const serverlessConfiguration: AWS = {
  ENV: '${env:ENV}',
  NODE_OPTIONS: '--stack-trace-limit=1000',
  SENTRY_DSN: '${env:SENTRY_DSN}',
+ WEB_APP_SNIPPET_VIEW_URL: '${env:WEB_APP_SNIPPET_VIEW_URL}',
  WEB_APP_URL: '${env:WEB_APP_URL}',
  },
  name: 'aws',

apps/functions/code-embed/src/functions/renderer/handler.ts

@@ -19,6 +19,8 @@ export const main: Handler<APIGatewayProxyEvent, APIGatewayProxyResult> = async
  options: {
  scriptUrl: process.env.EMBED_JS_URL,
  styleUrl: process.env.EMBED_STYLE_URL,
+ webAppUrl: process.env.WEB_APP_URL,
+ webAppViewUrl: process.env.WEB_APP_SNIPPET_VIEW_URL,
  },
  shiki,
  snippet,

packages/embed/.env.template

@@ -2,3 +2,4 @@ DATABASE_URL="mysql:https://root:@127.0.0.1:3311/sharingan"
 EMBED_STYLE_URL=http:https://localhost:7502/sharingan/style.css
 EMBED_JS_URL=http:https://localhost:7502/sharingan/script.js
 WEB_APP_URL=http:https://localhost:7500
+WEB_APP_SNIPPET_VIEW_URL=http:https://localhost:7500/snippets

packages/embed/env.d.ts

@@ -3,6 +3,7 @@ export type EnvironmentVariables = {
  EMBED_JS_URL: string;
  EMBED_STYLE_URL: string;
  WEB_APP_URL: string;
+ WEB_APP_SNIPPET_VIEW_URL: string;
 };
 
 declare global {

packages/embed/src/renderer/content/preview-template.ts

@@ -1,6 +1,6 @@
 import { generateRandomString } from './utils';
 
-type Args = {
+export type Args = {
  code: string;
  color?: string;
  rawCode: string;

packages/embed/src/renderer/content/tests/html-generator.test.ts

@@ -1,5 +1,19 @@
+import { generateNoSnippetHtmlContent } from '../html-generator';
+
 describe('Test HTML generator functions', () => {
- it('should generates html content for a non existing code snippet', () => {});
+ it.only('should generates html content for a non existing code snippet', () => {
+ // GIVEN
+ const WEB_APP_URL = 'https://sharingan.dev';
+
+ // WHEN
+ const result = generateNoSnippetHtmlContent(WEB_APP_URL);
 
- it('should generates html content for a code snippet', () => {});
+ // THEN
+ expect(result).toMatchInlineSnapshot(`
+ "<div class="no-content">
+ <h3>Oops! Snippet not found!</h3>
+ <div>Go to <a href="https://sharingan.dev" target="_blank">Sharingan</a> to ensure it exists and is accessible</div>
+ </div>"
+ `);
+ });
 });

packages/embed/src/renderer/content/tests/preview-template.test.ts

@@ -1,5 +1,74 @@
+import { Args, generateHTMLPreview } from '../preview-template';
+
 describe('Test generateHTMLPreview()', () => {
- it('should generates the html preview for a non existing code snippet', () => {});
+ it('should generates the html preview for a code snippet', () => {
+ // GIVEN
+ const args: Args = {
+ code:
+ '<span class="line">export const hashPassword = (password: string): string => {</span>\n' +
+ '<span class="line"> const SALT_ROUNDS = 10;</span>\n' +
+ '<span class="line"></span>\n' +
+ '<span class="line"> return bcrypt.hashSync(password, SALT_ROUNDS);</span>\n' +
+ '<span class="line">};</span>',
+ color: '#f5f5f5',
+ rawCode:
+ 'export const hashPassword = (password: string): string => {\n' +
+ ' const SALT_ROUNDS = 10;\n' +
+ '\n' +
+ ' return bcrypt.hashSync(password, SALT_ROUNDS);\n' +
+ '};',
+ scriptUrl: 'https://cdn.com/sharigan/script.js',
+ styleUrl: 'https://cdn.com/sharigan/style.css',
+ title: 'helpers.ts',
+ webAppUrl: 'https://sharingan.dev',
+ };
+
+ // WHEN
+ const result = generateHTMLPreview(args);
+
+ // THEN
+ expect(result).toMatchInlineSnapshot(`
+ "
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="robots" content="noindex,">
+ <title>Sharingan - helpers.ts</title>
+ <link rel="stylesheet" type="text/css" href="https://cdn.com/sharigan/style.css" />
+ </head>
+ <body data-id="4D3Wsb">
+ <div class="ctner">
+ <div class="ctner-header">
+ <div>helpers.ts</div>
+ <div>view on <a href="https://sharingan.dev" target="_blank">Sharingan</a></div>
+ </div>
+ <textarea id="raw-code-4D3Wsb" class="hidden" rows="1" cols="1">export const hashPassword = (password: string): string => {
+ const SALT_ROUNDS = 10;
 
- it('should generates the html preview for a code snippet', () => {});
+ return bcrypt.hashSync(password, SALT_ROUNDS);
+ };</textarea>
+ <div class="code-editor-container" id="code-4D3Wsb" style="border: solid 1px #f5f5f5; background-color: #f5f5f5">
+ <button id="btn-copy-4D3Wsb" class="btn-copy hidden" style="">
+ <svg class="ic show" id="ic-copy-4D3Wsb" fill="none" stroke="#fff" viewBox="0 0 24 24" xmlns="http:https://www.w3.org/2000/svg">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+ </svg>
+ <svg class="ic hidden" id="ic-copied-4D3Wsb" fill="none" stroke="#10B981" viewBox="0 0 24 24" xmlns="http:https://www.w3.org/2000/svg">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+ </svg>
+ </button>
+ <pre><span class="line">export const hashPassword = (password: string): string => {</span>
+ <span class="line"> const SALT_ROUNDS = 10;</span>
+ <span class="line"></span>
+ <span class="line"> return bcrypt.hashSync(password, SALT_ROUNDS);</span>
+ <span class="line">};</span></pre>
+ </div>
+ </div>
+ <script type="text/javascript" src="https://cdn.com/sharigan/script.js"></script>
+ </body>
+ </html>
+ "
+ `);
+ });
 });

packages/embed/src/renderer/content/tests/utils.test.ts

@@ -1,4 +1,4 @@
-import { addWhitespaceForEmptyLine, generateLineHighlightOptions } from '../utils';
+import { addWhitespaceForEmptyLine, generateLineHighlightOptions, parseHTMLSnippetCode } from '../utils';
 
 describe('Test utils functions', () => {
  describe('Test addWhitespaceForEmptyLine()', () => {
@@ -36,7 +36,7 @@ describe('Test utils functions', () => {
  });
  });
 
- describe.only('Test generateLineHighlightOptions()', () => {
+ describe('Test generateLineHighlightOptions()', () => {
  it('should generate no line highlight options from a null string', () => {
  // GIVEN
  const lineHighlight: string | null = null;
@@ -77,5 +77,18 @@ describe('Test utils functions', () => {
  });
  });
 
- describe('Test parseHTMLSnippetCode()', () => {});
+ describe('Test parseHTMLSnippetCode()', () => {
+ it('should parse html snippet code', () => {
+ // GIVEN
+ const htmlCode = `<pre class="shiki" style="background-color: #ffffff"><span class="line">line code 1</span>\n<span class="line"></span>\n<span class="line">line code 3</span></pre>`;
+
+ // WHEN
+ const result = parseHTMLSnippetCode(htmlCode);
+
+ // THEN
+ expect(result).toEqual(
+ `<span class='line-number'>1</span><span class="line">line code 1</span>\n<span class='line-number'>2</span><span class="line">&nbsp;&nbsp;</span>\n<span class='line-number'>3</span><span class="line">line code 3</span>`,
+ );
+ });
+ });
 });

packages/embed/src/renderer/index.ts

@@ -9,6 +9,7 @@ type Args = {
  scriptUrl: string;
  styleUrl: string;
  webAppUrl: string;
+ webAppViewUrl: string;
  };
  shiki: Shiki;
  snippet: Snippet | null;
@@ -18,6 +19,7 @@ export const renderSnippetToHtml = async ({ options, shiki, snippet }: Args): Pr
  const STYLE_URL = options.styleUrl;
  const SCRIPT_URL = options.scriptUrl;
  const WEBAPP_URL = options.webAppUrl;
+ const WEBAPP_VIEW_URL = options.webAppViewUrl;
 
  if (!snippet) {
  const code = generateNoSnippetHtmlContent(WEBAPP_URL);
@@ -41,6 +43,6 @@ export const renderSnippetToHtml = async ({ options, shiki, snippet }: Args): Pr
  scriptUrl: SCRIPT_URL,
  styleUrl: STYLE_URL,
  title: snippet.name,
- webAppUrl: WEBAPP_URL,
+ webAppUrl: `${WEBAPP_VIEW_URL}/${snippet.id}`,
  });
 };

packages/embed/src/server/index.ts

@@ -36,6 +36,7 @@ export const startServer = async () => {
  scriptUrl: process.env.EMBED_JS_URL,
  styleUrl: process.env.EMBED_STYLE_URL,
  webAppUrl: process.env.WEB_APP_URL,
+ webAppViewUrl: process.env.WEB_APP_SNIPPET_VIEW_URL,
  },
  shiki,
  snippet,