Altrim Beqiri

import "@johnlindquist/kit";

// Menu: Code Snippets
// Description: Easily organize your code snippets
// Author: Altrim Beqiri
// Twitter: @altrimbeqiri

import "@johnlindquist/kit";

const wrapCode = (html: string) => `<pre class="px-4">
<style type="text/css">
  code {
    font-size: 0.75rem !important;
    width: 100%;
    white-space: pre-wrap;
  }
  pre {
    display: flex;
  }
  p {
    margin-bottom: 1rem;
  }
</style>
  <code>
${html.trim()}
  </code>
</pre>`;

const highlightCode = async ({ contents, language }): Promise<string> => {
  const { default: highlight } = await npm("highlight.js");
  let highlightedContents = language
    ? highlight.highlight(contents, { language }).value
    : highlight.highlightAuto(contents).value;

  return wrapCode(highlightedContents);
};

interface Snippet {
  id: string;
  name: string;
  description?: string;
  language?: string;
  html?: any;
  code?: any;
  preview?: any;
}

const { snippets, write }: { snippets: Snippet[]; write: any } = await db("code-snippets-db", {
  snippets: [],
});

const onNoChoices = async (input) => {
  if (input) {
    setPanel(
      md(`## Creating snippet <code>${input}</code>
    
Creates a new code snippet with the contents of the clipboard.`)
    );
  } else {
    setPlaceholder(`Enter a snippet name`);
  }
};

const onChoices = async () => {
  setPanel(``);
};

const loadSnippets = async () => {
  try {
    return snippets.map((snippet) => {
      snippet.preview = async () => {
        if (snippet?.code) {
          return await highlightCode({ contents: snippet?.code, language: snippet?.language });
        }

        return "";
      };

      return snippet;
    });
  } catch (error) {
    return [error.message];
  }
};

const config = {
  placeholder: "Set snippet name",
  strict: false,
  onChoices,
  onNoChoices,
  flags: {
    rename: {
      name: "Description",
      description: "Set a description for the selected script",
    },
    language: {
      name: "Language",
      description: "Set code language for the selected script",
    },
  },
};

const addSnippet = async () => {
  const snippet: Snippet | string = await arg(config, await loadSnippets());

  if (typeof snippet === "string") {
    const clipboard = await paste();

    snippets.push({
      id: uuid(),
      name: snippet,
      code: clipboard.trim(),
    });

    await write();
    await addSnippet();
  } else if (snippet?.id) {
    const foundSnippet = snippets.find((s) => s?.id === snippet.id);

    if (flag?.rename) {
      const description = await arg("Enter Description");
      foundSnippet.description = description;
      await write();
      await addSnippet();
    }

    if (flag?.language) {
      const language = await arg("Enter Code Language");
      foundSnippet.language = language;
      await write();
      await addSnippet();
    }

    await setSelectedText(foundSnippet.code);
  }
};

const removeSnippet = async () => {
  const snippet: Snippet = await arg("Remove snippet", snippets);
  const index = snippets.findIndex((s) => s?.id === snippet.id);
  if (index > -1) {
    snippets.splice(index, 1);
  }
  await write();
  await removeSnippet();
};

onTab("Snippets", addSnippet);
onTab("Remove", removeSnippet);

import "@johnlindquist/kit";
// Menu: Translate Image
// Description: Translate text extracted from a selected image
// Author: Altrim Beqiri
// Twitter: @altrimbeqiri

const vision = await npm("@google-cloud/vision");
const gtranslate = await npm("@google-cloud/translate");
const { Translate } = gtranslate.v2;

const client = new vision.ImageAnnotatorClient();
const translate = new Translate();

const extractText = async (): Promise<string> => {
  const file = await getSelectedFile();
  const [result] = await client.textDetection(file);
  return result.fullTextAnnotation.text;
};

const translateText = async (text: string) => {
  let [translations] = await translate.translate(text, "en");
  translations = Array.isArray(translations) ? translations : [translations];
  return translations.join(" ");
};

div(md("Extracting and Translating..."));
const text = await extractText();
const translation = await translateText(text);

show(
  `
<div>
  <div class="max-w-2xl mx-auto sm:px-6 lg:px-8 text-gray-800 bg-white">
    <div class="overflow-hidden shadow-md">
      <div class="px-6 py-4 border-b border-gray-200 font-bold">Extracted Text</div>
      <div class="p-6 border-b border-gray-200">${text}</div>
    </div>
  </div>

  <div class="max-w-2xl mx-auto sm:px-6 lg:px-8 text-gray-800 bg-white">
    <div class="overflow-hidden shadow-md">
      <div class="px-6 py-4 border-b border-gray-200 font-bold">Translation</div>
      <div class="p-6 border-b border-gray-200">${translation}</div>
    </div>
  </div>
</div>

`,
  { width: 640, height: 420, transparent: true }
);