mirror of
https://github.com/mmahdium/portfolio.git
synced 2026-08-17 05:24:30 +03:30
mahdiarghyani
13031465e3
- Refine blog typography with optimized font sizes and line heights for better readability - Adjust heading margins and sizes (h1-h4) for improved visual hierarchy - Implement custom bullet styling with primary color indicators for lists - Add highlighted key phrases styling with left border accent for emphasized content - Create new BlogShare component for social sharing functionality - Add Callout and PullQuote content components for enhanced blog formatting - Introduce resume-button.css for improved button styling - Update blog post template with slug-based routing support - Add new blog post "Career Change: From Huawei to Frontend" in English and Persian - Enhance portfolio components (Hero, Skills, AIStack, etc.) with refined styling - Improve RTL language support with better spacing and alignment for Persian content - Add blog hero image asset (big-career-change.webp) - Update i18n translations for new blog content and UI improvements - Optimize code block and inline code styling with CSS variables for consistency - Refine blockquote styling with better contrast and spacing
91 lines
3.3 KiB
Vue
91 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
title: string
|
|
url: string
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
|
|
const shareLinks = computed(() => ({
|
|
twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(props.title)}&url=${encodeURIComponent(props.url)}`,
|
|
linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(props.url)}`,
|
|
facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(props.url)}`,
|
|
telegram: `https://t.me/share/url?url=${encodeURIComponent(props.url)}&text=${encodeURIComponent(props.title)}`
|
|
}))
|
|
|
|
const toast = useToast()
|
|
|
|
const copyToClipboard = async () => {
|
|
try {
|
|
if (navigator?.clipboard?.writeText) {
|
|
await navigator.clipboard.writeText(props.url)
|
|
toast.add({
|
|
title: t('blog.linkCopied') || 'Link copied!',
|
|
icon: 'i-heroicons-check-circle',
|
|
color: 'green'
|
|
})
|
|
} else {
|
|
// Fallback for older browsers
|
|
const textArea = document.createElement('textarea')
|
|
textArea.value = props.url
|
|
textArea.style.position = 'fixed'
|
|
textArea.style.left = '-999999px'
|
|
document.body.appendChild(textArea)
|
|
textArea.select()
|
|
document.execCommand('copy')
|
|
document.body.removeChild(textArea)
|
|
toast.add({
|
|
title: t('blog.linkCopied') || 'Link copied!',
|
|
icon: 'i-heroicons-check-circle',
|
|
color: 'green'
|
|
})
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to copy:', err)
|
|
toast.add({
|
|
title: t('blog.copyFailed') || 'Failed to copy link',
|
|
icon: 'i-heroicons-x-circle',
|
|
color: 'red'
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="blog-share my-8 p-6 bg-gray-50 dark:bg-gray-900/50 rounded-lg border border-gray-200 dark:border-gray-800">
|
|
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
|
<!-- Title -->
|
|
<div class="flex items-center gap-3">
|
|
<UIcon name="i-heroicons-share" class="w-5 h-5 text-primary-600 dark:text-primary-400" />
|
|
<span class="font-semibold text-gray-900 dark:text-gray-100">
|
|
{{ t('blog.sharePost') || 'Share this post' }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Share Buttons -->
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<!-- Twitter -->
|
|
<UButton :to="shareLinks.twitter" target="_blank" rel="noopener noreferrer" color="gray" variant="ghost"
|
|
size="sm" icon="i-simple-icons-x" aria-label="Share on Twitter" />
|
|
|
|
<!-- LinkedIn -->
|
|
<UButton :to="shareLinks.linkedin" target="_blank" rel="noopener noreferrer" color="gray" variant="ghost"
|
|
size="sm" icon="i-simple-icons-linkedin" aria-label="Share on LinkedIn" />
|
|
|
|
<!-- Facebook -->
|
|
<UButton :to="shareLinks.facebook" target="_blank" rel="noopener noreferrer" color="gray" variant="ghost"
|
|
size="sm" icon="i-simple-icons-facebook" aria-label="Share on Facebook" />
|
|
|
|
<!-- Telegram -->
|
|
<UButton :to="shareLinks.telegram" target="_blank" rel="noopener noreferrer" color="gray" variant="ghost"
|
|
size="sm" icon="i-simple-icons-telegram" aria-label="Share on Telegram" />
|
|
|
|
<!-- Copy Link -->
|
|
<UButton @click="copyToClipboard" color="gray" variant="ghost" size="sm" icon="i-heroicons-link"
|
|
aria-label="Copy link" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|