Unable to negotiate with x.x.x.x port 22: no matching host key type found. Their offer: ssh-rsa,ssh-dss

After looking up the error I was able to fix this by using the following instructions:

On your local machine, edit/create ~/.ssh/config

Add this (replace the x’s with the server IP)

Host x.x.x.x
    HostKeyAlgorithms=+ssh-dss

After this try connecting. You may need to remove the host from your known hosts first…

Edit ~/.ssh/known_hosts

Search for your server IP, and remove any matching line(s)

That’s all, after this you’ll be able to reconnect using your existing keys

The post Fix: SSH No Matching Host Key Type Found appeared first on Cube Websites.

This articles shares my findings and shows how easy it is to setup.

Setup your collection

Select an existing (or create a new collection) that you want translations for. Don’t add any fields that need translations just yet!

Next, click on Create Field and choose the ‘Translations’ type field:

If you like you can modify some of the field configuration by clicking the Continue in Advanced Field Creation Mode. For example I prefer using UpperCamelCase for my table names, so I modified the languages table name to Languages

Setup Translation Fields

Once you’ve done that go back to the Data Model screen. Here you’ll see a new hidden collection, in my case Categories Translations

Click into the Categories_Translations table, and within this collection add all the fields for Categories that need translations. e.g.:

Add Translated Content

Now, go to the Content menu and choose your collection. You’ll see the fields you’ve added to the Translations table appear with the option to fill them out in different languages.

Here you can use the Translations input to select a language, and then use the input fields below to populate the content in your selected Language. There’s even a split view which is very handy if you’re translating content from one language to another.

Managing Languages

You can control which Languages appear by modifying the entries in the Languages collection. By default Directus populates that table with 8 common languagues.

Hopefully this demonstrates how easy it is to add translated content in Directus. Of course, if there’s fields that don’t need translation you just add them in the parent table – in this case the Categories collection.

The post How To: Setup Content Translations In Directus appeared first on Cube Websites.

docker ps | grep 8029

This searches through your docker containers, and finds any that are running on port 8029. The output should look like this:

fec0c35f0b2d directus/directus:latest "docker-entrypoint.s…" 15 minutes ago Up 5 minutes 127.0.0.1:8029->8055/tcp directus-example

In the above example you can see that port 8029 was identified to be in use by the directus-example container. It turns out I did a test install of Directus on that port, and then forgot to delete it.

Stop the docker container:

docker stop fec0c35f0b2d

The container ID (fec0c35f0b2d) used above is from the first command which provided the container ID

Delete the docker container. In my case I no longer needed this Directus container, so I deleted the container too. If you need to keep your container, then just change its configuration to run on a different port that doesn’t clash.

docker rm fec0c35f0b2d

With this complete, I was able to start the Docker container that’s actually supposed to be running on port 8029 with no issues.

In my case I knew that the port would be used by Docker because I use that port range for Docker only. If you don’t know for sure that it’s Docker using the port, then you can use the following to check which service is using the port. Note that you will need sudo access to run this.

sudo netstat -tulpn | grep 8029

The output from this should tell you which service is using that port.

The post How To: Check Which Docker Container Is Using A Port appeared first on Cube Websites.

I’ve now setup a new integration which uses some additional tools (Directus and n8n) to help with this process. The below provides a quick run-through of the process and explanation of this approach.

Advantages

Directus provides a quick way of creating an API around data models. They offer a free cloud version which is perfect for this small-scale integration. It can also be self-hosted in a number of ways, including using Docker which makes it very easy to setup.

Note that you don’t necessarily need Directus – you could use a database (e.g. MySQL) and replace the n8n API calls with database queries instead.

n8n (nodemation) is a powerful automation tool similar to Zapier or Logic Apps. You can build workflows to help you achieve complicated processes using simple building blocks. This also has a Cloud version (paid) or a self-hosted version.

Using the above means that I have far more control over what is going out to Mastodon, and can easily be expand to cover additional platforms e.g. Telegram, Slack or Teams.

• messages can be customised to your liking
• messages can be deleted if a post is updated, and you can resubmit
• you use your own Mastodon account so your profile can be managed fully

The Process

1. In Directus create a Collection called ‘rss_feed_items’ with a field called ‘guid’. This is used to track posts which have already been sent to Mastodon to prevent duplicates
2. In n8n, use a Schedule trigger to run every 5 minutes or so
3. Use the RSS block to fetch the RSS feed for your WordPress blog
4. Use the HTTP block to get a list of existing guids from the Directus API
5. Use the Merge block to keep only new blog posts
6. Use a Code block to prepare the message for Mastodon i.e. get the title, link and convert the categories to hashtags
7. Use the Mastodon block to post the message to Mastodon. This is a third-party block at the moment.
8. Use the HTTP block to call the Directus API and create a record for the guid of the blog post

