chore: install and run prettier

This commit is contained in:
Ruidy 2024-12-31 14:16:29 +01:00
parent 6d488d8307
commit 5c62e71a64
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
15 changed files with 2740 additions and 1298 deletions

12
.prettier.mjs Normal file
View file

@ -0,0 +1,12 @@
/** @type {import("prettier").Config} */
export default {
plugins: ["prettier-plugin-astro"],
overrides: [
{
files: "*.astro",
options: {
parser: "astro",
},
},
],
};

View file

@ -23,9 +23,11 @@ Inside of your Astro project, you'll see the following folders and files:
└── package.json
```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page
is exposed as a route based on its file name.
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
There's nothing special about `src/components/`, but that's where we like to put
any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the `public/` directory.
@ -44,4 +46,5 @@ All commands are run from the root of the project, from a terminal:
## 👀 Want to learn more?
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
Feel free to check [our documentation](https://docs.astro.build) or jump into our
[Discord server](https://astro.build/chat).

View file

@ -1,5 +1,5 @@
// @ts-check
import { defineConfig } from 'astro/config';
import { defineConfig } from "astro/config";
// https://astro.build/config
export default defineConfig({});

View file

@ -12,5 +12,9 @@
"@astrojs/check": "^0.9.4",
"astro": "^5.1.1",
"typescript": "^5.7.2"
},
"devDependencies": {
"prettier": "^3.4.2",
"prettier-plugin-astro": "^0.14.1"
}
}

File diff suppressed because it is too large Load diff

View file

@ -1,5 +1,5 @@
---
const { url, title } = Astro.props
const { url, title } = Astro.props;
---
<li><a href={url}>{title}</a></li>

View file

@ -1,22 +1,26 @@
---
import Social from "./Social.astro"
import Social from "./Social.astro";
const platforms = [
{
{
platform: "GitHub",
username: "rjNemo",
},{
platform: "LinkedIn",
username: "ruidy-nemausat",
}
]
const url = `https://ruidy.nemausat.com`
},
{
platform: "LinkedIn",
username: "ruidy-nemausat",
},
];
const url = `https://ruidy.nemausat.com`;
---
<footer>
<p>© 2023 Ruidy</p>
{platforms.map(platform => (
<Social platform={platform.platform} username={platform.username}/>
))}
{
platforms.map((platform) => (
<Social platform={platform.platform} username={platform.username} />
))
}
<a href={url}>website</a>
</footer>

View file

@ -1,6 +1,3 @@
---
---
<nav class="nav-links">
<a href="/">Home</a>
<a href="/about">About</a>

View file

@ -1,5 +1,5 @@
---
const { platform, username } = Astro.props
const { platform, username } = Astro.props;
---
<a href={`https://www.${platform}.com/${username}`}>{platform}</a>

View file

@ -1,10 +1,10 @@
---
import "../styles/global.css"
import "../styles/global.css";
import Footer from "../components/Footer.astro"
import Header from "../components/Header.astro"
import Footer from "../components/Footer.astro";
import Header from "../components/Header.astro";
const {pageTitle} = Astro.props
const { pageTitle } = Astro.props;
---
<html lang="en">
@ -18,10 +18,10 @@ const {pageTitle} = Astro.props
<body>
<Header />
<h1>{pageTitle}</h1>
<slot/>
<Footer/>
<slot />
<Footer />
<script>
import "../scripts/menu.js"
import "../scripts/menu.js";
</script>
</body>
</html>

View file

@ -1,11 +1,12 @@
---
import BaseLayout from "./BaseLayout.astro"
const { frontmatter } = Astro.props
import BaseLayout from "./BaseLayout.astro";
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
<p>Published on: {frontmatter.pubDate.toString().slice(0, 10)}</p>
<p><em>{frontmatter.description}</em></p>
<p>Written by: {frontmatter.author}</p>
<img src={frontmatter.image.url} alt={frontmatter.image.alt} width="500"/>
<slot/>
<img src={frontmatter.image.url} alt={frontmatter.image.alt} width="500" />
<slot />
</BaseLayout>

View file

