[MERGE] Merge branch 'master' into production

Byloth · Feb 23, 2021 · e4dfaaa · e4dfaaa
2 parents 9b0f140 + 72ce580
commit e4dfaaa
Show file tree

Hide file tree

Showing 15 changed files with 694 additions and 525 deletions.
diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml
diff --git a/.github/workflows/deploy-production.yml → .github/workflows/deploy.yml b/.github/workflows/deploy-production.yml → .github/workflows/deploy.yml
@@ -1,4 +1,4 @@
-name: Deploy to Production
+name: Deploy
 on:
   push:
     branches:
@@ -53,9 +53,6 @@ jobs:
     name: Deploy process
     needs: build
     runs-on: ubuntu-latest
-    environment:
-      name: production
-
     steps:
       - name: Install CurlFtpFS
         run: sudo apt install curlftpfs

diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -120,6 +120,59 @@ samp *
     font-family: "Courier New", "Courier", monospace;
 }
 
+del
+{
+    color: rgba(#000000, 0.5);
+    position: relative;
+    text-decoration: none;
+    transition: color 100ms ease-in-out;
+
+    &::after
+    {
+        border-top: 2px solid #AF0000;
+        box-shadow: 0px 0px 1px rgba(#000000, 0.25);
+        content: "";
+        cursor: text;
+        height: 0px;
+        left: 0px;
+        position: absolute;
+        opacity: 1;
+        top: 0.5625em;
+        transition: opacity 100ms ease-in-out;
+        user-select: none;
+        width: 100%;
+    }
+
+    &:hover
+    {
+        color: #000000;
+
+        &::after
+        {
+            opacity: 0.5;
+        }
+    }
+}
+
+dl
+{
+    dt
+    {
+        font-weight: bold;
+        margin-bottom: 0.5em;
+
+        &::after
+        {
+            content: ":";
+        }
+    }
+    dd
+    {
+        margin-bottom: 1em;
+        margin-left: 1em;
+    }
+}
+
 hr
 {
     border-bottom: none;
@@ -207,44 +260,6 @@ q
         margin-bottom: 0px;
     }
 
-    a
-    {
-        position: relative;
-        text-decoration: none;
-
-        &::after
-        {
-            border-top: 2px solid variables.$primary-dark-color;
-            bottom: 0px;
-            content: "";
-            cursor: pointer;
-            height: 0px;
-            left: 0px;
-            position: absolute;
-            transition: border-color 100ms ease-in-out,
-                        width 100ms ease-in-out;
-            user-select: none;
-            width: 0%;
-        }
-
-        &:hover
-        {
-            &::after
-            {
-                border-top-color: variables.$primary-color;
-                width: 100%;
-            }
-        }
-        &:active,
-        &:focus
-        {
-            &::after
-            {
-                border-top-color: variables.$secondary-dark-color;
-                width: 100%;
-            }
-        }
-    }
     blockquote
     {
         color: lighten(#000000, 40);
@@ -268,39 +283,6 @@ q
         text-shadow: 1px 1px 1px rgba(#FFFFFF, 0.5);
         white-space: nowrap;
     }
-    del
-    {
-        color: rgba(#000000, 0.5);
-        position: relative;
-        text-decoration: none;
-        transition: color 100ms ease-in-out;
-
-        &::after
-        {
-            border-top: 2px solid #AF0000;
-            box-shadow: 0px 0px 1px rgba(#000000, 0.25);
-            content: "";
-            cursor: text;
-            height: 0px;
-            left: 0px;
-            position: absolute;
-            opacity: 1;
-            top: 0.5625em;
-            transition: opacity 100ms ease-in-out;
-            user-select: none;
-            width: 100%;
-        }
-
-        &:hover
-        {
-            color: #000000;
-
-            &::after
-            {
-                opacity: 0.5;
-            }
-        }
-    }
 }
 
 .fullscreen

diff --git a/components/mdc/actions/action-anchor.vue b/components/mdc/actions/action-anchor.vue
@@ -38,8 +38,11 @@
         display: inline-flex;
         justify-content: center;
 
+        &:active,
+        &:focus,
         &:hover
         {
+            color: inherit;
             text-decoration: none;
         }
     }

diff --git a/components/timelines/timeline-item.vue b/components/timelines/timeline-item.vue
@@ -12,9 +12,20 @@
                     </h4>
                 </div>
             </div>
-            <div v-if="item.image" class="image">
-                <img :src="item.image.source" :alt="item.image.description" />
-            </div>
+            <template v-if="item.thumbnail">
+                <div v-if="item.thumbnail.type === 'youtube'" class="video">
+                    <div class="wrapper">
+                        <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                                allowfullscreen
+                                frameborder="0"
+                                :src="item.thumbnail.source">
+                        </iframe>
+                    </div>
+                </div>
+                <div v-else class="image">
+                    <img :src="item.image.source" :alt="item.image.description" />
+                </div>
+            </template>
             <div v-if="item.hasBody" class="body">
                 <NuxtContent :document="item" />
             </div>
@@ -132,6 +143,26 @@
                     }
                 }
             }
+            & > .video
+            {
+                padding: 0.5em 0px;
+
+                & > .wrapper
+                {
+                    height: 0px;
+                    position: relative;
+                    padding-bottom: 56.25%;
+
+                    & > iframe
+                    {
+                        height: 100%;
+                        left: 0px;
+                        position: absolute;
+                        width: 100%;
+                        top: 0px;
+                    }
+                }
+            }
             & > .image
             {
                 padding: 0.5em 0px;

diff --git a/content/posts/daft-punk-epilogue.md b/content/posts/daft-punk-epilogue.md
@@ -0,0 +1,11 @@
+---
+title: Epilogue
+subtitle: 1993 - 2021
+author: Matteo Bilotta
+date: 2021-02-23T21:24:51
+icon: compact-disc
+thumbnail:
+    type: youtube
+    source: //www.youtube.com/embed/zKSsP2084nU
+    description:
+---
diff --git a/core/json-storage.ts b/core/json-storage.ts
@@ -20,18 +20,31 @@ export default class JsonStorage
         this._storage = storage || JsonStorage._FakeOne;
     }
 
-    public get<T extends unknown>(propertyName: string, defaultValue?: T): T | undefined
+    public get<T>(propertyName: string, defaultValue?: T): T | undefined
     {
         const propertyValue = this._storage.getItem(propertyName) || undefined;
 
         if (propertyValue)
         {
-            return JSON.parse(propertyValue);
+            try
+            {
+                return JSON.parse(propertyValue);
+            }
+            catch (err)
+            {
+                if (process.env.NODE_ENV !== "production")
+                {
+                    // eslint-disable-next-line no-console
+                    console.warn(`The "${propertyValue}" value for "${propertyName}" property cannot be parsed. Cleaning the storage...`);
+                }
+
+                this._storage.removeItem(propertyName);
+            }
         }
 
         return defaultValue;
     }
-    public set<T extends unknown>(propertyName: string, newValue?: T): void
+    public set<T>(propertyName: string, newValue?: T): void
     {
         const encodedValue = JSON.stringify(newValue);
 

diff --git a/layouts/pages/under-construction.vue b/layouts/pages/under-construction.vue
@@ -43,11 +43,6 @@
         {
             font-weight: normal;
         }
-        & > hr
-        {
-            border: none;
-            border-top: 1px solid rgba(0, 0, 0, 0.2);
-        }
         & > p
         {
             margin-bottom: 0px;

diff --git a/mixins/transient.ts b/mixins/transient.ts
@@ -27,6 +27,8 @@ export default (enterTransitionDuration?: number, exitTransitionDuration?: numbe
     }
 
     return Vue.extend({
+        name: "TransientMixin",
+
         props: {
             value: {
                 default: false,