{"id":15501568,"url":"https://github.com/cncf/dot-org-hugo-theme","last_synced_at":"2025-04-09T21:17:36.209Z","repository":{"id":185351044,"uuid":"657441391","full_name":"cncf/dot-org-hugo-theme","owner":"cncf","description":"Hugo theme ideal for Organizations to use. Built initially for the TODO site redesign.","archived":false,"fork":false,"pushed_at":"2025-02-18T14:23:57.000Z","size":958,"stargazers_count":51,"open_issues_count":5,"forks_count":21,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-04-09T21:17:29.262Z","etag":null,"topics":["hugo","hugo-site","hugo-starter","hugo-template","hugo-theme","theme"],"latest_commit_sha":null,"homepage":"https://dot-org-hugo-theme-demo.netlify.app/","language":"SCSS","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/cncf.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":"2023-06-23T04:26:31.000Z","updated_at":"2025-04-03T14:55:47.000Z","dependencies_parsed_at":"2023-12-29T19:30:53.442Z","dependency_job_id":"4c1269bc-59ef-42c8-9145-ec64cbedeef1","html_url":"https://github.com/cncf/dot-org-hugo-theme","commit_stats":{"total_commits":142,"total_committers":3,"mean_commits":"47.333333333333336","dds":"0.45070422535211263","last_synced_commit":"eab93f1c6bda2b7889cdb446625c1437643ffa71"},"previous_names":["cncf/dot-org-hugo-theme"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cncf%2Fdot-org-hugo-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cncf%2Fdot-org-hugo-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cncf%2Fdot-org-hugo-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cncf%2Fdot-org-hugo-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cncf","download_url":"https://codeload.github.com/cncf/dot-org-hugo-theme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248111973,"owners_count":21049578,"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":["hugo","hugo-site","hugo-starter","hugo-template","hugo-theme","theme"],"created_at":"2024-10-02T09:04:50.629Z","updated_at":"2025-04-09T21:17:36.189Z","avatar_url":"https://github.com/cncf.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dot-Org theme for Hugo\n\nThis Hugo theme is ideal for powering the website of a small organization. It was built initially for the [TODO Group](https://todogroup.org/) and has the following strengths:\n- **Modern** - simple yet effective modern design\n- **Accessible** - design and markup comply with WCAG 2.1 AA guidelines\n- **Performant** - HTML/CSS/JS written from scratch to be as fast as possible without relying on frameworks or libraries\n- **Multilingual** - ready to support multiple languages of content\n- **Mega Menu** - large menu with dropdown sections\n- **FAQ accordion** - FAQ page with accordion structure\n- **Search** - PageFind search is integrated\n\n[View demo site](https://dot-org-hugo-theme-demo.netlify.app/)\n\n# Installation\n\nThere are two main methods of installing this theme to an existing Hugo site:\n\n## 1) Download it\n\nInside the folder of your Hugo site, run:\n\n```bash\ngit clone https://github.com/cncf/dot-org-hugo-theme themes/dot-org-hugo-theme\n```\n\nThis downloads the repo from GitHub and puts the contents in your themes folder.\n\nTo update your theme to future versions:\n\n```bash\ncd themes/dot-org-hugo-theme\ngit pull\n```\n\n## 2) Use git submodule\n\nInside the folder of your Hugo site run:\n\n```bash\ngit submodule add https://github.com/cncf/dot-org-hugo-theme.git themes/dot-org-hugo-theme\n```\n\nThis downloads the repo from GitHub and puts the contents in your themes folder as a git sub-module.\n\nTo update your theme to future versions:\n\n```bash\ngit submodule update --remote --merge\n```\n\n## Installing dependencies \n\nCopy (at least) the following files from the themes exampleSite to the root folder of your project.\n\n- themes/dot-org-hugo-theme/exampleSite/package.json\n- themes/dot-org-hugo-theme/exampleSite/postcss.config.js\n\nFor ease you can run from the command line:\n\n```bash\ncp themes/dot-org-hugo-theme/exampleSite/package.json .\ncp themes/dot-org-hugo-theme/exampleSite/postcss.config.js .\n```\n\nWe recommend a config directory approach to replace your config.toml or hugo.toml file. To get up and running quickly with the default config, you can copy the following folder to the root of your site:\n\n- themes/dot-org-hugo-theme/exampleSite/config/\n\nFrom the command line in your project root, you can run the following to copy the themes exampleSite config to your project:\n\n```bash\ncp -r themes/dot-org-hugo-theme/exampleSite/config ./config\n```\n\nAfter that, run this command to install dependencies (requires [node.js](https://nodejs.org/)).\n\n```bash\nnpm install\n```\n\nYou can then run a local server using:\n\n```bash\nnpm run start\n```\n\nor you can build your site using:\n\n```bash\nnpm run build\n```\n\n## Config files\n\nSee /exampleSite/config/ for example configuration files.\n\nYou should copy these across or merge them with your existing config.\n\n## Custom front matter\n\nWe have created custom front matter to use in your markdown files:\n\n#### Hide the page title / article header\n\n```\nshowHeader: false\n```\n\n#### Add noindex to a page\n\n```\nnoindex: true\n```\n\n## Search index\n\n[Pagefind](https://pagefind.app/) can be used to search the contents of your site. We include a search.html in the theme that is already set up. The search and results UI can also be inserted into any page using the [shortcode](#search-form). For Pagefind to work, the pagefind index must be built from the files in your `public` directory. First, make sure your site it built, and then install pagefind and index the site:\n\n```\nnpm run build\nnpx -y pagefind --site public\n```\n\nEvery time your content is updated, you need to update the search index by again running `npx -y pagefind --site public`, so this should be part of your deployment process.\n\n## Custom shortcodes \n\nYou can use our custom shortcodes to quickly style your website in markdown. Due to the way Hugo deals with nested content, particularly nested shortcodes, you may find that shortcodes that are children of other shortcodes do not render as they should. If this happens to your site, this can often be resolved by allowing Hugo to [render \"unsafe\" HTML](https://gohugo.io/getting-started/configuration-markup/#goldmark). Add the following to your config YAML file:\n\n```yaml\nmarkup:\n  goldmark:\n    renderer:\n      unsafe: true\n```\n\n### Button\n\nThere is a button ready to be inserted in to markdown files:\n\n```md\n{{\u003c button link=\"/path/to/page\" text=\"Default Button\" \u003e}}\n```\n```md\n{{\u003c button link=\"/path/to/page\" style=\"secondary\" text=\"Secondary Button\" \u003e}}\n```\n```md\n{{\u003c button link=\"/path/to/page\" style=\"tertiary\" text=\"Tertiary Button\" \u003e}}\n```\n\nOptions:\n- link # (required) the button link\n- text # (required) the button text\n- style # (optional) secondary, tertiary\n\n### Cards\n\nAn outlined box that is useful for highlighting information or using to wrap list elements.\n\n```\n{{\u003c cards count=2 \u003e}}\n{{\u003c card \u003e}}\n## Special Feature 1\nLorem ipsum dolor sit amet consectetuer adipiscing elit aenean commodo\n{{\u003c spacer \u003e}}\n[Download](#)\n{{\u003c /card \u003e}}\n{{\u003c card \u003e}}\n## Special Feature 2\nLorem ipsum dolor sit amet consectetuer adipiscing elit aenean commodo\n{{\u003c spacer \u003e}}\n[About us](#)\n{{\u003c /card \u003e}}\n{{\u003c /cards \u003e}}\n```\n\nOptions:\n- count # (optional) number of columns on desktop; 2,3,4. Default: 3.\n\n### Columns\n\nA responsive column structure.\n\n```\n{{\u003c columns \u003e}}\n{{\u003c column \u003e}}\nColumn 1\n{{\u003c /column \u003e}}\n{{\u003c column \u003e}}\nColumn 2\n{{\u003c /column \u003e}}\n{{\u003c /columns \u003e}}\n```\n\nOptions:\n- count # (optional) number of columns on desktop; 2,3,4. Default: 3.\n\n### Current Year\n\nInsert the current year easily with this shortcode:\n\n```\n{{\u003c current_year \u003e}}\n```\n\nUseful for copyright notices and evergreen blog content.\n\n### iFrame\n\nInsert an iFrame with your desired content.\n\n```\n{{\u003c iframe title=\"My slides\" src=\"https://www.slideshare.net/slideshow/embed_code/key/vTNvkwIXN4pmr8\" \u003e}}\n```\n\nOptions:\n- src # (required) the page to display\n- width # (optional)\n- height # (optional)\n- title # (optional) the title of the iframe for accessibility\n- loading # (optional) defaults to lazy\n\n### Img\n\nInserts an image in a more advanced format than standard Hugo syntax.\n\n```\n{{\u003c img src=\"/img/blog/image-name.png\" \u003e}}\n```\n\nOptions: \n- src # (required) the image link\n- alt # (optional) describing the image, defaults to filename\n- width # (optional) recommended \n- height # (optional) recommended\n- caption # (optional) markdown is accepted\n- loading # (optional) defaults to lazy, use eager above the fold\n\n### Intro\n\nFormats a paragraph with larger text as suitable for an introduction paragraph at the top of a page.\n\n```\n{{\u003c intro \u003e}}\nParagraph text...\n{{\u003c /intro \u003e}}\n```\n\n### Linebreak\n\nSometimes markdown can bunch paragraphs together. You can force a line return using the linebreak shortcode.\n\n```\n{{\u003c br \u003e}}\n```\n\n### Responsive Table\n\nWrap your large tables with this shortcode so they overflow on mobile:\n\n```\n{{\u003c responsive_table \u003e}}\n| Option | Option | Description |\n| ------ | ------ | ----------- |\n| one    | data   | path to data files to supply the data that will be passed into templates. |\n| two    | engine | engine to be used for processing templates. Handlebars is the default. |\n| three  | ext    | extension to be used for dest files. |\n{{\u003c /responsive_table \u003e}}\n```\n\n### Search form\n\nA search form for querying [the pagefind index](#search-index) and showing results.\n\n```\n{{\u003c search_form \u003e}}\n```\n\n### Spacer\n\nA spacer is useful for spacing out content on your page. By default our spacer inserts a 50px height space. Our spacer is responsive, so on mobile devices the value is reduced by 50% (i.e. 50px space becomes 25px space).\n\n```\n{{\u003c spacer \u003e}}\n```\n```\n{{\u003c spacer 100 \u003e}}\n```\n\n### Table of Contents (TOC)\n\nInsert a Table of Contents automatically in to your page. Picks up on all H2 elements on the page.\n\n```\n{{\u003c toc \u003e}}\n```\n\n### YouTube Enhanced\n\nA privacy friendly and fast YouTube embed.\n\n```\n{{\u003c youtube_enhanced id=\"9oVr7rrNZVI\" \u003e}}\n```\n\nFor embedding playlists, a singular video id must be mentioned as playlists do not have a thumbnail.\n\n```\n{{\u003c youtube_enhanced id=\"xPSXtoJNGLs\" title=\"Play Videos from Kubecon\" playlistid=\"PLj6h78yzYM2PyrvCoOii4rAopBswfz1p7\" \u003e}}\n```\n\nOptions:\n- id # (required)\n- title # (optional) defaults to Play Video\n- playlistid # (optional) your playlist ID\n- autoload # (optional) defaults to false\n- start # (optional) the start time in seconds, default 0\n\n\n## Setting up a local instance for improving this theme\n\nIf you want to create improvements for this theme for everyone, follow these instructions to launch the exampleSite. \n\n```bash\ngit clone https://github.com/cncf/dot-org-hugo-theme.git\ncd dot-org-hugo-theme/exampleSite\nnpm install\nnpm run dev:start\n```\n\n## Other npm commands for working with a local instance\n\n- `npm run dev:start` - Starts the local dev environment using exampleSite\n- `npm run dev:start:with-pagefind` - Starts the local dev environment using exampleSite with working pagefind search\n- `npm run dev:build` - Builds the site using exampleSite\n\n## Showcase\n\nCheck out some themes that are using the Dot-Org theme for Hugo:\n\n- [TODO Group](https://todogroup.org)\n- [DeepCausality](https://deepcausality.com)\n- [ModSecurity](https://modsecurity.org)\n- [Northeast Collegiate Cyber Defense League](https://neccdl.org)\n- [OWASP® CRS](https://coreruleset.org)\n- [Hardware City](https://hardwarecity.org)\n- [k8up](https://k8up.io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcncf%2Fdot-org-hugo-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcncf%2Fdot-org-hugo-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcncf%2Fdot-org-hugo-theme/lists"}