Develop

.dockerignore

@@ -0,0 +1,26 @@
+.git
+.gitignore
+.vscode
+.github
+README.md
+compose.yml
+deploy/.dockerignore
+deploy/Dockerfile
+
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output*
+dist
+.DS_Store
+.idea
+
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.editorconfig

@@ -9,6 +9,10 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 quote_type = single
+max_line_length = 100
 
 [*.md]
 trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

.env.example

@@ -1,7 +1,6 @@
 # note: if you change these values, you may need to restart the `yarn dev` nuxt server
 
 # needs to be changed in production environment
-# if not set, VERCEL_URL is used instead
 # APP_URL="http://localhost:3000"
 
 # change if there is no need for proxy

.github/workflows/deploy_production.yml

@@ -11,9 +11,9 @@ jobs:
       - name: SSH in production server
         uses: appleboy/ssh-action@v1.0.3
         with:
-          script: |
-            cd /var/www/html/evangelickyzpevnik   && make production-pull --silent && make deploy --silent
-            cd /var/www/html/evangelickykancional && make production-pull --silent && make deploy --silent
+          # script: |
+          #   cd /var/www/html/evangelickyzpevnik   && sh deploy/deploy.sh main
+          #   cd /var/www/html/evangelickykancional && sh deploy/deploy.sh main
           host: ${{ secrets.HOST }}
           port: ${{ secrets.PORT }}
           username: ${{ secrets.USERNAME }}

.github/workflows/deploy_staging.yml

@@ -11,7 +11,7 @@ jobs:
       - name: SSH in staging server
         uses: appleboy/ssh-action@v1.0.3
         with:
-          script: cd /var/www/html/staging/evangelickyzpevnik-staging && make staging-pull --silent && make deploy --silent
+          script: cd /var/www/staging/zpevnik-web_zps-staging && sh deploy/deploy.sh develop
           host: ${{ secrets.HOST }}
           port: ${{ secrets.PORT }}
           username: ${{ secrets.USERNAME }}
@@ -24,4 +24,4 @@ jobs:
           DISCORD_USERNAME: "${{ github.workflow }} - ${{ github.event.repository.name }}"
           DISCORD_AVATAR: "https://upload.wikimedia.org/wikipedia/sl/1/11/048029f362c484a2a46b928afbe98837.jpg"
         with:
-          args: "Proběhlo vývojové nasazení (frontend) na dev.evangelickyzpevnik.cz! :tada:"
+          args: "Proběhlo vývojové nasazení (frontend) na staging.zpevnik.proscholy.cz! :tada:"

.gitignore

@@ -3,8 +3,16 @@ node_modules
 .nuxt
 .nitro
 .cache
-.output
+.output*
 .env
 dist
 .DS_Store
 .idea
+
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -13,5 +13,3 @@ Logo ČCE je jejím duševním vlastnictvím a nevztahuje se na něj open-source
 Vývojový server se spustí na adrese `http://localhost:3000`.
 
 Produkční build lze vytvořit pomocí `yarn build`. Náhled produkčního serveru se spouští příkazem `yarn preview`.
-
-Aktuální verzi Node.js lze specifikovat v souboru `package.json` pomocí `engines`. Uvedenou verzí se řídí i Vercel.

app/app.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup>
+const { siteUrl, variation } = useRuntimeConfig()?.public;
+const route = useRoute();
+useHead({
+  title: variation.title,
+  htmlAttrs: { lang: 'cs', dir: 'ltr' },
+  meta: [
+    { property: 'og:url', content: siteUrl + route.path },
+    { property: 'og:type', content: 'website' },
+    // { property: 'og:image', content: 'https://zpevnik.proscholy.cz/banner.png' },
+
+    { name: 'apple-itunes-app', content: 'app-id=' + variation.itunesId },
+  ],
+  link: getLinks(),
+  script: [{ src: '/dark.js' }],
+});
+</script>

assets/css/tailwind.css → app/assets/css/tailwind.css

@@ -6,16 +6,8 @@
 /* @import './tm-components'; */
 /* @import './song'; */
 
