Re-organise

Signed-off-by: Oliver Davies <oliver@oliverdavies.uk>
This commit is contained in:
Oliver Davies 2025-09-25 21:52:45 +01:00
parent 34a2740106
commit 6891a7517a
440 changed files with 0 additions and 16 deletions

View file

@ -0,0 +1,4 @@
Building static websites with Sculpin
#####################################
https://www.oliverdavies.uk/talks/building-static-websites-sculpin

View file

@ -0,0 +1,5 @@
---
name: oliverdavies.uk
menu_links:
- { title: Home, href: / }
- { title: About, href: /about }

View file

@ -0,0 +1,10 @@
---
title: My Daily Email Archive
layout: default
use:
- daily_email
---
{% for email in data.daily_emails %}
<p>{{ email.title }}</p>
{% endfor %}

View file

@ -0,0 +1,12 @@
---
...
testimonials:
- { name: ..., role: ..., text: ..., url: ... }
- { name: ..., role: ..., text: ..., url: ... }
- { name: ..., role: ..., text: ..., url: ... }
---
{% for testimonial in page.testimonials %}
<h2>{{ testimonial.name }} - {{ testimonial.role }}</h2>
<p>{{ testimonial.text }}</p>
{% endfor %}

View file

@ -0,0 +1,5 @@
---
layout: post
title: New blog post
draft: yes
---

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

View file

@ -0,0 +1,6 @@
---
layout: default
title: Hello!
---
Hello, World!

View file

