Skip to content

Commit

Permalink
walkthrough layout styling WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@thescientist13
thescientist13 committed Jun 11, 2024
1 parent 4c73d80 commit 0aee85a
Show file tree
Hide file tree
Showing 3 changed files with 187 additions and 80 deletions.
69 changes: 39 additions & 30 deletions src/components/walkthrough/walkthrough.css
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,55 @@
.walkthrough {
border: solid 3px var(--color-secondary);
:host .walkthrough {
padding: 30px;
margin: 30px auto;
border-radius: 10px;
width: 60%;
min-height: 300px;
border-radius: var(--radius-5);
width: 98%;
min-height: 1000px;
color: var(--color-white);
background-color: var(--color-accent);
background-color: var(--color-secondary);
}

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

.walkthrough div pre {
display: inline-block;
.column-left {
flex: 40%;
}

.column-right {
flex: 60%;
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;
.card {
border-radius: var(--radius-4);
padding: 5px;
}

.walkthrough ol li {
h2 {
font-size: var(--font-size-fluid-3);
font-weight: bold;
}

h3 {
color: var(--color-gray);
}

h4 {
font-size: var(--font-size-fluid-1);
font-weight: bold;
margin: 5px 0;
cursor: pointer;
}

.walkthrough ol li.active {
background-color: var(--color-secondary);
border-radius: 5px;
padding-left: 5px;
p {
margin: 0;
padding: 15px;
width: 90%;
text-align: left;
font-size: var(--font-size-1);
background-color: #151818;
min-height: 100px;
color: var(--color-gray);
border-radius: var(--radius-2);
}
42 changes: 24 additions & 18 deletions src/components/walkthrough/walkthrough.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,40 +16,46 @@ export default class Walkthrough extends HTMLElement {
if (this.cards.length > 0) {
template.innerHTML = `
<div class="walkthrough">
<h3>${this.cards[this.index].querySelector("p").innerHTML}</h3>
<ol>
${Array.from(this.cards)
.map((card, idx) => {
const label = card.querySelector("span").innerHTML;
return `<li data-idx="${idx}">${label}</li>`;
})
.join("")}
</ol>
<div class="snippet">${this.cards[this.index].querySelector("pre").innerHTML}</div>
<h2>Go from Zero to Fullstack with web standards</h2>
<h3>Lorum Ipsum...</h3>
<div class="row">
<div class="column-left">
${Array.from(this.cards)
.map((card, idx) => {
const title = card.querySelector("span").innerHTML;
const text = card.querySelector("p").innerHTML;
return `
<div class="card">
<h4 data-idx="${idx}">${title}</h4>
<p>${text}</p>
</div>
`;
})
.join("")}
</div>
<div class="snippet column-right">${this.cards[this.index].querySelector("pre").outerHTML}</div>
</div>
</div>
`;

this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
this.shadowRoot.adoptedStyleSheets = [theme, sheet];
this.shadowRoot
.querySelectorAll("li")
.querySelectorAll(".card h4")
.forEach((item) => item.addEventListener("click", this.selectItem.bind(this)));
} else {
console.debug("no walkthrough content cards detected");
}
}

selectItem(event) {
console.log("selectItem", event.currentTarget.dataset.idx);
this.index = event.currentTarget.dataset.idx;
this.shadowRoot.querySelector("h3").innerHTML =
this.cards[this.index].querySelector("p").innerHTML;
this.shadowRoot.querySelector(".snippet").innerHTML =
this.cards[this.index].querySelector("pre").innerHTML;
this.cards[this.index].querySelector("pre").outerHTML;
}
}

Expand Down
156 changes: 124 additions & 32 deletions src/pages/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,70 +12,162 @@ imports:

<!-- TODO should probably come from shared layout? -->
<style>
section.top {
app-latest-post, app-hero-banner {
display: block;
margin: 0 auto;
width: 60%;
width: 70%;
}

.walkthrough-card {
display: none;
}
</style>

<section class="top">

<app-latest-post
link="/blog/release/v0.30.0/"
title="We just launched v0.30.0">
</app-latest-post>
<app-latest-post link="/blog/release/v0.30.0/" title="We just launched v0.30.0"></app-latest-post>

<app-hero-banner></app-hero-banner>

<app-walkthrough></app-walkthrough>

<div class="walkthrough-card card1">
<span>HTML First</span>
<p>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.</p>
<div class="walkthrough-card card1">
<span>HTML First</span>
<p>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.</p>

```html
<h1>Hello World!</h1>
<!-- pages/index.html -->
<html>
<head>
<title>My Site</title>
</head>

<body>
<h1>Welcome to our site!</h1>
<p>
Feel free to browse around or
<a href="/contact/">contact us</a>
if you have any questions.
</p>
</body>
</html>
```

</div>
</div>

<div class="walkthrough-card card2">
<span>CSS Second</span>
<p>Yay CSS!</p>
<div class="walkthrough-card card2">
<span>Server Rendering</span>
<p>Yay SSR! Lorum...</p>

```css
h3 {
color: red;
```js
// pages/products.js
import "../components/card.js";
import { getProducts } from "../services/products.js";

export default class ProductsPage extends HTMLElement {
async connectedCallback() {
const products = await getProducts();
const html = products
.map((product) => {
const { title, thumbnail } = product;

return `
<app-card
title="${title}"
thumbnail="${thumbnail}"
>
</app-card>
`;
})
.join("");

this.innerHTML = `
<h2>Product Catalog</h2>
<div>${html}</div>
`;
}
}
```

</div>
</div>

<div class="walkthrough-card card3">
<span>JS Second</span>
<p>Yay JavaScript</p>
<div class="walkthrough-card card3">
<span>Web Components</span>
<p>Yay Web Components! Lorum...</p>

```js
console.log("hello world!");
// components/card.js
import sheet from "./card.js" with { type: "css" };

export default class Card extends HTMLElement {
connectedCallback() {
if (!this.shadowRoot) {
const thumbnail = this.getAttribute("thumbnail");
const title = this.getAttribute("title");
const template = document.createElement("template");

template.innerHTML = `
<div>
<h3>${title}</h3>
<img src="${thumbnail}" alt="${title}">
</div>
`;
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}

this.shadowRoot.adoptedStyleSheets = [sheet];
}
}

customElements.define("app-card", Card);
```

</div>
</div>

<div class="walkthrough-card card4">
<span>And lastly...</span>
<p>Yay Greenwood!</p>
<div class="walkthrough-card card4">
<span>API Routes</span>
<p>Yay API Routes! Lorum...</p>

```js
new Response("<h3>Hello World</h3>", { headers: { "Content-Type": "text/html" } });
// api/search.js
import { renderFromHTML } from "wc-compiler";
import { getProducts } from "../services/products.js";

export async function handler(request) {
const formData = await request.formData();
const searchTerm = formData.has("term") ? formData.get("term") : "";
const products = await getProducts(searchTerm);
let body = "No results found.";

if (products.length > 0) {
const { html } = await renderFromHTML(
`
${products
.map((item, idx) => {
const { title, thumbnail } = item;
return `
<app-card
title="${idx + 1}) ${title}"
thumbnail="${thumbnail}"
></app-card>
`;
})
.join("")}
`,
[new URL("../components/card.js", import.meta.url)],
);

body = html;
}

return new Response(body, {
headers: new Headers({
"Content-Type": "text/html",
}),
});
}
```
</div>
</div>
<app-footer></app-footer>

</section>

0 comments on commit 0aee85a

Please sign in to comment.