feat: Fiicen Desktopのサイトを更新

raicdev · Jun 16, 2024 · bc65be3 · bc65be3
1 parent 7a6ae26
commit bc65be3
Show file tree

Hide file tree

Showing 11 changed files with 141 additions and 102 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,5 @@
 {
-  "printWidth": 128,
+  "printWidth": 1024,
   "singleQuote": true,
   "semi": false
 }
diff --git a/dist/category/infomation/program-creator.html b/dist/category/infomation/program-creator.html
@@ -101,7 +101,7 @@ <h2>作成依頼のやり方</h2>
       <h3>無料</h3>
       <div class="center-left">
         <ol>
-          <li>雷のDiscordサーバーに参加します。参加は<a href="https://discord.gg/tJTTM56Wg2">こちら</a>。</li>
+          <li>雷のDiscordサーバーに参加します。参加は<a href="/discord.html">こちら</a>。</li>
           <li>最初の画面(オンボーディング)では、メンバーロールだけを選択してください。</li>
           <li>
             オンボーディングが完了したら、サーバー名をクリック(タップ)して「すべてのチャンネルを表示」をクリック(タップ)します。
@@ -124,7 +124,7 @@ <h3>プレミアム</h3>
               >詳細はこちら。</a
             >
           </li>
-          <li>雷のDiscordサーバーに参加します。参加は<a href="https://discord.gg/tJTTM56Wg2">こちら</a>。</li>
+          <li>雷のDiscordサーバーに参加します。参加は<a href="/discord.html">こちら</a>。</li>
           <li>最初の画面(オンボーディング)では、メンバーロールだけを選択してください。</li>
           <li>
             オンボーディングが完了したら、サーバー名をクリック(タップ)して「すべてのチャンネルを表示」をクリック(タップ)します。
@@ -149,7 +149,7 @@ <h3>フォーラムで質問</h3>
 
       <div class="center-left">
         <ol>
-          <li>雷のDiscordサーバーに参加します。参加は<a href="https://discord.gg/tJTTM56Wg2">こちら</a>。</li>
+          <li>雷のDiscordサーバーに参加します。参加は<a href="/discord.html">こちら</a>。</li>
           <li>最初の画面(オンボーディング)では、メンバーロールだけを選択してください。</li>
           <li>
             オンボーディングが完了したら、サーバー名をクリック(タップ)して「すべてのチャンネルを表示」をクリック(タップ)します。
@@ -164,7 +164,7 @@ <h3>フォーラムで質問</h3>
       <h3>チケットで質問</h3>
       <div class="center-left">
         <ol>
-          <li>雷のDiscordサーバーに参加します。参加は<a href="https://discord.gg/tJTTM56Wg2">こちら</a>。</li>
+          <li>雷のDiscordサーバーに参加します。参加は<a href="/discord.html">こちら</a>。</li>
           <li>最初の画面(オンボーディング)では、メンバーロールだけを選択してください。</li>
           <li>
             オンボーディングが完了したら、サーバー名をクリック(タップ)して「すべてのチャンネルを表示」をクリック(タップ)します。

diff --git a/dist/contact.html b/dist/contact.html
@@ -1,39 +1,29 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ja">
   <head>
     <!--meta-->
     <title>連絡 - 雷のサイト</title>
 
     <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta
-      name="description"
-      content="雷やUpLauncherに連絡する方法が書いてあるページです。"
-    />
+    <meta name="description" content="雷やUpLauncherに連絡する方法が書いてあるページです。" />
     <link rel="canonical" href="https://raic.tech/" />
 
     <meta content="連絡 - 雷のサイト" property="og:title" />
-    <meta
-      content="雷やUpLauncherに連絡する方法が書いてあるページです。"
-      property="og:description"
-    />
+    <meta content="雷やUpLauncherに連絡する方法が書いてあるページです。" property="og:description" />
     <meta content="https://raic.tech" property="og:url" />
-    <meta
-      content="https://raic.tech/images/profile-image.png"
-      property="og:image"
-    />
+    <meta content="https://raic.tech/images/profile-image.png" property="og:image" />
     <meta content="#43B581" data-react-helmet="true" name="theme-color" />
 
     <!--Stylesheet-->
     <link rel="stylesheet" href="/css/index.css" />
 
-
     <!--favicon-->
     <link rel="icon" href="/images/profile-image.png" />
 
     <!--JavaScript-->
-    
-<script src="/js/menu.js"></script>
+
+    <script src="/js/menu.js"></script>
     <script
       async
       src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3326621014935824"
@@ -46,85 +36,38 @@
   <body style="display: none">
     <header></header>
 