Using this method, if a blog post is updated, I can just edit my post on Mastodon. It could actually be made more sophisticated by keeping the Mastodon status ID and Mastodon post content in Directus with the GUID, and then if the new content is different to the old n8n can delete the old post and create a new post for you.

Note that on the first run, it will send all the posts that appear on your current RSS feed to Mastodon.

Enjoy!

The post Guide: Using n8n to Send New WordPress Posts to Mastodon appeared first on Cube Websites.

The project was configured to:

• run on MAMP
• the MAMP host was configured to use SSL
• Laravel 9
• Vite
• InertiaJS

The Problem

When running the default project with yarn run dev and accessing the project in the browser via the hostname configured in MAMP, the hot reload feature was not working and the network and console tabs in Developer Tools were polluted with lots of 404 errors about the failure to connect to the Vite Ping URL e.g. __vite_ping to which it keeps trying to reconnect to.

How to fix

You have to configure Vite to run on https. This can be done in a number of ways, but the easiest is to use the @vitejs/plugin-basic-ssl plugin. It’s really easy to get started:

1. Add the plugin to your project
   • with yarn: yarn add --dev @vitejs/plugin-basic-ssl
   • with npm: npm i @vitejs/plugin-basic-ssl
2. Open the vite.config.js file in your Laravel project
3. Import the plugin at the top of the file:
   • import basicSsl from '@vitejs/plugin-basic-ssl'
4. Enable the plugin using the defineConfig block e.g.

export default {
  plugins: [
    basicSsl()
  ]
}

Note: you might already have other plugins or config options in the defineConfig block, but you just need to make sure you add the called to basicSsl() in the plugins section.

After this when you run your project using yarn run dev it will provide you with a Local URL e.g.

11:15:06 [vite] vite.config.js changed, restarting server...
11:15:06 [vite] server restarted.

  > Local: https://localhost:3000/
  > Network: use `--host` to expose

Open that Local URL in your browser and you’ll receive an SSL warning. Accept the risks to accept the SSL certificate generated by the plugin.

Once that’s done when you visit your application dev URL, you’ll see all the Vite 404 errors have disappeared and you’re left with one neat little log that tells you Vite is now connected.

[vite] connecting... client.ts:16:8
[vite] connected. client.ts:53:14

Hope this helps!

The post HOW TO: Using Laravel with Vite on MAMP appeared first on Cube Websites.

The idea is to automatically make all your blog posts on WordPress available on the Fediverse that people can follow on their apps such as Mastodon.

Caution: before doing this read the notes below around the downsides to this integration.

Doing this is really easy…

1. Note that this will only work on self-hosted WordPress installations
2. Note that there’s very limited configuration options
3. Install the ActivityPub for WordPress plugin
4. Activate it
5. Done – on the plugin settings page it will give you the username and URL that can be shared for others to follow. Any new posts will start to appear to all followers.

Quick fix: when I installed the plugin and went to the Health Checks page, it was showing that my author page was not returning valid JSON with the error:

Your author URL https://cubewebsites.com/author/Cube Websites/ does not return valid JSON for application/activity+json. Please check if your hosting supports alternate Accept headers

The reason for this issue was that the author name format in the URL is from an old version of WordPress. To fix it all you need to do is:

1. Connect to your database using a management tool e.g. phpMyAdmin, TablePlus etc
2. Go to the users table
3. Find your user account
4. Change the user_nicename field to a username/slug format i.e. no spaces, lowercase
5. Save the changes
6. You’ll now see that your author page starts to work and the error message goes away

Why do this?

I only set this up to test this feature out. It’s quite cool but extremely limited as it creates a Fediverse presence for your site with little to no control. From what I can tell it registers your site domain as a Fediverse server to give you a unique presence.

The following is all missing:

• option to modify a post once it’s published
• specify hashtags to include (very useful on Mastodon)
• personalise your profile directly
• receive notifications for any engagement with your content i.e. replies and favourites
• changing your Fediverse address

The Fediverse address, it’s always @admin@yourdomain.com which isn’t a particularly appealing good name in this world of vanity usernames. For profiles it will pick up your profile picture from the user account, so you can modify that. Perhaps it picks up additional fields from your WordPress user profile but I haven’t explored that far.

I made a post that I published without setting the category, so the URL includes the ‘uncategorized’ slug. After fixing this mistake, there was no way to go back and change the automatic post it’s pushed out on the Fediverse feed.

Alternative Approaches

1. An easy option is to create a Fediverse account on an existing Mastodon server. Then connect your blog to push to this account using the API via a plugin, or via the RSS feed
2. Setup your own Mastodon server so you can use your own server address instead of a general one, and then use that to push the same way as above
3. Explore Friendica which seems to have the option of making RSS Feeds into Fediverse accounts

