About thephp.foundation

The PHP Foundation website is a static site built using Sculpin, a PHP-based static site generator, and styled with Tailwind CSS. It serves as the official online hub for the PHP Foundation, featuring a blog for updates, informational pages, and community integration. The structure supports two main content types: pages for static content with permanent links and posts for blog entries that appear on the blog landing page and in the site feed. Blog posts are authored in Markdown with YAML frontmatter, requiring specific formatting for titles, authors, and publication dates. Images are stored in organized year-based directories and referenced by full path. The site facilitates community engagement by connecting blog posts to Reddit discussion threads through a manual submission process. Development requires PHP 8.3 or later, Composer, and Node 20. CSS is generated dynamically from HTML classes rather than being included in the source tree, necessitating a build step using Tailwind. Developers can utilize Sculp

t

Published by

thephpf

Visit View Profile

README.md

View on GitHub

thephp.foundation website

This is the source code for the website of thephp.foundation. It is built using the PHP static-site generator Sculpin, and uses Tailwind CSS for design and layout.

Submitting blog posts

Creating content

To submit a blog post, create a pull request, adding a new file under source/_posts/ in the format {4-digit Year}-{2-digit Month}-{2-digit Day}-{dash-separated title}.md. All posts are written using Markdown with frontmatter YAML, and should have the following general format:

---
title: Title for the post
layout: post
tags:
    - update
author:
  name: Your name
  url: A URL with information on you
published_at: DD Month YYYY
---
Markdown content starts here - no header title needed

Adding images

Images for the post should be saved in post-images/YEAR/folder_for_your_post and referenced with the full path for the image to render properly on the website.

Previewing and publishing your post

After your PR is created, you (or someone else) can preview your post by adding the safe to preview label to the PR. This will trigger deployment to a testing server, and the PR can be merged once checked. It's important to preview both on desktop and a mobile device before merging.

Adding to Reddit

We are using redditify to connect Reddit threads to individual PHPF blog posts, but it is a manual step to open the thread on Reddit. You will need to click the "Discuss on Reddit" button at the bottom of the page, which will take you to Reddit. A post with the title and link to post will be pre-filled, so you can just submit as-is. Comments on that thread will then show up at the bottom of the blog post.

Developing/maintaining the site

Requirements

To develop the website, you will need:

PHP 8.3 or later
Composer
Node 20 with NPM

Installing dependencies

Install PHP dependencies using Composer:

$ composer install

Install CSS dependencies using NPM:

$ npm install

Build the CSS

The site CSS is intentionally omitted from the source tree, as it is built using Tailwind from HTML classes. As such, you will need to build the CSS before initial testing:

$ npx tailwind -i assets/css/app.css -o source/assets/css/app.css

Testing the site

Content changes

You can start the Sculpin development server using the following within a terminal:

$ ./vendor/bin/sculpin generate --watch --server

This will launch the server at https://localhost:8000

As you make content changes and save them, the server will regenerate pages automatically, allowing you to preview in your browser.

When done, press Ctrl-C.

CSS/Design changes

If you are making any design changes, including adding HTML class attributes, you should run the Tailwind watcher; this ensures a page refresh will pick up any CSS changes. Invoke the watcher in a terminal as follows:

$ npx tailwind -i assets/css/app.css -o source/assets/css/app.css --watch

When done, press Ctrl-C.

The primary CSS file is kept in assets/css/app.css, and contains a number of overrides for common HTML tags; this is done so that rendered Markdown can remain styled. All other styles are derived from CSS classes; see the Tailwind CSS documentation for details on what classes you can compose to achieve different design goals.

Content Types

This site has two Sculpin content types:

pages (under source/_pages/)
posts (under source/_posts/)

Pages are one-off pages with a static permalink.

Posts are blog posts, and will show up on the /blog page as well as in the site feed.

Top-level pages

The site defines two top-level pages:

index.html: The site landing page.
blog.html: The blog landing page.

Deployment

The deployment workflow auto-deploys to gh-pages on a push to the main branch.

thephp.foundation