Feature/us 19 20 add map page layout

.devcontainer/devcontainer.env

@@ -0,0 +1 @@
+MYSQL_HOST=host.docker.internal

.devcontainer/devcontainer.json

@@ -0,0 +1,25 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/python
+{
+	"name": "Python 3",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/python:1-3.12-bullseye",
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "pip3 install --user -r canopeum_backend/requirements-dev.txt",
+	"features": {
+		"ghcr.io/devcontainers/features/node:1": {}
+	},
+  "runArgs": ["--env-file",".devcontainer/devcontainer.env"]
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+ - package-ecosystem: "devcontainers"
+   directory: "/"
+   schedule:
+     interval: weekly

README.md

@@ -6,7 +6,15 @@ This project integrates Django backend with React Vite frontend template to crea
 
 ## Getting Started
 
-Follow these instructions to get the project up and running on your local machine.
+This project has been configured to run in VsCode dev container with all
+necessary tools to run the front-end and backend from within the environment or
+follow these instructions to get the project up and running on your local machine
+without dev container.
+
+Note: If you choose to develop from within the dev container, you still need to
+have your mysql database available accessible from your app. We've pre-configured
+the dev container to try reaching the default mysql database container created
+with the docker-compose.yml from this repository.
 
 ### Prerequisites
 

canopeum_backend/canopeum_backend/serializers.py

@@ -1,4 +1,5 @@
 from django.contrib.auth.models import User
+from drf_spectacular.utils import extend_schema_field
 from rest_framework import serializers
 
 from .models import (
@@ -136,9 +137,13 @@ class Meta:
         model = Site
         fields = ("name", "site_type", "image", "description", "contact", "announcement", "sponsors", "widget")
 
+    # Bug in the extend_schema_field type annotation, they should allow
+    # base python types supported by open api specs
+    @extend_schema_field(list[str])  # pyright: ignore[reportArgumentType]
     def get_sponsors(self, obj):
         return self.context.get("sponsors")
 
+    @extend_schema_field(WidgetSerializer(many=True))
     def get_widget(self, obj):
         return WidgetSerializer(obj.widget_set.all(), many=True).data
 

canopeum_backend/canopeum_backend/settings.py

@@ -10,6 +10,7 @@
 https://docs.djangoproject.com/en/5.0/ref/settings/
 """
 
+import os
 from pathlib import Path
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
@@ -126,8 +127,8 @@
         "NAME": "canopeum_db",
         "USER": "root",
         "PASSWORD": "canopeum",
-        "HOST": "localhost",
-        "PORT": "3308",  # Same as in docker-compose.yml
+        "HOST": os.environ.get("MYSQL_HOST", "localhost"),
+        "PORT": "3308",  # Same as in docker-compose.yaml
     },
 }
 

canopeum_frontend/.eslintrc.cjs

@@ -6,6 +6,10 @@ module.exports = {
     'beslogic/typescript',
     'beslogic/dprint',
   ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: ['tsconfig?(.*).json'],
+  },
   ignorePatterns: [
     '.eslintrc.cjs',
     // Auto-generated
@@ -24,5 +28,6 @@ module.exports = {
     'no-autofix/no-relative-import-paths/no-relative-import-paths': 'off',
     // Using Bootraps directly without a React wrapper will cause us to have to add classes to React Components
     'react/forbid-component-props': 'off',
+    '@typescript-eslint/no-unsafe-member-access': 'warn',
   },
 }

canopeum_frontend/index.html

@@ -21,6 +21,19 @@
     href='https://unpkg.com/[email protected]/dist/maplibre-gl.css'
     rel='stylesheet'
   />
+  <link
+    rel="preconnect"
+    href="https://fonts.googleapis.com"
+  >
+  <link
+    rel="preconnect"
+    href="https://fonts.gstatic.com"
+    crossorigin
+  >
+  <link
+    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
+    rel="stylesheet"
+  >
 </head>
 
 <body>