ayo/mcfly
ayo/mcfly
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(site): fix pages

Browse source 
- absolute path for reset.css
- code-block support for inline
- unique title for pages
This commit is contained in:
Ayo 2023-11-17 15:24:22 +01:00
parent 018aeaac7e
commit 7c7dfa87bb
5 changed files with 17 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
site/src/components/code-block.js
View file

@ -2,6 +2,7 @@ class CodeBlockComponent extends HTMLElement {
connectedCallback() {
const trimmed = this.innerHTML.trim();
const lang = this.getAttribute("language");
const inline = this.getAttribute("inline") !== null;
this.innerHTML = `
<pre id="pre"><code id="code">${trimmed}</code></pre>
@ -28,6 +29,13 @@ class CodeBlockComponent extends HTMLElement {
borderRadius: '5px'
};
console.log('>>> inline', inline, this)
if (inline) {
style.display = 'inline';
style.padding = '0.3em';
}
Object.keys(style).forEach((rule) => {
pre.style[rule] = style[rule];
});

3
site/src/components/my-head.html
View file

@ -1,8 +1,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>McFly: Back to the Basics. Into the Future.</title>
<link rel="stylesheet" href="./reset.css" />
<link rel="stylesheet" href="/reset.css" />
<meta name="generator" content="McFly v0.0.0-super-experimental" />
<meta name="theme-color" content="#3054bf" />
<meta

15
site/src/pages/404.html
View file

@ -1,18 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>not found</title>
<my-head>
<title>Not Found | McFly: Back to the Basics. Into the Future.</title>
<script server:setup>
const homeLinkLabel = "Home";
let greeting = "hello!";
</script>
</head>
</my-head>
<body>
<a href="./">{{homeLinkLabel}}</a>
{{greeting }} wow we can't find that
<awesome-header></awesome-header>
<h1>Not Found</h1>
<p>This custom 404 page is possible in McFly by adding a <code-block inline>404.html</code-block> in your <code-block inline>/pages</code-block> directory.</p>
</body>
</html>

2
site/src/pages/demo.html
View file

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<my-head>
<title>Demo | McFly: Back to the Basics. Into the Future.</title>
<link rel="stylesheet" href="/prism.css" />
<script src="/prism.js"></script>
<script server:setup>
@ -21,7 +22,6 @@
<body>
<awesome-header>
<span>Back to the Basics. Into the Future.</span>
<span slot="title-postfix">- This is strong!</span>
</awesome-header>
<main>
<section id="intro">

1
site/src/pages/index.html
View file

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<my-head>
<title>McFly: Back to the Basics. Into the Future.</title>
<link rel="prefetch" href="/demo" as="document" />
<style>
@counter-style publish-icons {