Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Format astro files in examples #3862

Merged
merged 6 commits into from
Jul 8, 2022
Merged

Format astro files in examples #3862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
02ed1fb
Setup prettier plugin for astro files
MarcusOtter Jul 8, 2022
7f10bcf
Use prettier plugin on examples
MarcusOtter Jul 8, 2022
6fafc7d
Revert "Setup prettier plugin for astro files"
MarcusOtter Jul 8, 2022
93b46bd
Use double quotes
MarcusOtter Jul 8, 2022
53ea737
Self-close slots
MarcusOtter Jul 8, 2022
ab3c302
Move style tag outside body
MarcusOtter Jul 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions examples/basics/src/components/Card.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
---
export interface Props {
title: string,
body: string,
href: string,
title: string;
body: string;
href: string;
}
const {href, title, body} = Astro.props;
const { href, title, body } = Astro.props;
---

<li class="link-card">
<a href={href}>
<h2>
{title}
<span>&rarr;</span>
</h2>
<p>
{body}
</p>
</a>
<a href={href}>
<h2>
{title}
<span>&rarr;</span>
</h2>
<p>
{body}
</p>
</a>
</li>
<style>

:root {
--link-gradient: linear-gradient(45deg, #4F39FA, #DA62C4 30%, var(--color-border) 60%);
--link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%);
}

