opdavies/talks
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Update for BrumPHP

Browse source
This commit is contained in:
Oliver Davies 2024-05-23 17:09:30 +01:00
parent cb4b396577
commit 6f53f8c026
12 changed files with 551 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/building-static-websites-sculpin/code/configuration.txt
View file

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

11
src/building-static-websites-sculpin/code/content-types.txt Normal file
View file

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

12
src/building-static-websites-sculpin/code/front-matter-on-pages.txt Normal file
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 %}

7
src/building-static-websites-sculpin/code/front-matter1.txt Normal file
View file

@ -0,0 +1,7 @@
---
layout: post
title: New blog post
draft: yes
---
# My new blog post

9
src/building-static-websites-sculpin/code/index.html.txt Normal file
View file

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

11
src/building-static-websites-sculpin/code/layout-base.txt Normal file
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>

7
src/building-static-websites-sculpin/code/layout-page.txt Normal file
View file

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

14
src/building-static-websites-sculpin/code/project-structure.txt Normal file
View file

@ -0,0 +1,14 @@
.
├── app
│   ├── config
│   │   ├── sculpin_kernel.yml
│   │   └── sculpin_site.yml
├── composer.json
├── composer.lock
├── output_dev
├── output_prod
├── source
│   ├── _includes
│   ├── _templates
│   └── index.md
└── vendor

7
src/building-static-websites-sculpin/code/twig-1.txt Normal file
View file

@ -0,0 +1,7 @@
{{ 'today' }}
{{ 'today'|date }}
{{ 'today'|date('Y') }}
{{ 'today'|date('Y') - 2007 }} # 17

26
src/building-static-websites-sculpin/code/twig-2.txt Normal file
View file

@ -0,0 +1,26 @@
---
title: Building Static Websites with Sculpin
events:
-
name: BrumPHP
date: 2024-05-23
location: Birmingham, UK
url: https://www.eventbrite.com/e/brumphp-23rd-may-2024-tickets-803037766577
-
name: PHP South West
date: 2024-02-14
location: Bristol, UK
url: https://www.meetup.com/php-sw/events/298880313
---
// 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>

18
src/building-static-websites-sculpin/code/twig-3.txt Normal file
View file

@ -0,0 +1,18 @@
{% set talks = site.talks|filter(talk => talk.speaker == page.name) %}
{% if talks is not empty %}
<section class="mt-10">
<h2 class="text-2xl font-bold">Talks
<span class="sr-only"> by {{ page.name }}</span></h2>
<div class="mt-6">
<ul class="pl-4 list-disc">
{% for talk in talks %}
<li>
<a class="hover:underline" href="#0">{{ talk.title }}</a>
</li>
{% endfor %}
</ul>
</div>
</section>
{% endif %}

484
src/building-static-websites-sculpin/slides.rst
View file

