michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

image fix (#4322)

Browse source
This commit is contained in:
Fred K. Schott 2022-08-15 00:26:33 -04:00 committed by GitHub
parent 16edf0c773
commit 0e2f4d74b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 39 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
examples/blog/README.md
View file

@ -10,12 +10,12 @@ npm init astro -- --template blog
Features:
- ✅ SEO-friendly setup with canonical URLs and OpenGraph data
- ✅ `@astrojs/image` image optimizations
- ✅ Sitemap support
- ✅ Markdown & MDX support
- ✅ Minimal styling (make it your own!)
- ✅ 100/100 Lighthouse performance
- ✅ SEO-friendly with canonical URLs and OpenGraph data
- ✅ Sitemap support
- ✅ RSS Feed support
- ✅ Markdown & MDX support
## 🚀 Project Structure

4
examples/blog/astro.config.mjs
View file

@ -1,10 +1,10 @@
import { defineConfig } from 'astro/config';
import image from '@astrojs/image';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
// https://astro.build/config
export default defineConfig({
integrations: [image(), mdx(), sitemap()],
site: 'https://example.com',
integrations: [ mdx(), sitemap()],
});

2
examples/blog/package.json
View file

@ -10,8 +10,8 @@
"astro": "astro"
},
"devDependencies": {
"@astrojs/image": "^0.3.3",
"@astrojs/mdx": "^0.9.0",
"@astrojs/rss": "^1.0.0",
"@astrojs/sitemap": "^1.0.0",
"astro": "^1.0.5"
}

BIN
examples/blog/public/placeholder-about.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
examples/blog/public/placeholder-hero.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
examples/blog/public/placeholder-social.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 220 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
examples/blog/src/assets/placeholder-about.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 107 KiB

BIN
examples/blog/src/assets/placeholder-hero.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 116 KiB

28
examples/blog/src/layouts/BlogPost.astro
View file

