A Hugo theme designed similarly to MyAnimeList, but for any general ranked personal list. A static site reimplementation of PersonalLists.
Go to file
Matthew Barnes 11626c0a7a
Add URI fragments to list states
2023-06-25 15:23:48 +01:00
archetypes Tweak list and entry archetypes to include states 2023-06-13 23:11:52 +01:00
assets/css Cleaned up styling 2023-05-14 18:36:28 +01:00
layouts Add URI fragments to list states 2023-06-25 15:23:48 +01:00
static Add favicon 2023-05-20 13:14:57 +01:00
.gitignore Add TailwindCSS dependency 2023-05-13 23:54:10 +01:00
LICENSE Initial commit 2023-05-08 12:33:19 +00:00
README.md Add note about empty score fields 2023-06-14 00:16:18 +01:00
logo.jpg Add logo and screenshots 2023-05-20 13:57:06 +01:00
package-lock.json Add DaisyUI dependency 2023-05-13 23:54:10 +01:00
package.json Add DaisyUI dependency 2023-05-13 23:54:10 +01:00
ss1.png Add logo and screenshots 2023-05-20 13:57:06 +01:00
ss2.png Add logo and screenshots 2023-05-20 13:57:06 +01:00
ss3.png Add logo and screenshots 2023-05-20 13:57:06 +01:00
ss4.png Add logo and screenshots 2023-05-20 13:57:06 +01:00
theme.toml Add default Hugo theme stuff 2023-05-08 15:00:21 +01:00

README.md

gnummikub

License: MIT

A Hugo theme designed similarly to MyAnimeList, but for any general ranked personal list. A static site reimplementation of PersonalLists.

Table of contents

Getting started

First, as a prerequisite, you must install postcss-cli and autoprefixer globally in your environment:

npm install -g postcss-cli
npm install -g autoprefixer

Next, create a new site, and add this as your Hugo theme:

hugo new site new-site
cd new-site
git submodule add https://git.matt-barnes.co.uk/mb2g17/MyAnythingList.git themes/my-anything-list
echo "theme = 'my-anything-list'" >> config.toml

Don't forget to install npm packages (such as TailwindCSS):

cd themes/my-anything-list
npm i

To get started, cd back to the site directory, and create a collection, a list, and a few entries:

cd ../..

# Collection (homepage)
hugo new --kind collection _index.md

# List
hugo new --kind list games

# Entries
hugo new games/a-hat-in-time.md
hugo new games/omori.md
hugo new games/ace-attorney.md

Now run hugo server --disableFastRender and check out your lists!

Structure of MyAnythingList

In MyAnythingList, there are three types of pages:

Collections

Collections group lists or other collections together onto one page. Typically, this is just the homepage.

To add a collection, run:

hugo new --kind collection [path]/_index.md

To simply establish the homepage, run:

hugo new --kind collection _index.md

To set the title, or 'greeting', define the greeting parameter:

---
title: "Index"
type: "collection"
greeting: "Welcome!"
---

Lists

Lists are categories of things you want to add to your site. Lists could be "Games", "Films", "Books", "Anime", etc.

To add a list, run:

hugo new --kind list [list]

# For example...
hugo new --kind list games
hugo new --kind list books
hugo new --kind list anime

You'll also want to add some states, so you can describe how far you're at with each entry. You can set this in the front matter in content/[list]/_index.md.

Here's an example list _index.md for anime:

---
title: "Anime"
type: "list"
weight: 4
states:
    - "watching"
    - "finished"
    - "to-watch"
    - "dropped"
fields:
    - name: "score"
---

A list of anime.

Entries

Entries are items that you have added to a list. Entries could be:

  • "Xenoblade Chronicles" with the "Finished" state, or
  • "One Punch Man" in the "To-Read" state.

To add entries, simply add default posts in a list:

hugo new [list]/[entry].md

# For example...
hugo new games/a-hat-in-time.md
hugo new books/the-hobbit.md
hugo new anime/death-note.md

The state of an entry is described in its front matter, in content/[list]/[entry]/_index.md.

Here's an example _index.md for a game:

---
title: "A Hat in Time"
title-url: "/a-hat-in-time.png"
state: "finished"
date: 1970-01-04T00:00:00.000Z
score: 10
platform: PC
---

Markdown review goes here

NOTE: It's possible to simply leave the score field blank, like score:. This might be useful for entries that you plan to complete, or have started but not yet finished.

Fields

By default, all entries have a name and a description field. These correspond to the post title and contents.

You may add other fields to a list and include them in the entries, such as score, year of release, ISBN number etc.

You can do this by adding field information to the front matter of a list:

---
title: "Books"
type: "list"
states:
    ...
fields:
    - name: "score"    # The name of the field
      width: 1         # The width of the table column, calculated with ratios. Optional; defaults to 1.
    - name: "isbn"
      width: 2
---

After that, you can add the fields as parameters in the front matter of the entries within the list:

---
title: "The Hobbit"
title-url: "https://en.wikipedia.org/wiki/The_Hobbit"
state: "read"
date: 2023-05-08T13:26:40+01:00
score: 8
isbn: "9780007458424"
isbn-url: "https://isbnsearch.org/isbn/9780007458424"
# ^ To hyperlink a field, add a parameter of the same name but suffixed with "-url".
---

List Ordering

You can order displayed lists in a collection by setting the weight parameter:

---
title: "Games"
type: "list"
weight: 0 # <--
states:
    ...
fields:
    - name: "score"
      width: 5
    - name: "platform"
      width: 10
---

The list with the lowest weight will appear first, and the list with the highest weight will appear last.

Theme

To set the theme of the site, set the theme parameter in your Hugo configuration file to either light or dark:

baseURL = 'https://lists.matt-barnes.co.uk/'
languageCode = 'en-us'
title = "Matt's Personal Lists"
theme = 'my-anything-list'

[params]
    theme = 'light' # <--

If one is not provided, the dark theme is used as default.

Screenshots

ss1
Collection view
ss2
List View
ss3
Entry View (dark)
ss4
List View (dark, mobile)