{"id":19571804,"url":"https://github.com/datocms/astro-website","last_synced_at":"2025-04-27T03:32:43.644Z","repository":{"id":255488928,"uuid":"851494512","full_name":"datocms/astro-website","owner":"datocms","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-16T09:31:23.000Z","size":4327,"stargazers_count":9,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-22T16:09:33.604Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datocms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-09-03T07:44:40.000Z","updated_at":"2025-04-16T09:31:24.000Z","dependencies_parsed_at":"2025-03-25T09:37:42.195Z","dependency_job_id":null,"html_url":"https://github.com/datocms/astro-website","commit_stats":null,"previous_names":["datocms/astro-website"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datocms%2Fastro-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datocms%2Fastro-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datocms%2Fastro-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datocms%2Fastro-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datocms","download_url":"https://codeload.github.com/datocms/astro-website/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251085145,"owners_count":21533821,"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-11-11T06:20:06.727Z","updated_at":"2025-04-27T03:32:38.635Z","avatar_url":"https://github.com/datocms.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--datocms-autoinclude-header start--\u003e\n\n\u003ca href=\"https://www.datocms.com/\"\u003e\u003cimg src=\"https://www.datocms.com/images/full_logo.svg\" height=\"60\"\u003e\u003c/a\u003e\n\n👉 [Visit the DatoCMS homepage](https://www.datocms.com) or see [What is DatoCMS?](#what-is-datocms)\n\n---\n\n\u003c!--datocms-autoinclude-header end--\u003e\n\n# DatoCMS Website\n\nThis repository contains the source code of [datocms.com](https://www.datocms.com). It's built with Astro, gql.tada and the DatoCMS Astro SDK.\n\nIt's a server-only app (every route is dynamic), and it's meant to be the origin for a surrogate-keys-capable CDN like Fastly, which will then apply granular caching rules thanks to [DatoCMS cache tags](https://www.datocms.com/docs/content-delivery-api/cache-tags).\n\nIt can also be directly visited by the content editors to see the result of their draft changes in real time.\n\n# How to run locally?\n\n1. Clone this repository: `git clone https://github.com/datocms/website`\n2. Install dependencies with `npm install`.\n3. Copy `.env.example` to `.env` and fill in the missing values.\n4. Run `npm run dev` to start a local development server at [localhost:4321](http://localhost:4321).\n\n# Conventions\n\n## SVGs\n\nSVGs are inlined, both in HTML and CSS. For the HTML part, there's a `\u003cSvg /\u003e` Astro component:\n\n```jsx\n\u003cSvg name=\"icons/regular/tachometer\" /\u003e\n```\n\nThere are two main directories for SVGs: `src/icons/` and `src/svg`. Depending on the directory, `\u003cSvg /\u003e` will apply different SVGO settings:\n\n- SVGs in `src/icons/` are 1em in size and have their `fill` color inherited from the parent HTML element's color attribute by forcing the fill of every element to `currentColor`.\n- SVGs in `src/svg/` are more flexible: they don’t have a set size, and there’s no automatic fill color.\n\nFor the CSS part, we use [`postcss-inline-svg`](https://www.npmjs.com/package/postcss-inline-svg) which let's you inline SVGs like this:\n\n```css\nbackground: svg-load('icons/regular/check.svg');\nbackground: svg-load('img/arrow-down.svg', fill=#000, stroke=#fff);\n```\n\n## `\u003cProse /\u003e`\n\nThis component is meant to add some nice, consistent formatting on text-heavy content like articles or blog posts.\n\nThe `\u003cprose-island\u003e` element is a custom HTML element that you can wrap around\npart of HTML inside \u003cProse /\u003e that you don't want to style with the rules below.\nIt's basically a reset.\n\n```jsx\n\u003cProse\u003e\n  \u003ch1\u003eThis will be formatted\u003c/h1\u003e\n\n  \u003cprose-island\u003e\n    \u003ch1\u003eThis will NOT be formatted\u003c/h1\u003e\n\n    \u003cProse\u003e\n      \u003ch1\u003eThis will be formatted again\u003c/h1\u003e\n    \u003c/Prose\u003e\n  \u003c/prose-island\u003e\n\u003c/Prose\u003e\n```\n\n## Remote markdown content\n\nTo render markdown, you can use:\n\n- `\u003cMarkdown of={content} /\u003e` or `markdown(content)` (they're basically the same).\n- `inlineMarkdown` for small, single-paragraph markdown content that you want to render without the wrapping paragraph.\n\n## Structured Text\n\nAvoid directly using `\u003cStructuredText /\u003e`. Prefer `\u003cText /\u003e` or `\u003cInlineText /\u003e` which offers a few sane defaults.\n\nAlso, make sure to use `withAllComponents`, inside `blockComponents`, `linkToRecordComponents` and `inlineRecordComponents` to type-check that EVERY kind of available block is handled correctly!\n\n```jsx\n\u003cText\n  data={episode.content}\n  blockComponents={withAllComponents(episode.content.blocks, {\n    InternalVideoRecord: InternalVideo,\n    ImageRecord: Image,\n    TableRecord: Table,\n  })}\n/\u003e\n```\n\n# Weird issues...\n\n## Astro, Prettier and white-spaces\n\nPrettier sometimes will format the code this way (please notice the {link.text} is on a separate line). This will generate visible white-space inside the link.\n\n```jsx\n\u003cdiv\u003e\n  {navLinks.map((link) =\u003e (\n    \u003ca href={link.href}\u003e{link.text}\u003c/a\u003e\n  ))}\n\u003c/div\u003e\n```\n\nIt's a [known issue](https://github.com/withastro/prettier-plugin-astro/issues/308). Sometimes you can solve adding `/* prettier-ignore */` to avoid auto-formatting...\n\n## Astro.slots.has() returns true when slot exists inside a falsy conditional block\n\nThe title says it all. More info in this [Github issue](https://github.com/withastro/astro/issues/10024).\n\n\u003c!--datocms-autoinclude-footer start--\u003e\n\n---\n\n# What is DatoCMS?\n\n\u003ca href=\"https://www.datocms.com/\"\u003e\u003cimg src=\"https://www.datocms.com/images/full_logo.svg\" height=\"60\"\u003e\u003c/a\u003e\n\n[DatoCMS](https://www.datocms.com/) is the REST \u0026 GraphQL Headless CMS for the modern web.\n\nTrusted by over 25,000 enterprise businesses, agency partners, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our [developers](https://www.datocms.com/team/best-cms-for-developers), [content editors](https://www.datocms.com/team/content-creators) and [marketers](https://www.datocms.com/team/cms-digital-marketing)!\n\n**Quick links:**\n\n- ⚡️ Get started with a [free DatoCMS account](https://dashboard.datocms.com/signup)\n- 🔖 Go through the [docs](https://www.datocms.com/docs)\n- ⚙️ Get [support from us and the community](https://community.datocms.com/)\n- 🆕 Stay up to date on new features and fixes on the [changelog](https://www.datocms.com/product-updates)\n\n**Our featured repos:**\n\n- [datocms/react-datocms](https://github.com/datocms/react-datocms): React helper components for images, Structured Text rendering, and more\n- [datocms/js-rest-api-clients](https://github.com/datocms/js-rest-api-clients): Node and browser JavaScript clients for updating and administering your content. For frontend fetches, we recommend using our [GraphQL Content Delivery API](https://www.datocms.com/docs/content-delivery-api) instead.\n- [datocms/cli](https://github.com/datocms/cli): Command-line interface that includes our [Contentful importer](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [Wordpress importer](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress)\n- [datocms/plugins](https://github.com/datocms/plugins): Example plugins we've made that extend the editor/admin dashboard\n- [DatoCMS Starters](https://www.datocms.com/marketplace/starters) has examples for various Javascript frontend frameworks\n\nOr see [all our public repos](https://github.com/orgs/datocms/repositories?q=\u0026type=public\u0026language=\u0026sort=stargazers)\n\n\u003c!--datocms-autoinclude-footer end--\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatocms%2Fastro-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatocms%2Fastro-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatocms%2Fastro-website/lists"}