cncf/cncf.io

☁️♮🏛🚧 The CNCF.io WordPress website

CNCF.io Developer Instructions

Everyone is welcome to contribute to this project. Please follow these guidelines.

These instructions are based on you having access to the CNCF.io Pantheon account (and the CNCF.io WordPress database).

Install Local Instance

Requirements

• Install Lando (a Docker Compose utility / abstraction layer). Using Homebrew for installation is not recommended. Lando Docs. Lando includes it's own versions of PHP, Node (14.19.0), NPM.

• When setting up Lando with the Pantheon recipe it will automatically download Terminus (CLI for interaction with Pantheon). Follow all the instructions on that page to setup a machine token and SSH Authentication. Save the machine token for use in step 2 below.

• Get a GitHub personal access token to use in place of a password for performing Git operations over HTTPS.

Lando Setup

(these steps were derived from instructions provided by Pantheon)

1. Clone this repository: git clone [email protected]:cncf/cncf.io.git

• Note that the repo does not contain all of WordPress, 3rd-party themes and plugins. They will be pulled in via composer in step 4.

2. Run lando init and use the following values when prompted:

• From where should we get your app's codebase? > current working directory
• What recipe do you want to use? > pantheon
• Enter a Pantheon machine token > [enter the Pantheon token you got above]
• Which site? > cncfci

If you happen to get an error that looks like this ERROR ==> Need to give this composition a project name! then first run lando init --source pantheon. The command will fail since you already have a git repo. By running it, however, it will remember your auth for Pantheon so you won't have to enter your machine token again and the initial lando init should now work.

3. Open the .lando.yml file and add the following to the file.

keys:
  - pantheon_rsa
proxy:
  node:
    - bs.cncfci.lndo.site:3000
excludes:
  - vendor
  - /app/web/wp-content/themes/cncf-twenty-two/node_modules
services:
  node:
    type: 'node:14'
    ssl: true
    scanner: false
tooling:
  npm:
    service: node
  npx:
    service: node
  node:
    service: node
  sniff:
    service: appserver
    cmd: /app/vendor/bin/phpcs -ns
  fix:
    service: appserver
    cmd: /app/vendor/bin/phpcbf -s
  warnings:
    service: appserver
    cmd: /app/vendor/bin/phpcs -s
  debug:
    service: appserver
    cmd: 'touch /app/web/wp-content/debug.log && tail -f /app/web/wp-content/debug.log'
    description: 'Get real-time WP debug log output'
  paths:
    service: appserver
    cmd: "/app/vendor/bin/phpcs -i"
    description: "See sniff paths"

4. Run lando start and note the local site URL provided at the end of the process.

5. Run lando composer install --no-ansi --no-interaction --optimize-autoloader --no-progress to download dependencies

6. Run lando pull --code=none --files=none and follow the prompts to download the media files and database from Pantheon:

• Pull database from? > dev

7. Run this command to activate/deactivate multiple plugings that can help with local dev or are not needed for local dev. The Load Media Files from Production plugin will load media from the production server instead of needing to download them locally:

lando wp plugin activate debug-bar && lando wp plugin activate query-monitor && lando wp plugin deactivate shortpixel-image-optimiser && lando wp plugin deactivate pantheon-advanced-page-cache && lando wp plugin activate load-media-from-production

8. You will need to compile the theme css/js before the site will render correctly:

   1. Go to the theme directory: cd web/wp-content/themes/cncf-twenty-two
   2. Install the Node.js dependencies: lando npm install
   3. Compile the files: lando npm run build

9. Visit the local site URL saved from above. To find it again run lando info.

10. In the admin you will need to edit the Search & Filter settings. The full url to the result pages are hardcoded in the "Display Results" of each filter. These will need to be set to the correpsonding local instance url.

11. Get your browser to trust the Lando SSL certificate by following these instructions. This step isn't essential but will stop you having to keep bypassing the privacy warning in your browser.

Notes

• You can stop Lando with lando stop and start it again with lando start. You can turn it off completely with lando poweroff

• Composer, Terminus, npm and wp-cli commands should be run in Lando rather than on the host machine. This is done by prefixing the desired command with lando. For example, after a change to composer.json, run lando composer update rather than composer update.

• Repeat steps 6 and 7 above to download a fresh copy of the database.

---

Theme Development