-    <div class="content text-center">
-      <h1>コンタクトページ</h1>
-      <p>
-        雷に連絡したい場合は、ここに書いてある連絡先に連絡してください。<br />
-      </p>
+    <section class="columns p-4 m-0">
+      <div class="submenu column is-2"></div>
+      <div class="content">
+        <h1>コンタクトページ</h1>
+        <p>雷に連絡したい場合は、ここに書いてある連絡先に連絡してください。<br /></p>
 
-      <h2>Discord</h2>
-      <p>まずは、Discordのサーバーへ参加してください。</p>
-      <a href="https://discord.gg/PqUbFf7fyt" class="button is-primary"
-        >サーバーに参加する</a
-      >
+        <h2>Discord</h2>
+        <p>まずは、Discordのサーバーへ参加してください。</p>
+        <a href="/discord.html" class="button is-primary">サーバーに参加する</a>
 
-      <div class="center-left">
         <ul>
-          <li>
-            雷のサービスの場合は、専用のサポートフォーラムを使用してください。
-          </li>
+          <li>雷のサービスの場合は、専用のサポートフォーラムを使用してください。</li>
           <li>それ以外の連絡は、サポートと質問フォーラムで行ってください。</li>
           <li>プライベートな連絡がしたい場合、チケットを作成してください。</li>
         </ul>
-      </div>
 
-      <h2>X</h2>
-      <p>Xの場合は、ダイレクトメッセージを送信してください。</p>
-      <a href="https://x.com/raidesuuu" class="button is-link"
-        >Xのプロフィール
-      </a>
+        <h2>X（旧Twitter）</h2>
+        <p>Xの場合は、ダイレクトメッセージを送信してください。</p>
+        <a href="/twitter.html" class="button is-link">Xのプロフィール </a>
 
-      <div class="center-left">
         <ul>
-          <li>
-            フォローして、フォロバを待ってください。(フォロバ規約も読んでください)
-          </li>
           <li>Xの場合は、反応が遅い場合があります。ご了承ください。</li>
         </ul>
-      </div>
 
-      <h2>メール</h2>
-      <p id="contactMail">
-        メールアプリでメールを送信してください。<br />
-        メールアドレス: (スパム対策のため、Captchaを突破してください。)
-      </p>
-      <button id="displayCaptcha" class="button is-primary">
-        Captchaを表示</button
-      ><br /><br />
-
-      <div id="turnstile"></div>
-
-      <p>
-        CaptchaはCloudflareにより提供されている「Turnstile」を使用しています。<br /><a
-          href="https://www.cloudflare.com/privacypolicy/"
-          >プライバシーポリシー。</a
-        >
-      </p>
-    </div>
+        <h2>メール</h2>
+        <p id="contactMail">メールを送信してヘルプを得ることもできます。</p>
+        <a href="mailto:contact@raic.tech" class="button is-warning">メールを送信する</a>
+      </div>
+    </section>
 
     <script src="/js/index.js"></script>
 
-    <script>
-      window.onloadTurnstileCallback = function () {
-        turnstile.render("#turnstile", {
-          sitekey: "0x4AAAAAAACYWAGYl5B5l4E9",
-          callback: function (token) {
-            document.querySelector("#contactMail").innerHTML = document
-              .querySelector("#contactMail")
-              .innerHTML.replace(
-                "(スパム対策のため、Captchaを突破してください。)",
-                "admin@raic.tech"
-              );
-          },
-        });
-      };
-      const displayCaptcha = document.querySelector("#displayCaptcha");
-      displayCaptcha.addEventListener("click", () => {
-        displayCaptcha.disabled = true;
-        turnstile.ready(onloadTurnstileCallback);
-      });
-    </script>
-
     <footer></footer>
   </body>
 </html>
diff --git a/dist/discord.html b/dist/discord.html
@@ -0,0 +1,3 @@
+<script>
+    window.location.href = "https://discord.gg/tJTTM56Wg2"
+</script>
diff --git a/dist/fiicen-desktop/index.html b/dist/fiicen-desktop/index.html
@@ -29,11 +29,89 @@
   <body style="display: none">
     <header></header>
 
-    <div class="content has-text-centered">
-      <h1>Fiicen Desktop</h1>
-      <p>Fiicen Desktopは、Fiicenの体験を最大限に快適にするアプリです。</p>
+    <div class="content">
+      <section class="hero">
+        <div class="columns p-4 m-0" style="flex-wrap: wrap">
+          <div class="column is-6 is-narrow">
+            <div class="hero-body">
+              <div>
+                <h1 class="title" style="font-size: 3rem">Fiicen Desktop</h1>
+                <p class="subtitle">Fiicen Desktopでは、Fiicenをデスクトップで利用でき、すぐに起動してすぐに使用することができます。PCを起動した直後にも。もうブックマークからFiicenを選ぶ必要がなくなります！</p>
 