My preferred option is Option 1, and perhaps at a later date when I have the time to setup my own server, I would migrate the account to that server. It provides the most control and personalisation and means you can use the Mastodon app to engage with readers.

The post How To: Add Your WordPress Blog to the Fediverse appeared first on Cube Websites.

After inspecting the requests with the Firebug Console, I saw that the culprit was the request:

/wp-admin/load-scripts.php?c=0&load%5B%5D=jquery-core,jquery-migrate,utils,plupload&ver=4.2.3

I tried the normal fixes such as checking permissions, updating everything, and even reinstalling WordPress but to no avail.  Then I started looking on Google for a potential fix and found this article which not only provides the solution, but also a detailed explanation of why the error occurs in the first place.

As soon as I made the recommended updates, all the sites started working properly with no issue whatsoever.

Full credit goes to the article author.  Just posting here for my own reference more than anything else!

UPDATE: As the original article no longer exists I’ve posted the instructions below:

It turns out the solution to this is quite simple. Nginx and php-fpm need to run as the same user and the directory /var/lib/nginx needs to be owned by that user. Personally I like to run all my web-related services under a www-data user, but running it under a nginx or apache user is also common. To change the user nginx runs under, edit the main nginx config file usually located at /etc/nginx/nginx.conf:

user www-data;
worker_processes 4;
pid runnginx.pid;

Now to change the user php-fpm runs under we need to edit its config file. On my Amazon Linux system this was located at /etc/php-fpm.d/www.conf while on my old Debian setup it was located at /etc/php5/fpm/pool.d/www.conf. There are two user-related settings in the config file. First, if php-fpm runs as a socket (as opposed to listening on a port), the user and group owner of the socket should be set to the same user as nginx so that nginx can access it to run php files. This is not relevant for our error, but can cause other issues if nginx doesnt have permissions to access the socket. Second, the user and group that the php-fpm process runs under needs to be the same as nginx.

    user  = www-data
    group = www-data
     
    listen = varrunphp5-fpm.sock
    listen.owner = www-data
    listen.group = www-dataL

To change the ownership of the nginx lib directory simply run the command chown -R www-data:www-data /var/lib/nginx as root (sudo will do on most systems). Finally, if we edited any config files, we need to restart the appropriate services for the changes to take effect. On most systems this can be done by running service nginx restart or /etc/init.d/nginx restart as root. For php-fpm the service name is php5-fpm.

The post FIX: WordPress on nginx (ERR_INCOMPLETE_CHUNKED_ENCODING) appeared first on Cube Websites.

The Problem

I made all the following checks:

1. Valid SSL certificate
2. Webhook successfully registered using the Telegram setWebhook method
3. The method responded properly when I sent a test request using a REST service tester
4. Server access logs – look like Telegram had never even hit the server

The Solution

After a full day of searching, testing and bashing my head against the keyboard, I found this thread on Reddit, where the user described a problem where a full chained certificate was required on the server, not just the server certificate.

To create chained certificate you’ll need to have a look at what instructions your certificate issuer provides.

In my case the certificate being used was a Comodo PositiveSSL, for which I downloaded all the certificates that they sent, which contained:

• Root CA Certificate – AddTrustExternalCARoot.crt
• Intermediate CA Certificate – COMODORSAAddTrustCA.crt
• Intermediate CA Certificate – COMODORSADomainValidationSecureServerCA.crt
• Your PositiveSSL Certificate – my_domain.crt

I had to combine them all into a file in the following order:

• my_domain.crt
• COMODORSADomainValidationSecureServerCA.crt
• COMODORSAAddTrustCA.crt
• AddTrustExternalCARoot.crt

For the example above the command would have been:

cat my_domain.crt COMODORSADomainValidationSecureServerCA.crt AddTrustExternalCARoot.crt COMODORSAAddTrustCA.crt > bundle.crt

After that it was just a case of uploading the new bundle.crt to my server, updating the nginx config, and hey presto, within minutes I was receiving all the responses for my webhooks

The post FIX: Telegram Webhooks Not Working appeared first on Cube Websites.

This tutorial is available for you to view and download on GitHub

Requirements

To see this tutorial in action, please use Google Chrome or Safari (or Firefox 10 or IE10).  Impress.js is not currently compatible with earlier versions of Firefox or Internet Explorer.

Setup

The first thing you want to do is create a new webpage.  Mine’s index.html and within it setup the basic head and body elements.

<!doctype html>
<html>
    <head>
        <title>Impress Tutorial</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>

    </body>
</html>

Add the impress.js file before the end of the body element.  This imports the Impress library into your project

<script type="text/javascript" src="impress.js"></script>

