[pull] main from elk-zone:main

CONTRIBUTING.md

@@ -6,7 +6,7 @@ Refer also to https://github.com/antfu/contribute.
 
 For guidelines on contributing to the documentation, refer to the [docs README](./docs/README.md).
 
-### Local Setup
+## Local Setup
 
 To develop and test the Elk package:
 
@@ -35,15 +35,15 @@ ni
 nr dev
 ```
 
-### Testing
+## Testing
 
 Elk uses [Vitest](https://vitest.dev). You can run the test suite with:
 
 ```
 nr test
 ```
 
-### Running PWA on dev server
+## Running PWA on dev server
 
 In order to run Elk with PWA enabled, run `pnpm dev:pwa` in Elk's root folder to start dev server or `pnpm dev:mocked:pwa` to start dev server with `@elkdev@universeodon.com` user.
 
@@ -141,25 +141,26 @@ Additionally, Elk will use [compact notation for numbers](https://developer.mozi
 
 You can run this code in your browser console to see how it works:
 ```ts
+/* eslint-disable no-unexpected-multiline, no-sequences */
 [1, 12, 123, 1234, 12345, 123456, 1234567].forEach((n) => {
   const acc = {}
 
-  Array.from(['en-US', 'en-GB', 'de-DE', 'zh-CN', 'ja-JP', 'es-ES', 'fr-FR', 'cs-CZ', 'ar-EG']).forEach((l) => {
-    const nf = new Intl.NumberFormat(l, {
-      style: 'decimal',
-      maximumFractionDigits: 0,
+    ['en-US', 'en-GB', 'de-DE', 'zh-CN', 'ja-JP', 'es-ES', 'fr-FR', 'cs-CZ', 'ar-EG'].forEach((l) => {
+      const nf = new Intl.NumberFormat(l, {
+        style: 'decimal',
+        maximumFractionDigits: 0,
+      })
+      const nf2 = new Intl.NumberFormat(l, {
+        notation: 'compact',
+        compactDisplay: 'short',
+        maximumFractionDigits: 1,
+      })
+      acc[l] = {
+        number: n,
+        format: nf.format(n),
+        compact: nf2.format(n),
+      }
     })
-    const nf2 = new Intl.NumberFormat(l, {
-      notation: 'compact',
-      compactDisplay: 'short',
-      maximumFractionDigits: 1,
-    })
-    acc[l] = {
-      number: n,
-      format: nf.format(n),
-      compact: nf2.format(n),
-    }
-  })
   console.table(acc)
 })
 ```

README.md

@@ -149,7 +149,7 @@ You can consult the [PWA documentation](https://docs.elk.zone/pwa) to learn more
 ## 👨‍💻 Contributors
 
 <a href="https://github.com/elk-zone/elk/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=elk-zone/elk" />
+  <img src="https://contrib.rocks/image?repo=elk-zone/elk" alt="list of contributors icons" />
 </a>
 
 ## 📄 License

app/components/common/CommonTabs.vue

@@ -19,8 +19,10 @@ const tabs = computed(() => {
   })
 })
 
+const INVALID_NAME_REGEX = /[^a-z0-9]/gi
+
 function toValidName(option: string) {
-  return option.toLowerCase().replace(/[^a-z0-9]/gi, '-')
+  return option.toLowerCase().replace(INVALID_NAME_REGEX, '-')
 }
 
 useCommands(() => command

app/components/common/CommonTrendingCharts.vue

@@ -15,7 +15,7 @@ const {
 const historyNum = computed(() => {
   if (!history)
     return [1, 1, 1, 1, 1, 1, 1]
-  return [...history].reverse().map(item => Number(item.accounts) || 0)
+  return history.toReversed().map(item => Number(item.accounts) || 0)
 })
 
 const sparklineEl = ref<SVGSVGElement>()

app/components/content/ContentCode.vue

@@ -4,7 +4,11 @@ const { code, lang } = defineProps<{
   lang?: string
 }>()
 
-const raw = computed(() => decodeURIComponent(code).replace(/&#39;/g, '\''))
+const APOSTROPHE_REGEX = /&#39;/g
+
+const raw = computed(() =>
+  decodeURIComponent(code).replace(APOSTROPHE_REGEX, '\''),
+)
 
 const langMap: Record<string, string> = {
   js: 'javascript',

app/components/emoji/Emoji.vue

@@ -5,15 +5,18 @@ const { alt, dataEmojiId } = defineProps<{
   dataEmojiId?: string
 }>()
 
+const COLON_REGEX = /:/g
+const UNDERSCORE_REGEX = /_/g
+
 const title = ref<string | undefined>()
 
 if (alt) {
   if (alt.startsWith(':')) {
-    title.value = alt.replace(/:/g, '')
+    title.value = alt.replace(COLON_REGEX, '')
   }
   else {
     import('node-emoji').then(({ find }) => {
-      title.value = find(alt)?.key.replace(/_/g, ' ')
+      title.value = find(alt)?.key.replace(UNDERSCORE_REGEX, ' ')
     })
   }
 }

app/components/publish/PublishWidget.vue

@@ -209,17 +209,17 @@ function getDatetimeInputFormat(time: Date) {
   return `${year}-${month}-${day}T${hours}:${minutes}`
 }
 
+// taken from https://github.com/mastodon/mastodon/blob/07f8b4d1b19f734d04e69daeb4c3421ef9767aac/app/lib/text_formatter.rb
+const linkRegex = /(https?:\/\/|xmpp:)\S+/g
+
+// taken from https://github.com/mastodon/mastodon/blob/af578e/app/javascript/mastodon/features/compose/util/counter.js
+const countableMentionRegex = /(^|[^/\w])@((\w+)@[a-z0-9.-]+[a-z0-9])/gi
+
 const characterCount = computed(() => {
   const text = htmlToText(editor.value?.getHTML() || '')
 
   let length = stringLength(text)
 
-  // taken from https://github.com/mastodon/mastodon/blob/07f8b4d1b19f734d04e69daeb4c3421ef9767aac/app/lib/text_formatter.rb
-  const linkRegex = /(https?:\/\/|xmpp:)\S+/g
-
-  // taken from https://github.com/mastodon/mastodon/blob/af578e/app/javascript/mastodon/features/compose/util/counter.js
-  const countableMentionRegex = /(^|[^/\w])@((\w+)@[a-z0-9.-]+[a-z0-9])/gi
-
   // maximum of 23 chars per link
   // https://github.com/elk-zone/elk/issues/1651
   const maxLength = 23
@@ -279,7 +279,7 @@ async function handlePaste(evt: ClipboardEvent) {
     return
 
   evt.preventDefault()
-  await uploadAttachments(Array.from(files))
+  await uploadAttachments([...files])
 }
 
 function insertEmoji(name: string) {

app/components/report/ReportModal.vue

@@ -42,8 +42,8 @@ async function loadStatuses() {
       minId: status.id,
       limit: 5,
     })
-    availableStatuses.value = availableStatuses.value.concat(prevStatuses)
-    availableStatuses.value = availableStatuses.value.concat(nextStatuses)
+    availableStatuses.value = [...availableStatuses.value, ...prevStatuses]
+    availableStatuses.value = [...availableStatuses.value, ...nextStatuses]
   }
   else {
     // Reporting an account directly

app/components/settings/SettingsProfileMetadata.vue

@@ -13,7 +13,7 @@ const fieldIcons = computed(() =>
 
 const fieldCount = computed(() => {
   // find last non-empty field
-  const idx = [...form.value.fieldsAttributes].reverse().findIndex(f => f.name || f.value)
+  const idx = form.value.fieldsAttributes.toReversed().findIndex(f => f.name || f.value)
   if (idx === -1)
     return 1
   return Math.min(

app/components/status/StatusPoll.vue

@@ -6,9 +6,11 @@ const { status } = defineProps<{
 }>()
 const poll = reactive({ ...status.poll! })
 
+const PERCENTAGE_FORMAT_REGEX = /\.?0+$/
+
 function toPercentage(num: number) {
   const percentage = 100 * num
-  return `${percentage.toFixed(1).replace(/\.?0+$/, '')}%`
+  return `${percentage.toFixed(1).replace(PERCENTAGE_FORMAT_REGEX, '')}%`
 }
 const timeAgoOptions = useTimeAgoOptions()
 const expiredTimeAgo = useTimeAgo(poll.expiresAt!, timeAgoOptions)

app/components/status/StatusPreviewGitHub.vue

@@ -6,6 +6,9 @@ const { card } = defineProps<{
   card: mastodon.v1.PreviewCard
 }>()
 
+const ISSUE_REGEX = /issues\/(\d+)/
+const PULL_REGEX = /pull\/(\d+)/
+
 type UrlType = 'user' | 'repo' | 'issue' | 'pull'
 interface Meta {
   type: UrlType
@@ -49,12 +52,12 @@ const meta = computed(() => {
     details = details.replace(`${repoPath}: `, '')
     const inRepoPath = path.split(`${repoPath}/`)?.[1]
     if (inRepoPath) {
-      number = inRepoPath.match(/issues\/(\d+)/)?.[1]
+      number = inRepoPath.match(ISSUE_REGEX)?.[1]
       if (number) {
         type = 'issue'
       }
       else {
-        number = inRepoPath.match(/pull\/(\d+)/)?.[1]
+        number = inRepoPath.match(PULL_REGEX)?.[1]
         if (number)
           type = 'pull'
       }

app/components/status/StatusPreviewStackBlitz.vue

@@ -19,9 +19,16 @@ interface Meta {
 // Protect against long code snippets
 const maxLines = 20
 
+const STACKBLITZ_META_REGEX = /.*Code Snippet from (.+), lines (\S+)\n\n(.+)/s
+const HTML_ESCAPE_REGEX = {
+  LESS_THAN: /</g,
+  GREATER_THAN: />/g,
+  BACKTICK: /`/g,
+}
+
 const meta = computed(() => {
   const { description } = card
-  const meta = description.match(/.*Code Snippet from (.+), lines (\S+)\n\n(.+)/s)
+  const meta = description.match(STACKBLITZ_META_REGEX)
   const file = meta?.[1]
   const lines = meta?.[2]
   const code = meta?.[3].split('\n').slice(0, maxLines).join('\n')
@@ -38,9 +45,9 @@ const vnodeCode = computed(() => {
   if (!meta.value.code)
     return null
   const code = meta.value.code
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/`/g, '&#96;')
+    .replace(HTML_ESCAPE_REGEX.LESS_THAN, '&lt;')
+    .replace(HTML_ESCAPE_REGEX.GREATER_THAN, '&gt;')
+    .replace(HTML_ESCAPE_REGEX.BACKTICK, '&#96;')
 
   const vnode = contentToVNode(`<p>\`\`\`${meta.value.file?.split('.')?.[1] ?? ''}\n${code}\n\`\`\`\</p>`, {
     markdown: true,

app/components/status/edit/StatusEditHistory.vue

@@ -15,7 +15,7 @@ const timeAgoOptions = useTimeAgoOptions()
 
 // TODO: rework, this is only reversing the first page of edits
 function reverseHistory(items: mastodon.v1.StatusEdit[]) {
-  return [...items].reverse()
+  return items.toReversed()
 }
 </script>
 

app/components/timeline/TimelineNotifications.vue

@@ -16,12 +16,14 @@ const paginator = useMastoClient().v1.notifications.list(options)
 
 const stream = useStreaming(client => client.user.notification.subscribe())
 
-lastAccessedNotificationRoute.value = route.path.replace(/\/notifications\/?/, '')
+const NOTIFICATIONS_PATH_REGEX = /\/notifications\/?/
+
+lastAccessedNotificationRoute.value = route.path.replace(NOTIFICATIONS_PATH_REGEX, '')
 
 const { clearNotifications } = useNotifications()
 onActivated(() => {
   clearNotifications()
-  lastAccessedNotificationRoute.value = route.path.replace(/\/notifications\/?/, '')
+  lastAccessedNotificationRoute.value = route.path.replace(NOTIFICATIONS_PATH_REGEX, '')
 })
 </script>
 

app/components/user/UserSignIn.vue

@@ -21,16 +21,8 @@ const filteredServers = computed(() => {
   return results
 })
 
-function isValidUrl(str: string) {
-  try {
-    // eslint-disable-next-line no-new
-    new URL(str)
-    return true
-  }
-  catch {
-    return false
-  }
-}
+const SERVER_PATH_REGEX = /^[a-z0-9-]+(?:\.[a-z0-9-]+)+(?::\d+)?$/i
+const SERVER_SELECTOR_REGEX = /[^\w-]/g
 
 async function handleInput() {
   const input = server.value.trim()
@@ -41,8 +33,8 @@ async function handleInput() {
     displayError.value = false
 
   if (
-    isValidUrl(`https://${input}`)
-    && input.match(/^[a-z0-9-]+(\.[a-z0-9-]+)+(:\d+)?$/i)
+    URL.canParse(`https://${input}`)
+    && SERVER_PATH_REGEX.test(input)
     // Do not hide the autocomplete if a result has an exact substring match on the input
     && !filteredServers.value.some(s => s.includes(input))
   ) {
@@ -55,7 +47,7 @@ async function handleInput() {
 }
 
 function toSelector(server: string) {
-  return server.replace(/[^\w-]/g, '-')
+  return server.replace(SERVER_SELECTOR_REGEX, '-')
 }
 function move(delta: number) {
   if (filteredServers.value.length === 0) {

app/composables/aria.ts

@@ -27,7 +27,7 @@ export function useAriaLog() {
   }
 
   const appendLogs = (messages: any[]) => {
-    logs.value = logs.value.concat(messages)
+    logs.value = [...logs.value, ...messages]
   }
 
   const clearLogs = () => {