Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

demo/home page walkthrough slideshow #17

Closed
wants to merge 1 commit into from
Closed

demo/home page walkthrough slideshow #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 24 additions & 5 deletions src/pages/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,26 @@

</div>

<div class="card">

<div class="walkthrough">
<div class="banner" style="width:100%">
<h2> Go from zero to fullstack with web standards! 🚀</h2>
</div>

<h3>Greenwood is HTML first by design. Start from just an <i>index.html</i> file or leverage hybrid, file-system based routing to easily achieve static and dynamic pages side-by-side. Markdown is also supported.</h3>
<div>
<ol>
<li>1) HTML First</li>
<li>2) Server Side Rendering</li>
<li>3) Web Components</li>
<li>4) API Routes</li>
</ol>
<pre>
</pre>
</div>
</div>

<div class="walkthrough-card card card1">

### Greenwood is HTML first by design. Start from just an _index.html_ file or leverage hybrid, file-system based routing to easily achieve static and dynamic pages side-by-side. Markdown is also supported.

Expand All @@ -41,7 +60,7 @@

</div>

<div class="card">
<div class="walkthrough-card card card2">

### Server rendered pages are just custom elements ("Web Server Components"), that can of course consume other Web Components for entirely standards based server-side rendering with <i>no</i> client-side JavaScript by default.

Expand Down Expand Up @@ -75,7 +94,7 @@

</div>

<div class="card">
<div class="walkthrough-card card card3">

### Web Components are fully isomorphic in Greenwood and so the same definition can be used on the client and the server! With the power of WCC, you can use real standards based Web Components, meaning you are free to use Light DOM <i>or</i> Shadow DOM

Expand Down Expand Up @@ -118,9 +137,9 @@

</div>

<div class="card">
<div class="walkthrough-card card card4">

### Include API Routes for easy client side data loading using the latest in web standards like Fetch, FormData, and Request and Response on both the frontend and the backend. You can even return HTML rendered out from Web Components. Don't be scared it's just HTML, you got this!
### Include API Routes for easy client side data loading using the latest in web standards like Fetch, FormData, and Request and Response on both the frontend and the backend. You can even return HTML rendered out from Web Components. HTML, ftw!

```js
// api/search.js
Expand Down
88 changes: 88 additions & 0 deletions src/templates/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,57 @@
display: block;
}

.walkthrough {
border: solid 3px var(--color-secondary);
padding: 30px;
margin: 30px auto;
border-radius: 10px;
width: 60%;
min-height: 300px;
color: var(--color-white);
background-color: var(--color-accent);
}

.walkthrough h3 {
padding: 0 20px;
display: block;
font-size: 1.5em;
text-align: center;
width: 90%;
margin: 10px auto;
}

.walkthrough div pre {
display: inline-block;
width: 60%;
border-radius: 10px;
background-color: var(--color-secondary);
padding: 15px;
overflow: auto;
}

.walkthrough ol {
list-style-type: none;
display: inline-block;
width: 30%;
vertical-align: top;
font-size: 1.5rem;
}

.walkthrough ol li {
cursor: pointer;
}

.walkthrough ol li.active {
background-color: var(--color-secondary);
border-radius: 5px;
padding-left: 5px;
}

.walkthrough-card {
display: none;
}

.card {
border: solid 3px var(--color-secondary);
padding: 30px;
Expand Down Expand Up @@ -185,6 +236,7 @@
width: 49%;
margin: 10px auto;
display: inline-block;
color: var(--color-secondary);
}

h3 u {
Expand All @@ -195,6 +247,35 @@
color: var(--color-white);
}
</style>

<script>
window.addEventListener('DOMContentLoaded', () => {
const targetHeading = document.querySelector('.walkthrough h3');
const targetCode = document.querySelector('.walkthrough pre');
const items = document.querySelectorAll('.walkthrough ol li');
let index = 0;

const fromCode = document.querySelector(`.card${index+1} pre`);
document.querySelector('.walkthrough pre').innerHTML = fromCode.innerHTML;

items[index].classList.add('active');

const walkthroughLinks = Array.from(items).forEach((item, idx) => {
item.addEventListener('click', function() {
const fromHeading = document.querySelector(`.card${idx+1} h3`);
const fromCode = document.querySelector(`.card${idx+1} pre`);

items[index].classList.remove('active');

targetHeading.innerHTML = fromHeading.innerHTML;
targetCode.innerHTML = fromCode.innerHTML;

item.classList.add('active');
index = idx;
})
})
})
</script>
</head>

<body>
Expand All @@ -213,6 +294,13 @@
</header>

<main>
<noscript>
<h1>Hello Noscript!</h1>
<template>
<h1>Hello Noscript Template Tag!</h1>
</template>
</noscript>

<page-outlet></page-outlet>
</main>
</body>
Expand Down