To activate Browsersync to watch files, run lando npm start in the theme directory. You will then be able to browse the bs.* url listed previously and see the site auto-update whenever there is a change in the underlying source code.

---

Code Sniffs

The CI process will sniff the code to make sure it complies with WordPress coding standards. All Linux Foundation code should comply with these guidelines.

phpcs and the WordPress Coding Standards for PHP_CodeSniffer come as part of the repo and are installed in the vendor directory by composer.

You can get a report of required fixes on your code by running lando sniff and you can automatically fix some required changes by running lando fix. You can see warnings by running lando warnings.

The commands are setup to use WordPress Coding Standards and to run on the wp-content/themes/ directory as well as on custom plugins. This is controlled by the phpcs.xml file.

It's even more convenient to install into your IDE.

Since the cncf.io repo includes phpcs via Composer, your IDE should use that version of the binary even though you may have phpcs installed system-wide.

---

Upgrading WordPress core, themes and plugins

The dependencies of this project are managed by Composer. All dependencies of the project are set in composer.json and are pulled in at deploy time according to what is set in composer.lock.

composer.lock is generated from composer.json only when explicitly calling the lando composer update function. Any additional themes or plugins can be added first to composer.json and then lando composer update is run to update composer.lock and pull in the new files. Dependencies are pegged to a version according to the composer versioning rules.

It's good practice to keep WordPress and all plugins set at their latest releases to inherit any security patches and upgraded functionality. Upgrading to a new version, however, sometimes has unintended consequences so it's critical to run all tests before deploying live.

Refreshing external data

The following cron jobs are programmed to pull in data from remote sources for use in the website.

lf_sync_projects
lf_sync_ktps
lf_sync_kcds

To trigger fresh data locally, you can run:

lando wp cron event run lf_sync_kcds

or for remote triggering on a specific environment:

lando terminus wp cncfci.live -- cron event run lf_sync_kcds

To trigget all cron jobs, for example:

lando terminus wp cncfci.dev -- cron event run --all

For other data we use transients to store data:

cncf_homepage_metrics
cncf_whoweare_metrics
cncf_latest_endusers
tech_radars
cncf_project_maturity_data
cncf_eu_playlist
cncf_member_playlist

These can be deleted locally using:

lando wp transient delete cncf_project_maturity_data

These can be deleted remotely using:

lando terminus wp cncfci.dev transient delete cncf_homepage_metrics

cncf.io's Issues

Hide Recaptcha badge on SB profile page

Is there a reason you commented this line out? The recaptcha badge is now showing on the SB profile pages.

Consider a different layout for the Projects page

I understand the desire to explain the "maturity levels", but if feels quite odd that the actual graduated projects are below the fold on this page. The page feels more like and ad for Crossing the Chasm book. Below is how it looks on my screen.

Upgrade wp coding standards

wp-coding-standards is now up to 2.2.0.

Migrate Speakers

Have Marco do a code review

Like we did for LFEvents, have Marco do a code review towards the end of the dev cycle.

Latest Jobs Gutenberg Block

Write a Gutenberg block to be used for Latest Jobs section of the cncf homepage.

Note: Group this with other Gutenberg blocks in the same plugin so we can have all css/js in one file for the plugin and any other performance benefits. Actually, please keep this as a separate plugin.

Countup Gutenberg Block

Write a Gutenberg block to be used for the countup facts section of the cncf homepage. Make it configurable the way the current one is. Also allow for no icon to be set.
Don't include the flip-on-hover animation on the icons.

Note: Group this with other Gutenberg blocks in the same plugin so we can have all css/js in one file for the plugin and any other performance benefits. Actually, please keep this as a separate plugin.

Style Speakers Bureau form notifications

Try submitting the registration form, for example, to see this message:

Other key forms:

• speaker contact form
• form for updating your profile

Fix the z-index on the speakers bureau cog

It is showing on top of the topnav:

Add favicon in a similar way to how we've done it on events.linuxfoundation.org

There we used https://realfavicongenerator.net/

Redesign Services for Projects page

As discussed, please come up with an improved mockup for the Services for Projects page.

Redesign blog listing

Redesign this page. Originally posted here.

Make the listing more engaging with featured images etc. Blog posts will need featured images to be assigned. If there's no featured image, we could use a default image.

