eser/aya-website

açık yazılım ağı web sitesi kaynak kodları

👋 Hello, I’m Eser.

🐦 Tweeting at x.com/eser
🎬 Streaming at eser.live
💬 Interests: Open Source, Engineering Management, DevRel, Agile, DevOps, Software Craftsmanship and Product Engineering
⚙️ Stack: Deno, JavaScript, TypeScript, etc.

✍️ Content

🇬🇧 Curriculum Vitae My technical skills, work experience, certifications, etc.
🇬🇧 Products My products, Open source projects I contributed to, etc.
🇬🇧 Presentations My talks, presentations, etc.
🇬🇧 Series My article series, playlists, micro-blogging stuff, etc.
🇬🇧 Updates Updates, announcements, etc.
🇹🇷 Yazı Dizileri Yazı dizilerim, çalma listeleri, mikro-blogging şeysi, vb.
🇹🇷 Güncellemeler Güncellemeler, duyurular, vb.

aya-website's Issues

CNAME assignment

Herhangi bir profil sayfası (örneğin: https://acikyazilimagi.com/eser) başka bir adres üzerinden CNAME yönlendirilmesi ile erişilebilir olmalı.

Böylece CNAME ile yönlendirilmiş https://eser.dev gibi bir adrese girildiğinde, adres kısmı eser.dev domain'i altında görünürken içerik acikyazilimagi.com servislerinden gelecek.

Bunu yapmak için hosting olarak Vercel kullanmamızdan ötürü Vercel Domains API araştırılmalı.

Katkı puan sistemi

AYA gönüllüler ve gönüllülerin yaptığı katkılar ile devam eden bir organizasyon. Gönüllülerin yapmış olduğu katkıları "görünür" kılmak da bir anlamda, getireceği yankı açısından katkılar kadar önem arz ediyor.

Katkıların biraz daha görselleştirilmesi için puanlama sistemi üzerinde çalışıyorum. Daha önce hem açık-kaynak.org hem de 10forward.io için benzer sistemler çalışmıştım.

Taslak fikir şu şekilde:

AYA'nın mevcut yapısı (#6) Profiller ile ilerliyor.

Her profilde gerçekleşen bir activity olacak. örneğin aşağıdaki örnekte "afet.org" codebase'ine yapılan bir kod geliştirmesi için eser profilinin aktivitesi sistemde kayıt altına alınıyor.

activity: {
  id: "1de3ab",
  sourceProfile: "eser",
  targetProfile: "afet.org",
  type: "codeContribution",
  description: "contributed to afetharita.com",
  createdAt: "2023‐06‐29T10:11:31+00:00",
  points: [],
  badges: [],
}

bu activity için point işlemleri yapılabilecek. örneğin aşağıdaki örnekte "afet.org"a yapmış olduğu katkı için emre kullanıcısı eser'e 100 katkı puanı gönderiyor.

activity: {
  id: "1de3ab",
  sourceProfile: "eser",
  targetProfile: "afet.org",
  type: "codeContribution",
  description: "contributed to afetharita.com",
  createdAt: "2023‐06‐29T10:11:31+00:00",
  points: [
    {
      from: "emre",
      qty: 100,
      createdAt: "2023‐06‐29T10:11:31+00:00",
    },
  ],
  badges: [],
}

yine aynı activity için badge de tanımlanabilecek. örneğin aşağıdaki örnekte "afet.org"a yapmış olduğu "ilk" katkı için emre kullanıcısı eser'e "contributor" ve "go developer" badge'i tanımlıyor.

activity: {
  id: "1de3ab",
  sourceProfile: "eser",
  targetProfile: "afet.org",
  type: "codeContribution",
  description: "contributed to afetharita.com",
  createdAt: "2023‐06‐29T10:11:31+00:00",
  points: [
    {
      from: "emre",
      qty: 100,
      createdAt: "2023‐06‐29T10:11:31+00:00",
    },
  ],
  badges: [
    {
      id: "contributor",
      from: "emre",
      createdAt: "2023‐06‐29T10:11:31+00:00",
    },
    {
      id: "go-developer",
      from: "emre",
      createdAt: "2023‐06‐29T10:11:31+00:00",
    },
  ],
}

Profil sistemi

AYA gönüllüler ve gönüllülerin yaptığı katkılar ile devam eden bir organizasyon. Gönüllülerin yapmış olduğu katkıları "görünür" kılmak da bir anlamda, getireceği yankı açısından katkılar kadar önem arz ediyor.

Peki AYA bünyesinde ve bulunduğumuz bilişim ekosisteminde kimler var? AYA web sitesi "profiller" özelliği ile ekosistemdeki kişiler, organizasyonlar, projeler ve ürünlerin "profillerini oluşturmasını" sağlıyor.

Bu profillerin MDX formatındaki içeriklerini GitHub hesabı ile login olduktan sonra kolayca web sitesine girebiliyor, alt sayfalar oluşturabiliyorsunuz. Örneğin eskiden https://eser.ozvataf.com sitesini next veya ghost ile ayağa kaldırıp bakımını yaparken, şu anda "Eser Özvataf" adına AYA web sitesinde bir profil oluşturarak aynı içeriği sağlayabiliyorum: https://acikyazilimagi.com/tr/people/eser/ (elbette sistem halen geliştirilmekte)

İlerleyen zamanlarda bu profillerin tiplerinin, linklerinin (diğer sosyal medyalarına bağlantılar), haber, aktivite ve etkinliklerinin de girilebileceği bir yapıya kavuşacak profiller sayfalarımız.

Kapalı Beta Yol Haritası

#3 Codebase Genel İhtiyaçları issue'sunda kapanan maddeler ile en basit alpha sürümümüzü yayına almış olduk. Sonraki aşama için Kapalı Beta için gerekli feature'ları ele alacağız:

Proje Teknik İhtiyaçları

• #13
• #11
• #12
• #14
• #19
• #20

Featurelar

• #15
• #16
• #18
• #17
• #10
• #21
• #22
• #23
• #24

Missing CODE_OF_CONDUCT.md

There is a redirection to CODE_OF_CONDUCT.md on https://github.com/acikkaynak/aya-website/blob/main/CONTRIBUTING.md?plain=1#L15 but there is no CODE_OF_CONDUCT.md on the root directory.

Kullanıcı onboarding

GitHub Login sonrası kullanıcı eğer kendisine ait verileri doldurmamışsa (bkz: Prisma Şemasındaki User Model'i) kullanıcı bir onboarding ekranına yönlendirilmeli.

MDX'lerde kullanılabilecek custom React Componentları

Kullanıcılar MDX ile oluşturacağı içeriklerde bir takım React componentleri kullanabilecekler.

Akla gelen ilk örnekler:

• İletişim Formu
• https://eser.ozvataf.com/ 'da yer alan "About", "Content Creation and Speaking" vb. section kutularına benzer presentational/görsel bileşenler

Text overlapping on 'community' page

On the community page Açık Yazılım Ağı text overlapping on the logo when the width>=768

page: 'https://acikyazilimagi.com/elements'

Image/Asset Upload

Kullanıcı profil resmi değiştirme, profil için görüntü resmi atama gibi işlemlerde kullandığımız Supabase Storage'a upload yapılmasını sağlayacak bir form / React bileşeni tasarlanması gerekiyor.

Footer style düzenlenmesi

Merhaba footer son sayfa içeriğine doğrudan temaslı gözükmektedir.
Bknz :

Bunun daha iyi bir görünüme ulaşması için böyle gözükmesi gerektiğini düşünüyorum.

Bknz :

Bu görünüme ulaşması için eklenmesi gereken css kodu :

position: fixed; 
bottom: 0; 
left: 0; 
right: 0;"

BUG: Mobil görünümde header sorunlu

Sorun

Mobil görünüme geçtiğimiz durumda menülere ulaşılması mümkün gözükmüyor (Kullanıcı için) bunun düzenlenmesi gerekiyor. Bu kapsamda sosyal medya hesaplarının menü yerine footer konumlandırılması daha doğru olabilir fakat header multi olabilir.

Yapılması gerekenler

• Header menüsü hamburger halinde veya harici bir stil ile düzenlenmeli ve ulaşılabilir olmalıdır.
• Header üzerinde yer alan sosyal medya iconları multi header ile üst header oluşturulup taşınılmalı veya bu bağlantılar footer taşınmalı.

MDX Page ve Story editor

Profil sayfaları altında yer alan ProfilePage, ProfileStory gibi MDX içeriğe sahip içerikler başta olmak üzere MDX'leri düzenleyebileceğimiz bir editor bileşeni gerekmekte.

Bunu ön araştırmalarda Monaco editor ile yapabileceğimizi düşündük.

Supabase DB üzerinde RLS stratejisinin belirlenmesi

Prisma şeması da kaynak olarak kullanılarak, Supabase DB üzerinde hangi tablo/model'in nasıl bir row-level security stratejisine sahip olması gerektiği belirlenmeli.

Her model/tablo'ya herkes erişemiyor olması gerekiyor. Hatta çoğunlukla verinin ancak Supabase Edge Function'da ikamet eden API'ımız üzerinden authenticated kullanıcılarca manipüle edilebilirliliğinden emin olmalıyız. Diğer kullanım senaryolarında veri erişilemez olmalı.

Backend Unit Testleri

Örnek'te olduğu gibi Deno tooling'i kullanarak Supabase Edge Functions'da çalışan API'larımız için unit testlerin yazılması gerekmektedir.

Örnek: https://github.com/acikkaynak/aya-website/blob/main/packages/api/supabase/functions/profile-create/mod.test.ts

Deno'da test yazmakla ilgili daha fazla bilgi olması açısından aşağıdaki kaynak kullanılabilir:
https://deno.land/[email protected]/basics/testing

Profil güncelleme formu

Kullanıcılar profillerini güncelleyebilmeli, birden fazla dilde profillerine yeni sayfa (ProfilePage) ve bağlantı (ProfileLink) ekleyebilir olmalılar.

Figma'da tasarım çıkarılması

#11 Issue'sundaki Tasarım dili çıkarılması ile birlikte tasarımların frontend tarafında katkıda bulunacak kimselere yardımcı olması amacıyla Figma'ya aktarılması gerekecek.

README.md oluşturulacak

Projenin genel amacı, kapsamı, kullanılan teknolojiler ve codebase'e nasıl katkıda bulunulabileceğı ile ilgili bir README.md'e ihtiyacımız var.

Storyler

Profillerde tıpkı sayfa (ProfilePage) oluşturabildiğimiz gibi ProfileStory de oluşturabiliyoruz. Story'nin Page'den farkı, Story'ler tarihe göre sıralı, statik olmayan ve dönemsel geçerliliği olan içerikler. Story'lerin alt kategorileri de bulunuyor: Duyuru, Haber, Güncelleme vb.

Profillerde story'lerin de post/blog mekanizması gibi görüntülenmesi sağlanmalı.

Dark mode integration and logo icon not working properly

Description:

• URL: https://acikyazilimagi.com/tr/news/ When dark mode is activated, the news card does not integrate with the dark mode theme and remains in the white theme.
• URL: https://acikyazilimagi.com/tr/ The logo icon is not functioning correctly because there is no white format of the logo available on the site.

Steps to Reproduce:

1. Enable dark mode on the https://acikyazilimagi.com/tr/news/ page.
2. Observe that the news card does not switch to the dark mode theme and remains in the white theme.
3. Visit https://acikyazilimagi.com/tr/ and notice that the logo icon is not displayed correctly.

Expected Behavior:

• On the https://acikyazilimagi.com/tr/news/ page, the news card should integrate with the dark mode theme when activated.
• On the https://acikyazilimagi.com/tr/ page, the logo icon should be displayed properly.

Tasarım Dili

Site şu anda shadcn'in varsayılan teması ile ilerliyor. Yakın zamanda https://eser.ozvataf.com/ adresindekine benzer bir tasarım dilinin CSS'lere uygulanması gerekmekte.

Dil değiştirme (i18n)

Veritabanı her ne kadar çoklu dil desteği ile hazırlanmış olsa da şu anda frontend kodumuz dil değiştirmeyi desteklememekte. React Server Components'a da uygun bir şekilde locale desteğinin gelmesi ve bunun Supabase DB'deki Language model/tablo'suyla da uyumlu çalısması gerekmektedir.

CONTRIBUTING.md dosyası yok

Merhaba, README.md'deki "Nasıl Katkıda Bulunabilirsin?" başlığı altındaki "katkıda bulunma kılavuzumuzu" bağlantısı çalışmıyor.

Codebase genel ihtiyaçları

Codebase geneli

• Supabase Auth Context implementasyonu
• Login w/ GitHub
• Supabase Functionlarını çağıracak client-side fetching yapısı
• Row-level security on Supabase DB
• README.md

Featurelar

• Login / Logout
• Profile pages
  • MDX Frontmatter parsing
  • Stillendirme
  • Linkler
  • Profile catch all route (i.e.: acikyazilimagi.com/eser)
  • Multilanguage (Schema update gerektirecek)
  • MDX'lerde kullanılabilecek custom React Componentları
  • CNAME assignment (Vercel'ın Domains API'ı araştırılacak)
• Edit profile
• Page rendering
• Page editor w/ Monaco editor

Frontend Component Snapshot Testleri

Örnek'te olduğu gibi Vitest ve React Testing Library kullanarak React bileşenlerimiz için Snapshot testlerinin yazılması gerekmektedir.

Örnek: https://github.com/acikkaynak/aya-website/blob/main/packages/web/src/app/page.spec.tsx

Haber kartlarındaki tarih/saat biçimi

Haber kartlarındaki tarih ve saat ISO 8601 yerine okunaklı biçimde ve Türkiye saati ile yazılabilir. Örneğin;

2023-02-17T12:13:01.489Z

yerine

17/02/2023 15:13

veya

17 Şubat 2023 Cuma, 15:13

Site başka dilde görüntülendiğinde saat dilimi bilgisi "(GMT+3)" veya "(Istanbul)" gibi eklenebilir.

Favicon change

Default vercel's favicon can be changed with aya's favicon. It's better for branding.

I think there is a misspelling in the command name.

https://github.com/acikkaynak/aya-website/blob/3557e236623878019734914dfb19cb1a777a9baa/README.md?plain=1#L14

Apart from this typo, I have a suggestion for you.
I'm using a plugin that does this while writing code within the VsCode plugins. It works fine on HTML classes. You may not need this plugin. I'm not sure if it can also analyze the parentheses.