https://github.com/maisakuLover/Vercel.git
VercelがつかえるということでGitに新しいリポジトリを作りました。
Vercelに行きます
うまくいかない・・・
テンプレートを選んでから
上こちらはだめでした
なので↓のスポーティフのHPを作ってみることにしました
URLがいけてないので作り直しwww
https://mylovemusic.vercel.app
以下のリポジトリのどこから手を付けるのが正解なのか調べていきます
- ジャンルの変更:
README.md: プロジェクトの説明srcディレクトリ内のファイル: ウェブサイトのコンテンツやメタデータを含む可能性があります。 これらのファイルを編集することで、ウェブサイトのジャンルや関連情報を変更できます。
早速作ってみるの巻 Astroの参考サイトはこれだ
https://zenn.dev/rh820/articles/5c513aaf0d119b
---
interface Props {
title: string;
image?: string;
}
const {
title = "Home",
image = "https://res.cloudinary.com/dp3ppkxo5/image/upload/v1693776174/spotify-astro/playlist_2_f9ymlx.jpg",
} = Astro.props;
import { ViewTransitions } from "astro:transitions";
import "./layout.css";
import SideMenu from "../components/Side/SideMenu.astro";
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="description"
content="Clone of Spotify with Astro View Transitions integration for fluid navigation"
/>
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title} | Spotify Astro</title>
<meta property="og:image" content={image} />
<meta name="twitter:image" content={image} />
<ViewTransitions fallback="none" />
</head>
<body class="dark">
<div class="relative h-screen p-2 gap-2 flex items-stretch">
<div class="w-[350px] flex-col hidden lg:flex overflow-y-auto">
<SideMenu />
</div>
<div class="rounded-lg bg-zinc-900 flex-1 mx-auto overflow-y-auto">
<slot />
</div>
</div>
<div
id="not-support"
class="fixed hidden bg-red-700 bottom-0 inset-x-0 rounded-t-md text-center py-2 lg:py-4 z-50 font-semibold"
>
It seems your browser does not support view transitions yet :( try it
using chrome or edge <a
class="underline"
href="https://github.com/igorm84/spotify-astro-transitions"
>(see docs here)</a
>
</div>
<script is:inline defer>
function setContainerColor(dataColor) {
const playlistContainer = document.getElementById("playlist-container");
const currentColor = playlistContainer?.getAttribute("data-color");
if (dataColor && dataColor !== currentColor) {
playlistContainer?.style.setProperty("--context-color", dataColor);
playlistContainer?.setAttribute("data-color", dataColor);
}
}
window.coloradTimeout = null;
for (const playlist of document.querySelectorAll(".playlist-item")) {
playlist.addEventListener("mouseover", () =>
onMouseOverColorad(playlist)
);
playlist.addEventListener("mouseout", onMouseOutColorad);
playlist.addEventListener("focus", () => onMouseFocusColorad(playlist));
playlist.addEventListener("blur", onMouseOutColorad);
}
function onMouseFocusColorad(el) {
if (el) {
const dataColor = el.getAttribute("data-color");
if (!dataColor) return;
setContainerColor(dataColor);
}
}
function onMouseOverColorad(el) {
if (el) {
const dataColor = el.getAttribute("data-color");
if (!dataColor) return;
window.coloradTimeout = setTimeout(
() => setContainerColor(dataColor),
200
);
}
}
function onMouseOutColorad() {
if (window.coloradTimeout) {
clearTimeout(window.coloradTimeout);
window.coloradTimeout = null;
}
}
</script>
<script>
if (!document.startViewTransition) {
document.getElementById("not-support").classList.remove("hidden");
}
document.addEventListener("astro:page-load", () => {
for (const el of document.querySelectorAll(".el-to-fade")) {
el.classList.remove("scale-90");
}
});
</script>
</body>
</html>この中では変更点を見つけることはできませんでした
気を取り直してVSCODEとGitHubの連携に移ります
「GUI」とは、画面上に表示されるアイコンやボタンをクリックしたりタップしたりして操作するユーザーインターフェースのことです。一方、「CUI」は、コマンドと呼ばれる文字列を入力することで操作するインターフェースです。一般のユーザーには「GUI」が広く使われていますが、「CUI」はIT業界の専門家にとっては、効率的に操作するための手段として重宝されています。
以下の表を作成しました。
| 用語 | 説明 |
|---|---|
| リポジトリ | ソースコードや変更履歴などを格納する場所 |
| ローカルリポジトリ | ローカル（自分のPC）にあるリポジトリ |
| リモートリポジトリ | サーバー（ウェブ）上にあるリポジトリ ※GitHubもリモートリポジトリの1つ |
| コミット | リポジトリへファイルを追加したり変更履歴を保存したりすること |
| プッシュ | ローカルリポジトリのデータをリモートリポジトリへ反映（アップロード）させること |
| プル | リモートリポジトリをローカルリポジトリへ反映（ダウンロード）させること |
CreateCodeSpaceを押すことで、GitHub側のIDEにアクセスすることができました
公開設定の短いまとめとしては、ページーズに行ってデプロイ、
ホームにかえってURLチェックですね
Share this content: