💄 website: include our links and favicon

andrepg · Apr 21, 2024 · 9852a85 · 9852a85
1 parent 8ba6145
commit 9852a85
Show file tree

Hide file tree

Showing 17 changed files with 87 additions and 48 deletions.
diff --git a/website/index.html b/website/index.html
@@ -1,13 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <meta charset="UTF-8" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Codes - HTTP Glossary</title>
   </head>
   <body>
-    <div id="app" class="relative flex flex-col w-full h-fit-content"></div>
+    <div id="app" class="h-fit-content relative flex w-full flex-col"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/website/public/android-chrome-192x192.png b/website/public/android-chrome-192x192.png
diff --git a/website/public/android-chrome-512x512.png b/website/public/android-chrome-512x512.png
diff --git a/website/public/apple-touch-icon.png b/website/public/apple-touch-icon.png
diff --git a/website/public/favicon-16x16.png b/website/public/favicon-16x16.png
diff --git a/website/public/favicon-32x32.png b/website/public/favicon-32x32.png
diff --git a/website/public/favicon.ico b/website/public/favicon.ico
diff --git a/website/public/site.webmanifest b/website/public/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/website/src/App.vue b/website/src/App.vue
@@ -1,8 +1,10 @@
 <script setup>
 import { RouterView } from 'vue-router';
 import { Icon } from "@iconify/vue";
+import { inject } from "vue"
 import NavigationMenu from '@/partials/NavigationMenu.vue'
 
+const links = inject("links")
 </script>
 
 <template>
@@ -15,7 +17,7 @@ import NavigationMenu from '@/partials/NavigationMenu.vue'
     </div>
 
     <a class="flex flex-row w-auto transition duration-250 scale-100 hover:scale-150 hover:rotate-2 hover:animate-pulse self-start py-3 md:self-center md:py-0"
-      href="https://github.com/andrepg/http-codes" target="_blank" rel="nofollow">
+      :href="links.github" target="_blank" rel="nofollow">
       <Icon class="w-10 h-10" icon="ei:sc-github" />
     </a>
   </header>

diff --git a/website/src/components/DownloadButton.vue b/website/src/components/DownloadButton.vue
@@ -1,11 +1,17 @@
+<script setup>
+import { inject } from 'vue';
+
+const links = inject("links")
+</script>
+
 <template>
 	<a class="font-title font-bold uppercase text-slate-100
 	          flex flex-row gap-2 justify-center items-center py-4 
 	          w-full md:w-fit md:px-5
 	          outline outline-1 outline-slate-50/25 bg-slate-50/20 rounded-lg
 	          transition duration-250 ease-out group shadow-lg shadow-slate-800
-	          hover:scale-105 hover:bg-purple-700 hover:text-purple-300 hover:outline-purple-700
-	          " href="https://github.com/andrepg/http-codes/releases" rel="follow" target="_blank">
+	          hover:scale-105 hover:bg-purple-700 hover:text-purple-300 hover:outline-purple-700" :href="links.releases"
+		rel="follow" target="_blank">
 
 		<span class="text-xl transition transform duration-750 group-hover:scale-150 group-hover:-rotate-6">🖱️</span>
 		Download now!

diff --git a/website/src/links.js b/website/src/links.js
@@ -0,0 +1,16 @@
+const Links = Object.freeze({
+    github: "https://github.com/andrepg/http-codes",
+    releases: "https://github.com/andrepg/http-codes/releases",
+    discord: "https://discord.gg/WYBDMAg9GM",
+    sponsor: "https://github.com/sponsors/andrepg",
+
+    technologies: {
+        adwaita: "https://gnome.pages.gitlab.gnome.org/libadwaita/",
+        javascript: "https://ecma-international.org/publications-and-standards/standards/ecma-262/",
+        gtk: "https://gtk.org",
+        gjs: "https://gjs.guide",
+        flatpak: "https://flatpak.org"
+    }
+})
+
+export default Links;
diff --git a/website/src/main.js b/website/src/main.js
@@ -3,9 +3,10 @@ import './assets/main.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import Links from './links'
 
 const app = createApp(App)
 
 app.use(router)
-
+app.provide("links", Links)
 app.mount('#app')
