From e2dbaf5d25de9edea371e780f28230cd190b476a Mon Sep 17 00:00:00 2001 From: Gabriel Arazas Date: Fri, 13 May 2022 17:39:42 +0800 Subject: [PATCH] Add example site Still the same demo to be deployed, just on a different location than a separate branch this time. --- CHANGELOG.adoc | 1 + exampleSite/.gitignore | 18 + exampleSite/.hugo_build.lock | 0 exampleSite/README.md | 6 + exampleSite/config.toml | 139 ++++++ exampleSite/content/en/about.adoc | 24 + exampleSite/content/en/archives.adoc | 8 + .../asciidoctor-article-template.adoc | 114 +++++ .../asciidoctor-extended-syntax-guide.adoc | 196 +++++++++ .../en/articles/asciidoctor-syntax-guide.adoc | 211 +++++++++ .../content/en/articles/emoji-support.md | 45 ++ .../en/articles/extending-contentful.adoc | 208 +++++++++ .../content/en/articles/hidden-post-test.adoc | 20 + .../en/articles/markdown-syntax-guide.md | 159 +++++++ .../mathjax-support-for-asciidoctor.adoc | 409 ++++++++++++++++++ .../articles/mathjax-support-for-markdown.md | 305 +++++++++++++ .../rss-atom-and-json-feed-support.adoc | 79 ++++ exampleSite/content/en/recipes/_index.adoc | 16 + .../configurable-list-of-contacts.adoc | 67 +++ .../en/recipes/creating-an-archive-page.adoc | 64 +++ .../en/recipes/customizing-your-head.adoc | 58 +++ .../en/recipes/open-graph-protocol.adoc | 27 ++ .../en/recipes/simple-icons-integration.adoc | 86 ++++ .../content/en/recipes/twitter-cards.adoc | 27 ++ exampleSite/content/tl/about.adoc | 27 ++ exampleSite/content/tl/archives.adoc | 8 + .../content/tl/articles/hidden-post-test.adoc | 18 + .../articles/philippines-national-anthem.adoc | 44 ++ .../rss-atom-and-json-feed-support.adoc | 80 ++++ exampleSite/go.mod | 10 + exampleSite/go.sum | 5 + 31 files changed, 2479 insertions(+) create mode 100644 exampleSite/.gitignore create mode 100644 exampleSite/.hugo_build.lock create mode 100644 exampleSite/README.md create mode 100644 exampleSite/config.toml create mode 100644 exampleSite/content/en/about.adoc create mode 100644 exampleSite/content/en/archives.adoc create mode 100644 exampleSite/content/en/articles/asciidoctor-article-template.adoc create mode 100644 exampleSite/content/en/articles/asciidoctor-extended-syntax-guide.adoc create mode 100644 exampleSite/content/en/articles/asciidoctor-syntax-guide.adoc create mode 100644 exampleSite/content/en/articles/emoji-support.md create mode 100644 exampleSite/content/en/articles/extending-contentful.adoc create mode 100644 exampleSite/content/en/articles/hidden-post-test.adoc create mode 100644 exampleSite/content/en/articles/markdown-syntax-guide.md create mode 100644 exampleSite/content/en/articles/mathjax-support-for-asciidoctor.adoc create mode 100644 exampleSite/content/en/articles/mathjax-support-for-markdown.md create mode 100644 exampleSite/content/en/articles/rss-atom-and-json-feed-support.adoc create mode 100644 exampleSite/content/en/recipes/_index.adoc create mode 100644 exampleSite/content/en/recipes/configurable-list-of-contacts.adoc create mode 100644 exampleSite/content/en/recipes/creating-an-archive-page.adoc create mode 100644 exampleSite/content/en/recipes/customizing-your-head.adoc create mode 100644 exampleSite/content/en/recipes/open-graph-protocol.adoc create mode 100644 exampleSite/content/en/recipes/simple-icons-integration.adoc create mode 100644 exampleSite/content/en/recipes/twitter-cards.adoc create mode 100644 exampleSite/content/tl/about.adoc create mode 100644 exampleSite/content/tl/archives.adoc create mode 100644 exampleSite/content/tl/articles/hidden-post-test.adoc create mode 100644 exampleSite/content/tl/articles/philippines-national-anthem.adoc create mode 100644 exampleSite/content/tl/articles/rss-atom-and-json-feed-support.adoc create mode 100644 exampleSite/go.mod create mode 100644 exampleSite/go.sum diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index 05c0635..3f8ffec 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -13,6 +13,7 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version * Update the terms page. +* Move the example site into the project for easier testing and development. === Removed diff --git a/exampleSite/.gitignore b/exampleSite/.gitignore new file mode 100644 index 0000000..a6d7b49 --- /dev/null +++ b/exampleSite/.gitignore @@ -0,0 +1,18 @@ + +# Created by https://www.gitignore.io/api/hugo +# Edit at https://www.gitignore.io/?templates=hugo + +/content/ +/node_modules/ + +### 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 diff --git a/exampleSite/.hugo_build.lock b/exampleSite/.hugo_build.lock new file mode 100644 index 0000000..e69de29 diff --git a/exampleSite/README.md b/exampleSite/README.md new file mode 100644 index 0000000..9daf420 --- /dev/null +++ b/exampleSite/README.md @@ -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. diff --git a/exampleSite/config.toml b/exampleSite/config.toml new file mode 100644 index 0000000..72d7652 --- /dev/null +++ b/exampleSite/config.toml @@ -0,0 +1,139 @@ +baseURL = "https://foo-dogsquared.github.io/hugo-theme-contentful/" +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-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"] + + +[security] + enableInlineShortcodes = false + [security.exec] + allow = ['^dart-sass-embedded$', '^go$', '^npx$', '^postcss$', '^asciidoctor$'] + osEnv = ['(?i)^(PATH|PATHEXT|APPDATA|TMP|TEMP|TERM)$'] + + [security.funcs] + getenv = ['^HUGO_'] + + [security.http] + methods = ['(?i)GET|POST'] + urls = ['.*'] diff --git a/exampleSite/content/en/about.adoc b/exampleSite/content/en/about.adoc new file mode 100644 index 0000000..3ad9c0e --- /dev/null +++ b/exampleSite/content/en/about.adoc @@ -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. diff --git a/exampleSite/content/en/archives.adoc b/exampleSite/content/en/archives.adoc new file mode 100644 index 0000000..98aecda --- /dev/null +++ b/exampleSite/content/en/archives.adoc @@ -0,0 +1,8 @@ +--- +title: "Archives" +layout: "archives" +--- + += Archives +Gabriel Arazas +2019-09-02 diff --git a/exampleSite/content/en/articles/asciidoctor-article-template.adoc b/exampleSite/content/en/articles/asciidoctor-article-template.adoc new file mode 100644 index 0000000..f36f5fb --- /dev/null +++ b/exampleSite/content/en/articles/asciidoctor-article-template.adoc @@ -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 +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]. + diff --git a/exampleSite/content/en/articles/asciidoctor-extended-syntax-guide.adoc b/exampleSite/content/en/articles/asciidoctor-extended-syntax-guide.adoc new file mode 100644 index 0000000..e2b4477 --- /dev/null +++ b/exampleSite/content/en/articles/asciidoctor-extended-syntax-guide.adoc @@ -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 +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. + +++++ +
+ + +++++ + +Here is the input from the source code of this document. + +[source, asciidoctor] +---- +++++ +
+ + +++++ +---- + +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].) diff --git a/exampleSite/content/en/articles/asciidoctor-syntax-guide.adoc b/exampleSite/content/en/articles/asciidoctor-syntax-guide.adoc new file mode 100644 index 0000000..36f82bb --- /dev/null +++ b/exampleSite/content/en/articles/asciidoctor-syntax-guide.adoc @@ -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 +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 `

`—`

` elements represent six levels of section headings. +`

` is the highest section level and `

` 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 ``, and an https://www.w3.org/TR/html5/syntax.html=syntax-end-tags[end tag], +such as ``. +(*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] +---- + + + + + Example HTML5 Document + + +

