{"id":13578468,"url":"https://github.com/sylhare/Type-on-Strap","last_synced_at":"2025-04-05T19:33:10.425Z","repository":{"id":37768916,"uuid":"105538315","full_name":"sylhare/Type-on-Strap","owner":"sylhare","description":"🎨 Simplistic, responsive jekyll based open source theme","archived":false,"fork":false,"pushed_at":"2025-03-31T13:33:21.000Z","size":110022,"stargazers_count":821,"open_issues_count":2,"forks_count":921,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-01T23:16:04.700Z","etag":null,"topics":["blog-theme","github-page","github-pages","jekyll","jekyll-blog","jekyll-search","jekyll-site","jekyll-theme","jekyll-website","portfolio-page","portfolio-websites","seo-tags","theme","type-on-strap"],"latest_commit_sha":null,"homepage":"https://sylhare.github.io/Type-on-Strap/","language":"Liquid","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sylhare.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-02T13:37:28.000Z","updated_at":"2025-04-01T20:08:55.000Z","dependencies_parsed_at":"2024-01-14T16:05:43.251Z","dependency_job_id":"2450f6da-cf36-4cfc-b5ee-f154d955d026","html_url":"https://github.com/sylhare/Type-on-Strap","commit_stats":{"total_commits":868,"total_committers":39,"mean_commits":"22.256410256410255","dds":"0.41013824884792627","last_synced_commit":"d0b976277b51da6799f7db50f8f0dca6f2528d28"},"previous_names":[],"tags_count":55,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylhare%2FType-on-Strap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylhare%2FType-on-Strap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylhare%2FType-on-Strap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylhare%2FType-on-Strap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sylhare","download_url":"https://codeload.github.com/sylhare/Type-on-Strap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247392969,"owners_count":20931802,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blog-theme","github-page","github-pages","jekyll","jekyll-blog","jekyll-search","jekyll-site","jekyll-theme","jekyll-website","portfolio-page","portfolio-websites","seo-tags","theme","type-on-strap"],"created_at":"2024-08-01T15:01:30.915Z","updated_at":"2025-04-05T19:33:10.410Z","avatar_url":"https://github.com/sylhare.png","language":"Liquid","readme":"# Type on Strap 🎨\n\n[![Build](https://github.com/sylhare/Type-on-Strap/actions/workflows/docker-build.yml/badge.svg)](https://github.com/sylhare/Type-on-Strap/actions/workflows/docker-build.yml)\n[![Gem Version](https://badge.fury.io/rb/type-on-strap.svg)](https://badge.fury.io/rb/type-on-strap)\n[![Docker Pulls](https://img.shields.io/docker/pulls/sylhare/type-on-strap)](https://hub.docker.com/r/sylhare/type-on-strap)\n\n[![Default Type on Strap blog](https://github.com/Sylhare/Type-on-Strap/blob/master/assets/img/screenshot.png?raw=true)](https://sylhare.github.io/Type-on-Strap/)\n\nA free and open-source [Jekyll](https://jekyllrb.com) theme. \nBased on Rohan Chandra [type-theme](https://github.com/rohanchandra/type-theme) packed with extra features and easily customizable:\n\n* Responsive design on all devices (🖥, 💻, 📱, ...)\n* Portfolio 🗂, Gallery 🖼 pages for your projects\n* Multi comments 💬 options  \n* Tags compatibility 🏷\n* Handle _Bootstrap_'ed pages: [Get Bootstrap](http://getbootstrap.com/)\n* 🔎 Search feature: [Simple-Jekyll-Search](https://github.com/christian-fei/Simple-Jekyll-Search)\n* Math Rendering : [KateX](https://github.com/Khan/KaTeX)\n* Diagram Rendering: [Mermaid-js](https://github.com/mermaid-js/mermaid)\n* 🖋 Nice fonts: [Font Awesome](https://fontawesome.com/), [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro), [Pacifico](https://fonts.google.com/specimen/Pacifico?selection.family=Pacifico) \n* Seo Tags: [Jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag)\n* 🛠 Syntax Highlighting: Easily customisable [Base16](https://github.com/chriskempson/base16)\n* 💡 Light and dark theme supported\n* Find free of rights images on [pexels](https://www.pexels.com/)\n\n\u003e [Demo Site](https://sylhare.github.io/Type-on-Strap/) \n\n## Usage\n\n### As a GitHub page 📋\n\n1. Fork and clone the [Type on Strap repo](https://github.com/sylhare/Type-On-Strap): `git clone https://github.com/Sylhare/Type-on-Strap.git`\n2. Install [Jekyll](https://jekyllrb.com/docs/installation/): `gem install jekyll`, check [#1](https://github.com/Sylhare/Type-on-Strap/issues/1) if you have a problem.\n3. Install the theme's dependencies: `bundle install`\n4. Customize the theme\n\t- GitHub Page: [update `_config.yml`](#site-configuration)\n5. Run the Jekyll server: `bundle exec jekyll serve`\n\n### As a ruby gem 💎\n\nCheck out this tutorial: [Use as Ruby Gem](#use-as-ruby-gem-)\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#/https://github.com/sylhare/Type-On-Strap)\n\n## Structure\n\nHere are the main files of the template\n\n```shell\n./Type-on-Strap\n├── _includes\t               # Theme includes\n├── _layouts                   # Theme layouts (see below for details)\n├── _portfolio\t               # Collection of articles for the portfolio page\n├── _posts                     # Blog posts\n├── _sass                      # Sass partials (compiled into css at runtime)\n├── assets\n|  ├── js\t               # JS compiled for distribution + raw sources\n|  ├── css                     # CSS compiled for distribution\n|  ├── fonts\t\t       # Font-Awesome, and other fonts\n|  └── img\t\t       # Images used for the template\n├── pages\n|   ├── 404.md\t\t       # To be displayed when url is wrong\n|   ├── about.md               # About example page\n|   ├── gallery.md             # Gallery page for your photos\n|   ├── portfolio.md\t       # Portfolio page for your projects\n|   ├── search.md\t       # Search page\n|   └── tags.md                # The tag page\n├── _config.yml                # sample configuration\n├── _data\n|  ├── authors.yml             # Update the post authors configurations \n|  ├── language.yml            # Localization configuration\n|  ├── biblio.yml              # To create a reference bibliography\n|  ├── social.yml              # Social configurations to share posts (RSS, shares, ...)\n|  └── icons.yml               # Footer icons (Twitter, Github, Stackoverflow, ...)\n└── index.html                 # sample home page (blog page paginated)\n```\n\t\n## Configure Type on Strap 🛠\n\nOpen `_config.yml` in a text editor to change most of the blog's settings.\n\nIf a variable in this document is marked as \"optional\", disable the feature by removing all text from the variable. \n\n### Site configuration\n\n#### Base url\n\nConfigure Jekyll as your own blog or with a \"baseurl\" in `_config.yml`:\n\nJekyll website *without* a \"baseurl\" (such as a **GitHub Pages website** with your username as the repository name):\n\n```yml\nbaseurl: \"\"\nurl: \"https://username.github.io\"\n```\n\nJekyll website *with* \"baseurl\" (like the Type on Strap [demo](https://sylhare.github.io/Type-on-Strap/) page):\n\n```yml\nbaseurl: \"/sub-directory\"\nurl: \"https://username.github.io\"\n```\n\n#### Jekyll blog configuration \n\nAnd here is the basic information you will need in your `_config.yml` for it to work properly:\n\n```yaml\n# BLOG CONFIGURATION\npost_navigation: true\npaginate: 10\npaginate_path: \"blog/page:num\"\nplugins: [jekyll-paginate, jekyll-seo-tag, jekyll-feed]\n```\n\nTo configure the blog part and default plugins. Those plugins are validated by GitHub page.\n\n#### Meta and Branding\n\n_Meta variables_ hold basic information about your Jekyll site, which will be used throughout the site \nand as _meta properties_ that are used for search engines, browsers, and the site's RSS feed.\n\nChange these variables in `_config.yml`:\n\n```yml\ntitle: My Jekyll Blog                 # Name of website\navatar: assets/img/avatar.png         # Path of avatar image, to be displayed in the theme's header\ndescription: My blog posts            # Short description, primarily used by search engines\nfavicon: assets/favicon.ico           # Icon displayed in the tab\ncolor_theme: auto                     # color theme auto, dark or light\n```\n\nYou can also customize the seo tags default option following the jekyll-seo-tag plugin [documentation](http://jekyll.github.io/jekyll-seo-tag/advanced-usage/).\nThe color theme can be set to dark or light (customize it in _variables.scss_). \nUsing _auto_ you'll have a tiny icon in the navbar allowing the use to manually switch from dark to light theme.\n\n### Theme customization 🎨\n\n#### Footer and Header text\n\nCustomize your site header/footer with these variables in `_config.yml`:\n\n```yml\nheader_text: Welcome to my Jekyll blog\nfooter_text: Copyright 2017\n```\n\nIf you don't want anything, replace the value by `\" \"`.\n\n#### Header's image\n\nThe header's image (tested with 2480x1280) can be set as one image with `header_feature_image`\nbut can also be responsive:\n\n```yml\nheader_feature_image: assets/img/header/my-header-image.png\nheader_feature_image_responsive: true\n```\n\nBy setting `header_feature_image_responsive` to true, it will look for images \nwith suffix `-small` (620x320) and `-medium` (1240x640) to display on smaller screen.\n\n#### Localisation string\n\nLocalization string is a way to quickly change the template language for text like *Next Post* or *Follow on*, ...\nYou can find all the properties in `_data/language.yml`.\n\nBy default, it is in English, but you can add your own language.\n\nHere you also can set the date format, e.g., set `str_date_format: '%B %-d, %Y'` for \"January, 13, 2024\",\n`str_date_format: '%Y-%m-%d'` for 2024-01-13, or `str_date_format: '%d.%m.%Y'` for 13.01.2024.\n\n### Google Analytics\n\nTo enable Google Analytics (GA4), add your [Measurement ID](https://support.google.com/analytics/answer/12270356?hl=en\u0026sjid=1593376271608310401-NA) \nto `_config.yml` like so:\n\n```yml\ngoogle_analytics: G-XXXXXXXXXX\n```\n\nIt will use the [Google Tag Manager](https://support.google.com/analytics/answer/10220869?hl=en\u0026ref_topic=9355633\u0026sjid=1593376271608310401-NA)\n\n### Comments 💬\n\n#### Disqus\n\nIf you have a [Disqus](https://disqus.com/) account, you can show a comments section below each post.\n\nTo enable Disqus comments, add your [Disqus shortname](https://help.disqus.com/customer/portal/articles/466208) \nto your project's `_config.yml` file:\n\n```yml\ncomments:\n  disqus_shortname: my_disqus_shortname\n```\n\n#### Cusdis\n\n[Cusdis](https://cusdis.com/) is an open-source alternative to Disqus.\nYou can read more about it in the [documentation](https://cusdis.com/doc#/)\n\nTo enable it, set your Cusdis name in `_config.yml`:\n\n```yaml\ncomments:\n  cusdis_app_id: my_data-app-id                                     \n```\n\n#### Utterances\n\n[Utterances](https://utteranc.es) is another open source alternative linked to one's GitHub account.\nIt stores the comments as GitHub issues on a repository for each page.\n\nInstall the utterance [app](https://github.com/apps/utterances) to your repo.\nAfter installing, add your info in the `_config.yml`:\n\n```yaml\ncomments:\n  utterances:              # Enable by filling below information. For more info, go to https://utteranc.es\n    repo:                  # your public comments repository (e.g. owner/repo)\n    issue-term:            # Issue term (e.g. \"comment\" consider issues with this word in the title as comments)\n    theme:                 # OPTIONAL: Take the `color_theme` by default, or set a custom one like github-dark-orange\n    label:                 # OPTIONAL: Adds an issue label in the issue\n```\n\n### Math typesetting with KateX\n\nWhen KateX is set in `_config.yml`:\n\n```yml\nkatex: true # to enable it\n```\n\nYou can then wrap math expressions with `$$` signs in your posts and make sure you have set the `katex` variable \nin `_config.yml` to `true` for math typesetting.\n\nFor inline math typesetting, type your math expression on the *same line* as your content. For example:\n\n```latex\nType math within a sentence $$2x^2 + x + c$$ to display inline\n```\n\nFor display math typesetting, type your math expression on a *new line*. For example:\n\n```latex\n$$\n  \\bar{y} = {1 \\over n} \\sum_{i = 1}^{n}y_i\n$$\n```\n\nYou can find a cheat sheet of the compatible LaTex symbols [online](https://artofproblemsolving.com/wiki/index.php/LaTeX:Symbols).\n\n### Diagrams with Mermaid\n\nEnable the [mermaid-js](https://github.com/mermaid-js/mermaid) diagram rendering by setting mermaid to true in the `_config.yml`.\nThis will load and init the [mermaid.min.js](https://mermaid-js.github.io/mermaid/getting-started/n00b-gettingStarted.html#4-calling-mermaid-from-a-relative-link).\n\n```yml\nmermaid: default # Enable mermaid-js for diagrams, use theme: base, forest, dark, default, neutral\n```\n\nFind all the help you need on the official [mermaid documentation](https://mermaid-js.github.io/mermaid/).\nUse `mermaid` as color highlighter language to render the diagram or with the `class=\"mermaid\"` inside the `\u003cdiv\u003e`:\n\n```markdown\n```mermaid\nsequenceDiagram\n    Alice-\u003e\u003eJohn: Hello John, how are you?\n    John--\u003e\u003eAlice: Great!\n```\n\n### Social icons\n\nIn `_data/social.yml` you can customize the social icons that will be displayed in the post to share your post.\nYou can also enable RSS.\nThe site icons come from [Font Awesome](https://fontawesome.com/).\n\nIn `_data/icons.yml` you can set the footer icon that will appear at the bottom of the page.\nThey will redirect the user on your profile on to other platforms like Twitter, GitHub and so many more!\n\n### Cookie consent\n\nYou can add a cookie consent with a disclaimer if you use Google Analytics while respecting the [GDPR](https://en.wikipedia.org/wiki/General_Data_Protection_Regulation).\nSet to true, there will be a banner at the bottom of the page with the disclaimer, and an _approve_ button.\nOnce the user clicks on \"Approve\" the cookies will be created for Google Analytics.\n\n#### Share in article\n\nThe share icons are the one at the bottom of the blog page if enabled.\nThey will on click redirect you to the logo's platform to share the article.\n\n#### Footer\n\nDisplay icons in the footer. \nAll icon variables should be your username enclosed in quotes (e.g. \"username\") in `_data/icons.yml`.\n\nYou can update the RSS settings in `_data/social` to change the default feed path (generated by [jekyll-feel](https://github.com/jekyll/jekyll-feed)).\nTo enable the share icons at the bottom of each article,\nset to true the one you'd like under `share` in the `_data/social.yml` file.\n\n### Personalize your Blog Posts 📝\n\nWhen writing a post, be sure in jekyll to:\n - Put it in the `_posts` folder\n - Name it with the date first like `2019-08-21-This-is-my-blog-post.md`\n\nPlease refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/posts/). \n\n#### Layout: Post\n\nThese are the basic features you can use with the `post` layout, in the comment the `Opt` means that\nit is optional.\n\n```yml\n\n---\nlayout: post\ntitle: Hello World                                # Title of the page\nhide_title: true                                  # [Opt] Hide the title when displaying the post, but shown in lists of posts\nfeature-img: \"assets/img/sample.png\"              # [Opt] Add a feature-image to the post\nthumbnail: \"assets/img/thumbnails/sample-th.png\"  # [Opt] Add a thumbnail image on blog view\ncolor: rgb(80,140,22)                             # [Opt] Add the specified color as feature image and links in post\nposition: 1                                       # [Opt] Set position on the menu navigation bar\ntags: [sample, markdown, html]                    # [Opt] Add tags to the page\n---\n```\n\nWith `thumbnail`, you can add a smaller image than the `feature-img`. \nIf you don't have a thumbnail, you can still use the same image as the feature one. Or use the gulp task to create it.\n\nIf you don't use a feature image, but `color`, the transparent background is set comes from `lineart.png`. \nYou can edit it in the config file (`_config.yml \u003e color_image`). If you want another one, put it in `/assets/img` as well. \n\nFor position, if not set on all pages, it will be by alphabetical order without `position` then by `position` order.\nIf two pages have the same position number, the order is decided by alphabetical order on the page title.\n\nThere's also `bootstrap: true` which is not mandatory and only useful if you want to add HTML content in your page that\nrequires [bootstrap](http://getbootstrap.com/).\nIt will respect the page and theme layout, mind the padding on the sides.\n\n#### Post excerpt\n\nThe [excerpt](https://jekyllrb.com/docs/posts/#post-excerpts) is the head of the article rendered in the blog page. \nThe length of the excerpt has a default of around `250` characters or can be manually set in the post using:\n\nin `conflig.yml`:\n\n```yml\nexcerpt: true\n```\n\nThen in your post, add the `excerpt separator`:\n\n```yml\n\n---\nlayout: post\ntitle: Sample Page\nexcerpt_separator: \u003c!--more--\u003e\n---\n\nsome text in the excerpt\n\u003c!--more--\u003e\n... rest of the text not shown in the excerpt ...\n```\n\nThe html is stripped out of the excerpt, so it only displays text.\n\n#### Image aligner\n\nTo easily add align images side by side in your article using the `aligner.html` include:\n\n```liquid\n{% include aligner.html \n  images=\"path/to/img1.png,path/to/img2.png,path/to/img3.png\" \n  column=3 \n  caption=\"some description\" \n%}\n```\n\nUse it in any markdown file. There are two fields in the _include_ you need to look into:\n  - _images_: Takes a string separated with `,` of all the images' path. \n    - It by default look into `assets/img/` so give the path from there.\n  - _column_: (OPTIONAL) Set the number of column you want your imaged displayed in.\n    - default is 2 columns\n    - `column=3` set 3 columns\n    - `column=\"auto\"` makes as many columns as images\n  - _caption_: (OPTIONAL) Add a caption to the images\n\n#### Code highlight\n\nLike all CSS variables in the theme, you can edit the color of the code highlight in `_sass \u003e base \u003e _variables.scss`.\nThe code highlighting works with [base16](https://github.com/chriskempson/base16-html-previews/tree/master/css) you can find existing example \nof your favourite highlight color scheme on this format.\n\n## Feature pages and layouts \n\nAll feature pages besides the \"home\" one are stored in the `page` folder, \nthey will appear in the navigation bar unless you set `Hide: true` in the front matter. \n\nHere are the documentation for the other feature pages that can be added through `_config.yml`. \n\nNon-standard features are documented below.\n\n### Layout: Default\n\nThis layout includes the head, navigation bar and footer around your content. \nUnless you are making a custom layout you won't need it.\n\n### Layout: Home 🏡\n\nThis page is used as the home page of the template (in the `index.html`). It displays the list of articles in `_posts`.\nYou can use this layout in another page (adding a title to it will make it appear in the navigation bar).\n\nThe recommended width and height for the home picture is width:`2484px;` and height:`1280px` \nwhich are the dimensions of the actual picture for it to be rolling down as you scroll the page.\n\nIf your posts are not displaying ensure that you have added the line `paginate: 5` to `_config.yml`.\n\n### Layout: Page 📄\n\nThe page layout has a bit more features explained here.\n\n```yml\n\n---\nlayout: page\ntitle: \"About\" \nsubtitle: \"This is a subtitle\"   \nfeature-img: \"assets/img/sample.png\" \npermalink: /about/                   # Set a permalink your your page\nhide: true                           # Prevent the page title to appear in the navbar\nicon: \"fa-search\"                    # Will Display only the fontawesome icon (here: fa-search) and not the title\ntags: [sample, markdown, html]\n---\n```\n\nThe hide only hides your page from the navigation bar, it is, however, still generated and can be accessed through its link. \n\n### Feature: Portfolio 🗂\n\nPortfolio is a feature page that will take all the markdown/html files in the `_portfolio` folder to create a 3-columns image portfolio matrix.\n\nTo use the portfolio, simply create a `portfolio.md` with this information inside:\n\n```yml\n\n--- \nlayout: page\ntitle : Portfolio \n---\n\n{% include default/portfolio.html %}\n```\n\n#### Portfolio posts\n\nYou can format the portfolio posts in the `_portfolio` folder using the `post layout`. \nHere is a little explanation on some of the possible features you can use.\n\nIf you decide to use a date, please be sure to use one that can be parsed such as `yyyy-mm-dd`. \nYou can see more format examples in the demo posts that are available for the theme:\n\n```yml\n\n---\nlayout: post\ntitle: Circus\t\t\t\t       # Title of the portfolio post\nfeature-img: \"assets/img/portfolio/cake.png\"   # Will display the image in the post\nimg: \"assets/img/portfolio/cake.png\"           # Will display the image in the portfolio page\ndate: 2019-07-25\t\t \t       # Not mandatory, however needs to be in date format to display the date\n---\n```\n\n#### Portfolio in gem\n\nMake sure your `_config.yml` contains the following if you are using the theme as a gem:\n\n```yml\n# PORTFOLIO\ncollections:\n  portfolio:\n    output: true\n    permalink: /:collection/:name\n```    \n\nThis creates the collection for Jekyll, so it can find and display your portfolio posts.\n\n### Feature: Gallery 🖼\n\nYou can create a gallery using [Masonry JS](https://masonry.desandro.com/) which will placing the pictures at the optimal position \nbased on available vertical space. \nYou need to specify the `gallery_path` which will be used to find the pictures to render. \nIt will take all the pictures under that directory. Then use the `include` to add it in your page. \n\n```yml\n\n---\nlayout: page\ntitle: Gallery\ngallery: \"assets/img/pexels\"\n---\n\n{% include default/gallery.html gallery_path=page.gallery %}\n```\n\n### Feature: Search 🔍\n\nThe search feature is based on [Simple-Jekyll-search](https://github.com/christian-fei/Simple-Jekyll-Search) \nthere is a `search.liquid` file that will create a list of all the site posts, pages and portfolios. \nThen there's a script displaying the formatted results in the _search page_.\n\nTo exclude contents from the search add the `exclude: true` option in the markdown header. \nBy default, all posts, pages, and collections are available in the search.\nHide the search page from the navigation bar with the `hide: true` option. \nYou can remove the icon by removing `icon`:\n\n```yml\n\n---\nlayout: search\ntitle: Search\nicon: \"search\"\n---\n```\n\n### Feature: Tags 🏷\n\nTags should be placed between `[]` in your post metadata. Separate each tag with a comma. \nTags are recommended for posts and portfolio items.\n\nFor example:\n\n```yml\n\n---\nlayout: post\ntitle: Markdown and HTML\ntags: [sample, markdown, html]\n---\n```\n\n\u003e Tags are case-sensitive `Tag_nAme` ≠ `tag_name`\n\nAll the tags will be listed on the \"tags\" page with a link toward the pages or posts.\nThe Tag page can be hidden with the `hide` option. You can remove the icon by removing `icon` (like for the search page).\n\n## Advanced\n\n### Liquid tags\n\nJekyll works with [liquid](https://shopify.github.io/liquid/) tags usually represented by:\n\n```liquid\n{{ liquid.tag | filter }}\n```\n\nThese are useful to render your jekyll files. \nYou can learn more about them on [shopify's doc](https://help.shopify.com/themes/liquid/basics)\n\n### Gulp toolbox\n\n#### Requirements\n\nBefore you need to have *node* and `npm` installed:\n\n- Windows: https://nodejs.org/\n- Ubuntu/Debian: `apt-get install nodejs npm libgl1 libxi6`\n- Fedora (dnf) / RHEL/CentOS (yum): `dnf install node npm libglvnd-glx libXi`\n\nThen you need to install [`gulp-cli`](https://gulpjs.com/) and its dependencies:\n\n```bash\ncd assets/\nsudo npm install gulp-cli -g\nnpm install\n```\n\n#### Minimizing and optimizing: css, js and images\n\nYou can run the default task that will compress the js, css and images and create the thumbnails for the supported image\nformats:\n\n```bash\ncd assets/\ngulp default\ngulp thumbnails-all # to create all of the images thumbnails\ngulp thumbnails     # to create thumbnails for the feature-img/ only\n# tip: run a git status to see the changes\ngit status\n```\n\nYou can find more about the gulp tasks in the [gulpfile.js](assets/gulpfile.js).\n\n#### Create a post\n\nTo create a `.md` file in the *_posts/* section with the jekyll format of today's date.\nUse this command with the title you'd like to create the very basic post.\n\n```bash\ngulp post -n 'title of the post'\n```\n\nA file will be created following the format `yyyy-mm-dd-title-of-the-post.md` with default post attributes inside.\nNothing will happen if the file exists already.\n\n### Use as Ruby Gem 💎\n\nYou can use Type-on-strap as a [gem](https://rubygems.org/gems/type-on-strap). \n\nUsing the [Ruby Gem Method](https://sylhare.github.io/2021/03/25/Run-type-on-strap-jekyll-theme-locally.html).\nAdd this line to your Jekyll site's Gemfile (or create one):\n\n```shell\ngem \"type-on-strap\"\n```\n\nAdd this line to your Jekyll site's `_config.yml` file:\n\n```yml\ntheme: type-on-strap\n```\n\nThen run Bundler to install the theme gem and dependencies:\n\n```shell\nbundle install\n```\n\nThen you can start adding content like:\n  - Add a `index.html` file\n  - Add the feature page you want. (ex: as it is already in `pages`)\n  - Add posts in `_posts` and `_portfolio` to be displayed\n\n### Remote Theme\n\nNow you can use any theme gem with GitHub pages with [29/11/2017 GitHub Pages Broadcast](https://github.com/blog/2464-use-any-theme-with-github-pages).\nFor that remove all `theme:` attributes from `_config.yml` and add instead:\n\n```yml\nremote_theme: sylhare/Type-on-Strap \n```\n\n## License\n\nThis theme is licensed under the [MIT License (MIT)](/LICENSE)\n\n- Pictures from [Pexels](https://www.pexels.com/) are under Creative Commons Zero (CC0) license\n- Fonts are licensed under the [SIL Open Font License (OFL)](https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi\u0026id=OFL)\n","funding_links":[],"categories":["Liquid"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylhare%2FType-on-Strap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsylhare%2FType-on-Strap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylhare%2FType-on-Strap/lists"}