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

feat: add css; remove unused web components

Browse source
This commit is contained in:
Ayo Ayco 2025-08-16 23:32:39 +02:00
parent 7471e93d6b
commit 34008f276c
8 changed files with 32 additions and 156 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/awesome-header.html
View file

@ -1,14 +0,0 @@
<header
style="
border-radius: 5px;
background: linear-gradient(45deg, #3054bf, #416fff);
color: white;
margin: 1em 0;
padding: 1em;
"
>
<a style="color: white" href="/">
<h1><slot /></h1>
</a>
<slot name="description" />
</header>

41
src/components/code-block.js
View file

@ -1,41 +0,0 @@
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>
`
/**
* @type {HTMLPreElement}
*/
const pre = this.querySelector('#pre')
if (lang) {
pre.className = `language-${lang}`
}
/**
* @type {Partial<CSSStyleDeclaration>}
*/
const style = {
background: '#f5f2f0',
padding: '1em',
margin: '1em 0',
fontSize: 'large',
overflow: 'auto',
borderRadius: '5px',
}
if (inline) {
style.display = 'inline'
style.padding = '0.3em'
}
Object.keys(style).forEach((rule) => {
pre.style[rule] = style[rule]
})
}
}

5
src/components/my-footer.html
View file

@ -1,5 +0,0 @@
<footer style="text-align: right; font-style: italic; padding: 0.5em 1em">
<p>
<slot />
</p>
</footer>

66
src/components/my-head.html
View file

@ -1,48 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/reset.css" />
<meta name="generator" content="McFly v0.0.1" />
<meta name="theme-color" content="#3054bf" />
<meta name="description" content="McFly is a no-framework framework that assists in building on the Web." />
<meta name="author" content="McFly" />
<meta name="origin" content="https://mc-fly.vercel.app/" />
<!-- Open Graph data -->
<meta property="og:site_name" content="McFly" />
<meta property="og:type" content="website" />
<meta property="og:image" content="/touch-icon-large.png" />
<meta property="og:title" content="McFly: Back to the Basics. Into the Future. 😱" />
<meta property="og:description" content="McFly is a no-framework framework that assists in building on the Web." />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><slot /></title>
<meta property="og:description" content="Home to self-hosted open source productivity web apps. A personal website by Ayo Ayco">
<meta name="description" content="Home to self-hosted open source productivity web apps. A personal website by Ayo Ayco">
<meta itemprop="description" content="Home to self-hosted open source productivity web apps. A personal website by Ayo Ayco">
<meta property="og:title" content="Ayo.run - What's running?">
<meta property="og:url" content="http://ayo.run">
<meta property="og:site_name" content="www.ayo.run">
<link rel="stylesheet" href="pico.min.css">
<style>
html, body {
height: 100%;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
max-width: 40em;
margin: 0 auto;
padding: 1em;
place-content: safe center;
display: grid;
}
body>* {
padding: 0.5em 1em;
}
h1 {
padding: 0;
margin: 0;
}
h2,
p,
ul,
ol {
margin-bottom: 1em;
}
/* .logo {
width: 200px;
border-radius: 5px;
display: block;
margin: 2em auto;
} */
</style>
</head>
<!-- Icons -->
<link rel="icon" href="favicon.svg" />
<link rel="mask-icon" href="mask-icon.svg" color="#000000" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<slot />
</head>

23
src/components/my-hello-world.js
View file

@ -1,23 +0,0 @@
/**
* Custom element using a minimal base class
* @see https://WebComponent.io
*/
class MyHelloWorld extends WebComponent {
static props = {
myName: 'World',
count: 0,
}
updateLabel() {
this.props.myName = `Clicked ${++this.props.count}x`
}
get template() {
return html` <button
onClick=${() => this.updateLabel()}
style="cursor:pointer"
>
Hello ${this.props.myName}!
</button>`
}
}

35
src/pages/index.html
View file

@ -1,35 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ayo.run - What's running? - a personal website by Ayo Ayco</title>
<meta property="og:description" content="Home to self-hosted open source productivity web apps. A personal website by Ayo Ayco">
<meta name="description" content="Home to self-hosted open source productivity web apps. A personal website by Ayo Ayco">
<meta itemprop="description" content="Home to self-hosted open source productivity web apps. A personal website by Ayo Ayco">
<meta property="og:title" content="Ayo.run - What's running?">
<meta property="og:url" content="http://ayo.run">
<meta property="og:site_name" content="www.ayo.run">
<link rel="stylesheet" href="pico.min.css">
<style>
html, body {
height: 100%;
}
body {
padding: 1em;
place-content: safe center;
display: grid;
}
/* .logo {
width: 200px;
border-radius: 5px;
display: block;
margin: 2em auto;
} */
</style>
</head>
<my-head>
Ayo.run - What's running? - a personal website by Ayo Ayco
</my-head>
<body>
<div>
<main>

BIN
src/public/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

4
src/public/pico.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long