spatie / spatie.be

The source code of spatie.be

The source code of spatie.be

This repo contains the source code of our company website. This blog post series at freek.dev contains a lot of info on how this code works.

Support us

We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.

We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on our contact page. We publish all received postcards on our virtual postcard wall.

Credits

This website was principally designed by Willem Van Bockstal. Everyone at Spatie has made cool contributions during development.

License

• The web application falls under the MIT License
• The content and design are under exclusive copyright

If you'd like to reuse or repost something, feel free to hit us up at [email protected]. Please remember that the design is not meant to be forked!

License

This project and the Laravel framework are open-sourced software licensed under the MIT license.

GeoIP lookup

We use Maxmind's geo IP dataset to provide PPP based on IP location. This is built using the excellent laravel-geoip package.

To set it this up the first time you'll need a Maxmind license key (free for personal use) in the MAXMIND_LICENSE_KEY environment variable. Next, run the php artisan geoip:update command to pull in the geo IP dataset.

In production, the geoip:update command is scheduled to run weekly.

spatie.be's Issues

Admin doesn't work anymore

Getting a 403 when posting a new postcard.

Add unsolicited job application

Good first issues link does not work on mobile

Hi!

Just noticed this odd issue with the "all easy issues on GitHub" link, when trying to access it on a mobile it does not work, I get a 404. However, it works fine once on a computer. It seems to be related to the quotation marks.

This is the link that is generated on a mobile: https://github.com/issues?q=is%3Aopen+is%3Aissue+user%3Aspatie+is%3Apublic+label%3A%22good+first+issue%22

Invoice page missing info on what was bought

When using a wrong password, no feedback is given

An error message should be displayed.

Tweets should be paced better

Right now we tweet new good first issues immediately. When tagging a lots of issues at once, this results in many simultaneous tweets. This can be perceived as spammy.

Let's only tweet out one issue every 2 hours.

Css from font.css does not load

Checklist going live

1. Browserstack tests

• Desktop: test on latest versions of Chrome, IE/Edge, Firefox, Safari
• Mobile: test on latest versions of Mobile Safari, Android

2. Front end checklist

Assets

• Search sources for http://. Replace by https://
• Lint (s)css sources
• Webfonts: is the live domain configured in services like Typekit, Fonts.com etc.?
• Is the browserlist properly configured for autoprefixer and babel-preset-env?
• When using PurgeCSS: check if layout is preserved.

Scripts

• Is yarn.lock present?
• Check JS lint errors. Remove all console.log lines in scripts
• Check for console errors

Page weight

• Evaluate total weight of at least homepage
• Open Inspector network/timeline tab to identify heavy assets
• Check if heavy assets are cached

Performance

• Use the Chrome DevTools and throttle your CPU and network with 10x CPU slowdown and set the network to "Good 3G".

3. Check content (with an open console)

• Are all strings / images present (and translated)?
• Does menu/submenu have a correct active state on every page?
• Are 404, 500 and 503 pages provided? Do they provide useful content like 'back to home', search or a navigation tree?
• Check all pages for n+1 problems

Meta

• Check page titles / descriptions
• Test Facebook sharing. Provide og-tags if needed
• Does Favicon load? Pin the tab in Safari to check pinned icon

Repeat this section for all languages

Components

• Check structured data for news, events, products,... https://search.google.com/structured-data/testing-tool/

4. Server, DNS & Services

• Install Let's Encrypt certificate
• Check SSL certificate health https://www.ssllabs.com/ssltest/
• Check your hostfile to make sure you're looking at the live site
• Try visiting www domain, should redirect to non-www
• Try out visiting http, should redirect to https
• Verify that all http status codes are ok with https://github.com/spatie/http-status-check
• Scan for mixed content with https://github.com/spatie/mixed-content-scanner-cli
• Verify that the content of robots header is current with curl-I https://url on x-robots-tag
• Remove development DNS record
• Check dns propagation with https://www.whatsmydns.net/
• Verify Tag Manager / Analytics have been correctly set up

