/
conversation.html
34 lines (27 loc) · 15.4 KB
/
conversation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html><html class="bg-white dark:bg-gray-900 dark:text-gray-100 leading-tight text-gray-900" lang=en><head><meta charset=UTF-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><link href=/assets/favicons/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><link href=/assets/favicons/favicon-32x32.png rel=icon sizes=32x32 type=image/png><link href=/assets/favicons/favicon-16x16.png rel=icon sizes=16x16 type=image/png><link href=/assets/favicons/site.webmanifest rel=manifest><link color=#000000 href=/assets/favicons/safari-pinned-tab.svg rel=mask-icon><link href=/assets/favicons/favicon.ico rel="shortcut icon"><meta content=Pushword name=apple-mobile-web-app-title><meta content=Pushword name=application-name><meta content=#fff name=msapplication-TileColor><meta content=/assets/favicons/browserconfig.xml name=msapplication-config><meta content=#fff name=theme-color><title> Conversation: Add Comment, Newsletter Form or Contact For </title><link href=/assets/tw.css rel=stylesheet><style>:root{--primary:#ef8206;--secondary:#d97706;--font-family:Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}</style><style>.nojs{display:block}</style><script>document.head.insertAdjacentHTML('beforeend','<style>.nojs{display:none !important}<\/style>')</script><link href=https://pushword.piedweb.com/feed.xml rel=alternate title="Pushword » Flux" type=application/rss+xml><link href=https://pushword.piedweb.com/extension/conversation rel=canonical><link href=https://pushword.piedweb.com/extension/conversation hreflang=en rel=alternate><meta content="Conversation: Add Comment, Newsletter Form or Contact For" name=og:title><meta content=https://pushword.piedweb.com/extension/conversation name=og:url> <body><div class="flex flex-wrap items-stretch max-w-screen-2xl mx-auto"><div class="lg:ml-0 lg:mr-0 lg:w-3/4 mx-auto order-2 w-full"><div class=pt-6></div> <nav aria-label=breadcrumb class="dark:text-gray-300 font-light p-3 text-gray-700 text-sm"><ul><li class=inline-block><a class=hover:underline href=https://pushword.piedweb.com/>Pushword</a> <span class="inline-block px-1">›</span> <li class=inline-block><a class=hover:underline href=/extensions>Find your missing feature with a Pushword Extension</a> </ul> </nav> <div class="flex flex-wrap max-w-5xl"><div class="lg:order-1 lg:w-4/5 order-2 overflow-hidden w-full"><div class="dark:prose-light max-w-none p-3 prose"><h1>Conversation</h1> <p>Extend your Pushword website with <strong>comments</strong>, a <strong>contact</strong> form or just an <strong>user input</strong>.</div> </div> <div class="lg:order-2 lg:w-1/5 order-3 overflow-hidden w-full"><div class="lg:absolute lg:border-gray-200 lg:border-l lg:max-w-xs m-2 max-w-screen-sm p-3 pt-4 rounded"><h3 class="block dark:text-gray-100 font-semibold lg:mb-3 lg:text-xs mb-3 px-1 text-gray-900 text-sm tracking-wide uppercase">Contents</h3> <div class="-ml-6 dark:prose-light max-w-none prose-sm px-1"><ul><li class=first><a href=#install>Install</a> <li><a href=#usage>Usage</a> <ul class=menu_level_1><li class=first><a href=#you-can-use-it-as-is-and-include-it-in-your-page-with-two-manners>You can use it as is and include it in your Page with two manners :</a> <li class=last><a href=#get-mail-notification-for-new-message>Get mail notification for new message</a> </ul> <li><a href=#customization>Customization</a> <li><a href=#small-rendering-customization>Small rendering customization</a> <li class=last><a href=#create-a-new-form>Create a new form</a> </ul> </div></div> </div> <div class="lg:w-4/5 order-4 overflow-hidden w-full"><div class="dark:prose-light max-w-3xl p-3 prose"><h2 id=install>Install</h2> <p>Via <span data-rot=_cnpxntvfg.bet/cnpxntrf/chfujbeq/pbairefngvba>Packagist</span> : <pre><code># Get the Bundle
composer require pushword/conversation
# Add the route to your Routes:
conversation:
resource: '@PushwordConversationBundle/Resources/config/routes/conversation.yaml'
# or do it in 1 command line
# $ sed -i '1s/^/admin:\n resource: "@PushwordConversationBundle\/Resources\/config\/routes\/conversation.yaml"\n/' config/routes.yaml
</code></pre> <p>Update database <pre><code>php bin/console doctrine:schema:update --force
</code></pre> <h2 id=usage>Usage</h2> <h3 id=you-can-use-it-as-is-and-include-it-in-your-page-with-two-manners>You can use it as is and include it in your Page with two manners :</h3> <pre><code class="bash"># Load form via fetch (javascript)
<div data-live="{{ conversation('newsletter') }}"></div>
# =
<div data-live="{{ path('pushword_conversation', {'type': 'newsletter', 'referring': 'newsletter-'~page.slug, 'host': page.host}) }}"></div>
# Render form in Controller
{{ render(controller('Pushword\\Conversation\\Controller\\ConversationFormController::show')) }}
# Or add a button to click before loading block
<button src-data-live="{{ path('pushword_conversation', {'type': 'newsletter', 'referring': 'nslttr-'~page.slug, 'host': page.host}) }}" class="btn btn-primary">Register</button>
</code></pre> <p>Activate the <code>data-live</code> element with <a href="https://yarnpkg.com/package/@pushword/js-helper">@pushword/js-helper</a> : <pre><code>import { liveForm } from "@pushword/js-helper/src/helpers";
// on dom changed and on page loaded&nbsp;:
liveBlock();
```
### Render published comment
```twig
{{ showConversation(referring[, orderBy, limit, template]) }}
</code></pre> <h3 id=get-mail-notification-for-new-message>Get mail notification for new message</h3> <p>Configure the bundle (<code>piedweb_conversation.notification_email_to</code>) and programm a cron : <pre><code>bin/console pushword:conversation:notify
</code></pre> <h2 id=customization>Customization</h2> <h2 id=small-rendering-customization>Small rendering customization</h2> <p>By overriding <code>@PushwordConversation/conversation/conversation.html.twig</code>
(or <code>'@PushwordConversation/conversation/'.$type.'Step'.$step.'.html.twig</code>
or <code>'@PushwordConversation/conversation/'.$type.$referring.'Step'.$step.'.html.twig</code>). <h2 id=create-a-new-form>Create a new form</h2> <p>Per default, there is 3 form types : <code>newsletter</code>, <code>message</code> and <code>multiStepMessage</code>. <p>Add a new class in config <code>piedweb_conversation.form.myNewType: myNewFormClass</code>.</div> </div></div> <div class="flex max-w-3xl mt-5 mx-3"></div> <div class="font-light mt-10 mx-3 text-center text-gray-500 text-sm"><span class="dark:hover:text-gray-100 hover:text-gray-900" data-rot=_tvguho.pbz/Chfujbeq/Chfujbeq/rqvg/znva/cnpxntrf/qbpf/pbagrag/rkgrafvba/pbairefngvba.zq><svg xmlns=http://www.w3.org/2000/svg class="-mt-1 fill-current inline-block w-3" viewbox="0 0 576 512"><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"></path></svg><span class="hidden lg:inline-block ml-2">Edit via github</span></span> </div> <div class=pb-10></div></div> <div class="lg:w-1/4 order-1 w-0"><div class=h-full><input class=hidden id=right-column type=checkbox> <label class="bg-primary block bottom-0 cursor-pointer fixed h-12 hover:bg-opacity-75 left-0 m-2 p-3 w-12 z-50" for=right-column id=right-column-toggler><div class="content-center flex flex-wrap h-6 relative w-6"><span class="block border-b-2 border-gray-100 h-1 w-full"></span> <span class="block border-b-2 border-gray-100 h-1 my-1 w-full"></span> <span class="block border-b-2 border-gray-100 h-1 w-full"></span></div> </label> <div class="bg-white border-gray-200 border-r dark:bg-gray-900 dark:border-gray-700 h-full lg:block lg:border-r-0 lg:mx-auto lg:top-18 md:py-9 mr-24 overflow-hidden pl-1 pr-3 py-6 sticky text-sm w-60 z-40" id=right-column-nav><a class="block dark:text-gray-100 font-semibold lg:mb-3 lg:text-xs mb-3 mt-3 px-3 text-gray-900 text-sm tracking-wide uppercase" href=/installation> Get Started</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/> Introduction</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/installation> Installation</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/configuration> Configuration</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/upgrade> Upgrade Guide</a> <a class="block dark:text-gray-100 font-semibold lg:mb-3 lg:text-xs mb-3 mt-3 px-3 text-gray-900 text-sm tracking-wide uppercase" href=/command> Usage</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/command> Command</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/editor> Editor</a> <a class="block dark:text-gray-100 font-semibold lg:mb-3 lg:text-xs mb-3 mt-3 px-3 text-gray-900 text-sm tracking-wide uppercase" href=/themes> Theme</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/themes> Find a Theme</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/manage-assets> Customize the assets (css/js)</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/override-theme> Override the template files</a> <a class="block dark:text-gray-100 font-semibold lg:mb-3 lg:text-xs mb-3 mt-3 px-3 text-gray-900 text-sm tracking-wide uppercase" href=/extensions> Extensions</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/extensions> Find an extension</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/create-extension> Create an extension</a> <a class="block dark:text-gray-100 font-semibold lg:mb-3 lg:text-xs mb-3 mt-3 px-3 text-gray-900 text-sm tracking-wide uppercase" href=/contribute> Contribute</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/contribute> Issues and Pull Request</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/architecture> The Architecture</a> <a class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" href=/roadmap> Roadmap</a> <span class="block dark:text-gray-100 duration-200 hover:text-primary px-3 py-2 relative rounded text-gray-900 transition-colors" data-rot=_tvguho.pbz/Chfujbeq/Chfujbeq><div style=display:inline-block;margin-bottom:-2px><svg xmlns=http://www.w3.org/2000/svg class="bi bi-github" fill=currentColor height=16 viewbox="0 0 16 16" width=16><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></div> Source Code</span></div></div> <script>document.addEventListener('DOMContentLoaded',function(){if(window.screen.width>=1025){document.querySelector('#right-column').checked=!0;document.querySelector('#right-column-toggler').classList.add('lg:hidden')}})</script> <style>#right-column:checked~label span:nth-child(1){transform:rotate(45deg) translateY(.2rem) translateX(.1rem)}#right-column:checked~label span:nth-child(2){border-color:transparent;margin:0 !important}#right-column:checked~label span:nth-child(3){transform:rotate(-45deg) translateY(-.3rem) translateX(.1rem)}#right-column:not(:checked)~#right-column-nav{height:0 !important;width:0;padding:0;margin:0}#right-column:checked~label{left:15rem}</style></div></div> <footer class="bg-gray-50 border-t border-yellow-50 dark:bg-gray-900 dark:border-gray-700 shadow-inner shadow-sm text-sm"><div class="max-w-screen-md mx-auto p-3 py-10 text-right"><a class="block hover:opacity-75 mb-3 text-2xl text-primary" href=/>Pushword</a> Crafted by Robin from <a class="hover:opacity-75 text-primary" href=https://piedweb.com>Pied Web</a>. </div> </footer> <header class="fixed flex flex-col left-0 right-0 top-0 z-50"><div class="bg-gray-50 border-b border-gray-50 dark:bg-gray-900 dark:border-gray-700 flex flex-row items-center justify-between px-4 py-2 shadow-sm"><span class="block font-mono mr-1 text-2xl"><a class="flex font-bold hover:text-primary logo text-primary" href=https://pushword.piedweb.com/><span class="bg-center bg-contain fill-current h-12 inline-block text-primary w-12" style="background-image:url('/assets/logo.svg')"></span> <span class="hidden lg:inline-block ml-2 mt-2 text-small">Pushword</span></a> </span> <div class="flex flex-1 flex-row md:mx-6 mx-3"><input class="bg-white border-2 border-white dark:bg-gray-700 focus:border-primary focus:w-60 md:focus:w-full md:rounded-l-lg md:w-full outline-none px-2 py-1 rounded rounded-r-none text-xl w-20" id=search placeholder=Search type=text> <button class="bg-primary font-bold hover:opacity-75 md:block px-4 py-2 rounded-r-lg text-white" onclick="document.querySelector('#search').focus()"><svg xmlns=http://www.w3.org/2000/svg fill=currentColor height=16 viewbox="0 0 16 16" width=16><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path> </svg> </button></div> <nav class=nav><ul class="flex space-x-1"><li><a class="duration-200 font-bold hover:opacity-75 inline-block px-3 py-4 rounded-lg text-primary transition-colors" href=/installation>Docs</a> <li><a class="duration-200 font-bold hidden hover:opacity-75 md:inline-block px-3 py-4 rounded-lg text-primary transition-colors" href=/extensions>Extensions</a> <li><a class="duration-200 font-bold hidden hover:opacity-75 md:inline-block px-3 py-4 rounded-lg text-primary transition-colors" href=/contribute>Contribute</a> <li><a class="duration-200 font-bold hidden hover:opacity-75 md:inline-block px-3 py-4 rounded-lg text-primary transition-colors" href=/roadmap>Roadmap</a></ul> </nav></div> <div class="bg-gray-100 flex flex-col md:px-20 px-5 rounded-b-200" id=search-results></div></header> <style>body{margin-top:85px}a.logo:hover{filter:sepia(20%)}:root{--tw-ring-color:transparent}</style> <script src=/assets/app.js></script>