Customize the Speakers Bureau Profiles

I have setup a profile.php file for you to modify the design of the profiles.

Create a vscode settings file with code sniffs etc.

Figure out architecture for Speakers Bureau

Consider not using ultimate member and using CPTs for speakers instead. See this.

Hide Speakers contact form when they are editing their profile

Edit a speakers profile and make it so the contact form on the right disappears when editing. It'd be nice if the remaining profile fields fill the full width.

Format tables in posts

There's a table part-way down this post. On the dev site it doesn't have formatting. Could we add some styles?

Deleting unpublished drafts

If unpublished drafts continue to accumulate after we launch, come up with a strategy for automatically deleting them.

Make case studies more prominent on cncf.io

Currently, we publish the case study and then write a blog.
Julie and I were talking, we don't feel the blog is driving the traffic to the case study.

We'd like to see another way to highlight case studies. Perhaps embedded in text in the site. A banner on the home page for highlighted case study.

Can the case studies have tags so they are automatically pulled into other applicable pages?

... ideas

Automate weekly email of speakers bureau data

Requested by Kim.

Go-live

Run the following on my local instance and then push up to dev:

Setup

• freeze cncf.io edits
• start with a completely clean db

CPT migration

• export cncf.io objects into xml files
• import the import template from here and run each of them using the All Import plugin
• perform the manual steps necessary to copy over the remaining data

Speakers migration

• install the premium version of the import/export plugin on both old and new sites; for both sites, I can do it locally, as long as I grab the live cncf.io db in my local instance
• export all "speakers" from old site; include meta info
• import all "speakers" to new site; include meta info
• copy the uploads/ultimate-member directory containing all profile images

Push to Dev

• lando push --code=none
• terminus remote:wp cncfci.dev -- search-replace "://cncfci.lndo.site" "://dev-cncfci.pantheonsite.io" --all-tables --verbose

Cleanup

• remove both import/export plugins from new site

Turn off click functionality in desktop topnav

When I click on a topnav menu it stays open even when I move away from it so you can potentially have this:

Would it be better to just not have a click behavior?

Change url structure for post categories

We want the following url structure for our posts:

• https://www.cncf.io/announcements/...
• https://www.cncf.io/news/...
• https://www.cncf.io/blog/...

I looked for a way to do this in our SEO plugin but couldn't find one. You mentioned there is some code you could insert to achieve this instead.

Write migrations

Write in a way that they can be run multiple times.

SVG formatting in posts

Is it possible to make the SVGs in this post look larger like it is here. In other posts they look fine so this may be an edge-case that will require manual intervention.

More padding for old code blocks

Some of the existing code blocks could use some more padding around them. Others already have an adequate amount of padding.

Review all emails that are sent for CNCF and update design

After we launch the new site, we should audit all regular emails sent out by CNCF, like the "CNCF webinars this week" email, and update the design to use the new design patterns from cncf.io.

• Audit and list all emails sent out by CNCF
• Pick which ones are most in need of a design lift and get approval from key stakeholders
• Design and implement better designs

Implement spotlight program

Specification is here.

See if it's possible to auto-generate the social cards so Alex doesn't have to make them by hand.

Implement forms to post to Salesforce

Forms being tracked here.

Image processing options analysis

Analyze options for a 3rd party image processing solution. Come up with a recommendation.

Also include the option of rolling our own with an estimate of how long that would take. Dan is open to that option, especially if it can integrate with SVG Autocrop which was developed by CNCF.

Add an external link to the hello bar link

I've set the link in the hello bar to open in a new tab. Can you make an external link show up here as you've done in the footer links?

Setup Percy tests

Tests are currently commented out here.

Install Percy now instead of Wraith. Percy can only be linked to one github account so try using Percy without the github link. The support said this:

