diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index cd37c80f45..9af0c8433e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,19 +1,35 @@ # Contributing to Prisma Documentation -We welcome all contributions to the Prisma docs! If you come across some documentation that you feel is missing or incorrect, please open an issue or submit a pull request. +Thank you for wanting to contribute to our docs! If you come across some documentation on [prisma.io/docs](https://www.prisma.io/docs) that you feel is missing or incorrect, please open an issue or submit a pull request. -## I am not sure my changes are valid +## New contributor guide -If you are not sure your changes are valid, then please open an issue and we will discuss it. Contributions from community members are welcome and will be considered for inclusion. +In general, we would recommend you first open an issue before submitting a pull request. In some cases, Prisma contributors may be able to describe the issue or offer a solution. If you would like to try and solve the issue yourself, please feel free to read [our README](./README.md), get set up with the docs repo, and submit a pull request. -## Creating an issue +### I am not sure my changes are valid + +If you are not sure your changes are valid, then please still open an issue and we will discuss it. Contributions from community members are welcome and will be considered for inclusion. + +### Creating an issue There are no hard and fast rules for creating an issues to the repository. We only ask that you outline your reasoning for creating the issue and try to provide as much detail as possible. Depending on the issue, this could mean explaining what machine you are working on (Is it a Mac? Are you on a Windows machine?), or including a code snippet that demonstrates the issue. -## Creating a pull request (PR) +If you spot a problem with the docs, [search if an issue already exists](https://docs.github.com/en/github/searching-for-information-on-github/searching-on-github/searching-issues-and-pull-requests#search-by-the-title-body-or-comments). If a related issue doesn't exist, you can open a new issue using a relevant [issue form](https://github.com/github/docs/issues/new/choose). + +### Solving an issue + +Scan through our [existing issues](https://github.com/github/docs/issues) to find one that interests you. You can narrow down the search using `labels` as filters. See "[Label reference](https://docs.github.com/en/contributing/collaborating-on-github-docs/label-reference)" for more information. As a general rule, we don’t assign issues to anyone. If you find an issue to work on, you are welcome to open a PR with a fix. -We have a pull request template. The basic breakdown is as follows: +### Creating a pull request (PR) + +Similar to issues, we do not have hard and fast rules for Pull Requests. If you are opening a pull request we do ask that you: - Describe the reason for the PR. A little context goes a long way in helping to quickly scan the PR - Briefly describe what changes were made - Link to any relevant issues + +The Prisma team may ask for changes before a PR can be merged. As these changes are made, please mark the corresponding comments as "resolved". If you need help on a pull request or would like feedback, please feel free to mention the `@Dev-Connections` team. + +As a final note, if you're still working on a PR, please utilize the "Draft Pull Request" feature to let us know that your work is not yet ready. + +Thank you again for contributing to our documentation! diff --git a/README.md b/README.md index aadb161df3..af98ce78fa 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,8 @@ To prettify or format the code, run: npm run format ``` +Please note that `.md` and `.mdx` files are not formatted by Prettier because they are written in [MDX 3](https://mdxjs.com/blog/v3/) which Prettier [does not support](https://github.com/prettier/prettier/issues/12209). + Visit `http://localhost:3000` to view the app. ## Configure @@ -125,23 +127,6 @@ $ mdtool remove 2 # Result: 01-a, 02-b, 03-c, 04-d becomes 01-a, 02-b, 02-c, 03-d; 02-b is supposed to be manually deleted ``` -### Prettier - -To align with the current standards specified in our `.prettierc` configuration, it's recommended to include the `pre-commit` hook within the `/.github/` directory. This can be achieved by executing the following commands from the project's root: - -```bash -mv /.github/pre-commit /.git/hooks/ -``` - -After that, and upon executing a commit command, you may encounter the following message: - -``` -hint: The '.git/hooks/pre-commit' hook was ignored because it's not set as executable. -hint: You can disable this warning with `git config advice.ignoredHook false`. -``` - -To address this, you can follow the provided instructions to disable the `ignoredHook` flag. - #### Thanks Luca ![](https://res.cloudinary.com/prismaio/image/upload/v1628765536/docs/LJ0FGHk_u2jjxv.png) diff --git a/content/600-about/200-prisma-docs/20-style-guide/01-writing-style.mdx b/content/600-about/20-style-guide/01-writing-style.mdx similarity index 98% rename from content/600-about/200-prisma-docs/20-style-guide/01-writing-style.mdx rename to content/600-about/20-style-guide/01-writing-style.mdx index 9dde9725ec..1775cd6214 100644 --- a/content/600-about/200-prisma-docs/20-style-guide/01-writing-style.mdx +++ b/content/600-about/20-style-guide/01-writing-style.mdx @@ -20,7 +20,7 @@ It's a good principle of technical communication to write as simply as possible. - English has many synonyms - where possible, choose the simplest available word for the job. Examples: "in" instead of "within", "use" instead of "utilize". - Use bullet lists to break up complex sentences into component points - Use examples -- Use [appropriate text emphasis, such as bold and italics](/about/prisma-docs/style-guide/spelling-punctuation-formatting#text-emphasis) to make your writing clearer +- Use [appropriate text emphasis, such as bold and italics](/about/style-guide/spelling-punctuation-formatting#text-emphasis) to make your writing clearer - Use tables to set out complex information - Use diagrams to make complex workflows or concepts easier to visualize diff --git a/content/600-about/200-prisma-docs/20-style-guide/02-word-choice.mdx b/content/600-about/20-style-guide/02-word-choice.mdx similarity index 98% rename from content/600-about/200-prisma-docs/20-style-guide/02-word-choice.mdx rename to content/600-about/20-style-guide/02-word-choice.mdx index 23c2aaac6c..4560a7fd78 100644 --- a/content/600-about/200-prisma-docs/20-style-guide/02-word-choice.mdx +++ b/content/600-about/20-style-guide/02-word-choice.mdx @@ -134,7 +134,7 @@ We plan to remove `command name` in v.4.0.0. If you want to abbreviate a term, write it out fully first, then put the abbreviation in parentheses. After that, you can use the abbreviation for the rest of the page. For example, "In computer science, an abstract syntax tree (AST) is …". -See also: [Jargon](/about/prisma-docs/style-guide/writing-style#jargon) +See also: [Jargon](/about/style-guide/writing-style#jargon) ## Avoid ambiguous English words @@ -326,4 +326,4 @@ You can choose to host your project in Vercel or Netlify. Use _checkbox_. -See [Avoid excessive use of UI terminology](/about/prisma-docs/style-guide/user-interace-guidelines#avoid-excessive-use-of-ui-terminology). +See [Avoid excessive use of UI terminology](/about/style-guide/user-interace-guidelines#avoid-excessive-use-of-ui-terminology). diff --git a/content/600-about/200-prisma-docs/20-style-guide/03-spelling-punctuation-formatting.mdx b/content/600-about/20-style-guide/03-spelling-punctuation-formatting.mdx similarity index 82% rename from content/600-about/200-prisma-docs/20-style-guide/03-spelling-punctuation-formatting.mdx rename to content/600-about/20-style-guide/03-spelling-punctuation-formatting.mdx index c96849d743..fb038ae3f3 100644 --- a/content/600-about/200-prisma-docs/20-style-guide/03-spelling-punctuation-formatting.mdx +++ b/content/600-about/20-style-guide/03-spelling-punctuation-formatting.mdx @@ -30,13 +30,15 @@ If you are in doubt about whether to emphasize some text, then don't do it. ### UI elements -For the names of GUI elements (buttons, drop-down menus, and so on), use bold. Also use the same capitalization as in the GUI. For example: +For the names of GUI elements (buttons, drop-down menus, and so on), use **bold**. Also use the same capitalization as in the GUI. For example: -1. In the **File** menu, select **Open...**. +1. In the `**File**` menu, select `**Open...**`. ### Avoid exclamation points -In keeping with our calm tone, do not use exclamation points (exclamation marks). Exception: they are acceptable in congratulatory or welcome messages, for example: "Congratulations - you've completed the tutorial!" +In keeping with our calm tone, do not use exclamation points (exclamation marks). + +Exception: they are acceptable in congratulatory or welcome messages, for example: "Congratulations - you've completed the tutorial!" ### Capitalize and spell out proper nouns @@ -54,7 +56,7 @@ If you're not sure about the spelling of a proper noun, check its official web s ### Titles and headings - Use sentence case for titles and headings: only the initial word is uppercase (exception: [capitalize proper nouns](#capitalize-and-spell-out-proper-nouns)) -- [Avoid gerunds](/about/prisma-docs/style-guide/word-choice#avoid-gerunds-ing-verb-forms) ("Configure the database", not "Configuring the database") +- [Avoid gerunds](/about/style-guide/word-choice#avoid-gerunds-ing-verb-forms) ("Configure the database", not "Configuring the database") - Do not use punctuation at the end of a title or heading unless a question mark is required - Use ``code`` for code in headings - this is required by our navigation elements @@ -156,7 +158,7 @@ Write a short introductory sentence that: For example: -This [`createMany`](..) query does the following: +This [`createMany()`](/orm/reference/prisma-client-reference/#createmany) query does the following: - Creates several `User` records - Creates several nested `Post` records @@ -164,14 +166,14 @@ This [`createMany`](..) query does the following: ### Show the result of a query wherever possible -Use the [``](/about/prisma-docs/docs-components/mdx-examples#code-with-result) component to show a query and the results of that query. +Use the [``](/about/docs-components/mdx-examples#code-with-result) component to show a query and the results of that query. -### Use the `highlight` property to highlight +### Use `highlight` comments to highlight code -Use the [`highlight` property](/about/prisma-docs/docs-components/mdx-examples#code-block-with-highlighted-code) if you need to highlight your code samples. For example: +If you need to highlight lines in your code samples, use the [`highlight` magic comments](/about/docs-components/mdx-examples#code-block-with-highlighted-code). For example: ```` -```prisma highlight=3;normal +```prisma generator client { provider = "prisma-client-js" //highlight-next-line @@ -210,20 +212,6 @@ datasource db { } ``` -### Use Prettier code formatting - -Install [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) in VSCode. Prettier helps ensure your code examples and Markdown have consistent formatting, such as line spacing and indentation. - -If you need to force Prettier to ignore a code block or section of Markdown, you can use `// prettier-ignore`: - -```js - -function xyz() { - console.log({a, b}) -} - -``` - ### Use expressive variable names Good: @@ -240,15 +228,15 @@ const results = (...) // Too generic const foo = (...) // Too vague ``` -### Strive for code snippets to be valid +### Include valid code snippets Ensure that code snippets you include are realistic examples that would work if run in the context presented. -### Prisma schema naming conventions +### Follow Prisma Schema naming conventions -When you create a Prisma schema for an example, follow the [naming conventions](/orm/reference/prisma-schema-reference#naming-conventions) we advise for users. +When you create a Prisma Schema for an example, follow the [naming conventions](/orm/reference/prisma-schema-reference#naming-conventions) we advise for users. -### Lists of shell commands +### List shell commands in a single code block When you need to provide a series of CLI commands as instructions to the reader, use a single block. Don't use a list unless you want to provide context for each step: @@ -275,9 +263,9 @@ or 1. Migrate your database schema: `./node_modules/.bin/sequelize db:migrate` or `npx sequelize db:migrate` 1. Seed the database: `./node_modules/.bin/sequelize db:seed:all` or `npx sequelize db:seed:all` -### Don't prepend CLI commands with `$` +### Don't prepend CLI commands in code blocks with `$` -Use `terminal` for CLI commands - this type of code block includes a `$`: +Use the `terminal` language meta string for CLI commands - this type of code block includes a `$`: ```` ```terminal @@ -291,28 +279,6 @@ For example: npm install prisma ``` -### npm vs Yarn - -Always use `npm` commands instead of `yarn`. - -### Error message reference - -The [error message reference](/orm/reference/error-reference) is a semi-generated doc. Do not edit the list of error codes manually. Use the script to generate the error codes. +### Use `npm` as the default package manager -When you bring the error messages into the page, remove any double quotes around them. - -Bad: - -``` -#### `P1008` - -"Operations timed out after `{time}`" -``` - -Good: - -``` -#### `P1008` - -Operations timed out after `{time}` -``` +All examples should use `npm`. Other package manager options (`yarn`, `pnpm`, `bun`) should only be used if commands differ and never as the default. diff --git a/content/600-about/200-prisma-docs/20-style-guide/04-schema-models.mdx b/content/600-about/20-style-guide/04-schema-models.mdx similarity index 100% rename from content/600-about/200-prisma-docs/20-style-guide/04-schema-models.mdx rename to content/600-about/20-style-guide/04-schema-models.mdx diff --git a/content/600-about/200-prisma-docs/20-style-guide/05-prisma-product-names.mdx b/content/600-about/20-style-guide/05-prisma-product-names.mdx similarity index 100% rename from content/600-about/200-prisma-docs/20-style-guide/05-prisma-product-names.mdx rename to content/600-about/20-style-guide/05-prisma-product-names.mdx diff --git a/content/600-about/200-prisma-docs/20-style-guide/06-image-guidelines.mdx b/content/600-about/20-style-guide/06-image-guidelines.mdx similarity index 100% rename from content/600-about/200-prisma-docs/20-style-guide/06-image-guidelines.mdx rename to content/600-about/20-style-guide/06-image-guidelines.mdx diff --git a/content/600-about/200-prisma-docs/20-style-guide/07-user-interace-guidelines.mdx b/content/600-about/20-style-guide/07-user-interace-guidelines.mdx similarity index 100% rename from content/600-about/200-prisma-docs/20-style-guide/07-user-interace-guidelines.mdx rename to content/600-about/20-style-guide/07-user-interace-guidelines.mdx diff --git a/content/600-about/200-prisma-docs/20-style-guide/10-boilerplate-content.mdx b/content/600-about/20-style-guide/10-boilerplate-content.mdx similarity index 100% rename from content/600-about/200-prisma-docs/20-style-guide/10-boilerplate-content.mdx rename to content/600-about/20-style-guide/10-boilerplate-content.mdx diff --git a/content/600-about/200-prisma-docs/20-style-guide/images/save-multiple-changes.png b/content/600-about/20-style-guide/images/save-multiple-changes.png similarity index 100% rename from content/600-about/200-prisma-docs/20-style-guide/images/save-multiple-changes.png rename to content/600-about/20-style-guide/images/save-multiple-changes.png diff --git a/content/600-about/200-prisma-docs/20-style-guide/images/snagit-arrow-line-config.png b/content/600-about/20-style-guide/images/snagit-arrow-line-config.png similarity index 100% rename from content/600-about/200-prisma-docs/20-style-guide/images/snagit-arrow-line-config.png rename to content/600-about/20-style-guide/images/snagit-arrow-line-config.png diff --git a/content/600-about/200-prisma-docs/20-style-guide/images/snagit-screenshot-shadow-config.png b/content/600-about/20-style-guide/images/snagit-screenshot-shadow-config.png similarity index 100% rename from content/600-about/200-prisma-docs/20-style-guide/images/snagit-screenshot-shadow-config.png rename to content/600-about/20-style-guide/images/snagit-screenshot-shadow-config.png diff --git a/content/600-about/200-prisma-docs/20-style-guide/images/snagit-text-annotation-config.png b/content/600-about/20-style-guide/images/snagit-text-annotation-config.png similarity index 100% rename from content/600-about/200-prisma-docs/20-style-guide/images/snagit-text-annotation-config.png rename to content/600-about/20-style-guide/images/snagit-text-annotation-config.png diff --git a/content/600-about/200-prisma-docs/20-style-guide/index.mdx b/content/600-about/20-style-guide/index.mdx similarity index 100% rename from content/600-about/200-prisma-docs/20-style-guide/index.mdx rename to content/600-about/20-style-guide/index.mdx diff --git a/content/600-about/200-prisma-docs/10-about-the-docs.mdx b/content/600-about/200-prisma-docs/10-about-the-docs.mdx deleted file mode 100644 index bc8c45948d..0000000000 --- a/content/600-about/200-prisma-docs/10-about-the-docs.mdx +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: 'About the docs' -metaTitle: 'About the Prisma documentation' -metaDescription: 'This page gives a meta-overview about different topics that are relevant to better understand and navigate the Prisma documentation.' -tocDepth: 3 ---- - - - -`User` and `Post` are the canonical models that are being used throughout the Prisma docs. This page gives some context on why these have been selected and how to interpret them. - - - -## The `User` and `Post` data model - -The `User` and `Post` models have been selected for the following reasons: - -- These two models do not require domain-specific knowledge. -- They are also commonly used as an example in the ORM space, making them familiar for users coming from other tools. -- Having consistent models makes it easier for the reader when learning about different concepts, since there will be less context switching. -- Less decision making and cognitive overhead for the docs authors. Using the same models reduces decision fatigue and is one less thing to worry about when trying to explain concepts. - -We are actively working on [adding more schema examples](https://github.com/prisma/docs/issues/1626) to the docs to provide you with starting points for common data models, such as ecommerce. - -## Naming conventions for tables and columns - -Table names are generally spelled in [PascalCase](https://en.wikipedia.org/wiki/Camel_case). Column names in [camelCase](https://en.wikipedia.org/wiki/Camel_case). - -## Embrace redundancy - -Meet the user where they are. diff --git a/content/600-about/200-prisma-docs/index.mdx b/content/600-about/200-prisma-docs/index.mdx deleted file mode 100644 index 27d62cf233..0000000000 --- a/content/600-about/200-prisma-docs/index.mdx +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: 'Prisma docs' -metaTitle: 'About Prisma docs' -metaDescription: 'About Prisma docs' -hide_table_of_contents: true -staticLink: true -search: false ---- - -## In this section - - diff --git a/content/600-about/200-prisma-docs/30-docs-components/01-mdx-examples.mdx b/content/600-about/30-docs-components/01-mdx-examples.mdx similarity index 100% rename from content/600-about/200-prisma-docs/30-docs-components/01-mdx-examples.mdx rename to content/600-about/30-docs-components/01-mdx-examples.mdx diff --git a/content/600-about/200-prisma-docs/30-docs-components/03-frontmatter.mdx b/content/600-about/30-docs-components/03-frontmatter.mdx similarity index 100% rename from content/600-about/200-prisma-docs/30-docs-components/03-frontmatter.mdx rename to content/600-about/30-docs-components/03-frontmatter.mdx diff --git a/content/600-about/200-prisma-docs/30-docs-components/index.mdx b/content/600-about/30-docs-components/index.mdx similarity index 100% rename from content/600-about/200-prisma-docs/30-docs-components/index.mdx rename to content/600-about/30-docs-components/index.mdx diff --git a/content/600-about/200-prisma-docs/40-template.mdx b/content/600-about/40-template.mdx similarity index 67% rename from content/600-about/200-prisma-docs/40-template.mdx rename to content/600-about/40-template.mdx index 6be25e8729..9ff566adba 100644 --- a/content/600-about/200-prisma-docs/40-template.mdx +++ b/content/600-about/40-template.mdx @@ -3,14 +3,9 @@ title: 'Writing template' metaTitle: 'Writing template (About)' description: 'A template for writing Prisma Docs.' toc_max_heading_level: 3 -hide_table_of_contents: false --- - - -A short introduction that encourages visitors to read on. The `TopBlock` component is not required in most cases, but is recommended. - - +A short introduction that encourages visitors to read on. ## A section diff --git a/content/600-about/200-prisma-docs/_category_.json b/content/600-about/_category_.json similarity index 100% rename from content/600-about/200-prisma-docs/_category_.json rename to content/600-about/_category_.json diff --git a/content/600-about/index.mdx b/content/600-about/index.mdx index e802c8fba1..d4e217c7c8 100644 --- a/content/600-about/index.mdx +++ b/content/600-about/index.mdx @@ -7,8 +7,29 @@ sidebar_position: 0 sidebar_class_name: firstTitle --- - +This section of our docs is about... the docs! - +Here we describe how our docs are made and how we would prefer you contribute. Here are some handy links: - +- [Our style guide](/about/style-guide) is a good place to start to learn about how we write our documentation and the tone we use. +- [Our component guide](/about/docs-components) is great for understanding the React components that are available to you in our documentation. +- [Our template](/about/template) is a starter template for a page of content. + +## The `User` and `Post` data model + +`User` and `Post` are the canonical models that are being used throughout the Prisma docs. The `User` and `Post` models have been selected for the following reasons: + +- These two models do not require domain-specific knowledge. +- They are also commonly used as an example in the ORM space, making them familiar for users coming from other tools. +- Having consistent models makes it easier for the reader when learning about different concepts, since there will be less context switching. +- Less decision making and cognitive overhead for the docs authors. Using the same models reduces decision fatigue and is one less thing to worry about when trying to explain concepts. + +## Naming conventions for tables and columns + +Prisma ORM defaults to models (and therefore tables) formatted in [PascalCase](https://en.wikipedia.org/wiki/Camel_case) while fields (and therefore columns) are in [camelCase](https://en.wikipedia.org/wiki/Camel_case) + +## Embrace redundancy + +Meet the user where they are. If a piece of information needs to be described in multiple places, do so, but be sure to use [a markdown fragment](https://docusaurus.io/docs/markdown-features/react#importing-markdown) so that information can be updated in one place in the future. + + diff --git a/lostpixel.config.ts b/lostpixel.config.ts index 7c8f8d8a8f..e1d1426c56 100644 --- a/lostpixel.config.ts +++ b/lostpixel.config.ts @@ -17,7 +17,7 @@ export const config: CustomProjectConfig = { display: none; } `, - }) + }); }, lostPixelProjectId: "clb5ek3mm1772001qqg7yban38", apiKey: process.env.LOST_PIXEL_API_KEY, diff --git a/package-lock.json b/package-lock.json index 7a19f4bf35..0c3aa7cce3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "docs", "version": "0.0.0", "dependencies": { - "@docusaurus/core": "^3.3.2", + "@docusaurus/core": "^3.4.0", "@docusaurus/preset-classic": "^3.4.0", "@mdx-js/react": "^3.0.0", "@react-aria/overlays": "^3.22.1", @@ -27,7 +27,7 @@ "sass": "^1.77.4" }, "devDependencies": { - "@docusaurus/module-type-aliases": "^3.3.2", + "@docusaurus/module-type-aliases": "^3.4.0", "@docusaurus/tsconfig": "^3.4.0", "@docusaurus/types": "^3.4.0", "prettier": "3.3.0", diff --git a/package.json b/package.json index 89e7f44e46..513f841833 100644 --- a/package.json +++ b/package.json @@ -12,10 +12,11 @@ "clear": "docusaurus clear", "serve": "docusaurus serve", "write-translations": "docusaurus write-translations", - "write-heading-ids": "docusaurus write-heading-ids" + "write-heading-ids": "docusaurus write-heading-ids", + "format": "prettier --write ." }, "dependencies": { - "@docusaurus/core": "^3.3.2", + "@docusaurus/core": "^3.4.0", "@docusaurus/preset-classic": "^3.4.0", "@mdx-js/react": "^3.0.0", "@react-aria/overlays": "^3.22.1", @@ -34,7 +35,7 @@ "sass": "^1.77.4" }, "devDependencies": { - "@docusaurus/module-type-aliases": "^3.3.2", + "@docusaurus/module-type-aliases": "^3.4.0", "@docusaurus/tsconfig": "^3.4.0", "@docusaurus/types": "^3.4.0", "prettier": "3.3.0", diff --git a/src/components/GettingStarted/index.tsx b/src/components/GettingStarted/index.tsx index f99c8c85c4..e2235cdaa0 100644 --- a/src/components/GettingStarted/index.tsx +++ b/src/components/GettingStarted/index.tsx @@ -48,7 +48,7 @@ export const SignalStream = ({ color, height, width }: any) => ( fill={color ? color : "currentColor"} d="M108.2 71c13.8 11.1 16 31.2 5 45C82.4 154.4 64 203 64 256s18.4 101.6 49.1 140c11.1 13.8 8.8 33.9-5 45s-33.9 8.8-45-5C23.7 386.7 0 324.1 0 256S23.7 125.3 63.2 76c11.1-13.8 31.2-16 45-5zm359.7 0c13.8-11.1 33.9-8.8 45 5C552.3 125.3 576 187.9 576 256s-23.7 130.7-63.2 180c-11.1 13.8-31.2 16-45 5s-16-31.2-5-45c30.7-38.4 49.1-87 49.1-140s-18.4-101.6-49.1-140c-11.1-13.8-8.8-33.9 5-45zM232 256a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm-27.5-74.7c-17.8 19.8-28.5 46-28.5 74.7s10.8 54.8 28.5 74.7c11.8 13.2 10.7 33.4-2.5 45.2s-33.4 10.7-45.2-2.5C129 342.2 112 301.1 112 256s17-86.2 44.8-117.3c11.8-13.2 32-14.3 45.2-2.5s14.3 32 2.5 45.2zm214.7-42.7C447 169.8 464 210.9 464 256s-17 86.2-44.8 117.3c-11.8 13.2-32 14.3-45.2 2.5s-14.3-32-2.5-45.2c17.8-19.8 28.5-46 28.5-74.7s-10.8-54.8-28.5-74.7c-11.8-13.2-10.7-33.4 2.5-45.2s33.4-10.7 45.2 2.5z" /> - + ); export const BorderBoxWrapper = ({ children, ...props }) => ( @@ -63,9 +63,7 @@ export const BoxTitle = ({ children, ...props }) => ( ); -export const Separator = () => ( -
-) +export const Separator = () =>
; export const BorderBox = ({ border, ...props }: any) => ( {props.children} @@ -80,7 +78,11 @@ export const Grid = ({ children, ...props }) => ( export const LinkCard = ({ icon, title, desc, link, highlight }: any) => { const linkCardRef = useRef(null); return ( - +
{title}
@@ -110,8 +112,8 @@ export const SquareLogo = ({ image, tech, url, imageDark }: any) => { onMouseMove={() => setVisibleTooltip(true)} onMouseLeave={() => setVisibleTooltip(false)} > - - {imageDark && } + + {imageDark && } {visibleTooltip && ( @@ -123,7 +125,10 @@ export const SquareLogo = ({ image, tech, url, imageDark }: any) => { }; export const List = ({ children, framed, split, ...props }) => ( -
+
{children}
-); \ No newline at end of file +); diff --git a/src/components/dropdown/index.tsx b/src/components/dropdown/index.tsx index fe51f5945f..02b688e8a5 100644 --- a/src/components/dropdown/index.tsx +++ b/src/components/dropdown/index.tsx @@ -19,21 +19,20 @@ const SimpleDropdown = ({ pos = "bottom", }: SimpleDropType) => { const [isOpen, openDrop] = useState(false); - const { ref, isComponentVisible, setIsComponentVisible } = - useComponentVisible(true); + const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(true); useEffect(() => { if (!isComponentVisible) openDrop(false); }, [isComponentVisible]); const escEvent = (e: KeyboardEvent) => { - if (e.key === "Escape") openDrop(false) - } + if (e.key === "Escape") openDrop(false); + }; useEffect(() => { - window.addEventListener("keydown", escEvent) - return () => window.removeEventListener("keydown", escEvent) - }, []) + window.addEventListener("keydown", escEvent); + return () => window.removeEventListener("keydown", escEvent); + }, []); return (
{anchor}
-
{ - e.stopPropagation(); - openDrop(false); - }} - > -
- {items.map((item: any, idx: number) => ( -
- {item} -
- ))} -
+
{ + e.stopPropagation(); + openDrop(false); + }} + > +
+ {items.map((item: any, idx: number) => ( +
+ {item} +
+ ))}
+
); }; -export default SimpleDropdown; \ No newline at end of file +export default SimpleDropdown; diff --git a/src/components/dropdown/styles.module.scss b/src/components/dropdown/styles.module.scss index bf521cf7c4..5af15c8ddd 100644 --- a/src/components/dropdown/styles.module.scss +++ b/src/components/dropdown/styles.module.scss @@ -1,94 +1,95 @@ - -$border-color: #2D3748; -$surface: #090A15; +$border-color: #2d3748; +$surface: #090a15; $hover: #2d3748; - .root { - position: relative; + position: relative; } .anchor { - padding-bottom: 32px; - margin-bottom: -32px; + padding-bottom: 32px; + margin-bottom: -32px; } .overlayWrapper { - opacity: 0; - pointer-events: none; - @media (max-width: 599px) { - position: fixed; - height: 100vh; - z-index: 102; - width: 100vw; - background: rgb(9, 10, 21, 0.75); - top: 0; - left: 0; - } + opacity: 0; + pointer-events: none; + @media (max-width: 599px) { + position: fixed; + height: 100vh; + z-index: 102; + width: 100vw; + background: rgb(9, 10, 21, 0.75); + top: 0; + left: 0; + } + .container { + transform: translateY(100%); + } + &.showOverlay { .container { - transform: translateY(100%); - } - &.showOverlay { - .container { - transform: translateY(0); - } + transform: translateY(0); } + } } .showOverlay { - opacity: 1; - pointer-events: auto; + opacity: 1; + pointer-events: auto; } .container { - background: $surface; - border: 1px solid $border-color; - box-shadow: 0px 0px 46px 0px rgba(23, 43, 77, 0.01), 0px 4px 26px 0px rgba(23, 43, 77, 0.05), 0px 18px 42px 0px rgba(23, 43, 77, 0.08); - padding: 8px; - border-radius: 8px; - bottom: 0; - position: absolute; - width: 100%; - left: 0; - transition: transform 300ms ease; - display: flex; - flex-direction: column; - gap: 8px; - @media (min-width: 600px) { - top: 100%; - margin-top: 16px; - bottom: unset; - width: auto; - } + background: $surface; + border: 1px solid $border-color; + box-shadow: + 0px 0px 46px 0px rgba(23, 43, 77, 0.01), + 0px 4px 26px 0px rgba(23, 43, 77, 0.05), + 0px 18px 42px 0px rgba(23, 43, 77, 0.08); + padding: 8px; + border-radius: 8px; + bottom: 0; + position: absolute; + width: 100%; + left: 0; + transition: transform 300ms ease; + display: flex; + flex-direction: column; + gap: 8px; + @media (min-width: 600px) { + top: 100%; + margin-top: 16px; + bottom: unset; + width: auto; + } } .item { - border-radius: 8px; - color: #A0AEC0; - width: max-content; - min-width: 100%; - cursor: pointer; - padding: 8px 12px; - background: $surface; - transition: background 300ms ease-out; - &:hover { - background: $hover; - } + border-radius: 8px; + color: #a0aec0; + width: max-content; + min-width: 100%; + cursor: pointer; + padding: 8px 12px; + background: $surface; + transition: background 300ms ease-out; + &:hover { + background: $hover; + } } .topPos { - @media (min-width: 600px) { - top: unset !important; - left: 0 !important; - transform: unset !important; - bottom: 100% !important; - } - & > * { - width: 100%; - display: inline-block; - } + @media (min-width: 600px) { + top: unset !important; + left: 0 !important; + transform: unset !important; + bottom: 100% !important; + } + & > * { + width: 100%; + display: inline-block; + } - a { - color: inherit - } -} \ No newline at end of file + a { + color: inherit; + } +} diff --git a/src/components/shortcodes/index.tsx b/src/components/shortcodes/index.tsx index b30fe0808b..c16e1ebe7e 100644 --- a/src/components/shortcodes/index.tsx +++ b/src/components/shortcodes/index.tsx @@ -1,16 +1,25 @@ -import { Icon } from "../Icon" +import { Icon } from "../Icon"; const Headline = ({ component, children }) => { - const Component = component; - return {children}; + const Component = component; + return {children}; }; -export const IconTitle = ({ heading, icon, iconColor, children}: { heading: string, icon: string, iconColor: string, children: any}) => { - return ( - - - {children} - - ) -} - +export const IconTitle = ({ + heading, + icon, + iconColor, + children, +}: { + heading: string; + icon: string; + iconColor: string; + children: any; +}) => { + return ( + + + {children} + + ); +}; diff --git a/src/css/all.css b/src/css/all.css index 293ad9f1e9..a552f676da 100644 --- a/src/css/all.css +++ b/src/css/all.css @@ -972,7 +972,7 @@ font-weight: 400; } -:root, +:root, :host { --fa-style-family-brands: "Font Awesome 6 Brands"; --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"; diff --git a/src/css/custom.css b/src/css/custom.css index d3242d363f..b5f5023820 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -705,7 +705,8 @@ hr { font-family: Barlow, sans-serif; } -.footer__item a, .footer__item.anchor { +.footer__item a, +.footer__item.anchor { color: #a0aec0; font-size: 1rem; display: flex; diff --git a/src/css/gettingStarted.module.scss b/src/css/gettingStarted.module.scss index ecf3660b99..ba2664aa97 100644 --- a/src/css/gettingStarted.module.scss +++ b/src/css/gettingStarted.module.scss @@ -84,13 +84,13 @@ border-color: var(--ifm-btn-border-color-active); background: transparent; color: inherit; - } + } &.linkCardHighlight { background: rgba(22, 163, 148, 0.12); border-color: rgb(22, 163, 148); &:hover { // background: #B7F4EE; - border-color: #154F47; + border-color: #154f47; } } .title { diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx index 16c56eb4fb..394b2c549b 100644 --- a/src/theme/Footer/Layout/index.tsx +++ b/src/theme/Footer/Layout/index.tsx @@ -8,7 +8,11 @@ export default function FooterLayout({ style, links, logo, copyright }) {