gkucmierz/geo-words
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add Docker config, Gitea workflow, and map improvements
Some checks failed
Docker Image CI / build (push) Has been cancelled
Details

Browse Source 
- Add Dockerfile, nginx.conf, docker-compose.yml
- Add Gitea Actions workflow
- Improve map mobile UX (safe area, no pull-to-refresh)
- Persist map state (zoom, center, layer) to localStorage
- Add Google Hybrid map layer
- Configure Vite for Cloudflare tunnel
This commit is contained in:
Grzegorz Kucmierz
2026-03-01 07:15:17 +00:00
parent 0db2f55831
commit fa1165558b
10 changed files with 267 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.dockerignore Normal file
View File

@@ -0,0 +1,5 @@
node_modules
dist
.git
.vscode
.DS_Store

18
.gitea/workflows/docker-build.yml Normal file
View File

@@ -0,0 +1,18 @@
name: Docker Image CI
on:
push:
branches: [ "main" ]
pull_request:
branches: [ "main" ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Build the Docker image
run: docker build . --file Dockerfile --tag my-image-name:$(date +%s)

20
Dockerfile Normal file
View File

@@ -0,0 +1,20 @@
# Stage 1: Build the Vue application
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# Stage 2: Serve the application with Nginx
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

13
docker-compose.yml Normal file
View File

@@ -0,0 +1,13 @@
version: '3'
services:
geo-words:
build: .
ports:
- "3002:80"
restart: always
networks:
- npm_public
networks:
npm_public:
external: true

2
index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/earth.png" /> <link rel="icon" type="image/png" href="/earth.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Geo Words</title> <title>Geo Words</title>
<!-- Meta tags for social media --> <!-- Meta tags for social media -->
<meta property="og:title" content="Geo Words" /> <meta property="og:title" content="Geo Words" />

15
nginx.conf Normal file
View File

@@ -0,0 +1,15 @@
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}

3
src/App.vue
View File