Test

+ + +---- + +As you can see, content output from Asciidoctor does not have +syntax highlighting. +You can use the built-in Hugo shortcode instead. + +{{< highlight html >}} + + + + + Example HTML5 Document + + +

Test

+ + +{{< /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. diff --git a/exampleSite/content/en/articles/emoji-support.md b/exampleSite/content/en/articles/emoji-support.md new file mode 100644 index 0000000..2cfd4a8 --- /dev/null +++ b/exampleSite/content/en/articles/emoji-support.md @@ -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. + +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. + +

🙈 :see_no_evil: 🙉 :hear_no_evil: 🙊 :speak_no_evil:

+ +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 >}} + +{{< /css.inline >}} \ No newline at end of file diff --git a/exampleSite/content/en/articles/extending-contentful.adoc b/exampleSite/content/en/articles/extending-contentful.adoc new file mode 100644 index 0000000..bd453d2 --- /dev/null +++ b/exampleSite/content/en/articles/extending-contentful.adoc @@ -0,0 +1,208 @@ +--- +title: "Extending Contentful" +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 post, 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. + + + + +== Customizing your `` + +Let's start with the most basic and perhaps most useful customization: modifying the `. +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 + + +{{- /* MathJax */ -}} + + + +{{- /* Prism.js */ -}} + + + + +``` + +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. + + + + +== Twitter cards + +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" -}}`.) + + + + +== Open Graph protocol + +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. + + + + +== An archive page + +This will add an archive page similar to archive pages https://davidtranscend.com/archives/[like] https://lukesmith.xyz/blogindex.html[these]. + +```go +{{- define "main" -}} + +