.link-card {
Expand Down Expand Up @@ -49,11 +49,11 @@ const {href, title, body} = Astro.props;
margin: 0;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
p {
margin-top: 0.75rem;
margin-bottom: 0;
}

p {
margin-top: 0.75rem;
margin-bottom: 0;
}

h2 span {
display: inline-block;
Expand All @@ -65,7 +65,7 @@ const {href, title, body} = Astro.props;
}

.link-card:is(:hover, :focus-within) h2 {
color: #4F39FA;
color: #4f39fa;
}

.link-card:is(:hover, :focus-within) h2 span {
Expand Down
69 changes: 34 additions & 35 deletions examples/basics/src/layouts/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,49 +8,48 @@ const { title } = Astro.props as Props;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>{title}</title>
</head>
<body>
<slot />
</body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>{title}</title>
</head>
<body>
<slot />
</body>
</html>

<style>
:root {
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
:root {
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);

--color-text: hsl(12, 5%, 4%);
--color-bg: hsl(10, 21%, 95%);
--color-text: hsl(12, 5%, 4%);
--color-bg: hsl(10, 21%, 95%);
--color-border: hsl(17, 24%, 90%);
}
}

html {
font-family: system-ui, sans-serif;
font-size: var(--font-size-base);
color: var(--color-text);
background-color: var(--color-bg);
}
html {
font-family: system-ui, sans-serif;
font-size: var(--font-size-base);
color: var(--color-text);
background-color: var(--color-bg);
}

body {
margin: 0;
}
body {
margin: 0;
}

:global(h1) {
font-size: var(--font-size-xl);
}
:global(h1) {
font-size: var(--font-size-xl);
}

:global(h2) {
font-size: var(--font-size-lg);
}
:global(h2) {
font-size: var(--font-size-lg);
}

:global(code) {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
:global(code) {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
}
</style>
48 changes: 35 additions & 13 deletions examples/basics/src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,43 @@
---
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.">
<main>
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
<p class="instructions">
Check out the <code>src/pages</code> directory to get started.<br/>
Check out the <code>src/pages</code> directory to get started.<br />
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
</p>
<ul role="list" class="link-card-grid">
<Card href="https://docs.astro.build/" title="Documentation" body="Learn how Astro works and explore the official API docs." />
<Card href="https://astro.build/integrations/" title="Integrations" body="Supercharge your project with new frameworks and libraries." />
<Card href="https://astro.build/themes/" title="Themes" body="Explore a galaxy of community-built starter themes." />
<Card href="https://astro.build/chat/" title="Chat" body="Come say hi to our amazing Discord community. ❤️" />
<Card
href="https://docs.astro.build/"
title="Documentation"
body="Learn how Astro works and explore the official API docs."
/>
<Card
href="https://astro.build/integrations/"
title="Integrations"
body="Supercharge your project with new frameworks and libraries."
/>
<Card
href="https://astro.build/themes/"
title="Themes"
body="Explore a galaxy of community-built starter themes."
/>
<Card
href="https://astro.build/chat/"
title="Chat"
body="Come say hi to our amazing Discord community. ❤️"
/>
</ul>
</main>
</Layout>

<style>
:root {
--astro-gradient: linear-gradient(0deg,#4F39FA, #DA62C4);
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
}

h1 {
Expand All @@ -29,7 +46,7 @@ import Card from '../components/Card.astro';

main {
margin: auto;
padding: 1em;
padding: 1em;
max-width: 60ch;
}

Expand All @@ -45,15 +62,20 @@ import Card from '../components/Card.astro';
}

@keyframes pulse {
0%, 100% { background-position-y: 0%; }
50% { background-position-y: 80%; }
0%,
100% {
background-position-y: 0%;
}
50% {
background-position-y: 80%;
}
}

.instructions {
line-height: 1.6;
margin: 1rem 0;
background: #4F39FA;
padding: 1.0rem;
background: #4f39fa;
padding: 1rem;
border-radius: 0.4rem;
color: var(--color-bg);
}
Expand Down
17 changes: 10 additions & 7 deletions examples/blog-multiple-authors/src/components/MainHead.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
import '../styles/global.css';
import "../styles/global.css";

export interface Props {
title: string;
Expand All @@ -19,7 +19,10 @@ const { title, description, image, type, next, prev, canonicalURL } = Astro.prop
<title>{title}</title>
<meta name="description" content={description} />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
<!-- Sitemap -->
<link rel="sitemap" href="/sitemap.xml" />
<!-- RSS -->
Expand All @@ -30,17 +33,17 @@ const { title, description, image, type, next, prev, canonicalURL } = Astro.prop

<!-- SEO -->
<link rel="canonical" href={canonicalURL} />
{next && <link rel="next" aria-label="Previous Page" href={new URL(next, canonicalURL).href}>}
{prev && <link rel="prev" aria-label="Next Page" href={new URL(prev, canonicalURL).href}>}
{next && <link rel="next" aria-label="Previous Page" href={new URL(next, canonicalURL).href} />}
{prev && <link rel="prev" aria-label="Next Page" href={new URL(prev, canonicalURL).href} />}

<!-- OpenGraph -->
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
{image && (<meta property="og:image" content={new URL(image, canonicalURL)}>)}
{image && <meta property="og:image" content={new URL(image, canonicalURL)} />}

<!-- Twitter -->
<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} />
<meta name="twitter:card" content={image ? "summary_large_image" : "summary"} />
<meta name="twitter:site" content="@astro" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
{image && (<meta name="twitter:image" content={image}>)}
{image && <meta name="twitter:image" content={image} />}
6 changes: 3 additions & 3 deletions examples/blog-multiple-authors/src/components/Pagination.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ const { prevUrl, nextUrl } = Astro.props;

<div class="wrapper">
<nav class="nav">
<a class="prev" href={prevUrl || '#'} aria-label="Previous Page">Prev</a>
<a class="next" href={nextUrl || '#'} aria-label="Next Page">Next</a>
<a class="prev" href={prevUrl || "#"} aria-label="Previous Page">Prev</a>
<a class="next" href={nextUrl || "#"} aria-label="Next Page">Next</a>
</nav>
</div>

Expand All @@ -29,7 +29,7 @@ const { prevUrl, nextUrl } = Astro.props;
text-transform: uppercase;
font-size: 0.8em;

&[href='#'] {
&[href="#"] {
display: none;
}
}
Expand Down
2 changes: 1 addition & 1 deletion examples/blog-multiple-authors/src/components/PostPreview.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const { post, author } = Astro.props;
const { frontmatter } = post;

function formatDate(date) {
return new Date(date).toUTCString().replace(/(\d\d\d\d) .*/, '$1'); // remove everything after YYYY
return new Date(date).toUTCString().replace(/(\d\d\d\d) .*/, "$1"); // remove everything after YYYY
}
---

Expand Down
15 changes: 10 additions & 5 deletions examples/blog-multiple-authors/src/layouts/post.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
---
import MainHead from '../components/MainHead.astro';
import Nav from '../components/Nav.astro';
import authorData from '../data/authors.json';
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'}>
<html lang={content.lang || "en"}>
<head>
<title>{content.title}</title>
<MainHead title={content.title} description={content.description} image={content.image} {canonicalURL} />
<MainHead
title={content.title}
description={content.description}
image={content.image}
{canonicalURL}
/>
<style lang="scss">
.title {
margin-top: 4rem;
Expand Down
26 changes: 15 additions & 11 deletions examples/blog-multiple-authors/src/pages/about.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
import MainHead from '../components/MainHead.astro';
import Nav from '../components/Nav.astro';
import MainHead from "../components/MainHead.astro";
import Nav from "../components/Nav.astro";

let title = 'About';
let description = 'About page of an example blog on Astro';
let title = "About";
let description = "About page of an example blog on Astro";
let canonicalURL = Astro.canonicalURL;
---

Expand Down Expand Up @@ -54,15 +54,19 @@ let canonicalURL = Astro.canonicalURL;
</div>
<div class="text">
<p>
The book cover and spine above and the images which follow were not part of the original Ormsby translation—they are taken from the 1880 edition of J. W. Clark,
illustrated by Gustave Doré. Clark in his edition states that, “The English text of ‘Don Quixote’ adopted in this edition is that of Jarvis, with occasional corrections
from Motteaux.”
The book cover and spine above and the images which follow were not part of the original
Ormsby translation—they are taken from the 1880 edition of J. W. Clark, illustrated by
Gustave Doré. Clark in his edition states that, “The English text of ‘Don Quixote’ adopted
in this edition is that of Jarvis, with occasional corrections from Motteaux.”
</p>
<p>
See in the introduction below John Ormsby’s critique of both the Jarvis and Motteaux translations. It has been elected in the present Project Gutenberg edition to attach
the famous engravings of Gustave Doré to the Ormsby translation instead of the Jarvis/Motteaux. The detail of many of the Doré engravings can be fully appreciated only by
utilizing the “Full Size” button to expand them to their original dimensions. Ormsby in his Preface has criticized the fanciful nature of Doré’s illustrations; others
feel these woodcuts and steel engravings well match Quixote’s dreams.
See in the introduction below John Ormsby’s critique of both the Jarvis and Motteaux
translations. It has been elected in the present Project Gutenberg edition to attach the
famous engravings of Gustave Doré to the Ormsby translation instead of the
Jarvis/Motteaux. The detail of many of the Doré engravings can be fully appreciated only
by utilizing the “Full Size” button to expand them to their original dimensions. Ormsby in
his Preface has criticized the fanciful nature of Doré’s illustrations; others feel these
woodcuts and steel engravings well match Quixote’s dreams.
</p>
</div>
</main>
Expand Down
Loading