From e1d39a2e6ee9893ca3ea71c7ac5bf49098abcc83 Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Mon, 4 Mar 2024 11:06:28 -0500 Subject: [PATCH 1/8] chore: add tailwind to proj --- astro.config.mjs | 9 +++-- package-lock.json | 93 +++++++++++++++++++++++++++++++++++++++++------ package.json | 1 + 3 files changed, 88 insertions(+), 15 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index 3b2f75c..b6ed592 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,10 +1,11 @@ import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; - import sitemap from '@astrojs/sitemap'; +import tailwind from "@astrojs/tailwind"; + // https://astro.build/config export default defineConfig({ - site: 'https://example.com', - integrations: [mdx(), sitemap()], -}); + site: 'https://example.com', + integrations: [mdx(), sitemap(), tailwind()] +}); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index b406761..cd4f730 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@astrojs/mdx": "^2.1.1", "@astrojs/rss": "^4.0.5", "@astrojs/sitemap": "^3.0.5", + "@astrojs/tailwind": "^5.1.0", "@staticcms/core": "^4.1.2", "@staticcms/proxy-server": "^4.0.4", "astro": "^4.3.6", @@ -201,6 +202,20 @@ "zod": "^3.22.4" } }, + "node_modules/@astrojs/tailwind": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@astrojs/tailwind/-/tailwind-5.1.0.tgz", + "integrity": "sha512-BJoCDKuWhU9FT2qYg+fr6Nfb3qP4ShtyjXGHKA/4mHN94z7BGcmauQK23iy+YH5qWvTnhqkd6mQPQ1yTZTe9Ig==", + "dependencies": { + "autoprefixer": "^10.4.15", + "postcss": "^8.4.28", + "postcss-load-config": "^4.0.2" + }, + "peerDependencies": { + "astro": "^3.0.0 || ^4.0.0", + "tailwindcss": "^3.0.24" + } + }, "node_modules/@astrojs/telemetry": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.0.4.tgz", @@ -5999,6 +6014,42 @@ "tslib": "^2.4.0" } }, + "node_modules/autoprefixer": { + "version": "10.4.18", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz", + "integrity": "sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "browserslist": "^4.23.0", + "caniuse-lite": "^1.0.30001591", + "fraction.js": "^4.3.7", + "normalize-range": "^0.1.2", + "picocolors": "^1.0.0", + "postcss-value-parser": "^4.2.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "engines": { + "node": "^10 || ^12 || >=14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/available-typed-arrays": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.6.tgz", @@ -6286,9 +6337,9 @@ } }, "node_modules/browserslist": { - "version": "4.22.3", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.3.tgz", - "integrity": "sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==", + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", + "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==", "funding": [ { "type": "opencollective", @@ -6304,8 +6355,8 @@ } ], "dependencies": { - "caniuse-lite": "^1.0.30001580", - "electron-to-chromium": "^1.4.648", + "caniuse-lite": "^1.0.30001587", + "electron-to-chromium": "^1.4.668", "node-releases": "^2.0.14", "update-browserslist-db": "^1.0.13" }, @@ -6400,9 +6451,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001587", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz", - "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==", + "version": "1.0.30001593", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001593.tgz", + "integrity": "sha512-UWM1zlo3cZfkpBysd7AS+z+v007q9G1+fLTUU42rQnY6t2axoogPW/xol6T7juU5EUoOhML4WgBIdG+9yYqAjQ==", "funding": [ { "type": "opencollective", @@ -7404,9 +7455,9 @@ "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" }, "node_modules/electron-to-chromium": { - "version": "1.4.665", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.665.tgz", - "integrity": "sha512-UpyCWObBoD+nSZgOC2ToaIdZB0r9GhqT2WahPKiSki6ckkSuKhQNso8V2PrFcHBMleI/eqbKgVQgVC4Wni4ilw==" + "version": "1.4.690", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.690.tgz", + "integrity": "sha512-+2OAGjUx68xElQhydpcbqH50hE8Vs2K6TkAeLhICYfndb67CVH0UsZaijmRUE3rHlIxU1u0jxwhgVe6fK3YANA==" }, "node_modules/emmet": { "version": "2.4.6", @@ -8655,6 +8706,18 @@ "node": ">= 0.6" } }, + "node_modules/fraction.js": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", + "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", + "engines": { + "node": "*" + }, + "funding": { + "type": "patreon", + "url": "https://github.com/sponsors/rawify" + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -11800,6 +11863,14 @@ "node": ">=0.10.0" } }, + "node_modules/normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/npm-run-path": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz", diff --git a/package.json b/package.json index 7bed079..ffffd08 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@astrojs/mdx": "^2.1.1", "@astrojs/rss": "^4.0.5", "@astrojs/sitemap": "^3.0.5", + "@astrojs/tailwind": "^5.1.0", "@staticcms/core": "^4.1.2", "@staticcms/proxy-server": "^4.0.4", "astro": "^4.3.6", From 2ad87284409e45c33036fdcf2acd6c48e773fe54 Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Mon, 4 Mar 2024 11:40:48 -0500 Subject: [PATCH 2/8] fix: allow prettier 3 and astro to play nice --- .prettierrc | 11 ++++++++++- package-lock.json | 50 +++++++++++++++++++++++++++++++++++++++++++++-- package.json | 5 +++-- 3 files changed, 61 insertions(+), 5 deletions(-) diff --git a/.prettierrc b/.prettierrc index c49bb70..b18bf8a 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,5 +4,14 @@ "semi": false, "singleQuote": false, "tabWidth": 2, - "trailingComma": "es5" + "trailingComma": "es5", + "plugins": ["prettier-plugin-astro"], + "overrides": [ + { + "files": "*.astro", + "options": { + "parser": "astro" + } + } + ] } diff --git a/package-lock.json b/package-lock.json index cd4f730..f5249e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,14 +17,15 @@ "@staticcms/proxy-server": "^4.0.4", "astro": "^4.3.6", "i": "^0.3.7", - "prettier": "^3.2.5", "tailwindcss": "^3.4.1", "typescript": "^5.3.3" }, "devDependencies": { "@brown-ccv/eslint-config": "^0.3.0", "eslint": "^8.56.0", - "eslint-plugin-astro": "^0.31.4" + "eslint-plugin-astro": "^0.31.4", + "prettier": "^3.2.5", + "prettier-plugin-astro": "^0.13.0" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -12809,6 +12810,7 @@ "version": "3.2.5", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", + "devOptional": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -12819,6 +12821,26 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/prettier-plugin-astro": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.13.0.tgz", + "integrity": "sha512-5HrJNnPmZqTUNoA97zn4gNQv9BgVhv+et03314WpQ9H9N8m2L9OSV798olwmG2YLXPl1iSstlJCR1zB3x5xG4g==", + "devOptional": true, + "dependencies": { + "@astrojs/compiler": "^1.5.5", + "prettier": "^3.0.0", + "sass-formatter": "^0.7.6" + }, + "engines": { + "node": "^14.15.0 || >=16.0.0" + } + }, + "node_modules/prettier-plugin-astro/node_modules/@astrojs/compiler": { + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-1.8.2.tgz", + "integrity": "sha512-o/ObKgtMzl8SlpIdzaxFnt7SATKPxu4oIP/1NL+HDJRzxfJcAkOTAb/ZKMRyULbz4q+1t2/DAebs2Z1QairkZw==", + "devOptional": true + }, "node_modules/prismjs": { "version": "1.29.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", @@ -14182,6 +14204,12 @@ "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz", "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==" }, + "node_modules/s.color": { + "version": "0.0.15", + "resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz", + "integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==", + "devOptional": true + }, "node_modules/safe-array-concat": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.0.tgz", @@ -14255,6 +14283,15 @@ "truncate-utf8-bytes": "^1.0.0" } }, + "node_modules/sass-formatter": { + "version": "0.7.9", + "resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.9.tgz", + "integrity": "sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==", + "devOptional": true, + "dependencies": { + "suf-log": "^2.5.3" + } + }, "node_modules/sax": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz", @@ -15125,6 +15162,15 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/suf-log": { + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz", + "integrity": "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==", + "devOptional": true, + "dependencies": { + "s.color": "0.0.15" + } + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", diff --git a/package.json b/package.json index ffffd08..b703422 100644 --- a/package.json +++ b/package.json @@ -19,13 +19,14 @@ "@staticcms/proxy-server": "^4.0.4", "astro": "^4.3.6", "i": "^0.3.7", - "prettier": "^3.2.5", "tailwindcss": "^3.4.1", "typescript": "^5.3.3" }, "devDependencies": { "@brown-ccv/eslint-config": "^0.3.0", "eslint": "^8.56.0", - "eslint-plugin-astro": "^0.31.4" + "eslint-plugin-astro": "^0.31.4", + "prettier": "^3.2.5", + "prettier-plugin-astro": "^0.13.0" } } From f1aa19e689552293a5c4a0efdbdc2d7a8a9c3f02 Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Wed, 6 Mar 2024 12:23:56 -0500 Subject: [PATCH 3/8] chore: links from consts iteratively map to link component --- src/components/Header.astro | 97 +++++++-------------------------- src/components/HeaderLink.astro | 30 ++++------ src/consts.ts | 6 +- 3 files changed, 35 insertions(+), 98 deletions(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index c9ab99f..ca5276c 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,85 +1,26 @@ --- -import HeaderLink from './HeaderLink.astro'; -import { SITE_TITLE } from '../consts'; +import HeaderLink from "./HeaderLink.astro" +import { SITE_TITLE, LINKS } from "../consts" --- -
- +
+
diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro index bb600fb..b2282a5 100644 --- a/src/components/HeaderLink.astro +++ b/src/components/HeaderLink.astro @@ -1,25 +1,19 @@ --- -import type { HTMLAttributes } from 'astro/types'; +import type { HTMLAttributes } from "astro/types" -type Props = HTMLAttributes<'a'>; +type Props = HTMLAttributes<"a"> -const { href, class: className, ...props } = Astro.props; +const { href, class: className, ...props } = Astro.props -const { pathname } = Astro.url; -const subpath = pathname.match(/[^\/]+/g); -const isActive = href === pathname || href === '/' + subpath?.[0]; +const { pathname } = Astro.url +const subpath = pathname.match(/[^\/]+/g) +const isActive = href === pathname || href === "/" + subpath?.[0] --- - - + + - diff --git a/src/consts.ts b/src/consts.ts index 0df8a61..f1ffada 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -1,5 +1,7 @@ // Place any global data in this file. // You can import this data from anywhere in your site by using the `import` keyword. -export const SITE_TITLE = 'Astro Blog'; -export const SITE_DESCRIPTION = 'Welcome to my website!'; +export const SITE_TITLE = "Astro Blog" +export const SITE_DESCRIPTION = "Welcome to my website!" + +export const LINKS = ["news", "publications", "map", "data", "documentation", "about"] From 571ec0bdf39c7fe2bdcf021c9ccf54a892530743 Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Wed, 6 Mar 2024 12:25:11 -0500 Subject: [PATCH 4/8] chore: site title and description for mmp --- src/consts.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/consts.ts b/src/consts.ts index f1ffada..58ef0f6 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -1,7 +1,4 @@ -// Place any global data in this file. -// You can import this data from anywhere in your site by using the `import` keyword. - -export const SITE_TITLE = "Astro Blog" -export const SITE_DESCRIPTION = "Welcome to my website!" +export const SITE_TITLE = "MMP" +export const SITE_DESCRIPTION = "Mesoamerican Migration Project" export const LINKS = ["news", "publications", "map", "data", "documentation", "about"] From 685dccbea905211f4d3dee27b1bf61319139467d Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Wed, 6 Mar 2024 12:28:45 -0500 Subject: [PATCH 5/8] style: spacing for links increase and size decrease --- src/components/Header.astro | 2 +- src/components/HeaderLink.astro | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index ca5276c..8c8f239 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -10,7 +10,7 @@ import { SITE_TITLE, LINKS } from "../consts" { LINKS.map((data) => {data.toUpperCase()}) } diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro index b2282a5..1bf6163 100644 --- a/src/components/HeaderLink.astro +++ b/src/components/HeaderLink.astro @@ -12,7 +12,10 @@ const isActive = href === pathname || href === "/" + subpath?.[0] From 172fd6f26795cc0064bd97f8f544b3e90a967402 Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Wed, 6 Mar 2024 14:27:17 -0500 Subject: [PATCH 6/8] style: hamburger menu --- src/components/Header.astro | 59 ++++++++++++++++++++++++++++++------- 1 file changed, 49 insertions(+), 10 deletions(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index 8c8f239..f8a311c 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,12 +1,37 @@ --- import HeaderLink from "./HeaderLink.astro" import { SITE_TITLE, LINKS } from "../consts" + +const { isHidden = true } = Astro.props --- +
-
- + + + +
\ No newline at end of file From bb99f29f5bddfe62af70ef9144e053f232f1bf30 Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Thu, 7 Mar 2024 11:01:29 -0500 Subject: [PATCH 7/8] fix: appease the linter --- src/components/Header.astro | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index f8a311c..9cb4b2b 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -12,13 +12,14 @@ const { isHidden = true } = Astro.props // Read the message from the data attribute. let isHidden = true const button = this.querySelector("button") - button.addEventListener("click", () => { + const menuElement: HTMLElement = document.getElementById("#menu-body")! + button?.addEventListener("click", () => { isHidden = !isHidden console.log(isHidden) if (isHidden) { - document.querySelector("#menu-body").style.display = "none" + menuElement.style.display = "none" } else { - document.querySelector("#menu-body").style.display = "inherit" + menuElement.style.display = "inherit" } }) } @@ -35,7 +36,7 @@ const { isHidden = true } = Astro.props { LINKS.map((data) => {data.toUpperCase()}) } @@ -57,7 +58,7 @@ const { isHidden = true } = Astro.props { LINKS.map((data) => {data.toUpperCase()}) } From 4e71b5d0a3bd6574f49e3d08caea4d7ef631bb91 Mon Sep 17 00:00:00 2001 From: Heather Yu <35639529+hetd54@users.noreply.github.com> Date: Thu, 7 Mar 2024 11:03:20 -0500 Subject: [PATCH 8/8] chore: clean up logs --- src/components/Header.astro | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index 9cb4b2b..619b452 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -9,13 +9,11 @@ const { isHidden = true } = Astro.props constructor() { super() - // Read the message from the data attribute. let isHidden = true const button = this.querySelector("button") const menuElement: HTMLElement = document.getElementById("#menu-body")! button?.addEventListener("click", () => { isHidden = !isHidden - console.log(isHidden) if (isHidden) { menuElement.style.display = "none" } else {