Unfortunately there aren't any good workarounds for this and work to enable this feature hasn't been planned yet (it's still just a feature request). Right now the GitHub integration can only map GitHub orgs to Percy orgs 1:1.
​
The GitHub integration isn't required to use Percy, but it is nice to have the status checks on commits & PRs. If you wanted to, you could setup a webhook handler that would POST to GitHub to add those status checks to the other organization repos that can't be linked.

Populate sheet with all Project data

Fill out this sheet with all project data that is on the live site. We will be using it to import to the new site. Add all projects from these places:

• Graduated and Incubating Projects
• Sandbox Projects
• Archived Projects

Pick out a color palette for styling blocks on the site

Gutenberg allows us to set a default color palette for styling blocks in the editor. For the events site, we used the following palette:

$palette = array(
			'dark-fuschia' => '#6e1042',
			'dark-violet' => '#411E4F',
			'dark-indigo' => '#1A267D',
			'dark-blue' => '#17405c',
			'dark-aqua' => '#0e5953',
			'dark-green' => '#0b5329',

			'light-fuschia' => '#AD1457',
			'light-violet' => '#6C3483',
			'light-indigo' => '#4653B0',
			'light-blue' => '#2874A6',
			'light-aqua' => '#148f85',
			'light-green' => '#117a3d',

			'dark-chartreuse' => '#3d5e0f',
			'dark-yellow' => '#878700',
			'dark-gold' => '#8c7000',
			'dark-orange' => '#784e12',
			'dark-umber' => '#6E2C00',
			'dark-red'   => '#641E16',

			'light-chartreuse' => '#699b23',
			'light-yellow' => '#b0b000',
			'light-gold' => '#c29b00',
			'light-orange' => '#c2770e',
			'light-umber' => '#b8510d',
			'light-red'   => '#922B21',
		);

Which produces this:

Pick out colors that will work for the new cncf site.

Redesign Ambassador Page

Get requirements from Kim.

Fix this button on the SB edit profile screen

setup appdex alerts similar to how we've done on the other sites

notifications should go to me and the #wordpress-alerts channel

Automate Webinar data sync between Zoom, cncf.io and emails

Investigate with @KimMcMahon a way to automate the dissemination of webinar information between Zoom, cncf.io and emails.

Figure out best technology to implement forms

We are moving all forms to submit directly to Salesforce. Figure out the best strategy to create these forms. We could use a plugin like Gravity Forms or write the forms from scratch. The same approach will be used on the LFEvents site.

The forms we will move are being tracked here.

Research steps:

• Examine Marijana's code for phase 2 and 3 tracking to see what needs to be acommodated
• Discuss with Craig
• Discuss with @thetwopct
• Discuss with Andy

Project menu dividing lines

On the homepage the projects submenu has a line showing at the bottom of the first column. I think it'd be better not to have that line:

Weirdly, this line doesn't show on the members page:

Redesign Join page

As discussed, please come up with an improved mockup for the Join page.

Write proposal for front-end work

Give @dankohn and I a brief outline (2 or 3 paragraphs) of how you are approaching the front-end html/css/js work. What framework(s) will you use? How will you compile/minify assets? Any other technical aspects that are worth pointing out? Fonts?

Setup CPTs in MU plugin

use https://www.codeinwp.com/blog/the-wordpress-plugin-boilerplate-101/

Style the SB contact form

Now that we no longer have it in the left column it looks too wide. https://dev-cncfci.pantheonsite.io/speaker/wolmi/

Change KubeCon events

To enable easy edits and automation, change the KubeCon + CloudNativeCon events on this page.
https://www.cncf.io/community/kubecon-cloudnativecon-events/

• Image is created for each event

• Add date functionality that can be applied to each event block so events automatically are removed from the page when the event is over

• Keep the link to the external event page. Update so that link can be updated to each event block

Ideally, I would like the image blocks blank, with just the branding for the event. We would add the date and location about the event on the event page and it would be added to the image.

Have a "setup a meeting" landing page instead of hardcoding the email

It could have a form that people fill out and include the event they're interested in meeting at. Form can be requested from LF IT to post directly to SFMC. We could possibly find a way to pre-populate the Contact Us form message and use that.

Consistent of web address for case studies

On the current site, the case study page uses "case-studies"
https://www.cncf.io/newsroom/case-studies/

Individual case studies: "case-study"
https://www.cncf.io/case-study/adform_prometheus/

To help with pulling numbers from Google Analytics, can we use the same words - either "case-studies" or "case-study"

Homepage design changes

Implement various changes inspired by this document, where it makes sense. Any changes that will take a considerable amount of time we should consider postponing until after deployment.

Enable code blocks within posts

Originally posted here. Try this plugin by the same author as Post Meta Controls plugin we use.

Redesign Phippy page

As discussed, please come up with an improved mockup for the Phippy page.