Skip to content

Commit

Permalink
chore: update localization and credentials (#301)
Browse files Browse the repository at this point in the history 
* chore: update localization for footer

* wip
  • Loading branch information
@theyokohamalife
theyokohamalife authored Dec 6, 2023
1 parent 2835d99 commit 5fab9dd
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 90 deletions.
108 changes: 59 additions & 49 deletions components/Footer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,62 @@
<template>
<div class="footer flex border-t-4 border-secondary-bg/40 bg-secondary-bg text-sm
text-primary-text font-semibold py-2">
<div class="left-footer-section flex flex-0 justify-start">
<NuxtLink to="/" class="self-center ml-8 mr-2 hover:text-primary-hover transition-colors">
© {{ new Date().getUTCFullYear() }} Find a Doc, Japan
</NuxtLink>
<span class="self-center">·</span>
<nav class="flex mx-2">
<NuxtLink to="/privacypolicy" class="self-center hover:text-primary-hover transition-colors"
data-testid="privacy-link">
Privacy
</NuxtLink>
</nav>
<span class="self-center">·</span>
<nav class="flex mx-2">
<NuxtLink to="/terms" class="self-center hover:text-primary-hover transition-colors"
data-testid="terms-link">
Terms
</NuxtLink>
</nav>
</div>
<div class="middle-footer section flex flex-1 align-middle justify-center">
<span class="self-center">Powered by</span>
<nav class="flex mx-2 self-center">
<NuxtLink to="https://www.netlify.com/" target="_blank"
class="underline hover:text-primary-hover transition-colors" data-testid="netlify-link">
Netlify
</NuxtLink>
</nav>
</div>
<div class="right-footer-section flex flex-0 flex-row gap-6 justify-end px-8 text-xs">
<div class="mx-2 hover:text-primary-hover transition-colors">
<NuxtLink to="https://github.com/ourjapanlife/findadoc-web/" target="_blank"
class="flex flex-col flex-wrap " data-testid="github-link">
<div>Contribute on</div>
<div class="self-center">
GitHub
</div>
</NuxtLink>
</div>
<span class="self-center">·</span>
<div class="flex flex-col flex-wrap hover:text-primary-hover transition-colors">
<span>Got feedback?</span>
<NuxtLink to="https://forms.gle/4E763qfaq46kEsn99" target="_blank" class="px-2 mx-auto underline font-bold"
data-testid="feedback-link">
Click here
</NuxtLink>
</div>
</div>
<div
class="footer flex border-t-4 border-secondary-bg/40 bg-secondary-bg text-sm text-primary-text font-semibold py-2"
>
<div class="left-footer-section flex flex-0 justify-start">
<NuxtLink
to="/"
class="self-center ml-8 mr-2 hover:text-primary-hover transition-colors"
>© {{ new Date().getUTCFullYear() }} Find a Doc, Japan</NuxtLink>
<span class="self-center">·</span>
<nav class="flex mx-2">
<NuxtLink
to="/privacypolicy"
class="self-center hover:text-primary-hover transition-colors"
data-testid="privacy-link"
>{{$t('footer.privacy')}}</NuxtLink>
</nav>
<span class="self-center">·</span>
<nav class="flex mx-2">
<NuxtLink
to="/terms"
class="self-center hover:text-primary-hover transition-colors"
data-testid="terms-link"
>{{$t('footer.terms')}}</NuxtLink>
</nav>
</div>
<div class="middle-footer section flex flex-1 align-middle justify-center">
<span class="self-center">{{$t('footer.poweredBy')}}</span>
<nav class="flex mx-2 self-center">
<NuxtLink
to="https://www.netlify.com/"
target="_blank"
class="underline hover:text-primary-hover transition-colors"
data-testid="netlify-link"
>Netlify</NuxtLink>
</nav>
</div>
<div class="right-footer-section flex flex-0 flex-row gap-6 justify-end px-8 text-xs">
<div class="mx-2 hover:text-primary-hover transition-colors">
<NuxtLink
to="https://github.com/ourjapanlife/findadoc-web/"
target="_blank"
class="flex flex-col flex-wrap"
data-testid="github-link"
>
<div>Contribute on{{$t('footer.contribute')}}</div>
<div class="self-center">GitHub</div>
</NuxtLink>
</div>
<span class="self-center">·</span>
<div class="flex flex-col flex-wrap hover:text-primary-hover transition-colors">
<span>{{$t('footer.feedback')}}</span>
<NuxtLink
to="https://forms.gle/4E763qfaq46kEsn99"
target="_blank"
class="px-2 mx-auto underline font-bold"
data-testid="feedback-link"
>{{$t('footer.clickHere')}}</NuxtLink>
</div>
</div>
</div>
</template>
86 changes: 46 additions & 40 deletions components/MapContainer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,53 @@
<template>
<GoogleMap data-testid="map-of-japan" ref="mapRef" :api-key="runtimeConfig.public.googleMapsApiKey"
map-id="153d718018a2577e"
style="height: 100%; width: 100%;"
:center="center"
:zoom="9">
<GMarker @click="store.setActiveSearchResult(location.id)" :options="{position: location.position, icon: markerIcon}"
:key="index" v-for="(location, index) in store.searchResultsList" />
</GoogleMap>
<GoogleMap
data-testid="map-of-japan"
ref="mapRef"
:api-key="runtimeConfig.public.GOOGLE_MAPS_API_KEY"
map-id="153d718018a2577e"
style="height: 100%; width: 100%;"
:center="center"
:zoom="9"
>
<GMarker
@click="store.setActiveSearchResult(location.id)"
:options="{position: location.position, icon: markerIcon}"
:key="index"
v-for="(location, index) in store.searchResultsList"
/>
</GoogleMap>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { GoogleMap, Marker as GMarker } from 'vue3-google-map'
import { useRuntimeConfig } from '#imports'
import customIcon from '../assets/images/blue-map-pin.svg'
import { useSearchResultsStore } from '../stores/searchResultsStore'
import { defineComponent, ref, computed } from "vue";
import { GoogleMap, Marker as GMarker } from "vue3-google-map";
import { useRuntimeConfig } from "#imports";
import customIcon from "../assets/images/blue-map-pin.svg";
import { useSearchResultsStore } from "../stores/searchResultsStore";
export default defineComponent({
components: { GoogleMap, GMarker },
setup() {
const defaultLocation = { lat: 35.6804, lng: 139.7690 }
const center = computed(() => useSearchResultsStore().$state.activeResult?.position || defaultLocation)
const markerIcon = {
url: customIcon,
scaledSize: {
width: 45,
height: 73
}
}
const store = useSearchResultsStore()
const mapRef = ref(null)
const runtimeConfig = useRuntimeConfig()
return { center,
mapRef,
markerIcon,
runtimeConfig,
store }
}
})
components: { GoogleMap, GMarker },
setup() {
const defaultLocation = { lat: 35.6804, lng: 139.769 };
const center = computed(
() =>
useSearchResultsStore().$state.activeResult?.position || defaultLocation
);
const markerIcon = {
url: customIcon,
scaledSize: {
width: 45,
height: 73
}
};
const store = useSearchResultsStore();
const mapRef = ref(null);
const runtimeConfig = useRuntimeConfig();
return { center, mapRef, markerIcon, runtimeConfig, store };
}
});
</script>
8 changes: 8 additions & 0 deletions i18n/locales/en.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
{
"footer": {
"terms": "Terms",
"privacy": "Privacy",
"poweredBy": "Powered by",
"contribute": "Contribute on",
"feedback": "Got feedback?",
"clickHere": "Click here"
},
"submitPage": {
"firstName": "First Name",
"googleMaps": "Google Maps URL",
Expand Down
2 changes: 1 addition & 1 deletion nuxt.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export default defineNuxtConfig({
target: 'static',
runtimeConfig: {
public: {
googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY
GOOGLE_MAPS_API_KEY: process.env.GOOGLE_MAPS_API_KEY
}
}
})

0 comments on commit 5fab9dd

Please sign in to comment.