mirror of
https://github.com/foo-dogsquared/hugo-theme-more-contentful.git
synced 2025-01-30 16:57:58 +00:00
Initial release
All of the changes should be documented in the changelog.
This commit is contained in:
Gabriel Arazas
commit
2f06fd7861
14
.editorconfig
Normal file
14
.editorconfig
Normal file
@ -0,0 +1,14 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
end_of_line = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.{css,scss,sass}]
|
||||
charset = utf-8
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
|
||||
[*.{html,js}]
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
32
.travis.yml
Normal file
32
.travis.yml
Normal file
@ -0,0 +1,32 @@
|
||||
dist: bionic
|
||||
language: generic
|
||||
|
||||
branches:
|
||||
only:
|
||||
- master
|
||||
- demo
|
||||
|
||||
before_install:
|
||||
- sudo apt-get update
|
||||
- sudo apt-get install python3
|
||||
- sudo apt-get install ruby wget
|
||||
- wget "https://github.com/gohugoio/hugo/releases/download/v${HUGO_RELEASE}/hugo_extended_${HUGO_RELEASE}_Linux-64bit.deb"
|
||||
- sudo dpkg -i *.deb
|
||||
- sudo gem install asciidoctor
|
||||
|
||||
script:
|
||||
- hugo
|
||||
|
||||
env:
|
||||
global:
|
||||
- PRODUCTION=true
|
||||
- HUGO_RELEASE=0.76.0
|
||||
|
||||
deploy:
|
||||
local_dir: "./public/"
|
||||
provider: pages
|
||||
skip_cleanup: true
|
||||
github_token: $GITHUB_TOKEN # Set in the settings page of your repository, as a secure variable
|
||||
target_branch: gh-pages
|
||||
on:
|
||||
branch: demo
|
||||
42
CHANGELOG.adoc
Normal file
42
CHANGELOG.adoc
Normal file
@ -0,0 +1,42 @@
|
||||
= Changelog
|
||||
:toc:
|
||||
|
||||
All notable changes to this project will be documented in this file.
|
||||
|
||||
The format is based on https://keepachangelog.com/en/1.0.0/[Keep a Changelog],
|
||||
and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Versioning].
|
||||
|
||||
|
||||
|
||||
|
||||
== [0.1.0] - 2020-11-02
|
||||
|
||||
The initial release.
|
||||
|
||||
|
||||
=== Added
|
||||
|
||||
* Easy custom color schemes with https://github.com/chriskempson/base16[Base16 scheme files].
|
||||
* Social media icons with https://github.com/simple-icons/simple-icons[Simple Icons] with the added setting to set whether it should appear in text or as an icon.
|
||||
* Icons on the content metadata for easier reading with link:https://heroicons.com/[HeroIcons].
|
||||
|
||||
|
||||
=== Changed
|
||||
|
||||
* Port CSS into SCSS now requiring the theme to be used with the extended version.
|
||||
|
||||
* Revamp the appearance of the site.
|
||||
|
||||
* Update the theme button with multiple theme selection.
|
||||
Since the theme now supports more than two themes, the https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme[`prefers-color-scheme`] (the automagic color scheme solution) will not be used.
|
||||
footnote:[Workarounds exist to let automatic and manual color scheme selection work together but it is not worth it for now.]
|
||||
|
||||
* The content metadata in the single content format.
|
||||
** Move to the bottom of the content to make more room for other metadata and to make the content more above-the-fold.
|
||||
Incidentally, this makes the theme more suitable for personal blogs (which is fine to me).
|
||||
** With the metadata has been moved, it is now replaced with the same metadata section as seen from the list template.
|
||||
|
||||
* Improve conditional display of the table of content.
|
||||
|
||||
* Change "Back to home" with a link bringing to the top of the page instead.
|
||||
|
||||
459
README.adoc
Normal file
459
README.adoc
Normal file
@ -0,0 +1,459 @@
|
||||
= hugo-theme-more-contentful
|
||||
:toc:
|
||||
|
||||
|
||||
A https://gohugo.io/hugo-modules/theme-components/#readout[Hugo theme] extending the https://github.com/foo-dogsquared/hugo-theme-contentful[Contentful theme] to be more modern.
|
||||
It features modern aesthetics and some optimizations making full use of https://gohugo.io/[Hugo]'s feature set.
|
||||
|
||||
Tested primarily with Chromium-based and Firefox-based browsers.
|
||||
|
||||
|
||||
|
||||
|
||||
== Project goals
|
||||
|
||||
* Create a batteries-included theme that is easy to extend and/or modify.
|
||||
* Focus on the ease of migration of content and data in case the user wants to switch themes.
|
||||
* https://webaim.org/[Accessibility] for people with disabilities (PWD).
|
||||
* Make the theme browsable with the following text browsers:
|
||||
** https://www.brow.sh/[Browsh]
|
||||
** http://links.twibright.com/[Links]
|
||||
** https://invisible-island.net/lynx/[Lynx] (the ultimate challenge!)
|
||||
* Low https://addyosmani.com/blog/performance-budgets/[performance budget] of 30KB or even less, must load under 1 second on a mobile 3G connection, and has a Lighthouse score of >90.
|
||||
footnote:[It only considered with the default configuration and without non-textual resources such as images and videos.]
|
||||
* Make the theme functional on `<noscript>`.
|
||||
|
||||
|
||||
=== Non-goals
|
||||
|
||||
* Include all of the modern things commonly found on today's web sites (or even Hugo themes).
|
||||
It may not fit with the requirements that a complex project demands.
|
||||
Thus, it is encouraged that the author should modify according to their settings.
|
||||
|
||||
* Make every possible option as a setting or a toggle switch.
|
||||
|
||||
|
||||
|
||||
|
||||
== Feature list
|
||||
|
||||
Like the original theme, the best way to describe it is with a list.
|
||||
The following features highlights the differences from the original.
|
||||
|
||||
* Batteries-included theme with a revamped appearance.
|
||||
* Clean(er) reader mode interface for a nice reading experience for your readers.
|
||||
* Uses https://sass-lang.com/[SCSS] instead of CSS for more concise formatting. footnote:needs-hugo-extended[It needs Hugo extended version.]
|
||||
* More colors with a http://chriskempson.com/projects/base16/[base-16]-based color scheme. footnote:needs-hugo-extended[]
|
||||
* Create more custom color schemes easily with https://github.com/chriskempson/base16[Base16 color schemes] without touching any CSS!
|
||||
* Link your social media platforms with icons from the entire set from https://simpleicons.org/[Simple Icons] featuring more than 1000 icons!
|
||||
* With most of the features retained from the original theme (except fancier).
|
||||
|
||||
This is mainly for personal blogs running a one-man show.
|
||||
footnote:[Still, this theme is designed with multiple authors in mind.]
|
||||
|
||||
|
||||
|
||||
|
||||
== Getting started
|
||||
|
||||
|
||||
=== Prerequisites
|
||||
|
||||
As a prerequisite, you need the following programs installed.
|
||||
|
||||
* Hugo v0.74.0 extended version and above.
|
||||
* The latest version of https://golang.org/dl/[Go] runtime installed (as of 2020-11-01, the latest version is v1.15).
|
||||
* https://git-scm.com/[Git] since the project uses as the version control system.
|
||||
|
||||
The latter two are needed as this theme makes heavy use of https://gohugo.io/hugo-modules/use-modules/[Hugo modules].
|
||||
|
||||
NOTE: To verify you've the extended version installed, run `hugo version` and look for the `extended` keyword in the result (e.g., `hugo version | grep "extended"`).
|
||||
|
||||
|
||||
=== Installation
|
||||
|
||||
|
||||
==== The theme folder
|
||||
|
||||
NOTE: I don't see why not use the Hugo module since this project already requires them but you do you.
|
||||
|
||||
You can install the theme by putting this project in `themes/`.
|
||||
Since this project is using a Git repo, you can simply `git clone` the project.
|
||||
|
||||
[source, shell]
|
||||
----
|
||||
git clone https://github.com/foo-dogsquared/hugo-theme-more-contentful themes/more-contentful
|
||||
----
|
||||
|
||||
If you intend to vendor this for major modifications, you can store the project as a https://git-scm.com/book/en/v2/Git-Tools-Submodules[Git submodule] (e.g., `git submodule add $GIT_REPO`) or a https://www.atlassian.com/git/tutorials/git-subtree[Git subtree] (e.g., `git subtree add --prefix ./themes/more-contentful $GIT_REPO --squash`).
|
||||
|
||||
|
||||
==== Hugo modules
|
||||
|
||||
First, you need to initialize your Hugo project as a Hugo module.
|
||||
This can be done by running `hugo mod init $HUGO_MODULE_PATH`.
|
||||
|
||||
Then, you can import the Hugo module in your site config.
|
||||
|
||||
[source, toml]
|
||||
----
|
||||
[[module.imports]]
|
||||
path = "github.com/foo-dogsquared/hugo-theme-more-contentful"
|
||||
----
|
||||
|
||||
You can also specify the tag by adding `@$TAG` at the end of the path.
|
||||
For more information, you can see https://github.com/golang/go/wiki/Modules#how-to-upgrade-and-downgrade-dependencies[how to specify Go modules] since Hugo modules are built on top of it.
|
||||
|
||||
Next, get the dependency by running `hugo mod get` and to update the component, run `hugo mod get -u`.
|
||||
(You could also run the server [i.e., `hugo server`] to download the modules.)
|
||||
|
||||
If you want to fully modify the theme yourself, you can use `hugo mod vendor`.
|
||||
|
||||
|
||||
|
||||
|
||||
== Configuration
|
||||
|
||||
This theme, like the original, tries to use as little custom parameters as possible.
|
||||
In fact, you can get started with only the `title` key in the site config and you'll be fine.
|
||||
|
||||
I'll let the config do the talking.
|
||||
If you want to know more details about the modules, simply visit the path as a URL in your browser.
|
||||
|
||||
[source, toml]
|
||||
----
|
||||
baseURL = "https://example.com"
|
||||
title = "Contentful"
|
||||
enableGitInfo = true
|
||||
paginate = 20
|
||||
|
||||
|
||||
[module]
|
||||
[[module.imports]]
|
||||
path = "github.com/foo-dogsquared/hugo-theme-contentful"
|
||||
[[module.imports]]
|
||||
path = "github.com/foo-dogsquared/hugo-web-feeds"
|
||||
|
||||
|
||||
[author]
|
||||
[john_doe]
|
||||
name = "John Doe"
|
||||
email = "johndoe@example.com"
|
||||
|
||||
|
||||
[languages]
|
||||
[languages.en]
|
||||
# This key is used for more readable links to translated versions.
|
||||
languageName = "English"
|
||||
|
||||
[languages.tl]
|
||||
languageName = "Tagalog"
|
||||
|
||||
|
||||
[mediaTypes]
|
||||
[mediaTypes."application/atom+xml"]
|
||||
suffixes = ["atom"]
|
||||
|
||||
[mediaTypes."application/rss+xml"]
|
||||
suffixes = ["rss"]
|
||||
|
||||
|
||||
[outputFormats]
|
||||
[outputFormats.RSS]
|
||||
mediaType = "application/rss+xml"
|
||||
baseName = "index"
|
||||
|
||||
[outputFormats.Atom]
|
||||
mediaType = "application/atom+xml"
|
||||
baseName = "index"
|
||||
|
||||
|
||||
[outputs]
|
||||
home = ["HTML", "RSS", "ATOM", "JSON"]
|
||||
section = ["HTML", "RSS", "ATOM", "JSON"]
|
||||
|
||||
|
||||
[menu]
|
||||
[[menu.main]]
|
||||
name = "About"
|
||||
url = "about/"
|
||||
|
||||
[[menu.main]]
|
||||
name = "Categories"
|
||||
url = "categories/"
|
||||
|
||||
[[menu.main]]
|
||||
name = "Tags"
|
||||
url = "tags/"
|
||||
|
||||
|
||||
[params]
|
||||
# Enable table of content generation (only valid for Markdown and Asciidoctor files to be parsed by Hugo's built-in parsers).
|
||||
toc = true
|
||||
|
||||
# Sections that should be included in the homepage.
|
||||
mainSections = [ "posts", "recipes", "projects" ]
|
||||
----
|
||||
|
||||
|
||||
=== Authors
|
||||
|
||||
Despite this theme is aimed for personal blogs, it has support for multiple authors.
|
||||
As hinted from the example configuration, the author site parameter (i.e., `$.Site.Author`) is a map of objects.
|
||||
The author object only requires a value for `name` key.
|
||||
You can also add more keys for more metadata.
|
||||
|
||||
Indicating the author(s) is also the same with content pages.
|
||||
|
||||
For completeness and best practice, the author object should be structured with the following schema.
|
||||
|
||||
* `name`, as already mentioned, is the name of the author.
|
||||
* `url` that points to the homepage (or whatever link of their choosing) of the author.
|
||||
* `email` for the author's public email.
|
||||
* `img` points to a URL of the profile image of the author.
|
||||
It can also point relative to the Hugo project root.
|
||||
|
||||
|
||||
=== Creating your own color scheme
|
||||
|
||||
Creating your own color scheme has been simplified with the use of https://gohugo.io/templates/data-templates/#the-data-folder[data templates].
|
||||
Furthermore, with https://gohugo.io/hugo-pipes/bundling/#readout[asset bundling], CSS variables, and SCSS, it is ensured that all of the schemes will be kept in one resulting stylesheet.
|
||||
|
||||
NOTE: In case you want to modify the stylesheet, the website has been styled according to the https://github.com/chriskempson/base16/blob/master/styling.md[Base16 styling guidelines] with some liberty.
|
||||
Not all Base16 color schemes follow the guideline strictly so it may result in a bad-looking color palette of the website.
|
||||
|
||||
To create a color scheme, simply place a Base16 color scheme data file in `data/more-contentful/themes`.
|
||||
For example, take the https://github.com/chriskempson/base16-default-schemes/blob/master/default-dark.yaml[default Base16 dark scheme] which is also the default scheme for this theme.
|
||||
|
||||
[source, yaml]
|
||||
----
|
||||
scheme: "Default Dark"
|
||||
author: "Chris Kempson (http://chriskempson.com)"
|
||||
base00: "181818"
|
||||
base01: "282828"
|
||||
base02: "383838"
|
||||
base03: "585858"
|
||||
base04: "b8b8b8"
|
||||
base05: "d8d8d8"
|
||||
base06: "e8e8e8"
|
||||
base07: "f8f8f8"
|
||||
base08: "ab4642"
|
||||
base09: "dc9656"
|
||||
base0A: "f7ca88"
|
||||
base0B: "a1b56c"
|
||||
base0C: "86c1b9"
|
||||
base0D: "7cafc2"
|
||||
base0E: "ba8baf"
|
||||
base0F: "a16946"
|
||||
----
|
||||
|
||||
NOTE: Inheriting schemes is not possible and to change one color of the color scheme, you have to create a whole new file with the single change.
|
||||
Even though scheme inheritance can be implemented, it'll open a new gate of unpredictable problems so it is better to be explicit on everything for now.
|
||||
Sorry, it will never be added on the theme. :(
|
||||
|
||||
You can also use https://github.com/chriskempson/base16#scheme-repositories[any of the existing color schemes] as a starting point.
|
||||
If you want to override the default scheme, you can place the file as `_index.{json,toml,yaml}` (of whatever appropriate data format of your choice).
|
||||
|
||||
The schemes are pressed against a template (i.e., link:./assets/templates/theme.scss[`./assets/templates/theme.scss`]) then added to the resulting stylesheet.
|
||||
|
||||
[source, css]
|
||||
----
|
||||
[data-theme="Default Dark"]:root {
|
||||
--base00: #181818;
|
||||
--base01: #282828;
|
||||
--base02: #383838;
|
||||
--base03: #585858;
|
||||
--base04: #b8b8b8;
|
||||
--base05: #d8d8d8;
|
||||
--base06: #e8e8e8;
|
||||
--base07: #f8f8f8;
|
||||
--base08: #ab4642;
|
||||
--base09: #dc9656;
|
||||
--base0A: #f7ca88;
|
||||
--base0B: #a1b56c;
|
||||
--base0C: #86c1b9;
|
||||
--base0D: #7cafc2;
|
||||
--base0E: #ba8baf;
|
||||
--base0F: #a16946; }
|
||||
----
|
||||
|
||||
For practical purposes, you should build your own color palette.
|
||||
The theme is styled closer to color schemes that can have a suitable palette with 3 colors such as https://www.nordtheme.com/[Nord], https://github.com/chriskempson/base16-default-schemes/blob/master/default-dark.yaml[default-dark], https://draculatheme.com/[Dracula], and https://ethanschoonover.com/solarized/[Solarized].
|
||||
I recommend creating a color scheme closer to their practices.
|
||||
Nord has a https://www.nordtheme.com/docs/colors-and-palettes[comprehensive documentation on the colors and palettes] which can be a good starting point.
|
||||
If you're feeling a bit lazy, you can easily create one with a https://javisperez.github.io/tailwindcolorshades[brand color palette generator] or a Base16-compatible color generator like the one found in https://terminal.sexy/[terminal.sexy].
|
||||
|
||||
|
||||
=== Social icons
|
||||
|
||||
Unlike https://themes.gohugo.io/[most themes] which features limited amount of social media icons, this theme offers the full icon set from https://simpleicons.org/[Simple Icons] offering more than 1400 icons footnote:[Practically one or two hundred icons since not a lot of them are social platforms.] made possible with Hugo modules.
|
||||
(Bonus feature of not installing with Node but you do have the Go runtime and Git installed, right?)
|
||||
|
||||
To do so, you need to create a file at `data/more-contentful/contacts.{json,toml,yaml}`.
|
||||
The data needs to be a top-level object with specific keys.
|
||||
|
||||
* `useImage` (boolean) is an optional key indicating to display the social links as an image.
|
||||
If disabled, which is the default value, it will display the text.
|
||||
|
||||
* `links` (array of objects) is the main attraction with a list of your links.
|
||||
It is an array of objects with each object can contain the following keys.
|
||||
|
||||
** `id` (string) is a required key used as an identifier for the link.
|
||||
Despite the name, it is also used as the file name of the icon in the https://simpleicons.org/[Simple Icons set].
|
||||
To search for the icon, https://github.com/simple-icons/simple-icons/tree/develop/icons[search for the icon file name from the source].
|
||||
|
||||
** `url` (string) is a required key referring to the URL of your platform.
|
||||
|
||||
** `name` (string) is an optional key and contains the text to be displayed when you don't want to show the icons.
|
||||
It is also used as the `aria-label` value if present.
|
||||
|
||||
** `weight` (integer) accepts an integer dictating the order of the links.
|
||||
It is optional and has a default value of 0.
|
||||
The icon object with the smallest weight will be the first to appear in the list (then the second smallest and so forth).
|
||||
If a link object has the same weight, it will be ordered alphabetically by its `id`.
|
||||
|
||||
Consider the example that I have a list of social media accounts and want my Keybase account to be listed first.
|
||||
Thus, the Keybase link object will have a weight of `-1`.
|
||||
|
||||
[source, toml]
|
||||
----
|
||||
useImage = false
|
||||
|
||||
[[links]]
|
||||
id = "twitter"
|
||||
url = "https://twitter.com/foo_dogsquared"
|
||||
name = "Twitter"
|
||||
|
||||
[[links]]
|
||||
id = "github"
|
||||
url = "https://github.com/foo-dogsquared/"
|
||||
name = "GitHub"
|
||||
|
||||
[[links]]
|
||||
id = "gitlab"
|
||||
url = "https://gitlab.com/foo-dogsquared/"
|
||||
name = "GitLab"
|
||||
|
||||
[[links]]
|
||||
id = "keybase"
|
||||
url = "https://keybase.io/foo_dogsquared"
|
||||
name = "Keybase"
|
||||
weight = -1
|
||||
----
|
||||
|
||||
.The resulting social media footer with the given configuration.
|
||||
image::./docs/social-icons-config-output.png[]
|
||||
|
||||
If the social platform icon is not included in the icon set, it will not have any fallback.
|
||||
Thus, it is recommended to display the text (i.e., `useImage = false`) instead.
|
||||
|
||||
|
||||
=== Editing the theme
|
||||
|
||||
There are mainly two situations when you customize the theme.
|
||||
|
||||
* You want to customize a part of theme while making use the official version.
|
||||
* You want to branch off and fully customize the theme according to your vision.
|
||||
|
||||
If you belong in the former, you could override the theme by copying the file from the theme to the equivalent location from your project root.
|
||||
For a concrete example, if you want to customize the footer, copy link:./layouts/partials/footer.html[`./layouts/partials/footer.html`] of this theme (e.g., `./themes/more-contentful/layouts/partials/footer.html`) to `./layouts/partials/footer.html` and modify it there.
|
||||
|
||||
If you want to customize the style, simply create a SCSS file at `assets/scss/extend.scss` and make your style there.
|
||||
|
||||
The downside when customizing it partially, updating the theme can be problematic.
|
||||
Thus, it is recommended to check out the project if its updated and
|
||||
|
||||
Otherwise, if you want to fully customize the theme, you can vendor this project into yours.
|
||||
Also, see the <<Development guidelines>> for more information.
|
||||
|
||||
* The recommended way is to fork the project, make your customizations there, and use it.
|
||||
* If you use Hugo modules, you can run `hugo mod vendor` and it will pull the files in `_vendor/`.
|
||||
* If you don't want to create another repo for the customized version of the theme intended only for one Hugo site, make the project as a https://www.atlassian.com/git/tutorials/git-subtree[a Git subtree] preferably in `themes/more-contentful/`.
|
||||
|
||||
|
||||
|
||||
|
||||
== Development guidelines
|
||||
|
||||
This theme should provide an intuitive and smooth developer experience (DX) for more potential to new contributions and easier time customizing this theme.
|
||||
|
||||
In order to provide that, there should be an established guidelines for development.
|
||||
The following exhaustive list sets the following:
|
||||
|
||||
* Install an https://editorconfig.org/[EditorConfig] plugin for your text editor.
|
||||
If it's not possible, follow the link:.editorconfig[the EditorConfig config].
|
||||
|
||||
** It is optional but install https://github.com/editorconfig-checker/editorconfig-checker[editconfig-checker] for easier checking of the files.
|
||||
|
||||
* For theme-specific https://gohugo.io/templates/data-templates/[data templates], the data should be pulled from `./data/more-contentful/` directory.
|
||||
This is to make data migration easier for the user in case they want to switch themes.
|
||||
|
||||
* If the partial is small enough (<60 lines), you should include them in link:./layouts/partials/components.html[`./layouts/partials/components.html`] as an https://gohugo.io/templates/partials/#inline-partials[inline partial].
|
||||
** Speaking of which, if you saw a partial use (e.g., `partial "components/post-meta.html" .`) and does not have a physical file, it is most likely defined there.
|
||||
|
||||
* Documentations are written in https://asciidoctor.org/[Asciidoctor].
|
||||
|
||||
* Any changes should be documented in the link:./CHANGELOG.adoc[changelog].
|
||||
This is to make future references easier for the user and developers.
|
||||
|
||||
* If you want to improve the accessibility of this theme, please install the popular text browsers (e.g., Browsh, Links, Lynx) and test it by navigating using them.
|
||||
|
||||
* Before committing, be sure to run `hugo mod tidy` to clean up the Hugo module declaration.
|
||||
|
||||
|
||||
|
||||
|
||||
== Frequently asked questions (FAQ)
|
||||
|
||||
* Add scheme inheritance?
|
||||
** It will not be considered since it will open a lot of unpredictable problems (or at least I think it is) and it is easy to create errors with them.
|
||||
For now, being explicit with the schemes is better despite more cumbersome.
|
||||
|
||||
* How to extend with custom styling?
|
||||
** Simply create `assets/scss/extend.scss` and you're on your merry way.
|
||||
This will be appended with the main stylesheet so it will still be in one file.
|
||||
In fact, with the capabilities of http://sass-lang.com/[Sass], it is enough for you to fully extend and/or modify the styling with its features — imports, mixins, greater string interpolations, etc.
|
||||
|
||||
* How to hide a post from being listed?
|
||||
** You can make use of link:https://gohugo.io/content-management/build-options/[the build options] with `_build.list` have a value of `never`.
|
||||
Though, this is only available in Hugo v0.65.0 and above.
|
||||
|
||||
* How to minimize the total site weight as much as possible?
|
||||
** If you're including your links, do not use images and go with the text instead.
|
||||
** Make use of https://gohugo.io/hugo-pipes/postcss/[PostCSS] to minimize the CSS further with https://purgecss.com/[PurgeCSS].
|
||||
|
||||
* How to modify the homepage?
|
||||
** Copy link:./layouts/_default/list.html[`./layouts/_default/list.html`] to `layouts/index.html` and modify it to your heart's content.
|
||||
|
||||
* Support for Asciidoctor?
|
||||
** Hugo now has link:https://gohugo.io/content-management/formats/#external-helper-asciidoctor[support for other formats] though this theme is not styled with Asciidoctor or any other formats in mind.
|
||||
There is no style associated with Asciidoctor output (as it has multiple HTML-based backend) so you'll have to style it yourself.
|
||||
|
||||
* Syntax highlighting without the `highlight` shortcode?
|
||||
** You can make use of existing highlighting libraries such as https://highlightjs.org/[highlight.js].
|
||||
I recommend link:https://prismjs.com/[Prism] for its small core size and solely because of its https://prismjs.com/plugins/autoloader/[autoloader plugin].
|
||||
Just link it in your page and it will automatically download the script for the detected languages.
|
||||
Pretty convenient.
|
||||
If you choose Prism, I also have a link:./assets/css/prism.css[Prism stylesheet for the theme].
|
||||
It is not included in the final output so you'll have to override link:./layouts/partials/head.html[`./layouts/partials/head.html`] with your own modifications.
|
||||
|
||||
* Table of contents for Asciidoctor?
|
||||
** You can enable it with `markup.asciidocExt.attributes.toc` set to `true` in the site config.
|
||||
Then enable it with `params.toc` (e.g., `params.toc = true`) also in the site config to globally apply to all posts.
|
||||
You can also enable it in your content with the `toc` frontmatter.
|
||||
|
||||
|
||||
|
||||
|
||||
== Acknowledgments
|
||||
|
||||
* https://github.com/foo-dogsquared/hugo-theme-contentful[My original theme, I guess] (does that really count?)
|
||||
* https://themes.gohugo.io/academic/[Academic] for a very extensive and configurable theme.
|
||||
* https://github.com/htdvisser/hugo-base16-theme[Base16 theme] by https://github.com/htdvisser[@htdvisser] for the CSS and the simpler layout.
|
||||
* https://themes.gohugo.io/hugo-theme-zzo/[Zzo] for a wonderful reader-oriented theme.
|
||||
* https://thebestmotherfucking.website/[Best website, dont @ me.]
|
||||
* https://simpleicons.org/[Simple Icons] for the massive brand icon set.
|
||||
On the other hand, I've created a https://github.com/foo-dogsquared/hugo-mod-simple-icons[Hugo module] for it.
|
||||
* https://heroicons.com/[Heroicons] (as well as the https://github.com/gohugoio/hugo-mod-heroicons[maintainers for its Hugo module]) for a good minimal icon set.
|
||||
* The team and community behind https://gohugo.io/[Hugo], of course. :")
|
||||
|
||||
116
assets/css/prism.css
Normal file
116
assets/css/prism.css
Normal file
@ -0,0 +1,116 @@
|
||||
/**
|
||||
* Dracula Theme originally by Zeno Rocha [@zenorocha]
|
||||
* https://draculatheme.com/
|
||||
*
|
||||
* Ported for PrismJS by Albert Vallverdu [@byverdu]
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: var(--base07);
|
||||
background: none;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: var(--base00);
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: var(--base03);
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: var(--base05);
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: var(--base08);
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: var(--base09);
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: var(--base0A);
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: var(--base07);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: var(--base0D);
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: var(--base0E);
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: var(--base0C);
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
232
assets/scss/base.scss
Normal file
232
assets/scss/base.scss
Normal file
@ -0,0 +1,232 @@
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
::selection {
|
||||
background: var(--base01);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 auto;
|
||||
max-width: var(--content-width);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin: 1rem auto;
|
||||
|
||||
&[aria-label="Primary navigation"] {
|
||||
@include header-link-hover-style;
|
||||
|
||||
a {
|
||||
color: var(--base06);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
h2 { margin-top: 3rem; }
|
||||
h3 { margin-top: 2rem; }
|
||||
}
|
||||
|
||||
h2:target {
|
||||
animation: target-fade 3s 1;
|
||||
}
|
||||
|
||||
@keyframes target-fade {
|
||||
0% { background: var(--base07); color: unset; }
|
||||
100% { background-color: transparent; }
|
||||
}
|
||||
|
||||
|
||||
/* Text formatting */
|
||||
h1, h2, h3,
|
||||
h4, h5, h6 {
|
||||
font-family: var(--header-family);
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--base08);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--base0C);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&::selection {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
dd, li, p, td {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
kbd {
|
||||
border: var(--border-style);
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
padding: 0 0.25em;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background: var(--base01);
|
||||
}
|
||||
|
||||
code, pre {
|
||||
font-family: var(--mono-family);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--mono-family);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--base01);
|
||||
color: var(--base06);
|
||||
border: var(--border-style);
|
||||
font-family: var(--mono-family);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
code[class*=language-]::selection,
|
||||
code[class*=language-] ::selection,
|
||||
pre[class*=language-]::selection,
|
||||
pre[class*=language-] ::selection {
|
||||
background: var(--base01);
|
||||
font-size: var(--mono-font-size);
|
||||
}
|
||||
|
||||
mark {
|
||||
background: var(--base05);
|
||||
color: var(--base00);
|
||||
|
||||
&::selection {
|
||||
color: var(--base06);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Multimedia blocks */
|
||||
img, video, audio, iframe {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
border: var(--border-style);
|
||||
border-collapse: collapse;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
thead, tbody {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: var(--base07);
|
||||
color: var(--base00);
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: var(--border-style);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 2rem auto;
|
||||
& > * {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 2rem 1rem;
|
||||
}
|
||||
|
||||
blockquote footer {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Form controls */
|
||||
button {
|
||||
background: unset;
|
||||
border: var(--base06) solid 1px;
|
||||
color: var(--base06);
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
/* Semantic blocks */
|
||||
aside {
|
||||
--vertical-rhythm-reduction: 0.2;
|
||||
color: var(--base03);
|
||||
border: 1px solid var(--base03);
|
||||
border-left: 3px solid var(--base03);
|
||||
font-size: calc(1rem * (1 - var(--vertical-rhythm-reduction)));
|
||||
font-family: var(--header-family);
|
||||
line-height: calc(1rem * (1 + var(--vertical-rhythm-reduction)));
|
||||
margin: 1rem 0;
|
||||
padding: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
justify-content: space-evenly;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* Mobile styles */
|
||||
@media all and (max-width: 860px) {
|
||||
html:root {
|
||||
--font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
html {
|
||||
color: var(--base00);
|
||||
background: var(--base07);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
0
assets/scss/extend.scss
Normal file
0
assets/scss/extend.scss
Normal file
205
assets/scss/layout.scss
Normal file
205
assets/scss/layout.scss
Normal file
@ -0,0 +1,205 @@
|
||||
@for $i from 0 through 15 {
|
||||
$hex: decToHex($i);
|
||||
.base#{$hex} {
|
||||
color: var(--base#{$hex});
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
display: inline-flex;
|
||||
flex-flow: row wrap;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
& > *:not(:last-child) {
|
||||
border-right: 1px solid var(--base02);
|
||||
margin-right: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.site__title {
|
||||
display: inline-block;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.site__links {
|
||||
@include header-link-hover-style;
|
||||
}
|
||||
|
||||
.site__languages {
|
||||
@include header-link-hover-style;
|
||||
}
|
||||
|
||||
.site__socials {
|
||||
@include header-link-hover-style;
|
||||
font-style: unset;
|
||||
}
|
||||
|
||||
.site__social-icon {
|
||||
svg {
|
||||
--size: 1.25em;
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
}
|
||||
}
|
||||
|
||||
.site__theme-btn {
|
||||
background: var(--base00);
|
||||
border: var(--border-style);
|
||||
position: absolute;
|
||||
padding: 0.5em;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
&:hover {
|
||||
& svg {
|
||||
display: none;
|
||||
}
|
||||
& .site__theme-dropdown {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site__theme-dropdown {
|
||||
display: none;
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.site__theme-item {
|
||||
padding: 0 0.5em;
|
||||
|
||||
.site__theme-dropdown &:hover {
|
||||
background: var(--base08);
|
||||
color: var(--base00);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.site__breadcrumbs {
|
||||
& > *:not(:last-child) {
|
||||
&::after {
|
||||
color: var(--base07);
|
||||
content: "/";
|
||||
display: inline-block;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site__breadcrumb--active {
|
||||
@extend .site__breadcrumb !optional;
|
||||
color: var(--base0C);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
font-size: 1rem;
|
||||
list-style: none;
|
||||
justify-content: center;
|
||||
margin: 1.2rem 0;
|
||||
padding: 0.8rem;
|
||||
|
||||
& > * {
|
||||
margin: 0 0.25em;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page-link {
|
||||
background: var(--base01);
|
||||
color: var(--base08);
|
||||
text-decoration: none;
|
||||
padding: 0.5em;
|
||||
|
||||
&:hover {
|
||||
background: var(--base0C);
|
||||
color: var(--base00);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page-link--active {
|
||||
@extend .page-link;
|
||||
background: var(--base05);
|
||||
color: var(--base00);
|
||||
font-weight: bolder;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.post {
|
||||
margin-top: 1rem;
|
||||
|
||||
h1 {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&--single .post__meta {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.post__meta {
|
||||
background: var(--base01);
|
||||
color: var(--base05);
|
||||
font-size: 0.9em;
|
||||
margin: 0.5em auto;
|
||||
padding: 0 0.5em;
|
||||
|
||||
& > * {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.post__meta--single {
|
||||
background: var(--base01);
|
||||
color: var(--base05);
|
||||
font-size: 0.9em;
|
||||
margin: 0.5em auto;
|
||||
padding: 0.5em 1em;
|
||||
|
||||
& > * {
|
||||
margin: 0.5em auto;
|
||||
}
|
||||
}
|
||||
.taxonomy__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
|
||||
& > * {
|
||||
margin: 0;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.taxonomy__pages {
|
||||
list-style: none;
|
||||
padding-left: 1em;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
.taxonomy__page {
|
||||
display: flex;
|
||||
|
||||
& :first-child {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
#TableOfContents {
|
||||
background: var(--base01);
|
||||
font-size: 0.9em;
|
||||
padding: 1em;
|
||||
}
|
||||
48
assets/scss/main.scss
Normal file
48
assets/scss/main.scss
Normal file
@ -0,0 +1,48 @@
|
||||
:root {
|
||||
/* The fonts. */
|
||||
--body-family: serif;
|
||||
--header-family: sans-serif;
|
||||
--mono-family: monospace;
|
||||
|
||||
/* Spacing options. */
|
||||
--font-size: 20px;
|
||||
--mono-font-size: 0.9em;
|
||||
--vertical-rhythm: 24px;
|
||||
--content-width: 750px;
|
||||
|
||||
--border-style: var(--base06) solid 1px;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: var(--body-family);
|
||||
font-size: var(--font-size);
|
||||
background: var(--base00);
|
||||
color: var(--base06);
|
||||
line-height: var(--vertical-rhythm);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@function decToHex($dec) {
|
||||
$hex: "0123456789ABCDEF";
|
||||
$first: (($dec - $dec % 16)/16)+1;
|
||||
$second: ($dec % 16)+1;
|
||||
@return str-slice($hex, $first, $first) + str-slice($hex, $second, $second)
|
||||
}
|
||||
|
||||
@mixin content-separator {
|
||||
content: " | ";
|
||||
color: var(--base03);
|
||||
margin: auto 0.5em;
|
||||
}
|
||||
|
||||
@mixin header-link-hover-style {
|
||||
> *:hover {
|
||||
color: var(--base0C);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@import "base";
|
||||
@import "layout";
|
||||
@import "extend";
|
||||
9
assets/templates/heroicon.svg
Normal file
9
assets/templates/heroicon.svg
Normal file
@ -0,0 +1,9 @@
|
||||
{{- /*
|
||||
This template applies an ID to an SVG from the Heroicons set to be used with `<use>` element.
|
||||
*/ -}}
|
||||
{{- $match := "<svg (.*)?>\\s*(.*)\\s*</svg>" }}
|
||||
{{- $icon := resources.Get (printf "svg/heroicons/solid/%s.svg" .) }}
|
||||
{{- $replaceWith := printf `<svg id="%s" ${1}>${2}</svg>` . }}
|
||||
|
||||
{{- replaceRE $match $replaceWith $icon.Content | safeHTML }}
|
||||
|
||||
9
assets/templates/simple-icon.svg
Normal file
9
assets/templates/simple-icon.svg
Normal file
@ -0,0 +1,9 @@
|
||||
{{- /*
|
||||
This template applies an ID to an SVG from the Simple Icons set to be used with `<use>` element.
|
||||
*/ -}}
|
||||
{{- $match := "<svg (.*)?>\\s*(.*)\\s*</svg>" }}
|
||||
{{- $icon := resources.Get (printf "svg/simple-icons/%s.svg" .) }}
|
||||
{{- $replaceWith := printf `<svg id="%s" ${1}>${2}</svg>` . }}
|
||||
|
||||
{{- replaceRE $match $replaceWith $icon.Content | safeHTML }}
|
||||
|
||||
18
assets/templates/theme.scss
Normal file
18
assets/templates/theme.scss
Normal file
@ -0,0 +1,18 @@
|
||||
{{- range $name, $scheme := (index $.Site.Data "more-contentful").themes }}
|
||||
// This is a template for a colorscheme based from a Base16 data file from https://github.com/chriskempson/base16.
|
||||
@mixin createColorScheme($invert: false) {
|
||||
{{- range $i := seq 0 15 }}
|
||||
{{- $hex := upper (printf "%02x" $i) }}
|
||||
{{- $key := printf "base%s" $hex }}
|
||||
@if $invert {
|
||||
--{{ $key }}: #{invert(#{{ index $scheme $key }}, 100%)};
|
||||
} @else {
|
||||
--{{ $key }}: #{{ index $scheme $key }};
|
||||
}
|
||||
{{- end }}
|
||||
}
|
||||
|
||||
{{- if ne $name "_index" }}[data-theme="{{ .scheme }}"]{{ end }}:root {
|
||||
@include createColorScheme;
|
||||
}
|
||||
{{- end }}
|
||||
11
config.toml
Normal file
11
config.toml
Normal file
@ -0,0 +1,11 @@
|
||||
[module]
|
||||
[[module.imports]]
|
||||
path = "github.com/foo-dogsquared/hugo-theme-contentful"
|
||||
[[module.imports]]
|
||||
path = "github.com/foo-dogsquared/hugo-mod-simple-icons"
|
||||
[[module.imports]]
|
||||
path="github.com/refactoringui/heroicons"
|
||||
[[module.imports.mounts]]
|
||||
source = "optimized"
|
||||
target = "assets/svg/heroicons"
|
||||
|
||||
18
data/more-contentful/themes/_index.yaml
Normal file
18
data/more-contentful/themes/_index.yaml
Normal file
@ -0,0 +1,18 @@
|
||||
scheme: "Default Dark"
|
||||
author: "Chris Kempson (http://chriskempson.com)"
|
||||
base00: "181818"
|
||||
base01: "282828"
|
||||
base02: "383838"
|
||||
base03: "585858"
|
||||
base04: "b8b8b8"
|
||||
base05: "d8d8d8"
|
||||
base06: "e8e8e8"
|
||||
base07: "f8f8f8"
|
||||
base08: "ab4642"
|
||||
base09: "dc9656"
|
||||
base0A: "f7ca88"
|
||||
base0B: "a1b56c"
|
||||
base0C: "86c1b9"
|
||||
base0D: "7cafc2"
|
||||
base0E: "ba8baf"
|
||||
base0F: "a16946"
|
||||
BIN
docs/social-icons-config-output.png
Normal file
BIN
docs/social-icons-config-output.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
15
exampleSite/.gitignore
vendored
Normal file
15
exampleSite/.gitignore
vendored
Normal file
@ -0,0 +1,15 @@
|
||||
|
||||
# Created by https://www.gitignore.io/api/hugo
|
||||
# Edit at https://www.gitignore.io/?templates=hugo
|
||||
|
||||
### Hugo ###
|
||||
# Generated files by hugo
|
||||
/public/
|
||||
/resources/_gen/
|
||||
|
||||
# Executable may be added to repository
|
||||
hugo.exe
|
||||
hugo.darwin
|
||||
hugo.linux
|
||||
|
||||
# End of https://www.gitignore.io/api/hugo
|
||||
6
exampleSite/README.md
Normal file
6
exampleSite/README.md
Normal file
@ -0,0 +1,6 @@
|
||||
# Contentful demo
|
||||
|
||||
Hello and welcome!
|
||||
This is the demo for Contentful or something.
|
||||
It features a Hugo site in [multilingual mode](https://gohugo.io/content-management/multilingual/) and uses the default settings to showcase how Contentful looks even without modifications.
|
||||
The only modifications done here is the addition of archives page.
|
||||
130
exampleSite/config.toml
Normal file
130
exampleSite/config.toml
Normal file
@ -0,0 +1,130 @@
|
||||
baseURL = "https://example.com"
|
||||
title = "Contentful"
|
||||
enableGitInfo = true
|
||||
paginate = 20
|
||||
rssLimit = 2
|
||||
|
||||
|
||||
[module]
|
||||
[[module.imports]]
|
||||
path = "github.com/foo-dogsquared/hugo-web-feeds"
|
||||
[[module.imports]]
|
||||
path = "github.com/foo-dogsquared/hugo-theme-more-contentful"
|
||||
|
||||
|
||||
[markup]
|
||||
[markup.goldmark]
|
||||
[markup.goldmark.renderer]
|
||||
unsafe = true
|
||||
[markup.asciidocExt]
|
||||
preserveToc = false
|
||||
[markup.asciidocExt.attributes]
|
||||
toc = true
|
||||
sectanchor = true
|
||||
experimental = true
|
||||
|
||||
|
||||
|
||||
[author]
|
||||
[author.john_doe]
|
||||
name = "John Doe"
|
||||
email = "johndoe@example.com"
|
||||
|
||||
|
||||
[languages]
|
||||
[languages.en]
|
||||
# This key is used for more readable links.
|
||||
# If this key is absent, it will use the object name (`en` in this case).
|
||||
languageName = "English"
|
||||
|
||||
# This key is used for the Open Graph protocol `og:locale`.
|
||||
# It should be in valid format as specified from the spec (https://opengraphprotocol.org/).
|
||||
# The format is `$LANG-$TERRITORY` where:
|
||||
# * `$LANG` is the ISO 639-1 two-letter language code (https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes).
|
||||
# * `$TERRITORY` is in ISO 3166-1 Alpha-2 code (https://en.wikipedia.org/wiki/ISO_3166-1#Current_codes).
|
||||
#
|
||||
# If this key is absent, it will use the object name (still `en`).
|
||||
languageCode = "en-us"
|
||||
contentDir = "content/en"
|
||||
|
||||
[languages.en.menu]
|
||||
[[languages.en.menu.main]]
|
||||
name = "About"
|
||||
url = "about/"
|
||||
|
||||
[[languages.en.menu.main]]
|
||||
name = "Categories"
|
||||
url = "categories/"
|
||||
|
||||
[[languages.en.menu.main]]
|
||||
name = "Tags"
|
||||
url = "tags/"
|
||||
|
||||
[[languages.en.menu.main]]
|
||||
name = "Recipes"
|
||||
url = "recipes/"
|
||||
|
||||
|
||||
[languages.tl]
|
||||
languageName = "Tagalog"
|
||||
languageCode = "tl"
|
||||
contentDir = "content/tl"
|
||||
|
||||
[languages.tl.menu]
|
||||
[[languages.tl.menu.main]]
|
||||
name = "About"
|
||||
url = "about/"
|
||||
|
||||
[[languages.tl.menu.main]]
|
||||
name = "Categories"
|
||||
url = "categories/"
|
||||
|
||||
[[languages.tl.menu.main]]
|
||||
name = "Tags"
|
||||
url = "tags/"
|
||||
|
||||
|
||||
# Visit the following for more information:
|
||||
# https://gohugo.io/templates/output-formats
|
||||
|
||||
# Defining the media type of the output formats
|
||||
# For JSON format, it doesn't need to be since it's already built-in into Hugo
|
||||
[mediaTypes]
|
||||
[mediaTypes."application/atom+xml"]
|
||||
suffixes = ["atom", "atom.xml"] # You can remove the "atom.xml" if you want
|
||||
|
||||
# Redefining RSS media type for the additional suffix
|
||||
[mediaTypes."application/rss+xml"]
|
||||
suffixes = ["rss", "rss.xml"] # You can remove the "rss.xml" if you want
|
||||
|
||||
[mediaTypes."application/feed+json"]
|
||||
suffixes = ["json"]
|
||||
|
||||
|
||||
# Including all of the feed output formats in the build
|
||||
[outputFormats]
|
||||
[outputFormats.RSS]
|
||||
mediaType = "application/rss+xml"
|
||||
baseName = "feed"
|
||||
|
||||
[outputFormats.ATOM]
|
||||
mediaType = "application/atom+xml"
|
||||
baseName = "feed"
|
||||
|
||||
[outputFormats.JSON]
|
||||
mediaType = "application/feed+json"
|
||||
baseName = "feed"
|
||||
|
||||
|
||||
# Indicating what output formats shall be included
|
||||
# for the following kinds
|
||||
[outputs]
|
||||
# .Site.BaseURL/$basename.* is available
|
||||
home = ["HTML", "JSON", "RSS", "ATOM"]
|
||||
|
||||
# .Site.BaseURL/$section/$basename.* is available
|
||||
section = ["HTML", "JSON", "RSS", "ATOM"]
|
||||
|
||||
|
||||
[params]
|
||||
toc = true
|
||||
24
exampleSite/content/en/about.adoc
Normal file
24
exampleSite/content/en/about.adoc
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: About
|
||||
---
|
||||
|
||||
= About Contentful
|
||||
|
||||
This is Contentful, a https://gohugo.io/[Hugo] theme that focuses on your content.
|
||||
It aims to be simply beautiful with the sane defaults and tries to go out of your way when creating your content.
|
||||
|
||||
Contentful understands that not all use cases can be applied for everyone which is why it was built from the ground up to be easily extensible.
|
||||
It is really just a few HTML files and a single CSS stylesheet with a few web feed templates, ready to be modified for your specific needs.
|
||||
|
||||
With this focus, it aims both for those who want to create content and for those who are willing to get their hands dirty.
|
||||
Oh, the creative side of making content and themes!
|
||||
|
||||
Here are the sane default features that Contentful provides:
|
||||
|
||||
* Beautifully simple default layout while made to be easily modified and extensible.
|
||||
* Provides a template for valid https://cyber.harvard.edu/rss/rss.html[RSS], https://tools.ietf.org/html/rfc4287[Atom], and https://jsonfeed.org/[JSON] feeds.
|
||||
* Dark mode toggle.
|
||||
* Focus on web accessibility and search engine optimization (SEO) including https://dev.twitter.com/cards[Twitter cards] and https://opengraphprotocol.org/[Open Graph protocol].
|
||||
* Google Analytics and Disqus integration.
|
||||
|
||||
For those who want to extend Contentful, link:../articles/extending-contentful[a dedicated post on some useful recipes] is available.
|
||||
8
exampleSite/content/en/archives.adoc
Normal file
8
exampleSite/content/en/archives.adoc
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: "Archives"
|
||||
layout: "archives"
|
||||
---
|
||||
|
||||
= Archives
|
||||
Gabriel Arazas <foo.dogsquared@gmail.com>
|
||||
2019-09-02
|
||||
@ -0,0 +1,114 @@
|
||||
---
|
||||
title: "Asciidoctor Article Template"
|
||||
date: 2019-08-25T21:06:56+08:00
|
||||
|
||||
categories:
|
||||
- "guide"
|
||||
tags:
|
||||
- "asciidoctor"
|
||||
- "guide"
|
||||
---
|
||||
|
||||
= Asciidoctor Article Template
|
||||
Gabriel Arazas <foo.dogsquared@gmail.com>
|
||||
2019-08-25
|
||||
:quick-uri: https://asciidoctor.org/docs/asciidoc-syntax-quick-reference/
|
||||
|
||||
Content entered directly below the header but before the first section heading is called the preamble.
|
||||
|
||||
== First level heading
|
||||
|
||||
This is a paragraph with a *bold* word and an _italicized_ word.
|
||||
|
||||
.Image caption
|
||||
image::https://source.unsplash.com/random[I am the image alt text.]
|
||||
|
||||
This is another paragraph.footnote:[I am footnote text and will be displayed at the bottom of the article.]
|
||||
|
||||
=== Second level heading
|
||||
|
||||
.Unordered list title
|
||||
* list item 1
|
||||
** nested list item
|
||||
*** nested nested list item 1
|
||||
*** nested nested list item 2
|
||||
* list item 2
|
||||
|
||||
This is a paragraph.
|
||||
|
||||
.title
|
||||
====
|
||||
Content in an example block is subject to normal substitutions.
|
||||
====
|
||||
|
||||
The test.
|
||||
|
||||
.Sidebar title
|
||||
****
|
||||
Sidebars contain aside text and are subject to normal substitutions.
|
||||
****
|
||||
|
||||
==== Third level heading
|
||||
|
||||
[#id-for-listing-block]
|
||||
.Listing block title
|
||||
----
|
||||
Content in a listing block is subject to verbatim substitutions.
|
||||
Listing block content is commonly used to preserve code input.
|
||||
----
|
||||
|
||||
image::https://images.unsplash.com/photo-1565645359958-700098a0a5aa?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60[]
|
||||
|
||||
You could also do source code inputs with the following syntax.
|
||||
|
||||
....
|
||||
[source,lang]
|
||||
----
|
||||
// source code here
|
||||
----
|
||||
....
|
||||
|
||||
===== Fourth level heading
|
||||
|
||||
.Table title
|
||||
|===
|
||||
|Column heading 1 |Column heading 2
|
||||
|
||||
|Column 1, row 1
|
||||
|Column 2, row 1
|
||||
|
||||
|Column 1, row 2
|
||||
|Column 2, row 2
|
||||
|===
|
||||
|
||||
====== Fifth level heading
|
||||
|
||||
[quote, firstname lastname, movie title]
|
||||
____
|
||||
I am a block quote or a prose excerpt.
|
||||
I am subject to normal substitutions.
|
||||
____
|
||||
|
||||
[verse, firstname lastname, poem title and more]
|
||||
____
|
||||
I am a verse block.
|
||||
Indents and endlines are preserved in verse blocks.
|
||||
____
|
||||
|
||||
== First level heading
|
||||
|
||||
TIP: There are five admonition labels: Tip, Note, Important, Caution and Warning.
|
||||
|
||||
// I am a comment and won't be rendered.
|
||||
|
||||
. ordered list item
|
||||
.. nested ordered list item
|
||||
. ordered list item
|
||||
|
||||
The text at the end of this sentence is cross referenced to <<_third_level_heading,the third level heading>>
|
||||
|
||||
== First level heading
|
||||
|
||||
This is a link to the https://asciidoctor.org/docs/user-manual/[Asciidoctor User Manual].
|
||||
This is an attribute reference {quick-uri}[which links this text to the Asciidoctor Quick Reference Guide].
|
||||
|
||||
@ -0,0 +1,196 @@
|
||||
---
|
||||
title: "Asciidoctor Extended Syntax Guide"
|
||||
date: 2019-08-29T22:09:16+08:00
|
||||
|
||||
categories:
|
||||
- "asciidoctor"
|
||||
tags:
|
||||
- "asciidoctor"
|
||||
- "guide"
|
||||
---
|
||||
|
||||
= Asciidoctor Extended Syntax Guide
|
||||
Gabriel Arazas <foo.dogsquared@gmail.com>
|
||||
2019-08-29
|
||||
:stem: latexmath
|
||||
|
||||
The purpose of this article to make sure not-so-common features of
|
||||
Asciidoctor (i.e. admonition blocks, callouts) are styled and
|
||||
fit to the theme.
|
||||
It also serves as a quick introduction to more Asciidoctor as well.
|
||||
Feel free to steal this if you want a template for this.
|
||||
|
||||
|
||||
|
||||
|
||||
== Admonition blocks
|
||||
|
||||
Admonition blocks contain content that are not a part of the main
|
||||
content but you'll want to draw attention to the audience anyways.
|
||||
|
||||
By default, Asciidoctor provides five labels for admonitions:
|
||||
|
||||
* `TIP`
|
||||
* `NOTE`
|
||||
* `IMPORTANT`
|
||||
* `CAUTION`
|
||||
* `WARNING`
|
||||
|
||||
.`CAUTION` vs `WARNING`
|
||||
[sidebar]
|
||||
--
|
||||
As the https://asciidoctor.org/docs/user-manual/#admonition[user manual]
|
||||
has said, `CAUTION` and `WARNING` should be used with different semantics.
|
||||
|
||||
`CAUTION` basically advises the user to observe care.
|
||||
`WARNING` warns the user about the dangers or consequences that'll exist.
|
||||
--
|
||||
|
||||
Writing an admonition is intuitively easy, simply write the label
|
||||
in all uppercase and append with a colon.
|
||||
Then write the content after.
|
||||
|
||||
[source,asciidoc]
|
||||
----
|
||||
TIP: Lorem ipsum dolor sit amet consectetur adipiscing elit varius cursus
|
||||
orci nulla, fames nisl sodales scelerisque eu consequat sem imperdiet ac mi
|
||||
vivamus tempor, accumsan ad justo odio viverra praesent senectus class egestas duis.
|
||||
----
|
||||
|
||||
It'll render as this:
|
||||
|
||||
TIP: Lorem ipsum dolor sit amet consectetur adipiscing elit varius cursus
|
||||
orci nulla, fames nisl sodales scelerisque eu consequat sem imperdiet ac mi
|
||||
vivamus tempor, accumsan ad justo odio viverra praesent senectus class egestas duis.
|
||||
|
||||
In case you want to style the labels differently such as assigning
|
||||
appropriate colors or an icon to the rest of the labels,
|
||||
here's the rest of them:
|
||||
|
||||
NOTE: Malesuada mattis aenean ultrices netus cursus viverra vivamus ultricies,
|
||||
velit molestie penatibus phasellus in ante luctus, habitant suspendisse eros
|
||||
turpis taciti risus himenaeos.
|
||||
|
||||
IMPORTANT: Velit fringilla feugiat nibh id faucibus scelerisque facilisis ac,
|
||||
suscipit quisque odio libero ullamcorper curabitur fames nascetur, elementum
|
||||
tristique hac nisl etiam dictumst dapibus.
|
||||
|
||||
CAUTION: Tempus dui aptent tempor torquent lacinia sem cursus porta cras semper
|
||||
accumsan feugiat, himenaeos mi ullamcorper pharetra enim class eget auctor conubia
|
||||
metus curabitur.
|
||||
|
||||
WARNING: Aliquet ut maecenas mollis id enim nibh suscipit quisque posuere cum fusce,
|
||||
dignissim ad curabitur odio ac diam pharetra platea vivamus eleifend.
|
||||
|
||||
|
||||
|
||||
|
||||
== Callouts
|
||||
|
||||
Callouts are used to add annotations within a verbatim block.
|
||||
This is especially useful for code listings in order to effectively explain what
|
||||
is going on within the code.
|
||||
|
||||
Here's an example of using callouts.
|
||||
|
||||
[source,asciidoc]
|
||||
....
|
||||
[source,python]
|
||||
----
|
||||
from pathlib import Path
|
||||
from re import compile, match
|
||||
|
||||
current_directory = Path(".") \<1>
|
||||
notes_directory = current_directory / "notes/" \<2>
|
||||
----
|
||||
<1> Created a Path object
|
||||
<2> Appending a Path object with "/"
|
||||
....
|
||||
|
||||
And it'll render as:
|
||||
|
||||
[source,python]
|
||||
----
|
||||
from pathlib import Path
|
||||
from re import compile, match
|
||||
|
||||
current_directory = Path(".") # <1>
|
||||
notes_directory = current_directory / "notes/" # <2>
|
||||
----
|
||||
<1> Created a `Path` object
|
||||
<2> Appending a `Path` object with "/"
|
||||
|
||||
One of the most important you should style is the callout number
|
||||
on the code listings block.
|
||||
Normally, when a user wants to copy-paste (even though I don't personally
|
||||
encourage it), the callout number gets in the way and they have to
|
||||
manually remove them which can be annoying.
|
||||
|
||||
Either attach the property `user-select` with it or take a part from the
|
||||
default Asciidoctor stylesheet and include it in your own stylesheet.
|
||||
|
||||
|
||||
|
||||
|
||||
== Passthroughs
|
||||
|
||||
A https://asciidoctor.org/docs/user-manual/#passthroughs[passthrough] passes the input as it is on the final output.
|
||||
This is useful for web-based outputs, for example passing raw HTML for interactive scripts or to create a live result.
|
||||
|
||||
Below is a very simple example with a https://p5js.org/[p5.js] sketch.
|
||||
|
||||
++++
|
||||
<div id="example-sketch"></div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
|
||||
<script>
|
||||
const sketchuuuuu = ( sketch ) => {
|
||||
let x = 100;
|
||||
let y = 100;
|
||||
|
||||
sketch.setup = () => {
|
||||
sketch.createCanvas(300, 380);
|
||||
};
|
||||
|
||||
sketch.draw = () => {
|
||||
sketch.background(0);
|
||||
sketch.fill(255);
|
||||
sketch.rect(x,y,50,50);
|
||||
sketch.ellipse(sketch["mouseX"], sketch["mouseY"], 20);
|
||||
};
|
||||
};
|
||||
|
||||
let example_sketch = new p5(sketchuuuuu, "example-sketch")
|
||||
</script>
|
||||
++++
|
||||
|
||||
Here is the input from the source code of this document.
|
||||
|
||||
[source, asciidoctor]
|
||||
----
|
||||
++++
|
||||
<div id="example-sketch"></div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
|
||||
<script>
|
||||
const sketchuuuuu = ( sketch ) => {
|
||||
let x = 100;
|
||||
let y = 100;
|
||||
|
||||
sketch.setup = () => {
|
||||
sketch.createCanvas(300, 380);
|
||||
};
|
||||
|
||||
sketch.draw = () => {
|
||||
sketch.background(0);
|
||||
sketch.fill(255);
|
||||
sketch.rect(x,y,50,50);
|
||||
sketch.ellipse(sketch["mouseX"], sketch["mouseY"], 20);
|
||||
};
|
||||
};
|
||||
|
||||
let example_sketch = new p5(sketchuuuuu, "example-sketch")
|
||||
</script>
|
||||
++++
|
||||
----
|
||||
|
||||
This is the closest instance of https://en.wikipedia.org/wiki/Literate_programming[literate programming] in the web when using Asciidoctor.
|
||||
(Sadly, not as flexible or cool as https://orgmode.org/[Org-Mode] or https://jupyter.org/[Jupyter Notebooks].)
|
||||
211
exampleSite/content/en/articles/asciidoctor-syntax-guide.adoc
Normal file
211
exampleSite/content/en/articles/asciidoctor-syntax-guide.adoc
Normal file
@ -0,0 +1,211 @@
|
||||
---
|
||||
title: "Asciidoctor Syntax Guide"
|
||||
date: 2019-08-27T01:03:09+08:00
|
||||
tags:
|
||||
- asciidoctor
|
||||
- guide
|
||||
categories:
|
||||
- guide
|
||||
---
|
||||
|
||||
= Asciidoctor Syntax Guide
|
||||
Gabriel Arazas <foo.dogsquared@gmail.com>
|
||||
2019-08-27
|
||||
:stem: latexmath
|
||||
|
||||
The main purpose of this article is to make sure that all
|
||||
basic HTML Elements are decorated with CSS so as to not miss
|
||||
any possible elements when creating new themes for Hugo.
|
||||
|
||||
== Headings
|
||||
|
||||
Let's start with all possible headings.
|
||||
The HTML `<h1>`—`<h6>` elements represent six levels of section headings.
|
||||
`<h1>` is the highest section level and `<h6>` is the lowest.
|
||||
|
||||
== Heading 2
|
||||
=== Heading 3
|
||||
==== Heading 4
|
||||
===== Heading 5
|
||||
====== Heading 6
|
||||
|
||||
== Paragraph
|
||||
According to the https://www.w3.org/TR/html5/dom.html=elements[HTML5 specification]
|
||||
by https://www.w3.org/[W3C], **HTML documents consist of a tree of elements and text**.
|
||||
Each element is denoted in the source by a https://www.w3.org/TR/html5/syntax.html=syntax-start-tags[start tag],
|
||||
such as `<body>`, and an https://www.w3.org/TR/html5/syntax.html=syntax-end-tags[end tag],
|
||||
such as `</body>`.
|
||||
(*Certain start tags and end tags can in certain cases be omitted and are implied by other tags.*)
|
||||
|
||||
Elements can have attributes, which control how the elements work.
|
||||
For example, hyperlink are formed using the `a` element and its `href` attribute.
|
||||
|
||||
== List Types
|
||||
|
||||
=== Ordered List
|
||||
|
||||
. First item
|
||||
. Second item
|
||||
. Third item
|
||||
|
||||
=== Unordered List
|
||||
|
||||
* List item
|
||||
* Another item
|
||||
* And another item
|
||||
|
||||
=== Nested list
|
||||
|
||||
* First item
|
||||
* Second item
|
||||
** Second item First subitem
|
||||
** Second item second subitem
|
||||
*** Second item Second subitem First sub-subitem
|
||||
*** Second item Second subitem Second sub-subitem
|
||||
*** Second item Second subitem Third sub-subitem
|
||||
** Second item Third subitem
|
||||
... Second item Third subitem First sub-subitem
|
||||
... Second item Third subitem Second sub-subitem
|
||||
... Second item Third subitem Third sub-subitem
|
||||
* Third item
|
||||
|
||||
=== Definition List
|
||||
|
||||
HTML also supports definition lists.
|
||||
|
||||
Blanco tequila::
|
||||
The purest form of the blue agave spirit...
|
||||
|
||||
Reposado tequila::
|
||||
Typically aged in wooden barrels for between two and eleven months...
|
||||
|
||||
== Blockquotes
|
||||
|
||||
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
|
||||
|
||||
[quote]
|
||||
Quoted text.
|
||||
This line is part of the same quote.
|
||||
Also you can _put_ *Asciidoctor* into a blockquote.
|
||||
|
||||
Blockquote with a citation.
|
||||
|
||||
[quote,Steve Wozniak]
|
||||
____
|
||||
My goal wasn't to make a ton of money. It was to build good computers. I only started the company when I realized I could be an engineer forever.
|
||||
____
|
||||
|
||||
According to Mozilla's website, Firefox 1.0 was released in 2004 and became a big success.
|
||||
|
||||
== Tables
|
||||
|
||||
Tables aren't part of the core Markdown spec, but Hugo supports them.
|
||||
|
||||
[cols="4*",options="header"]
|
||||
|===
|
||||
| ID
|
||||
| Make
|
||||
| Model
|
||||
| Year
|
||||
|
||||
| 1
|
||||
| Honda
|
||||
| Accord
|
||||
| 2009
|
||||
|
||||
| 2
|
||||
| Toyota
|
||||
| Camry
|
||||
| 2012
|
||||
|
||||
| 3
|
||||
| Hyundai
|
||||
| Elantra
|
||||
| 2010
|
||||
|
||||
|===
|
||||
|
||||
Colons can be used to align columns.
|
||||
|
||||
[cols="<,^,>",options="headers"]
|
||||
|===
|
||||
| Tables
|
||||
| Are
|
||||
| Cool
|
||||
|
||||
| align: left
|
||||
| align: center
|
||||
| align: right
|
||||
|
||||
| align: left
|
||||
| align: center
|
||||
| align: right
|
||||
|
||||
| align: left
|
||||
| align: center
|
||||
| align: right
|
||||
|
||||
|===
|
||||
|
||||
You can also use inline Markdown.
|
||||
|
||||
[cols="4*",options="headers"]
|
||||
|===
|
||||
| Inline
|
||||
| Asciidoctor
|
||||
| In
|
||||
| Table
|
||||
|
||||
| _italics_
|
||||
| *bold*
|
||||
| #mark#
|
||||
| `code`
|
||||
|
||||
|===
|
||||
|
||||
== Code
|
||||
|
||||
|
||||
[source,html]
|
||||
----
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
----
|
||||
|
||||
As you can see, content output from Asciidoctor does not have
|
||||
syntax highlighting.
|
||||
You can use the built-in Hugo shortcode instead.
|
||||
|
||||
{{< highlight html >}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
{{< /highlight >}}
|
||||
|
||||
== Other stuff — sub, sup, kbd, etc.
|
||||
|
||||
H~2~O
|
||||
|
||||
C~6~H~12~O~6~
|
||||
|
||||
X^n^ + Y^n^ = Z^n^
|
||||
|
||||
Press kbd:[X] to win. Or press kbd:[kbd:[CTRL]+kbd:[ALT]+kbd:[F]] to show FPS counter.
|
||||
footnote:[This requires https://asciidoctor.org/docs/user-manual/#keyboard-shortcuts[setting experimental flags enabled].]
|
||||
|
||||
#As a unit of information in information theory, the bit has alternatively been called a shannon#, named after Claude Shannon, the founder of field of information theory.
|
||||
45
exampleSite/content/en/articles/emoji-support.md
Normal file
45
exampleSite/content/en/articles/emoji-support.md
Normal file
@ -0,0 +1,45 @@
|
||||
---
|
||||
title: "Emoji Support"
|
||||
date: 2019-08-28T12:11:22+08:00
|
||||
categories:
|
||||
- "guide"
|
||||
tags:
|
||||
- "emoji"
|
||||
- "guide"
|
||||
---
|
||||
|
||||
Emoji can be enabled in a Hugo project in a number of ways.
|
||||
<!--more-->
|
||||
The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
|
||||
|
||||
To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
|
||||
|
||||
<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
|
||||
|
||||
The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
|
||||
|
||||
***
|
||||
|
||||
**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
|
||||
|
||||
{{< highlight html >}}
|
||||
.emoji {
|
||||
font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
|
||||
}
|
||||
{{< /highlight >}}
|
||||
|
||||
{{< css.inline >}}
|
||||
<style>
|
||||
.emojify {
|
||||
font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols;
|
||||
font-size: 2rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@media screen and (max-width:650px) {
|
||||
.nowrap {
|
||||
display: block;
|
||||
margin: 25px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{{< /css.inline >}}
|
||||
21
exampleSite/content/en/articles/hidden-post-test.adoc
Normal file
21
exampleSite/content/en/articles/hidden-post-test.adoc
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
title: "Hidden post test"
|
||||
date: 2020-05-12T21:29:52+08:00
|
||||
_build:
|
||||
list: never
|
||||
|
||||
categories:
|
||||
- "category1"
|
||||
tags:
|
||||
- "tag1"
|
||||
- "tag2"
|
||||
---
|
||||
|
||||
= Hidden post test
|
||||
2020-05-12
|
||||
|
||||
|
||||
Hey!
|
||||
How did you find this?!
|
||||
|
||||
Anyways, this is a test post for the hidden posts feature in Hugo Contentful.
|
||||
159
exampleSite/content/en/articles/markdown-syntax-guide.md
Normal file
159
exampleSite/content/en/articles/markdown-syntax-guide.md
Normal file
@ -0,0 +1,159 @@
|
||||
---
|
||||
title: "Markdown Syntax Guide"
|
||||
date: 2019-08-26T00:08:27+08:00
|
||||
categories: ["guide"]
|
||||
tags: ["markdown", "guide"]
|
||||
---
|
||||
|
||||
The main purpose of this article is to make sure that all basic HTML Elements are decorated with CSS so as to not miss any possible elements when creating new themes for Hugo.
|
||||
<!--more-->
|
||||
|
||||
## Headings
|
||||
|
||||
Let's start with all possible headings. The HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level and `<h6>` is the lowest.
|
||||
|
||||
# Heading 1
|
||||
## Heading 2
|
||||
### Heading 3
|
||||
#### Heading 4
|
||||
##### Heading 5
|
||||
###### Heading 6
|
||||
|
||||
## Paragraph
|
||||
|
||||
According to the [HTML5 specification](https://www.w3.org/TR/html5/dom.html#elements) by [W3C](https://www.w3.org/), **HTML documents consist of a tree of elements and text**. Each element is denoted in the source by a [start tag](https://www.w3.org/TR/html5/syntax.html#syntax-start-tags), such as `<body>`, and an [end tag](https://www.w3.org/TR/html5/syntax.html#syntax-end-tags), such as `</body>`. (*Certain start tags and end tags can in certain cases be omitted and are implied by other tags.*)
|
||||
|
||||
Elements can have attributes, which control how the elements work. For example, hyperlink are formed using the `a` element and its `href` attribute.
|
||||
|
||||
## List Types
|
||||
|
||||
### Ordered List
|
||||
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
|
||||
### Unordered List
|
||||
|
||||
* List item
|
||||
* Another item
|
||||
* And another item
|
||||
|
||||
### Nested list
|
||||
|
||||
<ul>
|
||||
<li>First item</li>
|
||||
<li>Second item
|
||||
<ul>
|
||||
<li>Second item First subitem</li>
|
||||
<li>Second item second subitem
|
||||
<ul>
|
||||
<li>Second item Second subitem First sub-subitem</li>
|
||||
<li>Second item Second subitem Second sub-subitem</li>
|
||||
<li>Second item Second subitem Third sub-subitem</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Second item Third subitem
|
||||
<ol>
|
||||
<li>Second item Third subitem First sub-subitem</li>
|
||||
<li>Second item Third subitem Second sub-subitem</li>
|
||||
<li>Second item Third subitem Third sub-subitem</li>
|
||||
</ol>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Third item</li>
|
||||
</ul>
|
||||
|
||||
### Definition List
|
||||
|
||||
HTML also supports definition lists.
|
||||
|
||||
<dl>
|
||||
<dt>Blanco tequila</dt>
|
||||
<dd>The purest form of the blue agave spirit...</dd>
|
||||
<dt>Reposado tequila</dt>
|
||||
<dd>Typically aged in wooden barrels for between two and eleven months...</dd>
|
||||
</dl>
|
||||
|
||||
## Blockquotes
|
||||
|
||||
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
|
||||
|
||||
> Quoted text.
|
||||
> This line is part of the same quote.
|
||||
> Also you can *put* **Markdown** into a blockquote.
|
||||
|
||||
Blockquote with a citation.
|
||||
|
||||
<blockquote>
|
||||
<p>My goal wasn't to make a ton of money. It was to build good computers. I only started the company when I realized I could be an engineer forever.</p>
|
||||
<footer>— <cite>Steve Wozniak</cite></footer>
|
||||
</blockquote>
|
||||
|
||||
According to Mozilla's website, <q cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 was released in 2004 and became a big success.</q>
|
||||
|
||||
## Tables
|
||||
|
||||
Tables aren't part of the core Markdown spec, but Hugo supports them.
|
||||
|
||||
| ID | Make | Model | Year |
|
||||
| --- | --------- | ------- | ---- |
|
||||
| 1 | Honda | Accord | 2009 |
|
||||
| 2 | Toyota | Camry | 2012 |
|
||||
| 3 | Hyundai | Elantra | 2010 |
|
||||
|
||||
Colons can be used to align columns.
|
||||
|
||||
| Tables | Are | Cool |
|
||||
|:----------- |:-------------:| ------------:|
|
||||
| align: left | align: center | align: right |
|
||||
| align: left | align: center | align: right |
|
||||
| align: left | align: center | align: right |
|
||||
|
||||
You can also use inline Markdown.
|
||||
|
||||
| Inline | Markdown | In | Table |
|
||||
| ---------- | --------- | ----------------- | ---------- |
|
||||
| *italics* | **bold** | ~~strikethrough~~ | `code` |
|
||||
|
||||
## Code
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
{{< highlight html >}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
{{< /highlight >}}
|
||||
|
||||
## Other stuff — abbr, sub, sup, kbd, etc.
|
||||
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>
|
||||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
Press <kbd>X</kbd> to win. Or press <kbd>CTRL+ALT+F</kbd> to show FPS counter.
|
||||
|
||||
<mark>As a unit of information in information theory, the bit has alternatively been called a shannon</mark>, named after Claude Shannon, the founder of field of information theory.
|
||||
@ -0,0 +1,409 @@
|
||||
---
|
||||
title: "MathJax Support for Asciidoctor"
|
||||
date: 2019-08-28T01:47:02+08:00
|
||||
|
||||
categories:
|
||||
- "asciidoctor"
|
||||
tags:
|
||||
- "asciidoctor"
|
||||
- "mathjax"
|
||||
- "guide"
|
||||
---
|
||||
|
||||
= MathJax Support for Asciidoctor
|
||||
Gabriel Arazas <foo.dogsquared@gmail.com>
|
||||
2019-08-28
|
||||
:stem: latexmath
|
||||
|
||||
|
||||
This is just an article for testing MathJax in Asciidoctor files.
|
||||
|
||||
You can use this as a testing template for all of your LaTeX math needs.
|
||||
|
||||
|
||||
|
||||
== Basics
|
||||
|
||||
This should be an inline math content stem:[\LaTeX] with the LaTeX symbol.
|
||||
|
||||
The following block content should contain a sentence with the LaTeX symbol.
|
||||
|
||||
[stem]
|
||||
++++
|
||||
\LaTeX\text{ is awesome.}
|
||||
++++
|
||||
|
||||
|
||||
=== Whitespace
|
||||
|
||||
LaTeX treats whitespace characters such as tabs and spaces uniformly as one unit
|
||||
of space.
|
||||
A text that is composed of two tabs and 10 spaces consecutively is one space.
|
||||
|
||||
This is especially prominent in math mode (which MathJax is... always).
|
||||
|
||||
Try to render this, for example.
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
This is a LaTeX sentence (or I guess in MathJax).
|
||||
----
|
||||
|
||||
And it'll render as the following:
|
||||
|
||||
[stem]
|
||||
++++
|
||||
This is a LaTeX sentence (or I guess in MathJax).
|
||||
++++
|
||||
|
||||
Since MathJax is in... perpetual math mode and specifically made for rendering
|
||||
math formulae, we shouldn't have a problem with maintaining it.
|
||||
|
||||
Just a heads up.
|
||||
|
||||
|
||||
=== Commands
|
||||
|
||||
One of the main syntax you should mind in MathJax are the LaTeX commands.
|
||||
Think of it like the HTML tags in LaTeX (although not really).
|
||||
|
||||
Here's the basic construct of a LaTeX command:
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
\commandname[option1,option2,...]{argument1}{argument2}...
|
||||
----
|
||||
|
||||
Within commands and if allowed, you can nest commands.
|
||||
Take this example for example:
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
\sum_{i=0}^{6} = \frac{i^{2}}{ 2 \bmod (i * 4)} + i^{3}
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
\sum_{i=0}^{6} = \frac{i^{2}}{ 2 \bmod (i * 4)} + i^{3}
|
||||
++++
|
||||
|
||||
|
||||
=== Reserved characters
|
||||
|
||||
The following characters have special meaning to LaTeX.
|
||||
|
||||
```
|
||||
# $ % ^ & _ { } ~ \
|
||||
```
|
||||
|
||||
[stem]
|
||||
++++
|
||||
# $ % ^ & _ { } ~ \
|
||||
++++
|
||||
|
||||
As you can see, it should result in an error or not rendered
|
||||
properly.
|
||||
|
||||
In order to render them in text, you need to add an escape character.
|
||||
In this case, it's a backslash.
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
\# \$ \% \^ \& \_ \{ \} \~ \\
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
\# \$ \% \^{} \& \_ \{ \} \~{} \textbackslash{}
|
||||
++++
|
||||
|
||||
NOTE: Some of them may not render properly due to MathJax lack of support for
|
||||
the following. (We don't really need those when using MathJax anyway)
|
||||
|
||||
|
||||
== Text formatting
|
||||
|
||||
You can do a little text formatting in a LaTeX math content (though it's pointless
|
||||
to do so).
|
||||
|
||||
|
||||
=== Literal text
|
||||
|
||||
You can make a text with `\text{}`.
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
\text{The quick brown fox jumps over the lazy dog.}
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
\text{The quick brown fox jumps over the lazy dog.}
|
||||
++++
|
||||
|
||||
|
||||
=== Boldface text
|
||||
|
||||
You can make a text boldface with `\textbf{}`.
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
\textbf{The quick brown fox jumps over the lazy dog.}
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
\textbf{The quick brown fox jumps over the lazy dog.}
|
||||
++++
|
||||
|
||||
|
||||
=== Italic text
|
||||
|
||||
To make a text block italic, enclose it with a `\textit{}` command.
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
\textit{The quick brown fox jumps over the lazy dog.}
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
\textit{The quick brown fox jumps over the lazy dog.}
|
||||
++++
|
||||
|
||||
|
||||
=== Monospaced text
|
||||
|
||||
In order for the text to be monospaced, enclose it with a `\texttt{}` (text teletype) command.
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
\texttt{The quick brown fox jumps over the lazy dog.}
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
\texttt{The quick brown fox jumps over the lazy dog.}
|
||||
++++
|
||||
|
||||
|
||||
=== Text in sans-serif font equivalent
|
||||
|
||||
Most importantly, you can make a text rendered in sans-serif with `\textsf{}` command.
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
\textsf{The quick brown fox jumps over the lazy dog.}
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
\textsf{The quick brown fox jumps over the lazy dog.}
|
||||
++++
|
||||
|
||||
|
||||
=== More options
|
||||
|
||||
You can see a lot more options from https://en.wikibooks.org/wiki/LaTeX/Fonts[this reference].
|
||||
|
||||
|
||||
|
||||
== Math formatting
|
||||
|
||||
This is what you mostly came for, right?
|
||||
|
||||
All righty then.
|
||||
Let's see what MathJax in Asciidoctor (M in A?) can do.
|
||||
|
||||
|
||||
=== Fractions
|
||||
|
||||
For rendering fractions, you need to use the `\frac` command.
|
||||
The command simply needs two positional arguments.
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
\frac{NUMERATOR}{DENOMINATOR}
|
||||
----
|
||||
|
||||
For a bit of an example:
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
\frac{x_1 + y_2}{x_2 + y_1}
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
\frac{x_1 + y_2}{x_2 + y_1}
|
||||
++++
|
||||
|
||||
|
||||
=== Roots
|
||||
|
||||
In order to create roots, you need the `\sqrt` command.
|
||||
It only needs the content to be put inside of it as the argument.
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
\sqrt{2a + b}
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
\sqrt{2a + b}
|
||||
++++
|
||||
|
||||
Yes, you can nest some stuff.
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
\sqrt{\frac{2a + b}{a^2 - b^2}}
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
\sqrt{\frac{2a + b}{a^2 - b^2}}
|
||||
++++
|
||||
|
||||
You can specify an optional argument to change the magnitude.
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
\sqrt[\frac{1}{2}]{2a + b}
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
\sqrt[\frac{1}{2}]{2a + b}
|
||||
++++
|
||||
|
||||
|
||||
=== Superscripts
|
||||
|
||||
In order to make superscripts, place it next to a caret character (`^`).
|
||||
To render it in more than one character, enclose it in curly brackets (`{}`).
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
2^2 * 2^{23} = 2^{25}
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
2^2 * 2^{23} = 2^{25}
|
||||
++++
|
||||
|
||||
You can also nest it within a superscript like so.
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
2^{2^{10}} * 2^{23^2} = \infty
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
2^{2^{10}} * 2^{23^2} = \infty
|
||||
++++
|
||||
|
||||
OK, I've gone overboard with the scale so I just put infinity as the
|
||||
answer instead.
|
||||
|
||||
|
||||
=== Subscripts
|
||||
|
||||
For making subscripts, place it next to the underscore (`_`).
|
||||
Like the superscript command, if you include more than one character,
|
||||
enclose it in a pair of curly brackets (`{}`).
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
a_1 + a_2 + a_3 + ... + a_{14} = \frac{a_1 * a_{14}}{2}
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
a_1 + a_2 + a_3 + ... + a_{14} = \frac{a_1 * a_{14}}{2}
|
||||
++++
|
||||
|
||||
Like superscripts and most of the commands, you can nest subscripts
|
||||
to another subscript (and other commands).
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
a_{2_{1}} + a_{2_{2}} = b_{2_{1}} + b_{2_{2}}
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
a_{2_{1}} + a_{2_{2}} = b_{2_{1}} + b_{2_{2}}
|
||||
++++
|
||||
|
||||
|
||||
=== Greek letters
|
||||
|
||||
You can render Greek letters with the appropriate command.
|
||||
|
||||
`\alpha` for lowercase Greek letter alpha,
|
||||
`\beta` for lowercase Greek letter beta,
|
||||
`\gamma` for lowercase Greek letter gamma,
|
||||
`\Gamma` for uppercase Greek letter gamma,
|
||||
you get the point.
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
\alpha, \beta, \gamma, \Gamma, \pi, \Pi, \phi, \varphi, \mu, \Phi
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
\alpha, \beta, \gamma, \Gamma, \pi, \Pi, \phi, \varphi, \mu, \Phi
|
||||
++++
|
||||
|
||||
|
||||
=== Mathematical sizing
|
||||
|
||||
Oftentimes, you might need to align and resize certain characters like
|
||||
the parenthesis or the brackets that enclose a formula or an example.
|
||||
|
||||
You can use the `\left`, `\right`, and `\middle` commands to resize
|
||||
the delimiters.
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
\left(\frac{x^2}{y^3}\right)
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
\left(\frac{x^2}{y^3}\right)
|
||||
++++
|
||||
|
||||
Since curly braces have semantic meaning to stem:[\LaTeX], you need to
|
||||
escape it.
|
||||
Pretty much, it'll look like this:
|
||||
|
||||
[source,latex]
|
||||
----
|
||||
\left\{\frac{x^2}{y^3}\right\}
|
||||
----
|
||||
|
||||
[stem]
|
||||
++++
|
||||
\left\{\frac{x^2}{y^3}\right\}
|
||||
++++
|
||||
|
||||
|
||||
=== A lot more!
|
||||
|
||||
You have a whole slew of mathematical symbols available.
|
||||
Please refer to
|
||||
https://oeis.org/wiki/List_of_LaTeX_mathematical_symbols[this list of LaTeX mathematical symbols].
|
||||
Though I don't know what's missing symbols and whatnot (since I don't MathJax often) but
|
||||
it should be enough.
|
||||
|
||||
You can also go to
|
||||
https://math-on-quora.surge.sh/[this web page that details using MathJax on Quora]
|
||||
by Gilles Castel.
|
||||
It is specifically made for writing stem:[\LaTeX] on Quora but it
|
||||
can be used as a general MathJax guide, anyways.
|
||||
305
exampleSite/content/en/articles/mathjax-support-for-markdown.md
Normal file
305
exampleSite/content/en/articles/mathjax-support-for-markdown.md
Normal file
@ -0,0 +1,305 @@
|
||||
---
|
||||
title: "MathJax Support for Markdown"
|
||||
date: 2019-08-28T00:09:56+08:00
|
||||
categories:
|
||||
- "markdown"
|
||||
tags:
|
||||
- "markdown"
|
||||
- "mathjax"
|
||||
- "guide"
|
||||
---
|
||||
|
||||
This is just an article for testing MathJax in Markdown files.
|
||||
|
||||
You can use this as a testing template for all of your LaTeX math needs.
|
||||
|
||||
|
||||
|
||||
## Basics
|
||||
|
||||
This should be an inline math content \\(\LaTeX\\) with the LaTeX symbol.
|
||||
|
||||
The following block content should contain a sentence with the LaTeX symbol.
|
||||
|
||||
$$\LaTeX\text{ is awesome.}$$
|
||||
|
||||
|
||||
### Whitespace
|
||||
|
||||
LaTeX treats whitespace characters such as tabs and spaces uniformly as one unit
|
||||
of space.
|
||||
A text that is composed of two tabs and 10 spaces consecutively is one space.
|
||||
|
||||
This is especially prominent in math mode (which MathJax is... always).
|
||||
|
||||
Try to render this, for example.
|
||||
|
||||
```latex
|
||||
This is a LaTeX sentence (or I guess in MathJax).
|
||||
```
|
||||
|
||||
And it'll render as the following:
|
||||
|
||||
$$ This is a LaTeX sentence (or I guess in MathJax). $$
|
||||
|
||||
Since MathJax is in... perpetual math mode and specifically made for rendering
|
||||
math formulae, we shouldn't have a problem with maintaining it.
|
||||
|
||||
Just a heads up.
|
||||
|
||||
|
||||
### Commands
|
||||
|
||||
One of the main syntax you should mind in MathJax are the LaTeX commands.
|
||||
Think of it like the HTML tags in LaTeX (although not really).
|
||||
|
||||
Here's the basic construct of a LaTeX command:
|
||||
|
||||
```latex
|
||||
\commandname[option1,option2,...]{argument1}{argument2}...
|
||||
```
|
||||
|
||||
Within commands and if allowed, you can nest commands.
|
||||
Take this example for example:
|
||||
|
||||
```latex
|
||||
\sum_{i=0}^{6} = \frac{i^{2}}{ 2 \bmod (i * 4)} + i^{3}
|
||||
```
|
||||
|
||||
$$ \sum_{i=0}^{6} = \frac{i^{2}}{ 2 \bmod (i * 4)} + i^{3} $$
|
||||
|
||||
|
||||
### Reserved characters
|
||||
|
||||
The following characters have special meaning to LaTeX.
|
||||
|
||||
```
|
||||
# $ % ^ & _ { } ~ \
|
||||
```
|
||||
|
||||
$$ # $ % ^ & _ { } ~ \ $$
|
||||
|
||||
As you can see, if rendered, it should result in an error.
|
||||
|
||||
In order to render them in text, you need to add an escape character.
|
||||
In this case, it's a backslash.
|
||||
|
||||
```latex
|
||||
\# \$ \% \^ \& \_ \{ \} \~ \\
|
||||
```
|
||||
|
||||
In the case of rendering it from Markdown, double slashes might be needed.
|
||||
|
||||
$$ \\# \\$ \% \\^ \\& \\_ \\{ \\} \\~ \\ $$
|
||||
|
||||
|
||||
|
||||
## Text formatting
|
||||
|
||||
You can do a little text formatting in a LaTeX math content (though it's pointless
|
||||
to do so).
|
||||
|
||||
|
||||
### Literal text
|
||||
|
||||
You can make a text with `\text{}`.
|
||||
|
||||
```latex
|
||||
\text{The quick brown fox jumps over the lazy dog.}
|
||||
```
|
||||
|
||||
$$\text{The quick brown fox jumps over the lazy dog.}$$
|
||||
|
||||
|
||||
### Boldface text
|
||||
|
||||
You can make a text boldface with `\textbf{}`.
|
||||
|
||||
```latex
|
||||
\textbf{The quick brown fox jumps over the lazy dog.}
|
||||
```
|
||||
|
||||
$$\textbf{The quick brown fox jumps over the lazy dog.}$$
|
||||
|
||||
|
||||
### Italic text
|
||||
|
||||
To make a text block italic, enclose it with a `\textit{}` command.
|
||||
|
||||
```latex
|
||||
\textit{The quick brown fox jumps over the lazy dog.}
|
||||
```
|
||||
|
||||
$$\textit{The quick brown fox jumps over the lazy dog.}$$
|
||||
|
||||
|
||||
### Monospaced text
|
||||
|
||||
In order for the text to be monospaced, enclose it with a `\texttt{}` (text teletype) command.
|
||||
|
||||
```latex
|
||||
\texttt{The quick brown fox jumps over the lazy dog.}
|
||||
```
|
||||
|
||||
$$\texttt{The quick brown fox jumps over the lazy dog.}$$
|
||||
|
||||
|
||||
### Text in sans-serif font equivalent
|
||||
|
||||
Most importantly, you can make a text rendered in sans-serif with `\textsf{}` command.
|
||||
|
||||
```latex
|
||||
\textsf{The quick brown fox jumps over the lazy dog.}
|
||||
```
|
||||
|
||||
$$\textsf{The quick brown fox jumps over the lazy dog.}$$
|
||||
|
||||
|
||||
### More options
|
||||
|
||||
You can see a lot more options from [this reference](https://en.wikibooks.org/wiki/LaTeX/Fonts).
|
||||
|
||||
|
||||
|
||||
## Math formatting
|
||||
|
||||
This is what you mostly came for, right?
|
||||
|
||||
All righty then.
|
||||
Let's see what MathJax in Markdown (M in M?) can do.
|
||||
|
||||
|
||||
|
||||
### Fractions
|
||||
|
||||
For rendering fractions, you need to use the `\frac` command.
|
||||
The command simply needs two positional arguments.
|
||||
|
||||
```latex
|
||||
\frac{NUMERATOR}{DENOMINATOR}
|
||||
```
|
||||
|
||||
For a bit of an example:
|
||||
|
||||
```latex
|
||||
\frac{x_1 + y_2}{x_2 + y_1}
|
||||
```
|
||||
|
||||
$$ \frac{x_1 + y_2}{x_2 + y_1} $$
|
||||
|
||||
|
||||
### Roots
|
||||
|
||||
In order to create roots, you need the `\sqrt` command.
|
||||
It only needs the content to be put inside of it as the argument.
|
||||
|
||||
```latex
|
||||
\sqrt{2a + b}
|
||||
```
|
||||
|
||||
$$ \sqrt{2a + b} $$
|
||||
|
||||
Yes, you can nest some stuff.
|
||||
|
||||
```latex
|
||||
\sqrt{\frac{2a + b}{a^2 - b^2}}
|
||||
```
|
||||
|
||||
$$ \sqrt{\frac{2a + b}{a^2 - b^2}} $$
|
||||
|
||||
You can specify an optional argument to change the magnitude.
|
||||
|
||||
```latex
|
||||
\sqrt[\frac{1}{2}]{2a + b}
|
||||
```
|
||||
|
||||
$$ \sqrt[\frac{1}{2}]{2a + b} $$
|
||||
|
||||
|
||||
### Superscripts
|
||||
|
||||
In order to make superscripts, place it next to a caret character (`^`).
|
||||
To render it in more than one character, enclose it in curly brackets (`{}`).
|
||||
|
||||
```latex
|
||||
2^2 * 2^{23} = 2^{25}
|
||||
```
|
||||
|
||||
$$2^2 * 2^{23} = 2^{25}$$
|
||||
|
||||
You can also nest it within a superscript like so.
|
||||
|
||||
```latex
|
||||
2^{2^{10}} * 2^{23^2} = \infty
|
||||
```
|
||||
|
||||
$$ 2^{2^{10}} * 2^{23^2} = \infty $$
|
||||
|
||||
OK, I've gone overboard with the scale so I just put infinity as the
|
||||
answer instead.
|
||||
|
||||
|
||||
### Subscripts
|
||||
|
||||
For making subscripts, place it next to the underscore (`_`).
|
||||
Like the superscript command, if you include more than one character,
|
||||
enclose it in a pair of curly brackets (`{}`).
|
||||
|
||||
```latex
|
||||
a_1 + a_2 + a_3 + ... + a_{14} = \frac{a_1 * a_{14}}{2}
|
||||
```
|
||||
|
||||
$$ a_1 + a_2 + a_3 + ... + a_{14} = \frac{a_1 * a_{14}}{2} $$
|
||||
|
||||
Wait... That doesn't look right.
|
||||
|
||||
That's because in Markdown, underscores denote italics so
|
||||
be sure to escape them with a single backslash.
|
||||
|
||||
So now, the result is this:
|
||||
|
||||
```latex
|
||||
a\_1 + a\_2 + a\_3 + ... + a\_{14} = \frac{a\_1 * a\_{14}}{2}
|
||||
```
|
||||
|
||||
$$ a\_1 + a\_2 + a\_3 + ... + a\_{14} = \frac{a\_1 * a\_{14}}{2} $$
|
||||
|
||||
Like superscripts and most of the commands, you can nest subscripts
|
||||
to another subscript (and other commands).
|
||||
|
||||
```latex
|
||||
a\_{2\_{1}} + a\_{2\_{2}} = b\_{2\_{1}} + b\_{2\_{2}}
|
||||
```
|
||||
|
||||
$$ a\_{2\_{1}} + a\_{2\_{2}} = b\_{2\_{1}} + b\_{2\_{2}} $$
|
||||
|
||||
|
||||
### Greek letters
|
||||
|
||||
You can render Greek letters with the appropriate command.
|
||||
|
||||
`\alpha` for lowercase Greek letter alpha,
|
||||
`\beta` for lowercase Greek letter beta,
|
||||
`\gamma` for lowercase Greek letter gamma,
|
||||
`\Gamma` for uppercase Greek letter gamma,
|
||||
you get the point.
|
||||
|
||||
```latex
|
||||
\alpha, \beta, \gamma, \Gamma, \pi, \Pi, \phi, \varphi, \mu, \Phi
|
||||
```
|
||||
|
||||
$$\alpha, \beta, \gamma, \Gamma, \pi, \Pi, \phi, \varphi, \mu, \Phi$$
|
||||
|
||||
|
||||
### A lot more!
|
||||
|
||||
You have a whole slew of mathematical symbols available.
|
||||
Please refer to [this list of LaTeX mathematical symbols](https://oeis.org/wiki/List_of_LaTeX_mathematical_symbols).
|
||||
Though I don't know what's missing symbols and whatnot (since I don't MathJax often) but
|
||||
it should be enough.
|
||||
|
||||
You can also go to
|
||||
[this web page that details using MathJax on Quora](https://math-on-quora.surge.sh/)
|
||||
by Gilles Castel.
|
||||
It is specifically made for writing \\(\LaTeX\\) on Quora but it
|
||||
can be used as a general MathJax guide, anyways.
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
title: "RSS, Atom, and JSON Feed Support"
|
||||
date: 2019-09-04T17:22:44+08:00
|
||||
author:
|
||||
- name: "John Doe"
|
||||
- name: "Jane Doe"
|
||||
aliases:
|
||||
- "/feeds/"
|
||||
categories:
|
||||
- "guide"
|
||||
tags:
|
||||
- "this is a test tag"
|
||||
- "tag2"
|
||||
---
|
||||
|
||||
= RSS, Atom, and JSON Feed Support
|
||||
John Dodo <johndodo@example.com>
|
||||
2019-09-04
|
||||
:stem: latexmath
|
||||
|
||||
|
||||
Web feeds are one of the most common ways for a visitor to keep up with someone who creates content.
|
||||
Nowadays, most social media has that feature such as the subscribing YouTube channels, following Twitter accounts, and watching Deviantart artists.
|
||||
Outside of those, we have simpler things like https://www.rssboard.org/rss-2-0-1[RSS] and https://www.jsonfeed.org/[JSON] feeds where they are just plain text files describing the content.
|
||||
|
||||
The Contentful theme doesn't have a web feed export but we can have it with https://gohugo.io/hugo-modules/theme-components/[theme components].
|
||||
For this demo, we'll use the https://github.com/foo-dogsquared/hugo-web-feeds[web feed component] created by https://foo-dogsquared.github.io/[foo-dogsquared].
|
||||
|
||||
If you're settling with this option, here's an example template for installing the web feed module and exporting all of the feed formats all in one fell swoop.
|
||||
|
||||
[source,toml]
|
||||
----
|
||||
[[module.imports]]
|
||||
path = "github.com/foo-dogsquared/hugo-web-feeds"
|
||||
|
||||
# Visit the following for more information:
|
||||
# https://gohugo.io/templates/output-formats
|
||||
|
||||
# Defining the media type of the output formats
|
||||
# For JSON format, it doesn't need to be since it's already built-in into Hugo
|
||||
[mediaTypes]
|
||||
[mediaTypes."application/atom+xml"]
|
||||
suffixes = ["atom", "atom.xml"] # You can remove the "atom.xml" if you want
|
||||
|
||||
# Redefining RSS media type for the additional suffix
|
||||
[mediaTypes."application/rss+xml"]
|
||||
suffixes = ["rss", "rss.xml"] # You can remove the "rss.xml" if you want
|
||||
|
||||
[mediaTypes."application/feed+json"]
|
||||
suffixes = ["json"] # You can remove the "rss.xml" if you want
|
||||
|
||||
|
||||
# Including all of the feed output formats in the build
|
||||
[outputFormats]
|
||||
[outputFormats.Rss]
|
||||
mediaType = "application/rss+xml"
|
||||
baseName = "feed"
|
||||
|
||||
[outputFormats.Atom]
|
||||
mediaType = "application/atom+xml"
|
||||
baseName = "feed"
|
||||
|
||||
[outputFormats.Json]
|
||||
mediaType = "application/feed+json"
|
||||
baseName = "feed"
|
||||
|
||||
|
||||
# Indicating what output formats shall be included
|
||||
# for the following kinds
|
||||
[outputs]
|
||||
# .Site.BaseURL/index.* is available
|
||||
home = ["HTML", "JSON", "RSS", "ATOM"]
|
||||
|
||||
# .Site.BaseURL/$section/index.* is available
|
||||
section = ["HTML", "JSON", "RSS", "ATOM"]
|
||||
----
|
||||
17
exampleSite/content/en/recipes/_index.adoc
Normal file
17
exampleSite/content/en/recipes/_index.adoc
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
title: Recipes
|
||||
date: 2020-05-12T17:25:55+08:00
|
||||
|
||||
categories:
|
||||
- "guide"
|
||||
tags:
|
||||
- "theme"
|
||||
- "extending"
|
||||
---
|
||||
|
||||
= Extending Contentful
|
||||
2020-05-12
|
||||
|
||||
Extending a Hugo theme is nothing new and a https://gohugo.io/content-management/sections/[few] http://hugocodex.org/add-ons/[places] provide a place for the most common extensions.
|
||||
In this section, I'll be listing a few personal recipes I've always used for extending a Hugo theme.
|
||||
Though this only applies specifically to Contentful and may need some tweaking when applying it other themes.
|
||||
@ -0,0 +1,67 @@
|
||||
---
|
||||
title: "Configurable list of contacts"
|
||||
date: 2020-10-20T20:38:24+08:00
|
||||
|
||||
categories:
|
||||
- "recipe"
|
||||
---
|
||||
|
||||
= Configurable list of contacts
|
||||
John Doe <johndoe@example.com>
|
||||
2020-10-20 20:38:24 +0800
|
||||
:stem: latexmath
|
||||
|
||||
|
||||
Most themes offer quick social media links with site configuration.
|
||||
However, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.
|
||||
|
||||
To get around this, we'll make use of https://gohugo.io/templates/data-templates/[data templates].
|
||||
Let's create a quick game plan how does it work.
|
||||
|
||||
The data is a top-level dictionary/object with each key contains an object with the following fields.
|
||||
|
||||
* `url` is the... contact link itself and it is required to have it.
|
||||
|
||||
* `name` is the text to appear in the output.
|
||||
Also required to have.
|
||||
|
||||
* `weight` is an integer similar to how Hugo sorts the pages with the lower weight having high precedence;
|
||||
if this key is absent, it will be interpreted as 0.
|
||||
|
||||
And here's the data example in TOML which is placed in `data/contact.toml`.
|
||||
|
||||
```toml
|
||||
[github]
|
||||
name = "GitHub"
|
||||
url = "https://github.com/foo-dogsquared"
|
||||
|
||||
[gitlab]
|
||||
name = "Gitlab"
|
||||
url = "https://gitlab.com/foo-dogsquared"
|
||||
|
||||
[keybase]
|
||||
name = "Keybase"
|
||||
url = "https://keybase.io/foo_dogsquared"
|
||||
weight = -1
|
||||
|
||||
[twitter]
|
||||
name = "Twitter"
|
||||
url = "https://twitter.com/foo_dogsquared"
|
||||
```
|
||||
|
||||
I want my Keybase profile to appear first than anything else for whatever reason so the `weight` key is set to -1.
|
||||
|
||||
With this data, we can then create a template out of it.
|
||||
I've put the following template in a partial named `contacts` (i.e., `layouts/partials/contacts`).
|
||||
|
||||
```go
|
||||
<address>
|
||||
{{- range (sort $.Site.Data.contacts "weight" "asc") -}}
|
||||
| <a rel="me" href="{{ .url }}">{{- .name -}}</a> |
|
||||
{{- end -}}
|
||||
</address>
|
||||
```
|
||||
|
||||
A suggestion (and an exercise) for extending this is to create image links.
|
||||
Maybe add another key named `image` that accepts either URL.
|
||||
The `name` would now be the image alternative text.
|
||||
64
exampleSite/content/en/recipes/creating-an-archive-page.adoc
Normal file
64
exampleSite/content/en/recipes/creating-an-archive-page.adoc
Normal file
@ -0,0 +1,64 @@
|
||||
---
|
||||
title: "Creating an archive page"
|
||||
date: 2020-10-20T20:36:55+08:00
|
||||
|
||||
categories:
|
||||
- "recipe"
|
||||
---
|
||||
|
||||
= Creating an archive page
|
||||
John Doe <johndoe@example.com>
|
||||
2020-10-20 20:36:55 +0800
|
||||
:stem: latexmath
|
||||
|
||||
|
||||
This will add an archive page similar to archive pages https://davidtranscend.com/archives/[like] https://lukesmith.xyz/blogindex.html[these].
|
||||
|
||||
```go
|
||||
{{- define "main" -}}
|
||||
|
||||
<h1>{{ .Title }}</h1>
|
||||
|
||||
{{ .Content }}
|
||||
|
||||
<hr>
|
||||
|
||||
{{- /* Creating a section that lists out regular pages by year */ -}}
|
||||
{{ range $.Site.RegularPages.GroupByPublishDate "2006" }}
|
||||
{{- /* Skip regular pages with an invalid creation date string. */ -}}
|
||||
{{- /* This is convenient if we want to exclude certain posts to be listed by giving no value to `date` in the frontmatter. */ -}}
|
||||
{{- /* We will also exclude hidden pages. */ -}}
|
||||
{{ if ne .Key "0001" }}
|
||||
<section data-year="{{ .Key }}">
|
||||
<h2 id="{{ .Key }}">{{ .Key }}</h2>
|
||||
<ul>
|
||||
{{- range where .Pages "Params.hidden" "!=" true -}}
|
||||
<li>
|
||||
<date>{{ .Date.Format "2006-01-02" }}</date> -
|
||||
<a aria-label="{{ .Title }}" href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
</li>
|
||||
{{- end -}}
|
||||
</ul>
|
||||
</section>
|
||||
{{- end }}
|
||||
{{ end }}
|
||||
|
||||
{{- end -}}
|
||||
```
|
||||
|
||||
We will simply add this as a layout in our customized theme.
|
||||
Let's call it `archives` so we have to add a file in `layouts/_default/archives.html` then set a page of our project with the `layout` key in the frontmatter.
|
||||
|
||||
We want the archives page to be accessed at `$.Site.BaseURL/archives` so we'll simply create `archives.adoc` (https://gohugo.io/content-management/formats/#list-of-content-formats[any valid content files with certain file extensions can do], I'm using https://asciidoctor.org/[Asciidoctor]) with the following example content.
|
||||
|
||||
```asciidoctor
|
||||
---
|
||||
title: "Archives"
|
||||
layout: "archive"
|
||||
---
|
||||
|
||||
= Archives
|
||||
|
||||
This is the archives of the century.
|
||||
```
|
||||
|
||||
58
exampleSite/content/en/recipes/customizing-your-head.adoc
Normal file
58
exampleSite/content/en/recipes/customizing-your-head.adoc
Normal file
@ -0,0 +1,58 @@
|
||||
---
|
||||
title: "Customizing your head"
|
||||
date: 2020-10-20T20:29:42+08:00
|
||||
|
||||
categories:
|
||||
- "recipe"
|
||||
tags:
|
||||
- "seo"
|
||||
---
|
||||
|
||||
= Customizing your head
|
||||
John Doe <johndoe@example.com>
|
||||
2020-10-20 20:29:00 +0800
|
||||
:stem: latexmath
|
||||
|
||||
|
||||
Let's start with the most basic and perhaps most useful customization: modifying the `<head`>.
|
||||
This is useful for adding your own CSS and JavaScript files, changing certain metadata, or adding icons.
|
||||
|
||||
First, copy the `head` partial from the theme (`theme/contentful/layouts/partials/head.html`) to your own (`layouts/partials/head.html`).
|
||||
We're simply taking advantage of https://gohugo.io/templates/lookup-order/[Hugo's lookup order] where we've override the `head` partial with our own copy.
|
||||
|
||||
Then, feel free to add your own (or others') scripts and stylesheets, https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML[icons and other metadata], or whatever suitable things.
|
||||
|
||||
In my case, I often use certain JavaScript libraries like https://www.mathjax.org/[MathJax] for mathematical typesetting, https://prismjs.com/[Prism] for syntax highlighting, and https://github.com/francoischalifour/medium-zoom/[medium-zoom] for interactive image zooms.
|
||||
|
||||
Here's the modified code.
|
||||
(The example code is snipped for brevity.)
|
||||
|
||||
```go
|
||||
<!--snip-->
|
||||
|
||||
{{- /* MathJax */ -}}
|
||||
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
|
||||
<script id="MathJax-script" defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
||||
|
||||
{{- /* Prism.js */ -}}
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css" type="text/css">
|
||||
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
|
||||
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js">
|
||||
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/keep-markup/prism-keep-markup.min.js">
|
||||
|
||||
{{- /* medium-zoom */ -}}
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js"></script>
|
||||
<script>window.addEventListener('load', () => mediumZoom('article img', { 'background': 'rgba(0, 0, 0, 0.75)' }))</script>
|
||||
```
|
||||
|
||||
Since most of the JavaScript libraries used here are not really a requirement (except for MathJax for mathematical typesetting), I've set them to be loaded at the end of the page loading with https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script[`defer` attribute].
|
||||
If you have an inline script, you can simply wrap it in an event listener for page loading (`window.addEventListener("load", your_function_goes_here)`).
|
||||
|
||||
If you want document-specific libraries, you have to pass some raw HTML through the parser of the document.
|
||||
For Goldmark, the default Markdown parser starting https://gohugo.io/news/0.60.0-relnotes/[Hugo v0.60.0], blocks raw HTML by default and you can disable it by setting `markup.goldmark.renderer.unsafe` to `true`.
|
||||
|
||||
For Blackfriday, it parses even the raw HTML just fine.
|
||||
Though, you have to set it as the default Markdown parser.
|
||||
|
||||
For https://asciidoctor.org/[Asciidoctor], you can use https://asciidoctor.org/docs/user-manual/#passthroughs[passthroughs] to get raw HTML through.
|
||||
|
||||
27
exampleSite/content/en/recipes/open-graph-protocol.adoc
Normal file
27
exampleSite/content/en/recipes/open-graph-protocol.adoc
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
title: "Open graph protocol"
|
||||
date: 2020-10-20T20:35:39+08:00
|
||||
|
||||
categories:
|
||||
- "recipe"
|
||||
tags:
|
||||
- "seo"
|
||||
- "social media"
|
||||
---
|
||||
|
||||
= Open graph protocol
|
||||
John Doe <johndoe@example.com>
|
||||
2020-10-20 20:35:39 +0800
|
||||
:stem: latexmath
|
||||
|
||||
|
||||
Next up, we're implementing https://opengraphprotocol.org/[Open Graph protocol] for our webpages.
|
||||
Commonly used for making suitable format when sharing the content on certain sites like Facebook.
|
||||
(Be sure to copy the `head` partial first in your own layout folder.)
|
||||
|
||||
Similar to Twitter cards, Hugo has https://gohugo.io/templates/internal/#open-graph[an internal template for this].
|
||||
Simply add `{{- template "_internal/opengraph.html" . -}}` somewhere in your own copy.
|
||||
(For reference, https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/opengraph.html[here's the source code for the internal template].)
|
||||
|
||||
If you want more control and customized version of the output, I recommend to copy the internal template and create a partial (e.g., `layouts/partials/opengraph.html`) and modify it.
|
||||
|
||||
86
exampleSite/content/en/recipes/simple-icons-integration.adoc
Normal file
86
exampleSite/content/en/recipes/simple-icons-integration.adoc
Normal file
@ -0,0 +1,86 @@
|
||||
---
|
||||
title: "Simple Icons integration with Hugo modules"
|
||||
date: 2020-10-20T21:36:34+08:00
|
||||
|
||||
categories:
|
||||
- "recipe"
|
||||
tags:
|
||||
- "tag1"
|
||||
- "tag2"
|
||||
---
|
||||
|
||||
= Simple Icons integration with Hugo modules
|
||||
2020-10-20 21:36:34 +0800
|
||||
:stem: latexmath
|
||||
|
||||
|
||||
https://github.com/simple-icons/simple-icons[Simple Icons] is a free and open source icon set for popular brands including social media sites such as Twitter, YouTube, Twitch, GitHub, and so on.
|
||||
This is a perfect component for getting social media icons.
|
||||
|
||||
Usually to make use of this icon set in Hugo, you would have to download each icon you need.
|
||||
Luckily, there's an easier way to make use of the set with https://gohugo.io/hugo-modules/[Hugo modules].
|
||||
In the future, Hugo will have an easier way to https://discourse.gohugo.io/t/esbuild-looks-like-we-can-finally-get-solid-hugo-modules-support/28757[integrate] https://gohugo.io/commands/hugo_mod_npm/#readout[with JavaScript modules].
|
||||
footnote:[Or integrating with NPM which https://gohugo.io/news/0.75.0-relnotes/[Hugo] certain has more support in the upcoming version.]
|
||||
|
||||
To get started, simply initialize your Hugo site as a Hugo module with `hugo mod init $HUGO_MOD_NAME` where `$HUGO_MOD_NAME` is simply the name of the Hugo module which could be anything.
|
||||
For example, if you host your Hugo site on GitHub pages, you might want to name your module like `github.com/$USER/$HUGO_SITE_REPO`.
|
||||
|
||||
Then, add the Simple Icons repo as a dependency module in your site configuration.
|
||||
The following configuration gets the icon set and the metadata and places them at `assets/icons` and `data/simple-icons.json` respectively.
|
||||
|
||||
[source, toml]
|
||||
----
|
||||
[[module.imports]]
|
||||
path = "github.com/simple-icons/simple-icons"
|
||||
[[module.imports.mounts]]
|
||||
source = "icons"
|
||||
target = "assets/icons"
|
||||
[[module.imports.mounts]]
|
||||
source = "_data/simple-icons.json"
|
||||
target = "data/simple-icons.json"
|
||||
----
|
||||
|
||||
Onto the interesting point which is using the icons itself.
|
||||
Since the icon set is stored in the assets folder, we can then use it in our templates.
|
||||
|
||||
[source, go]
|
||||
----
|
||||
{{ $github_icon := resources.Get "icons/github.svg" }}
|
||||
{{ $github_icon.Content | safeHTML }}
|
||||
----
|
||||
|
||||
And the SVG source will be applied inline to the resulting page.
|
||||
This opens up a lot of uses with the icon set.
|
||||
|
||||
Let's reimplement the link:../configurable-list-of-contacts.html[configurable list of contacts] with added feature of adding an icon from the set with each key serves as the icon to be displayed.
|
||||
|
||||
[source, go]
|
||||
----
|
||||
<address>
|
||||
{{- range (sort $.Site.Data.contacts "weight" "asc") -}}
|
||||
<a rel="me" href="{{ .url }}" aria-contact="{{ .name }}">
|
||||
{{ $location := printf "icons/%s.svg" .id }}
|
||||
{{ with resources.Get $location }}{{ .Content | safeHTML }}{{ end }}</a> |
|
||||
{{- end -}}
|
||||
</address>
|
||||
----
|
||||
|
||||
Unfortunately, this doesn't take account for missing icons so a fallback would be handy.
|
||||
For now, we'll use text as our fallback even though it's not going to be pretty.
|
||||
|
||||
[source, go]
|
||||
----
|
||||
<address>
|
||||
{{- range (sort $.Site.Data.contacts "weight" "asc") -}}
|
||||
<a rel="me" href="{{ .url }}" aria-contact="{{ .name }}">
|
||||
{{ $location := printf "icons/%s.svg" .id }}
|
||||
{{ $icon := resources.Get $location }}
|
||||
{{ if (countrunes $icon.Content) }}
|
||||
{{ .Content | safeHTML }}
|
||||
{{ else }}
|
||||
{{ .name }}
|
||||
{{ end }}
|
||||
</a> |
|
||||
{{- end -}}
|
||||
</address>
|
||||
----
|
||||
27
exampleSite/content/en/recipes/twitter-cards.adoc
Normal file
27
exampleSite/content/en/recipes/twitter-cards.adoc
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
title: "Twitter cards"
|
||||
date: 2020-10-20T20:31:32+08:00
|
||||
|
||||
categories:
|
||||
- "recipe"
|
||||
tags:
|
||||
- "twitter"
|
||||
- "social media"
|
||||
---
|
||||
|
||||
= Twitter cards
|
||||
John Doe <johndoe@example.com>
|
||||
2020-10-20 20:31:32 +0800
|
||||
:stem: latexmath
|
||||
|
||||
|
||||
This will add https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started[Twitter cards] for your webpages.
|
||||
(Be sure to copy the `head` partial first in your own layout folder.)
|
||||
|
||||
Thankfully, Hugo already has https://gohugo.io/templates/internal/#twitter-cards[an internal template for Twitter cards].
|
||||
Simply add `{{- template "_internal/twitter_cards.html" . -}}` somewhere in your own copy.
|
||||
(For reference, https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/twitter_cards.html[here's the source code for the internal template].)
|
||||
|
||||
You could also roll your own Twitter cards but I recommend to modify the internal template instead fitting your specific needs.
|
||||
(Copy the internal template from the given link, create it as a partial in `layouts/partials/twitter_cards.html`, modify it, and insert the template with `{{- partial "twitter_cards.html" -}}`.)
|
||||
|
||||
27
exampleSite/content/tl/about.adoc
Normal file
27
exampleSite/content/tl/about.adoc
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
title: About
|
||||
---
|
||||
|
||||
= About Contentful
|
||||
|
||||
|
||||
Ito ay Contentful, isang https://gohugo.io/[Hugo] theme nakapokus para sa iyong mga kuntento.
|
||||
Para sa layunin na ito, initinamtampok ng temang ito ang mga maaayos na default settings at magagandang layout.
|
||||
Ang temang ito ay inaplika rin ang mga typographic rules galing sa mga aralin ng https://practicaltypography.com/[Practical Typography], akda ni Matthew Butterick.
|
||||
|
||||
Naitindihan ng Contentful na hindi lahat ng kaso ay puwedeng mailagay.
|
||||
Kaya naman ang temang ito ay may isa pang layunin na madaling mapalawak/baguhin ayon sa mga pangangailangan ng may-akda.
|
||||
Ang temang ito ay binubuo lamang ng iilang https://developer.mozilla.org/en-US/docs/Web/HTML[HTML] at https://developer.mozilla.org/en-US/docs/Web/CSS[CSS] files.
|
||||
|
||||
Dahil sa mga layunin na ito, ang Contentful ay para sa mga taong gusto lang gumawa o kaya'y mga taong sabik na marumihan ang mga kamay.
|
||||
O, ang malikhaing bahagi ng paggawa ng mga tema at mga kuntento!
|
||||
|
||||
Iilan sa mga tampok ng Contentful:
|
||||
|
||||
* Isang simpleng default layout na may obserbasyon para sa typography.
|
||||
* Mga template para sa https://cyber.harvard.edu/rss/rss.html[RSS], https://tools.ietf.org/html/rfc4287[Atom], at https://jsonfeed.org/[JSON] feeds.
|
||||
* Dark mode.
|
||||
* Pokus sa web accessibility at search engine optimization (SEO) kabilang ang mga https://dev.twitter.com/cards[Twitter cards] and https://opengraphprotocol.org/[Open Graph protocol].
|
||||
* Google Analytics and Disqus integration.
|
||||
|
||||
Para sa mga gustong baguhin ang tema, link:../articles/extending-contentful[mayroon isang panulat ukol dito].
|
||||
8
exampleSite/content/tl/archives.adoc
Normal file
8
exampleSite/content/tl/archives.adoc
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: "Archives"
|
||||
layout: "archives"
|
||||
---
|
||||
|
||||
= Archives
|
||||
Gabriel Arazas <foo.dogsquared@gmail.com>
|
||||
2019-09-02
|
||||
18
exampleSite/content/tl/articles/hidden-post-test.adoc
Normal file
18
exampleSite/content/tl/articles/hidden-post-test.adoc
Normal file
@ -0,0 +1,18 @@
|
||||
---
|
||||
title: "Isang hidden post test"
|
||||
date: 2020-05-12T21:28:27+08:00
|
||||
hidden: true
|
||||
categories:
|
||||
- "category1"
|
||||
tags:
|
||||
- "tag1"
|
||||
- "tag2"
|
||||
---
|
||||
|
||||
= Isang hidden post test
|
||||
2020-05-12
|
||||
|
||||
Kamusta!
|
||||
At papano mo nahanap to?!
|
||||
|
||||
Isang test ito para sa hidden post feature ng Hugo Contentful.
|
||||
@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "Ang pambansang awit"
|
||||
date: 2020-05-12T21:22:39+08:00
|
||||
draft: true
|
||||
|
||||
categories:
|
||||
- "category1"
|
||||
tags:
|
||||
- "tag1"
|
||||
- "tag2"
|
||||
---
|
||||
|
||||
= Ang pambansang awit
|
||||
2020-05-12
|
||||
|
||||
Isang test post lamang ito para sa multilingual mode ng Hugo.
|
||||
|
||||
[verse]
|
||||
____
|
||||
Bayang magiliw,
|
||||
Perlas ng silanganan,
|
||||
Alab ng puso
|
||||
Sa dibdib mo’y buhay.
|
||||
|
||||
Lupang hinirang,
|
||||
Duyan ka ng magiting,
|
||||
Sa manlulupig
|
||||
Di ka pasisiil.
|
||||
|
||||
Sa dagat at bundok,
|
||||
Sa simoy at sa langit mong bughaw,
|
||||
May dilag ang tula
|
||||
At awit sa paglayang minamahal.
|
||||
|
||||
Ang kislap ng watawat mo’y
|
||||
Tagumpay na nagniningning;
|
||||
Ang bituin at araw niya,
|
||||
Kailan pa ma’y di magdidilim.
|
||||
|
||||
Lupa ng araw, ng luwalhati’t pagsinta,
|
||||
Buhay ay langit sa piling mo;
|
||||
Aming ligaya na ‘pag may mang-aapi,
|
||||
Ang mamatay nang dahil sa ‘yo.
|
||||
____
|
||||
@ -0,0 +1,80 @@
|
||||
---
|
||||
title: "Supporta para sa RSS, Atom, at JSON feeds"
|
||||
date: 2019-09-04T17:22:44+08:00
|
||||
author: [ { name: "Juan dela Cruz" }, { name: "Juana dela Cruz" }, { name: "Mang Kanor" } ]
|
||||
aliases:
|
||||
- "/feeds/"
|
||||
categories:
|
||||
- "guide"
|
||||
tags:
|
||||
- "this is a test tag"
|
||||
- "tag2"
|
||||
---
|
||||
|
||||
= RSS, Atom, and JSON Feed Support
|
||||
John Dodo <johndodo@example.com>
|
||||
2019-09-04
|
||||
:stem: latexmath
|
||||
|
||||
|
||||
Ang Hugo theme na ito ay mayroon mga templates para sa RSS, Atom, and JSON feeds.
|
||||
Ito ay nakatutulong para sa madaling pag-publish ng iyong mga gawa.
|
||||
Ang mga output ng mga templates ay napatunayan laban sa mga validator na may wastong marka.
|
||||
|
||||
Ito ang mga sanggunian ng ginamit upang maisagawa ang mga templates.
|
||||
|
||||
* https://tools.ietf.org/html/rfc4287[Atom 1.0 - IETF RFC4287]
|
||||
* https://jsonfeed.org/version/1[JSON Feed version 1 specifications]
|
||||
* https://cyber.harvard.edu/rss/rss.html[RSS 2.0 specifications]
|
||||
|
||||
Naka-activate ang mga web feeds at maaaring mo makita ang mga iyon sa sumusunod na weblinks:
|
||||
|
||||
* **RSS**: `$HUGO_URL/feed.rss`
|
||||
* **Atom**: `$HUGO_URL/feed.atom`
|
||||
* **JSON**: `$HUGO_URL/feed.json`
|
||||
|
||||
Para i-enable ang mga web feeds, kailangan mong gumamit ng https://gohugo.io/templates/output-formats[output formats] sa iyong site configuration.
|
||||
|
||||
Ang sumusunod ay ang parte ng site configuration para sa web feeds ng demo.
|
||||
|
||||
[source,toml]
|
||||
----
|
||||
# Visit the following for more information:
|
||||
# https://gohugo.io/templates/output-formats
|
||||
|
||||
# Defining the media type of the output formats
|
||||
# For JSON format, it doesn't need to be since it's already built-in into Hugo
|
||||
[mediaTypes]
|
||||
[mediaTypes."application/atom+xml"]
|
||||
suffixes = ["atom", "atom.xml"] # You can remove the "atom.xml" if you want
|
||||
|
||||
# Redefining RSS media type for the additional suffix
|
||||
[mediaTypes."application/rss+xml"]
|
||||
suffixes = ["rss", "rss.xml"] # You can remove the "rss.xml" if you want
|
||||
|
||||
|
||||
|
||||
# Including all of the feed output formats in the build
|
||||
[outputFormats]
|
||||
[outputFormats.Rss]
|
||||
mediaType = "application/rss+xml"
|
||||
baseName = "feed"
|
||||
|
||||
[outputFormats.Atom]
|
||||
mediaType = "application/atom+xml"
|
||||
baseName = "feed"
|
||||
|
||||
[outputFormats.Json]
|
||||
mediaType = "application/json"
|
||||
baseName = "feed"
|
||||
|
||||
|
||||
# Indicating what output formats shall be included
|
||||
# for the following kinds
|
||||
[outputs]
|
||||
# .Site.BaseURL/index.* is available
|
||||
home = ["HTML", "JSON", "RSS", "ATOM"]
|
||||
|
||||
# .Site.BaseURL/$section/index.* is available
|
||||
section = ["HTML", "JSON", "RSS", "ATOM"]
|
||||
----
|
||||
22
exampleSite/data/more-contentful/contacts.toml
Executable file
22
exampleSite/data/more-contentful/contacts.toml
Executable file
@ -0,0 +1,22 @@
|
||||
useImage = true
|
||||
|
||||
[[links]]
|
||||
id = "twitter"
|
||||
url = "https://twitter.com/foo_dogsquared"
|
||||
name = "Twitter"
|
||||
|
||||
[[links]]
|
||||
id = "github"
|
||||
url = "https://github.com/foo-dogsquared/"
|
||||
name = "GitHub"
|
||||
|
||||
[[links]]
|
||||
id = "gitlab"
|
||||
url = "https://gitlab.com/foo-dogsquared/"
|
||||
name = "GitLab"
|
||||
|
||||
[[links]]
|
||||
id = "keybase"
|
||||
url = "https://keybase.io/foo_dogsquared"
|
||||
name = "Keybase"
|
||||
weight = -1
|
||||
18
exampleSite/data/more-contentful/themes/dracula.yaml
Normal file
18
exampleSite/data/more-contentful/themes/dracula.yaml
Normal file
@ -0,0 +1,18 @@
|
||||
scheme: "Dracula"
|
||||
author: "Mike Barkmin (http://github.com/mikebarkmin) based on Dracula Theme (http://github.com/dracula)"
|
||||
base00: "282936" #background
|
||||
base01: "3a3c4e"
|
||||
base02: "4d4f68"
|
||||
base03: "626483"
|
||||
base04: "62d6e8"
|
||||
base05: "e9e9f4" #foreground
|
||||
base06: "f1f2f8"
|
||||
base07: "f7f7fb"
|
||||
base08: "ea51b2"
|
||||
base09: "b45bcf"
|
||||
base0A: "00f769"
|
||||
base0B: "ebff87"
|
||||
base0C: "a1efe4"
|
||||
base0D: "62d6e8"
|
||||
base0E: "b45bcf"
|
||||
base0F: "00f769"
|
||||
18
exampleSite/data/more-contentful/themes/nord.yaml
Normal file
18
exampleSite/data/more-contentful/themes/nord.yaml
Normal file
@ -0,0 +1,18 @@
|
||||
scheme: "Nord"
|
||||
author: "arcticicestudio"
|
||||
base00: "2E3440"
|
||||
base01: "3B4252"
|
||||
base02: "434C5E"
|
||||
base03: "4C566A"
|
||||
base04: "D8DEE9"
|
||||
base05: "E5E9F0"
|
||||
base06: "ECEFF4"
|
||||
base07: "8FBCBB"
|
||||
base08: "88C0D0"
|
||||
base09: "81A1C1"
|
||||
base0A: "5E81AC"
|
||||
base0B: "BF616A"
|
||||
base0C: "D08770"
|
||||
base0D: "EBCB8B"
|
||||
base0E: "A3BE8C"
|
||||
base0F: "B48EAD"
|
||||
12
exampleSite/go.mod
Normal file
12
exampleSite/go.mod
Normal file
@ -0,0 +1,12 @@
|
||||
module demo
|
||||
|
||||
go 1.15
|
||||
|
||||
require (
|
||||
github.com/eimajtrebor/hugo-mod-heroicons v0.0.0-20201017130534-07f09dd2f2f8 // indirect
|
||||
github.com/foo-dogsquared/hugo-mod-simple-icons v0.0.0-20201026173406-633714bb359d // indirect
|
||||
github.com/foo-dogsquared/hugo-theme-contentful v1.2.1-0.20201027180616-059a6c489ce7 // indirect
|
||||
github.com/foo-dogsquared/hugo-web-feeds v0.0.1 // indirect
|
||||
github.com/gohugoio/hugo-mod-heroicons v0.0.0-20200822140006-fc590bc3dc55 // indirect
|
||||
github.com/iconfu/svg-inject v1.2.3 // indirect
|
||||
)
|
||||
18
exampleSite/go.sum
Normal file
18
exampleSite/go.sum
Normal file
@ -0,0 +1,18 @@
|
||||
github.com/eimajtrebor/hugo-mod-heroicons v0.0.0-20201017130534-07f09dd2f2f8 h1:RYguOV/Ubdb+yxENNWtehJPDUCpvMFxAqe0CheLmCL8=
|
||||
github.com/eimajtrebor/hugo-mod-heroicons v0.0.0-20201017130534-07f09dd2f2f8/go.mod h1:la8aikeVFFYvTHYkbYJjccI/7KaP7DQMBOIeF9GfDXg=
|
||||
github.com/foo-dogsquared/hugo-mod-simple-icons v0.0.0-20201026173406-633714bb359d h1:TguVIF94zP80FbYjwlHZ8j3gIL4171o79nD6lrTOcxw=
|
||||
github.com/foo-dogsquared/hugo-mod-simple-icons v0.0.0-20201026173406-633714bb359d/go.mod h1:IqgEwYyo2L3mFR2RoelZZ3Ncwph7QTssrZ3deCaE0us=
|
||||
github.com/foo-dogsquared/hugo-theme-contentful v1.2.0 h1:if43vUzFAipKlnobL9THtW+QsmXp9ZPMe/vXY/vBofs=
|
||||
github.com/foo-dogsquared/hugo-theme-contentful v1.2.1-0.20201027180616-059a6c489ce7 h1:3m0//AyQQX3Bh6IVAJ+z8hdWgOkaC4yCtvEycaeANHg=
|
||||
github.com/foo-dogsquared/hugo-theme-contentful v1.2.1-0.20201027180616-059a6c489ce7/go.mod h1:BL7L5CENEhUx+miRRaOZ9SVC92j9MAMztirBWtTpiPc=
|
||||
github.com/foo-dogsquared/hugo-theme-contentful v2.0.0+incompatible h1:KcvDzjZR1AcecXmTmyj/uiXmCpyQtf18l0awyIU+Ry8=
|
||||
github.com/foo-dogsquared/hugo-theme-contentful v2.0.0+incompatible/go.mod h1:65D70b+PuQbQu0BQKQiSgp7K5vfmxrPQkcMSNIZ5nA8=
|
||||
github.com/foo-dogsquared/hugo-web-feeds v0.0.1 h1:miuJMx2Plw+4TBGctI2CgWXilddEHFnKNDQ9kLNti3w=
|
||||
github.com/foo-dogsquared/hugo-web-feeds v0.0.1/go.mod h1:0WxK3+xNIj/Wpk2kkUW0p6Uqmr/OZjPsRtQDCMazNmI=
|
||||
github.com/gohugoio/hugo-mod-heroicons v0.0.0-20200822140006-fc590bc3dc55 h1:ymzle/RfF+IBdw/epL+cIcN9yCg5xU15rxRwq9qTRKQ=
|
||||
github.com/gohugoio/hugo-mod-heroicons v0.0.0-20200822140006-fc590bc3dc55/go.mod h1:m6G9GOoLyUFNBndlmJf/G293YFplpc/nt3bx9PjaNWw=
|
||||
github.com/iconfu/svg-inject v1.2.3 h1:6r6aFq9JELTHY+lR3pfjBCMFliXyJeqECF9feuH9GVc=
|
||||
github.com/iconfu/svg-inject v1.2.3/go.mod h1:Bw65kdn/PHpRM5Iu4KT6TJuyVlqt3TXIcPJoHp1yobU=
|
||||
github.com/refactoringui/heroicons v0.3.7/go.mod h1:82HsLWQga7MkEl5aK8TctxPPIBlXrsyWcVTB57uipuk=
|
||||
github.com/refactoringui/heroicons v0.4.2/go.mod h1:82HsLWQga7MkEl5aK8TctxPPIBlXrsyWcVTB57uipuk=
|
||||
github.com/simple-icons/simple-icons v0.0.0-20201025110046-413f781fd706/go.mod h1:oOgUUt8yVYOso/wEBi2ojfZP2MU/xxiNccIpaE+jCvE=
|
||||
9
go.mod
Normal file
9
go.mod
Normal file
@ -0,0 +1,9 @@
|
||||
module github.com/foo-dogsquared/hugo-theme-more-contentful
|
||||
|
||||
go 1.15
|
||||
|
||||
require (
|
||||
github.com/foo-dogsquared/hugo-mod-simple-icons v0.0.0-20201026173406-633714bb359d // indirect
|
||||
github.com/foo-dogsquared/hugo-theme-contentful v1.2.1-0.20201030114530-c0a2488a58fb // indirect
|
||||
github.com/refactoringui/heroicons v0.4.2 // indirect
|
||||
)
|
||||
9
go.sum
Normal file
9
go.sum
Normal file
@ -0,0 +1,9 @@
|
||||
github.com/foo-dogsquared/hugo-mod-simple-icons v0.0.0-20201026173406-633714bb359d h1:TguVIF94zP80FbYjwlHZ8j3gIL4171o79nD6lrTOcxw=
|
||||
github.com/foo-dogsquared/hugo-mod-simple-icons v0.0.0-20201026173406-633714bb359d/go.mod h1:IqgEwYyo2L3mFR2RoelZZ3Ncwph7QTssrZ3deCaE0us=
|
||||
github.com/foo-dogsquared/hugo-theme-contentful v1.2.0 h1:if43vUzFAipKlnobL9THtW+QsmXp9ZPMe/vXY/vBofs=
|
||||
github.com/foo-dogsquared/hugo-theme-contentful v1.2.0/go.mod h1:65D70b+PuQbQu0BQKQiSgp7K5vfmxrPQkcMSNIZ5nA8=
|
||||
github.com/foo-dogsquared/hugo-theme-contentful v1.2.1-0.20201030114530-c0a2488a58fb h1:W2HZmYuXfPDq7QMW0TOMSB6uI6qqbobwXRGEiCcdk9U=
|
||||
github.com/foo-dogsquared/hugo-theme-contentful v1.2.1-0.20201030114530-c0a2488a58fb/go.mod h1:BL7L5CENEhUx+miRRaOZ9SVC92j9MAMztirBWtTpiPc=
|
||||
github.com/refactoringui/heroicons v0.4.2 h1:gLYH0RH4nLh81yxAC/JgyvKIeK0d+sBVF/I2XkPb6U8=
|
||||
github.com/refactoringui/heroicons v0.4.2/go.mod h1:82HsLWQga7MkEl5aK8TctxPPIBlXrsyWcVTB57uipuk=
|
||||
github.com/simple-icons/simple-icons v0.0.0-20201025110046-413f781fd706/go.mod h1:oOgUUt8yVYOso/wEBi2ojfZP2MU/xxiNccIpaE+jCvE=
|
||||
10
layouts/_default/baseof.html
Normal file
10
layouts/_default/baseof.html
Normal file
@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode | default "en" }}">
|
||||
{{- partialCached "head.html" . -}}
|
||||
<body>
|
||||
{{- partialCached "components/theme-button.html" . }}
|
||||
{{- partialCached "header.html" . -}}
|
||||
{{- block "main" . }}{{- end }}
|
||||
{{- partialCached "footer.html" . -}}
|
||||
</body>
|
||||
</html>
|
||||
20
layouts/_default/list.html
Normal file
20
layouts/_default/list.html
Normal file
@ -0,0 +1,20 @@
|
||||
{{ define "main" }}
|
||||
<hr>
|
||||
{{ .Content }}
|
||||
|
||||
{{- /* The homepage should show only pages from the given sections (with `$.Site.Params.mainSections`).
|
||||
Otherwise, we take the pages of a section. */ -}}
|
||||
{{- $pages := .Pages }}
|
||||
{{- if .IsHome }}
|
||||
{{- $pages = where $.Site.RegularPages "Type" "in" $.Site.Params.mainSections }}
|
||||
{{- end }}
|
||||
|
||||
{{- range (where (.Paginate $pages).Pages "Params.hidden" "!=" true) }}
|
||||
<article class="post">
|
||||
<h1><a href="{{ .Permalink }}" aria-label="{{ .Title }}">{{ .Title }}</a></h1>
|
||||
{{ partial "partials/components/post-meta.html" . }}
|
||||
</article>
|
||||
{{- end }}
|
||||
|
||||
{{- partial "pagination.html" (dict "Paginator" .Paginator "activeNumberOfPages" 2) }}
|
||||
{{- end }}
|
||||
58
layouts/_default/single.html
Normal file
58
layouts/_default/single.html
Normal file
@ -0,0 +1,58 @@
|
||||
{{ define "main" }}
|
||||
|
||||
<article class="post--single">
|
||||
<header>
|
||||
<h1>{{ .Title }}</h1>
|
||||
</header>
|
||||
{{ partial "partials/components/post-meta.html" . }}
|
||||
|
||||
{{ $is_toc := cond (ne .Params.toc nil) .Params.toc $.Site.Params.toc }}
|
||||
{{ if (and $is_toc (gt (countrunes .TableOfContents) 0)) }}
|
||||
<style>
|
||||
#TableOfContents:not(:empty)::before {
|
||||
content: "{{ i18n "table_of_contents" }}";
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
{{ .TableOfContents }}
|
||||
{{ end }}
|
||||
|
||||
<main>
|
||||
{{ .Content }}
|
||||
</main>
|
||||
|
||||
<hr>
|
||||
<div class="post__meta--single">
|
||||
<!-- List the author(s) of the article. -->
|
||||
{{- with .Params.author }}
|
||||
{{- $names := slice }}
|
||||
{{- range . }}{{ $names = $names | append .name }}{{ end }}
|
||||
<p data-content-author="{{ jsonify $names }}">{{ i18n "published_by" }}: {{ delimit $names ", " (printf " %s " (i18n "and")) }}</p>
|
||||
{{- end }}
|
||||
|
||||
<!-- Only show the creation date if the `date` field is valid. -->
|
||||
{{- if ne (.Date.Format "2006") "0001" -}}
|
||||
<!-- Publication date. -->
|
||||
<p data-content-publication-date="{{ .Date }}">{{ i18n "published_on" }}: <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</time></p>
|
||||
{{- end }}
|
||||
|
||||
<!-- Modification date (will only appear if the publication date is less than the modified date.) -->
|
||||
{{- if ne .Date .Lastmod }}
|
||||
<p data-content-modification-date="{{ .Lastmod }}">{{ i18n "updated_on" }}: <time datetime="{{ .Lastmod.Format "2006-01-02" }}">{{ .Lastmod.Format "2006-01-02" }}</time></p>
|
||||
{{- end }}
|
||||
|
||||
<!-- Link the translated versions if the article has at least one translated page. -->
|
||||
{{- if .IsTranslated }}
|
||||
{{- $lang_links := slice }}
|
||||
{{- $langs := slice }}
|
||||
{{- range .Translations }}
|
||||
{{- $lang := cond (ne .Language.LanguageName nil) .Language.LanguageName .Lang }}
|
||||
{{ $lang_links = $lang_links | append (printf "<a href=%s>%s</a>" .Permalink $lang) }}
|
||||
{{ $langs = $langs | append $lang }}
|
||||
{{- end }}
|
||||
<p data-content-translations="{{ jsonify $langs }}">{{ i18n "available_translations" }}: {{ delimit $lang_links "," (printf " %s " (i18n "and")) }}</p>
|
||||
{{- end }}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{{ end }}
|
||||
81
layouts/partials/components.html
Normal file
81
layouts/partials/components.html
Normal file
@ -0,0 +1,81 @@
|
||||
{{- /*
|
||||
Here's where all of the inline partials are defined.
|
||||
If the partial is short enough, it should be put here.
|
||||
*/ -}}
|
||||
|
||||
{{- /* This is a partial that creates an icon from the icon templates. */ -}}
|
||||
{{- define "partials/components/icon.html" }}
|
||||
{{- $icon := . }}
|
||||
{{- $res := resources.ExecuteAsTemplate (printf $icon.output $icon.id) $icon.id (resources.Get $icon.template) }}
|
||||
<svg>
|
||||
<use href="{{ $res.Permalink }}#{{ $icon.id }}"></use>
|
||||
</svg>
|
||||
{{- end }}
|
||||
|
||||
|
||||
{{- /* A partial that aliases the Heroicon template from the icon partial */ -}}
|
||||
{{- define "partials/components/heroicon.html" }}
|
||||
{{- partial "components/icon.html" (dict "id" . "output" "icons/generic/%s.svg" "template" "templates/heroicon.svg") }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
{{- define "partials/components/theme-button.html" }}
|
||||
{{- if gt (len (index $.Site.Data "more-contentful").themes) 1 }}
|
||||
<div class="site__theme-btn" aria-label="Theme toggle">
|
||||
{{ partial "components/heroicon.html" "color-swatch" }}
|
||||
<div class="site__theme-dropdown">
|
||||
{{- range $filename, $scheme := (index $.Site.Data "more-contentful").themes }}
|
||||
{{- $name := cond (eq $filename "_index") (printf "%s (default)" .scheme) .scheme }}
|
||||
<div class="site__theme-item" {{ if ne $filename "_index" }}data-theme="{{ .scheme }}"{{ end }}>{{ $name }}</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
</svg>
|
||||
</div>
|
||||
<script defer>
|
||||
const themeDropdown = document.querySelector('.site__theme-btn');
|
||||
themeDropdown.addEventListener('click', (event) => {
|
||||
const { target } = event;
|
||||
if (target.classList.contains("site__theme-item")) {
|
||||
if (target.dataset.theme) {
|
||||
theme = target.dataset.theme;
|
||||
window.localStorage.setItem("theme", theme);
|
||||
document.documentElement.dataset.theme = theme;
|
||||
} else {
|
||||
window.localStorage.removeItem("theme");
|
||||
delete document.documentElement.dataset.theme;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
||||
|
||||
{{- define "partials/components/post-meta.html" }}
|
||||
<div class="list post__meta">
|
||||
{{- if ne (.Date.Format "2006") "0001" -}}
|
||||
<time datetime="{{ .Date }}">
|
||||
{{ partial "components/heroicon.html" "calendar" }}
|
||||
<span style="margin-left: 0.5em;">{{ .Date.Format "2006-01-02" }}</span>
|
||||
</time>
|
||||
{{- end }}
|
||||
|
||||
{{- if and .GitInfo (ne (.Date.Format "2006-01-02") (.Lastmod.Format "2006-01-02")) }}
|
||||
<time datetime="{{ .Lastmod }}">
|
||||
{{ partial "components/heroicon.html" "refresh" }}
|
||||
<span style="margin-left: 0.5em;">{{ .Lastmod.Format "2006-01-02" }}</span>
|
||||
</time>
|
||||
{{- end }}
|
||||
|
||||
{{- /* The authors are appended with 'et al' if there's more than one author in the map. */ -}}
|
||||
{{ with .Params.author }}
|
||||
{{ $author := index (first 1 .) 0 }}
|
||||
<span data-authors="{{ jsonify . }}">
|
||||
{{ partial "components/heroicon.html" "pencil" }}
|
||||
<span style="margin-left: 0.5em;">
|
||||
{{ $author.name }}{{ if ge (len .) 2 }}, et al.{{ end }}
|
||||
</span>
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{- end }}
|
||||
43
layouts/partials/footer.html
Normal file
43
layouts/partials/footer.html
Normal file
@ -0,0 +1,43 @@
|
||||
<hr>
|
||||
<footer>
|
||||
<!-- A convenient back to top link. -->
|
||||
<p><a href="#top">{{ i18n "back_to_top" | default "Back to top" }}</a></p>
|
||||
|
||||
<!-- Linking to other languages' homepage. -->
|
||||
{{ if $.Site.IsMultiLingual }}
|
||||
<p>{{ i18n "multilingual" }}:
|
||||
<span class="list site__languages">
|
||||
{{ range $.Site.Languages }}
|
||||
<a href="{{ . | relURL }}" hreflang="{{ .Lang }}">{{ with .LanguageName }}{{ . }}{{ else }}{{ .Lang }}{{ end }}</a>
|
||||
{{ end }}
|
||||
</span>
|
||||
</p>
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- List all of the social media links -->
|
||||
{{ with (index $.Site.Data "more-contentful").contacts }}
|
||||
<ul class="list site__socials">
|
||||
{{ $useImage := index . "useImage" | default false }}
|
||||
|
||||
{{ $links := sort .links "id" "asc" }}
|
||||
{{ $links = sort $links "weight" "asc" }}
|
||||
{{- range $links -}}
|
||||
<li>
|
||||
<a {{ if $useImage }}class="site__social-icon"{{ end }} rel="me" href="{{ .url }}" aria-label="{{ with .name }}{{ . }}{{ else }}{{ .id }}{{ end }}">
|
||||
{{- if $useImage }}
|
||||
{{- partial "components/icon.html" (dict "id" .id "output" "icons/brand/%s.svg" "template" "templates/simple-icon.svg") }}
|
||||
{{- else }}
|
||||
{{- .name }}
|
||||
{{- end }}
|
||||
</a>
|
||||
</li>
|
||||
{{- end -}}
|
||||
</ul>
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- Copyright info. -->
|
||||
<p>{{ with $.Site.Copyright }}{{ . | markdownify }}{{ else }}© {{ now.Year }} {{ with $.Site.Author.name }}{{ . }}{{ else }}{{ $.Site.Title }}{{ end }}{{ end }}</p>
|
||||
</footer>
|
||||
|
||||
60
layouts/partials/head.html
Normal file
60
layouts/partials/head.html
Normal file
@ -0,0 +1,60 @@
|
||||
<title>{{ if .IsHome }}{{ $.Site.Title | safeHTML }}{{ else }}{{ .Title | safeHTML }}{{ end }}</title>
|
||||
|
||||
{{- $stylesheets := slice }}
|
||||
|
||||
<!-- The main stylesheet being compiled. -->
|
||||
{{- $main := resources.Get "scss/main.scss" | resources.ToCSS }}
|
||||
|
||||
{{- /* Combine all of the custom schems in under one stylesheet */ -}}
|
||||
{{ $scheme_template := resources.Get "templates/theme.scss" }}
|
||||
{{- $themes := $scheme_template | resources.ExecuteAsTemplate "css/themes.css" . | resources.ToCSS }}
|
||||
|
||||
{{- /* Append the main stylesheet to be the last so the resulting stylesheet will make the custom colorschemes at the front. */ -}}
|
||||
{{ $stylesheets = $stylesheets | append $themes $main }}
|
||||
|
||||
{{ $style := $stylesheets | resources.Concat "css/main.css" }}
|
||||
|
||||
{{- /* Only enable asset bundling in production */ -}}
|
||||
{{- if hugo.IsProduction }}
|
||||
{{- $style = $style | resources.Minify | resources.Fingerprint -}}
|
||||
{{- end }}
|
||||
<link rel="stylesheet" href="{{ $style.Permalink }}" />
|
||||
|
||||
{{- /* Some sane <meta> tags default */ -}}
|
||||
{{ hugo.Generator }}
|
||||
<meta charset="utf-8">
|
||||
|
||||
{{- with .Site.Author }}
|
||||
{{- $names := slice }}
|
||||
{{- range . }}{{ $names = $names | append .name }}{{ end }}
|
||||
<meta name="author" content="{{ delimit $names ", " (printf " %s " (i18n "and")) }}" />
|
||||
{{- end }}
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<meta name="description" content="{{ if (and (eq .Kind "home") .IsHome) }}{{ .Site.Title }}{{ else }}{{ .Summary | safeHTML }}{{ end }}" />
|
||||
{{- template "_internal/twitter_cards.html" . }}
|
||||
{{- template "_internal/opengraph.html" . }}
|
||||
|
||||
|
||||
{{- /* Linking all of the output formats for discovery. */ -}}
|
||||
{{- range .OutputFormats }}
|
||||
{{- printf "<link rel=%q type=%q href=%q />" .Rel .MediaType.Type .Permalink | safeHTML }}
|
||||
{{- end }}
|
||||
|
||||
|
||||
{{- if hugo.IsProduction }}
|
||||
{{ template "_internal/google_analytics_async.html" . }}
|
||||
{{ template "_internal/disqus.html" . }}
|
||||
{{- end }}
|
||||
|
||||
|
||||
{{- /* Persistent theme.
|
||||
It's a very small script so there's little effect on perceived performance. */ -}}
|
||||
<script>
|
||||
let theme = window.localStorage.getItem('theme');
|
||||
if (theme) {
|
||||
document.documentElement.dataset.theme = theme;
|
||||
}
|
||||
</script>
|
||||
|
||||
10
layouts/partials/header.html
Normal file
10
layouts/partials/header.html
Normal file
@ -0,0 +1,10 @@
|
||||
<nav aria-label="Primary navigation">
|
||||
<a class="site__title" href="{{ "" | absLangURL }}">{{ $.Site.Title }}</a>
|
||||
<div class="list site__links">
|
||||
{{ with $.Site.Menus.main }}
|
||||
{{ range . -}}
|
||||
<a href="{{ .URL | absLangURL }}">{{- .Name -}}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</nav>
|
||||
65
layouts/partials/pagination.html
Normal file
65
layouts/partials/pagination.html
Normal file
@ -0,0 +1,65 @@
|
||||
{{ $pag := .Paginator }}
|
||||
|
||||
{{- /* The minimum pages starting from the first page */ -}}
|
||||
{{ $minimumPage := .minimumPage | default 1 }}
|
||||
|
||||
{{- /* The number of pages to be shown with the active page. */ -}}
|
||||
{{ $activeNumberOfPages := .activeNumberOfPages | default 2 }}
|
||||
|
||||
{{- /* Since the active page is also included when adding the in-between pages of the active page, we need to increment it to mitigate against it. */ -}}
|
||||
{{ $midpointPages := add $activeNumberOfPages 1 }}
|
||||
|
||||
{{ if gt $pag.TotalPages 1 -}}
|
||||
<ul class="pagination">
|
||||
{{- $ellipsed := false -}}
|
||||
{{- $shouldEllipse := false -}}
|
||||
{{- range $pag.Pagers -}}
|
||||
{{ $minimumActivePage := sub $pag.PageNumber $activeNumberOfPages }}
|
||||
{{ $maximumActivePage := add $pag.PageNumber $activeNumberOfPages }}
|
||||
|
||||
{{- /* Make all of the given number of pages starting from both ends to be visible */ -}}
|
||||
{{- $showNumber := or (le .PageNumber $minimumPage) (lt (sub .TotalPages .PageNumber) $minimumPage) -}}
|
||||
|
||||
{{- /* Make all of the given number of pages between the active page number visible */ -}}
|
||||
{{- $showNumber := or $showNumber (and (gt .PageNumber (sub $pag.PageNumber $midpointPages)) (lt .PageNumber (add $pag.PageNumber $midpointPages))) -}}
|
||||
|
||||
{{- /*
|
||||
Make all of the page number that is just before/after the minimum page threshold to be visible.
|
||||
This is applied to those situations where there's only one number remaining before the end
|
||||
*/ -}}
|
||||
{{ if eq .PageNumber (sub $minimumActivePage 1) }}
|
||||
{{ $showNumber = or $showNumber (eq (sub $minimumActivePage $minimumPage) (add $pag.First.PageNumber 1)) }}
|
||||
{{ else if eq .PageNumber (add $maximumActivePage 1) }}
|
||||
{{ $showNumber = or $showNumber (eq (add $maximumActivePage 1) (sub $pag.Last.PageNumber $minimumPage)) }}
|
||||
{{ end }}
|
||||
|
||||
{{- if $showNumber -}}
|
||||
{{- $ellipsed = false -}}
|
||||
{{- $shouldEllipse = false -}}
|
||||
{{- else -}}
|
||||
{{- $shouldEllipse = not $ellipsed -}}
|
||||
{{- $ellipsed = true -}}
|
||||
{{- end -}}
|
||||
{{- if $showNumber }}
|
||||
<li>
|
||||
<a class="page-link{{ if eq . $pag }}--active{{ end }}" href="{{ .URL }}"
|
||||
{{- if eq (sub $pag.PageNumber .PageNumber) 1 }}
|
||||
rel="prev"
|
||||
aria-label="Previous"
|
||||
{{- else if (eq (sub $pag.PageNumber .PageNumber) -1) }}
|
||||
rel="next"
|
||||
aria-label="Next"
|
||||
{{- else if (eq $pag.PageNumber .PageNumber) }}
|
||||
aria-label="Current"
|
||||
aria-current="page"
|
||||
{{- end -}}
|
||||
>{{ .PageNumber }}</a>
|
||||
</li>
|
||||
{{- else if $shouldEllipse }}
|
||||
<li class="page-item disabled">
|
||||
<span aria-hidden="true"> … </span>
|
||||
</li>
|
||||
{{- end -}}
|
||||
{{- end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
13
theme.toml
Normal file
13
theme.toml
Normal file
@ -0,0 +1,13 @@
|
||||
name = "hugo-theme-more-contentful"
|
||||
license = "MIT"
|
||||
licenselink = "https://github.com/foo-dogsquared/hugo-theme-more-contentful/blob/master/LICENSE"
|
||||
description = "A Hugo theme extending the Contentful theme to be more modern."
|
||||
homepage = "https://github.com/foo-dogsquared/hugo-theme-more-contentful"
|
||||
tags = [ "blog", "personal", "customizable", "minimalist", "responsive" ]
|
||||
features = [ "Easy addition of custom color schemes", "Multiple theme selection" ]
|
||||
min_version = "0.74"
|
||||
|
||||
[author]
|
||||
name = "Gabriel Arazas"
|
||||
homepage = "https://foo-dogsquared.github.io/hugo-theme-more-contentful"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user