diff --git a/examples/blog-multiple-authors/src/pages/index.astro b/examples/blog-multiple-authors/src/pages/index.astro index a4407378c..adcf04215 100644 --- a/examples/blog-multiple-authors/src/pages/index.astro +++ b/examples/blog-multiple-authors/src/pages/index.astro @@ -1,23 +1,25 @@ --- +// Component Imports import MainHead from '../components/MainHead.astro'; import Nav from '../components/Nav.astro'; import PostPreview from '../components/PostPreview.astro'; import Pagination from '../components/Pagination.astro'; +import authorData from '../data/authors.json'; -// page +// Component Script: +// You can write any JavaScript/TypeScript that you'd like here. +// It will run during the build, but never in the browser. +// All variables are available to use in the HTML template below. let title = 'Don’s Blog'; let description = 'An example blog on Astro'; -// collection -// note: we want to show first 3 posts here, but we don’t want to paginate at /1, /2, /3, etc. -// so we show a preview of posts here, but actually paginate from $posts.astro -import authorData from '../data/authors.json'; - +// Data Fetching: List all Markdown posts in the repo. let allPosts = Astro.fetchContent('./post/*.md'); allPosts.sort((a, b) => new Date(b.date) - new Date(a.date)); -let firstPage = allPosts.slice(0, 2); ---- +// Full Astro Component Syntax: +// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md +--- {title} diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro index c61340fdd..2f0cdb01c 100644 --- a/examples/blog/src/pages/index.astro +++ b/examples/blog/src/pages/index.astro @@ -1,16 +1,24 @@ --- +// Component Imports import BaseHead from '../components/BaseHead.astro'; import BlogHeader from '../components/BlogHeader.astro'; import BlogPostPreview from '../components/BlogPostPreview.astro'; +// Component Script: +// You can write any JavaScript/TypeScript that you'd like here. +// It will run during the build, but never in the browser. +// All variables are available to use in the HTML template below. let title = 'Example Blog'; let description = 'The perfect starter for your perfect blog.'; let permalink = 'https://example.com/'; +// Data Fetching: List all Markdown posts in the repo. let allPosts = Astro.fetchContent('./posts/*.md'); allPosts = allPosts.sort((a, b) => new Date(b.date) - new Date(a.date)); ---- +// Full Astro Component Syntax: +// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md +--- diff --git a/examples/docs/src/layouts/Main.astro b/examples/docs/src/layouts/Main.astro index 0f1e6efe4..a92ffaff4 100644 --- a/examples/docs/src/layouts/Main.astro +++ b/examples/docs/src/layouts/Main.astro @@ -1,16 +1,23 @@ --- +// Component Imports import ArticleFooter from '../components/ArticleFooter.astro'; import SiteSidebar from '../components/SiteSidebar.astro'; import ThemeToggle from '../components/ThemeToggle.tsx'; import DocSidebar from '../components/DocSidebar.tsx'; +// Component Script: +// You can write any JavaScript/TypeScript that you'd like here. +// It will run during the build, but never in the browser. +// All variables are available to use in the HTML template below. const { content } = Astro.props; const headers = content?.astro?.headers; -let editHref = Astro?.request?.url?.pathname?.slice(1) ?? ''; -if (editHref === '') editHref = `index`; -editHref = `https://github.com/snowpackjs/astro/tree/main/examples/doc/src/pages/${editHref}.md` ---- +const currentPage = Astro.request.url.pathname; +const currentFile = currentPage === '/' ? 'src/pages/index.md' : `src/pages${currentPage.replace(/\/$/, "")}.md`; +const githubEditUrl = `https://github.com/USER/REPO/blob/main/${currentFile}` +// Full Astro Component Syntax: +// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md +--- {content.title} diff --git a/examples/framework-multiple/src/pages/index.astro b/examples/framework-multiple/src/pages/index.astro index 3fbef72e0..a2f15764e 100644 --- a/examples/framework-multiple/src/pages/index.astro +++ b/examples/framework-multiple/src/pages/index.astro @@ -1,11 +1,14 @@ --- +// Component Imports import { A, B as Renamed } from '../components'; import * as react from '../components/ReactCounter.jsx'; import { PreactCounter } from '../components/PreactCounter.tsx'; import VueCounter from '../components/VueCounter.vue'; import SvelteCounter from '../components/SvelteCounter.svelte'; ---- +// Full Astro Component Syntax: +// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md +--- diff --git a/examples/framework-preact/src/pages/index.astro b/examples/framework-preact/src/pages/index.astro index 66fa9e84b..8cdccf783 100644 --- a/examples/framework-preact/src/pages/index.astro +++ b/examples/framework-preact/src/pages/index.astro @@ -1,7 +1,10 @@ --- +// Component Imports import Counter from '../components/Counter.jsx' ---- +// Full Astro Component Syntax: +// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md +--- diff --git a/examples/framework-react/src/pages/index.astro b/examples/framework-react/src/pages/index.astro index 3bd650e02..69b9c6d44 100644 --- a/examples/framework-react/src/pages/index.astro +++ b/examples/framework-react/src/pages/index.astro @@ -1,7 +1,10 @@ --- +// Component Imports import Counter from '../components/Counter.jsx' ---- +// Full Astro Component Syntax: +// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md +--- diff --git a/examples/framework-svelte/src/pages/index.astro b/examples/framework-svelte/src/pages/index.astro index 5a0c1039d..b89e12b4a 100644 --- a/examples/framework-svelte/src/pages/index.astro +++ b/examples/framework-svelte/src/pages/index.astro @@ -1,7 +1,10 @@ --- +// Component Imports import Counter from '../components/Counter.svelte' ---- +// Full Astro Component Syntax: +// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md +--- diff --git a/examples/framework-vue/src/pages/index.astro b/examples/framework-vue/src/pages/index.astro index 949012d0f..1ce7919bd 100644 --- a/examples/framework-vue/src/pages/index.astro +++ b/examples/framework-vue/src/pages/index.astro @@ -1,7 +1,10 @@ --- +// Component Imports import Counter from '../components/Counter.vue' ---- +// Full Astro Component Syntax: +// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md +--- diff --git a/examples/portfolio/src/pages/index.astro b/examples/portfolio/src/pages/index.astro index d6616cfe0..4638bb3e9 100644 --- a/examples/portfolio/src/pages/index.astro +++ b/examples/portfolio/src/pages/index.astro @@ -1,14 +1,18 @@ --- +// Component Imports import MainHead from '../components/MainHead.astro'; import Button from '../components/Button/index.jsx'; import Nav from '../components/Nav/index.jsx'; import Footer from '../components/Footer/index.jsx'; import PorfolioPreview from '../components/PortfolioPreview/index.jsx'; +// Data Fetching: List all Markdown posts in the repo. const projects = Astro.fetchContent('./project/**/*.md'); const featuredProject = projects[0]; ---- +// Full Astro Component Syntax: +// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md +--- diff --git a/examples/starter/src/pages/index.astro b/examples/starter/src/pages/index.astro index de052e9c4..8b44f19ae 100644 --- a/examples/starter/src/pages/index.astro +++ b/examples/starter/src/pages/index.astro @@ -1,16 +1,22 @@ --- +// Component Imports import Tour from '../components/Tour.astro'; ---- - +// Component Script: +// You can write any JavaScript/TypeScript that you'd like here. +// It will run during the build, but never in the browser. +// All variables are available to use in the HTML template below. +let title = 'My Astro Site'; + +// Full Astro Component Syntax: +// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md +--- - Astro - + {title} - diff --git a/examples/with-markdown/src/pages/index.astro b/examples/with-markdown/src/pages/index.astro index 666e0557f..6e402fb1c 100644 --- a/examples/with-markdown/src/pages/index.astro +++ b/examples/with-markdown/src/pages/index.astro @@ -1,4 +1,5 @@ --- +// Component Imports import { Markdown } from 'astro/components'; import Layout from '../layouts/main.astro'; import ReactCounter from '../components/ReactCounter.jsx'; @@ -6,11 +7,17 @@ import PreactCounter from '../components/PreactCounter.tsx'; import VueCounter from '../components/VueCounter.vue'; import SvelteCounter from '../components/SvelteCounter.svelte'; +// Component Script: +// You can write any JavaScript/TypeScript that you'd like here. +// It will run during the build, but never in the browser. +// All variables are available to use in the HTML template below. const title = 'Astro Markdown'; const variable = 'content'; const items = ['A', 'B', 'C']; ---- +// Full Astro Component Syntax: +// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md +--- # Introducing {title} diff --git a/examples/with-nanostores/src/pages/index.astro b/examples/with-nanostores/src/pages/index.astro index 3d7e1d4d6..a40897232 100644 --- a/examples/with-nanostores/src/pages/index.astro +++ b/examples/with-nanostores/src/pages/index.astro @@ -1,11 +1,13 @@ --- +// Component Imports import AdminsReact from '../components/AdminsReact.jsx'; import AdminsSvelte from '../components/AdminsSvelte.svelte'; import AdminsVue from '../components/AdminsVue.vue'; import AdminsPreact from '../components/AdminsPreact.jsx'; ---- - +// Full Astro Component Syntax: +// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md +--- diff --git a/examples/with-tailwindcss/src/pages/index.astro b/examples/with-tailwindcss/src/pages/index.astro index 00ac41dac..1c1c52902 100644 --- a/examples/with-tailwindcss/src/pages/index.astro +++ b/examples/with-tailwindcss/src/pages/index.astro @@ -1,7 +1,10 @@ --- +// Component Imports import Button from '../components/Button.astro'; ---- +// Full Astro Component Syntax: +// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md +---