diff --git a/website/src/partials/NavigationMenu.vue b/website/src/partials/NavigationMenu.vue
@@ -17,7 +17,7 @@ const closeMenu = () => isClosed.value = true;
 
         <nav :aria-expanded="!isClosed" class='flex flex-col md:flex-row flex-no-wrap gap-1 md:gap-2 py-0 transition duration-500 opacity-0 h-0 
             aria-expanded:opacity-100 aria-expanded:h-full aria-expanded:py-2 md:aria-expanded:py-4 aria-expanded:duration-200
-            md:opacity-100 md:py-2 md:h-auto'>
+            md:opacity-100 md:py-2 md:h-auto lg:py-6 lg:px-4'>
             <NavLink :onClick="closeMenu" target="#hero">Home</NavLink>
             <NavLink :onClick="closeMenu" target="#why">Why?</NavLink>
             <NavLink :onClick="closeMenu" target="#more-info">More Info</NavLink>

diff --git a/website/src/partials/ScreenshotCarousel.vue b/website/src/partials/ScreenshotCarousel.vue
@@ -6,7 +6,7 @@ import screenshotThirdScreen from "@/assets/screenshots/screen_http_code_list_wi
 </script>
 
 <template>
-    <div class="flex flex-col justify-start items-center lg:flex-row w-full">
+    <div class="flex flex-col justify-start items-center lg:flex-row w-full xl:justify-center">
         <div class="">
             <img class="transition transform duration-250 scale-100 hover:scale-105 " :src="screenshotFirstScreen"
                 alt="">

diff --git a/website/src/partials/TechnologiesGrid.vue b/website/src/partials/TechnologiesGrid.vue
@@ -0,0 +1,32 @@
+<script setup>
+const technologiesClasses = 'h-32 w-auto transition-all duration-500 hover:scale-105 hover:rotate-2';
+
+import adwaita from "@/assets/technologies/adwaita.svg";
+import gjs from "@/assets/technologies/gjs.png"
+import gtk from "@/assets/technologies/gtk.png"
+import javascript from "@/assets/technologies/javascript.png"
+import flatpak from "@/assets/technologies/flatpak.png"
+import { inject } from "vue";
+
+const links = inject("links")
+</script>
+
+<template>
+    <div class="flex flex-row py-10 px-5 flex-wrap gap-6 sm:gap-10 justify-center items-center md:py-20">
+        <a :href="links.technologies.adwaita" title="Adwaita UI">
+            <img :class="technologiesClasses" :src="adwaita" alt="Adwaita UI" />
+        </a>
+        <a :href="links.technologies.javascript" title="Javascript">
+            <img :class="technologiesClasses" :src="javascript" alt="Javascript" />
+        </a>
+        <a :href="links.technologies.gtk" title="GTK">
+            <img :class="technologiesClasses" :src="gtk" alt="GTK" />
+        </a>
+        <a :href="links.technologies.gjs" title="GJS">
+            <img :class="technologiesClasses" :src="gjs" alt="GJS" />
+        </a>
+        <a :href="links.technologies.flatpak" title="Flatpak">
+            <img :class="technologiesClasses" :src="flatpak" alt="Flatpak" />
+        </a>
+    </div>
+</template>
diff --git a/website/src/views/FooterView.vue b/website/src/views/FooterView.vue
@@ -4,9 +4,9 @@ import { Icon } from "@iconify/vue";
 
 <template>
     <footer class="w-full h-min-20 relative bg-slate-900 text-slate-100 py-5 px-2
-        flex flex-col md:flex-row md:flex-wrap md:gap-y-10 pb-20 md:px-5
+        flex flex-col md:flex-row md:flex-wrap md:gap-y-10 pb-20 md:px-5 gap-y-5
     ">
-        <div class="flex flex-col w-1/2">
+        <div class="flex flex-col w-full gap-3 md:w-1/2">
             <p class="mb-2">Made with 🤍 accross the world!</p>
             <small>
                 <Icon class="inline h-5 w-auto" icon="ei:chevron-right" />
@@ -26,7 +26,7 @@ import { Icon } from "@iconify/vue";
             </small>
         </div>
 
-        <div class="flex flex-col w-1/2">
+        <div class="flex flex-col w-full gap-3 md:w-1/2">
             <p class="mb-2">Some disclaimers</p>
 
             <small class="text-sm">

diff --git a/website/src/views/HomeView.vue b/website/src/views/HomeView.vue
@@ -1,31 +1,25 @@
 <script setup>
-import { Icon } from "@iconify/vue";
-
 import logo from "@/assets/logo.svg";
 
