Skip to content

Commit

Permalink
Fix prettier-3.0/astro interaction
Browse files Browse the repository at this point in the history 
Right now, prettier 3.0 doesn't correctly format astro files using the
plugin. This will be fixed in 3.1 but it hasn't been released yet. If
we upgrade it means that we don't have to specify **/*.astro in the
invocation of prettier.

withastro/prettier-plugin-astro#358
prettier/prettier#15079
prettier/prettier#15433
  • Loading branch information
@yongrenjie
yongrenjie committed Oct 27, 2023
1 parent 198c7c3 commit 74e3d08
Show file tree
Hide file tree
Showing 7 changed files with 263 additions and 230 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"preview": "astro preview",
"astro": "astro",
"prepare": "husky install",
"format": "prettier . --write"
"format": "prettier . --write **/*.astro"
},
"dependencies": {
"@astrojs/check": "^0.2.1",
Expand Down
66 changes: 32 additions & 34 deletions src/components/Header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,45 @@
import "../assets-arcana/css/main.css";
interface Props {
title: string;
title: string;
}
const { title } = Astro.props;
---

<div id="header">
<!-- Logo -->
<div id="background">
<h1><a href="/index.html" id="logo">{title}</a></h1>
</div>

<!-- Logo -->
<div id="background">
<h1><a href="/index.html" id="logo">{title}</a></h1>
</div>

<!-- Nav -->
<nav id="nav">
<!-- Nav -->
<nav id="nav">
<ul>
<li class="current"><a href="/index.html">Home</a></li>
<li>
<a href="#">Dropdown</a>
<ul>
<li><a href="#">Lorem dolor</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam sed tempus</a></li>
<li>
<a href="#">Submenu</a>
<ul>
<li class="current"><a href="/index.html">Home</a></li>
<li>
<a href="#">Dropdown</a>
<ul>
<li><a href="#">Lorem dolor</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam sed tempus</a></li>
<li>
<a href="#">Submenu</a>
<ul>
<li><a href="#">Lorem dolor</a></li>
<li><a href="#">Phasellus magna</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam nisl</a></li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="right-sidebar.html">Right Sidebar</a></li>
<li><a href="two-sidebar.html">Two Sidebar</a></li>
<li><a href="no-sidebar.html">No Sidebar</a></li>
<li><a href="#">Lorem dolor</a></li>
<li><a href="#">Phasellus magna</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam nisl</a></li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</nav>

</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="right-sidebar.html">Right Sidebar</a></li>
<li><a href="two-sidebar.html">Two Sidebar</a></li>
<li><a href="no-sidebar.html">No Sidebar</a></li>
</ul>
</nav>
</div>
26 changes: 14 additions & 12 deletions src/components/ProjectCard.astro
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
---
import "../assets-arcana/css/main.css";
import type {CollectionEntry} from "astro:content"
import type { CollectionEntry } from "astro:content";
interface Props {
project: CollectionEntry<"project">;
project: CollectionEntry<"project">;
}
const { project } = Astro.props;
---

<section class="col-6 col-12-narrower">
<div class="box post">
<a href={"/projects/"+project.slug} class="image left">
{project.data.image &&
<img src={project.data.image.url} alt={project.data.image.alt} />
}
</a>
<div class="inner">
<h3><a href={"/projects/"+project.slug}>{project.data.name}</a></h3>
<p>{project.data.description}</p>
</div>
<div class="box post">
<a href={"/projects/" + project.slug} class="image left">
{
project.data.image && (
<img src={project.data.image.url} alt={project.data.image.alt} />
)
}
</a>
<div class="inner">
<h3><a href={"/projects/" + project.slug}>{project.data.name}</a></h3>
<p>{project.data.description}</p>
</div>
</div>
</section>
47 changes: 23 additions & 24 deletions src/components/ProjectList.astro
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
import "../assets-arcana/css/main.css";
import type {CollectionEntry} from "astro:content"
import type { CollectionEntry } from "astro:content";
import ProjectCard from "./ProjectCard.astro";
interface Props {
title: string;
description: string;
projects: Array<CollectionEntry<'project'>>;
title: string;
description: string;
projects: Array<CollectionEntry<"project">>;
}
const { title, description, projects } = Astro.props;
Expand All @@ -17,31 +17,30 @@ const nrows = Math.ceil(projects.length / N);
const projectRows = new Array(nrows).fill([]);
projects.forEach((project, i) => {
const row = Math.floor(i / N);
projectRows[row].push(project);
const row = Math.floor(i / N);
projectRows[row].push(project);
});
---

<section class="wrapper style2">
<div class="container">
<header class="major">
<h2>{title}</h2>
<p>{description}</p>
</header>
</div>
<div class="container">
<header class="major">
<h2>{title}</h2>
<p>{description}</p>
</header>
</div>
</section>


<section class="wrapper style1">
<div class="container">
{projectRows.map((row) =>
<div class="row">
{row.map((proj:CollectionEntry<'project'>) =>
<ProjectCard project={proj} />
)}
</div>
)}
</div>
<div class="container">
{
projectRows.map((row) => (
<div class="row">
{row.map((proj: CollectionEntry<"project">) => (
<ProjectCard project={proj} />
))}
</div>
))
}
</div>
</section>


188 changes: 104 additions & 84 deletions src/layouts/Base.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,95 +10,115 @@ const title = "Urban Analytics Technology Platform";
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->

<html lang="en">
<head>
<title>{title}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="description" content={title} />
<meta name="generator" content={Astro.generator} />
</head>

<body class="is-preload">
<div id="page-wrapper">
<Header title={title} />

<slot />
<head>
<title>{title}</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no"
/>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="description" content={title} />
<meta name="generator" content={Astro.generator} />
</head>

<body class="is-preload">
<div id="page-wrapper">
<Header title={title} />

<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<section class="col-3 col-6-narrower col-12-mobilep">
<h3>Links to Stuff</h3>
<ul class="links">
<li><a href="#">Mattis et quis rutrum</a></li>
<li><a href="#">Suspendisse amet varius</a></li>
<li><a href="#">Sed et dapibus quis</a></li>
<li><a href="#">Rutrum accumsan dolor</a></li>
<li><a href="#">Mattis rutrum accumsan</a></li>
<li><a href="#">Suspendisse varius nibh</a></li>
<li><a href="#">Sed et dapibus mattis</a></li>
</ul>
</section>
<section class="col-3 col-6-narrower col-12-mobilep">
<h3>More Links to Stuff</h3>
<ul class="links">
<li><a href="#">Duis neque nisi dapibus</a></li>
<li><a href="#">Sed et dapibus quis</a></li>
<li><a href="#">Rutrum accumsan sed</a></li>
<li><a href="#">Mattis et sed accumsan</a></li>
<li><a href="#">Duis neque nisi sed</a></li>
<li><a href="#">Sed et dapibus quis</a></li>
<li><a href="#">Rutrum amet varius</a></li>
</ul>
</section>
<section class="col-6 col-12-narrower">
<h3>Get In Touch</h3>
<form>
<div class="row gtr-50">
<div class="col-6 col-12-mobilep">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="col-6 col-12-mobilep">
<input type="email" name="email" id="email" placeholder="Email" />
</div>
<div class="col-12">
<textarea name="message" id="message" placeholder="Message" rows="5"></textarea>
</div>
<div class="col-12">
<ul class="actions">
<li><input type="submit" class="button alt" value="Send Message" /></li>
</ul>
</div>
</div>
</form>
</section>
</div>
</div>
<slot />

<!-- Copyright -->
<div class="copyright">
<ul class="menu">
<li>&copy; Untitled. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<section class="col-3 col-6-narrower col-12-mobilep">
<h3>Links to Stuff</h3>
<ul class="links">
<li><a href="#">Mattis et quis rutrum</a></li>
<li><a href="#">Suspendisse amet varius</a></li>
<li><a href="#">Sed et dapibus quis</a></li>
<li><a href="#">Rutrum accumsan dolor</a></li>
<li><a href="#">Mattis rutrum accumsan</a></li>
<li><a href="#">Suspendisse varius nibh</a></li>
<li><a href="#">Sed et dapibus mattis</a></li>
</ul>
</section>
<section class="col-3 col-6-narrower col-12-mobilep">
<h3>More Links to Stuff</h3>
<ul class="links">
<li><a href="#">Duis neque nisi dapibus</a></li>
<li><a href="#">Sed et dapibus quis</a></li>
<li><a href="#">Rutrum accumsan sed</a></li>
<li><a href="#">Mattis et sed accumsan</a></li>
<li><a href="#">Duis neque nisi sed</a></li>
<li><a href="#">Sed et dapibus quis</a></li>
<li><a href="#">Rutrum amet varius</a></li>
</ul>
</section>
<section class="col-6 col-12-narrower">
<h3>Get In Touch</h3>
<form>
<div class="row gtr-50">
<div class="col-6 col-12-mobilep">
<input
type="text"
name="name"
id="name"
placeholder="Name"
/>
</div>
<div class="col-6 col-12-mobilep">
<input
type="email"
name="email"
id="email"
placeholder="Email"
/>
</div>
<div class="col-12">
<textarea
name="message"
id="message"
placeholder="Message"
rows="5"></textarea>
</div>
<div class="col-12">
<ul class="actions">
<li>
<input
type="submit"
class="button alt"
value="Send Message"
/>
</li>
</ul>
</div>
</div>
</form>
</section>
</div>
</div>

</div>
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
<li>&copy; Untitled. All rights reserved</li><li>
Design: <a href="http://html5up.net">HTML5 UP</a>
</li>
</ul>
</div>
</div>
</div>

</div>

<!-- Must use is:inline to stop Astro from gobbling the scripts.
<!-- Must use is:inline to stop Astro from gobbling the scripts.
https://docs.astro.build/en/guides/client-side-scripts/ -->
<script is:inline src="/arcana-js/jquery.min.js"></script>
<script is:inline src="/arcana-js/jquery.dropotron.min.js"></script>
<script is:inline src="/arcana-js/browser.min.js"></script>
<script is:inline src="/arcana-js/breakpoints.min.js"></script>
<script is:inline src="/arcana-js/util.js"></script>
<script is:inline src="/arcana-js/main.js"></script>

</body>
<script is:inline src="/arcana-js/jquery.min.js"></script>
<script is:inline src="/arcana-js/jquery.dropotron.min.js"></script>
<script is:inline src="/arcana-js/browser.min.js"></script>
<script is:inline src="/arcana-js/breakpoints.min.js"></script>
<script is:inline src="/arcana-js/util.js"></script>
<script is:inline src="/arcana-js/main.js"></script>
</body>
</html>
Loading

0 comments on commit 74e3d08

Please sign in to comment.