-body {
-  /* padding-bottom: calc(5.25 * theme(spacing.4)); */
-  @apply pb-[84px] /* this is equal to the line above */
-  md:pb-0 md:pl-[97px] /* pl-24 + 1px to preserve border */
-  print:pb-0 print:pl-0;
-  /* also used in BottomBar.vue and BottomSheets.vue */
-}
-
 .custom-container {
-  @apply max-w-[700px] mx-auto;
+  @apply w-full max-w-[700px] mx-auto;
 }
 
 .stretched-link {

components/Basic/Button.vue → app/components/Basic/Button.vue

@@ -30,8 +30,8 @@
 <script setup>
 const props = defineProps({
   eventId: String,
-  href: String,
-  to: String,
+  href: [String, Object],
+  to: [String, Object],
   type: String,
   compact: Boolean,
   disabled: Boolean,
@@ -50,7 +50,7 @@ const btnType = computed(() => {
 <style lang="postcss" scoped>
 .btn {
   @apply inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-5 rounded-[6.25rem]
-  text-sm tracking-[.00714em] font-custom-medium transition;
+  text-sm tracking-[.00714em] font-custom-medium no-underline transition;
 }
 
 .btn.primary {
@@ -91,10 +91,10 @@ const btnType = computed(() => {
 }
 
 .mobile-icon-only > :not(.icon) {
-  @apply hidden md:block;
+  @apply hidden lg:block;
 }
 
-@media screen(md) {
+@media screen(lg) {
   .mobile-icon-only {
     @apply w-auto h-auto py-2.5 pl-5 pr-6;
   }

app/components/Basic/ButtonGroup.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="inline-flex flex-row items-center whitespace-nowrap" role="group">
+    <slot />
+  </div>
+</template>

components/Basic/Chip.vue → app/components/Basic/Chip.vue

@@ -6,8 +6,8 @@
 
 <script setup>
 const props = defineProps({
-  href: String,
-  to: String,
+  href: [String, Object],
+  to: [String, Object],
 });
 </script>
 
@@ -17,6 +17,10 @@ const props = defineProps({
   border border-gray-500 dark:border-gray-200 rounded-lg text-sm tracking-[.00714em] m-1 transition-colors
   hover:bg-surface-400 [&.active]:bg-primary-150;
 
+  &.tag-blue {
+    @apply hover:bg-blue/[.15] [&.active]:bg-blue/30;
+  }
+
   &.tag-green {
     @apply hover:bg-green/[.15] [&.active]:bg-green/30;
   }

components/Basic/Clickable.vue → app/components/Basic/Clickable.vue

@@ -1,10 +1,11 @@
 <template>
   <component
-    :is="to ? NuxtLink : href ? 'a' : 'button'"
+    :is="(to || href) ? NuxtLink : 'button'"
     :to="to"
     :href="href"
     :target="target"
     @click="clicked"
+    class="clickable"
   ><slot /></component>
 </template>
 
@@ -13,8 +14,8 @@ import { NuxtLink } from '#components';
 
 const props = defineProps({
   eventId: String,
-  href: String,
-  to: String,
+  href: [String, Object],
+  to: [String, Object],
   target: String,
 });
 

components/Basic/Icon.vue → app/components/Basic/Icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <i v-if="type == 'fa'" :class="[name, 'text-xl -mt-px']"></i>
+  <i v-if="type == 'fa'" :class="[name, 'text-xl/tight']"></i>
   <img v-else-if="type == 'img'" :src="'/img/' + name" class="w-7" />
   <span
     v-else

components/Basic/Link.vue → app/components/Basic/Link.vue

@@ -15,8 +15,8 @@ import { NuxtLink } from '#components';
 
 const props = defineProps({
   eventId: String,
-  href: String,
-  to: String,
+  href: [String, Object],
+  to: [String, Object],
   underline: Boolean,
 });
 </script>

app/components/Dashboard/Card.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <div class="mx-4 my-3 flex items-center justify-between">
+      <h2 v-if="title" class="text-xl font-custom-bold">{{ title }}</h2>
+      <BasicClickable v-if="moreLink" :to="moreLink" class="group flex items-center gap-1">
+        <span class="group-hover:underline">Zobrazit vše</span><BasicIcon name="chevron_right" />
+      </BasicClickable>
+    </div>
+    <div class="card-body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({ title: String, moreLink: [String, Object] });
+</script>
+
+<style lang="postcss" scoped>
+.card-body {
+  @apply bg-surface-200 shadow rounded-xl overflow-hidden;
+
+  :slotted(.card-item) {
+    @apply flex items-center gap-3 px-4 py-3 hover:bg-surface-50 border-gray-100;
+
+    &:not(:last-child) {
+      @apply border-b;
+    }
+  }
+
+  :deep(.card-icon),
+  :deep(.card-note) {
+    @apply inline-flex justify-center items-center text-gray-700;
+
+    &:first-child {
+      @apply text-center w-7 h-6;
+    }
+
+    &:last-child {
+      @apply ml-auto text-gray;
+    }
+  }
+
+  :deep(.card-note) {
+    @apply px-1;
+  }
+}
+</style>