Google Search Console

• Submit all www/non-www http/https variations
• Set up non-www https as the preferred domain
• Crawl > Fetch as Google > Submit to index to kickstart index

Server

• Are DigitalOcean backups enabled?
• Are Amazon backups enabled?
• Is the output of artisan task backup:run ok?
• Is artisan scheduled on Forge?
• Is Horizon configured in Supervisor on Forge? Command should be php artisan horizon. Path should be /home/forge/my-new-site.com/current
• Is the url being monitored by Oh Dear!?
• Is the server being monitored by our server-monitor?

Reset password: mail subject

Is currently "Reset Password Notification". Feels like some temporary solution?
Better 'Your password reset for spatie.be" or something alike?

Consider using self hosted photos of the team

Gravatar images are a bit blurry.

Filter postcards

Filter could be handy to look up one's own entry

Docs subdomain redirect

No mail received after book purchase & product doesn't show in account

Mailcoach purchase confirmation shows "download" button and links to mailcoach.app

Wrong title on Reset Password page

https://spatie.be/reset-password

Install bugsnag

Only PHP integration is ok.

Add Service Worker for offline page

Regenerate image derivatives (optionally) when deploying

Translate legal stuff to EN

Content suggestions or Videos overview

• maybe funny to change subtitle to "This is how we do it"
• very stylish, but commercial enough? I would like to see a thumbnail (cover, video still, avatar...) for each block.
• at the bottom: "A lot of this content is sponsors-first..." -> but the majority is now (3 vs 2 blocks) a separate paying product
• "During 2 hours of video, Brent..." -> add that comma?

Add opening hours

• Add hours to structured data
• Add open/closed indicator of some sorts to contact

Insights doesn't seem to get updated

Homepage does not show the latest blogposts on murze.be

Filter packages

Fix open source issues

Seems like some stuff broke here since livewire refactor

• Overview: list only 'current favorites'
• Projects: 'Search projects', 'All projects' instead of '… packages'

Add structured contact data

Easy issues on OSS page are missing real data

Error message aren't readable

Needs some more layout love

Package filter could use some rework