-      <a href="https://s3.ap-northeast-1-ntt.wasabisys.com/ak1520d-filenow-4/files/20240601-0002_b1e098eb63f39387e8f5a8f05070a51c.exe" class="button is-primary">ダウンロード(v1.0.0)</a>
+                <p class="subtitle">さあ！すぐにFiicen Desktopを始めましょう。きっと便利になりますよ！</p>
+
+                <a href="#downloads" class="button is-link">ダウンロード</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="hero is-link">
+        <div class="hero-body">
+          <p class="title">Fiicen Desktopとは？</p>
+          <div class="columns" style="flex-wrap: wrap">
+            <div class="column is-narrow" style="width: 500px">
+              <div class="box">
+                <h1 class="title is-3">すぐ使用できる</h1>
+                <p>Fiicen Desktopは、デスクトップアプリなので、すぐに実行することができます。もうFiicenをブックマークに登録する必要はありません！</p>
+              </div>
+            </div>
+
+            <div class="column is-narrow" style="width: 500px">
+              <div class="box">
+                <h1 class="title is-3">いつも通り使用できる</h1>
+                <p>
+                  Fiicen Desktopは、Chrome<small><a href="#warning-1">※1</a></small
+                  >ベースなので、いつも通り使用することができます！また、Fiicenの機能はそのままです！
+                </p>
+              </div>
+            </div>
+
+            <div class="column is-narrow" style="width: 500px">
+              <div class="box">
+                <h1 class="title is-3">独自の機能を搭載</h1>
+                <p>Fiicen Desktopならではの機能を搭載していて、元々のFiicenよりも使用が簡単になるかもしれません！</p>
+              </div>
+            </div>
+            <p>
+              <small id="warning-1">※1 - Fiicen Desktopには、Electronを使用しています。Electronは、Chromiumを組み込んでいます。</small>
+            </p>
+          </div>
+        </div>
+      </section>
+      <br />
+
+      <section class="hero is-primary" id="downloads">
+        <div class="hero-body">
+          <div class="columns" style="flex-wrap: wrap">
+            <div class="column is-narrow">
+              <div class="box">
+                <h1 class="title is-3">今すぐ開始する</h1>
+                <p>
+                  Fiicen Desktopのインストールはすぐです！ファイルをダウンロードして実行するとすぐに使用できます！<small><a href="#warning-2">※2</a></small
+                  ><br />
+                  <a href="https://github.com/uplauncher/fiicenelectron/releases/download/v1.1.0/fiicenDesktop_win32_installer.exe" class="button is-primary">Windows 用をダウンロード</a>
+                  <a href="https://github.com/uplauncher/fiicenelectron/releases/download/v1.1.0/fiicenDesktop_linux_installer.deb" class="button">Linux (deb) 用をダウンロード (ベータ)</a>
+
+                  <details title="Linuxのインストール方法を見る">
+                    <summary>Linuxのインストール方法を見る</summary>
+                    <p>Linuxはdebのみ利用できます。近日中にrpmバージョンをリリースする予定です。</p>
+                    <ol>
+                      <li>上のボタンから、Linux (deb) 用をダウンロードします。</li>
+                      <li>ダウンロードしたフォルダで端末(ターミナル)を開き、<br /><span class="rcs-code">&nbsp; sudo apt install ./fiicenDesktop_linux_installer.deb &nbsp;</span><br />と入力します。</li>
+                      <li>インストールが完了するのを待ちます。</li>
+                      <li>インストールが完了しました！あとはアプリを起動してFiicen Desktopを楽しむだけです！</li>
+                    </ol>
+                  </details>
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <p id="warning-2"><small>※2 - Windowsの場合。Linuxの場合はインストール方法が少し複雑です。</small></p>
+        </div>
+      </section>
     </div>
 
     <footer></footer>

diff --git a/dist/menu/header.html b/dist/menu/header.html
@@ -29,6 +29,7 @@
 
       <div class="navbar-dropdown">
         <p style="text-align: center; opacity: 0.5">WEBSITES</p>
+        <a class="navbar-item" href="/fiicen-desktop"> Fiicen Desktop </a>
         <a class="navbar-item" href="/vencordjp/"> VencordJP </a>
         <a class="navbar-item" href="/rirefox/"> Rirefox </a>
         <a class="navbar-item" href="https://vistaupdater.net"> VistaUpdater </a>

diff --git a/dist/twitter.html b/dist/twitter.html
@@ -0,0 +1,3 @@
+<script>
+    window.location.href = "https://x.com/raidesuuu"
+</script>
diff --git a/dist/vencordjp/index.html b/dist/vencordjp/index.html
@@ -68,14 +68,14 @@ <h1 class="heading">VencordJP</h1>
         href="https://vencord.dev/discord"
         ><span class="material-symbols-rounded" style="width: 5vw">
           groups </span
