Skip to content

Commit

Permalink
chore: update examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@digitalsadhu
digitalsadhu committed Nov 14, 2024
1 parent d954732 commit fa559f9
Show file tree
Hide file tree
Showing 8 changed files with 673 additions and 188 deletions.
35 changes: 23 additions & 12 deletions example/streaming/podlets/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ import Podlet from '@podium/podlet';
import express from 'express';

const podlet = new Podlet({
name: 'content',
name: 'content-podlet',
version: Date.now().toString(),
pathname: '/',
useShadowDOM: true,
});

podlet.css({ value: 'http://localhost:6103/css' });
podlet.css({ value: 'http://localhost:6103/css', strategy: 'shadow-dom' });

const app = express();

Expand All @@ -20,15 +21,23 @@ app.get('/manifest.json', (req, res) => {
app.get('/css', (req, res) => {
res.set('Content-Type', 'text/css');
res.send(`
.content {
border: 1px solid black;
border-radius: 5px;
width: 100%;
padding: 20px;
margin: 0;
margin-bottom: 20px;
box-sizing: border-box;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.content {
width: 100%;
display: flex;
flex-direction: column;
gap: 1em;
font-family: Verdana, serif;
font-weight: 400;
font-style: normal;
}
h1 {
color: #136C72;
}
`);
});

Expand All @@ -40,7 +49,9 @@ app.get('/', async (req, res) => {

res.podiumSend(`
<section class="content">
main content goes here
<h1>Podlets fetched and composed, on demand, just for you</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</section>
`);
});
Expand Down
59 changes: 46 additions & 13 deletions example/streaming/podlets/footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ import Podlet from '@podium/podlet';
import express from 'express';

const podlet = new Podlet({
name: 'footer',
name: 'footer-podlet',
version: Date.now().toString(),
pathname: '/',
useShadowDOM: true,
});

podlet.css({ value: 'http://localhost:6104/css' });
podlet.css({ value: 'http://localhost:6104/css', strategy: 'shadow-dom' });

const app = express();

Expand All @@ -20,27 +21,59 @@ app.get('/manifest.json', (req, res) => {
app.get('/css', (req, res) => {
res.set('Content-Type', 'text/css');
res.send(`
footer {
border: 1px solid black;
border-radius: 5px;
width: 100%;
padding: 20px;
margin: 0;
margin-bottom: 20px;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
footer {
width: 100%;
background-color: #23424A;
color: white;
padding: 1em 0 6em 0;
font-family: Verdana, serif;
font-weight: 400;
font-style: normal;
}
.container {
width: 75%;
max-width: 1000px;
margin: 0 auto;
}
ul {
list-style: none;
display: flex;
justify-content: space-evenly;
align-items: center;
}
a {
text-transform: upper-case;
color: white;
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
`);
});

app.get('/', async (req, res) => {
// send headers
res.sendHeaders();

await new Promise((res) => setTimeout(res, 1250));
await new Promise((res) => setTimeout(res, 100));

res.podiumSend(`
<footer>
footer content
<div class="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Sign in</a></li>
<li><a href="#">Sign up</a></li>
</ul>
</div>
</footer>
`);
});
Expand Down
78 changes: 60 additions & 18 deletions example/streaming/podlets/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ import Podlet from '@podium/podlet';
import express from 'express';

const podlet = new Podlet({
name: 'header',
name: 'header-podlet',
version: Date.now().toString(),
pathname: '/',
useShadowDOM: true,
});

podlet.css({ value: 'http://localhost:6101/css' });
podlet.css({ value: 'http://localhost:6101/css', strategy: 'shadow-dom' });

const app = express();

Expand All @@ -20,32 +21,73 @@ app.get('/manifest.json', (req, res) => {
app.get('/css', (req, res) => {
res.set('Content-Type', 'text/css');
res.send(`
header {
border: 1px solid black;
border-radius: 5px;
width: 100%;
padding: 20px;
margin: 0;
margin-bottom: 20px;
box-sizing: border-box;
}
header h1 {
text-align: center;
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
width: 100%;
padding: 6em 0;
background-color: #23424A;
font-size: 1.5rem;
font-family: "Verdana", sans-serif;
font-weight: 400;
font-style: normal;
color: white;
}
h1 {
font-size: 3rem;
color: white;
font-family: "Verdana", sans-serif;
font-weight: 900;
font-style: normal;
}
.container {
width: 75%;
max-width: 1000px;
margin: 0 auto;
}
.inner-container {
display: flex;
flex-direction: column;
gap: 1em;
}
.button {
color: black;
background-color: #38CFD9;
padding: 0.5em 1.25em;
border-radius: 1em;
text-decoration: none;
width: fit-content;
}
.button:hover, .button:active {
text-decoration: underline;
width: fit-content;
}
@media (min-width: 800px) {
.inner-container {
width: 70%;
}
}
`);
});

app.get('/', async (req, res) => {
// send headers
res.sendHeaders();

await new Promise((res) => setTimeout(res, 3500));
await new Promise((res) => setTimeout(res, 100));

res.podiumSend(`
<header>
<h1>Header</h1>
<div class="container">
<div class="inner-container">
<h1>Podium layouts can be composed using streaming</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<a href="#" class="button">I want to learn</a>
</div>
</div>
</header>
`);
});
Expand Down
70 changes: 39 additions & 31 deletions example/streaming/podlets/menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ import Podlet from '@podium/podlet';
import express from 'express';

const podlet = new Podlet({
name: 'menu',
name: 'menu-podlet',
version: Date.now().toString(),
pathname: '/',
useShadowDOM: true,
});

podlet.css({ value: 'http://localhost:6102/css' });
podlet.css({ value: 'http://localhost:6102/css', strategy: 'shadow-dom' });

const app = express();

Expand All @@ -20,46 +21,53 @@ app.get('/manifest.json', (req, res) => {
app.get('/css', (req, res) => {
res.set('Content-Type', 'text/css');
res.send(`
menu {
border: 1px solid black;
border-radius: 5px;
width: 100%;
padding: 10px;
margin: 0;
margin-bottom: 20px;
box-sizing: border-box;
}
menu ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-evenly;
align-items: center;
}
menu ul li {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu {
width: 100%;
background-color: #136C72;
padding: 1em 0;
font-family: Verdana, serif;
font-weight: 400;
font-style: normal;
}
.menu ul {
list-style: none;
display: flex;
justify-content: space-evenly;
align-items: center;
}
a {
text-transform: upper-case;
color: white;
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
`);
});

app.get('/', async (req, res) => {
// send headers
res.sendHeaders();

// imagine this is your slow database call
await new Promise((res) => setTimeout(res, 1000));
// imagine this is your slow database call
await new Promise((res) => setTimeout(res, 100));

res.podiumSend(`
<menu>
<nav class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/things">Things</a></li>
<li><a href="/stuff">Stuff</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Sign in</a></li>
<li><a href="#">Sign up</a></li>
</ul>
</menu>
</nav>
`);
});

Expand Down
Loading

0 comments on commit fa559f9

Please sign in to comment.