Writing/frontend conf hokkkaido (#235)

* start

* init

* スライドが起動しないのを修正

* ざっくり発表まとめ

* 書きたいページを見出しだけ作成

* いろいろ追加

* 写真を追加

* エラーを修正

* PDFを生成

frontend-conf-hokkaido/components/QRCode.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import QRCode from "qrcode";
+
+export type Props = {
+  text: string;
+  removeParams?: boolean;
+  caption?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  text: "",
+  removeParams: true,
+  caption: "",
+});
+
+const canvas = ref<HTMLCanvasElement>();
+
+const removeParams = (text: string) => {
+  if (!URL.canParse(text)) {
+    return text;
+  }
+  const noParamsURL = text.split("?")[0];
+
+  return props.removeParams ? noParamsURL : props.text;
+};
+
+const link = computed(() =>
+  URL.canParse(props.text) ? removeParams(props.text) : undefined
+);
+
+onMounted(() => {
+  if (!(canvas.value instanceof HTMLCanvasElement)) return;
+  QRCode.toCanvas(canvas.value, removeParams(props.text) ?? "");
+});
+</script>
+
+<template>
+  <div class="container">
+    <a class="outer" :href="link" target="_blank" rel="noreferrer">
+      <canvas class="canvas" ref="canvas"></canvas>
+    </a>
+    <span class="caption">{{ props.caption }}</span>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  padding: 16px 0;
+}
+.outer {
+  display: block;
+  width: fit-content;
+  border: solid 3px;
+  border-radius: 8px;
+  overflow: hidden;
+  color: #333;
+
+  &[href]:hover {
+    opacity: 0.8;
+  }
+}
+
+.caption {
+  display: block;
+  text-align: center;
+  font-size: 1rem;
+}
+
+.canvas {
+  display: block;
+}
+</style>

frontend-conf-hokkaido/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@slide/frontend-conf-hokkaido",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "slidev build",
+    "export": "slidev export",
+    "dev": "slidev"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT"
+}

frontend-conf-hokkaido/slides.md

@@ -0,0 +1,129 @@
+---
+theme: default
+titleTemplate: '%s - ken7253'
+colorSchema: 'dark'
+fonts:
+  sans: 'M PLUS 2'
+  mono: 'M PLUS 1 Code'
+---
+
+# フロントエンドカンファレンス北海道参加レポート
+
+---
+src: "../reuse/me.md"
+---
+
+---
+layout: image-left
+image: /images/ramen.jpg
+---
+
+### 前日入りしました
+
+- 朝起きれないので昼の便で行った
+- 軽く札幌観光
+- ラーメン食べて終了
+
+---
+layout: image-right
+image: /images/curry.jpg
+---
+
+## 当日のトークについて
+
+すべては紹介できないのでざっくりと
+
+<QRCode text="https://zenn.dev/yumemi_inc/articles/2024-08-25-frontend-conf-hokkaido-2024" caption="資料まとめ" />
+
+---
+layout: iframe-left
+url: https://speakerdeck.com/player/1c49daa32b15453d8331f684a45c52a2
+---
+
+### ダークテーマとアクセシビリティの融合したカラートークンの設計
+
+- Qiitaのダークモード対応についての発表
+- ダークモードの歴史とかの話が面白かった
+- グレースケールの設計とかも面白かった
+- デザイントークンに関しての知識があると内容が入ってきやすいかも
+
+---
+layout: iframe-left
+url: https://2024-fac-hokkaido-yuto343.pages.dev/1
+---
+
+### CodeGrid記事かいつまみ紹介
+
+**CodeGridを会社で購読してほしい！！**
+
+- 「ライブラリなしで実装するUI」という記事がめちゃくちゃよさそうだった
+- Astroの記事とかもあるらしい
+- フロントエンド全体の記事を広く、正確に書いているのでかなり参考になりそう
+
+---
+layout: iframe-left
+url: https://speakerdeck.com/player/d42d61cd3e8d4501b0b27309172205be
+---
+
+<!-- markdownlint-disable-next-line MD026 タイトルなので -->
+### React Aria のコントリビューターが思う React Aria の良いところ・これからなところを5分でお話します！
+
+- Adobeが開発しているHeadless UI系ライブラリ
+- SpectrumのReact実装がReact ariaに依存している
+- WAI-ARIAに対しての知見が少なくてもある程度の知識があれば構築できる
+
+---
+layout: iframe-left
+url: https://speakerdeck.com/player/1f6ed800523d4c1d845b26afd908c7c7
+---
+
+### CSSレイアウト再入門:完全に理解してCSSを記述するために
+
+- みなさんご存じ（？）整形コンテキストの話
+- CSSのボックスモデルを理解して正しくレイアウトを構築するために必要な知識
+- みんなも仕組みを理解してレイアウトを組もう！
+
+---
+layout: iframe-left
+url: https://speakerdeck.com/player/be6e42d126ae48b38369d97f69461717
+---
+
+### ESLint Plugin により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
+
+- 自分たちのアプリケーション固有の制約を守るためにESLintのプラグインを書く話。
+- 「チェックリスト」式・レビューで確認運用を信用していないので共感があった。
+
+---
+layout: iframe-left
+url: https://speakerdeck.com/player/8b2ccaf6aae94ae2986f7ef7d4a30e70
+---
+
+### Component-Driven Design & Development
+
+- フロントエンドが知っておかないといけないデザインの話が凝縮された発表だった。
+- Freeform DesignとStructured Designの話とかも併せてみておきたい。
+
+---
+layout: center
+---
+
+## ほかにも面白い発表がたくさんあったので見てみてね
+
+---
+
+## 感想
+
+- カンファレンスの楽しさを再認識できた
+- 「フロントエンド」のカンファレンスは意外と少ないので貴重な話を聴けた
+- 旅行がてらのカンファレンスはいいぞ
+
+---
+layout: image
+image: /images/otaru.jpg
+---
+
+---
+layout: end
+---
+
+# おしまい

frontend-conf-hokkaido/styles/index.ts

@@ -0,0 +1,2 @@
+import "./mod.css";
+import "@slide/reuse/styles";

frontend-conf-hokkaido/styles/mod.css

@@ -0,0 +1,27 @@
+#app .slidev-page-1 h1 {
+  font-size: 2.25rem;
+  color: var(--c-main);
+  background-color: rgb(from var(--c-base) 255 255 255 / 50%);
+  text-align: center;
+  font-weight: 900;
+}
+
+.slidev-page-1 {
+  background-image: url("/images/entrance.jpg");
+  background-size: cover;
+}
+
+#app .slidev-page-1 .slidev-layout,
+#app .slidev-page-1 .slidev-layout {
+  background: none;
+}
+
+#app .slidev-layout.end {
+  background: url("/images/sushi.jpg") !important;
+  background-size: cover !important;
+
+  h1 {
+    color: var(--c-main);
+    background-color: rgb(from var(--c-base) 255 255 255 / 50%);
+  }
+}

package.json

@@ -23,7 +23,8 @@
     "howto-use-react-keys",
     "the-tooltip",
     "is-seo-everything",
-    "hooks-testing"
+    "hooks-testing",
+    "frontend-conf-hokkaido"
   ],
   "devDependencies": {
     "@slidev/cli": "^0.49.29",