astro/examples/blog-multiple-authors/src/layouts/post.astro

---
import MainHead from '../components/MainHead.astro';
import Nav from '../components/Nav.astro';
import authorData from '../data/authors.json';

const { content } = Astro.props;
let canonicalURL = Astro.canonicalURL;
---

<html lang={content.lang || 'en'}>
	<head>
		<title>{content.title}</title>
		<MainHead title={content.title} description={content.description} image={content.image} {canonicalURL} />
		<style lang="scss">
			.title {
				margin-top: 4rem;
				margin-bottom: 4rem;
				font-size: 3em;
				letter-spacing: -0.04em;
				text-align: center;
			}

			.description {
				margin-bottom: 4rem;
				font-size: 1.4em;
				font-weight: 400;
				text-align: justify;
				text-transform: uppercase;
			}

			.img {
				display: block;
				width: 100%;
				height: auto;
			}

			.article {
				margin-top: 4rem;
				margin-bottom: 6rem;

				:global(p) {
					font-size: 1.3em;
					line-height: 2;
					margin-top: 2em;
					margin-bottom: 2em;
				}
			}

			.posts {
				text-transform: uppercase;
			}

			.footer {
				margin-top: 6rem;
				padding-bottom: 6rem;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<Nav />

		<main class="wrapper">
			<h2 class="title">{content.title}</h2>
			<p class="description">{content.description}</p>
			<img class="img" src={content.image} alt="" />
			<article class="article">
				<slot />
			</article>
			<footer class="footer">
				<a class="posts" href="/posts">All Posts</a>
			</footer>
		</main>

		<footer></footer>
	</body>
</html>
Blog Support 1/3: Data fetching (#62) * Add example blog * Add author data * Improve navigation * Style nav * Add friendly error message * Throw error if import glob used for non-Markdown files * Use import.meta.collection() API instead * README fixes 2021-04-06 21:54:55 +00:00			`---`
			`import MainHead from '../components/MainHead.astro';`
			`import Nav from '../components/Nav.astro';`
			`import authorData from '../data/authors.json';`
New Props API (#515) * wip: update props api * feat(#139, #309): enable new props api * chore: migrate examples to new props API * docs: update syntax guide for new props API * chore: update examples to new props API * chore: update docs to new Props API * fix: hide __astroInternal from `Astro.props` consumers * chore: remove scratchpad file * chore: fix script error * test: fix failing collection tests * fix: set __astroInternal to `enumerable: false` * chore: add changeset * feat: warn users using old props api 2021-06-24 22:48:24 +00:00
			`const { content } = Astro.props;`
Implement the Astro.request RFC (#2913) * Implement the Astro.request RFC * Disable console warnings eslint * Use our logger * Adds a changeset * Fix tests that depend on params, canonicalURL, URL Co-authored-by: Fred K. Schott <fkschott@gmail.com> 2022-03-29 11:35:03 +00:00			`let canonicalURL = Astro.canonicalURL;`
Blog Support 1/3: Data fetching (#62) * Add example blog * Add author data * Improve navigation * Style nav * Add friendly error message * Throw error if import glob used for non-Markdown files * Use import.meta.collection() API instead * README fixes 2021-04-06 21:54:55 +00:00			`---`

tsconfig fix (#752) 2021-07-20 01:23:39 +00:00			`<html lang={content.lang \|\| 'en'}>`
Blog Support 1/3: Data fetching (#62) * Add example blog * Add author data * Improve navigation * Style nav * Add friendly error message * Throw error if import glob used for non-Markdown files * Use import.meta.collection() API instead * README fixes 2021-04-06 21:54:55 +00:00			`<head>`
			`<title>{content.title}</title>`
Fix type error in blog-multiple-authors example (#1553) * chore: add description to avoid type error * fix: fix canonical url type in main head component 2021-10-14 18:40:33 +00:00			`<MainHead title={content.title} description={content.description} image={content.image} {canonicalURL} />`
Improve blog template (#217) 2021-05-17 22:45:41 +00:00			`<style lang="scss">`
			`.title {`
			`margin-top: 4rem;`
			`margin-bottom: 4rem;`
			`font-size: 3em;`
			`letter-spacing: -0.04em;`
			`text-align: center;`
			`}`

			`.description {`
			`margin-bottom: 4rem;`
			`font-size: 1.4em;`
			`font-weight: 400;`
			`text-align: justify;`
			`text-transform: uppercase;`
			`}`

			`.img {`
			`display: block;`
			`width: 100%;`
			`height: auto;`
			`}`

			`.article {`
			`margin-top: 4rem;`
			`margin-bottom: 6rem;`

			`:global(p) {`
			`font-size: 1.3em;`
			`line-height: 2;`
			`margin-top: 2em;`
			`margin-bottom: 2em;`
			`}`
			`}`

			`.posts {`
			`text-transform: uppercase;`
			`}`

			`.footer {`
			`margin-top: 6rem;`
			`padding-bottom: 6rem;`
			`text-align: center;`
			`}`
			`</style>`
Blog Support 1/3: Data fetching (#62) * Add example blog * Add author data * Improve navigation * Style nav * Add friendly error message * Throw error if import glob used for non-Markdown files * Use import.meta.collection() API instead * README fixes 2021-04-06 21:54:55 +00:00			`</head>`

			`<body>`
			`<Nav />`

			`<main class="wrapper">`
Improvement/accessibility blog example (#475) * improvements: updated heading tag order, removed repeat alt values, added aria-labels * chore: added changeset 2021-06-16 21:19:23 +00:00			`<h2 class="title">{content.title}</h2>`
			`<p class="description">{content.description}</p>`
			`<img class="img" src={content.image} alt="" />`
Improve blog template (#217) 2021-05-17 22:45:41 +00:00			`<article class="article">`
Blog Support 1/3: Data fetching (#62) * Add example blog * Add author data * Improve navigation * Style nav * Add friendly error message * Throw error if import glob used for non-Markdown files * Use import.meta.collection() API instead * README fixes 2021-04-06 21:54:55 +00:00			`<slot />`
			`</article>`
Improve blog template (#217) 2021-05-17 22:45:41 +00:00			`<footer class="footer">`
			`<a class="posts" href="/posts">All Posts</a>`
			`</footer>`
Blog Support 1/3: Data fetching (#62) * Add example blog * Add author data * Improve navigation * Style nav * Add friendly error message * Throw error if import glob used for non-Markdown files * Use import.meta.collection() API instead * README fixes 2021-04-06 21:54:55 +00:00			`</main>`

			`<footer></footer>`
			`</body>`
			`</html>`