-import adwaita from "@/assets/technologies/adwaita.svg";
-import gjs from "@/assets/technologies/gjs.png"
-import gtk from "@/assets/technologies/gtk.png"
-import javascript from "@/assets/technologies/javascript.png"
-import flatpak from "@/assets/technologies/flatpak.png"
-
 import SectionParagraph from "@/components/SectionParagraph.vue";
 import SectionContainer from "@/components/SectionContainer.vue";
 import SectionTitle from "@/components/SectionTitle.vue";
 import IconLink from '@/components/IconLink.vue'
 import FooterView from "@/views/FooterView.vue";
 import ScreenshotsCarousel from "@/partials/ScreenshotCarousel.vue";
+import TechnologiesGrid from "@/partials/TechnologiesGrid.vue";
 import DownloadButton from '@/components/DownloadButton.vue'
+import { inject } from "vue";
 
-const technologiesClasses = 'h-32 w-auto transition-all duration-500 hover:scale-105 hover:rotate-2';
+const links = inject("links");
 </script>
 
 <template>
   <main class="flex flex-col gap-0 text-slate-200 bg-gradient-to-b from-slate-950 to-slate-800 items-center ">
     <div class="w-full bg-contain bg-no-repeat bg-top bg-[url(@/assets/hero_bg.png)]">
 
       <!-- Hero Section -->
-      <SectionContainer id="hero" class="w-full md:flex-row">
+      <SectionContainer id="hero" class="w-full md:flex-row max-w-screen-2xl lg:mx-auto">
         <img class="w-8/12 mx-auto md:w-6/12 lg:w-4/12" :src="logo" alt="HTTP Codes Logo">
 
         <div class="flex flex-col lg:w-6/12 gap-5 justify-start">
@@ -46,12 +40,12 @@ const technologiesClasses = 'h-32 w-auto transition-all duration-500 hover:scale
       <SectionContainer id="why">
         <SectionTitle tag="h2" icon="ei:question">Why create it?</SectionTitle>
 
-        <div class="sm:w-9/12">
-          <SectionParagraph class="leading-relaxed">
+        <div class="sm:w-9/12 justify-center max-w-screen-lg">
+          <SectionParagraph class="leading-relaxed text-center">
             This is a simple learning project to help understand each HTTP Code that can
             be returned by a server when a request is made.
           </SectionParagraph>
-          <SectionParagraph class="leading-relaxed">
+          <SectionParagraph class="leading-relaxed text-center">
             An offline application that provides a list of HTTP Codes and a simple explanation
             of what's happening under the hood. A simple handbook to he whenever you need
             to know what server is telling you.
@@ -69,9 +63,9 @@ const technologiesClasses = 'h-32 w-auto transition-all duration-500 hover:scale
           </SectionParagraph>
 
           <div class="flex flex-row gap-10 px-5 py-10 justify-center">
-            <IconLink icon="mingcute:github-line" link="#" />
-            <IconLink icon="mingcute:discord-line" link="#" />
-            <IconLink icon="octicon:sponsor-tiers-16" link="#" />
+            <IconLink icon="mingcute:github-line" :link="links.github" />
+            <IconLink icon="mingcute:discord-line" :link="links.discord" />
+            <IconLink icon="octicon:sponsor-tiers-16" :link="links.sponsor" />
           </div>
         </div>
       </SectionContainer>
@@ -99,23 +93,7 @@ const technologiesClasses = 'h-32 w-auto transition-all duration-500 hover:scale
           with no guarantee. Be cautious! ⚠️
         </SectionParagraph>
 
-        <div class="flex flex-row py-10 px-5 flex-wrap gap-6 sm:gap-10 justify-center items-center md:py-20">
-          <a href="#" title="Adwaita UI">
-            <img :class="technologiesClasses" :src="adwaita" alt="Adwaita UI" />
-          </a>
-          <a href="#" title="Javascript">
-            <img :class="technologiesClasses" :src="javascript" alt="Javascript" />
-          </a>
-          <a href="#" title="GTK">
-            <img :class="technologiesClasses" :src="gtk" alt="GTK" />
-          </a>
-          <a href="#" title="GJS">
-            <img :class="technologiesClasses" :src="gjs" alt="GJS" />
-          </a>
-          <a href="#" title="Flatpak">
-            <img :class="technologiesClasses" :src="flatpak" alt="Flatpak" />
-          </a>
-        </div>
+        <TechnologiesGrid />
       </SectionContainer>
 
       <SectionContainer>