@ -0,0 +1,11 @@
{# source/_layouts/base.html.twig #}
<!DOCTYPE html>
<html lang="{{ site.locale|default('en') }}">
<head>
<title>{{ site.name|default('Sculpin Skeleton') }}</title>
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>

View file

@ -0,0 +1,7 @@
{# source/_layouts/page.html.twig #}
{% extends 'base' %}
{% block body %}
{% block content %}{% endblock %}
{% endblock %}

View file

@ -0,0 +1,13 @@
app/
config/
sculpin_kernel.yml
sculpin_site.yml
composer.json
composer.lock
output_dev/
output_prod/
source/
_includes/
_templates/
index.md
vendor/

View file

@ -0,0 +1,8 @@
{{ 'today' }}
{{ 'today'|date }}
{{ 'today'|date('Y') }}
{{ 'today'|date('Y') - 2007 }} # 18 (years of experience)

View file

@ -0,0 +1,24 @@
---
title: Building Static Websites with Sculpin
events:
- name: PHP Berkshire
date: 2024-08-28
location: Reading, UK
url: https://www.meetup.com/php-berkshire/events/301850284
- name: BrumPHP
date: 2024-05-23
location: Birmingham, UK
url: https://www.eventbrite.com/e/brumphp-23rd-may-2024-tickets-803037766577
---
// end yaml
// start twig
{% set talkCount = 0 %}
{% for talk in data.talks %}
{% for event in talk.events if 'today'|date('U') >= event.date|date('U') %}
{% set talkCount = talkCount + 1 %}
{% endfor %}
{% endfor %}
<p>I have given {{ talkCount }} talks.</p>

View file

@ -0,0 +1,15 @@
{% set talks = site.talks|filter(talk => talk.speaker == page.name) %}
{% if talks is not empty %}
<section>
<h2>Talks by {{ page.name }}</h2>
<div>
<ul>
{% for talk in talks %}
<li><a href="#0">{{ talk.title }}</a></li>
{% endfor %}
</ul>
</div>
</section>
{% endif %}

View file

@ -0,0 +1,8 @@
- Adding a new page (`/talks`)
- Adding a new menu link
- Adding a new content type (talks)
- Add a new talk
- Show how to use page-level variables, adding events to a talk
- Adding the talks page to the menu
- Active menu link styling?
- Generating a production version of the site

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 KiB

View file

@ -0,0 +1,723 @@
Building static websites with Sculpin
#####################################
|
.. class:: titleslideinfo
Oliver Davies
.. raw:: pdf
PageBreak imagePage
.. image:: images/druplicon.png
:width: 10cm
.. raw:: pdf
PageBreak
TextAnnotation "I primarily work with Drupal and have been a Drupal developer since 2007/8."
TextAnnotation "Drupal, WordPress, etc need PHP and a database to run."
TextAnnotation "Difficult for new Developers."
TextAnnotation "Complex for personal projects."
TextAnnotation "Hosting can be expensive."
.. image:: images/sculpin.png
:width: 10cm
.. raw:: pdf
TextAnnotation "Sculpin - a static site generator written in PHP."
TextAnnotation "Not a Sculpin vs. x talk, but I'll make comparisons and comments based on my own experience."
PageBreak
What is a static website?
=========================
.. code::
.htaccess
assets/images/od-logo.jpg
bco/index.html
build/tailwind.css
call/index.html
daily/2024/03/18/automated-drupal-11-compatibility-fixes/index.html
drupal-upgrade/index.html
favicon.ico
index.html
podcast/19-sam-mortenson/index.html
pricing/index.html
talks/taking-flight-with-tailwind-css/index.html
talks/tdd-test-driven-drupal/index.html
.. raw:: pdf
TextAnnotation "Before I talk about static site generators, let's talk about static websites."
TextAnnotation "Some of the files from my website."
TextAnnotation "HTML, CSS, JS. No PHP or server-side code."
TextAnnotation "How I started building websites."
TextAnnotation "The things you usually have a CMS or framework generate."
What is Sculpin?
================
* Static site generator.
* Developed by Beau Simensen.
* Maintained by Kevin Boyd (beryllium).
* CLI tool.
* Built on Symfony components.
* Markdown + Twig = Static HTML.
.. raw:: pdf
TextAnnotation "Uses various Symfony components - Console, config, DI, Filesystem, Finder, HttpKernel, YAML."
TextAnnotation "Uses Twig - Symfony's templating language."
TextAnnotation ""
TextAnnotation "Transforms markdown files and Twig templates into static HTML websites, 'generates' a static website that can easily be deployed."
Why use a static site generator?
================================
- Rapid development.
- Templating.
- Security.
- Performance.
- Easy and cheap to host.
- Fun vs. work.
.. raw:: pdf
TextAnnotation "Leveraging templating features, such as conditionals, loops, partials and includes, template inheritance."
TextAnnotation "Static websites are fast and secure as they don't have a database and only need a simple hosting environment with a basic web server."
TextAnnotation "Works with a simple Apache, Nginx or Caddy server, or with services like Vercel and Netlify."
What do I use it for?
=====================
* My personal website.
* Some client websites.
* HTML prototypes and testing.
* Learning YAML and Twig (and some Symfony).
Installation
============
``composer require sculpin/sculpin``
|
``composer create-project sculpin/blog-skeleton my-blog``
|
``composer create-project opdavies/sculpin-skeleton my-site``
Using Sculpin
=============
* Configuration in ``app/config``
* Source files in ``source``.
* Templates in ``source/_templates`` or ``source/_layouts``.
* Includes in ``source/_includes`` or ``source/_partials``.
.. raw:: pdf
PageBreak
.. code-block::
:include: ./code/project-structure.txt
.. raw:: pdf
TextAnnotation "The file structure of a Sculpin project."
PageBreak
.. code-block:: bash
:include: ./code/project-structure.txt
:hl_lines: 5,6,13
.. raw:: pdf
TextAnnotation "PHP-based project."
PageBreak
.. code-block:: bash
:include: ./code/project-structure.txt
:hl_lines: 1,2,3,4
.. raw:: pdf
TextAnnotation "Configuration."
PageBreak
.. code-block:: shell
:include: ./code/project-structure.txt
:hl_lines: 9,10,11,12
.. raw:: pdf
TextAnnotation "Source files."
PageBreak
.. code-block:: bash
:include: ./code/project-structure.txt
:hl_lines: 7,8
.. raw:: pdf
TextAnnotation "Output directories with generated files."
Generate a site
===============
* ``vendor/bin/sculpin generate``
* ``--server``
* ``--watch``
* ``--env``
source/index.md
===============
.. code-block::
:include: code/index.md.txt
source/index.md
===============
.. code-block:: bash
:include: code/index.md.txt
:hl_lines: 1,2,3,4
source/index.md
===============
.. code-block:: bash
:include: code/index.md.txt
:hl_lines: 2
source/index.md
===============
.. code-block:: bash
:include: code/index.md.txt
:hl_lines: 3
source/index.md
===============
.. code-block:: bash
:include: code/index.md.txt
:hl_lines: 6
output_dev/index.html
=====================
.. code-block:: html
:include: ./code/index.html.txt
output_dev/index.html
=====================
.. code-block:: html
:include: ./code/index.html.txt
:hl_lines: 4
output_dev/index.html
=====================
.. code-block:: html
:include: ./code/index.html.txt
:hl_lines: 7
Configuration
=============
- Stored in ``app/config``
- ``sculpin_site.yml``
- ``sculpin_site_{env}.yml``
- Key-value pairs
|
.. code-block:: yaml
:include: code/configuration.txt
Using on pages
==============
.. code-block:: html
<!DOCTYPE html>
<html>
<head>
<title>{{ site.name }}</title>
</head>
</html>
YAML front matter
=================
.. code-block:: yaml
:include: ./code/front-matter1.txt
YAML front matter
=================
.. code-block:: yaml
:include: ./code/front-matter1.txt
:hl_lines: 2
YAML front matter
=================
.. code-block:: yaml
:include: ./code/front-matter1.txt
:hl_lines: 3
YAML front matter
=================
.. code-block:: yaml
:include: ./code/front-matter1.txt
:hl_lines: 4
.. raw:: pdf
TextAnnotation "Draft pages aren't generated when env=prod".
More front matter
=================
.. code-block:: yaml
:hl_lines: 5,6,7,8
---
layout: post
title: New blog post
draft: yes
tags:
- drupal
- php
- sculpin
---
Even more front matter
======================
.. code-block:: yaml
:hl_lines: 9,10
---
layout: post
title: New blog post
draft: yes
tags:
- drupal
- php
- sculpin
tweets: yes
foo: bar
---
Using on pages
==============
.. code-block:: twig
:include: ./code/front-matter-on-pages.txt
.. raw:: pdf
PageBreak
Using on pages
==============
.. code-block:: bash
:include: ./code/front-matter-on-pages.txt
:hl_lines: 3
.. raw:: pdf
PageBreak
Using on pages
==============
.. code-block:: bash
:include: ./code/front-matter-on-pages.txt
:hl_lines: 4,5,6
.. raw:: pdf
PageBreak
Using on pages
==============
.. code-block:: bash
:include: ./code/front-matter-on-pages.txt
:hl_lines: 9,12
.. raw:: pdf
PageBreak
Using on pages
==============
.. code-block:: bash
:include: ./code/front-matter-on-pages.txt
:hl_lines: 10
Using on pages
==============
.. code-block:: bash
:include: ./code/front-matter-on-pages.txt
:hl_lines: 11
.. raw:: pdf
TextAnnotation "`page.` instead of `site.`."
Layouts
=======
.. code-block:: twig
:include: ./code/layout-base.txt
Layouts
=======
.. code-block:: twig
:include: ./code/layout-base.txt
:hl_lines: 4,6
Layouts
=======
.. code-block:: twig
:include: ./code/layout-base.txt
:hl_lines: 9
Layouts
=======
.. code-block:: twig
:include: ./code/layout-page.txt
Layouts
=======
.. code-block:: twig
:include: ./code/layout-page.txt
:hl_lines: 3
Layouts
=======
.. code-block:: twig
:include: ./code/layout-page.txt
:hl_lines: 5,7
Layouts
=======
.. code-block:: twig
:include: ./code/layout-page.txt
:hl_lines: 6
Includes
========
.. code-block:: twig
{% include 'about-author' with {
avatar: site.avatar,
work: site.work,
} only %}
{% for link in links %}
{% include 'menu-link' with { link } only %}
{% endfor %}
Content types
=============
.. code-block:: yaml
# app/config/sculpin_kernel.yml
sculpin_content_types:
daily_emails:
permalink: daily/:slug_title/
.. raw:: pdf
TextAnnotation "A way to segregate content into different types - e.g. pages, talks, daily emails. Something that was familiar from working with Drupal."
Accessing custom content types
==============================
.. code-block:: yaml
:include: ./code/content-types.txt
Accessing custom content types
==============================
.. code-block:: yaml
:include: ./code/content-types.txt
:hl_lines: 4,5
Accessing custom content types
==============================
.. code-block:: yaml
:include: ./code/content-types.txt
:hl_lines: 8,9,10
.. raw:: pdf
PageBreak titlePage
.. class:: centredtitle
Making things more dynamic
.. raw:: pdf
PageBreak standardPage
.. code-block:: twig
:include: ./code/twig-1.txt
:hl_lines: 1
.. raw:: pdf
TextAnnotation "'today' as a string."
PageBreak
.. code-block:: twig
:include: ./code/twig-1.txt
:hl_lines: 3
.. raw:: pdf
TextAnnotation "Current date as a string."
PageBreak
.. code-block:: twig
:include: ./code/twig-1.txt
:hl_lines: 5
.. raw:: pdf
TextAnnotation "Current year."
PageBreak
.. code-block:: twig
:include: ./code/twig-1.txt
:hl_lines: 7
.. raw:: pdf
PageBreak
.. code-block:: twig
---
title: Daily Email Archive
use: [daily_emails]
---
This is an archive of the {{ data.daily_emails|length }}
email messages I have sent to my daily email list
since the 12th of August, 2022.
|
|
This is an archive of the 775 email messages I have sent to my daily email list since the 12th of August, 2022.
.. raw:: pdf
TextAnnotation "Get the emails via their content type and use the `length` filter to get the number of emails."
PageBreak
.. code-block:: php
:include: ./code/twig-2.txt
:end-before: // end yaml
.. raw:: pdf
PageBreak
.. code-block:: twig
:include: ./code/twig-2.txt
:start-after: // start twig
.. raw:: pdf
PageBreak
.. code-block:: twig
:include: ./code/twig-2.txt
:start-after: // start twig
:hl_lines: 1
.. raw:: pdf
PageBreak
.. code-block:: javascript
:include: ./code/twig-2.txt
:hl_lines: 3,7
:start-after: // start twig
.. raw:: pdf
TextAnnotation "Get each talk from the talk content type."
PageBreak
.. code-block:: twig
:include: ./code/twig-2.txt
:start-after: // start twig
:hl_lines: 4,6
.. raw:: pdf
PageBreak
.. code-block:: twig
:include: ./code/twig-2.txt
:start-after: // start twig
:hl_lines: 5
.. raw:: pdf
PageBreak
.. code-block:: twig
:include: ./code/twig-2.txt
:start-after: // start twig
:hl_lines: 9
.. raw:: pdf
PageBreak
.. code-block:: javascript
:include: ./code/twig-3.txt
.. raw:: pdf
PageBreak
.. code-block:: javascript
:include: ./code/twig-3.txt
:hl_lines: 1,3,15
.. raw:: pdf
PageBreak
.. code-block:: javascript
:include: ./code/twig-3.txt
:hl_lines: 5
.. raw:: pdf
PageBreak
.. code-block:: javascript
:include: ./code/twig-3.txt
:hl_lines: 9,11
.. raw:: pdf
PageBreak
.. code-block:: javascript
:include: ./code/twig-3.txt
:hl_lines: 10
.. raw:: pdf
PageBreak titlePage
.. class:: centredtitle
Demo
.. raw:: pdf
PageBreak standardPage
Extending Sculpin
=================
.. code-block:: yaml
# app/config/sculpin_kernel.yml
...
services:
App\TwigExtension\TalkExtension:
tags:
- { name: twig.extension }
.. raw:: pdf
PageBreak imagePage
.. image:: images/packagist.png
:width: 22cm
.. raw:: pdf
PageBreak standardPage
.. code-block:: php
:startinline: true
// app/SculpinKernel.php
use Opdavies\Sculpin\Bundle\TwigMarkdownBundle\SculpinTwigMarkdownBundle;
use Sculpin\Bundle\SculpinBundle\HttpKernel\AbstractKernel;
final class SculpinKernel extends AbstractKernel
{
protected function getAdditionalSculpinBundles(): array
{
return [
SculpinTwigMarkdownBundle::class,
];
}
}
Thanks!
=======
References:
|
* https://sculpin.io
* https://github.com/sculpin/sculpin
* https://code.oliverdavies.uk/opdavies/sculpin-demo
* https://code.oliverdavies.uk/opdavies/oliverdavies.uk
|
Me:
* https://www.oliverdavies.uk
* ``@opdavies@mastodon.social``