Merge pull request #25 from gigamaster/i18n

I18n

src/livecodes/UI/icons.ts

@@ -2,7 +2,7 @@ export const run = '<i class="icon-run"></i>';
 // '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M112 111v290c0 17.44 17 28.52 31 20.16l247.9-148.37c12.12-7.25 12.12-26.33 0-33.58L143 90.84c-14-8.36-31 2.72-31 20.16z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/></svg>';
 
 export const checked = '<i class="icon-checked checked"></i>';
- // '<svg xmlns="http://www.w3.org/2000/svg" class="checked" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M352 176L217.6 336 160 272"/><rect x="64" y="64" width="384" height="384" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/></svg>';
+// '<svg xmlns="http://www.w3.org/2000/svg" class="checked" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M352 176L217.6 336 160 272"/><rect x="64" y="64" width="384" height="384" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/></svg>';
 
 export const unchecked = '<i class="icon-unchecked unchecked"></i>';
 // '<svg xmlns="http://www.w3.org/2000/svg" class="unchecked" viewBox="0 0 512 512"><path d="M416 448H96a32.09 32.09 0 01-32-32V96a32.09 32.09 0 0132-32h320a32.09 32.09 0 0132 32v320a32.09 32.09 0 01-32 32z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>';

src/livecodes/UI/login.ts

@@ -72,14 +72,14 @@ export const displayLoggedIn = (user: User) => {
  name: displayName!,
  },
  );
