Merge pull request #63 from Edit-Mr/master

Website Chinese Translation & Prettier

.github/workflows/prettier-check.yml

@@ -0,0 +1,22 @@
+name: Prettier Check
+
+on: [push, pull_request]
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install Prettier
+        run: npm install prettier
+
+      - name: Run Prettier check
+        run: npx prettier --check --ignore-path .prettierignore .

.gitignore

@@ -1,3 +1,6 @@
 .DS_Store
 node_modules/
 dist/
+
+# Local Netlify folder
+.netlify

.prettierignore

@@ -0,0 +1 @@
+src/**/*.md

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "singleQuote": true
+}

README.md

@@ -1,43 +1,78 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/be9ff8bf-e575-44b6-9db4-1087ff4942f8/deploy-status)](https://app.netlify.com/sites/revealjs/deploys)
 
 # revealjs.com
+
 The official reveal.js website and docs. Contributions are welcome!
 
 ## Installation
+
 1. Clone the repo
+
    ```sh
    $ git clone https://github.com/reveal/revealjs.com.git && cd revealjs.com
    ```
 
 1. Install dependencies
+
    ```sh
    $ yarn
    ```
 
 1. Start the development server
+
    ```sh
    $ yarn start
    ```
 
 The development server will automatically reload as you make changes.
 
 ## Spell Check
+
 There's a built-in task for spell checking.
 
 ```sh
 $ yarn test
 ```
 
+## Formatting
+
+We use [Prettier](https://prettier.io/) to ensure consistent code formatting. The rules are as follows:
+
+- Single quotes for strings.
+- 2-space indentation.
+
+Make sure your code adheres to these rules before committing. You can format your code manually with:
+
+```sh
+$ yarn prettier --write .
+```
+
+### GitHub Actions Check
+
+Our repository includes a GitHub Actions workflow that automatically checks code formatting on each push and pull request. This ensures all code merged into the repository follows the defined formatting rules.
+
+## Translation
+
+We welcome contributions to help translate the site into different languages. If you would like to help with translations, please follow our [Translation Guide](translation-guide.md). This guide provides detailed instructions on how to contribute translations.
+
 ## Technologies
+
 This site is built using [Eleventy](https://www.11ty.dev/) — a powerful but easy to use static site generator. It's styled with [tailwindcss](https://tailwindcss.com/) and the docs are written in Markdown.
 
 ## Deploy
-The site is hosted on Netlify and automatically deploys master when there are new commits.
+
+The site is hosted on Netlify and automatically deploys the `master` branch when there are new commits.
 
 We automatically generate our production build at deploy-time but it's also possible to do it manually with:
-```
+
+```sh
 yarn run production
 ```
 
 ### Note
-reveal.js is installed from the [master branch](https://github.com/hakimel/reveal.js/). If it gets stuck on an old version, remove the reveal.js entry from `package.lock.json` and rerun `yarn`.
+
+reveal.js is installed from the [master branch](https://github.com/hakimel/reveal.js/). If it gets stuck on an old version, remove the reveal.js entry from `package.lock.json` and rerun `yarn`.
+
+---
+
+This updated `README.md` now includes a section about helping with translations, directing users to follow the `translation-guide.md` for detailed instructions.

css/base.scss

@@ -1,142 +1,151 @@
 $headerHeight: 4rem;
 $headerMargin: 2rem;
 
-$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-$easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
-$easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+$easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
+$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
 
 html {
-	font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
-    font-size: 16px;
+  font-family:
+    'Inter',
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 16px;
 }
 
 :target {
-    scroll-margin-top: $headerHeight + $headerMargin;
+  scroll-margin-top: $headerHeight + $headerMargin;
 }
 
-a, button {
-    touch-action: manipulation !important;
-    -webkit-tap-highlight-color: darken( #edf2f7, 15% );
+a,
+button {
+  touch-action: manipulation !important;
+  -webkit-tap-highlight-color: darken(#edf2f7, 15%);
 }
 
 .no-transition,
 .no-transition * {
-    transition: none !important;
+  transition: none !important;
 }
 
-
 // sidebar
 .nav-link {
-    @apply text-gray-700 w-full inline-block;
+  @apply text-gray-700 w-full inline-block;
 }
 
 .nav-link:hover {
-    @apply text-gray-900;
+  @apply text-gray-900;
 }
 
 .nav-link.selected {
-    @apply text-yellow-900 bg-yellow-400 rounded;
+  @apply text-yellow-900 bg-yellow-400 rounded;
 }
 
-
 // External links
 .exernal-link-icon {
-    @apply inline-block ml-1 align-text-bottom opacity-75;
+  @apply inline-block ml-1 align-text-bottom opacity-75;
 }
 
 .exernal-link-icon svg {
-    height: 1rem;
+  height: 1rem;
 }
 .exernal-link-icon path {
-    @apply fill-current;
+  @apply fill-current;
 }
 
 // Advertising
 #carbonads {
-    width: 100%;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    z-index: 10;
-    text-align: left;
-    @apply text-sm;
+  width: 100%;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  z-index: 10;
+  text-align: left;
+  @apply text-sm;
 }
 
 #carbonads .carbon-img img {
-    width: 130px;
-    height: 100px;
-    margin: 0 0 10px 0;
-    border: 0;
-    box-shadow: none;
+  width: 130px;
+  height: 100px;
+  margin: 0 0 10px 0;
+  border: 0;
+  box-shadow: none;
 }
 
 #carbonads .carbon-text {
-    @apply text-gray-700;
+  @apply text-gray-700;
 }
 
 #carbonads .carbon-poweredby {
-    display: block;
-    margin-top: 10px;
-    @apply text-gray-500;
+  display: block;
+  margin-top: 10px;
+  @apply text-gray-500;
 }
 
-
 // Directional hover effect
 .r-anchor {
-    position: relative;
+  position: relative;
 }
 
 .r-anchor-label {
-    position: relative;
-    z-index: 2;
+  position: relative;
+  z-index: 2;
 }
 
 .r-anchor-background {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    pointer-events: none;
-    visibility: hidden;
-    border-radius: 0.25rem;
-    z-index: -1;
-    @apply bg-gray-300;
-
-    transition: opacity 0.2s $easeOutQuint,
-                visibility 0.2s $easeOutQuint,
-                transform 0.3s $easeOutQuint;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+  border-radius: 0.25rem;
+  z-index: -1;
+  @apply bg-gray-300;
+
+  transition:
+    opacity 0.2s $easeOutQuint,
+    visibility 0.2s $easeOutQuint,
+    transform 0.3s $easeOutQuint;
 }
 
 .r-anchor.hover .r-anchor-background {
-    opacity: 1;
-    transform: none !important;
-    visibility: visible;
+  opacity: 1;
+  transform: none !important;
+  visibility: visible;
 
-    transition: transform 0.3s $easeOutQuint;
+  transition: transform 0.3s $easeOutQuint;
 }
 
 .search-result .r-anchor-background {
-    @apply bg-gray-200;
+  @apply bg-gray-200;
 }
 
-
 .homepage-promotion {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    bottom: 2rem;
-    left: 2rem;
-    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
-    border: 1px solid rgba(255,255,255,0.75);
-    border-radius: 100px;
-    color: #fff;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  bottom: 2rem;
+  left: 2rem;
+  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
+  border: 1px solid rgba(255, 255, 255, 0.75);
+  border-radius: 100px;
+  color: #fff;
 }
 .homepage-promotion span {
-    background: #fff;
-    color: #000;
-    border-radius: 100px;
-    margin-left: 0.75rem;
-    font-size: 0.8em;
-    padding: 0.25rem 0.5rem;
+  background: #fff;
+  color: #000;
+  border-radius: 100px;
+  margin-left: 0.75rem;
+  font-size: 0.8em;
+  padding: 0.25rem 0.5rem;
 }
-