🪁 kastro: akıllı dom id kullan

KimlikDAO · Jan 30, 2025 · 1a98919 · 1a98919
1 parent 6a96c04
commit 1a98919
Show file tree

Hide file tree

Showing 65 changed files with 1,239 additions and 1,420 deletions.
diff --git a/ana/kazan/birim.jsx → ana/Kazan.jsx b/ana/kazan/birim.jsx → ana/Kazan.jsx
@@ -1,12 +1,18 @@
-import AnaCss from "../sayfa.css";
-import Css from "./birim.css";
+import AnaCss from "./sayfa.css";
 import EliptikEğriler from "/birim/blog/eliptik-egriler/birim";
 import EliptikImza from "/birim/blog/eliptik-imza/birim";
 import OrtakCss from "/birim/ortakcss/birim.css";
 import { ExternalPage } from "/crate";
+import { css } from "/lib/kastro/stylesheet";
+
+const Css = css`
+  #İçerik {
+    padding: 20px;
+  }
+`;
 
 const Kazan = () => (
-  <div id={Css.Kök} class={AnaCss.Üçlü}>
+  <div class={AnaCss.Üçlü}>
     <Css />
     <div id={Css.İçerik}>
       <h2 class={OrtakCss.Mavi}>{{
@@ -23,7 +29,7 @@ const Kazan = () => (
           topla. Çok yakında!</>
       }}</span>
       <br />
-      <a href={ExternalPage.Blog} class={[OrtakCss.Düğme, OrtakCss.Info, "anust"]}>{{
+      <a href={ExternalPage.Blog} class={[OrtakCss.Düğme, OrtakCss.Bilgi, AnaCss.ÜstBoşluk]}>{{
         en: "Learn & earn (Soon!)",
         tr: "Öğren ve kazan (Yakında!)"
       }}</a>

diff --git a/ana/README.md b/ana/README.md
diff --git a/ana/Raporlar.jsx b/ana/Raporlar.jsx
@@ -0,0 +1,32 @@
+import AnaCss from "./sayfa.css";
+import Jan25 from "/birim/blog/2025.01/birim";
+import OrtakCss from "/birim/ortakcss/birim.css";
+
+const Raporlar = () => (
+  <div class={AnaCss.Üçlü}>
+    <div></div>
+    <Jan25 href={""} loading="lazy" />
+    <div class={AnaCss.SağaYaslı}>
+      <h2 class={OrtakCss.Mor}>{{
+        en: "KimlikDAO progress reports.",
+        tr: "KimlikDAO ilerleme raporları."
+      }}</h2>
+      <span class={AnaCss.Açıklama}>{{
+        en: <>
+          Read about the progress at KimlikDAO, from advancements in the KimlikDAO
+          protocol to new uses of KPass, from the events we participate in, to the
+          new partnerships we establish, in our monthly progress reports</>,
+        tr: <>
+          KimlikDAO’nun protokolündeki gelişmelerden yeni kullanım alanlarına
+          katıldığımız etkinliklerden, kurduğumuz yeni ortaklıklara tüm
+          gelişmelerini aylık ilerleme raporlarından okuyun.</>
+      }}</span><br />
+      <a href="//blog.kimlikdao.org" class={[OrtakCss.Düğme, OrtakCss.Mavi, AnaCss.ÜstBoşluk]}>{{
+        en: "All progress reports",
+        tr: "Tüm ilerleme raporları"
+      }}</a>
+    </div>
+  </div>
+);
+
+export default Raporlar;
diff --git a/ana/ağ/KPass.jsx b/ana/ağ/KPass.jsx
diff --git a/ana/ağ/birim.css b/ana/ağ/birim.css
@@ -1,32 +1,33 @@
-/**
- * @name {Kök}
- */
-#ag {
+#Kök {
   row-gap: 50px;
   margin: 80px auto;
 }
 
 /**
- * Açıklama metnini içeren sütun
- * @name {YazıSütunu}
+ * Açıklama metnini içeren en sağdaki sütun
  */
-#agy {
+#YazıSütunu {
   padding: 0 20px;
 }
 
-#ago {
-  margin-top: 30px;
+/**
+ * KPass imzalarıni gösteren orta sütun
+ */
+#OrtaSütun {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-/** @name {Altıgen} */
-#ag6 {}
+#Altıgen {}
 
-.agi:hover {
+.Düğümİmza:hover {
   opacity: 1;
 }
 
 /** @name {Düğümİmza} */
-.agi {
+.Düğümİmza {
   align-items: center;
   border-radius: 15px;
   color: rgba(10, 10, 100, 0.9);
@@ -40,93 +41,80 @@
   width: 180px;
 }
 
-/** @name {DüğümNokta} */
-.agp {
+.DüğümNokta {
   width: 10px;
   height: 10px;
   border-radius: 10px;
   margin: 0 5px;
 }
 
-.agtd {
+.TimeD {
   background: #F9EFEF;
   border: 2px solid #E5AFAF;
 }
 
-.agtdn {
+.TimeDn {
   background: #E5AFAF;
 }
 
-.agkd {
+.KDAON {
   background: #e9e0fb;
   border: 2px solid #9266EC;
 }
 
-.agkdn {
+.KDAONn {
   background: #9266EC;
 }
 
-.agyb {
+.YeniB {
   background: #d6e6f5;
   border: 2px solid #3182CE;
 }
 
-.agybn {
+.YeniBn {
   background: #3182CE;
 }
 
-.agdi {
+.UBINU {
   background: #fdf2ff;
   border: 2px solid #F4BCFD;
 }
 
-.agdin {
+.UBINUn {
   background: #F4BCFD;
 }
 
-.agyl {
+.YenLi {
   background: #ecf8f3;
   border: 2px solid #9EDDC3;
 }
 
-.agyln {
+.YenLin {
   background: #9EDDC3;
 }
 
-.agls {
+.LSTCM {
   background: #ddd;
   border: 2px solid #444;
 }
 
-.aglsn {
+.LSTCMn {
   background: #444;
 }
 
-.agk3 {
+.Kopru {
   background: #e8d5f9;
   border: 2px solid #8E2DE2;
 }
 
-.agk3n {
+.Koprun {
   background: #8E2DE2;
 }
 
-/**
- * KPass imzalarıni gösteren orta sütun
- * @name {OrtaSütun}
- */
-#agt {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 /**
  * KPass temsili
- * @name {KPass}
  */
-#agkp {
+#KPassTemsili {
   width: 280px;
   height: 145px;
   margin: -20px auto 20px;
@@ -135,14 +123,12 @@
   position: relative;
 }
 
-/** @name {AğSvgText} */
-.agsvgt {
+.GrafikMetin {
   font: 700 30px 'l';
   fill: #333;
   text-anchor: middle;
 }
 
-/** @name {Grafik} */
-#agn {
+#Grafik {
   margin: auto;
 }
diff --git a/ana/ağ/birim.jsx b/ana/ağ/birim.jsx
@@ -12,41 +12,45 @@ import { keccak256 } from "/lib/crypto/sha3";
  * }=} props
  * @return {Promise<string>}
  */
-const Node = ({ idx }) => (
-  <div class={[Css.Düğümİmza, `ag${idx}`]}>
-    <div class={[Css.DüğümNokta, `ag${idx}n`]}></div>{
-      `0x${keccak256(idx).slice(0, 8)}...${keccak256(idx).slice(8, 16)}`
-    }
-  </div>
-);
+const Node = ({ idx }) => {
+  const kısaAd = (addr) => `0x${addr.slice(0, 8)}...${addr.slice(8, 16)}`;
+  return (
+    <div class={[Css.Düğümİmza, Css[idx]]}>
+      <div class={[Css.DüğümNokta, Css[`${idx}n`]]}></div>{kısaAd(keccak256(idx))}
+    </div>
+  );
+}
 
 /** @const {!Object<string, !Array<string>>} */
 const NODES = {
-  kd: ["0x299A3490c8De309D855221468167aAD6C44c59E0", "node.kimlikdao.org", "9266ec", "4A00E0"],
-  yb: ["0x86f6B34A26705E6a22B8e2EC5ED0cC5aB3f6F828", "yenibank.org", "83b4e2", "3182CE", "üst"],
-  td: ["0x77c60E68158De0bC70260DFd1201be9445EfFc07", "timedogankoy.com", "edc7c7", "E5AFAF"],
-  yl: ["0xE3581636Df37f1eBfFbdFE22F8719F57c555d4f7", "yenilira.org", "#bbe7d5", "9EDDC3", "üst"],
-  di: ["0x4F1DBED3c377646c89B4F8864E0b41806f2B79fd", "dobbyinu.com", "#fe94f4", "FE66EF"],
-  k3: ["0xc855dB548A6feB1f34AcAE6531c84261008ea55A", "kopru.xyz", "#b06ceb", "8E2DE2"],
-  ls: ["0x384bF113dcdF3e7084C1AE2Bb97918c3Bf15A6d2", "lstcm.co", "666", "111"],
+  KDAON: ["0x299A3490c8De309D855221468167aAD6C44c59E0", "node.kimlikdao.org", "9266ec", "4A00E0"],
+  YeniB: ["0x86f6B34A26705E6a22B8e2EC5ED0cC5aB3f6F828", "yenibank.org", "83b4e2", "3182CE", "üst"],
+  TimeD: ["0x77c60E68158De0bC70260DFd1201be9445EfFc07", "timedogankoy.com", "edc7c7", "E5AFAF"],
+  YenLi: ["0xE3581636Df37f1eBfFbdFE22F8719F57c555d4f7", "yenilira.org", "#bbe7d5", "9EDDC3", "üst"],
+  UBINU: ["0x4F1DBED3c377646c89B4F8864E0b41806f2B79fd", "dobbyinu.com", "#fe94f4", "FE66EF"],
+  Kopru: ["0xc855dB548A6feB1f34AcAE6531c84261008ea55A", "kopru.xyz", "#b06ceb", "8E2DE2"],
+  LSTCM: ["0x384bF113dcdF3e7084C1AE2Bb97918c3Bf15A6d2", "lstcm.co", "666", "111"],
 };
 
-/**
- * @param {string} renk
- * @return {string} Başında # bulunan renk.
- */
-const h = (renk) => (renk.startsWith("#") ? renk : "#" + renk).toUpperCase();
-
 /**
  * @param {{ width: number }=} props
  * @return {Promise<string>}
  */
 const Grafik = ({ width }) => {
+  /**
+   * @param {string} renk
+   * @return {string} Başında # bulunan renk.
+   */
+  const h = (renk) => (renk.startsWith("#") ? renk : "#" + renk).toUpperCase();
+  /** @const {!Array<string>} */
   const keys = Object.keys(NODES);
   /** @const {number} */
   const n = keys.length;
+  /** @const {number} */
   const cx = width / 2;
+  /** @const {number} */
   const cy = cx;
+  /** @const {number} */
   const r = cx - 80;
 
   return (
@@ -56,8 +60,8 @@ const Grafik = ({ width }) => {
           d="M3.33 47.5C0.65 42.859 0.65 37.141 3.33 32.5L17.17 8.53C19.85 3.89 24.8 1 30.16 1.03H57.84C63.2 1 68.15 3.89 70.83 8.53L84.67 32.5C87.35 37.141 87.3494 42.859 84.67 47.5L70.83 71.47C68.15 76.11 63.2 78.97 57.84 78.97H30.16C24.8 78.97 19.85 76.11 17.17 71.47L3.33 47.5Z"
           stroke-width={2} shape-rendering="geometricPrecision" />
       </defs>
-      <text class={Css.AğSvgText} x={cx} y={cy - 30}>{{ en: "The KimlikDAO", tr: "KimlikDAO" }}</text>
-      <text class={Css.AğSvgText} x={cx} y={cy + 7}>{{ en: "Network", tr: "Ağı" }}</text>
+      <text class={Css.GrafikMetin} x={cx} y={cy - 30}>{{ en: "The KimlikDAO", tr: "KimlikDAO" }}</text>
+      <text class={Css.GrafikMetin} x={cx} y={cy + 7}>{{ en: "Network", tr: "Ağı" }}</text>
       {keys.map((key, i) => {
         const x = Math.round(cx + r * Math.sin((Math.PI * 2 * i) / n));
         const y = Math.round(cy - r * Math.cos((Math.PI * 2 * i) / n));
@@ -71,6 +75,29 @@ const Grafik = ({ width }) => {
   );
 }
 
+const KPassTemsili = () => (
+  <div id={Css.KPassTemsili}>
+    <div class={KPassCss.BilgiKartıİçi}>
+      <div class={KPassCss.Ad}>{{ tr: "Doğum yeri", en: "City of birth" }}</div>
+      <div>{{ tr: "İstanbul", en: "Palo Alto, CA" }}</div>
+      <div class={KPassCss.Ad}>{{ tr: "Cinsiyet", en: "Gender" }}</div>
+      <div>{{ tr: "K", en: "F" }}</div>
+    </div>
+    <svg height={24} width={24} class={KPassCss.Logo}>
+      <use href={`#${OrtakCss.Başlık.Logomark}`} width={24} height={24} />
+    </svg>
+    <div class={KPassCss.Nav}>
+      <button class={[KPassCss.Düğme, KPassCss.SolDüğme]}>
+        <KPass.SolOk />
+      </button>
+      1 / 5
+      <button class={[KPassCss.Düğme, KPassCss.SağDüğme]}>
+        <KPass.SağOk />
+      </button>
+    </div>
+  </div>
+);
+
 const Ağ = () => (
   <div id={Css.Kök} class={AnaCss.Üçlü}>
     <Css />
@@ -83,32 +110,13 @@ const Ağ = () => (
         en: "The contents of each KPass are verified and digitally signed by at least seven independent nodes in the KimlikDAO network, all while fully preserving your privacy.",
         tr: "KPass’ler birbirinden bağımsız en az 7 KimlikDAO ağı düğümünün onay ve dijital imzası ile üretilebilir. Onay aşamasında veri gizliliğiniz tamamıyla korunur."
       }}</div>
-      <a href={ExternalPage.GitHub + "/kimlikdao-node"} target="_blank" rel="noreferrer" class={[OrtakCss.Düğme, OrtakCss.Info, "anust"]}>{{
+      <a href={ExternalPage.GitHub + "/kimlikdao-node"} target="_blank" rel="noreferrer" class={[OrtakCss.Düğme, OrtakCss.Bilgi, AnaCss.ÜstBoşluk]}>{{
         en: "Learn about KimlikDAO nodes",
         tr: "KimlikDAO düğümü detayları"
       }}</a>
     </div>
     <div id={Css.OrtaSütun}>
-      <div id={Css.KPass}>
-        <div class={KPassCss.BilgiKartıİçi}>
-          <div class={KPassCss.Ad}>{{ tr: "Doğum yeri", en: "City of birth" }}</div>
-          <div>{{ tr: "İstanbul", en: "Palo Alto, CA" }}</div>
-          <div class={KPassCss.Ad}>{{ tr: "Cinsiyet", en: "Gender" }}</div>
-          <div>{{ tr: "K", en: "F" }}</div>
-        </div>
-        <svg height={24} width={24} class={KPassCss.Logo}>
-          <use href={`#${OrtakCss.Başlık.Logomark}`} width={24} height={24} />
-        </svg>
-        <div class={KPassCss.Nav}>
-          <button class={[KPassCss.Düğme, KPassCss.SolDüğme]}>
-            <KPass.SolOk />
-          </button>
-          1 / 5
-          <button class={[KPassCss.Düğme, KPassCss.SağDüğme]}>
-            <KPass.SağOk />
-          </button>
-        </div>
-      </div>
+      <KPassTemsili />
       {Object.keys(NODES).map((key) => <Node idx={key} />)}
     </div>
     <Grafik width={500} />