diff --git a/src/components/address-bar.astro b/src/components/address-bar.astro new file mode 100644 index 0000000..5763e19 --- /dev/null +++ b/src/components/address-bar.astro @@ -0,0 +1,56 @@ +--- +import Form, { FormGroup } from "@astro-reactive/form"; +import { Validators } from "@astro-reactive/validator"; + +export interface Props { + url: string; +} + +const { url } = Astro.props; +const form = new FormGroup([ + { + name: "url", + value: url, + placeholder: "Put the URL here", + validators: [Validators.required, Validators.minLength(11)], + }, +]); +--- + +
+
+
+ + diff --git a/src/components/post.astro b/src/components/post.astro index 3cafbd3..f0336b9 100644 --- a/src/components/post.astro +++ b/src/components/post.astro @@ -1,23 +1,55 @@ --- import { ArticleData } from "@extractus/article-extractor"; +import CSS from "./post.module.scss"; const article = Astro.props.article; export interface Props { article: ArticleData; } +const datePublished = + article.published && new Date(article.published).toDateString(); --- { - article ? ( -
-

{article.title}

-

- by {article.author} -

+ article && ( +
+ {article.title &&

{article.title}

} + {(article.author || datePublished) && ( + + )} -
- ) : ( - "" + ) } + + diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro new file mode 100644 index 0000000..4540d68 --- /dev/null +++ b/src/layouts/layout.astro @@ -0,0 +1,31 @@ +--- +import "./reset.css"; +export interface Props { + title?: string; +} +const appTitle = "Cozy Reader"; +const { title = "" } = Astro.props; +--- + + + + + + + + {appTitle} {title ? `| ${title}` : ""} + + + + + + + diff --git a/src/layouts/reset.css b/src/layouts/reset.css new file mode 100644 index 0000000..2ad1ded --- /dev/null +++ b/src/layouts/reset.css @@ -0,0 +1,69 @@ +/* + 1. Use a more-intuitive box-sizing model. +*/ +*, +*::before, +*::after { + box-sizing: border-box; +} +/* + 2. Remove default margin + */ +* { + margin: 0; +} +/* + 3. Allow percentage-based heights in the application + */ +html, +body { + height: 100%; +} +/* + Typographic tweaks! + 4. Add accessible line-height + 5. Improve text rendering + */ +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} +/* + 6. Improve media defaults + */ +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} +/* + 7. Remove built-in form typography styles + */ +input, +button, +textarea, +select { + font: inherit; +} +/* + 8. Avoid text overflows + */ +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} +/* + 9. Create a root stacking context + */ +#root, +#__next { + isolation: isolate; +} diff --git a/src/pages/index.astro b/src/pages/index.astro index c907829..1804488 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,31 +3,16 @@ import Form, { FormGroup } from "@astro-reactive/form"; import { Validators } from "@astro-reactive/validator"; import { extract } from "@extractus/article-extractor"; import { getParams, isURL } from "../utils"; +import AddressBar from "../components/address-bar.astro"; import Post from "../components/post.astro"; +import Layout from "../layouts/layout.astro"; const params = getParams(Astro.url); const url: string = params?.url || ""; const article = isURL(url) && (await extract(url)); - -const form = new FormGroup([ - { - name: "url", - value: url, - placeholder: "Put the URL here", - validators: [Validators.required, Validators.minLength(11)], - }, -]); --- - -Source code - - + + + +