automad / theme-skeleton
An Automad theme package skeleton including tutorial templates for developers
Fund package maintenance!
marcantondahmen
Ko Fi
paypal.me/marcantondahmen
Installs: 1 457
Dependents: 0
Suggesters: 0
Security: 0
Stars: 2
Watchers: 2
Forks: 2
Open Issues: 1
Language:Hack
Type:automad-package
Requires
- automad/package-installer: ^1.1 || dev-master
This package is auto-updated.
Last update: 2024-12-24 22:34:05 UTC
README
You can use this package as a package skeleton for new Automad themes. It includes all files to get you started with your own themes quickly. However there is only one single template file with a simple tree menu. While its functionality is reduced to a minimum, it covers most aspects of theme developing regarding the Automad template language. The beautiful Bulma CSS framework is used to style the template and therefore this package doesn't include any CSS or JS files.
Included Templates
This package contains these simplified templates that only serve demonstrational purposes:
- The
page.php
template represents a basic page with a navbar, a content area and a sidebar with menu. - The
pagelist.php
template contains a filterable and sortable pagelist that can be used as a skeleton for blogs or portfolios. - The
session.php
template demonstrates the usage of session variables and theset
function. - The
images.php
template provides a minimal example of how to build a gallery template.
☝️ To see those templates in action while playing around just apply them to any page in your installation!
Development Workflow
This very detailed in-depth guide describes step by step the workflow of setting up and publish a new theme using Composer. You can probaly skip some of the points in case you have been working already with Composer in the past.
☝️ This guide assumes you're familiar with Visual Code Studio and working on a system with a Bash shell or similar — like macOS or Linux. However, it is of course possible to do the same on a Windows PC — just slightly different.
The Local Package
-
It's a good practice to start developing a new package outside of the Automad packages directory. Therefore change to some directory outside of Automad where you want to develop your new theme. Let's assume you want to put your package into a directory called
dev
within your home folder.cd ~/dev
-
Create new skeleton theme in your
dev
directory using Composer.composer create-project automad/theme-skeleton my-theme
-
Change to the new theme directory and edit the
composer.json
andtheme.json
files. VS Code is used here as the editor. At least change the vendor and theme name.cd my-theme code composer.json
Also edit the name in
theme.json
.code theme.json
-
Now change to your Automad root directory. For example
~/Sites/automad-site
.cd ~/Sites/automad-site
-
Edit the
composer.json
file of the Automad installation.code composer.json
Add the following snippet to Automad's composer file (note the path to your package).
{ ... "repositories": [ { "type": "path", "url": "~/dev/my-theme" } ], ... }
-
Still in the Automad directory run the following Composer command.
composer require my-vendor/my-theme:@dev
Now your theme is available in Automad and you can start developing your templates. After all the setup it's now time to create a repository for your theme.
Create a Git Repository
When developing is done, it's time to publish your work.
-
Init new Git repository and commit files.
cd ~/dev/my-theme git init git add . git commit -m "First commit"
-
Create a first release tag for your finished theme following the semantic versioning scheme.
git tag -a 1.0.0 -m "my version 1.0.0"
-
Create a new repository on GitHub.
-
Now, add its URL as a remote to your local repository and push changes. When creating a repository, the URL will be printed on the GitHub page.
git remote add origin /remote/URL/of/your/new/repo git push -u origin master
Register Your Package
Now it's time to submit your theme package to Packagist. After succseffuly registering it, it will automatically show up in the package browser.
Cheat Sheets
In case you prefer to start developing a theme or extension without reading the full documention, the Cheat Sheets are a good point to start.