{{ .Title }}

+ +{{ .Content }} + +
+ +{{- /* 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" }} +
+

{{ .Key }}

+
    + {{- range where .Pages "Params.hidden" "!=" true -}} +
  • + {{ .Date.Format "2006-01-02" }} - + {{ .Title }} +
    • + {{- end -}} +
+
+ {{- 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. +``` + + + + +== Configurable social media links + +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 +
+{{- range (sort $.Site.Data.contact "weight" "asc") -}} +| {{- .name -}} | +{{- end -}} +
+``` + +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. diff --git a/exampleSite/content/en/articles/hidden-post-test.adoc b/exampleSite/content/en/articles/hidden-post-test.adoc new file mode 100644 index 0000000..1f83466 --- /dev/null +++ b/exampleSite/content/en/articles/hidden-post-test.adoc @@ -0,0 +1,20 @@ +--- +title: "Hidden post test" +date: 2020-05-12T21:29:52+08:00 +hidden: true + +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. diff --git a/exampleSite/content/en/articles/markdown-syntax-guide.md b/exampleSite/content/en/articles/markdown-syntax-guide.md new file mode 100644 index 0000000..351c639 --- /dev/null +++ b/exampleSite/content/en/articles/markdown-syntax-guide.md @@ -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. + + +## Headings + +Let's start with all possible headings. The HTML `

`—`

` elements represent six levels of section headings. `

` is the highest section level and `

` 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 ``, and an [end tag](https://www.w3.org/TR/html5/syntax.html#syntax-end-tags), such as ``. (*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 + +
    +
  • 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 +
        +
      1. Second item Third subitem First sub-subitem
        2. +
      2. Second item Third subitem Second sub-subitem
        3. +
      3. Second item Third subitem Third sub-subitem
        4. +
      +
    +
    • +
  • 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. + +> Quoted text. +> This line is part of the same quote. +> Also you can *put* **Markdown** into a blockquote. + +Blockquote with a citation. + +
+

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.

+
— Steve Wozniak
+
+ +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. + +| 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 + + + + + Example HTML5 Document + + +

Test

+ + +``` + +{{< highlight html >}} + + + + + Example HTML5 Document + + +

Test

+ + +{{< /highlight >}} + +## Other stuff — abbr, sub, sup, kbd, etc. + +GIF is a bitmap image format. + +H2O + +C6H12O6 + +Xn + Yn = Zn + +Press X to win. Or press CTRL+ALT+F to show FPS counter. + +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. diff --git a/exampleSite/content/en/articles/mathjax-support-for-asciidoctor.adoc b/exampleSite/content/en/articles/mathjax-support-for-asciidoctor.adoc new file mode 100644 index 0000000..134d46c --- /dev/null +++ b/exampleSite/content/en/articles/mathjax-support-for-asciidoctor.adoc @@ -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 +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. diff --git a/exampleSite/content/en/articles/mathjax-support-for-markdown.md b/exampleSite/content/en/articles/mathjax-support-for-markdown.md new file mode 100644 index 0000000..84ee616 --- /dev/null +++ b/exampleSite/content/en/articles/mathjax-support-for-markdown.md @@ -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. diff --git a/exampleSite/content/en/articles/rss-atom-and-json-feed-support.adoc b/exampleSite/content/en/articles/rss-atom-and-json-feed-support.adoc new file mode 100644 index 0000000..a6ee995 --- /dev/null +++ b/exampleSite/content/en/articles/rss-atom-and-json-feed-support.adoc @@ -0,0 +1,79 @@ +--- +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 +2019-09-04 +:stem: latexmath + + +This theme supports RSS, Atom, and JSON feed output for more ways of publishing web content for your visitors. +It is also suitable for reading content from feed readers. + +Here are the following documents used as references for the creation of the output feed 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] + +In this demo, it is enabled and you should be able to see them through the following links: + +* **RSS**: `$HUGO_URL/index.rss` +* **Atom**: `$HUGO_URL/index.atom` +* **JSON**: `$HUGO_URL/index.json` + +For enabling output feeds, utilize the https://gohugo.io/templates/output-formats[output formats] in your site configuration. + +If you're settling with this option, here's an example template for enabling all of the feed formats. + +[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"] +---- diff --git a/exampleSite/content/en/recipes/_index.adoc b/exampleSite/content/en/recipes/_index.adoc new file mode 100644 index 0000000..4ba544f --- /dev/null +++ b/exampleSite/content/en/recipes/_index.adoc @@ -0,0 +1,16 @@ +--- +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. diff --git a/exampleSite/content/en/recipes/configurable-list-of-contacts.adoc b/exampleSite/content/en/recipes/configurable-list-of-contacts.adoc new file mode 100644 index 0000000..f9dbb48 --- /dev/null +++ b/exampleSite/content/en/recipes/configurable-list-of-contacts.adoc @@ -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 +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 +
+{{- range (sort $.Site.Data.contacts "weight" "asc") -}} +| {{- .name -}} | +{{- end -}} +
+``` + +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. diff --git a/exampleSite/content/en/recipes/creating-an-archive-page.adoc b/exampleSite/content/en/recipes/creating-an-archive-page.adoc new file mode 100644 index 0000000..3d83e4b --- /dev/null +++ b/exampleSite/content/en/recipes/creating-an-archive-page.adoc @@ -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 +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" -}} + +

{{ .Title }}

+ +{{ .Content }} + +
+ +{{- /* 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" }} +
+

{{ .Key }}

+
    + {{- range where .Pages "Params.hidden" "!=" true -}} +
  • + {{ .Date.Format "2006-01-02" }} - + {{ .Title }} +
    • + {{- end -}} +
+
+ {{- 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. +``` + diff --git a/exampleSite/content/en/recipes/customizing-your-head.adoc b/exampleSite/content/en/recipes/customizing-your-head.adoc new file mode 100644 index 0000000..4001e18 --- /dev/null +++ b/exampleSite/content/en/recipes/customizing-your-head.adoc @@ -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 +2020-10-20 20:29:00 +0800 +:stem: latexmath + + +Let's start with the most basic and perhaps most useful customization: modifying the `. +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 + + +{{- /* MathJax */ -}} + + + +{{- /* Prism.js */ -}} + + + + +``` + +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. + diff --git a/exampleSite/content/en/recipes/open-graph-protocol.adoc b/exampleSite/content/en/recipes/open-graph-protocol.adoc new file mode 100644 index 0000000..cab5f50 --- /dev/null +++ b/exampleSite/content/en/recipes/open-graph-protocol.adoc @@ -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 +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. + diff --git a/exampleSite/content/en/recipes/simple-icons-integration.adoc b/exampleSite/content/en/recipes/simple-icons-integration.adoc new file mode 100644 index 0000000..fc8cda1 --- /dev/null +++ b/exampleSite/content/en/recipes/simple-icons-integration.adoc @@ -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] +---- +
+{{- range (sort $.Site.Data.contacts "weight" "asc") -}} + + {{ $location := printf "icons/%s.svg" .id }} + {{ with resources.Get $location }}{{ .Content | safeHTML }}{{ end }} | +{{- end -}} +
+---- + +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] +---- +
+{{- range (sort $.Site.Data.contacts "weight" "asc") -}} + + {{ $location := printf "icons/%s.svg" .id }} + {{ $icon := resources.Get $location }} + {{ if (countrunes $icon.Content) }} + {{ .Content | safeHTML }} + {{ else }} + {{ .name }} + {{ end }} + | +{{- end -}} +
+---- diff --git a/exampleSite/content/en/recipes/twitter-cards.adoc b/exampleSite/content/en/recipes/twitter-cards.adoc new file mode 100644 index 0000000..946f80c --- /dev/null +++ b/exampleSite/content/en/recipes/twitter-cards.adoc @@ -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 +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" -}}`.) + diff --git a/exampleSite/content/tl/about.adoc b/exampleSite/content/tl/about.adoc new file mode 100644 index 0000000..6cd5153 --- /dev/null +++ b/exampleSite/content/tl/about.adoc @@ -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]. diff --git a/exampleSite/content/tl/archives.adoc b/exampleSite/content/tl/archives.adoc new file mode 100644 index 0000000..98aecda --- /dev/null +++ b/exampleSite/content/tl/archives.adoc @@ -0,0 +1,8 @@ +--- +title: "Archives" +layout: "archives" +--- + += Archives +Gabriel Arazas +2019-09-02 diff --git a/exampleSite/content/tl/articles/hidden-post-test.adoc b/exampleSite/content/tl/articles/hidden-post-test.adoc new file mode 100644 index 0000000..13a2543 --- /dev/null +++ b/exampleSite/content/tl/articles/hidden-post-test.adoc @@ -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. diff --git a/exampleSite/content/tl/articles/philippines-national-anthem.adoc b/exampleSite/content/tl/articles/philippines-national-anthem.adoc new file mode 100644 index 0000000..5f71fd3 --- /dev/null +++ b/exampleSite/content/tl/articles/philippines-national-anthem.adoc @@ -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. +____ diff --git a/exampleSite/content/tl/articles/rss-atom-and-json-feed-support.adoc b/exampleSite/content/tl/articles/rss-atom-and-json-feed-support.adoc new file mode 100644 index 0000000..c4ca587 --- /dev/null +++ b/exampleSite/content/tl/articles/rss-atom-and-json-feed-support.adoc @@ -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 +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"] +---- diff --git a/exampleSite/go.mod b/exampleSite/go.mod new file mode 100644 index 0000000..42d6e36 --- /dev/null +++ b/exampleSite/go.mod @@ -0,0 +1,10 @@ +module demo + +go 1.15 + +require ( + github.com/foo-dogsquared/hugo-theme-contentful v2.0.0+incompatible // indirect + github.com/foo-dogsquared/hugo-web-feeds v0.0.1 // indirect +) + +replace github.com/foo-dogsquared/hugo-theme-contentful => ../ diff --git a/exampleSite/go.sum b/exampleSite/go.sum new file mode 100644 index 0000000..ae1aaab --- /dev/null +++ b/exampleSite/go.sum @@ -0,0 +1,5 @@ +github.com/foo-dogsquared/hugo-theme-contentful v1.2.0 h1:if43vUzFAipKlnobL9THtW+QsmXp9ZPMe/vXY/vBofs= +github.com/foo-dogsquared/hugo-theme-contentful v2.0.0+incompatible h1:IfLFh9SreWbTBuJKq6b5vvSLSThqZzHtmTL9/3HSLXs= +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=