{"id":13797813,"url":"https://github.com/weeblrpress/clearstatus","last_synced_at":"2025-05-13T04:32:17.366Z","repository":{"id":44696001,"uuid":"180396989","full_name":"weeblrpress/clearstatus","owner":"weeblrpress","description":null,"archived":false,"fork":false,"pushed_at":"2023-08-31T01:20:53.000Z","size":167,"stargazers_count":157,"open_issues_count":1,"forks_count":31,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-08T03:02:07.353Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":false,"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/weeblrpress.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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":"2019-04-09T15:27:41.000Z","updated_at":"2025-03-04T13:40:37.000Z","dependencies_parsed_at":"2024-08-04T00:12:00.897Z","dependency_job_id":null,"html_url":"https://github.com/weeblrpress/clearstatus","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weeblrpress%2Fclearstatus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weeblrpress%2Fclearstatus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weeblrpress%2Fclearstatus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weeblrpress%2Fclearstatus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weeblrpress","download_url":"https://codeload.github.com/weeblrpress/clearstatus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253876966,"owners_count":21977629,"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":[],"created_at":"2024-08-04T00:00:33.127Z","updated_at":"2025-05-13T04:32:16.576Z","avatar_url":"https://github.com/weeblrpress.png","language":null,"funding_links":[],"categories":["Opensource"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://cdn.weeblrpress.net/clearstatus/assets/images/clearstatus-200.svg\" alt=\"ClearStatus Logo\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ca title=\"ClearStatus intro video link\" href=\"https://www.youtube.com/watch?v=wFF2OBPfalQ\"\u003e\u003cimg src=\"https://img.youtube.com/vi/wFF2OBPfalQ/0.jpg\" alt=\"ClearStatus status page intro video\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003eClick image to view intro video\u003c/p\u003e\n\u003cp align=\"center\"\u003eWe also have a \u003ca href=\"https://www.youtube.com/watch?v=f6gM84hD9Ug\" title=\"ClearStatus setup and usage video link\"\u003efull setup and usage video here.\u003c/a\u003e\u003c/p\u003e\n\n# ClearStatus - Professional status page - 5 minutes - Free\n\nYou run a website or an app? Have one or more systems your customers/community depends on? if something goes wrong and your site is down, we think what matters most is that you are able to communicate clearly and easily with your users: be transparent about the problem, what you do to solve it and when you're or will be back online.\n\nIt's called a status page and should be working no matter what happens to your own site and app. And it should be simple. And preferably cheap or free.\n\n\u003cimg align=\"right\" src=\"https://cdn.weeblrpress.net/clearstatus/features/event-in-progress-with-twitter-feed-small.png\" alt=\"Clearstatus at work\"\u003e\n\nWe've created ClearStatus to do just that for our own operations at [WeeblrPress](https://www.weeblrpress.com) and [Weeblr](https://weeblr.com) and it is now open-source and available for all.\n\n## Key features\n\n- Easy and reliable communication with your users\n- One click implementation\n- 100% independent from your own infrastructure\n- Custom domain with HTTPS (Netlify)\n- Worldwide CDN delivery (Netlify)\n- High-availability (Netlify)\n- Twitter integration\n- Disqus commenting on each issue\n- Pinned issue for security alerts\n- Individual systems can be grouped\n- Secure: static content is hard to hack\n- All content under your control\n- Multiple users, issues and status pages\n- Mobile/tablets/desktop\n- Highly customizable and expandable\n\nAnd 100% free setup and operation with all the above included\n\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e\n\n## How it works\n\n\u003cp align=\"center\"\u003eCan't wait? view our video on settin up and using ClearStatus. Just click the image below\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003ca title=\"ClearStatus setup and usage video link\" href=\"https://www.youtube.com/watch?v=f6gM84hD9Ug\"\u003e\u003cimg src=\"https://img.youtube.com/vi/f6gM84hD9Ug/0.jpg\" alt=\"ClearStatus status page setup and usage video\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\nClearStatus is mostly a theme for the [Hugo CMS](https://gohugo.io). Hugo is a very fast static site generator. It does the bulk of the work, transforming a text file you write to describe an issue into a fully working status page.\n\n\u003e When hosting your status pages at Netlify as suggested below, all the transformation process is automatic. You do not need to perform any additional setup or configuration and you'll never have to deal with Hugo yourself (not that Hugo is difficult, quite the opposite in fact!)\n\nNow any web page must be hosted on a server. We suggest and use ourselves [Netlify](https://netlify.com) to host ClearStatus pages because setting up the whole thing can pretty much be done with a couple of clicks (just see below). In addition, it will be free including an SSL certificate for your site, served over a worldwide CDN and in a high-availability configuration.\n\nThe last part missing is a repository for your content, that is the issues description and updates. That content needs to be stored in a GIT repository. You can use your own git repositories if you are a developer but we suggest you sign up for free accounts at [GitLab.com](https://gitlab.com) or [GitHub.com](https://github.com). Those 2 will work perfectly with ClearStatus. \n\nBy using ClearStatus, GitLab or GitHub and Netlify, you can create and customize your statuspage in no time. Adding issues and communicating with your audience about your bad times will be simple and done completely outside of your own server(s) - an absolute necessity for a status page: the most important time it should work is exactly when the rest of your servers are down!\n\nYou can and should use other media to communicate such as Twitter. But tweets come and go and quickly disappear in the Twitter feeds - when they are not simply hidden by Twitter algorithms. Your status page provides a fixed location where your users can go and be updated.\nAs a matter of fact, you can easily embed relevant tweets to a specific issue so you get best of both worlds as you can see in the screenshot above.\n\n\u003e Did we mention ClearStatus is multilingal? if you so desire, your status page will have a language switcher and separate content per language. Messages for English, Spanish and French are built-in and you can easily add your own.\n\n## Requirements\n\nEither:\n\n- a Gitlab.com or Github.com account\n- a Netlify account for easy and automated setup and operation\n\nor:\n\n- your own git repository and any other hosting for static files (you take care of hosting the status page)\n \n## Getting started (automatic setup)\n\nThe easiest way to enable your status page is to use the **Deploy to Netlify** buttons below. Depending on whether you have/prefer to host your git repository on GitHub or GitLab, select one of the buttons below.\n\n\u003e Sign up for a Gitlab or Github account and a Netlify account prior to getting started.\n\nWhen you click one of those buttons, you will be taken to the Netlify website and the following will happen:\n\n- They'll ask you to connect your Gitlab or Github account\n- They'll ask you for **a project name** (you can create as many status pages as you like by the way)\n- They'll start building your status page for you, it should take roughly 10 or 15 seconds\n- The status page will be available at a weird URL such as https://tender-goodall-bd0396.netlify.com/ (you'll find the exact link on the Netlify page)\n\nJust click that link and view your status page: it has some sample issues. You can start customizing it now (see below)\n\n\u003e From this point all customization or content update can be done using your GitLab or GitHub account. You can also setup **Netlify CMS** to customize your status page with a simple online interface. Setting up Netlify CMS is simple and is described below.\n\n### Create a Clearstatus status page on Netlify using GITHUB\n\nDeploy to Netlify with one click from GitHub: \n\n[![Deploy to Netlify from Github](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/weeblrpress/clearstatus)\n\n### Create a Clearstatus status page on Netlify using GITLAB\n\nDeploy to Netlify with one click from GitLab: \n\n[![Deploy to Netlify from Gitlab.com](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://gitlab.com/weeblrpress/clearstatus)\n\n## Netlify configuration\n\nThere are 2 additional steps you probably want to take when using Netlify:\n\n### Using a custom domain\n\nAs seen before, this default setup will cause your status page to be available at a weird Netlify URL such as  https://tender-goodall-bd0396.netlify.com/\n\nThat's OK for testing but not best for real world operation so you probably want to setup a custom domain for your status page, such as `status.company.net`. This is a 2-steps process:\n\n1. At your Netlify control panel, set up a **custom domain**. See doc [on this page](https://www.netlify.com/docs/custom-domains/).\n2. At your DNS provider (the company where you registered your domain name most likely), you will need to tell them to point your chosen address (`status.company.net`) to Netlify servers. The process depends on your registrar but please follow the Netlify documentation there as well.\n\n\u003e It is advised to use a separate domain entirely for your status page. If your site is at https://example.com then it's best to purchase as well, for instance,  example.net or examplestatus.com and use that for your status page. The reason is simply that your DNS may also break and maybe someday anything at example.com will not be accessible. That's when you want to have example.net for your status page. Ideally, you would purchase that second domain name at a separate provider just in case it is your DNS provider which is down.\n\n### Enable Netlify CMS\n\n[NetlifyCMS](https://netlifycms.org) is a simple content management system that lets you update your ClearStatus configuration and content in a convenient interface, without having to deal with your git repository. This may be more convenient for users not familiar with git.\n\nClearStatus comes with support for NetlifyCMS. You need to enable user authentication **inside of your Netlify control panel**:\n\n1. On your team page, select the ClearStatus website you just created\n2. Select the `Settings` page and then `Identity` in the left side menu\n3. Click on `Enable identity`\n4. Scroll down to `Registration` and select `Invite only` so that only selected users can modify your page\n5. Scroll down to `Services`, then `Git gateway` and click the `Enable git gateway` button \n\nThe final step is to invite yourself so that you can modify the site:\n\n1. On your team page, select the ClearStatus website you just created\n2. Select the `Identity` tab\n3. Click on the `Invite users` button\n4. Enter your email address in the popup dialog, and possibly that of more users (they'll need to have a Netlify account for this to work)\n\nInvited users receive an email invite with a confirmation link. Clicking the *Accept invite* link in that email will take them to your site with a login prompt.\n\nOnce a user has accepted the invite, they can always access the Netlify CMS interface to add or modify content using the address:\n\n```\nhttps://yourstatuspage.com/admin\n```\n\n\n## Customization \n\nAfter initial setup, your ClearStatus status page has sample content and default settings, titles, etc You certainly want to change them. There are 2 ways to do that:\n \n- use your Gitlab/Github account and update files in the **project name** you choose on Netlify\n- use the Netlify CMS support built-in ClearStatus which we suggested to enable earlier\n\n\u003e You can use both methods at the same time on the same status page. All data from Netlify CMS is written to your git repository so both will always be in sync. You can also use your preferred git workflow. In the end, the status page content is updated based on the git repository content in `master` branch.\n\n## Configuration\n\nMost options should be configured through the single `config.yml` file located at the root of your project root repository. You can edit that file directly from GitLab/GitHub and change it as you whish.\n\nMost likely the most important setting is the component definition: for instance if you run a website and a helpdesk, they are independent and can go down or up independently so they are listed separately. Use the `systems` option to set them up as needed.\n\nNote that grouped system can go up and down independently. The status of the group is the worst case: if 5 systems in a group are up but the 6th one is `Disrupted` then the group will be shown as `Disrupted`. If one system is `Down` and another is `Disrupted`, then the group will be shown as `Down`.\n\n\u003cimg align=\"center\" src=\"https://cdn.weeblrpress.net/clearstatus/features/systems-list-with-groups.png\" alt=\"Clearstatus systems list with groups\"\u003e\n\n\n\u003e You can change those options as well using the **Netlify CMS** interface under the `Settings` tab.\n\nAfter configuring all settings and text to your liking, you should `Commit changes`. This will cause:\n\n- your file to be updated on GitHub/Gitlab\n- and it will also trigger a rebuild of the status page to take your changes into account at Netlify. \n\nWait 10-15 seconds and reload the status page: it should have all your changes now.\n\n\u003e There are several additional options files located under the `/config/_default` folder: they contain other settings including language-related ones under `languages.yml` and color-related under `params.yml`\n\n\n## Logo change\n\nYou can include your organization log in all pages header. Upload your logo to the `/static/images` folder using GitHub/Gitlab upload feature. Then make sure the corresponding logo name is correctly set in  `config.yml`. Leave that setting empty if you do not have any logo.\n\n````\nlogo: \"/images/our-logo.png\"\n````\n\n\u003e Note that the \"logo\" setting **should not include the initial /static** part.\n\n## Entering and updating content\n\nWhenever a problem occurs on one of your systems, you will create *an issue*. An issue is actually a single file that you create in the `/content/default/issues` folder which exists in your ClearStatus installation on Gitlab/GitHub. This is assuming you have enabled only one language which is the default configuration.\n\nIn the following steps, we assume you are using Gitlab/Github to directly create the issue file. You can of course create it anywhere using standard git procedure. The issue will be added to the site once you push it to the `master` branch of your Clearstatus repository.\n\n\u003e On multilingual setups, you should create one file per language in  `/content/default/issues`, `/content/es/issues`, `/content/fr/issues`  at least if you need to report the issue to all your audiences.\n\n## Issue file naming\n\nThe issue file should be created with the following convention:\n\n````\n2019-04-10-title-of-issue.md\n````   \n\n- should start with a date in the `YYYY-MM-DD` format\n- then a title with no spaces\n- with a `.md` extension\n\n\u003e The start page of a ClearStatus status page displays all present and past events. However each event also has an individual URL that you can share. Click on an issue header to reach that page.\n\n## Issue file content and template.\n\nIssue files use the [markdown](https://daringfireball.net/projects/markdown/syntax) language, which is basically just text and images with little in terms of formatting and is what [Hugo](https://gohugo.io) normally uses.\n\nThe first section of the file is used however to tell ClearStatus about the, well, status of the event happening and you should use it to convey your message to visitors.\n\nOnce you have written the current event description, use the `Commit changes` button in Github/GitLab to save the content. This will trigger an update of your status page after a few seconds.\n\nWhen the issue status changes, for instance when it's resolved or some more information is available, come back to this page, modify the event file and use `Commit changes` again to update your status page.\n\nHere is a sample issue file, you can use it as a template:\n\n\n````\n\n---\ntitle: Connectivity issue\n\ndraft: false\n\n# Full date: 2019-03-29 17:26:09\ndate: 2019-03-30 20:03:00\n\n# Status: \"resolved\" | \"in_progress\" | \"scheduled\"\nstatus: \"resolved\"\n\n# This message will be taken out of the flow of events\n# and displayed at top of page or below the header\n# as long as its status is marked as in_progress\n# pinned: (empty) | top | belowheader\npinned: \n\n# Duration for \"scheduled\" issues: Raw text, ie 5mn, 1h, 1 hour,..\nduration:\n\n# Max severity: will be displayed when issue is resolved, in the past events section\n# Max_severity: ok | disrupted | down | monitoring | maintenance\nmax_severity: down\n\n# Current severity: used for current issue display\n# current_severity: ok | disrupted | down | monitoring | maintenance\ncurrent_severity: ok\n\n# Full date: 2019-03-29 17:26:09\nresolved_on: 2019-03-30 20:45:19\n\n# Affected components, must use exact names defined in site config\naffected:\n  - Site\n  - Helpdesk\n\n# If set and the status is in_progress, this feed will be embedded\n# in the event display. Leave empty for no Twitter feed.\n# Possible URL formats:\n# See:  https://help.twitter.com/en/using-twitter/embed-twitter-feed\n#\n# - Profile: Display public Tweets from any user on Twitter:\n#    https://twitter.com/weeblrpress\n#  \n# - Likes: Show all Tweets a specific user has marked as likes.\n#    https://twitter.com/TwitterDev/likes\n#\n# - List: Show Tweets from public Lists that you own and/or subscribe to.\n#    https://twitter.com/TwitterDev/lists/national-parks\n# \n# - Collection: Show Tweets from a curated collection.\n#    https://twitter.com/WeeblrPress/timelines/1118432874733219840\n#\n# - Moment: Show Tweets from a public moment.\n#    https://twitter.com/i/moments/625792726546558977\n#\ntwitterFeed:\n\n# Enable Disqus commenting on this page. This will only works if \n# you added your Disqus identifier in the global config.yml file\n# under the disqusShortname option.\n# enabledDisqus: true | false\nenableComments: true\n\n# Do not change\nsection: issue\n\n# Short code available in content to display current date\n# in a short format. For instance for issue updates.\n\n# {{\u003c track \"2019-03-26 15:31:06\" \u003e}}\n# {{\u003c track \"\" \u003e}}\n\n## Enter below issue description and subsequent updates if any\n---\n\nBoth our website and customer support area cannot be reached at the moment. We are investigating the matter.\n\\\n**Issue identified:** Our hosting company has informed us of a failure in the datacenter network equipment. They are working on it and expect a quick resolution.  {{\u003c track \"2019-03-30 20:08:19\" \u003e}}\n\\\n**Monitoring:** The equipment in question has been replaced and website and support site can be reached. We are monitoring the servers for the next few minutes to be sure all is OK. {{\u003c track \"2019-03-30 20:31:19\" \u003e}}\n\\\n**Resolved:** Both servers are operating normally, issue is solved. Really sorry about the trouble!\n\\\n\n````\n\nHere is a breakdown of options available:\n\n- `title`: a short and explicit title for the event happening such as \"Helpdesk not available\" or \"Site under maintenance\" \n- `date`: the date and time at which the event started - or will start in the case of scheduled events \n- `status`: 3 options: `resolved`, `in_progress` or `scheduled`. \n\n`in_progress` events are listed at the top of your status page, with a red header\n\n`resolved` events are listed at the bottom of the page, with a neutral colored header\n\n`scheduled` events are listed just below the list of components (systems) on your page with a lighlty colored header.\n\n- `pinned`: if you set this to `top` or `belowheader` and set its status to `in_progress`, the event will be taken out of the regular display and will show at the very top of each page or just below the header, respectively. This is meant to display an important message in a prominent manner to all visitors such as a security warning. Once the status is reset to anything else but `in_progress`, the event will not be displayed anywhere anymore.\n\nPinned items also have a simplified layout:\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://cdn.weeblrpress.net/clearstatus/features/pinned-item.png\" alt=\"Pinned message example\"\u003e\u003c/p\u003e\n\n- `duration` is only used for **scheduled** event. Use that field to tell visitors how long that scheduled event is supposed to last. It's free text, can be \"about 5 mn\", \"1 hour\" or \"1h\"\n\n- `max_severity` and `current_severity` are used to display an event importance and severity. Both can be: `ok`, `disrupted`, `down`, `monitoring` or `maintenance`\n\n`current_severity` is used when an event is `in_progress`. `max_severity` will be used when the event is resolved to indicate what the worst state of operation was.\n\nTypically, while an event is in progress, you will first set `current_severity` to `down`. Then as you make progress towards resolution you can change the state to `disrupted` or `monitoring` after you think the problem is solved but you are monitoring to be sure it does not come back. \n\nOnce the problem is fully solved, you can set its `status` option to `resolved`. That's when we'll use the `max_severity` as it is important to remember the system was down, even though the last severity level displayed may have been `disrupted` or `monitoring` only.\n\n- `resolved_on`: an optional date and time. Required when an event has been marked as `resolved` in its `status` field.\n\n- `affected`: a list of components that are affected by the event. Add one component per line and use exactly the same name you used on your configuration file.\n\n- `twitterFeed`: an optional Twitter feed or collections. If provided, the feed will be embedded in the issue card as long as it is marked as `in_progress`. We specifically recommend creating a [Twitter collection](https://developer.twitter.com/en/docs/tweets/curate-a-collection/overview/overview.html) for this purpose. This way only tweets related to that specific issue will be displayed.\n\n- `enableComments`: another excellent way to communicate directly with your users. Clearstatus can include commenting on each issue individual page. You can enable/disable commenting per issue. The only pre-requisite is to set your [Disqus shortname](https://disqus.com) under the `disqusShortname` option in the global configuration file. You will of course need to set up a Disqus account for your status page to make this work.\n\n\u003e We advise to use a dedicated shortname for your status page, separate from any other Disqus shortname you may be using on your other websites.\n\n- `body`: the body is the free text area located after the `---` line (do not touch or remove this line by the way). It is just plain text you can write to describe it. You can add to, remove from or update that text to your liking using markdown for nicer formatting. \n \n## Getting started (manual setup)\n\nAssuming you are familiar with git and/or Hugo, you may prefer to setup ClearStatus using a local git repo and then possibly host your status page elsewhere than Netlify.\n\nClearStatus comes in 2 flavors or rather 2 git repositories:\n\n- `clearstatustheme` is a **Hugo theme**. You can check it out and use it in any Hugo web site. It has an ExampleSite folders with a sample config.yml file you should use. \n\n- `clearstatus` is a **Hugo site**. It's basically an empty site with the `clearstatustheme` setup as a git submodule, a config.yml file and some sample content. This is what is deployed to Netlify when using the automated setup. **It's the preferred method deployment**.\n\nAlternatively, you can clone only the `clearstatustheme` repository in your own repo and just configure it for your own hosting as needed.\n\nMake sure to clone the `clearstatustheme` with **submodules** or else you will only get the main site without the Clearstatus theme. For instance:\n\n````\ngit clone --recurse-submodules https://github.com/weeblrpress/clearstatus.git mystatuspage\n````\n\nYou can update the ClearStatus theme whenever a new version is available by running the following from the root of the main repository:\n\n````  \ngit submodule foreach git pull origin master\n````\n\nBoth original repositories are available at:\n\n#### `clearstatustheme`\n\n- [https://github.com/weeblrpress/clearstatustheme](https://github.com/weeblrpress/clearstatustheme)\n- [https://gitlab.com/weeblrpress/clearstatustheme](https://gitlab.com/weeblrpress/clearstatustheme)\n\n#### `clearstatus`\n\n- [https://gitlab.com/weeblrpress/clearstatus](https://github.com/weeblrpress/clearstatus)\n- [https://github.com/weeblrpress/clearstatus](https://gitlab.com/weeblrpress/clearstatus)\n\n\u003e Please us the [Github Clearstatus repository](https://github.com/weeblrpress/clearstatustheme/issues) for any issue you may have, suggested changes or pull requests\n\n## Changing text - Translation\n\nLonger descriptions in header and footers can be changed from the `config.yml` file in the root folder of your ClearStatus site. Other strings and messages are available for translation or just to better suit your liking or use case.\n\nThose strings are stored in the `/themes/clearstatustheme/i18n` folder. There is one file per language called for instance `en.yml`, `fr.yml`,...\n\n\u003e You can select the site language in the `/config.yml` file under the `languageCode` key. It defaults to `en`.\n\nHere is a sample content from the `en.yml` file:\n\n````\n# Summary status message\n- id: scheduled\n  translation: Scheduled\n\n- id: isDown\n  translation: Something's happening here...\n- id: isDisrupted\n  translation: Having a little bit of trouble...\n- id: isMonitoring\n  translation: Some systems being monitored...\n- id: isMaintenance\n  translation: Some systems under maintenance...\n- id: isOk\n  translation: All systems operational.\n````\n\nShould you want to add your own translation or just override one of those messages, you should not modify directly those files as this would make updating ClearStatus more dificult.\n\nInstead, you can add an override in your site that will take over the original ClearStatus text. Proceed as follow to change text for the English language:\n\n- Create a `i18n` folder at the root of your site\n- Create a file called `en.yml` in that folder\n- Insert the following in that file:\n\n````\n- id: isDown\n  translation: Houston, we have a problem...\n````\n- Save the file and commit the changes.\n\nNow the original _Something's happening here..._ will be replaced with _Houston, we have a problem..._ whenever one component in your systems is down.\n\nNote that you do not have to copy across **all** text from the original file. Just copy and modify the content you need to modify.\n\nShould you want to add translation for another language, copy the entire `en.yml` file to `xx.yml` where xx is the desired language code and start translating.\n\n## Enabling multilingual support\n\nClearStatus can manage events in several languages so that you can communicate with your users in their language. Each language has **independent** content. Per language content is stored in per-language folders and if you do not provide a language-specific version of an event, it will not be displayed for that language.\n\n\u003e At this moment, multilingual support cannot be managed through the **Netlify CMS** interface. Use Gitlab/Github or your own git workflow to manage content.\n\n### Enabling multilingual support.\n\nOpen the `/config/_default/languages.yml` file to enable and configure multilingual content. Here is the default language configuration: \n\n````\n#\n#en:\n#  weight: 1\n#  languageName: English\n#fr:\n#  title: Etat de nos systèmes\n#  weight: 2\n#  contentDir: content/fr\n#  languageCode: fr\n#  languageName: Français\n#  params:\n#    systems:\n#      - name: Website\n#        description: Le site web de notre société\n#        link: https://www.example.fr/\n#      - name: Support\n#        description: Notre site de support\n#        link: https://support.example.fr/\n#\n#es:\n#  title: Nuestra página de estado\n#  weight: 3\n#  contentDir: content/es\n#  languageCode: es\n#  languageName: Español\n````\n\nAs you can see, all lines in that file start with a `#`: they are commented out and have no effect. To add more languages to your site, you will need to remove the `#` symbol at the start of the desired lines and configure as needed. Here is an example for adding both Spanish and French to a site with English as the default language:\n\n````\nen:\n  weight: 1\n  languageName: English\nfr:\n  title: Etat de nos systèmes\n  weight: 2\n  contentDir: content/fr\n  languageCode: fr\n  languageName: Français\n  params:\n    systems:\n      - name: Website\n        description: Le site web de notre société\n        link: https://www.example.fr/\n      - name: Support\n        description: Notre site de support\n        link: https://support.example.fr/\n\nes:\n  title: Nuestra página de estado\n  weight: 3\n  contentDir: content/es\n  languageCode: es\n  languageName: Español\n````\n\nA few key points:\n\n- each language is defined under its language code (use what you want there, it really is up to you)\n- for each language, you can redefine configuration items already defined for the default language.\nFor instance, adding the `title: Etat de nos systèmes` line replaces the original `title` text for French. You can also redefine the name and list of components in your systems per language\n- the `weight` parameter will determine the order of languages in the language switcher and default language.\n\n\u003e As with all `yml` files, **indentation matters**. Be sure to respect spaces at the start of lines or else your file will be invalid and the status page won't be built.\n\nAfter saving and committing this configuration file, you will get the following:\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://cdn.weeblrpress.net/clearstatus/features/multilingual-default-language-small.png\" alt=\"Sample Clearstatus multilingual status page\"\u003e\u003c/p\u003e \n\nThere is a language switcher added at the top. Clicking on the `Français` link goes to the following page:\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://cdn.weeblrpress.net/clearstatus/features/multilingual-other-language-small.png\" alt=\"Sample French Clearstatus multilingual status page\"\u003e\u003c/p\u003e\n\n## In-depth customization\n\n### Colors\n\nClearStatus output uses the [Tailwind CSS](https://tailwindcss.com) framework. Most of the colors used throughout the status page can be modified without having to deal with Tailwind though as they are stored in parameters in the `/config/_default/params.yml` file. Here is the relevant content of that file:\n\n````\n############################################################\n## Status default config. Valid for ALL languages.\n############################################################\n\n## Source for CSS\nenablePostCSSProcessing: false\nfullCSSSourceFile: \"css/src/styles.css\"\nfullCSSDistFile: \"css/dist/styles.css\"\npostCSSConfigFolder: \"themes/clearstatustheme\"\n\n# Colors\nbodyBackground: \"bg-grey-lighter\"\nbodyColor: \"text-grey-dark\"\nvisibleBordersColor: \"border-grey-dark\"\nbordersColor: \"border-transparent\"\nheaderBackground: \"bg-white\"\nheaderColor: \"text-grey-darkest\"\nfooterBackground: \"bg-white\"\nfooterColor: \"text-grey-darkest\"\ncomponentsBackground: \"bg-white\"\ncomponentsColor: \"text-black\"\ncomponentsBorders: \"border-grey-lighter\"\nrefreshColor: \"text-grey-dark\"\npaginationLinksColor: \"text-grey-darkest\"\ndisabledPaginationLinksColor: \"text-grey-dark\"\n\n# Severity\ndefaultSeverityBackground: \"bg-grey-light\"\ndefaultSeverityColor: \"text-black\"\ndownSeverityBackground: \"bg-red-dark\"\ndownSeverityColor: \"text-white\"\ndisruptedSeverityBackground: \"bg-orange-dark\"\ndisruptedSeverityColor: \"text-white\"\nmonitoringSeverityBackground: \"bg-orange\"\nmonitoringSeverityColor: \"text-white\"\nmaintenanceSeverityBackground: \"bg-grey-light\"\nmaintenanceSeverityColor: \"text-black\"\nokSeverityBackground: \"bg-green-dark\"\nokSeverityColor: \"text-white\"\n\n# Incident types\nscheduledHeaderBackground: \"bg-blue-lighter\"\nscheduledHeaderColor: \"text-grey-dark\"\nscheduledHeaderTitleColor: \"text-black\"\nscheduledBodyBackground: \"bg-white\"\nscheduledBodyColor: \"text-grey-darkest\"\nscheduledBodyTitleColor: \"text-black\"\n\nsmallBodyBackground: \"bg-white\"\nsmallBodyColor: \"text-grey-darkest\"\nsmallBodyTitleColor: \"text-black\"\n\npastBodyBackground: \"bg-white\"\npastBodyColor: \"text-grey-darkest\"\npastBodyTitleColor: \"text-black\"\n\n# Affected components\naffectedBackground: \"bg-grey-lighter\"\naffectedColor: \"text-grey-darkest\"\n\n````\n\nVarious items each have a color assigned to them such as `bg-grey-lighter`  or `text-grey-dark`. Those are standard Tailwind CSS classes that each correspond to a color. Find the list of Tailwind built-in colors:\n \n - [for text](https://tailwindcss.com/docs/text-color)\n - [for backgrounds](https://tailwindcss.com/docs/background-color)\n - [for borders](https://tailwindcss.com/docs/border-color)\n\nIf you simply want to swap around colors from the existing list in `/config/_default/params.yml`, just do it, save and commit the file and your status page will be updated accordingly.\n\nIf you want to use a color that is not listed already in `/config/_default/params.yml`, you will need a bit more configuration described in the paragraph below, **Even more in-depth customization**.\n\n### CSS customization / Head customization\n\nTo only add a few CSS classes or override existing ones, you can insert a `\u003cstyle\u003e\u003c/style\u003e` tag in your own copy of one specific layout file.\n\n- copy `/themes/clearstatustheme/layouts/partials/custom/meta.html` to `/layouts/partials/custom/meta.html`\n\nThe content of this file will be automatically included just before the closing `\u003c/head\u003e` tag. You can also use this method to add support for an Analytics provider or other script for instance.\n\n\u003e There are other files in that `/themes/clearstatustheme/layouts/partials/custom/` folder. Make your own copy under `/layouts` and use them to add HTML to various parts of your status page: above the header, above footer, below footer, etc\n\n### Layouts\n\nAll output files are generated using **layouts** files located in the ClearStatus theme under the folder `/themes/clearstatustheme/layouts`.\n\nYou can safely and completely change any of those files by creating a `/layouts` folder at the root of your status page git repo and copy the files you want to change from the `/themes/clearstatustheme/layouts` folder.\n\nBe sure to reproduce the original folders hierarchy though: `/themes/clearstatustheme/layouts/issues/single.html` should be copied to `/layouts/issues/single.html` or else ClearStatus won't pick it up.\n\n\u003e If you only use TailwindCSS CSS classes already present in the default version of ClearStatus, there is nothing more to do. If not, follow the steps in **Even more in-depth customization** below. \n\n### Even more in-depth customization\n\nTo include CSS classes from TailwindCSS that are not in the default ClearStatus version, do the following:\n\n- copy the files `/themes/clearstatustheme/package.json` and `/themes/clearstatustheme/package-lock.json` to the root of your git repository\n- run `npm install` in the root folder of your repositiry\n- change `enablePostCSSProcessing` setting from `false` to `true` in `/config/_default/params.yml`\n\nWhen `enablePostCSSProcessing` is set to `true`, ClearStatus will run a module called `PostCSS` to build the final CSS stylesheet starting with TailwindCSS framework. This allows including any class from TailwindCSS in an optimized manner, by including only those classes that are actually used.\n\nYou can go one step further and define your own colors inside of TailwindCSS:\n\n- in `/config/_default/config.yml`, change `assetsDir: themes/clearstatustheme/assets` to `assetsDir: assets`\n- copy the `/themes/clearstatustheme/assets` folder to the root of your repository, that is to `/assets`\n- open the file `/assets/css/src/tailwind.js`\n- customize it as described on [TailwindCSS documentation](https://tailwindcss.com/docs/colors)\n- save and commit \n\nFrom now on, all colors added to the `/assets/css/src/tailwind.js` configuration file can be used through your status page custom layouts. Only CSS classes actually used will be included to generate the smallest possible file.\n\n## Credits\n\nThis project is loosely inspired by [CState](https://github.com/cstate/cstate) and started out both out of different requirements and the desire to work with Hugo, Netlify, Go templates and such.\n\n\n_(version 2.0.0)_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweeblrpress%2Fclearstatus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweeblrpress%2Fclearstatus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweeblrpress%2Fclearstatus/lists"}