MDX okuma süresini çıkarmak için bir remark eklentisi oluşturun

Remark, markdown içeriğini dönüştürmek için özel eklentiler oluşturmak amacıyla kullanılabilen güçlü bir markdown işlemcisidir. Remark ile markdown dosyalarını ayrıştırırken, içerik eklentiler kullanılarak manipüle edilebilen bir soyut sözdizimi ağacına (AST) dönüştürülür.

Daha iyi bir kullanıcı deneyimi için, bir makalenin tahmini okuma süresini görüntülemek yaygındır. Bu kılavuzda, bir MDX dosyasından okuma süresi verilerini çıkarmak ve bu dosyayı bir ES modülü olarak içe aktarırken kullanılabilir hale getirmek için bir remark eklentisi oluşturacağız.

Başlayalım#

Öncelikle bir MDX dosyası oluşturalım:

Vite'yi paketleyici olarak kullandığımızı ve MDX dosyalarını dönüştürmek için resmi @mdx-js/rollup eklentisini kullandığımızı varsayarsak, MDX dosyasını bir ES modülü olarak içe aktarabiliriz. Vite yapılandırması şu şekilde olmalıdır:

MDX dosyasını bir ES modülü olarak içe aktarırsak, içerik derlenmiş JSX'i içeren default özelliğine sahip bir nesne olacaktır. Örneğin:

Aşağıdaki çıktıyı verecektir:

Bu şekilde bir çıktı aldığımızda, remark eklentisini oluşturmaya hazırız.

Remark eklentisini oluşturun#

Amaca ulaşmak için yapmamız gerekenleri inceleyelim:

1. Okuma süresi hesaplaması için MDX içeriğini metne dönüştürün.
2. Okuma süresini hesaplayın.
3. Okuma süresi verilerini MDX içeriğine ekleyin ve MDX dosyasını bir ES modülü olarak içe aktarırken kullanılabilir hale getirin.

Neyse ki, okuma süresi hesaplaması ve temel AST işlemleri için bize yardımcı olacak zaten mevcut kütüphaneler var:

• reading-time okuma süresini hesaplamak için.
• mdast-util-to-string MDX AST'yi metne dönüştürmek için.
• estree-util-value-to-estree okuma süresi verilerini bir ESTree düğümüne dönüştürmek için.

Eğer bir TypeScript kullanıcısıysanız, bu paketler için tip tanımlarını da yüklemeniz gerekebilir:

• MDX kök düğüm tipi tanımları için @types/mdast.
• Eklenti tip tanımları için unified.

Paketler kurulduğu sürece, eklentiyi oluşturmaya başlayabiliriz:

Gördüğümüz gibi, eklenti sadece MDX içeriğini metne dönüştürüyor ve okuma süresini hesaplıyor. Şimdi, okuma süresi verilerini MDX içeriğine eklememiz gerekiyor ve bu çok basit görünmüyor. Ancak diğer harika kütüphanelere, örneğin remark-mdx-frontmatter'e bakarsak, nasıl yapılacağı konusunda bir fikir edinebiliriz:

Yukarıdaki kodda type: 'mdxjsEsm' öğesine dikkat edin. Bu, MDX ESM'yi serileştirmek için kullanılan bir düğüm türüdür. Yukarıdaki kod, okuma süresi verilerini readingTime adı kullanılarak MDX içeriğine ekler ve bu, MDX dosyasını bir ES modülü olarak içe aktardığınızda aşağıdaki çıktıyı verir:

Okuma süresi verilerinin adını değiştirmek isterseniz, Identifier düğümünün name özelliğini güncelleyebilirsiniz.

TypeScript desteği#

Eklentiyi geliştirici dostu hale getirmek için son bir dokunuş yaparak MDX tip tanımlarını artırabiliriz:

Şimdi, MDX dosyasını içe aktarırken, TypeScript readingTime özelliğini tanıyacaktır:

Sonuç#

Umarım bu kılavuz, MDX dosyalarıyla çalışırken size daha iyi bir deneyim sunar. Bu remark eklentisi ile okuma süresi verilerini doğrudan kullanabilir ve hatta daha iyi performans için ESM ağacın temizlenmesinden faydalanabilirsiniz.