Refactor components

src/.vuepress/components/GBackToTop.vue → src/.vuepress/components/ABackToTop.vue

@@ -8,10 +8,7 @@
 </template>
 
 <script>
-import AControl from "./AControl.vue";
-
 export default {
-  components: { AControl },
   data() {
     return { isScrolling: false };
   },

src/.vuepress/components/GTextToSpeech.vue → src/.vuepress/components/ATextToSpeech.vue

@@ -14,10 +14,7 @@
 </template>
 
 <script>
-import AControl from "./AControl.vue";
-
 export default {
-  components: { AControl },
   data() {
     return {
       state: "",

src/.vuepress/components/GThemeToggle.vue → src/.vuepress/components/AThemeToggle.vue

@@ -7,10 +7,7 @@
 </template>
 
 <script>
-import AControl from "./AControl.vue";
-
 export default {
-  components: { AControl },
   data() {
     return { isDark: false, label: "Toggle theme" };
   },

src/.vuepress/components/GSiteSettings.vue

@@ -9,21 +9,17 @@
       <v-icon :name="showControls ? 'x' : 'settings'" />
     </button>
     <ul ref="controls">
-      <li><g-theme-toggle /></li>
-      <li><g-text-to-speech /></li>
-      <li><g-back-to-top /></li>
+      <li><a-theme-toggle /></li>
+      <li><a-text-to-speech /></li>
+      <li><a-back-to-top /></li>
     </ul>
   </div>
 </template>
 
 <script>
 import { animate, spring } from "motion";
-import GThemeToggle from "./GThemeToggle.vue";
-import GTextToSpeech from "./GTextToSpeech.vue";
-import GBackToTop from "./GBackToTop.vue";
 
 export default {
-  components: { GThemeToggle, GBackToTop, GTextToSpeech },
   data() {
     return { showControls: false };
   },

src/.vuepress/components/HomeReviews.vue → src/.vuepress/components/Home/Reviews.vue

@@ -93,7 +93,7 @@ li {
   &::before {
     content: '\201C';
     display: block;
-    font-family: cursive;
+    font-family: serif;
     font-size: 16rem;
     opacity: 0.1;
     position: absolute;

src/.vuepress/components/MBlogMeta.vue

@@ -1,17 +1,12 @@
 <template>
   <div class="blog-meta">
     <a-created />
-    <a-social />
+    <m-social-links />
   </div>
 </template>
 
 <script>
-import ACreated from "./ACreated.vue";
-import ASocial from "./ASocial.vue";
-
-export default {
-  components: { ACreated, ASocial },
-};
+export default {};
 </script>
 
 <style lang="stylus" scoped>

src/.vuepress/components/ASocial.vue → src/.vuepress/components/MSocialLinks.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="social">
-    <comment-count v-if="!hideCommentCount" />
+    <a-comment-count v-if="!hideCommentCount" />
     <social-share v-if="!hideShareLinks" />
   </div>
 </template>

src/.vuepress/theme/layouts/BlogList.vue

@@ -4,27 +4,23 @@
       <div class="theme-default-content content__default">
         <h1>📝 Blog</h1>
         <m-blog-tag-nav :tags="tags" />
-        <google-ads format="horizontal" />
+        <a-google-ad format="horizontal" />
         <m-blog-links :blogs="blogs" />
-        <google-ads />
+        <a-google-ad />
       </div>
     </template>
     <template #page-bottom>
-      <g-footer />
+      <m-footer />
     </template>
   </parent-layout>
 </template>
 
 <script>
 import ParentLayout from "@parent-theme/layouts/Layout.vue";
-import GFooter from "../../components/GFooter.vue";
-import GoogleAds from "../../components/GoogleAds.vue";
-import MBlogTagNav from "../../components/MBlogTagNav.vue";
-import MBlogLinks from "../../components/MBlogLinks.vue";
 import { pascalize } from "../../utils/string";
 
 export default {
-  components: { ParentLayout, GFooter, GoogleAds, MBlogTagNav, MBlogLinks },
+  components: { ParentLayout },
   computed: {
     tags() {
       const tags = this.$tag.list.map((tag) => ({

src/.vuepress/theme/layouts/FeatureList.vue

@@ -3,7 +3,7 @@
     <template #page-top>
       <div class="theme-default-content content__default">
         <h1>Win7 Simu simulated apps</h1>
-        <google-ads format="horizontal" />
+        <a-google-ad format="horizontal" />
         <ul class="feature-links">
           <li v-for="feature in features" :key="feature.path">
             <router-link :to="feature.path">
@@ -18,18 +18,16 @@
       </div>
     </template>
     <template #page-bottom>
-      <g-footer />
+      <m-footer />
     </template>
   </parent-layout>
 </template>
 
 <script>
-import GFooter from "../../components/GFooter.vue";
-import GoogleAds from "../../components/GoogleAds.vue";
 import ParentLayout from "@parent-theme/layouts/Layout.vue";
 
 export default {
-  components: { ParentLayout, GoogleAds, GFooter },
+  components: { ParentLayout },
   computed: {
     features() {
       const pages = this.$site.pages.filter(

src/.vuepress/theme/layouts/FeaturePage.vue

@@ -3,7 +3,7 @@
     <template #page-top>
       <div class="theme-default-content content__default">
         <h1>{{ data.title }}</h1>
-        <a-social />
+        <m-social-links />
         <p>
           <img :src="data.image" :alt="data.title" />
         </p>
@@ -27,22 +27,19 @@
     </template>
     <template #page-bottom>
       <div class="ad-wrapper">
-        <google-ads />
+        <a-google-ad />
       </div>
-      <comment-section />
+      <m-comments />
     </template>
   </parent-layout>
 </template>
 
 <script>
-import AChangelog from "../../components/AChangelog.vue";
-import CommentSection from "../../components/CommentSection.vue";
-import GoogleAds from "../../components/GoogleAds.vue";
 import ParentLayout from "@parent-theme/layouts/Layout.vue";
 import { lowerFirst } from "../../utils/string";
 
 export default {
-  components: { ParentLayout, CommentSection, GoogleAds, AChangelog },
+  components: { ParentLayout },
   computed: {
     data() {
       return { ...this.$page, ...this.$frontmatter };

src/.vuepress/theme/layouts/Visnalize.vue

@@ -1,32 +1,26 @@
 <template>
   <parent-layout>
     <template v-if="!noSideAds" #sidebar-bottom>
-      <div class="googleads"><google-ads /></div>
+      <div class="googleads"><a-google-ad /></div>
     </template>
     <template v-if="!noComments" #page-bottom>
       <div class="ad-wrapper">
-        <google-ads />
+        <a-google-ad />
       </div>
-      <comment-section />
+      <m-comments />
     </template>
   </parent-layout>
 </template>
 
 <script>
 import ParentLayout from "@parent-theme/layouts/Layout.vue";
-import CommentSection from "../../components/CommentSection.vue";
-import GoogleAds from "../../components/GoogleAds.vue";
 
 export default {
+  components: { ParentLayout },
   props: {
     noSideAds: Boolean,
     noComments: Boolean,
   },
-  components: {
-    ParentLayout,
-    CommentSection,
-    GoogleAds,
-  },
 };
 </script>
 

src/about.md

@@ -30,4 +30,4 @@ The logo is also shamelessly created by myself using MS Paint and eventually on
 
 I am not actively available via direct messaging or chat apps like Discord, WhatsApp etc. You can reach me via email at [[email protected]](mailto:[email protected]) or with a little help from the form below:
 
-<email-sender />
+<m-email-sender />

src/blog/about-the-ads.md

@@ -51,7 +51,7 @@ For this website and the web version of **Win7 Simu**, so far I have only consid
 
 However, out of these 4, I only needed to use **Display Ad**, which is also the format recommended by Google. The Display ad offers a responsive size that works anywhere you might cram it to, but of course the space should not be too small, otherwise there will be no ad available for serving. It's also possible to let Adsense setup the ads for you without any manual work by enabling the **Auto Ads**, but personally, I prefer doing things by my own for which I will have full controls.
 
-<google-ads />
+<a-google-ad />
 
 ## Implementing ads
 

src/blog/building-visnalize-com.md

@@ -69,7 +69,7 @@ What an eye candy! That looked neat and flawless. Without so much effort and tim
 
 All of which could take me months, if not years to implement, but still wouldn't look half-decent. Not to mention some other super useful utilities that enhanced the writing and reading experience on both ends.
 
-<google-ads />
+<a-google-ad />
 
 ### Customizing
 

src/blog/building-win7-simu.md

@@ -32,7 +32,7 @@ As mentioned, I started the project with the goal to practice and learn more abo
 
 Starting with such a simple goal, I didn't think far ahead and intended to drop this project at some point in the future when there's not much else to learn. However, I have been receiving a lot of positive feedback and encouragement from my users (my fellow Windows lovers), reviews and comments telling me that Win7 Simu has been serving them well in teaching or learning about computers, where computers and devices are __not easily accessible__ for people in some countries. Such feedback literally has been making my days, making me realize that my silly project has helped people in some ways that I could have never thought of. Therefore, I decided to dedicate more of my time over the weekend and keep improving it, bringing forth more useful (though only basic) features and functionalities based on user suggestions, with love and appreciation.
 
-<google-ads />
+<a-google-ad />
 
 ### The tech stack
 

src/blog/from-codepen-to-app.md

@@ -42,7 +42,7 @@ I started spending my free time outside of work hours and weekends to get into i
 
 There are a few other packages and libraries that enhance the developer experience and contribute to the feature feasibility, e.g several **Capacitor plugins** wiring up certain native mobile features for the app, **dayjs** providing out-of-the-box utils to work with date and time, or **voca** for handy string utils without the needs of reinventing the wheel.
 
-<google-ads />
+<a-google-ad />
 
 ### Breaking down the components
 

src/blog/from-side-project-to-side-hustle.md

@@ -28,7 +28,7 @@ Till now, the app has had a total of __10M downloads__ and approximately __50K d
 
 ![Win7 Simu's daily active users stats](./img/from-side-project-to-side-hustle/win7-simu-dau.png)
 
-<google-ads />
+<a-google-ad />
 
 ### Building the surroundings
 
@@ -70,7 +70,7 @@ Likewise, I also added a subscription feature to the web version of Win7 Simu vi
 
 The last revenue source that I have had my hands on is new and unique in its own way (or rather unpopular in my opinion). It is a partnership with __Gamezop__, a gaming platform that any websites/web apps can integrate to bring casual games for their users. The so-called "integration" is rather simple in my case, all I needed to do was just add a banner/icon in my app that leads to the Gamezop platform where my users can play a wide range of casual games. Half of the ad revenue generated from the platform would then be shared with me. The shared revenue is nowhere near the amount that I get from the main revenue source, but it still has been decently and consistently contributing to the overall revenue.
 
-<google-ads />
+<a-google-ad />
 
 ## Disclosing the numbers
 

src/blog/load-any-websites-in-iframes.md

@@ -36,7 +36,7 @@ And this is a common practice for the majority of websites, they don't owe you a
 
 So I'm out of luck then? There is no way to simulate a web browser's functionalities in a web environment? Well, more or less. With the problem identified, there is still a chance to come up with a solution, and the solution I have come to is __intercepting the response__ to remove these two headers so that the iframe can load any website normally. For this, a browser extension is required as it is the only possible way to intercept requests/responses coming through the user's web browser without much security concern. Follow the below steps to implement this solution on your device.
 
-<google-ads />
+<a-google-ad />
 
 ## Step-by-step guide
 

src/blog/visnalize-year-in-review-2023.md

@@ -64,7 +64,7 @@ __Both versions__
 - __8__ version updates were released
 - __$22__ gross revenue from ads
 
-<google-ads />
+<a-google-ad />
 
 ## Other accomplishments
 

src/blog/why-side-hustle.md

@@ -43,7 +43,7 @@ Another benefit of having a side hustle is the opportunity to learn new skills a
 
 For example, I've learned a lot about web development ([specifically front-end](./building-win7-simu.md#the-goal), my area of interest), SEO, marketing, analytics, and other business-related skills from building a side project just as simple as Win7 Simu, which has helped me to grow professionally and personally.
 
-<google-ads />
+<a-google-ad />
 
 ### Networking
 

src/blog/win7-simu-file-explorer.md

@@ -35,7 +35,7 @@ Despite only a few capabilities being rolled out for the File Explorer in [v3.0.
 
 In v3.0.0, the minimum viable version of File Explorer supports basic operations on files and folders such as creating, opening, editing, renaming, moving, copying, and pasting. And an integral part of this is the trash/delete mechanism which is also supported. As the simulator has to support both Web and Android platforms, there are some challenges to solve for each, and the implementation approach also differs. I will break down some key notes for each.
 
-<google-ads />
+<a-google-ad />
 
 ### Implementation for Android
 

src/blog/win7-ui-introduction.md

@@ -54,7 +54,7 @@ win7-ui
 
 The project comprises of two main parts: the component library (the __`src`__ folder) and the documentation site (the __`docs`__ folder).
 
-<google-ads />
+<a-google-ad />
 
 ### The component library
 

src/blog/windows-resources.md

@@ -31,7 +31,7 @@ Yes, searching on the internet, that's obviously the first thing to do when you
 
 For **audio**, I mostly convert the Windows sound videos on YouTube to mp3 format using [this online tool](https://ytmp3.cc/downloader/). Later on, I get to know that you can find the audio collection in **C:\Windows\Media**, all sounds are available in the wav format.
 
-<google-ads />
+<a-google-ad />
 
 ## Extracting icons from .dll files
 

src/brick1100/about.md

@@ -7,7 +7,7 @@ image: https://image.social/get?url=visnalize.com/brick1100/about.html
 
 # Brick 1100
 
-<a-social />
+<m-social-links />
 
 **Brick 1100** is a simulation of the Nokia 1100 mobile phone, the best-selling mobile phone of all time worldwide. The simulation aims to bring the users back to the simpler time with the fundamental graphics and features from one of the most durable phones produced by [Nokia](https://en.wikipedia.org/wiki/Nokia), a Finnish based firm.
 

src/brick1100/changelog.md

@@ -8,7 +8,7 @@ image: https://image.social/get?url=visnalize.com/brick1100/changelog.html
 
 # Changelog
 
-<a-social hideCommentCount />
+<m-social-links hideCommentCount />
 
 ## Beta versions
 
@@ -76,4 +76,4 @@ The first beta release of the app with the core interface and functionalities im
 - Built-in Extras/Apps (Calculator, Stopwatch, Countdown Timer, Flashlight)
 - An Online Apps section with curated apps for the Brick 1100
 
-<google-ads />
+<a-google-ad />

src/brick1100/deep-links.md

@@ -5,7 +5,7 @@ image: https://image.social/get?url=visnalize.com/brick1100/deep-links.html
 
 # Deep links
 
-<a-social />
+<m-social-links />
 
 :::tip Overview
 _Deep links_ take you directly to a specific section of the app without needing to navigate through the app to get to that section. You can use them to create shortcuts to your favorite sections or to share them with others.

src/brick1100/games.md

@@ -5,7 +5,7 @@ image: https://image.social/get?url=visnalize.com/brick1100/games.html
 
 # Brick 1100 Games
 
-<a-social />
+<m-social-links />
 
 ## Snake