Cagilo: Компоненты Blade для Laravel

Cagilo — это набор компонентов Blade с открытым исходным кодом для платформы Laravel. Этот пакет не требует инфраструктуры CSS или ресурсов JS для работы и предоставляет следующие компоненты:

• Alerts component for working with Laravel session flashing
• Device component - ability to hide or show depending on the user's device (user-agent)
• Error component - easy way to work with Laravel's error message bag
• Icon component - insert inline SVG files
• Logout component - component log out users via a POST request
• Meta component - set several OG and meta elements used by social media to provide previews of your content

<x-meta> кажется мощным, всего несколькими строками вы можете сгенерировать следующее:

<x-meta
    title="Hello World"
    description="Blade components are awesome!"
    image="http://example.com/social.jpg"
/>
 
<!--
Outputs the following:
-->
<title>Hello World</title>
 
<!-- Primary Meta Tags -->
<meta name="title" content="Hello World">
<meta name="description" content="Blade components are awesome!">
 
 
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="http://localhost"/>
<meta property="og:locale" content="en"/>
<meta property="og:title" content="Hello World"/>
<meta property="og:description" content="Blade components are awesome!">
<meta property="og:image" content="http://example.com/social.jpg">
 
<!--  Twitter -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:url" content="http://localhost">
<meta name="twitter:title" content="Hello World">
<meta name="twitter:description" content="Blade components are awesome!">
<meta name="twitter:image" content="http://example.com/social.jpg">

Хотя создать кнопку выхода несложно, в этом пакете есть удобный компонент для этого:

<x-logout/>
 
<!--
Outputs the following:
-->
<form method="POST" action="http://localhost/logout" id="logout">
  <input type="hidden" name="_token" value="...">
</form>
 
<button form="logout" type="submit">
  Log out
</button>

И наконец, <x-device> компонент полезен, если вы хотите условно отображать свой шаблон на основе пользовательского агента пользователя:

<x-device desktop="true">
    <h1>Hello Word</h1>
</x-device>
 
<!-- or multiple devices -->
<x-device phone="true" tablet="true">
    <h1>Hello Word</h1>
</x-device>

документация может помочь вам начать работу и содержит примеры для каждого компонента лезвия. Вы можете узнать больше об этом пакете, получить полные инструкции по установке и просмотреть исходный код на GitHub.

Этот пакет был отправлен в наш раздел Ссылки на новости Laravel. Links — это место, где сообщество может публиковать пакеты и руководства по экосистеме Laravel. Следите за обновлениями в Твиттере @LaravelLinks