150 lines
4.6 KiB
Markdown
150 lines
4.6 KiB
Markdown
# 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.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, 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 `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
|
|
```
|