Skip to content

Commit

Permalink
fix site layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@ECorreia45
ECorreia45 committed Dec 3, 2023
1 parent adea677 commit 5d09825
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 62 deletions.
9 changes: 8 additions & 1 deletion docs-src/build.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
import 'global-jsdom/register'
import { cp, mkdir, writeFile } from 'fs/promises'
import * as path from 'path'
import { toStatic } from '../src/to-static'
import config, { DocMenu } from '../docs-src/config'
import { HtmlTemplate } from '../src'

const docsDir = path.resolve(process.cwd(), 'docs')
const docsSrcDir = path.resolve(process.cwd(), 'docs-src')

const toStatic = (temp: HtmlTemplate, docType = '<!doctype html>') => {
document.body.innerHTML = ''
temp.render(document.body)
return docType + document.body.innerHTML.trim()
}

async function init() {
// create docs dir
await mkdir(docsDir, { recursive: true })
Expand Down
105 changes: 50 additions & 55 deletions docs-src/index.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,62 +17,57 @@ export default ({ page, name }: PageComponentProps) =>
`,
content: html`
<!-- Banner -->
<div class="wrapper">
<div class="banner">
<h2>HTML Templating System</h2>
<p>All you needed was a good templating system!</p>
<div class="actions">
<a href="./documentation" class="btn">Documentation</a>
<!-- <a-->
<!-- href="./documentation/essential-training"-->
<!-- class="btn outline"-->
<!-- >Learn</a-->
<!-- >-->
</div>
<div class="banner">
<h2>HTML Templating System</h2>
<p>All you needed was a good templating system!</p>
<div class="actions">
<a href="./documentation" class="btn">Documentation</a>
<!-- <a-->
<!-- href="./documentation/essential-training"-->
<!-- class="btn outline"-->
<!-- >Learn</a-->
<!-- >-->
</div>
</div>
<!-- Why -->
<div class="wrapper">
<section class="why">
<h2>Why Markup?</h2>
<p>
The best UI frameworks and libraries out there rely
heavily on a good templating system. Nobody uses React
without JSX or Angular without its HTML templates. Now,
what if you had a standalone good templating system?
Something that is:
</p>
<ul class="reason-list">
${reasons.map(
(reason) => html`
<li class="reason-border">
<div class="reason">
<img
src="${reason.img}"
alt="${reason.imgAlt}"
/>
<h3>${reason.title}</h3>
<p>${reason.description}</p>
${reason.breakDown
? html`
<ul>
${reason.breakDown.map(
(b) =>
html`<li>
${html([b])}
</li>`
)}
</ul>
`
: ''}
</div>
</li>
`
)}
</ul>
</section>
</div>
<div class="get-started wrapper">
<section class="why">
<h2>Why Markup?</h2>
<p>
The best UI frameworks and libraries out there rely heavily
on a good templating system. Nobody uses React without JSX
or Angular without its HTML templates. Now, what if you had
a standalone good templating system? Something that is:
</p>
<ul class="reason-list">
${reasons.map(
(reason) => html`
<li class="reason-border">
<div class="reason">
<img
src="${reason.img}"
alt="${reason.imgAlt}"
/>
<h3>${reason.title}</h3>
<p>${reason.description}</p>
${reason.breakDown
? html`
<ul>
${reason.breakDown.map(
(b) =>
html`<li>
${html([b])}
</li>`
)}
</ul>
`
: ''}
</div>
</li>
`
)}
</ul>
</section>
<section class="get-started">
<h2>Quick Start</h2>
<p>Install it in your project</p>
${CodeSnippet(
Expand All @@ -89,9 +84,9 @@ export default ({ page, name }: PageComponentProps) =>
'<script src="https://unpkg.com/@beforesemicolon/markup/dist/client.js"/>',
'html'
)}
</div>
</section>
<!-- what you can do -->
<section class="what-to-build wrapper">
<section class="what-to-build">
<h2>What can you do with it?</h2>
<p>
The templating system will handle all the rendering needs of
Expand Down
2 changes: 1 addition & 1 deletion docs-src/partials/doc-page-layout.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const DocPageLayout = ({
`,
basePath: '../',
content: html`
<div class="wrapper docs">
<div class="docs">
<div class="doc-nav" id="menu">
<a class="mobile-menu-open" href="#menu">
<span>menu</span>
Expand Down
4 changes: 2 additions & 2 deletions docs-src/partials/doc-prev-next-nav.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ interface DocPrevNextNavProps {
export const DocPrevNextNav = ({ prev, next }: DocPrevNextNavProps) => {
return html`<div class="doc-prev-next-nav">
${when(
prev,
prev && prev.group,
() =>
html`<a href="..${prev?.path}" class="prev-page"
><< ${prev?.name}</a
>`,
html`<span />`
)}
${when(
next,
next && next.group,
() =>
html`<a href="..${next?.path}" class="next-page"
>${next?.name} >></a
Expand Down
2 changes: 1 addition & 1 deletion docs-src/partials/page-layout.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export const PageLayout = ({
gtag('config', 'G-N3MXGDP5PS')
</script>
${Header({ basePath })}
<main>${content}</main>
<main class="wrapper">${content}</main>
${Footer({ basePath })}
</body>
Expand Down
4 changes: 2 additions & 2 deletions docs-src/stylesheets/documentation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
padding-top: 50px;
padding-bottom: 50px;
position: relative;
max-width: 100%;
max-width: 1024px;

@media screen and (max-width: 1024px) {
padding: 50px 20px;
Expand Down Expand Up @@ -123,7 +123,7 @@
padding-left: 45px;
font-weight: 100;
color: #ccc;
max-width: 100%;
max-width: calc(100% - 250px);

@media screen and (max-width: 1024px) {
padding: 0;
Expand Down

0 comments on commit 5d09825

Please sign in to comment.