{"id":18049677,"url":"https://github.com/alextim/kat","last_synced_at":"2026-04-12T09:49:16.836Z","repository":{"id":92114017,"uuid":"276104740","full_name":"alextim/kat","owner":"alextim","description":"\"Tarutino Steppe\" Park","archived":false,"fork":false,"pushed_at":"2023-12-15T05:24:37.000Z","size":51708,"stargazers_count":0,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T17:51:40.024Z","etag":null,"topics":["emotionjs","firebase","gatsbyjs","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/alextim.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":"2020-06-30T13:20:46.000Z","updated_at":"2020-07-28T20:37:17.000Z","dependencies_parsed_at":"2023-12-15T06:43:22.599Z","dependency_job_id":null,"html_url":"https://github.com/alextim/kat","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alextim%2Fkat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alextim%2Fkat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alextim%2Fkat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alextim%2Fkat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alextim","download_url":"https://codeload.github.com/alextim/kat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294568,"owners_count":20915341,"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":["emotionjs","firebase","gatsbyjs","react"],"created_at":"2024-10-30T21:08:29.287Z","updated_at":"2026-04-12T09:49:11.807Z","avatar_url":"https://github.com/alextim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Park \"Tarutino Steppe\"\n\n## Features\n\n- i18n (English, Russian, Ukranian)\n- Site config and translations in Yaml\n- SEO (meta and language tags, sitemap, Twitter, Open Graph \u0026 schema.org)\n\n## Tech Stack\n\n- Markdown + Gatsby.js\n- Theme-UI \u0026 Emotion styling\n- preval.macro\n- ESLint (airbnb) + Prettier\n- Firebase: functions \u0026 database\n- Netlify: hosting\n\n## License\n\nMIT\n\n## Installation\n\n### Requirements\n\n1. Have [Google](https://google.com) account.\n1. Have [GitHub](https://github.com) account.\n1. Have [Netlify](https://netlify.com) account.\n1. Have installed **Git** on your local computer. You could download it from [here](https://git-scm.com/download).\n\n### Steps\n#### Fork Source Repository and clone it on local computer\n1. Login to your [GitHub account](https://github.com).\n1. In a browser open the source repository `https://github.com/alextim/kat`.\n1. Create fork from source repository - click **Fork** button  (in the right upper corner of window).\n1. After process finish click button **Code**.\n1. Copy your repository URL.  \n   It should be like this: `https://github.com/your-account-name/kat.git`.\n1. Lanch command prompt on your computer.  \n   For Windows it will be: `Start` -\u003e `Windows System` -\u003e `Command Prompt`.\n2. Select desired folder with `cd` (change directory) command.\n3. Clone source repository to selected folder with the next command:\n\n```\ngit clone https://github.com/your-account-name/kat.git\n```\n\n#### Connect your repository to hosting and build site\n1. Login to [Netlify](https://netlify.com).\n1. Click **New site from Git** button\n1. Click **GitHub** button on the next screen.\n1. Authorise Netlify to access GitHub in few steps.\n   - Click **Authorize Application** button.\n   - Click **Install** on next dialog screen.\n   - Enter your GitHub password.\n1. Then select repository `your-repository-name`.\n1. Check **Site settings**.  \n   **Publish directoty** field should to be set to `public\\`.\n2. Click **Deploy site** button.  \n   In few minutes your site will be live!\n\n## Edit\n\n1. Edit your site locally with your favorite editor.\n2. Lanch command prompt on your computer.\n3. Goto repository folder with `cd` command.\n4. Commit your work and push changes to remote repository.\n   Run the following commands in sequence:\n\n```\ngit add .\ngit commit -m 'your message'\ngit push\n```\n\nYour site will be rebuilt automatically after push.\n\n## File Naming Convention\n\n- self explanatory names\n- only English alphabet\n- all symbols in lower case\n- no spaces\n- no transliterations\n- use hyphen `-` for word separation\n- no dots, underscores or special symbols\n\ngood:\n\n```\nweekend-with-family.jpg\nmy-awesome-file.png\n```\n\nbad:\n\n```\nasdasda-casd.jpg\nмой-красивый-файл.jpg\nMyAwesomeFile.jpg\nmoi-prijatnii-fail-.jpg\nmy_awesome_file.jpg\nmy.awesome.file.jpg\n```\n\n## SEO\n\n| Frontmatter Field | Recommended Length  | More Info                                                                                                                                                                       | Note                                                                |\n| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |\n| metaTitle         | up to 60 chars      | [What is a meta title tag?](https://moz.com/learn/seo/title-tag), [Create good titles and snippets in Search Results](https://support.google.com/webmasters/answer/35624?hl=en) | If no **metaTitle** provided the **title** will be used             |\n| metaDescription   | 50-160 chars        | [What is a meta description?](https://moz.com/learn/seo/meta-description), [How to create the right meta description](https://yoast.com/meta-descriptions/)                     | If no **metaDescription** provided the **description** will be used |\n| alt               | less then 125 chars | [What is Alt Text?](https://moz.com/learn/seo/alt-text)                                                                                                                         | images                                                              |\n\n_In case of neither **metaDescription** nor **description** the **site description** will be used._\n\nPage content should to be at least 300 words.\n\nSources: [The Beginner's Guide to SEO](https://moz.com/beginners-guide-to-seo)\n\n## Special Images\n\n| Porpouse    | File Name                       | Folder                          | Ratio    | Dimenation, px          | Qty            | Note                                          |\n| ----------- | ------------------------------- | ------------------------------- | -------- | ----------------------- | -------------- | --------------------------------------------- |\n| Site        | favicon.ico                     | [PROJECT_DIR]/static            | 1 x 1    | 16 x 16                 | 1              | [Wiki](https://en.wikipedia.org/wiki/Favicon) |\n| Site        | default-banner.jpg              | [PROJECT_DIR]/content/assets    | 16 x 8.1 | 1920 x 972              |\n| OpenGraph   | og-banner-{locale}.jpg          | [PROJECT_DIR]/static/assets     | 1.9 x 1  | 1200 x 630 or 600 x 315 | 1 per language | any awesome picture + logo                    |\n| Twitter     | twitter-banner-2x1-{locale}.jpg | [PROJECT_DIR]/static/assets     | 2 x 1    | 600 x 300               | 1 per language | any awesome picture + logo                    |\n| Twitter     | twitter-banner-1x1-{locale}.jpg | [PROJECT_DIR]/static/assets     | 1 x 1    | 450 x 450               | 1 per language | any awesome picture + logo                    |\n| schema.org  | business-photo.jpg              | [PROJECT_DIR]/static/assets     |          |                         | 1              | photo to present your business                |\n| schema.org  | logo.svg                        | [PROJECT_DIR]/static/assets     |          |                         | 1              |\n| webmainfest | icon.png                        | [PROJECT_DIR]/src/assets/images | 1 x 1    | \u003e 512 x 512             |\n\n_Set OpenGraph and Twitter Image Sizes in `website.js`_\n\n## Security Recomendations\n\nLinks to _external sites_ are potentialy unsafe.\nTo protect our site and improve your SEO always add `rel=\"nofollow noreferrer noopener\"` attribute to anchor tags.\nWith `target=\"_blank\"` browser will open external site in new tab.\n\nbad:\n\n```html\n\u003ca href=\"https://frumushika.com/living.html\"\u003efrumushika.com\u003c/a\u003e\n```\n\ngood:\n\n```html\n\u003ca href=\"https://frumushika.com/living.html\" target=\"_blank\" rel=\"nofollow noreferrer noopener\"\n  \u003efrumushika.com\u003c/a\n\u003e\n```\n\n## Settings\n\n### General\n\nFile: `[PROJECT_DIR]\\src\\config\\website.js`\n\n## Language\n\nFile: `[PROJECT_DIR]\\src\\config\\locales.json`\n\n### Development Mode\n\nProgram uses the `LOCALES` entry in file `[PROJECT_DIR]\\.env.development`.\nAvalable languages present as a space separated list.\n\n```js\nLOCALES = uk;\n```\n\nThen the list will be checked against all avalable locales from `[PROJECT_DIR]\\src\\config\\locales.json`.\nThus it's possible to use only one or few languages to speed up development time.\n\n### Production Mode\n\nProgram simply uses all locales from file `[PROJECT_DIR]\\src\\config\\locales.json`.\n\nThe default locale marked with `default = true`.\nIf no `default = true` found the first entry will be default locale.\n\n## Modal Form\n\nFile: [PROJECT_DIR]\\src\\components\\pages\\contact\\ContactForm.jsx\n\n```js\nconst AUTOCLOSE_DELAY = 5000; // 5 secs\n```\n\n### Site URL\n\n```js\nconst meta = {\n  ...\n  siteUrl: 'https://www.example.com', // No trailing slash!\n};\n```\n\n### Site Data\n\n| What         | Folder                                  | File Name             | Note                            |\n| ------------ | --------------------------------------- | --------------------- | ------------------------------- |\n| Main Menu    | [PROJECT_DIR]\\content\\data              | main-nav-items.yaml   |\n| Footer Menu  |                                         | footer-nav-items.yaml |\n| Social Links |                                         | social-links.yaml     | Facebook, Intagram etc          |\n| Contacts     |                                         | contacts.yaml         | Phone, Skype, Viber, E-mail etc |\n| Address      | [PROJECT_DIR]\\content\\data\\address      | address.uk.yaml       | Company Name, Legal Address     |\n|              |                                         | address.en.yaml       |\n|              |                                         | address.ru.yaml       |\n| Translations | [PROJECT_DIR]\\content\\data\\translations | translations.uk.yaml  |\n|              |                                         | translations.en.yaml  |\n|              |                                         | translations.ru.yaml  |\n\n### Translations\n\nMore convenient way to edit translations.\n\n- Edit `JSON` files in `[PROJECT_DIR]\\content\\data\\translations\\src`.\n- Run command `npm run translations:j2y`.\n  It fires script which transform json-source to yaml.\n\n## Pages\n\nPages are located in the folder: **[PROJECT_DIR]\\src\\pages**.\n\nEach page occupies one subfolder here.\n\nName pattern:\n`{file name}.{locale}.{extension}`\n\nFile name: in English alpahaber, no spaces, dots. Only letters in lower case.\nSpecial name is **index** (explanation in **Routes**) .\n\nLocale: **uk**, **en** or **ru**.\n\nExtension: **md**.\n\nSample for valid file names:\n\n```\nindex.ru.md\nhome.uk.md\n```\n\n### Routes\n\nIn a build time the routes will be created on the following algorithm:\n\n1. source file contains field **slug** in frontmatter -\u003e **slug** will be used\n1. frontmatter hasn't field **slug** and source file name doesn't start from **index** word -\u003e file name will be used\n1. source file name starts from **index** -\u003e parent folder name will be used\n\n### Page Content\n\nIn general page file consists of two main components:\n\n1. Frontmatter\n2. Body\n\n#### Frontmatter\n\nIt looks like\n\n```md\n---\ntitle: *Page Title*\ndescription: *Second Line in page header*\nmetaTitle: *for SEO. If it's omitted the **title** will be used*\nmetaDescription: *for SEO. If it's omitted the **description** will be used*\n\ncover:\n  default: *your-special-banner.jpg*\n  mobile: *your-special-banner-used-on-small-screens.jpg*\n  alt: *for SEO, alternate text for image*\n  author: *image author name*\n\nslug: *used for page route during build*\ntemplate: *name of te template sed during site build*\nnoindex: ***true** or **false** - show/hide page from crawler robots*\n\n...other page specific parts\n---\n```\n\nRecommended cover image sizes:\n\n| View    | Ratio    | Size in px |\n| ------- | -------- | ---------- |\n| Desktop | 16 x 8.1 | 1920 x 972 |\n| Mobile  | 1 x 1    | 600 x 600  |\n\n#### Body\n\nAny HTML and markdown tags.\n\n## Page \"Home\"\n\nPage folder: **[PROJECT_DIR]\\src\\pages\\home**\n\nFile name: **home.[supported language code].md**\n\nExpected file names:\n\n```\nhome.uk.md\nhome.en.md\nhome.ru.md\n```\n\nRecommeded image sizes:\nSection Name | Ratio | Size in px | Note\n--- | --- | --- | ---\nHere you can | 1 x 1 | 400 x 400 | displayed in circle\nOur wild inhabitants | 4 x 3 | 400 x 300 |\n\n## Page \"Services\"\n\nPage folder: **[PROJECT_DIR]\\src\\pages\\services**\n\nFile name: **services.[supported language code].md**\n\nExpected file names:\n\n```\nservices.uk.md\nservices.en.md\nservices.ru.md\n```\n\nRecommeded image sizes:\nName | Ratio | Size in px  \n--- | --- | ---  \nService Item | 4 x 3 | 400 x 300\n\n## Page \"Gallery\"\n\nPage folder: **[PROJECT_DIR]\\src\\pages\\gallery**\n\nFile name: **gallery.[supported language code].md**\n\nExpected file names:\n\n```\ngallery.uk.md\ngallery.en.md\ngallery.ru.md\n```\n\nVideos and extra text could be inserted to body part.\n\nSample how to embed video:\n\n```\n\u003ciframe src=\"https://www.youtube.com/embed/2Y-LqBD2HN8\" width=\"600\" height=\"400\"\u003e\u003c/iframe\u003e\n```\n\n\\*Pay attention: you need word **\"embed\"** in url, not **\"watch\"**.\n\nGallery source structure sample:\n\n```yaml\nsections:\n  - text: Some text to preface the gallery\n\n  - items:\n    - title: picture caption to display\n      image:\n        src: valid file name\n        alt: picture description in one sentence (for Google Search Engine).\n        author: picture's author (if exists)\n\n    - title: My Awesome Picture #1\n      image:\n        src: my-awesome-picture-1.jpg\n        alt: My first very special picture\n        author: John Smith\n\n    - title: My Awesome Picture #2\n      image:\n        src: my-awesome-picture-2.jpg\n        alt: My decond very special picture\n    ...\n\n    - title: My Awesome Picture #100\n      image:\n        src: my-awesome-picture-100.jpg\n        alt: My hundreds very special picture\n        author: Bob Nad\n```\n\n_Remark: picture #2 has no author_\n\n## TO-DO\n\n- [ ] detect language\n- [ ] Lerna or workspaces\n- [ ] add firebase project and readne\n- [ ] TS\n- [ ] Storybook\n- [ ] 404 - header and footer still in Ukranian only\n- [ ] gatsby-plugin-google-analytics\n- [ ] gatsby-plugin-offline\n- [ ] link - it has no styles in the text (displays properly in Contacts, but not in Services)\n- [ ] contact form - modal - add real Abort handler\n- [ ] logo is black in 'Dark Mode'\n\n## Known Issues\n\n- **warn Query takes too long** during **build**.\n  **Develop** is OK.\n  By Gatsby official advice the schema customization for **SitePage** was added.\n  Now it's Ok on **build**, but warn still present during build with **GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES**.\n\nGATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES\n\n- \"The result of this StaticQuery could not be fetched\" with `useStaticQuery` in browser after successful build. Development mode has no any errors.\n  Two solutions:\n  - `useStaticQuery` -\u003e `StaticQuery`\n  - move query to `create-pages.js` or to templates as subquery\n    I used the second.\n- `.production.env` vars are undefined in PROD, but `.development.env` is ok in DEV\n- You need CR after \u003cbr /\u003e in Markdown\n- double space and CR is not New Line\n- Art direction\n\n  https://github.com/thadroe/art-direction-images-for-gatsby\n\n  https://www.gitmemory.com/issue/gatsbyjs/gatsby/13164/485425565\n\n  https://github.com/gatsbyjs/gatsby/issues/15189\n\n  https://github.com/gatsbyjs/gatsby/issues/24748\n\n  https://github.com/gatsbyjs/gatsby/pull/21431\n\n- Contact Form\n  TextArea font has a bit smaller look, despite the same fontSize and fontFamily.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falextim%2Fkat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falextim%2Fkat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falextim%2Fkat/lists"}