Install tailwind and add dark mode

Author: JesusValeraDev

.browserslistrc

@@ -0,0 +1,7 @@
+# Browsers that we support
+
+> 1%
+last 2 versions
+not dead
+not ie 11
+not op_mini all

.github/workflows/main.yml

@@ -17,12 +17,24 @@ jobs:
           php-version: '8.3'
           tools: composer
 
-      - name: Install dependencies
+      - name: Install PHP dependencies
         run: composer install
 
       - name: Generate API Documentation
         run: composer build
 
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install Node.js dependencies
+        run: npm ci
+
+      - name: Build CSS for production
+        run: npm run build-css-prod
+
       - name: Build and deploy
         uses: jenshaase/deploy-zola-via-lftp-action@main
         with:

.gitignore

@@ -3,8 +3,22 @@
 .cache/
 public/
 vendor/
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.DS_Store
+Thumbs.db
+
+/build/
+/dist/
 
 .phel-repl-history
 .phpunit.result.cache
 static/api_search.js
 content/documentation/api.md
+/static/tailwind.css
+/css/tailwind.entry.css
+/static/syntax-theme-dark.css
+/static/syntax-theme-light.css

.prettierignore

@@ -0,0 +1,29 @@
+# Dependencies
+node_modules/
+vendor/
+
+# Build outputs
+public/
+static/tailwind.css
+css/tailwind.entry.css
+
+# Generated files
+*.lock
+*.log
+
+# IDE
+.vscode/
+.idea/
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Zola generated
+sitemap.xml
+atom.xml
+robots.txt
+
+# Don't format minified files
+*.min.js
+*.min.css

.prettierrc.json

@@ -0,0 +1,29 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "html",
+        "printWidth": 120,
+        "tabWidth": 2,
+        "bracketSameLine": false
+      }
+    },
+    {
+      "files": "*.css",
+      "options": {
+        "parser": "css",
+        "printWidth": 100
+      }
+    }
+  ]
+}

.stylelintrc.json

@@ -0,0 +1,33 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-tailwindcss"
+  ],
+  "rules": {
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "tailwind",
+          "apply",
+          "variants",
+          "responsive",
+          "screen",
+          "layer",
+          "utility",
+          "theme",
+          "source",
+          "custom-variant"
+        ]
+      }
+    ],
+    "declaration-block-trailing-semicolon": null,
+    "no-descending-specificity": null,
+    "function-no-unknown": [
+      true,
+      {
+        "ignoreFunctions": ["theme"]
+      }
+    ]
+  }
+}

README.md

@@ -24,7 +24,7 @@ The documentation is build with [Zola](https://www.getzola.org/).
 #### Local development
 
 ```bash
-zola serve # build & serve
+npm run dev # serve and watch CSS changes
 ```
 
 #### Prod environment

config.toml

@@ -5,7 +5,7 @@ title = "The Phel Language"
 description = "The official website of the Phel language. Phel is a functional programming language that compiles to PHP"
 
 # Whether to automatically compile all Sass files in the sass directory
-compile_sass = true
+compile_sass = false
 
 # Whether to build a search index to be used later on by a JavaScript library
 build_search_index = false
@@ -16,7 +16,11 @@ generate_feeds = true
 # Whether to do syntax highlighting
 # Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
 highlight_code = true
-highlight_theme = "Tomorrow"
+highlight_theme = "css"
+highlight_themes_css = [
+    { theme = "base16-ocean-dark", filename = "syntax-theme-dark.css" },
+    { theme = "base16-ocean-light", filename = "syntax-theme-light.css" },
+]
 extra_syntaxes = ["syntaxes"]
 extra_syntaxes_and_themes = ["syntaxes"]