Düzyazı

Bir Markdown işleyicisi size çıplak etiketler verir: <h2>, <p>, <ul>, <blockquote> — tutunacak hiçbir sınıf olmadan. prose() o HTML’i sarar ve biçimlendirir.

Bu, kitaplıktaki tek bilinçli istisnadır. Başka her yerde biçimlendirme, tam da sizin seçmediğiniz biçimlendirmeye hiç dokunmasın diye su- sınıflarıyla sınırlandırılmıştır; burada hedeflenecek sınıf olmadığından kurallar çıplak etiketlerle eşleşir — ama yalnızca sarmalayıcının içinde.

Temel düzyazı

Başlarken

HTML döndüren bir fonksiyon yazın. sitelo build çalıştırın. dist/ dizinini yayımlayın.

Dosya tabanlı yönlendirme
Derleme zamanı veri
İstemci çalışma zamanı yok

prose(
  '<h2>Başlarken</h2>' +
  '<p>HTML döndüren bir fonksiyon yazın. <code>sitelo build</code> çalıştırın. <code>dist/</code> dizinini yayımlayın.</p>' +
  '<ul><li>Dosya tabanlı yönlendirme</li><li>Derleme zamanı veri</li><li>İstemci çalışma zamanı yok</li></ul>'
)

Biçimlendirdiği her şey

Bir başlık

bir bağlantı, kalın ve satır içi kod içeren gövde metni.

Çevresindeki metinden ayrılmış bir alıntı.

Birinci
İkinci
- İç içe

export default () => "<h1>Selam</h1>"

Seçenek	Varsayılan
cleanUrls	true
outDir	dist

Aramak için ⌘ K tuşlarına basın.

prose(
  '<h3>Bir başlık</h3>' +
  '<p><a href="/docs">bir bağlantı</a>, <strong>kalın</strong> ve <code>satır içi kod</code> içeren gövde metni.</p>' +
  '<blockquote><p>Çevresindeki metinden ayrılmış bir alıntı.</p></blockquote>' +
  '<ol><li>Birinci</li><li>İkinci<ul><li>İç içe</li></ul></li></ol>' +
  '<pre><code>export default () => "&lt;h1&gt;Selam&lt;/h1&gt;"</code></pre>' +
  '<table><thead><tr><th>Seçenek</th><th>Varsayılan</th></tr></thead>' +
  '<tbody><tr><td>cleanUrls</td><td>true</td></tr><tr><td>outDir</td><td>dist</td></tr></tbody></table>' +
  '<hr>' +
  '<p>Aramak için <kbd>⌘</kbd> <kbd>K</kbd> tuşlarına basın.</p>'
)

Boyutlar

Küçük — bir kart özeti ya da kenar çubuğu için.

Orta — varsayılan, makale gövde metni için.

Büyük — kısa, öne çıkan bir giriş için.

stack({ gap: 'lg' },
  prose({ size: 'sm' }, '<p><strong>Küçük</strong> — bir kart özeti ya da kenar çubuğu için.</p>'),
  prose('<p><strong>Orta</strong> — varsayılan, makale gövde metni için.</p>'),
  prose({ size: 'lg' }, '<p><strong>Büyük</strong> — kısa, öne çıkan bir giriş için.</p>'),
)

Bir Markdown blogla

Blog örneğinin istediği biçim: Markdown’ı derleme sırasında işleyin, sonucu sarın ve yayımlayın.

import { marked } from 'marked'
import { article, body, h1, html, head, title } from 'javascript-to-html'
import { container, prose, styles, text } from 'sitelo/ui'

export async function data({ params }) {
  return { post: await loadPost(params.slug) }
}

export default ({ data }) => html({ lang: 'tr' },
  head(title(data.post.title), styles()),
  body(
    container({ size: 'sm' },
      h1(data.post.title),
      text({ variant: 'caption' }, data.post.date),
      // marked, üzerinde hiç sınıf olmayan bir HTML dizesi döndürür
      prose(marked.parse(data.post.markdown)),
    ),
  ),
)

Düzyazı içinde bileşenler

Her düzyazı kuralı, bir su- sınıfı taşıyan öğeleri dışarıda bırakır; böylece bir düzyazı bloğuna bırakılan bir bileşen, makale kenar boşluklarını almak yerine kendi biçimlendirmesini korur.

Biraz işlenmiş Markdown, sonra bir bileşen:

Hâlâ normal bir uyarı

Çevresindeki düzyazı bloğu tarafından yeniden biçimlendirilmez.

Ve düzyazıya dönüş.

prose(
  '<p>Biraz işlenmiş Markdown, sonra bir bileşen:</p>',
  alert({ color: 'warning', title: 'Hâlâ normal bir uyarı' },
    'Çevresindeki düzyazı bloğu tarafından yeniden biçimlendirilmez.'),
  '<p>Ve düzyazıya dönüş.</p>',
)

Güven üzerine bir söz

prose() çocuklarını HTML olarak işler — bütün mesele budur ve javascript-to-html baştan sona böyle çalışır. HTML denetiminizde olmayan bir yerden geliyorsa buraya gelmeden önce temizleyin. Ham HTML’i kapatılmış bir Markdown işleyicisi genellikle yeterlidir.

Proplar

Prop	Tür	Varsayılan	Açıklama
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Temel yazı boyutu; geri kalan her şey ondan em cinsinden ölçeklenir.
`as`	`string`	`'div'`	İşlenecek öğe, örneğin article.