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.git
2. cd into the project directory and run npm install
3. Once all the dependencies are installed run npm start
4. Open your browser at http://localhost:8080 and away you go!

Deploy

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

Terminal commands

Serve the site locally

npm start

Build a production version of the site

npm run prod

Lint Sass

npm run sass:lint

Compile Sass

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 postsfolder, 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 imagesfolder.

Add an 'event' post

In the postsfolder, 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 imagesfolder.

Add a new member

In the membersfolder, 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 images/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 customersfolder, 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 partnersfolder, 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