A practice project to teach myself Vue, based on a scifi series I'm working on. This provides a static site with various pages which are built and deployed via GitHub Actions.
- Home (index.html)
- Artwork. Contains carousels of different categories, as based off this page. The images will included as direct links from my main site. Subcategories on different pages:
- Timelapses. Contains embedded videos of timelapse recordings.
- Smash The Evictor's Statue! A mini webcomic in which a humanoid snake decides to vandalise a statue of Saint Patrick.
- Stories. These will be displayed as embedded PDFs, with one caveat: mobile browsers may not be able to render the PDFs as-is. As a fallback, they will display the first few paragraphs and a link to download it instead. Any story that doesn't go into a specific collection will be visible here.
- Collections. Stories grouped by category. These will, where possible, contain a download link from BuyMeACoffee.
- The Cruagh Island Affair.
- Tales From a Fomorian Detention Centre.
- Spycrabs & Warbirds.
Vue is based around the concept of defining Single File Components. This allows developers to split the user interface into independent, reusable pieces (much like server-side includes). This repo currently uses the following:
- Navigation bar
- Components
- Slideshow. Displays a carousel of images.
- PdfSlideshow. Originally used just to display PDFs; extended to include videos as well.
- AuthorsNotes. Small end-sections on various categories.
- Stories components. Broken down by category.
- Footer. Contains social media links.
- Vue Splide - a Vue package for slide decks.
- Bunchló Gael font - originally created by Vincent Morley in 1996.
- Mastodon icon
- Twitter icon
There are a few ways to run this:
npm run dev. This runs a local build for development work, and will be exposed on port 3000. This will be exposed to the outside so that mobile browsers can view it during development.npm run build. This creates a production build inside the dist/ folder.npm run preview. Runs a preview of the production site. This will be exposed to the outside on port 4173 so that mobile devices can view it.npm run deployLocally. Chains the build and preview commands.
This uses the GitHub Pages action posted here to build the site using Vite and then deploy from a separate branch (gh-pages). This does not happen on main due to branch protection rules.
The file that configures this is .github/workflows/node.js.yml.
A lot of this uses the default styling in Vue. Aside from that, the Bunchló Gael font is used to provide a suitably Irish look for this.
All code here is under the MIT licence. Third-party components as listed above may be under different licences.