me
/
ethanreece.com
Archived
1
0
Fork 0
Code Pull Requests Actions Activity

Add prettier and eslint

main
Ethan Reece 2023-05-24 15:37:45 -05:00
parent 5eee44c205
commit 3b6dcd02c3
Signed by: me
GPG Key ID: D3993665FF92E1C3
11 changed files with 176 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
.eslintrc.cjs 100644
View File

@ -0,0 +1,58 @@
module.exports = {
// ...
env: {
es2020: true,
node: true,
'astro/astro': true,
},
extends: [
// ...
'plugin:astro/recommended',
'prettier',
'eslint:recommended',
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
// ...
overrides: [
{
// Define the configuration for `.astro` file.
files: ['*.astro'],
// Allows Astro components to be parsed.
parser: 'astro-eslint-parser',
// Parse the script in `.astro` as TypeScript by adding the following configuration.
// It's the setting you need when using TypeScript.
parserOptions: {
parser: '@typescript-eslint/parser',
extraFileExtensions: ['.astro'],
sourceType: 'module',
},
rules: {
// override/add rules settings here, such as:
// "astro/no-set-html-directive": "error"
'astro/no-conflict-set-directives': 'error',
'astro/no-unused-define-vars-in-style': 'error',
},
},
{
files: ['**/*.astro/*.js', '*.astro/*.js'],
env: {
browser: true,
es2020: true,
},
parserOptions: {
sourceType: 'module',
},
rules: {
// override/add rules settings here, such as:
// "no-unused-vars": "error"
// If you are using "prettier/prettier" rule,
// you don't need to format inside <script> as it will be formatted as a `.astro` file.
'prettier/prettier': 'off',
},
},
],
}

15
.prettierrc.cjs 100644
View File

@ -0,0 +1,15 @@
module.exports = {
plugins: [require.resolve('prettier-plugin-astro')],
overrides: [
{
files: '*.astro',
options: {
parser: 'astro',
},
},
],
trailingComma: 'es5',
tabWidth: 4,
semi: false,
singleQuote: true,
}

4
.vscode/extensions.json vendored
View File

@ -1,4 +1,4 @@
{ {
"recommendations": ["astro-build.astro-vscode"], "recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": [] "unwantedRecommendations": []
} }

18
.vscode/launch.json vendored
View File

@ -1,11 +1,11 @@
{ {
"version": "0.2.0", "version": "0.2.0",
"configurations": [ "configurations": [
{ {
"command": "./node_modules/.bin/astro dev", "command": "./node_modules/.bin/astro dev",
"name": "Development server", "name": "Development server",
"request": "launch", "request": "launch",
"type": "node-terminal" "type": "node-terminal"
} }
] ]
} }

1
README.md
View File

@ -12,7 +12,6 @@ npm create astro@latest -- --template basics
![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png) ![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png)
## 🚀 Project Structure ## 🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files: Inside of your Astro project, you'll see the following folders and files:

8
astro.config.mjs
View File

@ -1,8 +1,8 @@
import { defineConfig } from 'astro/config'; import { defineConfig } from 'astro/config'
import tailwind from "@astrojs/tailwind"; import tailwind from '@astrojs/tailwind'
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
integrations: [tailwind()] integrations: [tailwind()],
}); })

BIN
bun.lockb
View File

Binary file not shown.

2
package.json
View File

@ -12,11 +12,13 @@
"dependencies": { "dependencies": {
"@astrojs/tailwind": "^3.1.3", "@astrojs/tailwind": "^3.1.3",
"astro": "^2.5.0", "astro": "^2.5.0",
"bun-types": "^0.6.3",
"tailwindcss": "^3.0.24eslint-plugin-jsx-a11y" "tailwindcss": "^3.0.24eslint-plugin-jsx-a11y"
}, },
"devDependencies": { "devDependencies": {
"@typescript-eslint/parser": "^5.59.7", "@typescript-eslint/parser": "^5.59.7",
"eslint": "^8.41.0", "eslint": "^8.41.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-astro": "^0.27.0", "eslint-plugin-astro": "^0.27.0",
"eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-jsx-a11y": "^6.7.1",
"prettier": "^2.8.8", "prettier": "^2.8.8",

105
src/components/Card.astro
View File

@ -1,63 +1,64 @@
--- ---
export interface Props { export interface Props {
title: string; title: string
body: string; body: string
href: string; href: string
} }
const { href, title, body } = Astro.props; const { href, title, body } = Astro.props
--- ---
<li class="link-card"> <li class="link-card">
<a href={href}> <a href={href}>
<h2> <h2>
{title} {title}
<span>&rarr;</span> <span>&rarr;</span>
</h2> </h2>
<p> <p>
{body} {body}
</p> </p>
</a> </a>
</li> </li>
<style> <style>
.link-card { .link-card {
list-style: none; list-style: none;
display: flex; display: flex;
padding: 0.25rem; padding: 0.25rem;
background-color: white; background-color: white;
background-image: none; background-image: none;
background-size: 400%; background-size: 400%;
border-radius: 0.6rem; border-radius: 0.6rem;
background-position: 100%; background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
} 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.link-card > a { .link-card > a {
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
line-height: 1.4; line-height: 1.4;
padding: 1rem 1.3rem; padding: 1rem 1.3rem;
border-radius: 0.35rem; border-radius: 0.35rem;
color: #111; color: #111;
background-color: white; background-color: white;
opacity: 0.8; opacity: 0.8;
} }
h2 { h2 {
margin: 0; margin: 0;
font-size: 1.25rem; font-size: 1.25rem;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
} }
p { p {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0; margin-bottom: 0;
color: #444; color: #444;
} }
.link-card:is(:hover, :focus-within) { .link-card:is(:hover, :focus-within) {
background-position: 0; background-position: 0;
background-image: var(--accent-gradient); background-image: var(--accent-gradient);
} }
.link-card:is(:hover, :focus-within) h2 { .link-card:is(:hover, :focus-within) h2 {
color: rgb(var(--accent)); color: rgb(var(--accent));
} }
</style> </style>

55
src/layouts/Layout.astro
View File

@ -1,36 +1,41 @@
--- ---
export interface Props { export interface Props {
title: string; title: string
} }
const { title } = Astro.props; const { title } = Astro.props
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content="Astro description"> <meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>{title}</title> <title>{title}</title>
</head> </head>
<body> <body>
<slot /> <slot />
</body> </body>
</html> </html>
<style is:global> <style is:global>
:root { :root {
--accent: 124, 58, 237; --accent: 124, 58, 237;
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%); --accent-gradient: linear-gradient(
} 45deg,
html { rgb(var(--accent)),
font-family: system-ui, sans-serif; #da62c4 30%,
background-color: #F6F6F6; white 60%
} );
code { }
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, html {
Bitstream Vera Sans Mono, Courier New, monospace; font-family: system-ui, sans-serif;
} background-color: #f6f6f6;
}
code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
}
</style> </style>

2
tsconfig.json
View File

@ -1,3 +1,3 @@
{ {
"extends": "astro/tsconfigs/strict" "extends": "astro/tsconfigs/strict"
} }