• Show 3 options as pills
• Switch asc / desc
• Do we need to show package date somewhere (because it's a filter option)?

Add more client logos on homepage

No "success" confirmation when creating a new account

Maybe a flash message or something

Docs: raw HTML not rendering

http://2020.spatie.be/docs/laravel-medialibrary/v8/responsive-images/demo

Office opening hours seem off

In the telephone dialog the office seems closed at 10:30 AM

Check print stylesheet for legal documents

/about-us/alex creates a redirect loop

Route::prefix('about-us')->group(function () {
    Route::view('/', 'pages/about/index')->name('about');

    collect(config('team.members'))->each(function (string $personName) {
        Route::redirect($personName, "#{$personName}");
    });
});

This code looks as though the intention is to redirect /about-us/alex to /about-us#alex, but it actually redirects to /about-us/alex#alex and hits a re-direct loop

(Pre-)going live checklist

Pre-going live

• Producten aanmaken in Nova
• Producten aanmaken op Paddle
• Mailcoach.app aanpassen: checkout/login redirect
• Laravel package course aanpassen: checkout/login redirect

Going live

• merge add-customer-site branch to master
• revert envoy-script to deploy from master and to the original spatie.be directory
• cleanup forge
• algolia doc search config aanpassen
• redirects voor de docs.spatie.be naar spatie.be/docs
• mailcoach docs aanpassen
• verkopen terug starten op externe sites

Packages have wrong download count

The download count on the packages list always shows the same value as the fork count.

Pretty sure the problem is in views/livewire/repositories.blade.php#L51 where $repository->stars should get replaced with $repository->downloads.

Display selected file name when adding postcards

Right now, if you select a postcard it's name is not displayed. This can be confusing. Can you make sure the filename gets displayed after selected a file?

Postcard wall images are too big

https://twitter.com/mrk_j/status/1278237320211283969

No active indicator on profile page

Docs integration

For the add-customer-branch:

Docs index

• about/docs/guidlines: highlight active menu item in service menu
• reverse sort version numbers (as suggested by @sebastiandedeyne)
• package order: alphabetically?

Docs detail:

• check my dummy breadcrumb code and link second segment to package intro
• check side navigation sections order. 'Introduction' is not always on top
• show big title only on introduction page
• images missing
• optional: next/prev page link at the bottom
• optional: provide bookmark on each H2
• check side nav version jumper: set current option active + jump to correct url

Keep into account `requires_license` value when handling a purchase

My profile > connect to GitHub account 500 error

Add Adriaan to about us page

Add yourself to the about us page: https://spatie.be/about-us

Let me know if you have questions on how to do this.

Add a message when no search results are empty on the packages page

Make all view files camelCase

Replace font awesome icons with inline svg's

FATAL error on composer post autoload dump

I am trying to setup the spatie.be code on my Laravel homestead VM

composer install runs and downloads all dependencies but stops at

Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover

with this error

  Symfony\Component\Debug\Exception\FatalThrowableError  : Argument 1 passed to App\Services\Patreon\PatreonAuthenticator::__construct() must be of the type string, null given, called in /home/vagrant/laradev/spatie.be/app/Services/Patreon/PatreonServiceProvider.php on line 13

  at /home/vagrant/laradev/spatie.be/app/Services/Patreon/PatreonAuthenticator.php:23
    19|
    20|     /** @var string */
    21|     protected $clientSecret;
    22|
  > 23|     public function __construct(string $clientId, string $clientSecret)
    24|     {
    25|         $this->client = new Client([
    26|             'base_uri' => 'https://api.patreon.com/oauth2/token',
    27|         ]);

  Exception trace:

  1   App\Services\Patreon\PatreonAuthenticator::__construct()
      /home/vagrant/laradev/spatie.be/app/Services/Patreon/PatreonServiceProvider.php:13

  2   App\Services\Patreon\PatreonServiceProvider::App\Services\Patreon\{closure}(Object(Illuminate\Foundation\Application), [])
      /home/vagrant/laradev/spatie.be/vendor/laravel/framework/src/Illuminate/Container/Container.php:787

  Please use the argument -v to see more details.
Script @php artisan package:discover handling the post-autoload-dump event returned with error code 1 

Add Ruben to about us page

Add yourself to the about us page
https://spatie.be/about-us

Let me know if you have questions on how to do this.

Add arrow after active item on open source menu

https://github.com/spatie/spatie.be/blob/master/app/Providers/NavigationServiceProvider.php#L24

Dynamically added responsive images

Hi Spatie,

First off, you guys are awesome. My life as a developer would be so much worse without your many packages. Thank you for inventing the wheel for the rest of us.

Second, I borrowed your code that automatically loads responsive images with the Intersection Observer. I am attempting to get rid of 'unsafe-inline' from my CSP, and couldn't use your inline onload script from MediaLibrary. (By the way, why are there two? oonload and onload? As far as I know, oonload doesn't work.)

Unfortunately for me, I have a use case that caused your script to not always load images. If a responsive image was loaded after the page has loaded (for example, in a product lookup page that is blank until you start searching), there is a high chance that the Observer would fail to trigger and cause the image to load. I added the following code after the window resize portion, and it seems to work. Do you guys know of a better way?

let loadTimer;

window.addEventListener('data:loaded', () => {
    window.clearTimeout(loadTimer);

    loadTimer = window.setTimeout(() => {
        $$('[srcset][sizes="1px"]').forEach((image) => {
            observer.observe(image);
        });
    }, 250);
});

This is triggered when you dispatch an event after your data has loaded (e.g. in the callback for a successful axios request):

window.dispatchEvent(new CustomEvent('data:loaded'));