Created main site

Author: ajay-dhangar

.gitattributes

@@ -0,0 +1,30 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+* text eol=lf
+
+# Don't do anything with binaries
+*.png binary
+*.jpg binary
+*.svg binary
+*.jpeg binary
+*.gif binary
+*.ico binary
+*.mov binary
+*.mp4 binary
+*.mp3 binary
+*.flv binary
+*.fla binary
+*.swf binary
+*.gz binary
+*.zip binary
+*.7z binary
+*.ttf binary
+*.eot binary
+*.woff binary
+*.woff2 binary
+*.pyc binary
+*.pdf binary
+*.ez binary
+*.bz2 binary
+*.swp binary
+*.webp binary

.gitignore

@@ -0,0 +1,23 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# WSL
+*:Zone.Identifier

.markdownlint.json

@@ -0,0 +1,4 @@
+{
+  "MD013": false,
+  "MD049": false
+}

.prettierignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+.yarn

.prettierrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  printWidth: 80, // max 120 chars in line, code is easy to read
+  useTabs: false, // use spaces instead of tabs
+  tabWidth: 2, // "visual width" of of the "tab"
+  trailingComma: "es5", // add trailing commas in objects, arrays, etc.
+  semi: true, // add ; when needed
+  singleQuote: false, // '' for stings instead of ""
+  bracketSpacing: true, // import { some } ... instead of import {some} ...
+  arrowParens: "always", // braces even for single param in arrow functions (a) => { }
+  jsxSingleQuote: false, // "" for react props, like in html
+  jsxBracketSameLine: false, // pretty JSX
+  endOfLine: "lf", // 'lf' for linux, 'crlf' for windows, we need to use 'lf' for git
+};

README.md

@@ -0,0 +1,31 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```bash
+yarn
+```
+
+### Local Development
+
+```bash
+yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```bash
+yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.  
+The `.env.local` file needs to contain the following entries retrieved from [algolia](https://www.algolia.com):
+
+```bash
+APPLICATION_ID=XXXX
+API_KEY=xxxx
+```

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
+};

blog/2024/07-27-caddy-for-SPA/index.mdx

@@ -0,0 +1,69 @@
+---
+title: Setup Caddy for SPA Stored at S3 Object Storage. (React with react-router)
+authors: ajay_dhangar
+tags: [docker, self-hosting, SPA, React]
+description: Set up Caddy for serving a Single Page Application (SPA) like a React app with react-route. The react app is stored at a remote storage like S3, minio.
+---
+
+To set up Caddy for serving a Single Page Application (SPA) like a React app with react-router, you need to handle routing such that all navigation requests are routed to `index.html`, while also serving the static assets correctly.
+
+{/* truncate */}
+
+## Directory Structure on Remote Storage
+
+Let's assume that the React app is stored at a remote storage like S3, minio, etc. The directory structure of the React app on the remote storage should look like this:
+
+```md title="Directory Structure"
+├── index.html
+├── static
+│   ├── css
+│   │   └── main.2d2b7b6a.chunk.css
+│   ├── js
+│   │   ├── 2.2d2b7b6a.chunk.js
+│   │   ├── main.2d2b7b6a.chunk.js
+│   │   └── runtime-main.2d2b7b6a.js
+│   └── media
+│       └── logo.2d2b7b6a.png
+```
+
+## Caddyfile Configuration
+
+To serve the React app using Caddy, you need to create a `Caddyfile` with the following configuration:
+
+```md title="Caddyfile"
+your-domain.com {
+    root * /path/to/your/react-app
+    file_server
+    try_files {path} /index.html
+}
+```
+
+In the above configuration:
+
+- `your-domain.com` is your domain name.
+- `/path/to/your/react-app` is the path to your React app on the remote storage.
+- `file_server` is used to serve the static assets.
+- `try_files {path} /index.html` is used to route all navigation requests to `index.html`.
+
+## Docker Configuration
+
+If you are using Docker to run Caddy, you can create a `Dockerfile` with the following configuration:
+
+```dockerfile title="Dockerfile"
+FROM caddy:2.4.3
+
+COPY Caddyfile /etc/caddy/Caddyfile
+```
+
+You can then build the Docker image and run the container using the following commands:
+
+```bash title="Build and Run Docker Container"
+docker build -t caddy-spa .
+docker run -d -p 80:80 caddy-spa
+```
+
+That's it! You have now set up Caddy to serve a Single Page Application (SPA) like a React app with react-router.
+
+## Conclusion
+
+In this article, we discussed how to set up Caddy for serving a Single Page Application (SPA) like a React app with react-router. By handling routing and serving static assets correctly, you can ensure that your SPA works as expected when hosted on a remote storage like S3, minio, etc.

blog/authors.yml

@@ -0,0 +1,5 @@
+ajay_dhangar:
+  name: Ajay Dhangar
+  title: Full Stack Developer | Open Source Maintainer
+  url: http://github.com/ajay-dhangar
+  image_url: https://github.com/ajay-dhangar.png