@ -28,16 +28,35 @@ What is Sculpin?
* Static site generator * Static site generator
* CLI tool * CLI tool
* Built on Symfony's HttpKernel * Built on Symfony components
* HTML + Markdown + Twig = Static site * 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.
- Security.
- Performance.
- Easy and cheap to host.
.. raw:: pdf
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."
What do I use it for? What do I use it for?
===================== =====================
* My personal website * My personal website.
* Some client websites * Some client websites.
* HTML prototypes and testing * HTML prototypes and testing.
* Learning YAML and Twig (and some Symfony) * Learning YAML and Twig (and some Symfony).
Installation Installation
============ ============
@ -55,8 +74,58 @@ Installation
Using Sculpin Using Sculpin
============= =============
* Configuration lives in ``app/config`` * Configuration in ``app/config``
* Source files live in ``source``. * 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:: shell
:include: ./code/project-structure.txt
:hl_lines: 6,7,14
.. raw:: pdf
TextAnnotation "PHP-based project."
PageBreak
.. code-block:: shell
:include: ./code/project-structure.txt
:hl_lines: 2,3,4,5
.. raw:: pdf
TextAnnotation "Configuration."
PageBreak
.. code-block:: shell
:include: ./code/project-structure.txt
:hl_lines: 10,11,12,13
.. raw:: pdf
TextAnnotation "Source files."
PageBreak
.. code-block:: shell
:include: ./code/project-structure.txt
:hl_lines: 8,9
.. raw:: pdf
TextAnnotation "Output directories with generated files."
Generate a site Generate a site
=============== ===============
@ -71,28 +140,78 @@ source/index.md
.. code-block:: markdown .. code-block:: markdown
:include: code/index.md.txt :include: code/index.md.txt
:linenos:
source/index.md
===============
.. code-block:: markdown
:include: code/index.md.txt
:linenos:
:hl_lines: 1,2,3,4
source/index.md
===============
.. code-block:: markdown
:include: code/index.md.txt
:linenos:
:hl_lines: 2
source/index.md
===============
.. code-block:: markdown
:include: code/index.md.txt
:linenos:
:hl_lines: 3
source/index.md
===============
.. code-block:: markdown
:include: code/index.md.txt
:linenos:
:hl_lines: 6
output_dev/index.html output_dev/index.html
===================== =====================
.. code-block:: html .. code-block:: html
:include: ./code/index.html.txt
:linenos:
<!DOCTYPE html> output_dev/index.html
<head> =====================
</head>
<body> .. code-block:: html
<p>Hello, World!</p> :include: ./code/index.html.txt
</body> :linenos:
:hl_lines: 4
output_dev/index.html
=====================
.. code-block:: html
:include: ./code/index.html.txt
:linenos:
:hl_lines: 7
Configuration Configuration
============= =============
- Stored in ``app/config`` - Stored in ``app/config``
- ``sculpin_site.yml`` - ``sculpin_site.yml``
- ``sculpin_site_{env}.yml`` - ``sculpin_site_{env}.yml``
- Key-value pairs - Key-value pairs
|
.. code-block:: yaml .. code-block:: yaml
:linenos:
:include: code/configuration.txt :include: code/configuration.txt
Using on pages Using on pages
@ -101,27 +220,52 @@ Using on pages
.. code-block:: html .. code-block:: html
<!DOCTYPE html> <!DOCTYPE html>
<html>
<head> <head>
<title>{{ site.name }}</title> <title>{{ site.name }}</title>
</head> </head>
</html>
YAML front matter YAML front matter
================= =================
.. code-block:: yaml .. code-block:: yaml
:include: ./code/front-matter1.txt
--- YAML front matter
layout: post =================
title: New blog post
draft: yes
---
# My new blog post .. code-block:: yaml
:include: ./code/front-matter1.txt
:linenos:
:hl_lines: 2
YAML front matter
=================
.. code-block:: yaml
:include: ./code/front-matter1.txt
:linenos:
:hl_lines: 3
YAML front matter
=================
.. code-block:: yaml
:include: ./code/front-matter1.txt
:linenos:
:hl_lines: 4
.. raw:: pdf
TextAnnotation "Draft pages aren't generated when ENV=prod".
More front matter More front matter
================= =================
.. code-block:: yaml .. code-block:: yaml
:linenos:
:hl_lines: 5,6,7,8
--- ---
layout: post layout: post
@ -135,12 +279,12 @@ More front matter
# My new blog post # My new blog post
Even more front matter Even more front matter
====================== ======================
.. code-block:: yaml .. code-block:: yaml
:linenos:
:hl_lines: 9,10
--- ---
layout: post layout: post
@ -160,49 +304,122 @@ Using on pages
============== ==============
.. code-block:: twig .. code-block:: twig
:include: ./code/front-matter-on-pages.txt
:linenos:
--- .. raw:: pdf
...
testimonials:
- { name: ..., role: ..., text: ..., url: ... }
- { name: ..., role: ..., text: ..., url: ... }
- { name: ..., role: ..., text: ..., url: ... }
---
{% for testimonial in page.testimonials %} PageBreak
<h2>{{ testimonial.name }} - {{ testimonial.role }}</h2>
<p>{{ testimonial.text }}</p> Using on pages
{% endfor %} ==============
.. code-block:: bash
:include: ./code/front-matter-on-pages.txt
:linenos:
:hl_lines: 3
.. raw:: pdf
PageBreak
Using on pages
==============
.. code-block:: bash
:include: ./code/front-matter-on-pages.txt
:linenos:
:hl_lines: 4,5,6
.. raw:: pdf
PageBreak
Using on pages
==============
.. code-block:: bash
:include: ./code/front-matter-on-pages.txt
:linenos:
:hl_lines: 9,12
.. raw:: pdf
PageBreak
Using on pages
==============
.. code-block:: bash
:include: ./code/front-matter-on-pages.txt
:linenos:
:hl_lines: 10
Using on pages
==============
.. code-block:: bash
:include: ./code/front-matter-on-pages.txt
:linenos:
:hl_lines: 11
.. raw:: pdf
TextAnnotation "`page.` instead of `site.`."
Layouts Layouts
======= =======
.. code-block:: twig .. code-block:: twig
:include: ./code/layout-base.txt
{# source/_layouts/app.html.twig #} :linenos:
<!DOCTYPE html>
<html lang="{{ site.locale|default('en') }}">
<head>
<title>{{ site.name|default('Sculpin Skeleton') }}</title>
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
Layouts Layouts
======= =======
.. code-block:: twig .. code-block:: twig
:include: ./code/layout-base.txt
:linenos:
:hl_lines: 4,6
{# source/_layouts/default.html.twig #} Layouts
=======
{% extends 'app' %} .. code-block:: twig
:include: ./code/layout-base.txt
:linenos:
:hl_lines: 9
{% block body %} Layouts
{% block content %}{% endblock %} =======
{% endblock %}
.. code-block:: twig
:include: ./code/layout-page.txt
:linenos:
Layouts
=======
.. code-block:: twig
:include: ./code/layout-page.txt
:linenos:
:hl_lines: 3
Layouts
=======
.. code-block:: twig
:include: ./code/layout-page.txt
:linenos:
:hl_lines: 5,7
Layouts
=======
.. code-block:: twig
:include: ./code/layout-page.txt
:linenos:
:hl_lines: 6
Includes Includes
======== ========
@ -226,24 +443,164 @@ Content types
# app/config/sculpin_kernel.yml # app/config/sculpin_kernel.yml
sculpin_content_types: sculpin_content_types:
projects: daily_emails:
permalink: projects/:slug_title/ 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 Accessing custom content types
============================== ==============================
.. code-block:: yaml .. code-block:: yaml
:include: ./code/content-types.txt
:linenos:
--- Accessing custom content types
title: My Projects ==============================
layout: default
use:
- projects
---
{% for project in data.projects %} .. code-block:: yaml
<h2>{{ project.title }}</h2> :include: ./code/content-types.txt
{% endfor %} :linenos:
:hl_lines: 4,5
Accessing custom content types
==============================
.. code-block:: yaml
:include: ./code/content-types.txt
:linenos:
: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:: 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:: javascript
: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,18
.. raw:: pdf
PageBreak
.. code-block:: javascript
:include: ./code/twig-3.txt
:hl_lines: 5,6,10,11,12,13,14
.. page:: titlePage .. page:: titlePage
@ -298,13 +655,14 @@ Thanks!
References: References:
* https://www.oliverdavies.uk/brumphp
* https://sculpin.io * https://sculpin.io
* https://github.com/opdavies/sculpin-talk-demo * https://github.com/opdavies/phpsw-sculpin-demo
* https://github.com/opdavies/oliverdavies.uk * https://github.com/opdavies/oliverdavies.uk
* https://github.com/opdavies/docker-image-sculpin-serve
| |
Me: Me:
* https://www.oliverdavies.uk * https://www.oliverdavies.uk
* ``@opdavies``