La Well Piétonne

Website for La Well Piétonne. A citizens' initiative to make Wellington a year-round pedestrian street.

Dependencies

Based on the Astro Quickstart template for Netlify.

• Install Astro language support extension for VS Code

Included in this repository:

• astro-i18n for internationalization.
• mailerlite-api-v2-node for connecting to the MailerLite mailing list.
• remark-toc for generating the Markdown table of contents on the Q&A page.

Setup

1. Cloning + Install Packages

• Fork or clone this repo via the command line git clone https://github.com/northamerican/la-well-pietonne

• Then install the necessary packages and run the project locally to make sure everything works.

  npm install
  npm run dev

Linking your repo to Netlify using their site:

• Create an account with Netlify
• From your Team Overview, click Add a new site
• Click Deploy with GitHub
• Select your forked GitHub repo from the list

Alternatively, you can run this locally with the Netlify CLI by running the netlify dev command for more options like receiving a live preview to share (netlify dev --live) and the ability to test Netlify Functions and redirects.

2. Deploying

• Install the Netlify CLI globally npm install netlify-cli -g
• Run npm run build
• Then use the netlify deploy for a deploy preview link or netlify deploy --prod to deploy to production

3. Further set up of Netlify and MailerLite

The netlify/functions/simple-subscribe/simple-subscribe.ts serverless function handles the subscriber form request.

We use MailerLite for our mailing list. To set it up:

• Create an account with MailerLite
• From the account dashboard, navigate to Subscribers
• Click on Groups, then Create group, and give your group a name (like "General")
• From the account dashboard, navigate to Integrations
• Click on API, then Generate new token and give your token a name
• Copy the supplied token key and save it somewhere safe
• At the bottom of the API page, in the Groups section, you will see your "General" group and its Group ID
• Copy that Group ID and save it too

Now, on Netlify:

• From your account, select Sites, then click your site
• Click on Site configuration
• In the site configuration, click Environment variables
• Add a variable with the key MAILER_LITE_API_KEY and set its value to MailerLite's API key you have saved
• Add a variable with the key MAILER_LITE_GROUP_ID and set its value to MailerLite's General Group ID you have saved

Additional ENV vars may have to be set:

• Add a variable with the key AWS_LAMBDA_JS_RUNTIME and set its value to nodejs18.x
• Add a variable with the key NODE_VERSION and set its value to 19.3.0

---

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:3000
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run i18n:install	Install astro-i18n for translations
npm run i18n:sync	Updates translation values