- logOutLink.style.display = 'block';
+ logOutLink.style.display = 'flex';
  }
 };
 
 export const displayLoggedOut = () => {
  const loginLink = getLoginLink();
  if (loginLink) {
- loginLink.style.display = 'block';
+ loginLink.style.display = 'flex';
  }
  const logOutLink = getLogoutLink();
  if (logOutLink) {

src/livecodes/UI/selectors.ts

@@ -107,7 +107,7 @@ export const getSettingToggles = /* @__PURE__ */ () =>
  document.querySelectorAll<HTMLInputElement>('#app-menu-settings input');
 
 export const getCssPresetLinks = /* @__PURE__ */ () =>
-document.querySelectorAll<HTMLAnchorElement>('#css-preset-menu a');
+ document.querySelectorAll<HTMLAnchorElement>('#css-preset-menu a');
 
 export const getAppMenuProjectScroller = /* @__PURE__ */ () =>
  document.querySelector<HTMLElement>('#app-menu-container-project');
@@ -503,7 +503,7 @@ export const getModalWelcomeRecover = /* @__PURE__ */ (
 ) => welcomeContainer.querySelector('#modal #welcome-recover') as HTMLElement;
 
 export const getModalWelcomeScreen = /* @__PURE__ */ (welcomeContainer: HTMLElement) =>
- welcomeContainer.querySelector('#welcome-screen-container') as HTMLElement;
+ welcomeContainer.querySelector('#welcome-screen-container #welcome-start') as HTMLElement;
 
 export const getModalWelcomeRecent = /* @__PURE__ */ (welcomeContainer: HTMLElement) =>
  welcomeContainer.querySelector('#modal #welcome-recent') as HTMLElement;

src/livecodes/UI/share.ts

@@ -3,7 +3,7 @@ import type { createEventsManager } from '../events';
 import { shareScreen } from '../html';
 import type { ShareData } from '../models';
 import { allowedOrigin } from '../services/allowed-origin';
-import { copyToClipboard, getAbsoluteUrl } from '../utils/utils';
+import { copyToClipboard } from '../utils/utils';
 import { generateQrCode } from './qrcode';
 import { getQrCodeContainer } from './selectors';
 
@@ -69,11 +69,10 @@ export const createShareContainer = async (
  link.rel = 'noopener noreferrer';
  link.innerHTML = `
  <span class="share-image-container">
- <img
- src="${getAbsoluteUrl(baseUrl) + 'assets/icons/' + service.icon}"
- alt="${service.name}"
- ${service.name === window.deps.translateString('share.services.twitter', '𝕏 / Twitter') ? 'class="twitter"' : ''}
- />
+ <i class="${service.icon}"
+ alt="${service.name}"
+ ${service.name === window.deps.translateString('share.services.twitter', '𝕏 / Twitter') ? 'class="twitter"' : ''}
+ ></i>
  </span>
  ${service.name}
  `;
@@ -104,93 +103,88 @@ export const createShareContainer = async (
  const services: Service[] = [
  {
  name: window.deps.translateString('share.services.facebook', 'Facebook'),
- icon: 'facebook.svg',
+ icon: 'icon-share-facebook',
  createShareUrl: ({ url }) => `https://www.facebook.com/sharer.php?u=${encode(url)}`,
  },
  {
  name: window.deps.translateString('share.services.twitter', '𝕏 / Twitter'),
- icon: 'x.svg',
+ icon: 'icon-share-x',
  createShareUrl: ({ url, title }) =>
  `https://twitter.com/intent/tweet?url=${encode(url)}&text=${encode(title)}`,
  },
  {
  name: window.deps.translateString('share.services.hackerNews', 'Hacker News'),
- icon: 'hacker-news.svg',
+ icon: 'icon-share-hacker',
  createShareUrl: ({ url, title }) =>
  `https://news.ycombinator.com/submitlink?u=${encode(url)}&t=${encode(title)}`,
  },
  {
  name: window.deps.translateString('share.services.reddit', 'Reddit'),
- icon: 'reddit.svg',
+ icon: 'icon-share-reddit',
  createShareUrl: ({ url, title }) =>
  `https://www.reddit.com/submit?url=${encode(url)}&title=${encode(title)}`,
  },
  {
  name: window.deps.translateString('share.services.linkedIn', 'LinkedIn'),
- icon: 'linkedin.svg',
+ icon: 'icon-share-linkedin',
  createShareUrl: ({ url, title }) =>
  `https://www.linkedin.com/shareArticle?url=${encode(url)}&title=${encode(
  title,
  )}&mini=true&source=LiveCodes`,
  },
  {
  name: window.deps.translateString('share.services.devTo', 'Dev.to'),
- icon: 'dev.svg',
+ icon: 'icon-share-dev',
  createShareUrl: ({ url, title }) =>
  `https://dev.to/new?prefill=${encode(
  '---\ntitle: ' + title + '\npublished: true\ntags: livecodes\n---\n\n\n\n' + url,
  )}`,
  },
  {
  name: window.deps.translateString('share.services.tumblr', 'Tumblr'),
- icon: 'tumblr.svg',
+ icon: 'icon-share-tumblr',
  createShareUrl: ({ url, title }) =>
  `https://www.tumblr.com/share/link?url=${encode(url)}&name=${encode(title)}`,
  },
  {
  name: window.deps.translateString('share.services.pinterest', 'Pinterest'),
- icon: 'pinterest.svg',
+ icon: 'icon-share-pinterest',
  createShareUrl: ({ url, title }) =>
  `https://pinterest.com/pin/create/bookmarklet/?url=${encode(url)}&description=${encode(
  title,
  )}`,
  },
  {
  name: window.deps.translateString('share.services.whatsApp', 'WhatsApp'),
- icon: 'whatsapp.svg',
+ icon: 'icon-share-whatsapp',
  createShareUrl: ({ url, title }) =>
  `https://api.whatsapp.com/send?text=${encode(title)} ${encode(url)}`,
  },
  {
  name: window.deps.translateString('share.services.telegram', 'Telegram'),
- icon: 'telegram.svg',
+ icon: 'icon-share-telegram',
  createShareUrl: ({ url, title }) =>
  `https://t.me/share/url?url=${encode(url)}&text=${encode(title)}`,
  },
  {
  name: window.deps.translateString('share.services.pocket', 'Pocket'),
- icon: 'pocket.svg',
+ icon: 'icon-share-pocket',
  createShareUrl: ({ url, title }) =>
  `https://getpocket.com/save?url=${encode(url)}&title=${encode(title)}`,
  },
  {
  name: window.deps.translateString('share.services.email', 'Email'),
- icon: 'email.svg',
+ icon: 'icon-share-email',
  createShareUrl: ({ url, title }) => `mailto:?subject=${encode(title)}&body=${encode(url)}`,
  },
- /* {
- name: window.deps.translateString('share.services.copyUrl', 'Copy URL'),
- icon: 'copy.svg',
- onClick: ({ url }) => copyUrl(url),
- }, */
  {
  name: window.deps.translateString('share.services.qrCode', 'QR code'),
- icon: 'qr-code.svg',
+ icon: 'icon-share-qr',
  onClick: showQrCode,
  },
  {
  name: window.deps.translateString('share.services.share', 'Share via …'),
- icon: 'share.svg',
+ icon: 'icon-share',
  onClick: ({ url, title }) => navigator.share({ url, title }),
  },
  ];