diff options
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/framework-lit/src/pages/index.astro | 7 | ||||
| -rw-r--r-- | examples/non-html-pages/src/pages/index.astro | 8 | ||||
| -rw-r--r-- | examples/portfolio/src/components/PortfolioPreview.astro | 7 | ||||
| -rw-r--r-- | examples/portfolio/src/layouts/project.astro | 7 | ||||
| -rw-r--r-- | examples/portfolio/src/pages/index.astro | 5 | ||||
| -rw-r--r-- | examples/portfolio/src/pages/projects.astro | 3 | ||||
| -rw-r--r-- | examples/portfolio/src/types.ts | 8 | ||||
| -rw-r--r-- | examples/ssr/src/api.ts | 2 | ||||
| -rw-r--r-- | examples/ssr/src/components/ProductListing.astro | 6 | ||||
| -rw-r--r-- | examples/ssr/src/components/TextDecorationSkip.astro | 4 | ||||
| -rw-r--r-- | examples/ssr/src/pages/index.astro | 5 | ||||
| -rw-r--r-- | examples/with-tailwindcss/package.json | 3 | ||||
| -rw-r--r-- | examples/with-tailwindcss/src/components/Button.astro | 6 |
13 files changed, 56 insertions, 15 deletions
diff --git a/examples/framework-lit/src/pages/index.astro b/examples/framework-lit/src/pages/index.astro index 4f0dbc309..d193842a0 100644 --- a/examples/framework-lit/src/pages/index.astro +++ b/examples/framework-lit/src/pages/index.astro @@ -19,6 +19,11 @@ import { MyCounter } from '../components/my-counter.js'; <h1>Test app</h1> <MyCounter client:load /> <Lorem /> - <CalcAdd num={33} /> + + {/** + * Our VS Code extension does not currently properly typecheck attributes on Lit components + * As such, the following code will result in a TypeScript error inside the editor, nonetheless, it works in Astro! + * @ts-expect-error */} + <CalcAdd num={0} /> </body> </html> diff --git a/examples/non-html-pages/src/pages/index.astro b/examples/non-html-pages/src/pages/index.astro index 18fe9b9da..921400acd 100644 --- a/examples/non-html-pages/src/pages/index.astro +++ b/examples/non-html-pages/src/pages/index.astro @@ -12,9 +12,11 @@ // can fetch them directly in the browser. const response = await fetch(`/about.json`); const data = await response.json(); - document.getElementById( - 'result' - ).innerHTML = `Load complete!<br/>Built with: <a href="${data.url}">${data.name}!</a>`; + const resultHeader = document.getElementById('result'); + + if (resultHeader) { + resultHeader.innerHTML = `Load complete!<br/>Built with: <a href="${data.url}">${data.name}!</a>`; + } </script> </body> </html> diff --git a/examples/portfolio/src/components/PortfolioPreview.astro b/examples/portfolio/src/components/PortfolioPreview.astro index 3d0a91522..bf59f100f 100644 --- a/examples/portfolio/src/components/PortfolioPreview.astro +++ b/examples/portfolio/src/components/PortfolioPreview.astro @@ -1,4 +1,11 @@ --- +import type { MarkdownInstance } from 'astro'; +import type { Project } from '../types'; + +interface Props { + project: MarkdownInstance<Project> +} + const { frontmatter, url } = Astro.props.project; --- diff --git a/examples/portfolio/src/layouts/project.astro b/examples/portfolio/src/layouts/project.astro index f02f89c74..c4025dc39 100644 --- a/examples/portfolio/src/layouts/project.astro +++ b/examples/portfolio/src/layouts/project.astro @@ -2,11 +2,16 @@ import MainHead from '../components/MainHead.astro'; import Footer from '../components/Footer.astro'; import Nav from '../components/Nav.astro'; +import type { Project } from '../types'; + +interface Props { + content: Project; +} const { content } = Astro.props; --- -<html lang={content.lang || 'en'}> +<html lang="en"> <head> <MainHead title={content.title} description={content.description} /> <style> diff --git a/examples/portfolio/src/pages/index.astro b/examples/portfolio/src/pages/index.astro index 3521f923a..d17170827 100644 --- a/examples/portfolio/src/pages/index.astro +++ b/examples/portfolio/src/pages/index.astro @@ -4,10 +4,11 @@ import MainHead from '../components/MainHead.astro'; import Nav from '../components/Nav.astro'; import Footer from '../components/Footer.astro'; import PortfolioPreview from '../components/PortfolioPreview.astro'; +import type { Project } from '../types'; // Data Fetching: List all Markdown posts in the repo. -const projects = await Astro.glob('./project/**/*.md'); -const featuredProject = projects[0]; +const projects = await Astro.glob<Project>('./project/**/*.md'); +const featuredProject = projects[0]!; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ diff --git a/examples/portfolio/src/pages/projects.astro b/examples/portfolio/src/pages/projects.astro index 415e7aeeb..1f89dabf0 100644 --- a/examples/portfolio/src/pages/projects.astro +++ b/examples/portfolio/src/pages/projects.astro @@ -3,8 +3,9 @@ import MainHead from '../components/MainHead.astro'; import Footer from '../components/Footer.astro'; import Nav from '../components/Nav.astro'; import PortfolioPreview from '../components/PortfolioPreview.astro'; +import type { Project } from '../types'; -const projects = (await Astro.glob('./project/**/*.md')) +const projects = (await Astro.glob<Project>('./project/**/*.md')) .filter(({ frontmatter }) => !!frontmatter.publishDate) .sort( (a, b) => diff --git a/examples/portfolio/src/types.ts b/examples/portfolio/src/types.ts new file mode 100644 index 000000000..e701099a7 --- /dev/null +++ b/examples/portfolio/src/types.ts @@ -0,0 +1,8 @@ +export interface Project { + title: string; + client: string; + description: string; + publishDate: string; + tags: string[]; + img: string; +} diff --git a/examples/ssr/src/api.ts b/examples/ssr/src/api.ts index 939130506..32b48e220 100644 --- a/examples/ssr/src/api.ts +++ b/examples/ssr/src/api.ts @@ -1,4 +1,4 @@ -interface Product { +export interface Product { id: number; name: string; price: number; diff --git a/examples/ssr/src/components/ProductListing.astro b/examples/ssr/src/components/ProductListing.astro index fb3cff00f..96b6ea581 100644 --- a/examples/ssr/src/components/ProductListing.astro +++ b/examples/ssr/src/components/ProductListing.astro @@ -1,4 +1,10 @@ --- +import type { Product } from '../api'; + +interface Props { + products: Product[]; +} + const { products } = Astro.props; --- diff --git a/examples/ssr/src/components/TextDecorationSkip.astro b/examples/ssr/src/components/TextDecorationSkip.astro index ccd866a09..524732d04 100644 --- a/examples/ssr/src/components/TextDecorationSkip.astro +++ b/examples/ssr/src/components/TextDecorationSkip.astro @@ -1,4 +1,8 @@ --- +interface Props { + text: string; +} + const { text } = Astro.props; const words = text.split(' '); const last = words.length - 1; diff --git a/examples/ssr/src/pages/index.astro b/examples/ssr/src/pages/index.astro index 23a4c2721..1ce70bc81 100644 --- a/examples/ssr/src/pages/index.astro +++ b/examples/ssr/src/pages/index.astro @@ -19,16 +19,13 @@ const products = await getProducts(Astro.request); .product-listing-title { text-align: center; } - - .product-listing { - } </style> </head> <body> <Header /> <Container tag="main"> - <ProductListing products={products} class="product-listing"> + <ProductListing products={products}> <h2 class="product-listing-title" slot="title">Product Listing</h2> </ProductListing> </Container> diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json index f85137fd2..4ffa96751 100644 --- a/examples/with-tailwindcss/package.json +++ b/examples/with-tailwindcss/package.json @@ -11,8 +11,9 @@ "astro": "astro" }, "dependencies": { - "astro": "^1.4.7", "@astrojs/tailwind": "^2.0.2", + "@types/canvas-confetti": "^1.4.3", + "astro": "^1.4.7", "autoprefixer": "^10.4.7", "canvas-confetti": "^1.5.1", "postcss": "^8.4.14", diff --git a/examples/with-tailwindcss/src/components/Button.astro b/examples/with-tailwindcss/src/components/Button.astro index ef7af656b..79060699b 100644 --- a/examples/with-tailwindcss/src/components/Button.astro +++ b/examples/with-tailwindcss/src/components/Button.astro @@ -11,5 +11,9 @@ <script> import confetti from 'canvas-confetti'; - document.body.querySelector('button').addEventListener('click', () => confetti()); + const button = document.body.querySelector('button'); + + if (button) { + button.addEventListener('click', () => confetti()); + } </script> |