# Astrolabe website

## Getting started

Requirements : 

- Git
- Node.js (minimum version v12.15.0)

### Install

1. Clone or fork this repo: `git clone ssh://gitea@git.astrolabe.coop:2106/AstrolabeCAE/SiteWebAstrolabe_public.git`
2. Clone or fork the private repo containing members data in the same folder that SiteWebAstrolabe_public : `git clone ssh://gitea@git.astrolabe.coop:2106/AstrolabeCAE/SiteWebAstrolabe_private.git`
3. `cd` into the project directory (SiteWebAstrolabe_public) and run `npm install`
4. Once all the dependencies are installed run `npm start`
5. Open your browser at `http://localhost:8080` and away you go!

### Deploy

1. Copy paste deploy.js file in two new files `deploy-preprod.js`and `deploy-prod.js`
2. Make sure to fill in correct platform information in the two files
3. Run `npm run deploy-preprod` to deploy to the pre-production platform
4. Run `npm run deploy-prod` to deploy to the production platform

## Terminal commands

### Serve the site locally

```bash
npm start
```

### Build a production version of the site

```bash
npm run prod
```

### Lint Sass

```bash
npm run sass:lint
```

### Compile Sass

```bash
npm run sass:process
```

## Content editing

All operations are based on the `src` folder as a root.

### Add a new post

A post is composed of a markdown file and optionally images.

There is two kinds of posts :

- News post
- Event post

#### Add a 'news' post

In the `posts`folder, create a new mardown file `example.md`(or copy paste one of the existing files)

Fill in the meta information :

1. `title:` the post heading
2. `date:` the publication date, if further than current date the post won't appear in the posts list until current date is met.
3. `type:` 'news' for news post

Then add the post content in plain mardown language. You can add images to your post, make sure to place them in the `images`folder.

#### Add an 'event' post

In the `posts`folder, create a new mardown file `example-date.md`(or copy paste one of the existing files). Use date in post file name to identify them easily (not mandatory).

Fill in the meta information :

1. `title:` the post heading
2. `date:` the publication date, if further than current date the post won't appear in the posts list until current date is met.
3. `time:` the time of the event.
4. `type:` 'event' for event post

Then add the post content in plain mardown language. You can add images to your post, make sure to place them in the `images`folder.

### Add a new member

In the `members` folder (SiteWebAstrolabe_private directory!), create a new mardown file `name-surname.md`(or copy paste one of the existing files)

Fill in the meta information :

1. `name:` the full name of the member
2. `position:` job title
3. `positionInternal:` internal role if any
4. `date:` date of arrival in the coop
5. `profile:` picture of the member, make sure to place it in the `SiteWebAstrolabe_private/profiles` folder
6. `personalSite:` website url if any
7. `socialMastodon:` profile url if any
8. `socialTwitter:` profile url if any
9. `socialLinkedin:` profile url if any
10. `url:` personal page url in the website, eg `/members/name-surname`

Then add the member bio or any content

### Customers & Partners

The two are listed on the home page in different section. There is maximum of four per section, in reversed order regarding the date of addition.

#### Add a new customer

In the `customers`folder, create a new mardown file `customer-name.md`(or copy paste one of the existing files)

Fill in the meta information :

1. `name:` the brand name of the customer
2. `thumbnail:` the customer brand logo, make sure to place it in the `images/customers/`folder
3. `url:` the customer website

#### Add a new partner

In the `partners`folder, create a new mardown file `partner-name.md`(or copy paste one of the existing files)

Fill in the meta information :

1. `name:` the brand name of the partner
2. `thumbnail:` the partner brand logo, make sure to place it in the `images/partner/`folder
3. `url:` the partner website

### FAQ section

Edit `_data/faq.json` file to add a new Q/A couple object. Plain html e.g. `<br>` or `<a href="">link</a>` is supported

### Contact form

Edit `partials/components/contact-form.html` file to modify the contact form and `src/form/contact-form-handler.php` to modify the form handler.

To test it in a local environment, because there is PHP to execute, you will need to setup a apache vhost with the `dist` folder as the root and the phpmailer library installed.
The captcha service is hCaptcha, you will need to create an account and get your own site key (change it in the contact form partial) and secret key.
Add these lines to the vhost configuration file (here with mailtrap as smtp provider for testing purposes):

```
SetEnv ASTRO_SMTP_FROM test@astrolabe.test
SetEnv ASTRO_SMTP_HOSTNAME sandbox.smtp.mailtrap.io
SetEnv ASTRO_SMTP_USERNAME xxxxx
SetEnv ASTRO_SMTP_PASSWORD xxxxx
SetEnv HCAPTCHA_SECRET_KEY xxxxx
```
