[ci] format
This commit is contained in:
FredKSchott
fredkbot
parent
24c8e7d853
commit
4de35f3b70
59 changed files with 216 additions and 185 deletions
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Card from "../components/Card.astro";
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Card from '../components/Card.astro';
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Astro.">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import "../styles/blog.css";
|
||||
import '../styles/blog.css';
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
|
|
|
|||
|
|
@ -8,4 +8,3 @@ const { username, href } = Astro.props as Props;
|
|||
---
|
||||
|
||||
<p>Follow me <a {href} target="_blank" rel="noreferrer">@{username}</a></p>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
import BaseHead from "../components/BaseHead.astro";
|
||||
import Header from "../components/Header.astro";
|
||||
import BlogPostPreview from "../components/BlogPostPreview.astro";
|
||||
import BaseHead from '../components/BaseHead.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import BlogPostPreview from '../components/BlogPostPreview.astro';
|
||||
|
||||
let title = "Example Blog";
|
||||
let description = "The perfect starter for your perfect blog.";
|
||||
let title = 'Example Blog';
|
||||
let description = 'The perfect starter for your perfect blog.';
|
||||
|
||||
// Use Astro.glob to fetch all post with associated frontmatter
|
||||
const unsortedPosts = await Astro.glob("./posts/*.md");
|
||||
const unsortedPosts = await Astro.glob('./posts/*.md');
|
||||
const posts = unsortedPosts.sort(function (a, b) {
|
||||
return (
|
||||
new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf()
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import * as Component from "@example/my-component";
|
||||
import * as Component from '@example/my-component';
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ const { type, ...props } = {
|
|||
...Astro.props,
|
||||
} as Props;
|
||||
|
||||
props.type = type || "button";
|
||||
props.type = type || 'button';
|
||||
---
|
||||
|
||||
<button {...props}><slot /></button>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ const { level, role, ...props } = {
|
|||
...Astro.props,
|
||||
} as Props;
|
||||
|
||||
props.role = role || "heading";
|
||||
props["aria-level"] = level || "1";
|
||||
props.role = role || 'heading';
|
||||
props['aria-level'] = level || '1';
|
||||
---
|
||||
|
||||
<h {...props}><slot /></h>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// fetch all commits for just this page's path
|
||||
const path = "docs/" + Astro.props.path;
|
||||
const path = 'docs/' + Astro.props.path;
|
||||
const url = `https://api.github.com/repos/withastro/astro/commits?path=${path}`;
|
||||
const commitsURL = `https://github.com/withastro/astro/commits/main/${path}`;
|
||||
|
||||
|
|
@ -13,13 +13,13 @@ async function getCommits(url) {
|
|||
);
|
||||
}
|
||||
|
||||
const auth = `Basic ${Buffer.from(token, "binary").toString("base64")}`;
|
||||
const auth = `Basic ${Buffer.from(token, 'binary').toString('base64')}`;
|
||||
|
||||
const res = await fetch(url, {
|
||||
method: "GET",
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: auth,
|
||||
"User-Agent": "astro-docs/1.0",
|
||||
'User-Agent': 'astro-docs/1.0',
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -81,7 +81,7 @@ const additionalContributors = unique.length - recentContributors.length; // lis
|
|||
{additionalContributors > 0 && (
|
||||
<span>
|
||||
<a href={commitsURL}>{`and ${additionalContributors} additional contributor${
|
||||
additionalContributors > 1 ? "s" : ""
|
||||
additionalContributors > 1 ? 's' : ''
|
||||
}.`}</a>
|
||||
</span>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import AvatarList from "./AvatarList.astro";
|
||||
import AvatarList from './AvatarList.astro';
|
||||
const { path } = Astro.props;
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import "../styles/theme.css";
|
||||
import "../styles/index.css";
|
||||
import '../styles/theme.css';
|
||||
import '../styles/index.css';
|
||||
---
|
||||
|
||||
<!-- Global Metadata -->
|
||||
|
|
@ -28,11 +28,11 @@ import "../styles/index.css";
|
|||
<!-- This is intentionally inlined to avoid FOUC -->
|
||||
<script is:inline>
|
||||
const root = document.documentElement;
|
||||
const theme = localStorage.getItem("theme");
|
||||
if (theme === "dark" || (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
|
||||
root.classList.add("theme-dark");
|
||||
const theme = localStorage.getItem('theme');
|
||||
if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
root.classList.add('theme-dark');
|
||||
} else {
|
||||
root.classList.remove("theme-dark");
|
||||
root.classList.remove('theme-dark');
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
import { SITE, OPEN_GRAPH } from "../config";
|
||||
import { SITE, OPEN_GRAPH } from '../config';
|
||||
export interface Props {
|
||||
content: any;
|
||||
site: any;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
---
|
||||
import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from "../../languages";
|
||||
import * as CONFIG from "../../config";
|
||||
import AstroLogo from "./AstroLogo.astro";
|
||||
import SkipToContent from "./SkipToContent.astro";
|
||||
import SidebarToggle from "./SidebarToggle";
|
||||
import LanguageSelect from "./LanguageSelect";
|
||||
import Search from "./Search";
|
||||
import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages';
|
||||
import * as CONFIG from '../../config';
|
||||
import AstroLogo from './AstroLogo.astro';
|
||||
import SkipToContent from './SkipToContent.astro';
|
||||
import SidebarToggle from './SidebarToggle';
|
||||
import LanguageSelect from './LanguageSelect';
|
||||
import Search from './Search';
|
||||
|
||||
const { currentPage } = Astro.props;
|
||||
const lang = currentPage && getLanguageFromURL(currentPage);
|
||||
|
|
@ -20,7 +20,7 @@ const lang = currentPage && getLanguageFromURL(currentPage);
|
|||
<div class="logo flex">
|
||||
<a href="/">
|
||||
<AstroLogo size={40} />
|
||||
<h1>{CONFIG.SITE.title ?? "Documentation"}</h1>
|
||||
<h1>{CONFIG.SITE.title ?? 'Documentation'}</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import { getLanguageFromURL } from "../../languages";
|
||||
import { SIDEBAR } from "../../config";
|
||||
import { getLanguageFromURL } from '../../languages';
|
||||
import { SIDEBAR } from '../../config';
|
||||
const { currentPage } = Astro.props;
|
||||
const currentPageMatch = currentPage.slice(1);
|
||||
const langCode = getLanguageFromURL(currentPage);
|
||||
|
|
@ -9,7 +9,7 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
|
|||
// If the first item is not a section header, create a new container section.
|
||||
if (i === 0) {
|
||||
if (!item.header) {
|
||||
const pesudoSection = { text: "" };
|
||||
const pesudoSection = { text: '' };
|
||||
col.push({ ...pesudoSection, children: [] });
|
||||
}
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
|
|||
<li class="nav-link">
|
||||
<a
|
||||
href={`${Astro.site.pathname}${child.link}`}
|
||||
aria-current={`${currentPageMatch === child.link ? "page" : "false"}`}
|
||||
aria-current={`${currentPageMatch === child.link ? 'page' : 'false'}`}
|
||||
>
|
||||
{child.text}
|
||||
</a>
|
||||
|
|
@ -47,10 +47,10 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
|
|||
</nav>
|
||||
|
||||
<script is:inline>
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
var target = document.querySelector('[aria-current="page"]');
|
||||
if (target && target.offsetTop > window.innerHeight - 100) {
|
||||
document.querySelector(".nav-groups").scrollTop = target.offsetTop;
|
||||
document.querySelector('.nav-groups').scrollTop = target.offsetTop;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -103,13 +103,13 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
|
|||
background-color: var(--theme-bg-hover);
|
||||
}
|
||||
|
||||
.nav-link a[aria-current="page"] {
|
||||
.nav-link a[aria-current='page'] {
|
||||
color: var(--theme-text-accent);
|
||||
background-color: var(--theme-bg-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:global(:root.theme-dark) .nav-link a[aria-current="page"] {
|
||||
:global(:root.theme-dark) .nav-link a[aria-current='page'] {
|
||||
color: hsla(var(--color-base-white), 100%, 1);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import MoreMenu from "../RightSidebar/MoreMenu.astro";
|
||||
import TableOfContents from "../RightSidebar/TableOfContents";
|
||||
import MoreMenu from '../RightSidebar/MoreMenu.astro';
|
||||
import TableOfContents from '../RightSidebar/TableOfContents';
|
||||
|
||||
const { content, headings, githubEditUrl } = Astro.props;
|
||||
const title = content.title;
|
||||
|
|
@ -29,7 +29,7 @@ const title = content.title;
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content>section {
|
||||
.content > section {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import ThemeToggleButton from "./ThemeToggleButton";
|
||||
import * as CONFIG from "../../config";
|
||||
import ThemeToggleButton from './ThemeToggleButton';
|
||||
import * as CONFIG from '../../config';
|
||||
const { editHref } = Astro.props;
|
||||
const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import TableOfContents from "./TableOfContents";
|
||||
import MoreMenu from "./MoreMenu.astro";
|
||||
import TableOfContents from './TableOfContents';
|
||||
import MoreMenu from './MoreMenu.astro';
|
||||
const { content, headings, githubEditUrl } = Astro.props;
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
---
|
||||
import HeadCommon from "../components/HeadCommon.astro";
|
||||
import HeadSEO from "../components/HeadSEO.astro";
|
||||
import Header from "../components/Header/Header.astro";
|
||||
import Footer from "../components/Footer/Footer.astro";
|
||||
import PageContent from "../components/PageContent/PageContent.astro";
|
||||
import LeftSidebar from "../components/LeftSidebar/LeftSidebar.astro";
|
||||
import RightSidebar from "../components/RightSidebar/RightSidebar.astro";
|
||||
import * as CONFIG from "../config";
|
||||
import HeadCommon from '../components/HeadCommon.astro';
|
||||
import HeadSEO from '../components/HeadSEO.astro';
|
||||
import Header from '../components/Header/Header.astro';
|
||||
import Footer from '../components/Footer/Footer.astro';
|
||||
import PageContent from '../components/PageContent/PageContent.astro';
|
||||
import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
|
||||
import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
|
||||
import * as CONFIG from '../config';
|
||||
|
||||
const { content = {} } = Astro.props;
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
const currentPage = Astro.url.pathname;
|
||||
const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`;
|
||||
const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
|
||||
const githubEditUrl = CONFIG.GITHUB_EDIT_URL && CONFIG.GITHUB_EDIT_URL + currentFile;
|
||||
---
|
||||
|
||||
<html dir={content.dir ?? "ltr"} lang={content.lang ?? "en-us"} class="initial">
|
||||
<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
|
||||
<head>
|
||||
<HeadCommon />
|
||||
<HeadSEO {content} canonicalURL={canonicalURL} />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// Component Imports
|
||||
import Counter from "../components/Counter.astro";
|
||||
import Counter from '../components/Counter.astro';
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
@ -24,7 +24,7 @@ import Counter from "../components/Counter.astro";
|
|||
|
||||
<!-- Load AlpineJS on the page -->
|
||||
<script>
|
||||
import Alpine from "alpinejs";
|
||||
import Alpine from 'alpinejs';
|
||||
Alpine.start();
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import Lorem from "../components/Lorem.astro";
|
||||
import { CalcAdd } from "../components/calc-add.js";
|
||||
import { MyCounter } from "../components/my-counter.js";
|
||||
import Lorem from '../components/Lorem.astro';
|
||||
import { CalcAdd } from '../components/calc-add.js';
|
||||
import { MyCounter } from '../components/my-counter.js';
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
---
|
||||
// Style Imports
|
||||
import "../styles/global.css";
|
||||
import '../styles/global.css';
|
||||
|
||||
// Component Imports
|
||||
// For JSX components, all the common ways of exporting (under a namespace, specific export, default export etc) are supported!
|
||||
import * as react from "../components/ReactCounter";
|
||||
import { PreactCounter } from "../components/PreactCounter";
|
||||
import SolidCounter from "../components/SolidCounter";
|
||||
import * as react from '../components/ReactCounter';
|
||||
import { PreactCounter } from '../components/PreactCounter';
|
||||
import SolidCounter from '../components/SolidCounter';
|
||||
|
||||
import VueCounter from "../components/VueCounter.vue";
|
||||
import SvelteCounter from "../components/SvelteCounter.svelte";
|
||||
import VueCounter from '../components/VueCounter.vue';
|
||||
import SvelteCounter from '../components/SvelteCounter.svelte';
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// Component Imports
|
||||
import Counter from "../components/Counter";
|
||||
import Counter from '../components/Counter';
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// Component Imports
|
||||
import Counter from "../components/Counter";
|
||||
import Counter from '../components/Counter';
|
||||
const someProps = {
|
||||
count: 0,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// Component Imports
|
||||
import Counter from "../components/Counter";
|
||||
import Counter from '../components/Counter';
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// Component Imports
|
||||
import Counter from "../components/Counter.svelte";
|
||||
import Counter from '../components/Counter.svelte';
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// Component Imports
|
||||
import Counter from "../components/Counter.vue";
|
||||
import Counter from '../components/Counter.vue';
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
const response = await fetch(`/about.json`);
|
||||
const data = await response.json();
|
||||
document.getElementById(
|
||||
"result"
|
||||
'result'
|
||||
).innerHTML = `Load complete!<br/>Built with: <a href="${data.url}">${data.name}!</a>`;
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
import "../styles/global.scss";
|
||||
import '../styles/global.scss';
|
||||
const {
|
||||
title = "Jeanine White: Personal Site",
|
||||
description = "The personal site of Jeanine White",
|
||||
title = 'Jeanine White: Personal Site',
|
||||
description = 'The personal site of Jeanine White',
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
import MainHead from "../components/MainHead.astro";
|
||||
import Button from "../components/Button/index.jsx";
|
||||
import Footer from "../components/Footer/index.jsx";
|
||||
import Nav from "../components/Nav/index.jsx";
|
||||
import MainHead from '../components/MainHead.astro';
|
||||
import Button from '../components/Button/index.jsx';
|
||||
import Footer from '../components/Footer/index.jsx';
|
||||
import Nav from '../components/Nav/index.jsx';
|
||||
|
||||
const { content } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang={content.lang || "en"}>
|
||||
<html lang={content.lang || 'en'}>
|
||||
<head>
|
||||
<MainHead title={content.title} description={content.description} />
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import MainHead from "../components/MainHead.astro";
|
||||
import Footer from "../components/Footer/index.jsx";
|
||||
import Nav from "../components/Nav/index.jsx";
|
||||
import MainHead from '../components/MainHead.astro';
|
||||
import Footer from '../components/Footer/index.jsx';
|
||||
import Nav from '../components/Nav/index.jsx';
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import MainHead from "../components/MainHead.astro";
|
||||
import Footer from "../components/Footer/index.jsx";
|
||||
import Nav from "../components/Nav/index.jsx";
|
||||
import MainHead from '../components/MainHead.astro';
|
||||
import Footer from '../components/Footer/index.jsx';
|
||||
import Nav from '../components/Nav/index.jsx';
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
// 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 PortfolioPreview from "../components/PortfolioPreview/index.jsx";
|
||||
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 PortfolioPreview from '../components/PortfolioPreview/index.jsx';
|
||||
|
||||
// Data Fetching: List all Markdown posts in the repo.
|
||||
const projects = await Astro.glob("./project/**/*.md");
|
||||
const projects = await Astro.glob('./project/**/*.md');
|
||||
const featuredProject = projects[0];
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
|
|
@ -40,7 +40,7 @@ const featuredProject = projects[0];
|
|||
|
||||
.gradient,
|
||||
.gradient2 {
|
||||
background-image: url("/assets/mesh-gradient.jpg");
|
||||
background-image: url('/assets/mesh-gradient.jpg');
|
||||
background-size: cover;
|
||||
pointer-events: none;
|
||||
mix-blend-mode: screen;
|
||||
|
|
@ -225,7 +225,7 @@ const featuredProject = projects[0];
|
|||
<div class="section">
|
||||
<h3 class="sectionTitle">About me</h3>
|
||||
<p class="bio">
|
||||
<span>Hello!</span> I’m Jeanine, and this is my website. It was made using{" "}
|
||||
<span>Hello!</span> I’m Jeanine, and this is my website. It was made using{' '}
|
||||
<a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> Astro</a>,
|
||||
a new way to build static sites. This is just an example template for you to modify.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
import MainHead from "../components/MainHead.astro";
|
||||
import Footer from "../components/Footer/index.jsx";
|
||||
import Nav from "../components/Nav/index.jsx";
|
||||
import PortfolioPreview from "../components/PortfolioPreview/index.jsx";
|
||||
import MainHead from '../components/MainHead.astro';
|
||||
import Footer from '../components/Footer/index.jsx';
|
||||
import Nav from '../components/Nav/index.jsx';
|
||||
import PortfolioPreview from '../components/PortfolioPreview/index.jsx';
|
||||
|
||||
const projects = (await Astro.glob("./project/**/*.md"))
|
||||
const projects = (await Astro.glob('./project/**/*.md'))
|
||||
.filter(({ frontmatter }) => !!frontmatter.publishDate)
|
||||
.sort(
|
||||
(a, b) =>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
const { tag = "div" } = Astro.props;
|
||||
const { tag = 'div' } = Astro.props;
|
||||
const Tag = tag;
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
---
|
||||
import TextDecorationSkip from "./TextDecorationSkip.astro";
|
||||
import Cart from "./Cart.svelte";
|
||||
import { getCart } from "../api";
|
||||
import TextDecorationSkip from './TextDecorationSkip.astro';
|
||||
import Cart from './Cart.svelte';
|
||||
import { getCart } from '../api';
|
||||
|
||||
const cart = await getCart(Astro.request);
|
||||
const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0);
|
||||
---
|
||||
|
||||
<style>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
|
||||
|
||||
header {
|
||||
margin: 1rem 2rem;
|
||||
|
|
@ -18,7 +18,7 @@ const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0);
|
|||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-family: "Lobster", cursive;
|
||||
font-family: 'Lobster', cursive;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const { products } = Astro.props;
|
|||
color: #787878;
|
||||
}
|
||||
</style>
|
||||
<slot name="title"></slot>
|
||||
<slot name="title" />
|
||||
<ul>
|
||||
{products.map((product) => (
|
||||
<li class="product">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
const { text } = Astro.props;
|
||||
const words = text.split(" ");
|
||||
const words = text.split(' ');
|
||||
const last = words.length - 1;
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
---
|
||||
import Header from "../components/Header.astro";
|
||||
import Container from "../components/Container.astro";
|
||||
import { getCart } from "../api";
|
||||
import { isLoggedIn } from "../models/user";
|
||||
import Header from '../components/Header.astro';
|
||||
import Container from '../components/Container.astro';
|
||||
import { getCart } from '../api';
|
||||
import { isLoggedIn } from '../models/user';
|
||||
|
||||
if (!isLoggedIn(Astro.request)) {
|
||||
return Astro.redirect("/");
|
||||
return Astro.redirect('/');
|
||||
}
|
||||
|
||||
// They must be logged in.
|
||||
|
||||
const user = { name: "test" }; // getUser?
|
||||
const user = { name: 'test' }; // getUser?
|
||||
const cart = await getCart(Astro.request);
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
import Header from "../components/Header.astro";
|
||||
import Container from "../components/Container.astro";
|
||||
import ProductListing from "../components/ProductListing.astro";
|
||||
import { getProducts } from "../api";
|
||||
import "../styles/common.css";
|
||||
import Header from '../components/Header.astro';
|
||||
import Container from '../components/Container.astro';
|
||||
import ProductListing from '../components/ProductListing.astro';
|
||||
import { getProducts } from '../api';
|
||||
import '../styles/common.css';
|
||||
|
||||
const products = await getProducts(Astro.request);
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import Header from "../components/Header.astro";
|
||||
import Container from "../components/Container.astro";
|
||||
import Header from '../components/Header.astro';
|
||||
import Container from '../components/Container.astro';
|
||||
---
|
||||
|
||||
<html>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
import Header from "../../components/Header.astro";
|
||||
import Container from "../../components/Container.astro";
|
||||
import AddToCart from "../../components/AddToCart.svelte";
|
||||
import { getProduct } from "../../api";
|
||||
import "../../styles/common.css";
|
||||
import Header from '../../components/Header.astro';
|
||||
import Container from '../../components/Container.astro';
|
||||
import AddToCart from '../../components/AddToCart.svelte';
|
||||
import { getProduct } from '../../api';
|
||||
import '../../styles/common.css';
|
||||
|
||||
const id = Number(Astro.params.id);
|
||||
const product = await getProduct(Astro.request, id);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import "../styles/main.css";
|
||||
import Time from "../components/Time.jsx";
|
||||
import '../styles/main.css';
|
||||
import Time from '../components/Time.jsx';
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
import "../styles/global.css";
|
||||
import '../styles/global.css';
|
||||
|
||||
const { content } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang={content.lang || "en"}>
|
||||
<html lang={content.lang || 'en'}>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
import "../styles/global.css";
|
||||
import '../styles/global.css';
|
||||
|
||||
const { content } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang={content.lang || "en"}>
|
||||
<html lang={content.lang || 'en'}>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ We also support syntax highlighting in MDX out-of-the-box! This example uses our
|
|||
|
||||
```astro
|
||||
---
|
||||
const weSupportAstro = true
|
||||
const weSupportAstro = true;
|
||||
---
|
||||
|
||||
<h1>Hey, what theme is that? Looks nice!</h1>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<h1>Astronaut Figurine</h1>
|
||||
<p class="limited-edition-badge">Limited Edition</p>
|
||||
<p>The limited edition Astronaut Figurine is the perfect gift for any Astro contributor. This fully-poseable action figurine comes equipped with:</p>
|
||||
<p>
|
||||
The limited edition Astronaut Figurine is the perfect gift for any Astro contributor. This
|
||||
fully-poseable action figurine comes equipped with:
|
||||
</p>
|
||||
<ul>
|
||||
<li>A fabric space suit with adjustible straps</li>
|
||||
<li>Boots lightly dusted by the lunar surface *</li>
|
||||
|
|
@ -15,11 +18,11 @@
|
|||
margin: 0;
|
||||
margin-block-start: 2rem;
|
||||
}
|
||||
|
||||
|
||||
.limited-edition-badge {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
background-image: linear-gradient(0deg,var(--astro-blue), var(--astro-pink));
|
||||
background-image: linear-gradient(0deg, var(--astro-blue), var(--astro-pink));
|
||||
background-size: 100% 200%;
|
||||
background-position-y: 100%;
|
||||
border-radius: 0.4rem;
|
||||
|
|
@ -30,7 +33,12 @@
|
|||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { background-position-y: 0%; }
|
||||
50% { background-position-y: 80%; }
|
||||
0%,
|
||||
100% {
|
||||
background-position-y: 0%;
|
||||
}
|
||||
50% {
|
||||
background-position-y: 80%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ const item: CartItemDisplayInfo = {
|
|||
imageSrc: '/images/astronaut-figurine.png',
|
||||
};
|
||||
---
|
||||
|
||||
<Layout title={item.name}>
|
||||
<main>
|
||||
<div class="product-layout">
|
||||
|
|
@ -42,7 +43,7 @@ const item: CartItemDisplayInfo = {
|
|||
max-width: 26rem;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
button[type='submit'] {
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@
|
|||
</button>
|
||||
|
||||
<script>
|
||||
import confetti from "canvas-confetti";
|
||||
document.body.querySelector("button").addEventListener("click", () => confetti());
|
||||
import confetti from 'canvas-confetti';
|
||||
document.body.querySelector('button').addEventListener('click', () => confetti());
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
// Component Imports
|
||||
import Button from "../components/Button.astro";
|
||||
import Button from '../components/Button.astro';
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
|
|
|
|||
|
|
@ -8,9 +8,11 @@ export interface Props {
|
|||
}
|
||||
|
||||
const { class: className, lang, code } = Astro.props as Props;
|
||||
const { classLanguage, html } = runHighlighterWithAstro(lang, code)
|
||||
const { classLanguage, html } = runHighlighterWithAstro(lang, code);
|
||||
---
|
||||
|
||||
<pre class={[className, classLanguage].join(' ')}>
|
||||
<code class={classLanguage}><Fragment set:html={html} /></code>
|
||||
<pre
|
||||
class={[className, classLanguage].join(
|
||||
' '
|
||||
)}> <code class={classLanguage}><Fragment set:html={html} /></code>
|
||||
</pre>
|
||||
|
|
|
|||
|
|
@ -374,13 +374,14 @@ The **Astro v1.0.0 Release Candidate** comes includes new features, tons of bug
|
|||
---
|
||||
import LoadTodos from '../components/LoadTodos.astro';
|
||||
---
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>App</title>
|
||||
</head>
|
||||
<body>
|
||||
<LoadTodos />
|
||||
</body>
|
||||
<head>
|
||||
<title>App</title>
|
||||
</head>
|
||||
<body>
|
||||
<LoadTodos />
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
|
@ -390,12 +391,11 @@ The **Astro v1.0.0 Release Candidate** comes includes new features, tons of bug
|
|||
|
||||
```astro
|
||||
<ul>
|
||||
{(async function * () {
|
||||
for(const number of numbers) {
|
||||
{(async function* () {
|
||||
for (const number of numbers) {
|
||||
await wait(1000);
|
||||
|
||||
yield <li>Number: {number}</li>
|
||||
yield '\n'
|
||||
yield <li>Number: {number}</li>;
|
||||
yield '\n';
|
||||
}
|
||||
})()}
|
||||
</ul>
|
||||
|
|
@ -2586,7 +2586,9 @@ For convenience, you may now also move your `astro.config.js` file to a top-leve
|
|||
```astro
|
||||
---
|
||||
import Debug from 'astro/debug';
|
||||
const obj = { /* ... */ }
|
||||
const obj = {
|
||||
/* ... */
|
||||
};
|
||||
---
|
||||
|
||||
<Debug {obj} />
|
||||
|
|
|
|||
|
|
@ -39,13 +39,19 @@ function repairShikiTheme(html: string): string {
|
|||
// Replace "shiki" class naming with "astro"
|
||||
html = html.replace('<pre class="shiki"', '<pre class="astro-code"');
|
||||
// Replace "shiki" css variable naming with "astro".
|
||||
html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-');
|
||||
html = html.replace(
|
||||
/style="(background-)?color: var\(--shiki-/g,
|
||||
'style="$1color: var(--astro-code-'
|
||||
);
|
||||
// Handle code wrapping
|
||||
// if wrap=null, do nothing.
|
||||
if (wrap === false) {
|
||||
html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto;"');
|
||||
} else if (wrap === true) {
|
||||
html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"');
|
||||
html = html.replace(
|
||||
/style="(.*?)"/,
|
||||
'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"'
|
||||
);
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,10 @@ const value = Astro.props[key];
|
|||
|
||||
<div class="astro-debug">
|
||||
<div class="astro-debug-header">
|
||||
<h2 class="astro-debug-title"><span class="astro-debug-label">Debug</span> <span class="astro-debug-name">"{key}"</span></h2>
|
||||
<h2 class="astro-debug-title">
|
||||
<span class="astro-debug-label">Debug</span>
|
||||
<span class="astro-debug-name">"{key}"</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<Code code={JSON.stringify(value, null, 2)} />
|
||||
|
|
@ -18,7 +21,8 @@ const value = Astro.props[key];
|
|||
font-size: 14px;
|
||||
padding: 1rem 1.5rem;
|
||||
background: white;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
.astro-debug-header,
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
The new `Astro.clientAddress` property allows you to get the IP address of the requested user.
|
||||
|
||||
```astro
|
||||
<div>Your address { Astro.clientAddress }</div>
|
||||
<div>Your address {Astro.clientAddress}</div>
|
||||
```
|
||||
|
||||
This property is only available when building for SSR, and only if the adapter you are using supports providing the IP address. If you attempt to access the property in a SSG app it will throw an error.
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
The new `Astro.clientAddress` property allows you to get the IP address of the requested user.
|
||||
|
||||
```astro
|
||||
<div>Your address { Astro.clientAddress }</div>
|
||||
<div>Your address {Astro.clientAddress}</div>
|
||||
```
|
||||
|
||||
This property is only available when building for SSR, and only if the adapter you are using supports providing the IP address. If you attempt to access the property in a SSG app it will throw an error.
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ import { getImage } from '../dist/index.js';
|
|||
import type { ImgHTMLAttributes } from './index.js';
|
||||
import type { ImageMetadata, TransformOptions, OutputFormat } from '../dist/index.js';
|
||||
|
||||
interface LocalImageProps extends
|
||||
Omit<TransformOptions, 'src'>,
|
||||
Omit<ImgHTMLAttributes, | 'src' | 'width' | 'height'> {
|
||||
interface LocalImageProps
|
||||
extends Omit<TransformOptions, 'src'>,
|
||||
Omit<ImgHTMLAttributes, 'src' | 'width' | 'height'> {
|
||||
src: ImageMetadata | Promise<{ default: ImageMetadata }>;
|
||||
}
|
||||
|
||||
|
|
@ -19,7 +19,7 @@ interface RemoteImageProps extends TransformOptions, astroHTML.JSX.ImgHTMLAttrib
|
|||
|
||||
export type Props = LocalImageProps | RemoteImageProps;
|
||||
|
||||
const { loading = "lazy", decoding = "async", ...props } = Astro.props as Props;
|
||||
const { loading = 'lazy', decoding = 'async', ...props } = Astro.props as Props;
|
||||
|
||||
const attrs = await getImage(props);
|
||||
---
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ import { getPicture } from '../dist/index.js';
|
|||
import type { ImgHTMLAttributes, HTMLAttributes } from './index.js';
|
||||
import type { ImageMetadata, OutputFormat, TransformOptions } from '../dist/index.js';
|
||||
|
||||
interface LocalImageProps extends
|
||||
Omit<HTMLAttributes, 'src' | 'width' | 'height'>,
|
||||
Omit<TransformOptions, 'src'>,
|
||||
Pick<astroHTML.JSX.ImgHTMLAttributes, 'loading' | 'decoding'> {
|
||||
interface LocalImageProps
|
||||
extends Omit<HTMLAttributes, 'src' | 'width' | 'height'>,
|
||||
Omit<TransformOptions, 'src'>,
|
||||
Pick<astroHTML.JSX.ImgHTMLAttributes, 'loading' | 'decoding'> {
|
||||
src: ImageMetadata | Promise<{ default: ImageMetadata }>;
|
||||
alt?: string;
|
||||
sizes: HTMLImageElement['sizes'];
|
||||
|
|
@ -14,10 +14,10 @@ interface LocalImageProps extends
|
|||
formats?: OutputFormat[];
|
||||
}
|
||||
|
||||
interface RemoteImageProps extends
|
||||
Omit<HTMLAttributes, 'src' | 'width' | 'height'>,
|
||||
TransformOptions,
|
||||
Pick<ImgHTMLAttributes, 'loading' | 'decoding'> {
|
||||
interface RemoteImageProps
|
||||
extends Omit<HTMLAttributes, 'src' | 'width' | 'height'>,
|
||||
TransformOptions,
|
||||
Pick<ImgHTMLAttributes, 'loading' | 'decoding'> {
|
||||
src: string;
|
||||
alt?: string;
|
||||
sizes: HTMLImageElement['sizes'];
|
||||
|
|
@ -28,14 +28,23 @@ interface RemoteImageProps extends
|
|||
|
||||
export type Props = LocalImageProps | RemoteImageProps;
|
||||
|
||||
const { src, alt, sizes, widths, aspectRatio, formats = ['avif', 'webp'], loading = 'lazy', decoding = 'async', ...attrs } = Astro.props as Props;
|
||||
const {
|
||||
src,
|
||||
alt,
|
||||
sizes,
|
||||
widths,
|
||||
aspectRatio,
|
||||
formats = ['avif', 'webp'],
|
||||
loading = 'lazy',
|
||||
decoding = 'async',
|
||||
...attrs
|
||||
} = Astro.props as Props;
|
||||
|
||||
const { image, sources } = await getPicture({ src, widths, formats, aspectRatio });
|
||||
---
|
||||
|
||||
<picture {...attrs}>
|
||||
{sources.map(attrs => (
|
||||
<source {...attrs} {sizes}>))}
|
||||
{sources.map((attrs) => <source {...attrs} {sizes} />)}
|
||||
<img {...image} {loading} {decoding} {alt} />
|
||||
</picture>
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
The new `Astro.clientAddress` property allows you to get the IP address of the requested user.
|
||||
|
||||
```astro
|
||||
<div>Your address { Astro.clientAddress }</div>
|
||||
<div>Your address {Astro.clientAddress}</div>
|
||||
```
|
||||
|
||||
This property is only available when building for SSR, and only if the adapter you are using supports providing the IP address. If you attempt to access the property in a SSG app it will throw an error.
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
The new `Astro.clientAddress` property allows you to get the IP address of the requested user.
|
||||
|
||||
```astro
|
||||
<div>Your address { Astro.clientAddress }</div>
|
||||
<div>Your address {Astro.clientAddress}</div>
|
||||
```
|
||||
|
||||
This property is only available when building for SSR, and only if the adapter you are using supports providing the IP address. If you attempt to access the property in a SSG app it will throw an error.
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
The new `Astro.clientAddress` property allows you to get the IP address of the requested user.
|
||||
|
||||
```astro
|
||||
<div>Your address { Astro.clientAddress }</div>
|
||||
<div>Your address {Astro.clientAddress}</div>
|
||||
```
|
||||
|
||||
This property is only available when building for SSR, and only if the adapter you are using supports providing the IP address. If you attempt to access the property in a SSG app it will throw an error.
|
||||
|
|
|
|||
Loading…
Reference in a new issue