update content; add fonts; add ParticleNetworkAnimation
parent
ac9ae16067
commit
f0c6b1fdce
@ -0,0 +1,315 @@
|
|||||||
|
/**
|
||||||
|
* Particle Network Animation https://codepen.io/franky/pen/LGMWPK
|
||||||
|
* Inspiration: https://github.com/JulianLaval/canvas-particle-network
|
||||||
|
*/
|
||||||
|
|
||||||
|
class ParticleNetworkAnimation {
|
||||||
|
constructor(element, options) {
|
||||||
|
this.$el = element;
|
||||||
|
|
||||||
|
this.container = element;
|
||||||
|
//this.canvas = document.createElement('canvas');
|
||||||
|
this.canvas = element;
|
||||||
|
this.sizeCanvas();
|
||||||
|
//this.container.appendChild(this.canvas);
|
||||||
|
this.ctx = this.canvas.getContext('2d');
|
||||||
|
this.particleNetwork = new ParticleNetwork(this, options);
|
||||||
|
|
||||||
|
this.bindUiActions();
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
bindUiActions() {
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
this.sizeCanvas();
|
||||||
|
this.particleNetwork.createParticles();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
sizeCanvas() {
|
||||||
|
this.canvas.width = this.container.offsetWidth;
|
||||||
|
this.canvas.height = this.container.offsetHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Particle{
|
||||||
|
constructor(parent, x, y) {
|
||||||
|
this.network = parent;
|
||||||
|
this.canvas = parent.canvas;
|
||||||
|
this.ctx = parent.ctx;
|
||||||
|
this.particleColor = returnRandomArrayitem(this.network.options.particleColors);
|
||||||
|
this.radius = getLimitedRandom(1.5, 2.5);
|
||||||
|
this.opacity = 0;
|
||||||
|
this.x = x || Math.random() * this.canvas.width;
|
||||||
|
this.y = y || Math.random() * this.canvas.height;
|
||||||
|
this.velocity = {
|
||||||
|
x: (Math.random() - 0.5) * parent.options.velocity,
|
||||||
|
y: (Math.random() - 0.5) * parent.options.velocity
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
update(){
|
||||||
|
if (this.opacity < 1) {
|
||||||
|
this.opacity += 0.01;
|
||||||
|
} else {
|
||||||
|
this.opacity = 1;
|
||||||
|
}
|
||||||
|
// Change dir if outside map
|
||||||
|
if (this.x > this.canvas.width + 100 || this.x < -100) {
|
||||||
|
this.velocity.x = -this.velocity.x;
|
||||||
|
}
|
||||||
|
if (this.y > this.canvas.height + 100 || this.y < -100) {
|
||||||
|
this.velocity.y = -this.velocity.y;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update position
|
||||||
|
this.x += this.velocity.x;
|
||||||
|
this.y += this.velocity.y;
|
||||||
|
}
|
||||||
|
draw(){
|
||||||
|
// Draw particle
|
||||||
|
this.ctx.beginPath();
|
||||||
|
this.ctx.fillStyle = this.particleColor;
|
||||||
|
this.ctx.globalAlpha = this.opacity;
|
||||||
|
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
|
||||||
|
this.ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
class ParticleNetwork{
|
||||||
|
constructor(parent, options = {
|
||||||
|
velocity: 2, // the higher the faster
|
||||||
|
density: 10000, // the lower the denser
|
||||||
|
netLineDistance: 200,
|
||||||
|
netLineColor: '#929292',
|
||||||
|
particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ]
|
||||||
|
}) {
|
||||||
|
this.options = options;
|
||||||
|
this.canvas = parent.canvas;
|
||||||
|
this.ctx = parent.ctx;
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init(){
|
||||||
|
// Create particle objects
|
||||||
|
this.createParticles(false);
|
||||||
|
|
||||||
|
// Update canvas
|
||||||
|
this.animationFrame = requestAnimationFrame(this.update.bind(this));
|
||||||
|
|
||||||
|
this.bindUiActions();
|
||||||
|
}
|
||||||
|
|
||||||
|
createParticles(isInitial) {
|
||||||
|
// Initialise / reset particles
|
||||||
|
let me = this;
|
||||||
|
this.particles = [];
|
||||||
|
let quantity = this.canvas.width * this.canvas.height / this.options.density;
|
||||||
|
|
||||||
|
if (isInitial) {
|
||||||
|
let counter = 0;
|
||||||
|
clearInterval(this.createIntervalId);
|
||||||
|
this.createIntervalId = setInterval(function() {
|
||||||
|
if (counter < quantity - 1) {
|
||||||
|
// Create particle object
|
||||||
|
this.particles.push(new Particle(this));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
clearInterval(me.createIntervalId);
|
||||||
|
}
|
||||||
|
counter++;
|
||||||
|
}.bind(this), 250);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Create particle objects
|
||||||
|
for (let i = 0; i < quantity; i++) {
|
||||||
|
this.particles.push(new Particle(this));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
createInteractionParticle() {
|
||||||
|
// Add interaction particle
|
||||||
|
this.interactionParticle = new Particle(this);
|
||||||
|
this.interactionParticle.velocity = {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
};
|
||||||
|
this.particles.push(this.interactionParticle);
|
||||||
|
return this.interactionParticle;
|
||||||
|
}
|
||||||
|
|
||||||
|
removeInteractionParticle() {
|
||||||
|
// Find it
|
||||||
|
let index = this.particles.indexOf(this.interactionParticle);
|
||||||
|
if (index > -1) {
|
||||||
|
// Remove it
|
||||||
|
this.interactionParticle = undefined;
|
||||||
|
this.particles.splice(index, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
update() {
|
||||||
|
if (this.canvas) {
|
||||||
|
|
||||||
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
this.ctx.globalAlpha = 1;
|
||||||
|
|
||||||
|
// Draw connections
|
||||||
|
for (let i = 0; i < this.particles.length; i++) {
|
||||||
|
for (let j = this.particles.length - 1; j > i; j--) {
|
||||||
|
let distance, p1 = this.particles[i], p2 = this.particles[j];
|
||||||
|
|
||||||
|
// check very simply if the two points are even a candidate for further measurements
|
||||||
|
distance = Math.min(Math.abs(p1.x - p2.x), Math.abs(p1.y - p2.y));
|
||||||
|
if (distance > this.options.netLineDistance) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// the two points seem close enough, now let's measure precisely
|
||||||
|
distance = Math.sqrt(
|
||||||
|
Math.pow(p1.x - p2.x, 2) +
|
||||||
|
Math.pow(p1.y - p2.y, 2)
|
||||||
|
);
|
||||||
|
if (distance > this.options.netLineDistance) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.ctx.beginPath();
|
||||||
|
this.ctx.strokeStyle = this.options.netLineColor;
|
||||||
|
this.ctx.globalAlpha = (this.options.netLineDistance - distance) / this.options.netLineDistance * p1.opacity * p2.opacity;
|
||||||
|
this.ctx.lineWidth = 0.7;
|
||||||
|
this.ctx.moveTo(p1.x, p1.y);
|
||||||
|
this.ctx.lineTo(p2.x, p2.y);
|
||||||
|
this.ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw particles
|
||||||
|
this.particles.forEach(k => {
|
||||||
|
k.update();
|
||||||
|
k.draw();
|
||||||
|
})
|
||||||
|
|
||||||
|
if (this.options.velocity !== 0) {
|
||||||
|
this.animationFrame = requestAnimationFrame(this.update.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
cancelAnimationFrame(this.animationFrame);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bindUiActions() {
|
||||||
|
// Mouse / touch event handling
|
||||||
|
this.spawnQuantity = 3;
|
||||||
|
this.mouseIsDown = false;
|
||||||
|
this.touchIsMoving = false;
|
||||||
|
|
||||||
|
this.onMouseMove = function(e) {
|
||||||
|
if (!this.interactionParticle) {
|
||||||
|
this.createInteractionParticle();
|
||||||
|
}
|
||||||
|
this.interactionParticle.x = e.offsetX;
|
||||||
|
this.interactionParticle.y = e.offsetY;
|
||||||
|
}.bind(this);
|
||||||
|
|
||||||
|
this.onTouchMove = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.touchIsMoving = true;
|
||||||
|
if (!this.interactionParticle) {
|
||||||
|
this.createInteractionParticle();
|
||||||
|
}
|
||||||
|
this.interactionParticle.x = e.changedTouches[0].clientX;
|
||||||
|
this.interactionParticle.y = e.changedTouches[0].clientY;
|
||||||
|
}.bind(this);
|
||||||
|
|
||||||
|
this.onMouseDown = function() {
|
||||||
|
this.mouseIsDown = true;
|
||||||
|
let counter = 0;
|
||||||
|
let quantity = this.spawnQuantity;
|
||||||
|
let intervalId = setInterval(function() {
|
||||||
|
if (this.mouseIsDown) {
|
||||||
|
if (counter === 1) {
|
||||||
|
quantity = 1;
|
||||||
|
}
|
||||||
|
for (let i = 0; i < quantity; i++) {
|
||||||
|
if (this.interactionParticle) {
|
||||||
|
this.particles.push(new Particle(this, this.interactionParticle.x, this.interactionParticle.y));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
clearInterval(intervalId);
|
||||||
|
}
|
||||||
|
counter++;
|
||||||
|
}.bind(this), 50);
|
||||||
|
}.bind(this);
|
||||||
|
|
||||||
|
this.onTouchStart = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
setTimeout(function() {
|
||||||
|
if (!this.touchIsMoving) {
|
||||||
|
for (let i = 0; i < this.spawnQuantity; i++) {
|
||||||
|
this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}.bind(this), 200);
|
||||||
|
}.bind(this);
|
||||||
|
|
||||||
|
this.onMouseUp = function() {
|
||||||
|
this.mouseIsDown = false;
|
||||||
|
}.bind(this);
|
||||||
|
|
||||||
|
this.onMouseOut = function() {
|
||||||
|
this.removeInteractionParticle();
|
||||||
|
}.bind(this);
|
||||||
|
|
||||||
|
this.onTouchEnd = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.touchIsMoving = false;
|
||||||
|
this.removeInteractionParticle();
|
||||||
|
}.bind(this);
|
||||||
|
|
||||||
|
this.canvas.addEventListener('mousemove', this.onMouseMove);
|
||||||
|
this.canvas.addEventListener('touchmove', this.onTouchMove);
|
||||||
|
//this.canvas.addEventListener('mousedown', this.onMouseDown);
|
||||||
|
this.canvas.addEventListener('touchstart', this.onTouchStart);
|
||||||
|
this.canvas.addEventListener('mouseup', this.onMouseUp);
|
||||||
|
this.canvas.addEventListener('mouseout', this.onMouseOut);
|
||||||
|
this.canvas.addEventListener('touchend', this.onTouchEnd);
|
||||||
|
}
|
||||||
|
|
||||||
|
unbindUiActions() {
|
||||||
|
if (this.canvas) {
|
||||||
|
this.canvas.removeEventListener('mousemove', this.onMouseMove);
|
||||||
|
this.canvas.removeEventListener('touchmove', this.onTouchMove);
|
||||||
|
this.canvas.removeEventListener('mousedown', this.onMouseDown);
|
||||||
|
this.canvas.removeEventListener('touchstart', this.onTouchStart);
|
||||||
|
this.canvas.removeEventListener('mouseup', this.onMouseUp);
|
||||||
|
this.canvas.removeEventListener('mouseout', this.onMouseOut);
|
||||||
|
this.canvas.removeEventListener('touchend', this.onTouchEnd);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let getLimitedRandom = function(min, max, roundToInteger) {
|
||||||
|
let number = Math.random() * (max - min) + min;
|
||||||
|
if (roundToInteger) {
|
||||||
|
number = Math.round(number);
|
||||||
|
}
|
||||||
|
return number;
|
||||||
|
};
|
||||||
|
|
||||||
|
let returnRandomArrayitem = function(array) {
|
||||||
|
return array[Math.floor(Math.random()*array.length)];
|
||||||
|
};
|
||||||
|
|
||||||
|
export {
|
||||||
|
ParticleNetworkAnimation
|
||||||
|
};
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,122 @@
|
|||||||
|
<template>
|
||||||
|
<div class="particle-network-animation">
|
||||||
|
<canvas ref="pna" ></canvas>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ParticleNetworkAnimation } from '../ParticleNetworkAnimation';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'BannerWrapperNetwork',
|
||||||
|
props: {
|
||||||
|
options: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
velocity: 0.5, // the higher the faster
|
||||||
|
density: 30000, // the lower the denser
|
||||||
|
netLineDistance: 120,
|
||||||
|
netLineColor: '#ccc',
|
||||||
|
particleColors: ['#ccc']
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
new ParticleNetworkAnimation(this.$refs.pna, this.options);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.particle-network-animation {
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
box-shadow: var(--shadow200);
|
||||||
|
|
||||||
|
&.white{
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
&.no-shadow{
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
z-index: -2;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-position: center center;
|
||||||
|
background-size: cover;
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
canvas{
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.wrapper{
|
||||||
|
//pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.glow {
|
||||||
|
z-index: -1;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.025), transparent);
|
||||||
|
}
|
||||||
|
$duration: 25s;
|
||||||
|
.glow-1 {
|
||||||
|
width: 150vw;
|
||||||
|
height: 150vh;
|
||||||
|
margin-top: -75vh;
|
||||||
|
margin-left: -75vw;
|
||||||
|
animation: glow-1-move $duration linear infinite both;
|
||||||
|
}
|
||||||
|
@keyframes glow-1-move {
|
||||||
|
from {
|
||||||
|
transform: translate(-100%, 100%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(100%, -100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.glow-2 {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
margin-top: -50vh;
|
||||||
|
margin-left: -50vw;
|
||||||
|
animation: glow-2-move $duration linear $duration / 3 infinite both;
|
||||||
|
}
|
||||||
|
@keyframes glow-2-move {
|
||||||
|
from {
|
||||||
|
transform: translate(-100%, 0%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(100%, 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.glow-3 {
|
||||||
|
width: 120vw;
|
||||||
|
height: 120vh;
|
||||||
|
margin-top: -60vh;
|
||||||
|
margin-left: -60vw;
|
||||||
|
animation: glow-3-move $duration linear $duration / 3 * 2 infinite both;
|
||||||
|
}
|
||||||
|
@keyframes glow-3-move {
|
||||||
|
from {
|
||||||
|
transform: translate(100%, 100%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translate(0%, -100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="row">
|
||||||
|
<StickyWrapper class="col-auto mx-4">
|
||||||
|
<router-link to="/projects" class="btn btn-outline-light">Projects</router-link>
|
||||||
|
</StickyWrapper>
|
||||||
|
<div class="col">
|
||||||
|
<FolderList path="/projects/" v-slot="{ page }">
|
||||||
|
<div class="card m-2">
|
||||||
|
<div class="card-header"><router-link :to="page.regularPath">{{ page.title }}</router-link></div>
|
||||||
|
<div class="card-body">
|
||||||
|
{{ page.frontmatter.excerpt }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FolderList>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "HomeContent"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
/* roboto-mono-100 - latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto Mono';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 100;
|
||||||
|
src: local(''),
|
||||||
|
url('../assets/fonts/roboto-mono-v22-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||||
|
url('../assets/fonts/roboto-mono-v22-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* roboto-mono-regular - latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto Mono';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: local(''),
|
||||||
|
url('../assets/fonts/roboto-mono-v22-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||||
|
url('../assets/fonts/roboto-mono-v22-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||||
|
}
|
||||||
@ -1,7 +1,13 @@
|
|||||||
---
|
---
|
||||||
sidebar: true
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Projects
|
# Projects
|
||||||
|
|
||||||
<FolderList path="/projects/" />
|
<FolderList path="/projects/" v-slot="{ page }" class="m-0 p-0">
|
||||||
|
<div class="card my-2">
|
||||||
|
<div class="card-header"><router-link :to="page.regularPath">{{ page.title }}</router-link></div>
|
||||||
|
<div class="card-body">
|
||||||
|
{{ page.frontmatter.excerpt }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FolderList>
|
||||||
|
|||||||
@ -0,0 +1,126 @@
|
|||||||
|
---
|
||||||
|
sidebar: true
|
||||||
|
excerpt: "a complete working docker-compose setup for the matrix synapse server with postgres"
|
||||||
|
---
|
||||||
|
|
||||||
|
# docker-compose matrix-synapse
|
||||||
|
|
||||||
|
a complete working docker-compose setup for the matrix synapse server with postgres
|
||||||
|
|
||||||
|
## clone the repo
|
||||||
|
```bash
|
||||||
|
git clone https://git.cybre.town/adb/docker-compose_matrix_synapse/
|
||||||
|
```
|
||||||
|
|
||||||
|
## create config files
|
||||||
|
|
||||||
|
* Change `your.domain` in the `create_config.sh` file and simply run the script from terminal.
|
||||||
|
* A temporary docker container will be created, that will configure the configs for you.
|
||||||
|
* You will find your finished configs at `/var/lib/docker/volumes/synapse-data/_data`.
|
||||||
|
* Copy this files to `./synapse_data/` in your docker-compose working directory.
|
||||||
|
|
||||||
|
for more details have a look at: [hub.docker.com/r/matrixdotorg/synapse](https://hub.docker.com/r/matrixdotorg/synapse)
|
||||||
|
|
||||||
|
## configure `./synapse_data/homserver.yaml`
|
||||||
|
|
||||||
|
### database
|
||||||
|
|
||||||
|
* comment the standard sqlite3 config
|
||||||
|
* just below add:
|
||||||
|
```yaml
|
||||||
|
database:
|
||||||
|
name: psycopg2
|
||||||
|
args:
|
||||||
|
user: matrix
|
||||||
|
password: your-secret-pw
|
||||||
|
database: synapse
|
||||||
|
host: db
|
||||||
|
cp_min: 5
|
||||||
|
cp_max: 10
|
||||||
|
```
|
||||||
|
* change the password
|
||||||
|
|
||||||
|
### registration
|
||||||
|
|
||||||
|
* to enable user registration comment out this line: `enable_registration: true`
|
||||||
|
|
||||||
|
## configure `docker-compose.yml`
|
||||||
|
|
||||||
|
* change the postgres password to the password you've set before.
|
||||||
|
|
||||||
|
## create docker containers
|
||||||
|
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd /your/docker-compose/working/directory
|
||||||
|
docker-compose -p matrix up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
If you can see the congrats page at `http://127.0.0.1:8008/` everything is working. This might take a few minutes, as the database has to be created.
|
||||||
|
|
||||||
|
## nginx config
|
||||||
|
|
||||||
|
To manage SSL/TLS I'm using nginx.
|
||||||
|
|
||||||
|
Just add another path to your working SSL v-host server, like this:
|
||||||
|
```nginx
|
||||||
|
#matrix server
|
||||||
|
|
||||||
|
#For the federation port
|
||||||
|
listen 8448 ssl default_server;
|
||||||
|
listen [::]:8448 ssl default_server;
|
||||||
|
|
||||||
|
location /_matrix {
|
||||||
|
proxy_pass http://127.0.0.1:8008;
|
||||||
|
proxy_set_header X-Forwarded-For $remote_addr;
|
||||||
|
# Nginx by default only allows file uploads up to 1M in size
|
||||||
|
# Increase client_max_body_size to match max_upload_size defined in homeserver.yaml
|
||||||
|
client_max_body_size 10M;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
The full v-host server config might look like:
|
||||||
|
```nginx
|
||||||
|
server {
|
||||||
|
server_name your.domain;
|
||||||
|
|
||||||
|
#main web server
|
||||||
|
listen [::]:443 ssl ipv6only=on;
|
||||||
|
listen 443 ssl;
|
||||||
|
|
||||||
|
root /var/www/your.domain;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
#matrix server
|
||||||
|
|
||||||
|
#For the federation port
|
||||||
|
listen 8448 ssl default_server;
|
||||||
|
listen [::]:8448 ssl default_server;
|
||||||
|
|
||||||
|
location /_matrix {
|
||||||
|
proxy_pass http://127.0.0.1:8008;
|
||||||
|
proxy_set_header X-Forwarded-For $remote_addr;
|
||||||
|
# Nginx by default only allows file uploads up to 1M in size
|
||||||
|
# Increase client_max_body_size to match max_upload_size defined in homeserver.yaml
|
||||||
|
client_max_body_size 10M;
|
||||||
|
}
|
||||||
|
|
||||||
|
ssl_certificate /etc/letsencrypt/live/your.domain/fullchain.pem;
|
||||||
|
ssl_certificate_key /etc/letsencrypt/live/your.domain/privkey.pem;
|
||||||
|
include /etc/letsencrypt/options-ssl-nginx.conf;
|
||||||
|
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
|
||||||
|
|
||||||
|
}
|
||||||
|
server {
|
||||||
|
if ($host = your.domain) {
|
||||||
|
return 302 https://$host$request_uri;
|
||||||
|
}
|
||||||
|
|
||||||
|
listen 80;
|
||||||
|
listen [::]:80;
|
||||||
|
|
||||||
|
server_name your.domain;
|
||||||
|
return 404;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
//and that's it, good luck :D
|
||||||
Loading…
Reference in New Issue