クレープ屋的お勧めアニメ/Template

テンプレ作成機: https://44uswy.csb.app/

source code

import React, { useState } from "react";
import { render } from "react-dom";
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  useQuery,
  gql
} from "@apollo/client";

const client = new ApolloClient({
  uri: "https://graphql.anilist.co/",
  cache: new InMemoryCache()
});

function template({ title, imgUrl, siteLink, type, prod, aniLink }) {
  return `
== ${title} ==

{{infobox
|title= ${title}
|image = [[${imgUrl}|150px]]
|label1 = 公式サイト
|data1 = ${siteLink}
|label2 = 原作
|data2 = ${type}
|label3 = 制作
|data3 = ${prod}
|label4 = ネット配信
|data4 = TBD
|label5 = List
|data5 = [${aniLink} Anilist]
}}

=== あらすじ ===


=== レビュー ===

{{テンプレート:CrepeQuote
|score=
|body=
|name=
}}
`;
}

const types = {
  ORIGINAL: "オリジナル",
  MANGA: "漫画",
  LIGHT_NOVEL: "ライトノベル",
  VISUAL_NOVEL: "ノベルゲーム",
  VIDEO_GAME: "ゲーム",
  OTHER: "その他",
  NOVEL: "小説",
  DOUJINSHI: "同人誌",
  ANIME: "アニメ",
  WEB_NOVEL: "ネット小説",
  LIVE_ACTION: "実写",
  GAME: "ゲーム",
  COMIC: "コミック",
  MULTIMEDIA_PROJECT: "マルチメディアプロジェクト",
  PICTURE_BOOK: "写真本"
};

function getType(type) {
  return types[type];
}

function AniTemp({ id }) {
  const { loading, error, data } = useQuery(
    gql`
      query MediaQ($id: Int!) {
        Media(id: $id) {
          title {
            native
          }
          source
          coverImage {
            extraLarge
          }
          siteUrl
          externalLinks {
            site
            url
          }
          studios(isMain: true) {
            nodes {
              name
            }
          }
        }
      }
    `,
    { variables: { id } }
  );

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  const temp = template({
    title: data.Media.title.native,
    imgUrl: data.Media.coverImage.extraLarge,
    siteLink: data.Media.externalLinks
      .filter((v) => v.site.includes("Official"))
      .map(v => v.url)
      .join(""),
    type: getType(data.Media.source),
    prod: data.Media.studios.nodes.map((v) => v.name).join(", "),
    aniLink: data.Media.siteUrl
  });

  console.log(temp);

  return (
    <div>
      <textarea value={temp} />
    </div>
  );
}

function App() {
  const [inpt, setInpt] = useState(0);
  const [id, setId] = useState(0);

  const change = (e) => setInpt(e.target.value);
  const set = () => setId(parseInt(inpt));
  return (
    <div>
      ID: <input type="number" value={inpt} onChange={change} />{" "}
      <button onClick={set}>FETCH</button>
      {id > 0 ? <AniTemp id={id} /> : <p>set id</p>}
    </div>
  );
}

render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);

graphql

編集用テンプレ

== タイトル ==
{{infobox
|title= ""タイトル""
|image = [[ファイル:"ここにファイル名"|150px]]
|label1 = 公式サイト
|data1 = ""ここに公式サイトのURL""
|label2 = 原作
|data2 = ""ここに原作のメディア""
}}
=== あらすじ ===
""ここにあらすじ""

=== レビュー ===

{{テンプレート:CrepeQuote
|body= ""ここに内容""
|name= ""ここに自分の名前""
}}

レビュー用テンプレ

{{テンプレート:CrepeQuote
|score=40
|body= ここに内容
|name=名前
}}

配信サイトのアイコン

左から配信日時が早い順に3つぐらい並べられたらいいかな

ウィキメディアコモンズの画像はアップロードしないと編集するとき重くなるっぽい

[[ファイル:Amazon icon.svg|24px|link=https://www.amazon.co.jp/]] 

[[ファイル:Docomoanime.png|24px|link=https://anime.dmkt-sp.jp/animestore/tp_pc]]

[[ファイル:Netflix icon.svg|24px|link=https://www.netflix.com/]]

[[ファイル:Cib-crunchyroll (CoreUI Icons v1.0.0) orange.svg|24px|link=https://www.crunchyroll.com/]]

[[ファイル:AbemaTV logo.svg|64px|link=https://abema.tv/]] 

[[ファイル:YouTube Logo 2017.svg|64px|link=https://www.youtube.com/]] 

[[ファイル:Niconico(2020).svg|48px|link=https://www.nicovideo.jp/]] 

[[ファイル:Hulu_Logo.svg|48px|link=https://www.hulu.jp/]]