Merge pull request #12 from gifaldyazkaa/devs

📝 Use Svelte SEO

README.md

@@ -2,9 +2,11 @@
 
 [![Image Preview](https://cdn.upload.systems/uploads/psUYhn2p.png)](https://aqua-fanpage.vercel.app/)
 
+![License](https://img.shields.io/github/license/gifaldyazkaa/aqua-fanpage?style=for-the-badge) ![Views Count](https://visitor-badges.glitch.me?username=gifaldyazkaa&repo=aqua-fanpage&label=VIEWS&style=for-the-badge&color=%23457BFF&token=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) ![GitHub Repo Size](https://img.shields.io/github/repo-size/gifaldyazkaa/aqua-fanpage?style=for-the-badge)
+
 ## Getting Started
 
-- First, Clone this Repository to Your Local
+- First, Clone this Repository to Your Local Computer
 
   ```sh
   $ git clone https://github.com/gifaldyazkaa/aqua-fanpage.git
@@ -25,6 +27,8 @@
 
 - Finally open http://localhost:5000 to see the result.
 
+> \* Please note if i'm using yarn in this project.
+
 ## Measurement Result
 
 [![Measurement Result](https://cdn.upload.systems/uploads/5s74F4tc.png)](https://web.dev/measure)
@@ -41,7 +45,13 @@
 
 ## Built with
 
-This app is built with [Svelte TypeScript](https://svelte.dev), [Sveltestrap](https://sveltestrap.js.org), [Page.js](https://npmjs.com/package/page), and [svelte-page-progress](https://www.npmjs.com/package/svelte-page-progress).
+This app is built with
+
+- [Svelte TypeScript](https://svelte.dev)
+- [Sveltestrap](https://sveltestrap.js.org)
+- [Page.js](https://npmjs.com/package/page)
+- [svelte-seo](https://github.com/artiebits/svelte-seo)
+- [svelte-page-progress](https://www.npmjs.com/package/svelte-page-progress)
 
 ## Contributing
 
@@ -57,4 +67,5 @@ We're open to any Contributions! Want to contribute to this project? Follow thes
 ## License
 
 - Character Copyright © 2017-2021 [COVER Corp](https://cover-corp.com).
+- Favicon Copyright © 2021 from [Aqua Ch. Membership Badge](https://www.youtube.com/channel/UC1opHUrw8rvnsadT-iGp7Cg/join).
 - [aqua-fanpage](#) is Licensed Under [MIT License](https://github.com/gifaldyazkaa/aqua-fanpage/blob/master/LICENSE). The code is open-source and Free to use, Please have a look at the License and keep in mind about Giving appropriate credit where it is due, Thanks!

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-app",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "private": true,
   "scripts": {
     "build": "rollup -c",
@@ -28,6 +28,7 @@
     "page": "^1.11.6",
     "sirv-cli": "^1.0.0",
     "svelte-page-progress": "^1.0.1",
+    "svelte-seo": "^1.3.0",
     "sveltestrap": "^5.6.3"
   }
 }

src/Pages/Error404.svelte

@@ -1,8 +1,35 @@
 <script lang="ts">
     import { Container, Row, Col } from "sveltestrap";
     import NavigationBar from "../Components/NavigationBar.svelte";
+    import SvelteSeo from 'svelte-seo';
 </script>
 
+<SvelteSeo 
+	title="404 Not Found - 湊あくあ | Minato Aqua Fanpage"
+	description="Requested URL is Not Found."
+	openGraph={{
+		title: "404 Not Found - 湊あくあ | Minato Aqua Fanpage",
+		description: "Requested URL is Not Found.",
+		url: "https://aqua-fanpage.vercel.app",
+		type: "website",
+		images: [
+			{
+				url: "/favicon.png",
+				width: 320,
+				height: 320,
+				alt: "Website Icon"
+			}
+		]
+	}}
+	twitter={{
+		site: "@gifaldyazkaa",
+		title: "404 Not Found - 湊あくあ | Minato Aqua Fanpage",
+		description: "Requested URL is Not Found.",
+		image: "/favicon.png",
+		imageAlt: "Website Icon",
+	  }}
+/>
+
 <Container>
     <Row>
         <Col>

src/Pages/Home.svelte

@@ -2,9 +2,36 @@
     import { Container, Row, Col } from 'sveltestrap';
     import NavigationBar from '../Components/NavigationBar.svelte';
     import Footer from '../Components/Footer.svelte';
+    import SvelteSeo from 'svelte-seo';
     export let greetingsWord, introductionWords, name;
 </script>
 
+<SvelteSeo 
+	title="湊あくあ | Minato Aqua Fanpage"
+	description="湊あくあ Fanpage Creations. Created with Svelte, and Sveltestrap"
+	openGraph={{
+		title: "湊あくあ | Minato Aqua Fanpage",
+		description: "湊あくあ Fanpage Creations. Created with Svelte, and Sveltestrap",
+		url: "https://aqua-fanpage.vercel.app",
+		type: "website",
+		images: [
+			{
+				url: "/favicon.png",
+				width: 320,
+				height: 320,
+				alt: "Website Icon"
+			}
+		]
+	}}
+	twitter={{
+		site: "@gifaldyazkaa",
+		title: "湊あくあ | Minato Aqua Fanpage",
+		description: "湊あくあ Fanpage Creations. Created with Svelte, and Sveltestrap",
+		image: "/favicon.png",
+		imageAlt: "Website Icon",
+	  }}
+/>
+
 <Container>
     <main>
         <Row>

src/Pages/Information.svelte

@@ -2,9 +2,36 @@
     import { Container, Row, Col } from 'sveltestrap';
     import NavigationBar from '../Components/NavigationBar.svelte';
     import Footer from '../Components/Footer.svelte';
+    import SvelteSeo from 'svelte-seo';
     export let name, firstDebut, fanName, inRealBirthdate, generation, height, weight, oshiMark, hobby, likeThings, goals, uniqueSkill;
 </script>
 
+<SvelteSeo 
+	title="Information - 湊あくあ | Minato Aqua Fanpage"
+	description="Information about 湊あくあ"
+	openGraph={{
+		title: "Information  - 湊あくあ | Minato Aqua Fanpage",
+		description: "Information about 湊あくあ",
+		url: "https://aqua-fanpage.vercel.app/info",
+		type: "website",
+		images: [
+			{
+				url: "/favicon.png",
+				width: 320,
+				height: 320,
+				alt: "Website Icon"
+			}
+		]
+	}}
+	twitter={{
+		site: "@gifaldyazkaa",
+		title: "Information - 湊あくあ | Minato Aqua Fanpage",
+		description: "Information about 湊あくあ",
+		image: "/favicon.png",
+		imageAlt: "Website Icon",
+	  }}
+/>
+
 <h1 class="text-center">Information</h1>
 <Container>
     <Row>

src/Pages/Links.svelte

@@ -2,6 +2,7 @@
     import { Container, Row, Col } from 'sveltestrap';
     import NavigationBar from '../Components/NavigationBar.svelte';
     import Footer from '../Components/Footer.svelte';
+    import SvelteSeo from 'svelte-seo';
     // Biar hemat, deklarasikan semua link disini.
     const link = {
         youtube: "https://www.youtube.com/channel/UC1opHUrw8rvnsadT-iGp7Cg",
@@ -14,10 +15,37 @@
         sveltejs: "https://svelte.dev",
         sveltestrap: "https://sveltestrap.js.org",
         pagejs: "https://npmjs.com/package/page",
+        svelteseo: "https://github.com/artiebits/svelte-seo",
         spageprogress: "https://npmjs.com/package/svelte-page-progress"
     }
 </script>
 
+<SvelteSeo 
+	title="Links - 湊あくあ | Minato Aqua Fanpage"
+	description="Links about 湊あくあ"
+	openGraph={{
+		title: "Links - 湊あくあ | Minato Aqua Fanpage",
+		description: "Any Links Related to 湊あくあ",
+		url: "https://aqua-fanpage.vercel.app/links",
+		type: "website",
+		images: [
+			{
+				url: "/favicon.png",
+				width: 320,
+				height: 320,
+				alt: "Website Icon"
+			}
+		]
+	}}
+	twitter={{
+		site: "@gifaldyazkaa",
+		title: "Links - 湊あくあ | Minato Aqua Fanpage",
+		description: "Any Links Related to 湊あくあ",
+		image: "/favicon.png",
+		imageAlt: "Website Icon",
+	  }}
+/>
+
 <h1 class="text-center">Links</h1>
 
 <Container>
@@ -42,6 +70,7 @@
                     <li><a href={link.sveltejs} target="_blank">Svelte</a> - Cybernetically enhanced web apps.</li>
                     <li><a href={link.sveltestrap} target="_blank">Sveltestrap</a> - Known as Bootstrap for Svelte 3.</li>
                     <li><a href={link.pagejs} target="_blank">Page.js</a> - Tiny Express-inspired client-side router.</li>
+                    <li><a href={link.svelteseo} target="_blank">Svelte SEO</a> - Plugin that makes managing your SEO easier in Svelte projects.</li>
                     <li><a href={link.spageprogress} target="_blank">svelte-page-progress</a> - Svelte Component that Tracks a Users Progress through a Page as they Scroll.</li>
                 </ul>
             </div>

src/Pages/Overview.svelte

@@ -2,12 +2,39 @@
     import { Container, Row, Col } from 'sveltestrap';
     import NavigationBar from '../Components/NavigationBar.svelte';
     import Footer from '../Components/Footer.svelte';
+    import SvelteSeo from 'svelte-seo';
     export let firstDebut, likeThings;
     const likeThings1 = likeThings[0];
     const likeThings2 = likeThings[1];
     const likeThings3 = likeThings[2];
 </script>
 
+<SvelteSeo 
+	title="Overview - 湊あくあ | Minato Aqua Fanpage"
+	description="Overview about 湊あくあ"
+	openGraph={{
+		title: "Overview - 湊あくあ | Minato Aqua Fanpage",
+		description: "Overview about 湊あくあ",
+		url: "https://aqua-fanpage.vercel.app/overview",
+		type: "website",
+		images: [
+			{
+				url: "/favicon.png",
+				width: 320,
+				height: 320,
+				alt: "Website Icon"
+			}
+		]
+	}}
+	twitter={{
+		site: "@gifaldyazkaa",
+		title: "Overview - 湊あくあ | Minato Aqua Fanpage",
+		description: "Overview about 湊あくあ",
+		image: "/favicon.png",
+		imageAlt: "Website Icon",
+	  }}
+/>
+
 <h1 class="text-center">Overview</h1>
 <Container>
     <Row>

src/global.d.ts

@@ -2,3 +2,4 @@
 declare module "page";
 declare module "svelte-page-progress";
 declare module "sveltestrap";
+declare module "svelte-seo";

yarn.lock

@@ -682,6 +682,11 @@ sander@^0.5.0:
     mkdirp "^0.5.1"
     rimraf "^2.5.2"
 
+schema-dts@^0.8.2:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/schema-dts/-/schema-dts-0.8.3.tgz#6c03ca47200e80e9a871d6de626a7cf04fe009b7"
+  integrity sha512-GSLeVkUgEe8DzS8/FGWou1wlC8tQ1KXA5amCqCIH/psUzF74fWswtT0QFlSoJLT08CYyixnc3S/lkAm+RExoLQ==
+
 semiver@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/semiver/-/semiver-1.1.0.tgz#9c97fb02c21c7ce4fcf1b73e2c7a24324bdddd5f"
@@ -803,6 +808,13 @@ svelte-preprocess@^4.0.0:
     sorcery "^0.10.0"
     strip-indent "^3.0.0"
 
+svelte-seo@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/svelte-seo/-/svelte-seo-1.3.0.tgz#2b92c667189aa2617f4fe18b0185de943af3d3cd"
+  integrity sha512-c+o0QWCzMQhdda1ssfFtxyZa6L2WAUo1duQ8vIjdFyG/zLhqjk57pXW/zETKH4Rn9UPDBVW0Re35WK7peE9e9w==
+  dependencies:
+    schema-dts "^0.8.2"
+
 svelte@^3.42.4:
   version "3.42.4"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.42.4.tgz#838ed98fa7b26fc5fffe4df0d7ba345f1c54cf4f"