Kurs bağlamı açık, kopyalama eylemleri belirgin ve pano geri bildirimi gerçeğe uygun, içerik üreticilere yönelik bir paylaşım paneli oluşturun. Sage’in Rails bileşen anatomisini, yayımlanmış tipografi özelliklerini ve harici olarak yüklenen yeni Pine tasarım belirteci katmanını inceleyin.
Sage Copy Text anatomisinin, yayımlanmış tipografi özelliklerinin ve varsayılan/açık Pine değerlerinin canlı hâlinin yerel HTML ile bağımsız yorumu. Sage çalışma zamanını veya özel yazı tipi paketini kullanmaz. · Uygulama başvurusu
02
Kajabi Sage Tasarım Sistemi Tasarım Referansı
Sage’ın herkese açık bileşen ve tipografi belgeleriyle, mevcut belgelerin yüklediği varsayılan/açık Pine stil sayfası. Yayımlanmış Sage tipografi tablosu ile daha yeni Pine takma adları ayrı referanslardır; bunları sessizce aynı kabul etmeyin.
Kajabi Sage Tasarım Sistemi İçerik üreticisi iş akışı için paylaşım paneli
Bağlantısının yanında kurs kolayca tanınır
Sage, Kajabi’nin içerik üreticilerine ve bilgi ticaretine yönelik arayüzlerine hizmet eder. Kurs paylaşım paneli, ürün bağlamını, uzun bir teknik değeri ve başarısızlığı sayfadan bağımsız olabilen bir eylemi bir araya getirdiği için kullanışlı, küçük ölçekli bir tasarımdır. Örnek, özgün kapak görsellerine sahip iki kurgusal kurs, bir öğrenci URL’si ve e-postayla gönderilmeye hazır bir mesaj sunar.
Kurs değiştirildiğinde her iki çıktı da güncellenir. Çıktı biçimi değiştirildiğinde kopyalanacak metin değişir; seçili kurs ise görünür kalır. Hiçbir içerik yayımlanmaz veya gönderilmez. İsteğe bağlı tek yan etki, kişi panoya kopyalama düğmesini etkinleştirdiğinde oluşur.
Kajabi Sage Tasarım Sistemi ile Pine arasında açık bir bağımlılık sınırı vardır
CSS Renk işlevi her zaman bir hex değeri aramaz
Mevcut Sage Assets README’sinde Pine belirteçlerinin Sage Assets paketine eklenmediği, bunların kullanan uygulama tarafından yüklendiği belirtilir. README, anlamsal bir CSS değişkeni döndüren sage-color() ile Sass renk işlemlerinde kullanılmak üzere eski değerleri okuyan sage-color-hex() işlevlerini birbirinden ayırır. Artık var(...) döndüren bir renk işlevi, derleme zamanında yapılan hex hesaplamalarında güvenle kullanılamaz.
Canlı belgeler @kajabi-ui/styles/dist/pine/pine.css dosyasını yükler. Bu stil sayfasının varsayılan/açık tema kökünde birincil rol, grey-900 üzerinden çözülürken eski README’deki hex örneği mavidir. Kılavuz bu bilgileri ayrı tutar: ilki canlı anlamsal rolü, ikincisi eski hex değer aramasını gösterir. Yeni bir uygulama, varsayıma dayanarak birini diğerinin yerine kullanmamalıdır.
Kajabi Sage Tasarım Sistemi Uygulamada ölçülülük, içerikte ifade gücü
Eylem renklerini anlamlarına bağlı tutun
Sage renk yönergeleri, arayüze rastgele bir kişilik katmak yerine etkileşimi, seçili durumu ve geri bildirimi belirtmek için renk kullanır. Örnekte uygulama çerçevesi nötr tutulur; ifade gücünü kurs görselleri sağlar. Böylece her paneli farklı bir durum rengine boyamadan kopyalama eylemini bulmak kolaylaşır.
Başarı durumu yalnızca pano yazma işlemi başarılı olduğunda gösterilmelidir. Pano erişimi engellendiğinde yeşil bir başarı mesajı yerine metni elle kopyalamaya yönelik kullanışlı bir durum sunulmalıdır. Seçili kurs ve çıktı biçimi kendi kontrol durumlarını kullanır ve son kopyalama sonucundan bağımsızdır.
Kajabi Sage Tasarım Sistemi Yayımlanmış Sage özellikleri ve mevcut belirteç takma adları
Yazı tipi rolü ve HTML anlamı birbirinden bağımsızdır
Yayımlanmış Sage tablosunda kesin boyut, satır yüksekliği ve kalınlık birleşimleriyle t-sage-heading ve t-sage-body sınıfları yer alır. Bu tablo, belgelenmiş özelliklerin yeniden oluşturulması için kullanışlıdır. Daha yeni Pine stil sayfası, 14 piksellik orta kalınlıkta metin rolü de dâhil olmak üzere kendi gövde metni takma adlarını sunar. Bu nedenle güncel bir entegrasyonda bileşenin hangi katmanı kullandığı incelenmelidir.
Bir öğeye görsel başlık sınıfı uygulamak, o öğenin anlamsal düzeyini değiştirmez. Kurs adı başlık, URL form içeriği, kopyalama eylemi ise düğme olarak kalır. Önizlemede yayımlanmış Sage 32/40 başlık ve 16/24 okuma stilleri, sistem yazı tipi yedeğiyle kullanılır; yazı tipi dosyalarının pakete dâhil olduğu iddia edilmez.
Kajabi Sage Tasarım Sistemi Metin Kopyalama, Kopyala Düğmesi ve Metin Kopyalama Kartı
Yapıyı içeriğin biçimine göre seçin
Belgelerde satır içi metin kopyalama, blok kartı ve kopyalama düğmesi ayrı ayrı açıklanır. Etiketin ve birden çok satırın bir arada kalması gerektiğinde blok kullanışlıdır. Düğme kapsayıcının tamamını kaplayabilir veya kenarlıksız gösterilebilir; yarı kalın yazı tipi ise bileşen düzeyinde vurgu sağlar.
Örnekte etkin içerik için salt okunur bir textarea kullanılır. Bu, bilinçli bir yerel uygulama tercihidir: pano erişimi kullanılamadığında metnin seçilmesini sağlar ve çok satırlı e-posta mesajını okunabilir tutar. Değeri, görünmez ek bir etiket ya da eski bir kurs tanımlayıcısı olmaksızın tarayıcıya gönderilen içeriğin aynısıdır.
Satır içi metin kopyalama, başka metinlerin yanında yer alan kısa ve tek bir değer için uygundur.
Kopyalama kartı, ilgili satırları incelemeye yetecek genişlikte bir arada tutar.
Değer uzun veya çok satırlı olduğunda ayrı bir düğme, eylemi belirginleştirir.
Kajabi Sage Tasarım Sistemi Uzun bağlantılar panelin düzenini bozmamalı
Ardışık düzene geçen iki sütunlu tasarım
Masaüstü örneğinde kurs seçim alanı, etkin kursun ve paylaşım kontrollerinin yanında yer alır. Küçük ekranlarda bu alan yatay sıralanmış iki karta dönüşür; paylaşım paneli ise bu kartların altında görünür. Değer alanındaki metin kapsayıcı içinde kaydırılır; düğme alanın altında görünür kalır.
Resmî Metin Kopyalama yönergeleri, yerel bir maksimum genişlik önerir ve kart içeriğinin kısaltılmasına izin verir. Bu örnekte URL’nin önemli bir bölümünü gizlemek yerine metni kaydırma ve elle seçme tercih edilir. İç boşluklar, doğrulanmış Pine 8/16/24/32 boyut adımlarını izlerken iki sütun oranı ve kırılma noktası uygulama tercihidir.
Kajabi Sage Tasarım Sistemi Eksiksiz bir herkese açık örnek ve yerel, dürüst bir uygulama yolu
Yalnızca kullanıcı eylemi başlattığında kopyalayın
Bağımsız kurulum, herkese açık Pine belirteçlerini yükler ve kendi HTML bileşenini ve pano işleyicisini sağlar. Sage paket hesabı olmadan çalışabilir. Yerel Rails örneği ise mevcut bir Sage uygulaması için ayrı bir bileşim olarak tanımlanmıştır; tek başına yapıştırılan bir yardımcı işlevin sistemi kurduğu iddia edilmez.
Sage Assets, yayımlama kayıt defteri olarak GitHub Packages’ı belirtir. Bu yöntemi kullanan ekipler onaylı kayıt defteri erişimlerini kullanmalı ve anlamsal renk değişkenlerine güvenmeden önce harici Pine katmanını yüklemelidir. Belgelerde yazı tipi etki alanı kısıtlamaları da belirtilir; bu nedenle sistem yazı tipi yedeği kullanmak, marka yazı tiplerinin başarıyla yüklendiğini varsaymaktan daha doğrudur.
Bağımsız örneği localhost veya HTTPS üzerinden açın, ardından bir kurs ve içerik biçimi seçin.
Kopyala düğmesini etkinleştirin. Yalnızca pano vaadi çözümlendiğinde başarı bildirin; aksi durumda metni elle kopyalamak üzere seçin.
Kursu veya biçimi değiştirdiğinizde, eski kopyalama durumunu temizleyin; böylece bu durum güncel olmayan içeriği hiçbir zaman tanımlamaz.
Belgenin tamamını index.html adıyla kaydedip tarayıcıda açın. Yayımlanmış yazı tipi özelliklerinin ve canlı varsayılan/açık tema Pine değerlerinin bağımsız, yerel HTML yorumu. Sage çalışma zamanı veya tescilli yazı tipi paketi gerekmez.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Course sharing — Sage interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#f8f8f8;color:#343332;font:16px/1.5 system-ui,sans-serif}main{max-width:1120px;margin:auto;padding:32px}.top{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em;border-bottom:1px solid #d2d1d1;padding-bottom:16px;gap:16px}h1{font-size:32px;line-height:40px;letter-spacing:-.5px;margin:24px 0 8px}h2{font-size:24px;line-height:32px;margin:0 0 8px}.intro{margin:0 0 24px;color:#6c6a69}.grid{display:grid;grid-template-columns:240px 1fr;gap:24px}.courses{display:grid;gap:16px;align-content:start}.course{background:white;border:1px solid #d2d1d1;border-radius:10px;padding:12px;text-align:left;color:inherit;font:inherit;cursor:pointer}.course[aria-pressed=true]{border:2px solid #343332;padding:11px}.course small{display:block;font-size:12px;color:#6c6a69}.art{position:relative;overflow:hidden;border-radius:6px;display:grid;place-content:center;letter-spacing:.08em;font-size:11px;text-align:center}.art b{z-index:1;position:relative;line-height:1.2}.art.studio{background:#f2b9a5;color:#682923}.art.studio:before{content:'';position:absolute;border-radius:50%;width:150px;height:150px;background:#c26e4f;right:-40px;top:25px}.art.studio:after{content:'';position:absolute;width:55px;height:120px;background:#f9e7bc;transform:rotate(25deg);left:20px;top:-20px}.art.journal{background:#d1ddaa;color:#203a30}.art.journal:before{content:'';position:absolute;width:100px;height:160px;border:22px solid #68865b;border-radius:60% 0;transform:rotate(20deg);right:5px;top:-5px}.art.journal:after{content:'';position:absolute;width:90px;height:70px;border:18px solid #b29f59;border-radius:50%;left:-30px;bottom:-20px}.course .art{height:115px;margin-bottom:12px}.panel{background:white;padding:24px;border:1px solid #d2d1d1;border-radius:10px}.hero{display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center;margin-bottom:24px}.hero .art{height:140px}.hero p{font-size:14px;color:#6c6a69;margin:0}.format{display:flex;gap:16px;border-bottom:1px solid #d2d1d1;margin-bottom:24px}.format button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 0;font:inherit;color:#6c6a69;cursor:pointer}.format button[aria-pressed=true]{border-bottom-color:#343332;color:#343332}label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}textarea{width:100%;resize:vertical;min-height:135px;border:1px solid #d2d1d1;border-radius:10px;padding:16px;font:14px/1.5 system-ui;background:#fcfcfc;color:#343332}.copy{font:600 14px/20px system-ui;border:0;border-radius:9999px;background:#343332;color:white;padding:12px 24px;cursor:pointer;margin-top:16px}.copy:hover{background:#1a1a19}button:focus-visible,textarea:focus-visible{outline:3px solid #6c6a69;outline-offset:3px}.status{min-height:42px;font-size:13px;color:#4d4d4c}.foot{font-size:12px;color:#6c6a69;margin-top:24px}@media(max-width:650px){main{padding:20px}.grid{grid-template-columns:1fr}.courses{grid-template-columns:1fr 1fr;gap:12px}.course .art{height:85px}.hero{grid-template-columns:90px 1fr;gap:16px}.hero .art{height:110px}.panel{padding:20px}.top{flex-direction:column;gap:4px}h1{font-size:28px;line-height:36px}h2{font-size:20px;line-height:28px}}</style><main><header class="top"><b>CREATOR WORKSPACE</b><span>Local sharing specimen</span></header><h1>Give your course a clear invitation.</h1><p class="intro">Choose a sample course and prepare the exact text to share.</p><div class="grid"><nav class="courses" aria-label="Choose a course"><button class="course" data-course="studio" aria-pressed="true"><div class="art studio" aria-hidden="true"><b>STUDIO<br>NOTES</b></div><b>Studio Notes</b><small>6 lessons · Original sample</small></button><button class="course" data-course="journal" aria-pressed="false"><div class="art journal" aria-hidden="true"><b>FIELD<br>JOURNAL</b></div><b>Field Journal</b><small>4 lessons · Original sample</small></button></nav><section class="panel"><div class="hero"><div id="cover" class="art studio" aria-hidden="true"><b>STUDIO<br>NOTES</b></div><div><h2 id="title">Studio Notes</h2><p id="description">A fictional course about building a daily creative practice.</p></div></div><div class="format" aria-label="Copy format"><button data-format="link" aria-pressed="true">Course link</button><button data-format="message" aria-pressed="false">Invitation text</button></div><label for="payload">Text to copy</label><textarea id="payload" readonly></textarea><button id="copy" class="copy" type="button">Copy visible text</button><p class="status" id="status" role="status"></p></section></div><p class="foot">Independent Sage interpretation using verified Pine light-theme colors and dimensions. Original course covers; system-font fallback. No course is published and no message is sent.</p></main><script>const courses={studio:{name:'Studio Notes',slug:'studio-notes',desc:'A fictional course about building a daily creative practice.',art:'STUDIO<br>NOTES'},journal:{name:'Field Journal',slug:'field-journal',desc:'A fictional course about observing, collecting and recording ideas.',art:'FIELD<br>JOURNAL'}};let selected='studio',format='link';const payload=document.querySelector('#payload'),status=document.querySelector('#status');function render(){const c=courses[selected],url='https://example.com/courses/'+c.slug;document.querySelector('#title').textContent=c.name;document.querySelector('#description').textContent=c.desc;document.querySelector('#cover').className='art '+selected;document.querySelector('#cover').innerHTML='<b>'+c.art+'</b>';payload.value=format==='link'?url:'You are invited to explore '+c.name+'.\n\n'+c.desc+'\n\nView the sample: '+url;document.querySelectorAll('[data-course]').forEach(b=>b.setAttribute('aria-pressed',b.dataset.course===selected));document.querySelectorAll('[data-format]').forEach(b=>b.setAttribute('aria-pressed',b.dataset.format===format));status.textContent=''}document.querySelectorAll('[data-course]').forEach(b=>b.onclick=()=>{selected=b.dataset.course;render()});document.querySelectorAll('[data-format]').forEach(b=>b.onclick=()=>{format=b.dataset.format;render()});document.querySelector('#copy').onclick=async()=>{try{await navigator.clipboard.writeText(payload.value);status.textContent='Visible text copied.'}catch{payload.focus();payload.select();status.textContent='Copy was unavailable. The text is selected; copy it manually.'}};render();</script></html>
Kopyalama denemelerinde tarayıcı panosu API kullanılır ve elle kopyalama seçeneği sunulur. Kurs görselleri özgündür; yerel Rails CopyText bileşenleri ayrı olarak belgelenmiştir.
Hata yönetimi içeren eksiksiz kopyalama etkileşimi
Tarayıcı izinleri veya gömülü bağlam pano yazma işlemlerine izin vermediğinde kopyalanacak metin seçilebilir durumda kalır.
html
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Share a sample course link</title>
<!-- Public Pine token stylesheet used by the Sage documentation. Pin its reviewed package version in production. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css">
<style>
body{font-family:var(--pine-font-family-body);color:var(--pine-color-text);background:var(--pine-color-background-app);padding:var(--pine-dimension-md)}
main{max-width:42rem;margin:auto;background:var(--pine-color-background-container);padding:var(--pine-dimension-md);border:var(--pine-border-width) solid var(--pine-color-border);border-radius:var(--pine-border-radius-md)}
textarea{box-sizing:border-box;width:100%;padding:var(--pine-dimension-sm);font:inherit;resize:vertical}
button{font:inherit;cursor:pointer;margin-top:var(--pine-dimension-sm);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}
button:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:3px}
</style><main><h1>Share a sample course link</h1><p>This is a fictional course URL.</p>
<label for="link">Text to copy</label><textarea id="link" readonly rows="2">https://example.com/courses/studio-notes</textarea>
<button type="button" id="copy">Copy course link</button><p id="message" role="status"></p></main>
<script>
const field=document.querySelector('#link'),message=document.querySelector('#message');
document.querySelector('#copy').onclick=async()=>{
try{await navigator.clipboard.writeText(field.value);message.textContent='Course link copied.'}
catch{field.focus();field.select();message.textContent='Copy was unavailable. The link is selected; copy it manually.'}
};
</script></html>
Yardımcılar için mevcut Sage Rails, varlık ve sistem-JavaScript entegrasyonu gerekir.
Kapsamlı bir kalınlık geçersiz kılması eklemek yerine bileşenin tamamında yarı kalın yazı tipi kullanın.
04
Kajabi Sage Tasarım Sistemi Yapay Zekâ Aracısı Kurulumu
Uygulamaya Başlangıç Noktası
Eksiksiz, bağımsız ve herkese açık belirteç uygulaması; bir HTML dosyası olarak kaydedin ve pano desteği için localhost veya HTTPS üzerinden sunun. Sage Rails/React bileşenlerini yüklemez. Yerel Sage varlıkları GitHub Packages kayıt defteri üzerinden dağıtılır; mevcut varlık README’sine göre Pine belirteçlerinin ayrıca yüklenmesi gerekir.
html
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Share a sample course link</title>
<!-- Public Pine token stylesheet used by the Sage documentation. Pin its reviewed package version in production. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css">
<style>
body{font-family:var(--pine-font-family-body);color:var(--pine-color-text);background:var(--pine-color-background-app);padding:var(--pine-dimension-md)}
main{max-width:42rem;margin:auto;background:var(--pine-color-background-container);padding:var(--pine-dimension-md);border:var(--pine-border-width) solid var(--pine-color-border);border-radius:var(--pine-border-radius-md)}
textarea{box-sizing:border-box;width:100%;padding:var(--pine-dimension-sm);font:inherit;resize:vertical}
button{font:inherit;cursor:pointer;margin-top:var(--pine-dimension-sm);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}
button:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:3px}
</style><main><h1>Share a sample course link</h1><p>This is a fictional course URL.</p>
<label for="link">Text to copy</label><textarea id="link" readonly rows="2">https://example.com/courses/studio-notes</textarea>
<button type="button" id="copy">Copy course link</button><p id="message" role="status"></p></main>
<script>
const field=document.querySelector('#link'),message=document.querySelector('#message');
document.querySelector('#copy').onclick=async()=>{
try{await navigator.clipboard.writeText(field.value);message.textContent='Course link copied.'}
catch{field.focus();field.select();message.textContent='Copy was unavailable. The link is selected; copy it manually.'}
};
</script></html>
Projeniz İçin Bir İstem
Ajan İstemi
Açık kurs seçimi ve kopyalanacak içeriğe sahip bir Kajabi Sage kurs paylaşım paneli oluşturun. Yayımlanmış Sage tipografisi ile harici olarak yüklenen Pine belirteç katmanı arasındaki ayrımı koruyun. Kopyalanacak içeriği eksiksiz gösterin, pano kopyalama başarılı olduktan sonra başarı mesajı verin ve işlem engellendiğinde elle seçim seçeneği sunun. Gerçek kurs, müşteri veya yayımlama entegrasyonu kullanmayın.
05
Kajabi Sage Tasarım Sistemi Kaynaklar ve Kapsam
Bağımsız OpenDesign kılavuzu. Kurslar ve kapak çizimleri özgündür. Önizlemede yerel HTML ve belgelenmiş görsel referanslar kullanılır; Rails örnekleri için mevcut ve yetkili bir Sage entegrasyonu gerekir. Hiçbir içerik yayımlanmaz veya gönderilmez.