@ -1,8 +1,8 @@
---
import "../styles/global.css"
import BaseLayout from "../layouts/BaseLayout.astro"
import "../styles/global.css";
import BaseLayout from "../layouts/BaseLayout.astro";
const pageTitle = "About Me"
const pageTitle = "About Me";
const identity = {
firstName: "Ruidy",
@ -10,7 +10,7 @@ const identity = {
occupation: "Software Developer",
location: "Germany",
interests: ["Astro", "Web Development", "Learning in Public"],
}
};
const skills = [
"HTML",
@ -21,12 +21,12 @@ const skills = [
"Node.js",
"Git",
"Astro",
]
];
const happy = true
const finished = true
const goal = 3
const skillColor = "navy"
const happy = true;
const finished = true;
const goal = 3;
const skillColor = "navy";
---
<BaseLayout pageTitle={pageTitle}>
@ -36,28 +36,32 @@ const skillColor = "navy"
<h2>A few things about me:</h2>
<ul>
<li> I'm {identity.firstName}. </li>
<li>I'm {identity.firstName}.</li>
<li>I'm {identity.age} years old.</li>
<li>I'm a {identity.occupation} in {identity.location}.</li>
<li>I'm interested in {identity.interests.join(", ")}.</li>
</ul>
<p> My skills are:</p>
<p>My skills are:</p>
<ul>
{skills.map((skill) => (
<li class="skill">{skill}</li>
))}
{skills.map((skill) => <li class="skill">{skill}</li>)}
</ul>
{happy && <p>I am happy to be learning Astro!</p>}
{finished && <p>I finished this tutorial!</p>}
{goal === 3 ? <p>My goal is to finish in 3 days.</p> : <p>My goal is not 3 days.</p>}
{
goal === 3 ? (
<p>My goal is to finish in 3 days.</p>
) : (
<p>My goal is not 3 days.</p>
)
}
</BaseLayout>
<style define:vars={{skillColor }}>
<style define:vars={{ skillColor }}>
h1 {
color: purple;
font-size: 4rem;

View file

@ -1,18 +1,23 @@
---
import "../styles/global.css"
import BaseLayout from "../layouts/BaseLayout.astro"
import BLogPost from "../components/BLogPost.astro"
import "../styles/global.css";
import BaseLayout from "../layouts/BaseLayout.astro";
import BLogPost from "../components/BLogPost.astro";
const pageTitle = "Blog posts"
const pageTitle = "Blog posts";
const allPosts = Object.values(import.meta.glob("./posts/*.md",{eager:true}))
const allPosts = Object.values(
import.meta.glob("./posts/*.md", { eager: true }),
);
---
<BaseLayout pageTitle={pageTitle}>
<p>This is a list of my blog posts.</p>
<p>This is a list of my blog posts.</p>
<ul>
{allPosts.map((post:any )=> <BLogPost url={post.url} title={post.frontmatter.title}/>)}
</ul>
<ul>
{
allPosts.map((post: any) => (
<BLogPost url={post.url} title={post.frontmatter.title} />
))
}
</ul>
</BaseLayout>

View file

@ -1,7 +1,7 @@
---
import BaseLayout from "../layouts/BaseLayout.astro"
import BaseLayout from "../layouts/BaseLayout.astro";
const pageTitle = "Orbital Orbit"
const pageTitle = "Orbital Orbit";
---
<BaseLayout pageTitle={pageTitle}>

View file

@ -1,27 +1,35 @@
---
import BLogPost from "../../components/BLogPost.astro";
import BaseLayout from "../../layouts/BaseLayout.astro"
import BaseLayout from "../../layouts/BaseLayout.astro";
export async function getStaticPaths() {
const posts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
const posts = Object.values(
import.meta.glob("../posts/*.md", { eager: true }),
);
return [
{params: {tag: "astro"}, props: {posts }},
{ params: { tag: "successes" }, props:{ posts} },
{ params: { tag: "community" } , props:{ posts} },
{ params: { tag: "blogging" }, props:{ posts} },
{ params: { tag: "setbacks" }, props:{ posts} },
{ params: { tag: "learning in public" }, props:{ posts} },
]
{ params: { tag: "astro" }, props: { posts } },
{ params: { tag: "successes" }, props: { posts } },
{ params: { tag: "community" }, props: { posts } },
{ params: { tag: "blogging" }, props: { posts } },
{ params: { tag: "setbacks" }, props: { posts } },
{ params: { tag: "learning in public" }, props: { posts } },
];
}
const { tag } = Astro.params
const { posts } = Astro.props
const filteredPosts = posts.filter((post:any) => post.frontmatter.tags?.includes(tag))
const { tag } = Astro.params;
const { posts } = Astro.props;
const filteredPosts = posts.filter((post: any) =>
post.frontmatter.tags?.includes(tag),
);
---
<BaseLayout pageTitle={`Posts tagged with ${tag}`}>
<p>Posts tagged with {tag}</p>
<p>Posts tagged with {tag}</p>
<ul>
{filteredPosts.map((post:any )=> <BLogPost url={post.url} title={post.frontmatter.title}/>)}
{
filteredPosts.map((post: any) => (
<BLogPost url={post.url} title={post.frontmatter.title} />
))
}
</ul>
</BaseLayout>