refactor: various improvements
- use semantic elements (main, header, article) - remove unused AddressBar component - bundle article css
This commit is contained in:
parent
d4fef25400
commit
d4bc2755bc
7 changed files with 90 additions and 83 deletions
|
|
@ -1,62 +0,0 @@
|
||||||
div#post {
|
|
||||||
|
|
||||||
h1.title {
|
|
||||||
font-size: xx-large;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.source, .publish-info {
|
|
||||||
font-size: smaller;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.source {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.publish-info {
|
|
||||||
padding-left: 0;
|
|
||||||
margin: 0;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
content {
|
|
||||||
p, table, ul, img {
|
|
||||||
margin: 1em 0 !important;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
|
|
||||||
td, th {
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
padding: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
&:has(code) {
|
|
||||||
padding: 1em;
|
|
||||||
background: #f6f8fa;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
p, table, ul, img {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
---
|
---
|
||||||
|
|
||||||
<div id="jumbotron"><a href="/">
|
<header id="jumbotron"><a href="/">
|
||||||
|
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg width="487.1" height="151.38" version="1.1" viewBox="0 0 128.88 40.052" xmlns="http://www.w3.org/2000/svg">
|
<svg width="487.1" height="151.38" version="1.1" viewBox="0 0 128.88 40.052" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
|
@ -11,10 +11,10 @@
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
|
||||||
</a></div>
|
</a></header>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
div {
|
#jumbotron {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@ const cleanContent = await cozify(article.content ?? '', Astro.url.origin)
|
||||||
-->
|
-->
|
||||||
{
|
{
|
||||||
article && article.url !== '/' &&
|
article && article.url !== '/' &&
|
||||||
<div id="post">
|
<article id="post">
|
||||||
{article.source && <span class="source">{article.source}</span>}
|
{article.source && <span class="source">{article.source}</span>}
|
||||||
{article.title && <h1 class="title">{article.title}</h1>}
|
{article.title && <h1 class="title">{article.title}</h1>}
|
||||||
{(article.author || datePublished) && (
|
{(article.author || datePublished) && (
|
||||||
|
|
@ -32,5 +32,71 @@ const cleanContent = await cozify(article.content ?? '', Astro.url.origin)
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
<content set:html={cleanContent} />
|
<content set:html={cleanContent} />
|
||||||
</div>
|
</article>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#post {
|
||||||
|
|
||||||
|
h1.title {
|
||||||
|
font-size: xx-large;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source, .publish-info {
|
||||||
|
font-size: smaller;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.publish-info {
|
||||||
|
padding-left: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
content {
|
||||||
|
p, table, ul, img {
|
||||||
|
margin: 1em 0 !important;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
|
||||||
|
td, th {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
&:has(code) {
|
||||||
|
padding: 1em;
|
||||||
|
background: #f6f8fa;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
p, table, ul, img {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -9,7 +9,7 @@ const placeholder = "Type the article URL here";
|
||||||
const { url } = Astro.props;
|
const { url } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="address-bar">
|
<div id="address-bar">
|
||||||
<form>
|
<form>
|
||||||
<label for="app-url">
|
<label for="app-url">
|
||||||
<Icon name="ic:round-arrow-forward-ios" />
|
<Icon name="ic:round-arrow-forward-ios" />
|
||||||
|
|
@ -44,7 +44,7 @@ const { url } = Astro.props;
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.address-bar {
|
#address-bar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
---
|
---
|
||||||
|
import Jumbotron from "../components/Jumbotron.astro";
|
||||||
import { ArticleData } from "@extractus/article-extractor";
|
import { ArticleData } from "@extractus/article-extractor";
|
||||||
import "../styles/reset.css";
|
import "../styles/reset.css";
|
||||||
import '../styles/variables.css';
|
import '../styles/variables.css';
|
||||||
|
|
@ -49,6 +50,8 @@ const appTitle = article?.title ? `${article.title} | Cozy` : 'Cozy';
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app-wrapper">
|
<div id="app-wrapper">
|
||||||
|
<Jumbotron />
|
||||||
|
<main>
|
||||||
<slot />
|
<slot />
|
||||||
<div id="main-content">
|
<div id="main-content">
|
||||||
<div id="post-wrapper">
|
<div id="post-wrapper">
|
||||||
|
|
@ -58,7 +61,8 @@ const appTitle = article?.title ? `${article.title} | Cozy` : 'Cozy';
|
||||||
<slot name="library" />
|
<slot name="library" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<slot name="footer">
|
</main>
|
||||||
|
<slot name="footer" />
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,16 @@
|
||||||
---
|
---
|
||||||
import AddressBar from "../components/AddressBar.astro";
|
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import Library from "../components/Library.astro";
|
import Library from "../components/Library.astro";
|
||||||
import Footer from "../components/Footer.astro";
|
import Footer from "../components/Footer.astro";
|
||||||
|
import SimpleAddressBar from "../components/SimpleAddressBar.astro";
|
||||||
|
|
||||||
export const prerender = false;
|
export const prerender = false;
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout article={null}>
|
<Layout article={null}>
|
||||||
<AddressBar url="" />
|
<SimpleAddressBar url='' />
|
||||||
<div slot="post">
|
<div slot="post" id="router-outlet">
|
||||||
<h1>
|
<h1>
|
||||||
404: Not Found
|
404: Not Found
|
||||||
</h1>
|
</h1>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@ import Post from "../components/Post.astro";
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import Library from "../components/Library.astro";
|
import Library from "../components/Library.astro";
|
||||||
import Footer from "../components/Footer.astro";
|
import Footer from "../components/Footer.astro";
|
||||||
import Jumbotron from "../components/Jumbotron.astro";
|
|
||||||
|
|
||||||
export const prerender = false;
|
export const prerender = false;
|
||||||
|
|
||||||
|
|
@ -25,7 +24,6 @@ if (url)
|
||||||
|
|
||||||
---
|
---
|
||||||
<Layout article={article}>
|
<Layout article={article}>
|
||||||
<Jumbotron />
|
|
||||||
<SimpleAddressBar url={url} />
|
<SimpleAddressBar url={url} />
|
||||||
<div slot="post" id="router-outlet">
|
<div slot="post" id="router-outlet">
|
||||||
<Post article={article} />
|
<Post article={article} />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue