{"id":13552208,"url":"https://github.com/UtkarshVerma/hugo-dream-plus","last_synced_at":"2025-04-03T03:30:59.336Z","repository":{"id":117786688,"uuid":"120061753","full_name":"UtkarshVerma/hugo-dream-plus","owner":"UtkarshVerma","description":":rainbow: An upgraded version of the Hugo \"Dream\" theme with tons of new features.","archived":false,"fork":false,"pushed_at":"2020-10-02T04:02:21.000Z","size":8539,"stargazers_count":68,"open_issues_count":8,"forks_count":66,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-03T23:34:22.555Z","etag":null,"topics":["blog","device-detection","disqus","dream-theme","hugo-theme","shortest","twemoji","website"],"latest_commit_sha":null,"homepage":"http://dream-plus-posts.netlify.com","language":"HTML","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/UtkarshVerma.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-02-03T05:15:42.000Z","updated_at":"2024-01-29T09:26:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"b6c1e152-61f2-46f5-a8e6-d6945ab14b13","html_url":"https://github.com/UtkarshVerma/hugo-dream-plus","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UtkarshVerma%2Fhugo-dream-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UtkarshVerma%2Fhugo-dream-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UtkarshVerma%2Fhugo-dream-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UtkarshVerma%2Fhugo-dream-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UtkarshVerma","download_url":"https://codeload.github.com/UtkarshVerma/hugo-dream-plus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246933323,"owners_count":20857046,"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","device-detection","disqus","dream-theme","hugo-theme","shortest","twemoji","website"],"created_at":"2024-08-01T12:02:00.537Z","updated_at":"2025-04-03T03:30:58.027Z","avatar_url":"https://github.com/UtkarshVerma.png","language":"HTML","funding_links":[],"categories":["HTML","website"],"sub_categories":[],"readme":"# Dream Plus Theme for Hugo\n[![Build Status](https://travis-ci.org/UtkarshVerma/hugo-dream-plus.svg?branch=master)](https://travis-ci.org/UtkarshVerma/hugo-dream-plus)\n[![Posts View Demo](https://api.netlify.com/api/v1/badges/6ef6f16b-9f2b-4d4a-9c35-8ef5a28783df/deploy-status)](https://app.netlify.com/sites/dream-plus-posts/deploys)\n[![Cards View Demo](https://api.netlify.com/api/v1/badges/8588f660-afc1-4446-8db4-9dc5d87c4c79/deploy-status)](https://app.netlify.com/sites/dream-plus-cards/deploys)\n\n![Dream Plus Theme](https://github.com/UtkarshVerma/hugo-dream-plus/blob/master/images/screenshot.png)\nThis theme is an upgraded version of the [Dream Theme](https://github.com/g1eny0ung/hugo-theme-dream) by [Yue Yang](https://github.com/g1eny0ung) and contains tons of new features such as:\n\n* \"Cards\" and \"Posts\" views for the home page\n* twemoji rendering\n* Table of contents for posts\n* Hugo image processing for faster loading\n* Random image background\n* Multiple author support\n* Disqus\n* Sidebar\n* Share card below posts\n* Licenses for posts\n* Device detection, that is whether the client device is a PC or phone\n* About section can be written in MarkDown\n* Custom 404 pages can be written in MarkDown\n* Custom Favicon\n* RSS Button\n* Custom CSS and JS can be used without modifying the theme\n* More social icons\n* Shorte.st website script, and a lot of other minor improvements\n\nThis theme can be used for two purposes:\n\n1. If you're making a site which links to other sites and your stuff all around the internet, then you can switch to \"Cards view\" for that. I use this view for my home page here: [UtkarshVerma's Site](https://utkarshverma.github.io)\n2. If you're simply making a blog or another website with a bunch of posts, then switch to the \"Posts view\" for that. I use this view for my blog: [UtkarshVerma's Blog](https://utkarshverma.github.io/blog)\n\nThis project adheres to the Contributor Covenant [code of conduct](/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [utkarshverma@pm.me](mailto:utkarshverma@pm.me).\n\n\n### Live Demo\n* [**Cards View**](https://dream-plus-cards.netlify.com)\n* [**Posts View**](https://dream-plus-posts.netlify.com)\n\n---\n\n## Table of Contents\n* [**Installation**](#installation)\n\n* [**Getting Started**](#getting-started)\n\n* [**Documentation**](#documentation)\n\n* [**Nearly Finished**](#nearly-finished)\n\n* [**Contributing**](#contributing)\n\n* [**License**](#license)\n\n---\n\n## Installation\nThe theme can be installed by running the following commands inside your **Hugo website** folder.\n```shell\ncd themes\ngit submodule add https://github.com/UtkarshVerma/hugo-dream-plus dream-plus\ngit submodule update --init --recursive\n```\n\n## Getting Started\nOnce the theme has been successfully installed, you'll have to do a bit of tuning of the theme to meet your taste.\n\n### Configure Dream Plus\nWithin the [`exampleSite`](/exampleSite) folder, you'll find the config files, [`cards.toml`](/exampleSite/cards.toml) and [`posts.toml`](/exampleSite/posts.toml) which can be used to tweak the theme.\n\nYou must use these config files as a basis for your site, since they **take care of the necessary variable declarations**, which you may edit according to your needs.\n\n### Describe yourself\nDefine yourself through the following config variables in `params` under the `author` table as shown:\n```toml\n[params.author]\n\tauthor = \"\u003cname of the author\u003e\"\n\tdescription = \"Short description of the site\"\n\tmotto = \"author's motto or short description\"\n\n\t#Leaving the avatar variable unset displays svg avatars\n\tavatar = \"\u003cabsolute path to avatar\u003e\"\n```\n\nAfter that, fill up the social variables at the end of the config file. This theme suports the following social sites: (The examples are given)\n\n| Social Link | Variable | Example Initialization |\n|:---:|:---:|:---:|\n| GitHub | *github* | `github = \"username\"` |\n| Email | *email* | `email = \"username@example.com\"` |\n| Twitter | *twitter* | `twitter = \"username\"` |\n| Facebook | *facebook* | `facebook = \"username\"` |\n| YouTube | *youtube* | `youtube = \"username\"` |\n| Medium | *medium* | `medium = \"username\"` |\n| LinkedIn | *linkedin* | `linkedin = \"username\"` |\n| StackOverflow | *stackoverflow* | `stackoverflow = \"number/username\"` |\n| CodePen | *codepen* | `codepen = \"username\"` |\n| Reddit | *reddit* | `reddit = \"username\"` |\n\nThese variables have to be in the `[social]` table of `config.toml` or its equivalent for `YAML` or `JSON`.\n```toml\n[social]\n\tgithub = \"UtkarshVerma\"\n```\n\nOnce this is done, write up the \"**About Me**\" section of your website in Markdown as directed here: [Error and About Pages](https://github.com/UtkarshVerma/hugo-dream-plus#error-and-about-pages).\n\n### Toggling the views\nAs stated earlier, this theme has two views, **Cards view** and **Posts view**. The type of view rendering depends on the type of content you feed to **Dream Plus**.\nTherefore:\n* Having `cards` folder in `/content` folder activates *Card view*.\n* Having `posts` folder in `/content` folder activates *Post view*.\n\n\u003e The `contentType` variable has now been deprecated.\n\nOne clear distinction between both the view is that **Card** view doesn't support posts, instead it redirects to the specified link, while **Post** view does.\nYou may test them out yourselves by visiting my sites(stated above) which use them.\nAlso, post/card creation is done differently for both the views. It is as follows:\n```shell\nhugo new cards/example.md\t\t#Card creation\nhugo new posts/example.md\t\t#Post creation\n```\n\nAfter this, just open your MarkDown card/post and provide the parameters for the card/post.\n\n### The background\nThere are two different ways to configure the background of this theme. These settings are mutually exclusive to each other.\n\n#### Colors as background\nTo set a specific background color, do it through the `color` variable. If you want to set a random combination of colours as your background instead, just leave the color variable **unset**.\n```toml\n[params.background]\n\tcolor = \"#13547A\"\t\t\t#Provide a color as hex or rgb equivalent\n```\n\n#### Images as background\nSpecify the image which you want to set as the background through the `images` array. If you prefer a single image background, then simply give a single value to the array. For example:\n```toml\n[params.background]\n\timages = [\"/images/bg1.jpeg\"]\t\t\t\t\t\t\t#Single image as background\n\timages = [\"/images/bg1.jpeg\", \"\u003csome other image\u003e\"] \t#Multiple images as background\n```\n\nProviding multiple images to the `images` array enables the random image background feature of Dream Plus, which cycles the background within the given array every time the site is reloaded.\nYou may also blur the background to a certain extent through the `blur` variable.\n\n\u003e All the background-configuring variables are to be placed inside the `backround` table under `params`\n\n```toml\n[params.background]\n\t#Random backgrounds\n\timages = [\"/images/bg1.jpeg\", \"/images/bg2.jpeg\", \"/images/bg3.jpeg\"]\n\t#Blur the background\n\tblur = \"0.2\"\n```\n\n### Card covers\nThe covers for each post-card or card are processed by Dream Plus using [Hugo Image Processing](https://gohugo.io/content-management/image-processing) for faster website loading times. The lookup paths for the cover file are as stated below:\n- Cards: In the bundle. For example, `/content/cards/\u003ccard\u003e/cover.\u003cany-extension\u003e`\n- Posts: In the images folder inside the bundle. For example, `/content/posts/\u003cpost\u003e/images/cover.\u003cany-extension\u003e`\n\n\u003e ~~**Specifying the cover image through the frontmatter has now been deprecated**~~.\nCard covers can now be defined through the frontmatter through `cover` key. However image processing won't be applicable on such covers. Also, **frontmatter covers are prioritized over image resources**, therefore, to make the image resource covers render, you'll have to remove the cover key from the frontmatter first.\n\nYou may also modify the image processing process through `coverArgs` variable in `[params.features]`. The arguments passed must be for the `.Resize` function since that's what Dream Plus utilizes. For example,\n```toml\n[params.features]\n\tcoverArgs = \"400x300 q50\"\t\t#Specify resolution and quality of output image\n```\n\n### Device detection\nYou may configure your website based on the client device by using the `isMobile` JS variable. It is `true` when the client device is a mobile and vice versa.\n\n### Error and About pages\nThis theme supports total customization of **about** and **error** pages. These pages may be customized through the [`about.md`](/exampleSite/content/about.md) and [`404.md`](/exampleSite/content/404.md) files. *Dream Plus reads the above stated files as plain Markdown text* and then renders them. Once you've finished writing the files and modifying them according to your needs, paste them in the `content` folder of your Hugo site.\nIf you don't want these pages to be built by Hugo and served with their own links such as `\u003cwebsite\u003e.\u003cdomain\u003e/about` or `\u003cwebsite\u003e.\u003cdomain\u003e/404`. Then you can tell Hugo to ignore these through [`ignoreFiles`](https://gohugo.io/getting-started/configuration/#ignore-files-when-rendering) variable in your `config.toml` file as follows:\n```toml\nignoreFiles = [\"content/404.md\", \"content/about.md\"]\n```\n\n### Custom favicon\nYou may also set a custom favicon for your website through the `favicon` config variable under `params`. For example,\n```\n[params]\n\tfavicon = \"/images/defaultFav.ico\"\n```\n\n### Shorte.st website script\nThe [Shorte.st](https://shorte.st) website script has been implemented in this theme. To use it, you'll have to configure it through the `shortest` table under `params`.\n```toml\n[params.shortest]\n\tenabled = true\t\t#Enable shorte.st\n\tapiToken = \"\"\t\t#The API Token you received from shorte.st\n\tdomains = [\"\"]\t\t#The domains you want to define\n```\n\n### Some other configurations\nIf you'd like to control the amount of posts/cards a page has, then you may do so using the `paginate` config variable.\n```toml\npaginate = 4\t\t#Defaults to 10\n```\n\nAlso, the tags, when enabled, won't all be displayed on the header and sidebar by default. Only the top 8 tags(article-count-wise) are displayed there to avoid congestion. However it can be overriden using `tagLimit` variable of `[params.tag]` table.\n```toml\n[params.tag]\n\tenabled = true\n\ttagLimit = 10\t\t#Top 10 tags will be displayed\n\t#or\n\ttagLimit = 0\t\t#Display all tags\n```\n\nThere are some other minor configurations as well. You may set them up by referring to the comments inside the config file.\n\n## Documentation\nThe documentation for this repository is currently under work and is added to this repository's [wiki](https://github.com/UtkarshVerma/hugo-dream-plus/wiki).\nWiki contributions are most welcome. Feel free to ask me about this theme's features for that.\n\n## Nearly Finished\nAfter finishing the configurations, you're good to go. So, test your website using:\n```bash\nhugo server\n```\nYour site should now be locally available at [http://localhost:1313](http://localhost:1313) for testing purposes.\n\nFor testing the example site, you'll have to explicitly specify the config file to Hugo. This is done as follows:\n```bash\n#For posts view demo\nhugo server --config posts.toml\n\n#For cards view demo\nhugo server --config cards.toml\n```\n\n## Contributing\nFound something interesting to add to this theme or rather a :beetle:bug? Let me know about it through the [issue tracker](https://github.com/UtkarshVerma/hugo-dream-plus/issues). [Pull requests](https://github.com/UtkarshVerma/hugo-dream-plus/pulls) are also welcome.\nFor more detailed instructions on how to contribute, refer to [**CONTRIBUTING.md**](/CONTRIBUTING.md)\n\n## License\nThis theme is released under the [**MIT**](/LICENSE) license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FUtkarshVerma%2Fhugo-dream-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FUtkarshVerma%2Fhugo-dream-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FUtkarshVerma%2Fhugo-dream-plus/lists"}