@@ -11,7 +11,8 @@ import Map from './components/Map.vue';
<style scoped> <style scoped>
.app-container { .app-container {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh; /* Fallback for browsers not supporting dvh */
height: 100dvh; /* Dynamic Viewport Height - fixes issues with mobile browser toolbars */
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;

183
src/components/Map.vue
View File

@@ -13,7 +13,8 @@
attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors &copy; <a href='https://carto.com/attributions'>CARTO</a>" attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors &copy; <a href='https://carto.com/attributions'>CARTO</a>"
layer-type="base" layer-type="base"
name="Voyager (Jasny)" name="Voyager (Jasny)"
:visible="true" :visible="activeLayer === 'Voyager (Jasny)'"
@add="activeLayer = 'Voyager (Jasny)'"
></l-tile-layer> ></l-tile-layer>
<l-tile-layer <l-tile-layer
@@ -21,7 +22,8 @@
attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors &copy; <a href='https://carto.com/attributions'>CARTO</a>" attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors &copy; <a href='https://carto.com/attributions'>CARTO</a>"
layer-type="base" layer-type="base"
name="Dark Matter (Ciemny)" name="Dark Matter (Ciemny)"
:visible="false" :visible="activeLayer === 'Dark Matter (Ciemny)'"
@add="activeLayer = 'Dark Matter (Ciemny)'"
></l-tile-layer> ></l-tile-layer>
<l-tile-layer <l-tile-layer
@@ -29,7 +31,17 @@
attribution="Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community" attribution="Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
layer-type="base" layer-type="base"
name="Satelita (Esri)" name="Satelita (Esri)"
:visible="false" :visible="activeLayer === 'Satelita (Esri)'"
@add="activeLayer = 'Satelita (Esri)'"
></l-tile-layer>
<l-tile-layer
url="https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}"
attribution="&copy; <a href='https://www.google.com/maps'>Google Maps</a>"
layer-type="base"
name="Satelita + Drogi (Google)"
:visible="activeLayer === 'Satelita + Drogi (Google)'"
@add="activeLayer = 'Satelita + Drogi (Google)'"
></l-tile-layer> ></l-tile-layer>
<l-tile-layer <l-tile-layer
@@ -37,24 +49,177 @@
attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors" attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
layer-type="base" layer-type="base"
name="OpenStreetMap (Standard)" name="OpenStreetMap (Standard)"
:visible="false" :visible="activeLayer === 'OpenStreetMap (Standard)'"
@add="activeLayer = 'OpenStreetMap (Standard)'"
></l-tile-layer> ></l-tile-layer>
</l-map> </l-map>
<button class="control-btn locate-btn" @click="locateUser" title="Lokalizuj mnie">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<circle cx="12" cy="12" r="3"></circle>
<line x1="12" y1="2" x2="12" y2="4"></line>
<line x1="12" y1="20" x2="12" y2="22"></line>
<line x1="2" y1="12" x2="4" y2="12"></line>
<line x1="20" y1="12" x2="22" y2="12"></line>
</svg>
</button>
<button class="control-btn refresh-btn" @click="reloadPage" title="Odśwież aplikację">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M23 4v6h-6"></path>
<path d="M1 20v-6h6"></path>
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
</svg>
</button>
</div> </div>
</template> </template>
<script setup> <script setup>
import "leaflet/dist/leaflet.css"; import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer, LControlLayers } from "@vue-leaflet/vue-leaflet"; import { LMap, LTileLayer, LControlLayers } from "@vue-leaflet/vue-leaflet";
import { ref } from "vue"; import { ref, onMounted, watch } from "vue";
const zoom = ref(2); // Domyślne wartości
const center = ref([20, 0]); // Lekko przesunięte, żeby ładniej wyglądało na start const DEFAULT_ZOOM = 2;
const DEFAULT_CENTER = [0, 0];
const DEFAULT_LAYER = 'Voyager (Jasny)';
// Próba odczytu z localStorage
const savedZoom = localStorage.getItem('mapZoom');
const savedCenter = localStorage.getItem('mapCenter');
const savedLayer = localStorage.getItem('mapLayer');
const zoom = ref(savedZoom ? parseInt(savedZoom) : DEFAULT_ZOOM);
const center = ref(savedCenter ? JSON.parse(savedCenter) : DEFAULT_CENTER);
const activeLayer = ref(savedLayer || DEFAULT_LAYER);
const map = ref(null); // Ref do instancji mapy
// Zapisywanie stanu do localStorage przy zmianach
watch(zoom, (newZoom) => {
localStorage.setItem('mapZoom', newZoom.toString());
});
watch(center, (newCenter) => {
localStorage.setItem('mapCenter', JSON.stringify(newCenter));
}, { deep: true });
watch(activeLayer, (newLayer) => {
localStorage.setItem('mapLayer', newLayer);
});
const locateUser = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
const zoomLvl = 18;
// Jeśli mapa jest dostępna, używamy flyTo dla płynnej animacji
if (map.value && map.value.leafletObject) {
map.value.leafletObject.flyTo([latitude, longitude], zoomLvl, {
duration: 1.0, // Czas trwania animacji w sekundach
easeLinearity: 0.25
});
} else {
// Fallback jeśli mapa nie jest jeszcze gotowa
center.value = [latitude, longitude];
zoom.value = zoomLvl;
}
},
(error) => {
console.warn("Geolocation error:", error);
// alert("Nie udało się pobrać lokalizacji. Sprawdź uprawnienia.");
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
} else {
// alert("Twoja przeglądarka nie obsługuje geolokalizacji.");
}
};
const reloadPage = () => {
window.location.reload();
};
onMounted(() => {
// Jeśli nie mamy zapisanego stanu, próbujemy zlokalizować użytkownika na starcie
if (!savedCenter) {
locateUser();
}
// Nasłuchiwanie zmian warstw mapy
// Czekamy chwilę na inicjalizację mapy w Vue
setTimeout(() => {
if (map.value && map.value.leafletObject) {
const leafletMap = map.value.leafletObject;
leafletMap.on('baselayerchange', (e) => {
// Używamy nextTick aby upewnić się, że zmiana stanu Vue nie zakłóci Leafleta
setTimeout(() => {
activeLayer.value = e.name;
}, 0);
});
}
}, 100);
});
</script> </script>
<style scoped> <style scoped>
.map-wrapper { .map-wrapper {
height: 100%; height: 100vh; /* Fallback for browsers not supporting dvh */
width: 100%; height: 100dvh; /* Dynamic Viewport Height - fixes issues with mobile browser toolbars */
width: 100vw;
position: relative;
}
.control-btn {
position: absolute;
/* Używamy env(safe-area-inset-bottom) dla iPhone'ów z notchem + stały margines */
bottom: calc(20px + env(safe-area-inset-bottom, 20px));
z-index: 2000;
background: white;
border: none;
border-radius: 50%;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
color: #333;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.locate-btn {
right: 20px;
}
.refresh-btn {
left: 20px;
}
.control-btn:hover {
background-color: #f0f0f0;
}
.control-btn:active {
background-color: #e0e0e0;
transform: scale(0.95);
}
/* Dostosowanie dla bardzo małych ekranów jeśli potrzebne */
@media (max-width: 400px) {
.control-btn {
bottom: 20px;
width: 48px;
height: 48px;
}
} }
</style> </style>

13
src/style.css
View File

@@ -13,14 +13,21 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
body { html, body {
margin: 0; margin: 0;
padding: 0;
width: 100%;
height: 100%;
overscroll-behavior: none; /* Zapobiega "pull-to-refresh" na mobilkach */
}
body {
display: flex; display: flex;
place-items: start; /* Changed from center */ place-items: start;
min-width: 320px; min-width: 320px;
min-height: 100vh;
} }
#app { #app {
width: 100%; width: 100%;
height: 100%;
} }

9
vite.config.js
View File

@@ -4,4 +4,13 @@ import vue from '@vitejs/plugin-vue'
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
server: {
host: true,
allowedHosts: true,
headers: {
'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
'Pragma': 'no-cache',
'Expires': '0',
}
}
}) })