feat: tags in blog

Author: gbzarelli

src/app/blog/page.tsx

@@ -21,8 +21,19 @@ interface Gist {
   cleanTitle: string;
   cleanDescription: string;
   imageUrl: string;
+  tags: string[];
 }
 
+const technologyKeywords = [
+  'aws', 'sns', 'sqs', 's3', 'lambda', 'architecture', 'arquitetura', 'clean', 'design', 'adr',
+  'java', 'spring', 'jvm', 'performance', 'rabbitmq', 'kafka', 'message', 'mensageria',
+  'go', 'golang', 'cloud', 'docker', 'kubernetes', 'test', 'teste', 'quality', 'qualidade',
+  'code', 'código', 'desenvolvimento', 'api', 'rest', 'graphql', 'security', 'segurança',
+  'typescript', 'javascript', 'python', 'php', 'ruby', 'csharp', 'c++', 'c', 'dart', 'rust', 'scala', 'elixir',
+  'backstage', 'mysql', 'mongodb', 'mongo', 'postgres', 'postgresql', 'android', 'sql'
+];
+
+
 // Mapeamento de palavras-chave para imagens temáticas
 const getImageForTitle = (title: string): string => {
   const titleLower = title.toLowerCase();
@@ -98,6 +109,12 @@ const getImageForTitle = (title: string): string => {
   return imageMap.default;
 };
 
+const extractTagsFromText = (text: string): string[] => {
+  const words = text.toLowerCase().match(/\b\w+\b/g) || [];
+  const wordSet = new Set(words);
+  return technologyKeywords.filter(keyword => wordSet.has(keyword));
+};
+
 export default function Blog() {
   const [gists, setGists] = useState<Gist[]>([]);
   const [loading, setLoading] = useState(true);
@@ -122,12 +139,14 @@ export default function Blog() {
           const language = firstFile?.language || 'default';
           const fileName = firstFile?.filename.split('.')[0].replace(/-/g, ' ');
           const description = `${fileName} - ${language}`;
+          const tags = extractTagsFromText(gist.description);
 
           return {
             ...gist,
             cleanTitle: rawTitle,
             cleanDescription: description,
-            imageUrl: getImageForTitle(rawTitle)
+            imageUrl: getImageForTitle(rawTitle),
+            tags: tags
           };
         });
 
@@ -243,6 +262,7 @@ export default function Blog() {
                 date={new Date(gist.created_at).toLocaleDateString('pt-BR')}
                 link={gist.html_url}
                 imageUrl={gist.imageUrl}
+                tags={gist.tags}
               />
             ))}
           </div>

src/app/components/BlogCard/index.tsx

@@ -8,9 +8,43 @@ interface BlogCardProps {
   date: string;
   link: string;
   imageUrl: string;
+  tags: string[];
 }
 
-export const BlogCard = ({ title, description, date, link, imageUrl }: BlogCardProps) => {
+export const BlogCard = ({ title, description, date, link, imageUrl, tags }: BlogCardProps) => {
+
+  const getTagColor = (tag: string) => {
+    const colors: { [key: string]: string } = {
+      'java': 'bg-red-100 text-red-800',
+      'python': 'bg-blue-100 text-blue-800',
+      'c++': 'bg-purple-100 text-purple-800',
+      'javascript': 'bg-yellow-100 text-yellow-800',
+      'typescript': 'bg-blue-100 text-blue-800',
+      'kotlin': 'bg-purple-100 text-purple-800',
+      'c': 'bg-gray-100 text-gray-800',
+      'html': 'bg-orange-100 text-orange-800',
+      'css': 'bg-pink-100 text-pink-800',
+      'shell': 'bg-green-100 text-green-800',
+      'ruby': 'bg-red-100 text-red-800',
+      'swift': 'bg-orange-100 text-orange-800',
+      'go': 'bg-cyan-100 text-cyan-800',
+      'rust': 'bg-orange-100 text-orange-800',
+      'arduino': 'bg-teal-100 text-teal-800',
+      'android': 'bg-green-100 text-green-800',
+      'aws': 'bg-blue-100 text-blue-800',
+      'sns': 'bg-green-100 text-green-800',
+      'sqs': 'bg-yellow-100 text-yellow-800',
+      's3': 'bg-orange-100 text-orange-800',
+      'lambda': 'bg-purple-100 text-purple-800',
+      'architecture': 'bg-gray-100 text-gray-800',
+      'clean': 'bg-teal-100 text-teal-800',
+      'design': 'bg-pink-100 text-pink-800',
+      'adr': 'bg-red-100 text-red-800'      
+    };
+
+    return colors[tag] || 'bg-gray-100 text-gray-800';
+  }
+  
   return (
     <div className="bg-white rounded-lg shadow-[0_3px_10px_rgb(0,0,0,0.2)] overflow-hidden hover:shadow-[0_8px_30px_rgb(0,0,0,0.12)] transition-all duration-300 transform hover:-translate-y-1">
       <a 
@@ -34,9 +68,13 @@ export const BlogCard = ({ title, description, date, link, imageUrl }: BlogCardP
         <div className="p-6">
           <div className="flex items-center justify-between mb-4">
             <span className="text-sm text-gray-500">{date}</span>
-            <span className="px-3 py-1 text-xs font-medium text-blue-600 bg-blue-100 rounded-full">
-              Gist
-            </span>
+            <div className="flex flex-wrap gap-2">
+              {tags.map((tag: string) => (
+                <span key={tag} className={`px-2 py-1 rounded-full text-xs font-medium ${getTagColor(tag)}`}>
+                  {tag}
+                </span>
+              ))}
+            </div>
           </div>
           <h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors duration-300">
             {title}