Skip to content

Commit

Permalink
✨ Add demo app with restheart
Browse files Browse the repository at this point in the history
  • Loading branch information
ujibang committed Sep 26, 2024
1 parent ed9873f commit 59d5d55
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 13 deletions.
1 change: 1 addition & 0 deletions _includes/docs-sidebar.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ <h2>Overview</h2>
<li><a href="/docs/upgrade-to-v8"><strong>Upgrade to v8</strong></a></li>
<li><a href="/docs">Overview</a></li>
<li><a href="/docs/faq">FAQ</a></li>
<li><a href="/docs/mongodb-rest/demo-webapp">Demo WebApp with RESTHeart</a></li>
<li><a href="/docs/performances">Performances</a></li>
<li><a href="https://github.com/SoftInstigate/restheart/issues?q=is%3Aissue+is%3Aopen+label%3A%22feature+request%22">Roadmap</a></li>
<li><a href="/docs/plugins/tutorial">Framework Tutorial</a></li>
Expand Down
3 changes: 0 additions & 3 deletions css/fedora.css
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,10 @@ h2,h3,h4,h5,h6{color:var(--primarycolor) !important;}
.title{font-style: normal; font-weight: normal;}
a{text-decoration: none;}
#toc.toc2 a:link{color:var(--linkcolor);}
blockquote{color:var(--linkcoloralternate) !important}
.quoteblock blockquote:before{color:var(--linkcoloralternate)}
/* code{color:var(--white);background-color: var(--highlightcolor) !important} */
mark{background-color: var(--highlightcolor);} /* Text highlighting color */
.highlightcolor {font-family: "Space Mono"; color: var(--highlightcolor) !important; } /* Text highlighting color */
.background-primary{background-color: var(--primarycolor);}

#toc.toc2{background-color:var(--sidebarbackground);}
#toctitle{color:var(--white);}

Expand Down
142 changes: 142 additions & 0 deletions docs/mongodb-rest/demo-webapp.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
---
title: Demo WebApp
layout: default
menu: mongodb
---

<header class="container mt-5">
<hgroup>
<h2>Post & View Messages</h2>
<p class="mt-10">A simple web app to view and post messages using RESTHeart's built-in REST API on MongoDB.</p>
<p class="mt-6"><small class="mt-10">Backend made with <a href="https://restheart.org">RESTHeart</a> • Frontend made with <a href="https://alpinejs.dev/" target="_blank">Alpine.js</a> and <a href="https://picocss.com/" target="_blank">Picocss</a><a href="https://codepen.io/ujibang/pen/yLmyvEd" target="_blank">Source Code</a></p>
</hgroup>
</header>

<main class="container" x-data="{ page: 1, docs: [], from: '', message: '' }">
<div class="d-flex-end">
<button class="outline" @click="postMsgDialog.showModal()">New Message</button>
</div>
<section class="mt-5">
<div class="d-flex-wrap">
<template x-init="docs = await fetchDocs(page)" x-for="doc in docs" :key="doc._id.$oid">
<blockquote>
<span x-text="doc.message"></span>
<footer>
<cite>- </span> <span x-text="doc.from"></span> on <span x-text="new Date(doc.timestamp['$date']).toLocaleDateString('it-IT')"></span></cite>
</footer>
</blockquote>
</div>
</template>
</div>
<div class="d-flex text-center">
<a href="#" class="no-decoration" @click="if (page > 1) docs = await fetchDocs(--page)">
<h5>&lt;</h5>
</a>
<h5 x-text="page"></h5>
<a href="#" class="no-decoration" @click="docs = await fetchDocs(++page)">
<h5>&gt;</h5>
</a>
</div>
</section>
<dialog id="postMsgDialog">
<form>
<article class="mw-600 p-4">
<header>
<button aria-label="Close" rel="prev" @click="postMsgDialog.close()"></button>
<h3>Post your message</h3>
</header>

<hgroup>
<input type="text" name="from" placeholder="Your name..." aria-label="Your name..." required x-model="from" />
<textarea rows="3" name="message" placeholder="Your Message..." aria-label="Your Message..." required x-model="message"></textarea>
</hgroup>

<footer>
<button @click="post(from, message); page = 1; docs = await fetchDocs(page)">Post</button>
</footer>
</article>
</form>
</dialog>
</main>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<script src="//unpkg.com/alpinejs" defer></script>
<script>
const fetchDocs = (page) =>
fetch(
encodeURI(`https://demo.restheart.org/messages?page=${page}&pagesize=8`)
).then((response) => response.json());

const post = (from, message) =>
fetch("https://demo.restheart.org/messages", {
method: "post",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify({ from, message })
});

const postMsgDialog = document.getElementById('postMsgDialog');
</script>

<style>

header {
padding: 0 !important;
}

blockquote footer {
padding-top: 0 !important;
padding-bottom: 0 !important;
}

.mt-10 {
margin-top: 10px;
}

.mt-6 {
margin-top: 6px;
}

.mw-260 {
max-width: 260px;
}

.mw-600 {
min-width: 600px;
}

.text-center {
text-align: center;
}

.no-decoration {
text-decoration: none;
}

blockquote {
width:240px;
}

.d-flex-end {
display: flex;
justify-content: flex-end
}

.d-flex-wrap {
justify-content: center;
display: flex;
row-gap: 46px;
column-gap: 16px;
flex-wrap: wrap;
}

.d-flex {
display: flex; justify-content: center; gap: 16px;
}

blockquote cite {
color: grey;
}
</style>
10 changes: 0 additions & 10 deletions index.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,16 +59,6 @@ stars-bounce: true
}, '#sophiaFrame' );
</script>

<!-- <section id="demo-webapp" class="pt-2 pb-2">
<h3 class="font-weight-bold highlightcolor mt-3 text-center">Simple Demo Web App</h3>
<p class="codepen" data-height="900" data-theme-id="dark" data-default-tab="result" data-slug-hash="yLmyvEd" data-pen-title="RESTHeart Demo Web App" data-user="ujibang" style="height: 900px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/ujibang/pen/yLmyvEd">
RESTHeart Demo Web App</a> by Andrea Di Cesare (<a href="https://codepen.io/ujibang">@ujibang</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</section> -->

<!-- <section id="article-at-aws-blog" class="call-to-action black-background">
<div class="container-fluid">
<div class="row">
Expand Down

0 comments on commit 59d5d55

Please sign in to comment.