clean up and improve demos

Remove demo/without_bundled_dependencies.html
This commit is contained in:
JC Brand 2019-05-10 12:56:45 +02:00
parent 9dface5a49
commit 5b4224b5f9
4 changed files with 123 additions and 200 deletions

View File

@ -9,47 +9,65 @@
<meta name="author" content="JC Brand" />
<meta name="keywords" content="xmpp chat webchat converse.js" />
<link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/>
<link type="text/css" rel="stylesheet" media="screen" href="/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/css/theme.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/website.min.css" />
<script type="text/javascript" src="../analytics.js"></script>
<noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<![if gte IE 11]>
<link type="text/css" rel="stylesheet" media="screen" href="/css/converse.min.css" />
<script src="/dist/converse.min.js"></script>
<![if gt IE 11]>
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/converse.min.css" />
<script src="https://cdn.conversejs.org/4.2.0/dist/converse.min.js"></script>
<![endif]>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
</div>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav"><li> <a href="/docs/html/index.html">Documentation</a> </li>
</ul>
</div>
</div>
</nav>
<body>
<section class="section-wrapper">
<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<span class="page-scroll">
<a class="navbar-brand" href="/"><span class="converse-brand-heading">Home</span></a>
<a class="navbar-brand" href="/demo"><span class="converse-brand-heading">Demos</span></a>
</span>
</div>
</nav>
<section class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse</h1>
<p class="intro-text">Anonymous login demo</p>
</div>
</div>
<section id="intro" class="intro" class="container">
<div class="row">
<div class="col-md-12 col-md-offset-2">
<h1 class="brand-heading fade-in">
<svg class="converse-svg-logo"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 364 364">
<title>Home</title>
<g class="cls-1" id="g904">
<g data-name="Layer 2">
<g data-name="Layer 7">
<path
class="cls-3"
d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />
<path
class="cls-4"
d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />
</g>
</g>
</g>
</svg>
<span class="brand-heading__text">
<span>converse<span class="subdued">.js</span></span>
<p class="byline">messaging freedom</p>
</span>
</h1>
<p class="intro-text">Anonymous login demo</p>
</div>
</div>
</section>
</section>
</body>
<script>
/*
/*
@licstart
This is free and unencumbered software released into the public domain.

View File

@ -11,14 +11,12 @@
<link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/>
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/website.min.css" />
<script type="text/javascript" src="/src/website.js"></script>
<script type="text/javascript" src="/analytics.js"></script>
<noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<![if gte IE 11]>
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/converse.min.css" />
<script src="https://cdn.conversejs.org/4.2.0/dist/converse.min.js"></script>
<![endif]>
<style>
.converse-container {
height: 55vh;
@ -27,50 +25,47 @@
</head>
<body id="page-top" data-spy="scroll">
<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="/"><span class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</span></a>
<ul class="navbar-nav mt-2 mt-lg-0">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="nav-link" href="#page-top"></a>
</li>
<li class="nav-item page-scroll">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item page-scroll">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item page-scroll">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item page-scroll">
<a class="nav-link" href="#sponsors">Sponsor</a>
</li>
<li class="nav-item page-scroll">
<a class="nav-link" href="#hosting">Hosting</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/docs/html/index.html">Documentation&nbsp;<i class="fa fa-external-link-alt"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/conversejs/converse.js/releases" class="button" target="_blank" rel="noopener">Download&nbsp;<i class="fa fa-external-link-alt"></i></a>
</li>
</ul>
</div>
</nav>
<section class="section-wrapper">
<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<span class="page-scroll">
<a class="navbar-brand" href="/"><span class="converse-brand-heading">Home</span></a>
<a class="navbar-brand" href="/demo"><span class="converse-brand-heading">Demos</span></a>
</span>
</div>
</nav>
<section class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading brand-heading-embedded"><a style="color: white;" href="/"><i class="icon-conversejs"></i>Converse</a></h1>
<p class="intro-text">Embedded MUC chat demo</p>
<div class="col-md-12">
<h1 class="brand-heading fade-in">
<svg class="converse-svg-logo"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 364 364">
<title>Home</title>
<g class="cls-1" id="g904">
<g data-name="Layer 2">
<g data-name="Layer 7">
<path
class="cls-3"
d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />
<path
class="cls-4"
d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />
</g>
</g>
</g>
</svg>
<span class="brand-heading__text">
<span>converse<span class="subdued">.js</span></span>
<p class="byline">messaging freedom</p>
</span>
</h1>
<p class="intro-text">Embedded MUC chat demo</p>
<div class="converse-container">
<div id="conversejs"></div>
</div>
@ -79,6 +74,7 @@
</div>
</div>
</section>
</section>
</body>
<script>

View File

@ -10,71 +10,67 @@
<meta name="keywords" content="xmpp chat webchat converse.js" />
<link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
<link type="text/css" rel="stylesheet" media="screen" href="/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/css/website.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/css/converse.min.css" />
<script src="/src/website.js"></script>
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/website.min.css" />
<script type="text/javascript" src="/analytics.js"></script>
<noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<![if gte IE 9]>
<script src="/dist/converse.min.js"></script>
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/converse.min.css" />
<script src="https://cdn.conversejs.org/4.2.0/dist/converse.min.js"></script>
<![endif]>
</head>
<body id="page-top" data-spy="scroll">
<section class="section-wrapper">
<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="/"><span class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</span></a>
<ul class="navbar-nav mt-2 mt-lg-0">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="nav-link" href="#page-top"></a>
</li>
<li class="nav-item page-scroll">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item page-scroll">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item page-scroll">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item page-scroll">
<a class="nav-link" href="#sponsors">Sponsor</a>
</li>
<li class="nav-item page-scroll">
<a class="nav-link" href="#hosting">Hosting</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/docs/html/index.html">Documentation&nbsp;<i class="fa fa-external-link-alt"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/conversejs/converse.js/releases" class="button" target="_blank" rel="noopener">Download&nbsp;<i class="fa fa-external-link-alt"></i></a>
</li>
</ul>
</div>
</nav>
<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<span class="page-scroll">
<a class="navbar-brand" href="/"><span class="converse-brand-heading">Home</span></a>
</span>
</div>
</nav>
<section class="intro" class="container">
<section id="intro" class="intro" class="container">
<div class="row">
<div class="col-md-12 col-md-offset-2">
<h1 class="brand-heading"><i class="icon-conversejs"></i> Converse</h1>
<h1 class="brand-heading fade-in">
<svg class="converse-svg-logo"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 364 364">
<title>Home</title>
<g class="cls-1" id="g904">
<g data-name="Layer 2">
<g data-name="Layer 7">
<path
class="cls-3"
d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />
<path
class="cls-4"
d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />
</g>
</g>
</g>
</svg>
<span class="brand-heading__text">
<span>converse<span class="subdued">.js</span></span>
<p class="byline">messaging freedom</p>
</span>
</h1>
<p class="intro-text">Demos:</p>
<p class="intro-text">
<ul style="list-style: none; font-size: 22px;">
<li><a href="/fullscreen.html">As a fullscreen application</a></li>
<li><a href="/demo/anonymous.html">Anonymous login</a></li>
<li><a href="/demo/embedded.html">Single MUC chatroom embedded into the page</a></li>
<li><a href="/demo/without_bundled_dependencies.html">Dependencies loaded externally as &lt;script&gt; tags</a></li>
</ul>
</p>
</div>
</div>
</section>
</section>
</section>
</body>

View File

@ -1,87 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Converse.js (Non-AMD Example)</title>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Converse.js: A free chat client for your website" />
<meta name="author" content="JC Brand" />
<link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/>
<link type="text/css" rel="stylesheet" media="screen" href="/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/css/theme.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/css/converse.min.css" />
<!-- BEGIN OTR: Off-the-record encryption stuff. Can be omitted if OTR is not used. -->
<script type="text/javascript" src="../node_modules/otr/build/dep/crypto.js"></script>
<script type="text/javascript" src="../node_modules/otr/build/dep/salsa20.js"></script>
<script type="text/javascript" src="../node_modules/otr/build/dep/bigint.js"></script>
<script type="text/javascript" src="../node_modules/otr/build/dep/eventemitter.js"></script>
<script type="text/javascript" src="../node_modules/otr/build/otr.js"></script>
<!-- END OTR -->
<!-- BEGIN STROPHE -->
<script type="text/javascript" src="../node_modules/strophe.js/strophe.js"></script>
<script type="text/javascript" src="../node_modules/strophejs-plugin-vcard/strophe.vcard.js"></script>
<script type="text/javascript" src="../node_modules/strophejs-plugin-disco/strophe.disco.js"></script>
<script type="text/javascript" src="../node_modules/strophejs-plugin-rsm/strophe.rsm.js"></script>
<script type="text/javascript" src="../node_modules/strophejs-plugin-ping/strophe.ping.js"></script>
<!-- END STROPHE -->
<script type="text/javascript" src="../node_modules/snabbdom/dist/snabbdom.js"></script>
<script type="text/javascript" src="../node_modules/snabbdom/dist/snabbdom-attributes.js"></script>
<script type="text/javascript" src="../node_modules/snabbdom/dist/snabbdom-class.js"></script>
<script type="text/javascript" src="../node_modules/snabbdom/dist/snabbdom-dataset.js"></script>
<script type="text/javascript" src="../node_modules/snabbdom/dist/snabbdom-eventlisteners.js"></script>
<script type="text/javascript" src="../node_modules/snabbdom/dist/snabbdom-props.js"></script>
<script type="text/javascript" src="../node_modules/snabbdom/dist/snabbdom-style.js"></script>
<!-- BEGIN BACKBONE -->
<script type="text/javascript" src="../node_modules/lodash/lodash.js"></script>
<script type="text/javascript" src="../node_modules/backbone/backbone.js"></script>
<script type="text/javascript" src="../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
<script type="text/javascript" src="../node_modules/backbone.browserStorage/backbone.browserStorage.js"></script>
<script type="text/javascript" src="../node_modules/backbone.overview/dist/backbone.overview.js"></script>
<script type="text/javascript" src="../node_modules/backbone.overview/dist/backbone.orderedlistview.js"></script>
<script type="text/javascript" src="../node_modules/backbone.vdomview/dist/backbone.vdomview.js"></script>
<!-- END BACKBONE -->
<script type="text/javascript" src="../node_modules/awesomplete-avoid-xss/awesomplete.js"></script>
<script type="text/javascript" src="../node_modules/moment/min/moment-with-locales.js"></script>
<script type="text/javascript" src="../3rdparty/lodash.fp.js"></script>
<script src="../dist/converse-no-dependencies.js"></script>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<section class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse</h1>
<p class="intro-text">An example page where external dependencies are loaded seperately and not within the converse.js bundle.</p>
<p class="intro-text">Look at the page source for details.</p>
<p class="intro-text">For this page to work, you'll need to
<a href="https://conversejs.org/docs/html/developer_guidelines.html#installing-the-development-and-front-end-dependencies">
install the 3rd party dependencies</a> of converse.js.
</p>
<div class="page-scroll">
</div>
</div>
</div>
</div>
</div>
</section>
</body>
<script>
converse.initialize({
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
prebind: false,
show_controlbox_by_default: true,
debug: true,
roster_groups: true,
keepalive: true
});
</script>
</html>