add Dockerfile, CI files

.gitlab-ci.yml

+image: docker:20.10.9
+
+variables:
+  DOCKER_TLS_CERTDIR: "/certs"
+
+services:
+  - docker:20.10.9-dind
+
+before_script:
+  - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
+
+build:
+  stage: build
+  script:
+    - VERSION=`cat VERSION`
+    - docker pull $CI_REGISTRY_IMAGE:latest || true
+    - docker build --cache-from $CI_REGISTRY_IMAGE:latest --tag $CI_REGISTRY_IMAGE:$VERSION --tag $CI_REGISTRY_IMAGE:latest .
+    - docker push $CI_REGISTRY_IMAGE:$VERSION
+    - docker push $CI_REGISTRY_IMAGE:latest

Dockerfile

+FROM python:3.11
+
+RUN mkdir /app
+WORKDIR /app
+
+# Install NodeJS
+ENV NODE_MAJOR=20
+RUN apt-get update
+RUN apt-get install -y ca-certificates curl gnupg
+RUN mkdir -p /etc/apt/keyrings
+RUN curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
+RUN echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_${NODE_MAJOR}.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list
+RUN apt-get update
+RUN apt-get install -y nodejs
+RUN rm -rf /var/lib/apt/lists/*
+
+COPY . .
+
+RUN pip install -r requirements/base.txt
+RUN npm install
+RUN npm run prod
+
+# Placeholder values so the static files collect
+RUN DJANGO_ALLOWED_HOSTS=x \
+    DJANGO_SECRET_KEY=x \
+    python manage.py collectstatic --noinput --settings=majak_uistyleguide.settings.production
+
+RUN bash -c "adduser --disabled-login --quiet --gecos app app &&  \
+             chmod -R o+r /app/ && \
+             chmod o+x /app/run.sh"
+USER app
+
+ENV DJANGO_SETTINGS_MODULE "majak_uistyleguide.settings.production"
+
+EXPOSE 8000
+
+CMD ["bash", "run.sh"]

VERSION

+1.0.0

gunicorn.conf.py

+bind = "0.0.0.0:8000"
+accesslog = "-"
+workers = 1
+max_requests = 1000
+max_requests_jitter = 10
+timeout = 60
+graceful_timeout = 60

majak_uistyleguide/settings/base.py

@@ -50,6 +50,7 @@ INSTALLED_APPS = [
 # ------------------------------------------------------------------------------
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
+    "whitenoise.middleware.WhiteNoiseMiddleware",
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
@@ -91,7 +92,7 @@ STATICFILES_FINDERS = [
     "django.contrib.staticfiles.finders.FileSystemFinder",
     "django.contrib.staticfiles.finders.AppDirectoriesFinder",
 ]
-STATICFILES_STORAGE = "django.contrib.staticfiles.storage.ManifestStaticFilesStorage"
+STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
 
 # MEDIA
 # ------------------------------------------------------------------------------

majak_uistyleguide/templates/patterns/molecules/boxes/onboarding/card_box.html

+<div class="flip-card" tabindex="0">
+  <div class="flip-card-inner">
+    <div class="flip-card-front">
+      <div
+        class="relative h-[33rem] bg-black rounded-3xl overflow-hidden bg-cover"
+        style="background-image:url('{{ image_url }}')"
+      >
+        <div
+          class="
+            absolute top-0 left-0
+
+            border border-r-[27rem] border-r-[transparent]
+            border-l-0 border-t-[33rem] border-t-pirati-yellow
+          "
+        ></div>
+
+        <h1
+          class="font-alt text-5xl whitespace-pre-line absolute top-10 left-10"
+        >{{ title }}</h1>
+      </div>
+    </div>
+    <div
+      class="flip-card-back bg-pirati-yellow rounded-3xl p-10"
+    >
+      <div class="prose prose-black">
+        {% comment %}
+          WARNING: This is generated by the styleguide implementation.
+          Don't keep the |safe!
+        {% endcomment %}
+
+        {{ content|safe }}
+      </div>
+
+      <div class="flex justify-center items-center my-5">
+        {% include 'patterns/atoms/buttons/round_button.html' with button_text=button_text %}
+      </div>
+    </div>
+  </div>
+</div>

majak_uistyleguide/templates/patterns/molecules/boxes/onboarding/card_box.yaml

+context:
+  title: |-
+    Staň se členkou
+    nebo členem
+  image_url: '../../../../../static/images/onboarding/member.png'
+  content: |-
+    <h2>
+      Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
+    </h2>
+
+    <p>
+      <u>Jako člen pirátské strany máš právo:</u>
+    </p>
+
+    <ul>
+      <li>
+        být informován o činnostech strany
+      </li>
+      <li>
+        podílet se na utváření politiky strany
+      </li>
+      <li>
+        kandidovat za Piráty, být volen i do vnitrostranických funkcí a mnoho dalšího
+      </li>
+    </ul>
+
+    <p>
+      Ozve se ti koordinátor/ka a provede tě přijímacím procesem
+    </p>
+  button_text: 'Chci se zapojit!'

majak_uistyleguide/templates/patterns/molecules/menus/onboarding/carousel.html

 <div class="__js-root">
   <div class="header-carousel">
-    <div class="block h-[700px] xl:h-screen relative group cursor-pointer">
+    <div class="block h-[700px] xl:h-screen relative">
       <img
         class="
           header-carousel--image
@@ -29,8 +29,8 @@
             {{ heading|safe }}
           </h1>
 
-          <div class="ml-4 text-lg group">
-            {% include "patterns/atoms/buttons/round_button.html" with button_text=button_text classes="bg-white text-black" %}
+          <div class="ml-4 text-lg">
+            {% include "patterns/atoms/buttons/round_button.html" with button_text=button_text classes="bg-white text-black duration-300 hover:bg-black hover:text-white" %}
           </div>
         </div>
       </div>

majak_uistyleguide/templates/patterns/molecules/menus/onboarding/carousel.yaml

@@ -5,5 +5,5 @@ context:
     Chceš se zapojit do dění
     na české politické scéně?
   button_text: "Přidej se k nám!"
-  mobile_background_image_url: '../../../../../../static/images/background-images/onboarding.jpg'
+  mobile_background_image_url: '../../../../../../static/images/background-images/onboarding_mobile.png'
   desktop_background_image_url: '../../../../../../static/images/background-images/onboarding.jpg'

majak_uistyleguide/templates/patterns/organisms/cards/onboarding/card_list.html

-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-stretch gap-8">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-stretch gap-4">
   {% for card in cards %}
-    {% include 'patterns/molecules/boxes/card_box.html' with url=card.url image=card.image header=card.header content=card.content description_classes=description_classes classes=classes date=date %}
+    {% include 'patterns/molecules/boxes/onboarding/card_box.html' with title=card.title image_url=card.image_url content=card.content button_text=card.button_text %}
   {% endfor %}
 </div>

majak_uistyleguide/templates/patterns/organisms/cards/onboarding/card_list.yaml

 context:
   cards:
     -
-      url: "https://example.com"
-      image: "https://picsum.photos/1000"
-      header: "Informatika"
-      content: "Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis. Laoreet id donec ultrices tincidunt arcu non. Sem et tortor consequat id."
+      title: |-
+        Staň se členkou
+        nebo členem
+      image_url: '../../../../../static/images/onboarding/member.webp'
+      content: |-
+        <h2>
+          Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
+        </h2>
+
+        <p>
+          <u>Jako člen pirátské strany máš právo:</u>
+        </p>
+
+        <ul>
+          <li>
+            být informován o činnostech strany
+          </li>
+          <li>
+            podílet se na utváření politiky strany
+          </li>
+          <li>
+            kandidovat za Piráty, být volen i do vnitrostranických funkcí a mnoho dalšího
+          </li>
+        </ul>
+
+        <p>
+          Ozve se ti koordinátor/ka a provede tě přijímacím procesem
+        </p>
+      button_text: 'Chci se zapojit!'
     -
-      url: "https://example.com"
-      image: "https://picsum.photos/1000"
-      header: "Životní Prostředí"
-      content: "Id velit ut tortor pretium viverra suspendisse potenti. Accumsan in nisl nisi scelerisque eu ultrices. Arcu odio ut sem nulla. Mollis nunc sed id semper risus in."
+      title: |-
+        Registrovaný
+        příznivec
+      image_url: '../../../../../static/images/onboarding/regp.webp'
+      content: |-
+        <h2>
+          Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
+        </h2>
+
+        <p>
+          <u>Jako člen pirátské strany máš právo:</u>
+        </p>
+
+        <ul>
+          <li>
+            být informován o činnostech strany
+          </li>
+          <li>
+            podílet se na utváření politiky strany
+          </li>
+          <li>
+            kandidovat za Piráty, být volen i do vnitrostranických funkcí a mnoho dalšího
+          </li>
+        </ul>
+
+        <p>
+          Ozve se ti koordinátor/ka a provede tě přijímacím procesem
+        </p>
+      button_text: 'Chci se zapojit!'
     -
-      url: "https://example.com"
-      image: "https://picsum.photos/1000"
-      header: "Evropa, zahraničí, obrana"
-      content: "Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Tellus elementum sagittis vitae et leo duis ut diam. Eu non diam phasellus vestibulum."
+      title: |-
+        Zapoj se jako
+        dobrovolník
+      image_url: '../../../../../static/images/onboarding/volunteer.webp'
+      content: |-
+        <h2>
+          Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
+        </h2>
+
+        <p>
+          <u>Jako člen pirátské strany máš právo:</u>
+        </p>
+
+        <ul>
+          <li>
+            být informován o činnostech strany
+          </li>
+          <li>
+            podílet se na utváření politiky strany
+          </li>
+          <li>
+            kandidovat za Piráty, být volen i do vnitrostranických funkcí a mnoho dalšího
+          </li>
+        </ul>
+
+        <p>
+          Ozve se ti koordinátor/ka a provede tě přijímacím procesem
+        </p>
+      button_text: 'Chci se zapojit!'
+    -
+      title: |-
+        Přihlaš se
+        k novinkám
+      image_url: '../../../../../static/images/onboarding/newsletter.webp'
+      content: |-
+        <h2>
+          Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
+        </h2>
+
+        <p>
+          <u>Jako člen pirátské strany máš právo:</u>
+        </p>
+
+        <ul>
+          <li>
+            být informován o činnostech strany
+          </li>
+          <li>
+            podílet se na utváření politiky strany
+          </li>
+          <li>
+            kandidovat za Piráty, být volen i do vnitrostranických funkcí a mnoho dalšího
+          </li>
+        </ul>
+
+        <p>
+          Ozve se ti koordinátor/ka a provede tě přijímacím procesem
+        </p>
+      button_text: 'Chci se zapojit!'
+    -
+      title: |-
+        Podpoř nás
+        finančně
+      image_url: '../../../../../static/images/onboarding/donate.webp'
+      content: |-
+        <h2>
+          Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
+        </h2>
+
+        <p>
+          <u>Jako člen pirátské strany máš právo:</u>
+        </p>
+
+        <ul>
+          <li>
+            být informován o činnostech strany
+          </li>
+          <li>
+            podílet se na utváření politiky strany
+          </li>
+          <li>
+            kandidovat za Piráty, být volen i do vnitrostranických funkcí a mnoho dalšího
+          </li>
+        </ul>
+
+        <p>
+          Ozve se ti koordinátor/ka a provede tě přijímacím procesem
+        </p>
+      button_text: 'Chci se zapojit!'

majak_uistyleguide/templates/patterns/organisms/layout/navbar.html

@@ -224,6 +224,21 @@
               {% endfor %}
             </div>
           {% endif %}
+
+          {% if menu_button and not additional_buttons and menu_button_url %}
+            <div class="mt-8 mb-6 flex flex-col gap-1.5">
+              <a
+                href="{{ menu_button_url }}"
+                class="
+                  decoration-1 underline-offset-4
+
+                  navbar__menu-item
+
+                  {% if menu_button == selected_item %}navbar__menu-item--selected{% endif %}
+                "
+              >{{ menu_button }}</a>
+            </div>
+          {% endif %}
         </div>
 
         <div class="flex gap-5 text-lg md:justify-end">

package.json

@@ -14,7 +14,7 @@
     "tippy.js": "^6.3.7",
     "vue": "^2.6.11",
     "vue-clickaway": "^2.2.2",
-    "vue-slick-carousel": "^1.0.6",
+    "vue-slick-carousel": "^1.0.5",
     "vue-slide-up-down": "^2.0.1"
   },
   "devDependencies": {

requirements/base.txt

-Django==4.0
+django==4.0
 django-pattern-library==1.0.0
 django-environ==0.9.0
 django-vite==2.0.2
+gunicorn==21.2.0
+whitenoise==6.6.0