-        ><br />VencordJPのサーバーへ参加</md-outlined-button
+        ><br />Vencordのサーバーへ参加</md-outlined-button
       >
       <md-outlined-button
         style="margin-left: 5px"
-        href="https://discord.gg/tJTTM56Wg2"
+        href="/discord.html"
         ><span class="material-symbols-rounded" style="width: 5vw">
           groups </span
-        ><br />Vencordのサーバーに参加</md-outlined-button
+        ><br />VencordJPのサーバーに参加</md-outlined-button
       >
       <md-outlined-button
         style="margin-left: 5px"

diff --git a/dist/verification.html b/dist/verification.html
@@ -45,22 +45,29 @@ <h1>認証</h1>
 
         <ul>
           <li>X (旧Twitter)：<a href="https://twitter.com/raidesuuu" target="_blank">@raidesuuu</a></li>
-          <li>X (UpLauncher)：<a href="https://twitter.com/uplauncherxyz">@chatfromrai</a></li>
-          <li>X (VistaUpdater)：<a href="https://twitter.com/vistaupdater">@vistaupdater</a></li>
-          <li>X (Rai Chat)：<a href="https://twitter.com/chatfromrai">@chatfromrai</a></li>
-          <li>Bluesky：<a href="https://bsky.app/profile/raic.tech">@raic.tech</a></li>
-          <li>Twitch：<a href="https://twitch.tv/raisandane">@raisandane</a></li>
-          <li>Kick：<a href="https://kick.com/raisandesu">@raisandesu</a></li>
-          <li>Steam：<a href="https://steamcommunity.com/id/raisandesu">@raisandesu</a></li>
+          <li>X (UpLauncher)：<a href="https://twitter.com/uplauncherxyz" target="_blank">@chatfromrai</a></li>
+          <li>X (VistaUpdater)：<a href="https://twitter.com/vistaupdater" target="_blank">@vistaupdater</a></li>
+          <li>X (Rai Chat)：<a href="https://twitter.com/chatfromrai" target="_blank">@chatfromrai</a></li>
+          <li>Bluesky：<a href="https://bsky.app/profile/raic.tech" target="_blank">@raic.tech</a></li>
+          <li>Twitch：<a href="https://twitch.tv/raisandane" target="_blank">@raisandane</a></li>
+          <li>Kick：<a href="https://kick.com/raisandesu" target="_blank">@raisandesu</a></li>
+          <li>Steam：<a href="https://steamcommunity.com/id/raisandesu" target="_blank">@raisandesu</a></li>
           <li>YouTube：<a href="https://youtube.com/@_rai_ch_" target="_blank">@_rai_ch_</a></li>
           <li>Instagram：<a href="https://instagram.com/raisandayoo" target="_blank">@raisandayoo</a></li>
           <li>Rai Chatプロフィール：<a href="/chat/app/profile.html?uid=rai" target="_blank">@rai</a></li>
         </ul>
 
+        <h3>ゲーム</h3>
+        <ul>
+          <li>Minecraft: <a href="https://namemc.com/profile/voidroom" target="_blank">VoidRoom</a></li>
+          <li>osu!: <a href="https://osu.ppy.sh/users/34918440"></a></li>
+          <li>Fortnite: not 雷.</li>
+        </ul>
+
         <h3>アーティストプロファイル</h3>
         <ul>
           <li>
-            Spotify：<a href="https://open.spotify.com/artist/3hdGoSYvBsQhtgpQop28AO?si=n0X-ga5RQVSw3w0B9jCrxA">Spotify</a>
+            Spotify：<a href="https://open.spotify.com/artist/3hdGoSYvBsQhtgpQop28AO?si=n0X-ga5RQVSw3w0B9jCrxA" target="_blank">Spotify</a>
           </li>
         </ul>
       </div>

diff --git a/dist/x.html b/dist/x.html
@@ -0,0 +1,3 @@
+<script>
+    window.location.href = "https://x.com/raidesuuu"
+</script>
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
   },
   "scripts": {
     "build": "webpack --mode production",
-    "dev": "concurrently \"yarn sass:dev\" \"yarn server:dev\"",
+    "dev": "concurrently \"pnpm sass:dev\" \"pnpm server:dev\"",
     "server:dev": "webpack-dev-server --mode development",
     "sass:dev": "sass --watch src/index.scss:dist/css/index.css",
     "lint": "eslint --fix ./src/**/*.ts && prettier --write ./src/**/*.ts",
@@ -50,5 +50,6 @@
   "dependencies": {
     "bootstrap": "^5.3.3",
     "webpack-dev-middleware": "^7.1.1"
-  }
+  },
+  "packageManager": "pnpm@9.2.0+sha512.98a80fd11c2e7096747762304106432b3ddc67dcf54b5a8c01c93f68a2cd5e05e6821849522a06fb76284d41a2660d5e334f2ee3bbf29183bf2e739b1dafa771"
 }