Merge pull request #754 from pinkary-project/feat/translate

Feat: add translate button

app/Models/Question.php

@@ -83,6 +83,44 @@ public function getAnswerAttribute(?string $value): ?string
         return $value !== null && $value !== '' && $value !== '0' ? $content->parse($value) : null;
     }
 
+    /**
+     * The attributes that should be cast.
+     */
+    public function getSharableAnswerAttribute(): ?string
+    {
+        return $this->getSharableText($this->answer);
+    }
+
+    /**
+     * The attributes that should be cast.
+     */
+    public function getSharableContentAttribute(): ?string
+    {
+        return $this->getSharableText($this->content);
+    }
+
+    /**
+     * Get the sharable text for the given content.
+     */
+    public function getSharableText(?string $text): ?string
+    {
+        if ($text === null) {
+            return null;
+        }
+
+        $text = preg_replace('/<div\s+id="link-preview-card"[^>]*>(.*)<\/div>(?!.*<\/div>)/si', '', $text);
+
+        $text = preg_replace(
+            '/<pre><code.*?>.*?<\/code><\/pre>/si',
+            ' [👀 see the code on Pinkary 👀] ',
+            (string) $text
+        );
+
+        $text = str_replace('<br>', ' ', (string) $text);
+
+        return strip_tags($text);
+    }
+
     /**
      * The attributes that should be cast.
      *

resources/js/share-profile.js

@@ -16,7 +16,7 @@ const shareProfile = () => ({
         let text = options.question ? options.question + '%0A%0A' : ''
 
         text = text
-            .replace(/<pre><code.*?>.*?<\/code><\/pre>/gs, "%0A%0A[👀 see the code on Pinkary 👀]%0A%0A")
+            .replace(' [👀 see the code on Pinkary 👀] ', "%0A%0A[👀 see the code on Pinkary 👀]%0A%0A")
             .replace(/<\/?[^>]+(>|$)/g, "")
             .replace(/`/g, '')
             .replace(/&amp;/g, '&')

resources/views/livewire/questions/show.blade.php

@@ -13,6 +13,14 @@
                 @else
                     <x-avatar-with-name :user="$question->from" />
                 @endif
+                <a
+                    class="text-xs text-pink-500 flex items-end gap-1.5"
+                    href="{{ 'https://translate.google.com/?sl=auto&tl=en&text='.urlencode($question->sharable_content) }}"
+                    target="_blank"
+                    data-navigate-ignore="true"
+                >
+                    <x-heroicon-o-language class="h-4 w-4"/>
+                </a>
             @endunless
             @if ($question->pinned && $pinnable)
                 <div class="mb-2 flex items-center space-x-1 px-4 text-sm focus:outline-none">
@@ -228,6 +236,18 @@ class="inline-flex cursor-help items-center"
                             </span>
                         @endif
                     </p>
+
+                    <span>•</span>
+
+                    <a
+                        class="flex items-center transition-colors group-hover:text-pink-500 dark:hover:text-slate-400 hover:text-slate-600 focus:outline-none cursor-pointer"
+                        title="Translate"
+                        href="{{ 'https://translate.google.com/?sl=auto&tl=en&text='.urlencode($question->sharable_answer) }}"
+                        data-navigate-ignore="true"
+                        target="_blank"
+                    >
+                        <x-heroicon-o-language class="h-4 w-4"/>
+                    </a>
                 </div>
 
                 <div class="flex items-center text-slate-500 ">
@@ -318,28 +338,14 @@ class="text-slate-500 transition-colors dark:hover:text-slate-400 hover:text-sla
                             >
                                 <x-heroicon-o-link class="size-4" />
                             </button>
-                            @php
-                                $sharableQuestion = str_replace("'", "\'", $question->isSharedUpdate() ? $question->answer : $question->content);
-                                $link = null;
-
-                                if (preg_match('/<div\s+id="link-preview-card"[^>]*>(.*)<\/div>(?!.*<\/div>)/si', $sharableQuestion, $matches)) {
-                                    $linkPreviewCard = $matches[0];
-
-                                    if (preg_match('/data-url="([^"]*)"/', $linkPreviewCard, $urlMatches)) {
-                                        $link = " {$urlMatches[1]} ";
-                                    }
-                                }
-
-                                $sharable = $link ? str_replace($linkPreviewCard, $link, $sharableQuestion) : $sharableQuestion;
-                            @endphp
                             <button
                                 data-navigate-ignore="true"
                                 x-cloak
                                 x-data="shareProfile"
                                 x-on:click="
                                     twitter({
                                         url: '{{ route('questions.show', ['username' => $question->to->username, 'question' => $question]) }}',
-                                        question: '{{ $sharable }}',
+                                        question: '{{ $question->isSharedUpdate() ? $question->sharable_answer : $question->sharable_content }}',
                                         message: '{{ $question->isSharedUpdate() ? 'See it on Pinkary' : 'See response on Pinkary' }}',
                                     })
                                 "

tests/Unit/Models/QuestionTest.php

@@ -112,3 +112,49 @@
 
     expect($question->fresh()->views)->toBe(0);
 });
+
+test('get sharable answer attribute', function () {
+    $question = Question::factory()->create([
+        'answer' => <<<'text'
+        Hello
+        ```php
+        echo "Hello, World!";
+        ```
+        Answer text
+        https://pinkary.com
+        text,
+    ]);
+
+    expect($question->sharable_answer)->toBe('Hello  [👀 see the code on Pinkary 👀]  Answer text pinkary.com');
+});
+
+test('get sharable content attribute', function () {
+    $question = Question::factory()->create([
+        'content' => <<<'text'
+        Hello
+        ```php
+            echo "Hello, World!";
+        ```
+        Content text
+        https://pinkary.com
+        text,
+    ]);
+
+    expect($question->sharable_content)->toBe('Hello  [👀 see the code on Pinkary 👀]  Content text pinkary.com');
+});
+
+test('get sharable text', function () {
+    $question = new Question();
+
+    expect($question->getSharableText(null))->toBeNull();
+
+    expect($question->getSharableText('Hello'))->toBe('Hello');
+
+    expect($question->getSharableText('Hello <div id="link-preview-card">Preview</div>'))->toBe('Hello ');
+
+    expect($question->getSharableText('Hello <pre><code>Code</code></pre>'))->toBe('Hello  [👀 see the code on Pinkary 👀] ');
+
+    expect($question->getSharableText('Hello<br>World'))->toBe('Hello World');
+
+    expect($question->getSharableText('hello<div id="link-preview-card">Preview</div>'))->toBe('hello');
+});