-
Notifications
You must be signed in to change notification settings - Fork 0
/
conversation.html
31 lines (25 loc) · 14.3 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
<!DOCTYPE html><html class="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{--bg:#fff;--primary:#d97706;--primary-light:#f59e0b}</style><script>document.head.insertAdjacentHTML('beforeend','<style>.nojs{display:none}<\/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-xl mx-auto"><div class="lg:ml-0 lg:mr-0 lg:w-3/4 mx-auto order-2 w-full"><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> › <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"><div class="lg:order-1 lg:w-4/5 order-2 overflow-hidden w-full"><div class="dark:prose-light 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="border border-gray-200 dark:border-gray-700 lg:absolute lg:max-w-xs m-2 max-w-screen-sm p-2 pt-4 rounded"><h3 class="block dark:text-gray-100 font-semibold lg:mb-3 lg:text-xs mb-3 px-3 text-gray-900 text-sm tracking-wide uppercase">Contents</h3> <div class="dark:prose-light prose-sm"><ul><li class=first><a href=#install>Install</a> <li><a href=#usage>Usage</a> <ul class=menu_level_2><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 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'
</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> <div class="lg:w-auto 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-primary-light 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:mr-3 lg:top-18 mr-24 overflow-hidden px-3 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> Getting Started</a> <a class="block dark:text-gray-100 duration-200 hover:bg-primary-light hover:text-white px-3 py-2 relative rounded text-gray-900 transition-colors" href=/> Introduction</a> <a class="block dark:text-gray-100 duration-200 hover:bg-primary-light hover:text-white 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:bg-primary-light hover:text-white 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:bg-primary-light hover:text-white px-3 py-2 relative rounded text-gray-900 transition-colors" href=/upgrade> Upgrade Guide</a> <a class="block dark:text-gray-100 duration-200 hover:bg-primary-light hover:text-white px-3 py-2 relative rounded text-gray-900 transition-colors" href=/cookbook> Cookbook</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:bg-primary-light hover:text-white 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:bg-primary-light hover:text-white px-3 py-2 relative rounded text-gray-900 transition-colors" href=#> Customize the current theme or change the theme</a> <a class="block dark:text-gray-100 duration-200 hover:bg-primary-light hover:text-white px-3 py-2 relative rounded text-gray-900 transition-colors" href=#> Override the Current Theme</a> <a class="block dark:text-gray-100 duration-200 hover:bg-primary-light hover:text-white px-3 py-2 relative rounded text-gray-900 transition-colors" href=#> Create a new theme</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=/create-extension> Extensions</a> <a class="block dark:text-gray-100 duration-200 hover:bg-primary-light hover:text-white 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:bg-primary-light hover:text-white px-3 py-2 relative rounded text-gray-900 transition-colors" href=#> Customize your Pushword installation</a> <a class="block dark:text-gray-100 duration-200 hover:bg-primary-light hover:text-white px-3 py-2 relative rounded text-gray-900 transition-colors" href=/create-extension> Create an extension (and package it)</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:bg-primary-light hover:text-white 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:bg-primary-light hover:text-white 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:bg-primary-light hover:text-white 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:bg-primary-light hover:text-white 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}#right-column:checked~label{left:15rem}</style></div></div> <footer class="border-gray-200 border-t dark:border-gray-700 mt-10 text-sm"><div class="max-w-screen-md mx-auto p-3 py-10 text-right"><a class="block hover:text-primary-light mb-3 text-2xl text-primary" href=/>Pushword</a> Design by <a class="hover:text-primary-light 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-white border-b border-gray-200 dark:bg-gray-900 dark:border-gray-700 flex flex-row items-center justify-between p-4"><span class="block font-mono mr-1 text-4xl"><a class="flex font-bold hover:text-primary-light logo text-primary" href=https://pushword.piedweb.com/><span class="bg-center bg-contain fill-current h-12 inline-block text-primary-light 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-gray-50 border-none dark:bg-gray-700 focus:border-none focus:outline-none focus:shadow-none focus:w-60 md:focus:w-full md:rounded-l-lg md:rounded-r-none md:w-full px-2 py-1 rounded text-xl w-20" id=search placeholder=Search type=text> <button class="bg-primary-light font-bold hidden hover:bg-primary md:block px-4 py-4 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="hidden hover:bg-primary-light hover:text-white md:inline-block px-3 py-4 rounded text-primary" href=/installation>Getting Started</a> <li><a class="hover:bg-primary-light hover:text-white inline-block px-3 py-4 rounded text-primary" href=/themes>Themes</a> <li><a class="hover:bg-primary-light hover:text-white inline-block px-3 py-4 rounded text-primary" href=/extensions>Extensions</a> <li><a class="hidden hover:bg-primary-light hover:text-white md:inline-block px-3 py-4 rounded text-primary" href=/contribute>Contribute</a> <li><a class="hidden hover:bg-primary-light hover:text-white md:inline-block px-3 py-4 rounded text-primary" 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:120px}a.logo:hover{filter:sepia(50%)}:root{--tw-ring-color:transparent}</style> <script src=/assets/app.js></script>