{"id":18049651,"url":"https://github.com/alextim/tarutino-steppe","last_synced_at":"2025-04-05T06:15:34.047Z","repository":{"id":92114067,"uuid":"283600677","full_name":"alextim/tarutino-steppe","owner":"alextim","description":null,"archived":false,"fork":false,"pushed_at":"2023-12-15T08:40:44.000Z","size":61949,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T17:51:40.727Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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-07-29T20:54:51.000Z","updated_at":"2021-01-26T22:02:10.000Z","dependencies_parsed_at":"2023-12-15T09:46:54.803Z","dependency_job_id":null,"html_url":"https://github.com/alextim/tarutino-steppe","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%2Ftarutino-steppe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alextim%2Ftarutino-steppe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alextim%2Ftarutino-steppe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alextim%2Ftarutino-steppe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alextim","download_url":"https://codeload.github.com/alextim/tarutino-steppe/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":[],"created_at":"2024-10-30T21:08:25.557Z","updated_at":"2025-04-05T06:15:34.028Z","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- Netlify: hosting \u0026 cloud functions\n- SendGrid: mailing \n  \n## License\n\nMIT\n\n## Free tier limits on August, 2020.\n### Netlify\n#### Hosting\nbuild - 300 minutes /month\n#### Functions\n- Receive up to 125K function endpoint requests per month\n- Use up to 100 hours of function run time per month\n### SendGrid\nSend 40,000 emails for first 30 days after registration, then 100/day forever.\n## Installation\n\n### Requirements\n\n1. Have [SendGrid](https://sendgrid.com) account.\n   You need API key and verified e-mail.\n2. Have [GitHub](https://github.com) account.\n3. Have [Netlify](https://netlify.com) account.\n4. 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. Open the source repository from [here](https://github.com/alextim/tarutino-steppe) in a browser.\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/tarutino-steppe.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/tarutino-steppe.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   These fields should to be set as follow:\n   - **Build command**: `yarn build`\n   - **Publish directoty**: `www/public`\n1. Go to **Environment variables**.  \n   Add following vars:\n   |  Key              | Value\n   |---                |---\n   | SENDGRID_API_KEY  | your SendGrid API key \n   | SENDGRID_TO_EMAIL | your e-mail verified by SendGrid\n   | WARNINGS          | true\n\n\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## Build \u0026 Deploy Troubleshooting\n1. Login to [Netlify](https://netlify.com).\n2. Select your site\n3. Click **Production deploys**\n4. Click **Trigger deploy**\n5. Choose **Clear cache and deploy site**\n\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`\nObligue values:\n- siteUrl\nChange it from `https://tarutino-steppe.netlify.app` to your actual site address (NO TRAILING SLASH!).\nLeave these vars as `it is` if you are not using:\n- googleAnalyticsID\n- fbAppID\n- twitterSite\n- twitterCreator\n## Language\n\nFile: `[PROJECT_DIR]\\src\\config\\locales.json`\n## Indexing\nFile: `[PROJECT_DIR]\\static\\robots.txt`\nBy default indexing is prohibited.\n```\nUser-agent: *\nDisallow: /\n\nsitemap: https://tarutino-steppe.netlify.app/sitemap.xml\n```\nif you want your site to be indexed by **Google** edit it:\n```\nUser-agent: *\nDisallow:\n\nsitemap: https://your-actual-site-address/sitemap.xml\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; // in millisecs\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## Social Links\nIf you need them, please, add source files to folder `[PROJECT_DIR]\\content\\data\\locales\\social-links`.  \nThey will be displayed in footer.  \nValid file names:\n```\nsocial-links.en.yaml\nsocial-links.ru.yaml\nsocial-links.uk.yaml\n```\n\nFile content sample:\n```yaml\n- code: facebook\n  to:  https://www.facebook.com/your-facebook-address\n  title: Follow us on Facebook\n- code: instagram\n  to:  https://www.instagram.com/your-facebook-address\n  title: Follow us on Instagram\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}.md`\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\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 to create the page route during build\ntemplate: name of the template used during 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- [ ] 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%2Ftarutino-steppe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falextim%2Ftarutino-steppe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falextim%2Ftarutino-steppe/lists"}