@ -2,36 +2,20 @@
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import {Image} from '@astrojs/image/components';
export interface Props {
content: {
title: string;
description: string;
publishDate?: string;
pubDate?: string;
updatedDate?: string;
heroImage?: string;
};
}
const {
content: { title, description, publishDate, updatedDate, heroImage },
content: { title, description, pubDate, updatedDate, heroImage },
} = Astro.props as Props;
// Match the `heroImage` frontmatter string to its correct
// Astro.glob() import of the file in the src/ directory.
const assets = await Astro.glob('../assets/**/*');
const heroImageAsset = assets.find(asset => {
if (!heroImage) {
return false;
}
if (!asset.default?.src) {
return false;
}
const index = asset.default.src.indexOf('/assets/');
return asset.default.src.slice(index) === heroImage;
});
---
<html>
@ -53,16 +37,16 @@ const heroImageAsset = assets.find(asset => {
<Header />
<main>
<article>
{heroImageAsset && (
<Image
{heroImage && (
<img
width={720}
height={360}
src={heroImageAsset.default}
src={heroImage}
alt=""
/>
)}
<h1 class="title">{title}</h1>
{publishDate && <time>{publishDate}</time>}
{pubDate && <time>{pubDate}</time>}
{updatedDate && <div>Last updated on <time>{updatedDate}</time></div>}
<hr/>
<slot />

2
examples/blog/src/pages/about.md
View file

@ -3,7 +3,7 @@ layout: "../layouts/BlogPost.astro"
title: "About Me"
description: "Lorem ipsum dolor sit amet"
updatedDate: "August 08 2022"
heroImage: "/assets/placeholder-about.jpg"
heroImage: "/placeholder-about.jpg"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.

6
examples/blog/src/pages/blog.astro
View file

@ -7,7 +7,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
// Use Astro.glob() to fetch all posts, and then sort them by date.
const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort(
(a, b) =>
new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf()
new Date(b.frontmatter.pubDate).valueOf() - new Date(a.frontmatter.pubDate).valueOf()
);
---
@ -40,8 +40,8 @@ const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort(
<ul>
{posts.map((post) => (
<li>
<time datetime={post.frontmatter.publishDate}>
{new Date(post.frontmatter.publishDate).toLocaleDateString('en-us', {
<time datetime={post.frontmatter.pubDate}>
{new Date(post.frontmatter.pubDate).toLocaleDateString('en-us', {
year: 'numeric',
month: 'short',
day: 'numeric',

4
examples/blog/src/pages/blog/first-post.md
View file

@ -2,8 +2,8 @@
layout: "../../layouts/BlogPost.astro"
title: "First post"
description: "Lorem ipsum dolor sit amet"
publishDate: "Jul 08 2022"
heroImage: "/assets/placeholder-hero.jpg"
pubDate: "Jul 08 2022"
heroImage: "/placeholder-hero.jpg"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.

4
examples/blog/src/pages/blog/markdown-style-guide.md
View file

@ -2,8 +2,8 @@
layout: "../../layouts/BlogPost.astro"
title: "Markdown Style Guide"
description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro."
publishDate: "Jul 01 2022"
heroImage: "/assets/placeholder-hero.jpg"
pubDate: "Jul 01 2022"
heroImage: "/placeholder-hero.jpg"
---
Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.

4
examples/blog/src/pages/blog/second-post.md
View file

@ -2,8 +2,8 @@
layout: "../../layouts/BlogPost.astro"
title: "Second post"
description: "Lorem ipsum dolor sit amet"
publishDate: "Jul 22 2022"
heroImage: "/assets/placeholder-hero.jpg"
pubDate: "Jul 22 2022"
heroImage: "/placeholder-hero.jpg"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.

4
examples/blog/src/pages/blog/third-post.md
View file

@ -2,8 +2,8 @@
layout: "../../layouts/BlogPost.astro"
title: "Third post"
description: "Lorem ipsum dolor sit amet"
publishDate: "Jul 15 2022"
heroImage: "/assets/placeholder-hero.jpg"
pubDate: "Jul 15 2022"
heroImage: "/placeholder-hero.jpg"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.

4
examples/blog/src/pages/blog/using-mdx.mdx
View file

@ -2,8 +2,8 @@
layout: '../../layouts/BlogPost.astro'
title: 'Using MDX'
description: 'Lorem ipsum dolor sit amet'
publishDate: 'Jul 02 2022'
heroImage: '/assets/placeholder-hero.jpg'
pubDate: 'Jul 02 2022'
heroImage: '/placeholder-hero.jpg'
---
This theme comes with the [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) integration installed and configured in your `astro.config.mjs` config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.

5
examples/blog/src/pages/index.astro
View file

@ -23,10 +23,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
This template comes with a few integrations already configured in your
<code>astro.config.mjs</code> file. You can customize your setup with
<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
React, or Vue to your project. Add a blog RSS feed with <a
href="https://docs.astro.build/en/guides/rss/"
>@astrojs/rss
</a>.
React, or Vue to your project.
</p>
<p>Here are a few ideas on how to get started with the template:</p>
<ul>

9
examples/blog/src/pages/rss.xml.js Normal file
View file

@ -0,0 +1,9 @@
import rss from '@astrojs/rss';
import {SITE_TITLE, SITE_DESCRIPTION} from '../config';
export const get = () => rss({
title: SITE_TITLE,
description: SITE_DESCRIPTION,
site: import.meta.env.SITE,
items: import.meta.glob('./blog/**/*.md'),
});

4
pnpm-lock.yaml
View file

@ -62,13 +62,13 @@ importers:
examples/blog:
specifiers:
'@astrojs/image': ^0.3.3
'@astrojs/mdx': ^0.9.0
'@astrojs/rss': ^1.0.0
'@astrojs/sitemap': ^1.0.0
astro: ^1.0.5
devDependencies:
'@astrojs/image': link:../../packages/integrations/image
'@astrojs/mdx': link:../../packages/integrations/mdx
'@astrojs/rss': link:../../packages/astro-rss
'@astrojs/sitemap': link:../../packages/integrations/sitemap
astro: link:../../packages/astro