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

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

@ -1,8 +1,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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="generator" content="McFly v0.0.0-super-experimental" />
<meta name="theme-color" content="#3054bf" /> <meta name="theme-color" content="#3054bf" />
<meta <meta

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

@ -1,18 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <my-head>
<meta charset="UTF-8" /> <title>Not Found | McFly: Back to the Basics. Into the Future.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>not found</title>
<script server:setup> <script server:setup>
const homeLinkLabel = "Home"; const homeLinkLabel = "Home";
let greeting = "hello!"; let greeting = "hello!";
</script> </script>
</head> </my-head>
<body> <body>
<a href="./">{{homeLinkLabel}}</a> <awesome-header></awesome-header>
<h1>Not Found</h1>
{{greeting }} wow we can't find that <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> </body>
</html> </html>

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

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

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

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