Next we’ll create a wrapper which will contain the slideshow.  This is simply a <div> element with an id of ‘impress’

<div id="impress">

</div>

<div class="step">
    My first slide
</div>

Whilst that creates a simple slide, things are a lot more fun you start adding data properties to your slides.  Data attributes signify properties of your slide for when it’s NOT the active slide.  The following data properties are available to you:

• data-x = the x co-ordinate of the slide
• data-y = the y co-ordinate of the slide
• data-z = the z co-ordinate of the slide (how far/close it appears to the user)
• data-scale = scales your slide by a factor of this value.  A data-scale of 5 would be 5 times the original size of your slide
• data-rotate = rotates your slide by the specified number of degrees
• data-rotate-x = For 3D slides.  This is the number of degrees it should be rotated about the x-axis.  (Tilt forward/lean back)
• data-rotate-y = For 3D slides. This is the number of degrees it should be rotated about the y-axis (swing in from the left/right)
• data-rotate-z = For 3D slides. This is the number of degrees it should be rotated about the z-axis

Data Attributes In Action

The following slide configuration will guide you through each of the data attributes in action.

Let’s start with an initial slide.  This slide has it’s x and y data attributes set to 0, so will appear in the center of the page.

<div class="step" data-x="0" data-y="0">
    This is my first slide
</div>

The second slide will have an x position of 500, but the y position of 0.  This means that it’s going to have to come in 500 pixels across the x-axis (slide left) when it becomes active.

<div class="step" data-x="500" data-y="0">
    This is slide 2
</div>

Easy huh?  The next slide will start with the same x-position as slide 2, but a y position of –400.  This will slide in from the top 400 pixels.

<div class="step" data-x="500" data-y="-400">
    This is slide 3
</div>

Slide 4 uses the scale value to show how a slide can appear to zoom in/out.  It has a scale value of 0.5, meaning that it’s half the size it should be.  When it becomes active the presentation will adjust the scale of ALL the slides by the factor required to make the scale of the active website 1.  What this means in this example is that for this slide to display normally (scale value 1) it will need to be scaled up by a factor of 2 (0.5*2 = 1).  All the other slides will also be scaled up by a factor of two, and become twice the size.

<div class="step" data-x="500" data-y="-800" data-scale="0.5">
    This is slide 4
</div>

The rotate attributes allows you to rotate a slide into view.  Slide 5 is set to rotate by 90 degrees.

<div class="step" data-x="0" data-y="-800" data-rotate="90">
    This is slide 5 and it rotates in.
</div>

Finally, for a 3D transition, you can specify rotate attributes for each dimensional axis (x,y,z).

The x axis is the horizontal axis.  This means that you can make things tilt forwards (positive value) or backwards (negative value).
The y axis is the vertical axis so you can have things swing in from the left (negative value) or right (positive value).
The z axis is the depth axis (the one coming out at you) so rotating things on this would be rotating things up (negative value) and down (positive value).

Combinations

Now that you know all about the data attributes, which is really all you need to animate your slideshow, you can use your imagination to combine these in weird and wonderful ways to create your own style of slideshow.

<div class="step" data-x="-2600" data-y="-800" data-rotate-x="30" data-rotate-y="-60" data-rotate-z="90" data-scale="4">
    This is slide 7 and it has a 3D transition AND a scale.
</div>

Unsupported Browsers

Impress automatically detects whether or not a browser supports it or not, and if it doesn’t then automatically adds a class name called ‘impress-not-supported’ to the wrapper ‘<div>’.  Using some CSS we can show a message to people on browsers which aren’t supported by Impress.

At the start of your <div id=”impress”> add the following:

<div class="no-support-message">
    Your browser doesn't support impress.js.  Try Chrome or Safari.
</div>

Then, create a stylesheet or add this to your existing stylesheet:

.no-support-message { display:none; }
.impress-not-supported .no-support-message { display:block; }

This hides the message by default, but then displays it to browser if the impress-not-supported class is present.

Have fun!

This tutorial covers the fundamentals of using Impress.js to create your very own online presentation.  The entire example is available on Github for you to download and play with.

View on GitHub

The post How To Use Impress.Js appeared first on Cube Websites.

This tutorial shows you how easy it is to add/edit/delete pages on your Concrete5 Content Managed website.

Adding A New Page

1. Login to your Dashboard
2. Select the Sitemap
3. Click on the page which will be the parent of your new page
4. Click Add Page from the context menu which appears
5. Select your Page Type
6. Give your page a Name and Description
7. Click Add Page

Editing A Page

If you’d like a Concrete5 powered Content Management System of your own, why not get in touch?

Stay tuned for more tutorials.

The post TUTORIAL: Adding / Editing / Deleting Pages In Concrete5 appeared first on Cube Websites.