Urara-Blog/build/_app/immutable/pages/2022-05-26-write-a-page-template.md-1f0b482a.js

import{S as yo,i as io,s as Do,C as Wn,w as oa,x as Fa,y as ea,z as Eo,A as ao,f as ta,t as ra,B as ca,X as no,l as p,r as t,a as c,V as Ts,m as o,n as F,u as r,h as l,c as y,W as Hs,p as i,b as e,G as a,E as vo}from"../chunks/index-cd58b8d1.js";import{P as fo}from"../chunks/post_layout-9085e57e.js";import{I as Nn}from"../chunks/post_card-e7f4525a.js";import"../chunks/posts-c52cb603.js";import"../chunks/title-765c989f.js";import"../chunks/index-81c83cec.js";import"../chunks/head-4a058b17.js";import"../chunks/icon-3aa13b39.js";import"../chunks/footer-1abd9501.js";import"../chunks/posts-57ab4794.js";function uo(ss){let D,m,d,O,E,f,h,ya,dl,I,ls,ia,vl,as,Da,fl,C,qs,Ea,da,Os,va,fa,Is,ua,ul,ns,ma,ml,v,Rs,Ca,ga,Gs,_a,ha,Ms,Aa,ba,Us,Ba,xa,Ns,wa,Cl,R,ps,Pa,gl,A,ja,b,ka,$a,G,_l,os,Sa,hl,M,Fs,La,Al,es,Ta,bl,ts,Ha,Bl,B,U,qa,x,Oa,xl,rs,N,wl,W,cs,Ia,Pl,ys,Ra,jl,X,is,Ga,kl,Ds,Ma,$l,w,Es,Ua,Ws,Na,Wa,ds,Xa,Xs,za,Sl,zs,oo=`<pre class="shiki material-default with-title twoslash lsp" style="background-color: #263238; color: #EEFFFF" ts="true" title="/src/lib/config/friends.ts"><div class='code-title'>/src/lib/config/friends.ts</div><div class="language-id">ts</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">export</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">interface</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B"><data-lsp lsp='interface FriendOld' >FriendOld</data-lsp></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #546E7A">// hCard+XFN</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) FriendOld.id: string' >id</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// HTML id</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) FriendOld.rel?: string | undefined' >rel</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// XFN, contact / acquaintance / friend</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) FriendOld.link?: string | undefined' >link</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// URL</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) FriendOld.html?: string | undefined' >html</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// HTML</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) FriendOld.title?: string | undefined' >title</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// \u6807\u9898</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) FriendOld.descr?: string | undefined' >descr</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// \u63CF\u8FF0</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) FriendOld.avatar?: string | undefined' >avatar</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// \u5934\u50CF</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) FriendOld.name?: string | undefined' >name</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// backwards compatibility</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #89DDFF">export</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">type</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B"><data-lsp lsp='type Friend = &#123;&#10;    id: string;&#10;    rel?: string | undefined;&#10;    link?: string | undefined;&#10;    html?: string | undefined;&#10;    title?: string | undefined;&#10;    name?: string | undefined;&#10;    avatar?: string | undefined;&#10;    descr?: string | undefined;&#10;    class?: &#123;&#10;        ...;&#10;    &#125; | undefined;&#10;&#125;' >Friend</data-lsp></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) id: string' >id</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// HTML id</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) rel?: string | undefined' >rel</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// XHTML Friends Network</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) link?: string | undefined' >link</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// URL</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) html?: string | undefined' >html</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// Custom HTML</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) title?: string | undefined' >title</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// \u6807\u9898</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) name?: string | undefined' >name</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// \u4EBA\u540D</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) avatar?: string | undefined' >avatar</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// \u5934\u50CF</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) descr?: string | undefined' >descr</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// \u63CF\u8FF0</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) class?: &#123;&#10;    avatar?: string | undefined;&#10;    img?: string | undefined;&#10;&#125; | undefined' >class</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #F07178"><data-lsp lsp='(property) avatar?: string | undefined' >avatar</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// \u5934\u50CF\u7C7B\u540D</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #F07178"><data-lsp lsp='(property) img?: string | undefined' >img</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #546E7A">// \u56FE\u7247\u7C7B\u540D</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&#125;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #89DDFF">export</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> <data-lsp lsp='const friends: Friend[]' >friends</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B"><data-lsp lsp='type Friend = &#123;&#10;    id: string;&#10;    rel?: string | undefined;&#10;    link?: string | undefined;&#10;    html?: string | undefined;&#10;    title?: string | undefined;&#10;    name?: string | undefined;&#10;    avatar?: string | undefined;&#10;    descr?: string | undefined;&#10;    class?: &#123;&#10;        ...;&#10;    &#125; | undefined;&#10;&#125;' >Friend</data-lsp></span><span style="color: #EEFFFF">[] </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #F07178"><data-lsp lsp='(property) id: string' >id</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&apos;</span><span style="color: #C3E88D">id</span><span style="color: #89DDFF">&apos;</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #F07178"><data-lsp lsp='(property) rel?: string | undefined' >rel</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&apos;&apos;</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #F07178"><data-lsp lsp='(property) title?: string | undefined' >title</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&apos;&apos;</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #F07178"><data-lsp lsp='(property) name?: string | undefined' >name</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&apos;&apos;</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #F07178"><data-lsp lsp='(property) link?: string | undefined' >link</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&apos;&apos;</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #F07178"><data-lsp lsp='(property) descr?: string | undefined' >descr</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&apos;&apos;</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #F07178"><data-lsp lsp='(property) avatar?: string | undefined' >avatar</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&apos;&apos;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&#125;</span></div><div class='line'><span style="color: #EEFFFF">]</span></div></code></div></pre>`,Vs,Ys,Fo=`<pre class="shiki material-default with-title twoslash lsp" style="background-color: #263238; color: #EEFFFF" ts="true" title="/src/lib/config/projects.ts"><div class='code-title'>/src/lib/config/projects.ts</div><div class="language-id">ts</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">export</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">type</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B"><data-lsp lsp='type Project = &#123;&#10;    id: string;&#10;    name?: string | undefined;&#10;    tags?: string[] | undefined;&#10;    feature?: string | undefined;&#10;    description?: string | undefined;&#10;    img?: string | undefined;&#10;    link?: string | undefined;&#10;&#125;' >Project</data-lsp></span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) id: string' >id</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) name?: string | undefined' >name</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) tags?: string[] | undefined' >tags</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF">[]</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) feature?: string | undefined' >feature</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) description?: string | undefined' >description</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) img?: string | undefined' >img</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #F07178"><data-lsp lsp='(property) link?: string | undefined' >link</data-lsp></span><span style="color: #89DDFF">?:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #89DDFF">export</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> <data-lsp lsp='const projects: Project[]' >projects</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B"><data-lsp lsp='type Project = &#123;&#10;    id: string;&#10;    name?: string | undefined;&#10;    tags?: string[] | undefined;&#10;    feature?: string | undefined;&#10;    description?: string | undefined;&#10;    img?: string | undefined;&#10;    link?: string | undefined;&#10;&#125;' >Project</data-lsp></span><span style="color: #EEFFFF">[] </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #F07178"><data-lsp lsp='(property) id: string' >id</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&apos;</span><span style="color: #C3E88D">coach</span><span style="color: #89DDFF">&apos;</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #F07178"><data-lsp lsp='(property) name?: string | undefined' >name</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&apos;</span><span style="color: #C3E88D">Find a Coach</span><span style="color: #89DDFF">&apos;</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #F07178"><data-lsp lsp='(property) tags?: string[] | undefined' >tags</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> [</span><span style="color: #89DDFF">&apos;</span><span style="color: #C3E88D">Vue 3</span><span style="color: #89DDFF">&apos;</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&apos;</span><span style="color: #C3E88D">Composition API</span><span style="color: #89DDFF">&apos;</span><span style="color: #EEFFFF">]</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #F07178"><data-lsp lsp='(property) feature?: string | undefined' >feature</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&apos;</span><span style="color: #C3E88D">Vue3</span><span style="color: #89DDFF">&apos;</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #F07178"><data-lsp lsp='(property) description?: string | undefined' >description</data-lsp></span><span style="color: #89DDFF">:</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&apos;</span><span style="color: #C3E88D">\u65E2\u7136\u5982\u4F55\uFF0C \u95EE\u9898\u7684\u5173\u952E\u7A76\u7ADF\u4E3A\u4F55\uFF1F \u8981\u60F3\u6E05\u695A\uFF0C\u79D1\u5B66\u548C\u4EBA\u6587\u8C01\u66F4\u6709\u610F\u4E49\uFF0C\u5230\u5E95\u662F\u4E00\u79CD\u600E\u4E48\u6837\u7684\u5B58\u5728\u3002 \u666E\u5217\u59C6\u660C\u5FB7\u66FE\u7ECF\u63D0\u5230\u8FC7\uFF0C\u5E0C\u671B\u7684\u706F\u4E00\u65E6\u7184\u706D\uFF0C\u751F\u6D3B\u5239\u90A3\u95F4\u53D8\u6210\u4E86\u4E00\u7247\u9ED1\u6697\u3002\u8FD9\u542F\u53D1\u4E86\u6211\uFF0C \u90A3\u4E48\uFF0C \u6211\u8BA4\u4E3A\uFF0C \u603B\u7ED3\u7684\u6765\u8BF4\uFF0C</span><span style="color: #89DDFF">&apos;</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #F07178"><data-lsp lsp='(property) img?: string | undefined' >img</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&apos;</span><span style="color: #C3E88D">https://uneorange.oss-cn-guangzhou.aliyuncs.com/202205251801454.avif</span><span style="color: #89DDFF">&apos;</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #F07178"><data-lsp lsp='(property) link?: string | undefined' >link</data-lsp></span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&apos;</span><span style="color: #C3E88D">https://seviche.cc</span><span style="color: #89DDFF">&apos;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&#125;</span></div><div class='line'><span style="color: #EEFFFF">]</span></div></code></div></pre>`,Qs,z,vs,Va,Ll,fs,Ya,Tl,P,us,Qa,Zs,Za,Ja,ms,Ka,Js,sn,Hl,Ks,eo=`<pre class="shiki material-default with-title" style="background-color: #263238; color: #EEFFFF" html="true" title="/src/lib/components/extra/friend.svelte"><div class='code-title'>/src/lib/components/extra/friend.svelte</div><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">script</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">lang</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">type</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">Friend</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#125;</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/config/friends</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> Footer </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/components/footer.svelte</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">export</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">let</span><span style="color: #EEFFFF"> item</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">unknown</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #C792EA">let</span><span style="color: #EEFFFF"> friend </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> item </span><span style="color: #89DDFF">as</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">unknown</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">as</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">Friend</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">script</span><span style="color: #89DDFF">&gt;</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">&#123;#if friend.id === 'footer'&#125;</span></div><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">footer</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">rounded</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;true&#125;</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">p-4 md:p-8</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /&gt;</span></div><div class='line'><span style="color: #EEFFFF">&#123;:else if friend.html&#125;</span></div><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">a</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;friend.id&#125;</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">rel</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;friend.rel&#125;</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">href</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;friend.link&#125;</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">h-card u-url</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">&#123;@html friend.html&#125;</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">a</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">&#123;:else&#125;</span></div><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">a</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #C792EA">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;friend.id&#125;</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #C792EA">rel</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;friend.rel&#125;</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #C792EA">href</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;friend.link&#125;</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow h-card u-url</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">absolute text-4xl font-bold opacity-5 rotate-6 leading-tight top-4</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">&#123;friend.name ?? ''&#125;&#123;friend.title ?? ''&#125;</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">card-body p-4</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">flex items-center gap-4</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">      &#123;#if friend.avatar&#125;</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">avatar &#123;friend.class?.avatar&#125; shrink-0 w-16 mb-auto</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">        </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">img</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;friend.class?.img ?? 'rounded-xl'&#125; u-photo</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">src</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;friend.avatar&#125;</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">alt</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;friend.title&#125;</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /&gt;</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">      &#123;:else&#125;</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">avatar &#123;friend.class?.avatar&#125; placeholder mb-auto</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">        </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;friend.class?.img ?? 'bg-neutral-focus text-neutral-content shadow-inner rounded-xl'&#125; w-16</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">          </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">text-3xl</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">&#123;(friend.name ?? friend.title).charAt(0)&#125;</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">span</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">        </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">      &#123;/if&#125;</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">card-title flex-col gap-0 flex-1 items-end</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">        </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">text-right p-name</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">&#123;friend.name ?? ''&#125;</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">span</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">        </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">opacity-50 text-right</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">&#123;friend.title&#125;</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">span</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    &#123;#if friend.descr&#125;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">prose opacity-70 p-note</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">&#123;friend.descr&#125;</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    &#123;/if&#125;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">a</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">&#123;/if&#125;</span></div></code></div></pre>`,sl,Cs,ln,ql,ll,to=`<pre class="shiki material-default with-title" style="background-color: #263238; color: #EEFFFF" html="true" title="/src/lib/components/extra/project.svelte"><div class='code-title'>/src/lib/components/extra/project.svelte</div><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">script</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">lang</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">type</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">Project</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#125;</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/config/projects</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> Footer </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/components/footer.svelte</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">export</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">let</span><span style="color: #EEFFFF"> item</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">unknown</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #C792EA">let</span><span style="color: #EEFFFF"> project </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> item </span><span style="color: #89DDFF">as</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">unknown</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">as</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">Project</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #C792EA">let</span><span style="color: #EEFFFF"> tags </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> project</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">tags</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">script</span><span style="color: #89DDFF">&gt;</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">&#123;#if project.id === 'footer'&#125;</span></div><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">footer</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">rounded</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;true&#125;</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">max-w-4xl mx-auto p-4 md:p-8</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /&gt;</span></div><div class='line'><span style="color: #EEFFFF">&#123;:else&#125;</span></div><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">a</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #C792EA">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;project.id&#125;</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #C792EA">href</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;project.link&#125;</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">card mx-auto max-w-4xl bg-base-100 shadow-xl transition-shadow mb-7 h-card u-url hover:shadow-2xl</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">absolute text-5xl font-bold opacity-5 rotate-6 leading-tight top-2 right-0</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">&#123;project.feature&#125;</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">card-body p-4</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">flex flex-col md:flex-row items-start gap-4</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">mb-auto  max-w-full shrink-0 md:max-w-xs</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">        </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">img</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">rounded-md</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">src</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;project.img&#125;</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">alt</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;project.description&#125;</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /&gt;</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">card-title flex-1 flex-col items-start gap-4</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">        </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">          </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">h2</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">p-name text-left text-2xl mb-2</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">&#123;project.name&#125;</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">h2</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">          </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">mb-3 text-base font-normal</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">            &#123;#each tags as tag&#125;</span></div><div class='line'><span style="color: #EEFFFF">            </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">span</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">btn btn-sm btn-ghost normal-case border-dotted border-base-content/20 border-2 my-1 mr-1</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">&#123;tag&#125;</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">span</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">            &#123;/each&#125;</span></div><div class='line'><span style="color: #EEFFFF">          </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">        </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">        </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">p</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">text-left text-base font-normal opacity-70</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">&#123;@html project.description&#125;</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">a</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">&#123;/if&#125;</span></div></code></div></pre>`,al,V,gs,an,Ol,j,_s,nn,nl,pn,on,hs,Fn,pl,en,Il,ol,ro=`<pre class="shiki material-default with-title" style="background-color: #263238; color: #EEFFFF" html="true" title="/urara/friends/index.svelte"><div class='code-title'>/urara/friends/index.svelte</div><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">script</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">lang</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #546E7A">// @ts-nocheck</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> Masonry </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">svelte-bricks</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">Friend</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">friends</span><span style="color: #F07178"> </span><span style="color: #89DDFF">as</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">allFriends</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#125;</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/config/friends</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> Head </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/components/head.svelte</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> FriendComponent </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/components/extra/friend.svelte</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> rnd </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> Math</span><span style="color: #89DDFF">.</span><span style="color: #82AAFF">random</span><span style="color: #EEFFFF">()</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #C792EA">const</span><span style="color: #EEFFFF"> fy </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">a</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">Friend</span><span style="color: #EEFFFF">[]</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> r </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> c </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> a</span><span style="color: #89DDFF">.</span><span style="color: #EEFFFF">length</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #C792EA">=&gt;</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #F07178">    </span><span style="color: #89DDFF">while</span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">c</span><span style="color: #F07178">) (</span><span style="color: #EEFFFF">r</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> (</span><span style="color: #EEFFFF">rnd</span><span style="color: #F07178"> </span><span style="color: #89DDFF">*</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">c</span><span style="color: #89DDFF">--</span><span style="color: #F07178">) </span><span style="color: #89DDFF">|</span><span style="color: #F07178"> </span><span style="color: #F78C6C">0</span><span style="color: #F07178">)</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> ([</span><span style="color: #EEFFFF">a</span><span style="color: #F07178">[</span><span style="color: #EEFFFF">c</span><span style="color: #F07178">]</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">a</span><span style="color: #F07178">[</span><span style="color: #EEFFFF">r</span><span style="color: #F07178">]] </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> [</span><span style="color: #EEFFFF">a</span><span style="color: #F07178">[</span><span style="color: #EEFFFF">r</span><span style="color: #F07178">]</span><span style="color: #89DDFF">,</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">a</span><span style="color: #F07178">[</span><span style="color: #EEFFFF">c</span><span style="color: #F07178">]])</span></div><div class='line'><span style="color: #F07178">    </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">a</span></div><div class='line'><span style="color: #F07178">  </span><span style="color: #89DDFF">&#125;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #C792EA">let</span><span style="color: #EEFFFF"> items</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">id</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#125;</span><span style="color: #EEFFFF">[] </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span><span style="color: #89DDFF">...</span><span style="color: #82AAFF">fy</span><span style="color: #EEFFFF">(allFriends </span><span style="color: #89DDFF">as</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">id</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#125;</span><span style="color: #EEFFFF">[])</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">id</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">footer</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#125;</span><span style="color: #EEFFFF">]</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #C792EA">let</span><span style="color: #EEFFFF"> width</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">number</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> height</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">number</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">script</span><span style="color: #89DDFF">&gt;</span></div><div class='line'></div><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">head</span><span style="color: #89DDFF"> /&gt;</span></div><div class='line'></div><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">Masonry</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #C792EA">&#123;items&#125;</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #C792EA">minColWidth</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;384&#125;</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #C792EA">maxColWidth</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;384&#125;</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #C792EA">gap</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">&#123;32&#125;</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #C792EA">let:item</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">mx-4 sm:mx-8 md:my-4 lg:mx-16 lg:my-8 xl:mx-32 xl:my-16</span><span style="color: #89DDFF">"</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #C792EA">bind:width</span></div><div class='line'><span style="color: #89DDFF">  </span><span style="color: #C792EA">bind:height</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">FriendComponent</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">&#123;item&#125;</span><span style="color: #89DDFF"> /&gt;</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">Masonry</span><span style="color: #89DDFF">&gt;</span></div></code></div></pre>`,Fl,As,el,tn,Rl,bs,rn,Gl,tl,co=`<pre class="shiki material-default with-title" style="background-color: #263238; color: #EEFFFF" html="true" title="/urara/projects/index.svelte"><div class='code-title'>/urara/projects/index.svelte</div><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">script</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">lang</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">ts</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">projects</span><span style="color: #F07178"> </span><span style="color: #89DDFF">as</span><span style="color: #F07178"> </span><span style="color: #EEFFFF">allProjects</span><span style="color: #F07178"> </span><span style="color: #89DDFF">&#125;</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/config/projects</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> Head </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/components/head.svelte</span><span style="color: #89DDFF">'</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">import</span><span style="color: #EEFFFF"> ProjectComponent </span><span style="color: #89DDFF">from</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">$lib/components/extra/projects.svelte</span><span style="color: #89DDFF">'</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #C792EA">let</span><span style="color: #EEFFFF"> items</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">id</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#125;</span><span style="color: #EEFFFF">[] </span><span style="color: #89DDFF">=</span><span style="color: #EEFFFF"> [</span><span style="color: #89DDFF">...</span><span style="color: #EEFFFF">(allProjects </span><span style="color: #89DDFF">as</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">id</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">string</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#125;</span><span style="color: #EEFFFF">[])</span><span style="color: #89DDFF">,</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span><span style="color: #EEFFFF"> </span><span style="color: #F07178">id</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">footer</span><span style="color: #89DDFF">'</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#125;</span><span style="color: #EEFFFF">]</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">script</span><span style="color: #89DDFF">&gt;</span></div><div class='line'></div><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">head</span><span style="color: #89DDFF"> /&gt;</span></div><div class='line'></div><div class='line'><span style="color: #EEFFFF">&#123;#each items as item&#125;</span></div><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">ProjectComponent</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">&#123;item&#125;</span><span style="color: #89DDFF"> /&gt;</span></div><div class='line'><span style="color: #EEFFFF">&#123;/each&#125;</span></div></code></div></pre>`,rl,Y,Bs,cn,Ml,g,yn,k,Dn,En,cl,dn,vn,Ul,Q,xs,fn,Nl,u,un,yl,mn,Cn,il,gn,_n,Dl,hn,An,Wl,Z,ws,bn,Xl,$,Bn,S,xn,wn,zl,L,Pn,T,jn,kn,Vl,J,$n,H,Sn,Yl,K,Ps,Ln,Ql,js,Tn,Zl,ks,$s,Hn,Jl;return G=new Nn({props:{src:"https://s2.loli.net/2022/05/26/8kMa6LPrgUEC7Xb.png"}}),U=new Nn({props:{src:"https://s2.loli.net/2022/05/27/lFwQ8T5YUcdjDfe.png"}}),N=new Nn({props:{src:"https://s2.loli.net/2022/05/27/g5aYxD9mzlqpj6c.png"}}),{c(){D=p("p"),m=t("\u8FD9\u4E24\u5929\u4E3A\u535A\u5BA2\u5199\u4E86\u4E00\u4E2A Project \u7684\u9875\u9762\u7528\u6765\u653E\u6211\u7684\u4F5C\u54C1\uFF0C\u8FD9\u91CC\u8BB0\u5F55\u4E00\u4E0B\u6211\u662F\u600E\u4E48\u5199\uFF08\u6A21\u4EFF\uFF09\u7684\uFF0C\u6211\u5BF9 Svelte \u8BED\u6CD5\u7684\u4E86\u89E3\u4E0D\u591A\uFF0C\u6CA1\u6709\u7279\u522B\u6DF1\u5165\u5B66\u4E60\uFF0C\u53EA\u662F\u5728\u5B98\u65B9\u770B\u4E86\u4E0B\u6587\u6863\u548C\u7528\u4E86\u4E0B\u4ED6\u4EEC\u7684 "),d=p("a"),O=t("\u4EA4\u4E92\u5F0F\u6559\u7A0B"),E=t(" \uFF0C\u7F16\u7801\u7684\u8FC7\u7A0B\u662F\u4E00\u8FB9\u5B66\u4E60\u4E00\u8FB9\u6A21\u4EFF\u6162\u6162\u6478\u7D22\u7684\uFF0C\u867D\u7136\u6700\u7EC8\u6CA1\u6709 merge \u5230 repo \u4E2D\uFF0C\u4F46\u6211\u89C9\u5F97\u6574\u4E2A\u8FC7\u7A0B\u90FD\u86EE\u5174\u594B\u7684\u3002"),f=c(),h=p("p"),ya=t("\u65E2\u7136\u6709\u4E86\u535A\u5BA2\uFF0C\u90A3\u6211\u80AF\u5B9A\u662F\u8981\u5199\u4E00\u4E0B\u8FD9\u4E2A\u8FC7\u7A0B\u7684\u3002"),dl=c(),I=p("h2"),ls=p("a"),ia=t("1. \u5206\u6790\u9700\u6C42"),vl=c(),as=p("p"),Da=t(`\u6211\u60F3\u8981\u7684\u662F\u4E00\u4E2A\u72EC\u7ACB\u7684 Page\uFF0C\u800C\u4E0D\u662F\u4E00\u4E2A Post \u9875\u9762\uFF0C\u6700\u540E\u628A\u5B83\u653E\u5728\u5BFC\u822A\u680F\u91CC\u9762\u3002
\u60F3\u8981\u6709\u4EE5\u4E0B\u8FD9\u51E0\u4E2A\u529F\u80FD\uFF1A`),fl=c(),C=p("ul"),qs=p("li"),Ea=t("\u6280\u672F\u6808\u5206\u7C7B"),da=c(),Os=p("li"),va=t("\u9879\u76EE\u7C7B\u522B\u7B5B\u9009"),fa=c(),Is=p("li"),ua=t("\u9879\u76EE\u5C55\u793A"),ul=c(),ns=p("p"),ma=t("\u4E3B\u8981\u6709\u8FD9\u4E9B\u4FE1\u606F\u7684\u5C55\u793A\uFF1A"),ml=c(),v=p("ul"),Rs=p("li"),Ca=t("\u9879\u76EE\u6807\u9898"),ga=c(),Gs=p("li"),_a=t("\u9879\u76EE\u56FE\u7247"),ha=c(),Ms=p("li"),Aa=t("\u9879\u76EE\u63CF\u8FF0"),ba=c(),Us=p("li"),Ba=t("\u6280\u672F\u6808"),xa=c(),Ns=p("li"),wa=t("\u9879\u76EE\u7C7B\u522B"),Cl=c(),R=p("h2"),ps=p("a"),Pa=t("2. \u753B\u539F\u578B\u56FE"),gl=c(),A=p("p"),ja=t("\u660E\u786E\u4E86\u9700\u6C42\u540E\uFF0C\u53C2\u8003\u4E86\u51E0\u4E2A\u9879\u76EE\u5E73\u53F0\u7684\u5E03\u5C40\uFF0C\u5728 "),b=p("a"),ka=t("Whimsical"),$a=t(` \u4E0A\u753B\u4E86\u539F\u578B\u56FE\u5982\u4E0B\uFF1A
`),oa(G.$$.fragment),_l=c(),os=p("p"),Sa=t("\u76EE\u524D\u8FD8\u6CA1\u6709\u505A\u4E0A\u9762 Tag \u7684\u5206\u7C7B\u529F\u80FD\uFF0C\u4E4B\u540E\u53EF\u80FD\u4F1A\u505A\u5427"),hl=c(),M=p("h2"),Fs=p("a"),La=t("2. \u521B\u5EFA\u7EC4\u4EF6\u6837\u5F0F CSS"),Al=c(),es=p("p"),Ta=t("\u4E3A\u4E86\u7EDF\u4E00\u98CE\u683C\uFF0C\u6211\u5728\u535A\u5BA2\u73B0\u6709\u6846\u67B6\u91CC\u56DB\u5904\u641C\u5BFB\u53EF\u7528\u7684\u7EC4\u4EF6\u6837\u5F0F\uFF0C\u60F3\u5728\u8FD9\u57FA\u7840\u4E0A\u4FEE\u6539\uFF0C\u7136\u540E\u6211\u627E\u5230\u4E86\u4F5C\u8005 \u85CD \u5728 Tailwind Play \u4E0A\u7684\u53CB\u94FE\u7EC4\u4EF6\uFF0C\u611F\u89C9\u5F88\u9002\u5408\uFF0C\u7136\u540E\u5C31\u76F4\u63A5\u5728\u8FD9\u4E2A Tailwind Play Demo \u4E0A\u8FDB\u884C\u4E86\u6837\u5F0F\u4FEE\u6539\uFF0C\u4E0D\u8FC7\u6B64\u65F6\u586B\u5199\u7684\u6570\u636E\u90FD\u662F\u6B7B\u6570\u636E\uFF0C\u540E\u9762\u518D\u8FDB\u884C\u4FEE\u6539\u3002"),bl=c(),ts=p("p"),Ha=t("\u56E0\u4E3A\u6211\u4E4B\u524D\u6CA1\u6709\u600E\u4E48\u7528\u8FC7 Tailwind\uFF0C\u6240\u4EE5\u662F\u4E00\u8FB9\u5BF9\u7167 Tailwind \u6587\u6863\u4FEE\u6539\u7684\uFF0C\u7136\u540E Tailwind Play \u4E0A\u7684\u4EE3\u7801\u63D0\u793A\u529F\u80FD\u771F\u7684\u5F88\u65B0\u624B\u53CB\u597D\uFF0Chover CSS class \u7684\u65F6\u5019\u4F1A\u663E\u793A\u5177\u4F53\u7684 CSS \u539F\u59CB\u53C2\u6570\uFF0C\u5F88\u76F4\u89C2\u3002"),Bl=c(),B=p("p"),oa(U.$$.fragment),qa=t(`
\u6700\u540E\u6211\u6784\u5EFA\u7684 Demo \u6837\u5F0F\u5982\u4E0B\uFF1A
`),x=p("a"),Oa=t("Tailwind Play"),xl=c(),rs=p("p"),oa(N.$$.fragment),wl=c(),W=p("h2"),cs=p("a"),Ia=t("4. \u7F16\u5199\u7EC4\u4EF6\u4EE3\u7801"),Pl=c(),ys=p("p"),Ra=t("\u6574\u4E2A\u9875\u9762\u7684\u6784\u5EFA\u8DDF Friend \u9875\u9762\u5F88\u50CF\uFF0C\u6211\u5206\u6790\u4E86 Friend \u9875\u9762\u6240\u6D89\u53CA\u5230\u7684\u4EE3\u7801\u548C\u7ED3\u6784\uFF0C\u7136\u540E\u4E00\u70B9\u70B9\u6A21\u4EFF\u6784\u5EFA Project \u9875\u9762\u3002"),jl=c(),X=p("h3"),is=p("a"),Ga=t("\u6570\u636E"),kl=c(),Ds=p("p"),Ma=t("\u9996\u5148\u6839\u636E\u9700\u6C42\u786E\u5B9A\u4F20\u5165\u7684\u6570\u636E\u53CA\u5176\u683C\u5F0F\uFF0C\u4EE5\u4FBF\u540E\u9762\u4F7F\u7528 TypeScript \u7684\u63D0\u793A"),$l=c(),w=p("ul"),Es=p("li"),Ua=t("\u53C2\u8003\uFF1A"),Ws=p("code"),Na=t("/src/lib/config/friends.ts"),Wa=c(),ds=p("li"),Xa=t("\u65B0\u5EFA\uFF1A"),Xs=p("code"),za=t("/src/lib/config/projects.ts"),Sl=c(),zs=new Ts(!1),Vs=c(),Ys=new Ts(!1),Qs=c(),z=p("h3"),vs=p("a"),Va=t("\u7EC4\u4EF6"),Ll=c(),fs=p("p"),Ya=t("\u5C06 CSS \u590D\u5236\u8FDB\u53BB\uFF0C\u5E76\u6CE8\u5165\u6570\u636E"),Tl=c(),P=p("ul"),us=p("li"),Qa=t("\u53C2\u8003\uFF1A"),Zs=p("code"),Za=t("/src/lib/components/extra/friend.svelte"),Ja=c(),ms=p("li"),Ka=t("\u65B0\u5EFA\uFF1A"),Js=p("code"),sn=t("/src/lib/components/extra/project.svelte"),Hl=c(),Ks=new Ts(!1),sl=c(),Cs=p("p"),ln=t("\u6839\u636E\u5177\u4F53\u7684\u9875\u9762\u6548\u679C\u4FEE\u6539\u4E86 Demo \u4E2D\u7684 CSS \u6837\u5F0F"),ql=c(),ll=new Ts(!1),al=c(),V=p("h3"),gs=p("a"),an=t("\u9875\u9762"),Ol=c(),j=p("ul"),_s=p("li"),nn=t("\u53C2\u8003\uFF1A"),nl=p("code"),pn=t("/urara/friends/index.svelte"),on=c(),hs=p("li"),Fn=t("\u65B0\u5EFA\uFF1A"),pl=p("code"),en=t("/urara/projects/index.svelte"),Il=c(),ol=new Ts(!1),Fl=c(),As=p("p"),el=p("strong"),tn=t("Projects \u9875\u9762"),Rl=c(),bs=p("p"),rn=t("\u56E0\u4E3A\u6211\u6CA1\u6709\u7528\u5230\u7011\u5E03\u6D41\u5E03\u5C40\uFF0C\u6240\u4EE5\u5220\u6389\u4E86\u4E00\u4E9B\u7EC4\u4EF6\u548C function"),Gl=c(),tl=new Ts(!1),rl=c(),Y=p("h3"),Bs=p("a"),cn=t("\u54CD\u5E94\u5F0F\u5E03\u5C40"),Ml=c(),g=p("p"),yn=t("\u53C2\u8003 "),k=p("a"),Dn=t("Tailwind \u7684\u54CD\u5E94\u5F0F\u8BBE\u8BA1\u6307\u5357"),En=t(" \uFF0C\u4FEE\u6539\u4E86\u5361\u7247"),cl=p("code"),dn=t("flex"),vn=t(" \u7684\u65B9\u5411\uFF0C\u4EE5\u53CA\u56FE\u7247\u7684\u5BBD\u5EA6\uFF0C\u4EE5\u9002\u5E94\u5C0F\u5C3A\u5BF8\u5C4F\u5E55\u3002"),Ul=c(),Q=p("h2"),xs=p("a"),fn=t("5. \u6D4B\u8BD5"),Nl=c(),u=p("p"),un=t("\u5176\u5B9E\u6709\u9519\u8BEF\u7684\u8BDD "),yl=p("code"),mn=t("pnpm dev"),Cn=t(" \u4EE5\u53CA "),il=p("code"),gn=t("pnpm build"),_n=t(" \u7684\u65F6\u5019\u90FD\u4F1A\u63D0\u9192\uFF0C\u4F46\u6211\u540E\u9762\u53D1\u73B0\u4E5F\u53EF\u4EE5\u7528 "),Dl=p("code"),hn=t("pnpm check"),An=t(" \u6765\u68C0\u67E5\u3002\u8FC7\u7A0B\u4E2D\u6211\u597D\u50CF\u6CA1\u6709\u9047\u5230\u4EC0\u4E48 Bug\u3002"),Wl=c(),Z=p("h2"),ws=p("a"),bn=t("6. Pull request \u5230 Github"),Xl=c(),$=p("p"),Bn=t("\u5148\u770B\u4E86\u4E00\u4E0B Repo \u4F5C\u8005\u5199\u7684 "),S=p("a"),xn=t("contributing docs"),wn=t("\uFF0C\u4E86\u89E3 Contribute \u7684\u89C4\u8303\u3002"),zl=c(),L=p("p"),Pn=t(`\u6309\u7167\u76F8\u5E94\u6B65\u9AA4\u505A\u4E86\u4E4B\u540E\uFF0CGoogle \u4E86\u4E00\u4E0B\u5982\u4F55 pull request\uFF0C\u7167\u7740 FreeCodeCamp \u7684\u8FD9\u7BC7\u8FDB\u884C\u4E86\u64CD\u4F5C\uFF1A
`),T=p("a"),jn=t("\u5982\u4F55\u5728 GitHub \u63D0\u4EA4\u7B2C\u4E00\u4E2A pull request"),kn=t(" \uFF0C\u7136\u540E\u6210\u529F Pull \u4E86\u4E00\u4E2A Request\uFF0C\u4F46\u540E\u9762\u53D1\u73B0\u6709\u7684\u6587\u4EF6\u6CA1\u6709\u6539\uFF0C\u9020\u6210\u4E86 bug\uFF0C\u5C31\u5220\u9664\u4E86\u539F Request \u91CD\u65B0 Pull\u3002"),Vl=c(),J=p("p"),$n=t(`\u6700\u540E\u7EC8\u4E8E\u521B\u5EFA\u6210\u529F\u4E86\u6211\u7684\u7B2C\u4E00\u4E2A Pull request\uFF01
\u94FE\u63A5\uFF1A`),H=p("a"),Sn=t("feat: \u2728 add project page by Sevichecc \xB7 Pull Request #19 \xB7 importantimport/urara \xB7 GitHub"),Yl=c(),K=p("h2"),Ps=p("a"),Ln=t("7. Last but not least"),Ql=c(),js=p("p"),Tn=t("\u5199\u4E00\u7BC7\u8FD9\u6837\u7684\u535A\u6587\uFF0C\u5E76\u53D1\u8868\u5230\u4E92\u8054\u7F51\u3002"),Zl=c(),ks=p("p"),$s=p("span"),Hn=t("\u597D\u5566\u6211\u77E5\u9053\u8FD9\u7BC7\u6587\u7AE0\u6709\u70B9\u81ED\u5C41\uFF0C\u4F46\u4E0B\u6B21\u8FD8\u6562\u2026\u2026"),this.h()},l(s){D=o(s,"P",{});var n=F(D);m=r(n,"\u8FD9\u4E24\u5929\u4E3A\u535A\u5BA2\u5199\u4E86\u4E00\u4E2A Project \u7684\u9875\u9762\u7528\u6765\u653E\u6211\u7684\u4F5C\u54C1\uFF0C\u8FD9\u91CC\u8BB0\u5F55\u4E00\u4E0B\u6211\u662F\u600E\u4E48\u5199\uFF08\u6A21\u4EFF\uFF09\u7684\uFF0C\u6211\u5BF9 Svelte \u8BED\u6CD5\u7684\u4E86\u89E3\u4E0D\u591A\uFF0C\u6CA1\u6709\u7279\u522B\u6DF1\u5165\u5B66\u4E60\uFF0C\u53EA\u662F\u5728\u5B98\u65B9\u770B\u4E86\u4E0B\u6587\u6863\u548C\u7528\u4E86\u4E0B\u4ED6\u4EEC\u7684 "),d=o(n,"A",{href:!0,rel:!0,target:!0});var Xn=F(d);O=r(Xn,"\u4EA4\u4E92\u5F0F\u6559\u7A0B"),Xn.forEach(l),E=r(n," \uFF0C\u7F16\u7801\u7684\u8FC7\u7A0B\u662F\u4E00\u8FB9\u5B66\u4E60\u4E00\u8FB9\u6A21\u4EFF\u6162\u6162\u6478\u7D22\u7684\uFF0C\u867D\u7136\u6700\u7EC8\u6CA1\u6709 merge \u5230 repo \u4E2D\uFF0C\u4F46\u6211\u89C9\u5F97\u6574\u4E2A\u8FC7\u7A0B\u90FD\u86EE\u5174\u594B\u7684\u3002"),n.forEach(l),f=y(s),h=o(s,"P",{});var zn=F(h);ya=r(zn,"\u65E2\u7136\u6709\u4E86\u535A\u5BA2\uFF0C\u90A3\u6211\u80AF\u5B9A\u662F\u8981\u5199\u4E00\u4E0B\u8FD9\u4E2A\u8FC7\u7A0B\u7684\u3002"),zn.forEach(l),dl=y(s),I=o(s,"H2",{id:!0});var Vn=F(I);ls=o(Vn,"A",{href:!0});var Yn=F(ls);ia=r(Yn,"1. \u5206\u6790\u9700\u6C42"),Yn.forEach(l),Vn.forEach(l),vl=y(s),as=o(s,"P",{});var Qn=F(as);Da=r(Qn,`\u6211\u60F3\u8981\u7684\u662F\u4E00\u4E2A\u72EC\u7ACB\u7684 Page\uFF0C\u800C\u4E0D\u662F\u4E00\u4E2A Post \u9875\u9762\uFF0C\u6700\u540E\u628A\u5B83\u653E\u5728\u5BFC\u822A\u680F\u91CC\u9762\u3002
\u60F3\u8981\u6709\u4EE5\u4E0B\u8FD9\u51E0\u4E2A\u529F\u80FD\uFF1A`),Qn.forEach(l),fl=y(s),C=o(s,"UL",{});var Ss=F(C);qs=o(Ss,"LI",{});var Zn=F(qs);Ea=r(Zn,"\u6280\u672F\u6808\u5206\u7C7B"),Zn.forEach(l),da=y(Ss),Os=o(Ss,"LI",{});var Jn=F(Os);va=r(Jn,"\u9879\u76EE\u7C7B\u522B\u7B5B\u9009"),Jn.forEach(l),fa=y(Ss),Is=o(Ss,"LI",{});var Kn=F(Is);ua=r(Kn,"\u9879\u76EE\u5C55\u793A"),Kn.forEach(l),Ss.forEach(l),ul=y(s),ns=o(s,"P",{});var sp=F(ns);ma=r(sp,"\u4E3B\u8981\u6709\u8FD9\u4E9B\u4FE1\u606F\u7684\u5C55\u793A\uFF1A"),sp.forEach(l),ml=y(s),v=o(s,"UL",{});var _=F(v);Rs=o(_,"LI",{});var lp=F(Rs);Ca=r(lp,"\u9879\u76EE\u6807\u9898"),lp.forEach(l),ga=y(_),Gs=o(_,"LI",{});var ap=F(Gs);_a=r(ap,"\u9879\u76EE\u56FE\u7247"),ap.forEach(l),ha=y(_),Ms=o(_,"LI",{});var np=F(Ms);Aa=r(np,"\u9879\u76EE\u63CF\u8FF0"),np.forEach(l),ba=y(_),Us=o(_,"LI",{});var pp=F(Us);Ba=r(pp,"\u6280\u672F\u6808"),pp.forEach(l),xa=y(_),Ns=o(_,"LI",{});var op=F(Ns);wa=r(op,"\u9879\u76EE\u7C7B\u522B"),op.forEach(l),_.forEach(l),Cl=y(s),R=o(s,"H2",{id:!0});var Fp=F(R);ps=o(Fp,"A",{href:!0});var ep=F(ps);Pa=r(ep,"2. \u753B\u539F\u578B\u56FE"),ep.forEach(l),Fp.forEach(l),gl=y(s),A=o(s,"P",{});var El=F(A);ja=r(El,"\u660E\u786E\u4E86\u9700\u6C42\u540E\uFF0C\u53C2\u8003\u4E86\u51E0\u4E2A\u9879\u76EE\u5E73\u53F0\u7684\u5E03\u5C40\uFF0C\u5728 "),b=o(El,"A",{href:!0,rel:!0,target:!0});var tp=F(b);ka=r(tp,"Whimsical"),tp.forEach(l),$a=r(El,` \u4E0A\u753B\u4E86\u539F\u578B\u56FE\u5982\u4E0B\uFF1A
`),Fa(G.$$.fragment,El),El.forEach(l),_l=y(s),os=o(s,"P",{});var rp=F(os);Sa=r(rp,"\u76EE\u524D\u8FD8\u6CA1\u6709\u505A\u4E0A\u9762 Tag \u7684\u5206\u7C7B\u529F\u80FD\uFF0C\u4E4B\u540E\u53EF\u80FD\u4F1A\u505A\u5427"),rp.forEach(l),hl=y(s),M=o(s,"H2",{id:!0});var cp=F(M);Fs=o(cp,"A",{href:!0});var yp=F(Fs);La=r(yp,"2. \u521B\u5EFA\u7EC4\u4EF6\u6837\u5F0F CSS"),yp.forEach(l),cp.forEach(l),Al=y(s),es=o(s,"P",{});var ip=F(es);Ta=r(ip,"\u4E3A\u4E86\u7EDF\u4E00\u98CE\u683C\uFF0C\u6211\u5728\u535A\u5BA2\u73B0\u6709\u6846\u67B6\u91CC\u56DB\u5904\u641C\u5BFB\u53EF\u7528\u7684\u7EC4\u4EF6\u6837\u5F0F\uFF0C\u60F3\u5728\u8FD9\u57FA\u7840\u4E0A\u4FEE\u6539\uFF0C\u7136\u540E\u6211\u627E\u5230\u4E86\u4F5C\u8005 \u85CD \u5728 Tailwind Play \u4E0A\u7684\u53CB\u94FE\u7EC4\u4EF6\uFF0C\u611F\u89C9\u5F88\u9002\u5408\uFF0C\u7136\u540E\u5C31\u76F4\u63A5\u5728\u8FD9\u4E2A Tailwind Play Demo \u4E0A\u8FDB\u884C\u4E86\u6837\u5F0F\u4FEE\u6539\uFF0C\u4E0D\u8FC7\u6B64\u65F6\u586B\u5199\u7684\u6570\u636E\u90FD\u662F\u6B7B\u6570\u636E\uFF0C\u540E\u9762\u518D\u8FDB\u884C\u4FEE\u6539\u3002"),ip.forEach(l),bl=y(s),ts=o(s,"P",{});var Dp=F(ts);Ha=r(Dp,"\u56E0\u4E3A\u6211\u4E4B\u524D\u6CA1\u6709\u600E\u4E48\u7528\u8FC7 Tailwind\uFF0C\u6240\u4EE5\u662F\u4E00\u8FB9\u5BF9\u7167 Tailwind \u6587\u6863\u4FEE\u6539\u7684\uFF0C\u7136\u540E Tailwind Play \u4E0A\u7684\u4EE3\u7801\u63D0\u793A\u529F\u80FD\u771F\u7684\u5F88\u65B0\u624B\u53CB\u597D\uFF0Chover CSS class \u7684\u65F6\u5019\u4F1A\u663E\u793A\u5177\u4F53\u7684 CSS \u539F\u59CB\u53C2\u6570\uFF0C\u5F88\u76F4\u89C2\u3002"),Dp.forEach(l),Bl=y(s),B=o(s,"P",{});var Kl=F(B);Fa(U.$$.fragment,Kl),qa=r(Kl,`
\u6700\u540E\u6211\u6784\u5EFA\u7684 Demo \u6837\u5F0F\u5982\u4E0B\uFF1A
`),x=o(Kl,"A",{href:!0,rel:!0,target:!0});var Ep=F(x);Oa=r(Ep,"Tailwind Play"),Ep.forEach(l),Kl.forEach(l),xl=y(s),rs=o(s,"P",{});var dp=F(rs);Fa(N.$$.fragment,dp),dp.forEach(l),wl=y(s),W=o(s,"H2",{id:!0});var vp=F(W);cs=o(vp,"A",{href:!0});var fp=F(cs);Ia=r(fp,"4. \u7F16\u5199\u7EC4\u4EF6\u4EE3\u7801"),fp.forEach(l),vp.forEach(l),Pl=y(s),ys=o(s,"P",{});var up=F(ys);Ra=r(up,"\u6574\u4E2A\u9875\u9762\u7684\u6784\u5EFA\u8DDF Friend \u9875\u9762\u5F88\u50CF\uFF0C\u6211\u5206\u6790\u4E86 Friend \u9875\u9762\u6240\u6D89\u53CA\u5230\u7684\u4EE3\u7801\u548C\u7ED3\u6784\uFF0C\u7136\u540E\u4E00\u70B9\u70B9\u6A21\u4EFF\u6784\u5EFA Project \u9875\u9762\u3002"),up.forEach(l),jl=y(s),X=o(s,"H3",{id:!0});var mp=F(X);is=o(mp,"A",{href:!0});var Cp=F(is);Ga=r(Cp,"\u6570\u636E"),Cp.forEach(l),mp.forEach(l),kl=y(s),Ds=o(s,"P",{});var gp=F(Ds);Ma=r(gp,"\u9996\u5148\u6839\u636E\u9700\u6C42\u786E\u5B9A\u4F20\u5165\u7684\u6570\u636E\u53CA\u5176\u683C\u5F0F\uFF0C\u4EE5\u4FBF\u540E\u9762\u4F7F\u7528 TypeScript \u7684\u63D0\u793A"),gp.forEach(l),$l=y(s),w=o(s,"UL",{});var sa=F(w);Es=o(sa,"LI",{});var qn=F(Es);Ua=r(qn,"\u53C2\u8003\uFF1A"),Ws=o(qn,"CODE",{});var _p=F(Ws);Na=r(_p,"/src/lib/config/friends.ts"),_p.forEach(l),qn.forEach(l),Wa=y(sa),ds=o(sa,"LI",{});var On=F(ds);Xa=r(On,"\u65B0\u5EFA\uFF1A"),Xs=o(On,"CODE",{});var hp=F(Xs);za=r(hp,"/src/lib/config/projects.ts"),hp.forEach(l),On.forEach(l),sa.forEach(l),Sl=y(s),zs=Hs(s,!1),Vs=y(s),Ys=Hs(s,!1),Qs=y(s),z=o(s,"H3",{id:!0});var Ap=F(z);vs=o(Ap,"A",{href:!0});var bp=F(vs);Va=r(bp,"\u7EC4\u4EF6"),bp.forEach(l),Ap.forEach(l),Ll=y(s),fs=o(s,"P",{});var Bp=F(fs);Ya=r(Bp,"\u5C06 CSS \u590D\u5236\u8FDB\u53BB\uFF0C\u5E76\u6CE8\u5165\u6570\u636E"),Bp.forEach(l),Tl=y(s),P=o(s,"UL",{});var la=F(P);us=o(la,"LI",{});var In=F(us);Qa=r(In,"\u53C2\u8003\uFF1A"),Zs=o(In,"CODE",{});var xp=F(Zs);Za=r(xp,"/src/lib/components/extra/friend.svelte"),xp.forEach(l),In.forEach(l),Ja=y(la),ms=o(la,"LI",{});var Rn=F(ms);Ka=r(Rn,"\u65B0\u5EFA\uFF1A"),Js=o(Rn,"CODE",{});var wp=F(Js);sn=r(wp,"/src/lib/components/extra/project.svelte"),wp.forEach(l),Rn.forEach(l),la.forEach(l),Hl=y(s),Ks=Hs(s,!1),sl=y(s),Cs=o(s,"P",{});var Pp=F(Cs);ln=r(Pp,"\u6839\u636E\u5177\u4F53\u7684\u9875\u9762\u6548\u679C\u4FEE\u6539\u4E86 Demo \u4E2D\u7684 CSS \u6837\u5F0F"),Pp.forEach(l),ql=y(s),ll=Hs(s,!1),al=y(s),V=o(s,"H3",{id:!0});var jp=F(V);gs=o(jp,"A",{href:!0});var kp=F(gs);an=r(kp,"\u9875\u9762"),kp.forEach(l),jp.forEach(l),Ol=y(s),j=o(s,"UL",{});var aa=F(j);_s=o(aa,"LI",{});var Gn=F(_s);nn=r(Gn,"\u53C2\u8003\uFF1A"),nl=o(Gn,"CODE",{});var $p=F(nl);pn=r($p,"/urara/friends/index.svelte"),$p.forEach(l),Gn.forEach(l),on=y(aa),hs=o(aa,"LI",{});var Mn=F(hs);Fn=r(Mn,"\u65B0\u5EFA\uFF1A"),pl=o(Mn,"CODE",{});var Sp=F(pl);en=r(Sp,"/urara/projects/index.svelte"),Sp.forEach(l),Mn.forEach(l),aa.forEach(l),Il=y(s),ol=Hs(s,!1),Fl=y(s),As=o(s,"P",{});var Lp=F(As);el=o(Lp,"STRONG",{});var Tp=F(el);tn=r(Tp,"Projects \u9875\u9762"),Tp.forEach(l),Lp.forEach(l),Rl=y(s),bs=o(s,"P",{});var Hp=F(bs);rn=r(Hp,"\u56E0\u4E3A\u6211\u6CA1\u6709\u7528\u5230\u7011\u5E03\u6D41\u5E03\u5C40\uFF0C\u6240\u4EE5\u5220\u6389\u4E86\u4E00\u4E9B\u7EC4\u4EF6\u548C function"),Hp.forEach(l),Gl=y(s),tl=Hs(s,!1),rl=y(s),Y=o(s,"H3",{id:!0});var qp=F(Y);Bs=o(qp,"A",{href:!0});var Op=F(Bs);cn=r(Op,"\u54CD\u5E94\u5F0F\u5E03\u5C40"),Op.forEach(l),qp.forEach(l),Ml=y(s),g=o(s,"P",{});var Ls=F(g);yn=r(Ls,"\u53C2\u8003 "),k=o(Ls,"A",{href:!0,rel:!0,target:!0});var Ip=F(k);Dn=r(Ip,"Tailwind \u7684\u54CD\u5E94\u5F0F\u8BBE\u8BA1\u6307\u5357"),Ip.forEach(l),En=r(Ls," \uFF0C\u4FEE\u6539\u4E86\u5361\u7247"),cl=o(Ls,"CODE",{});var Rp=F(cl);dn=r(Rp,"flex"),Rp.forEach(l),vn=r(Ls," \u7684\u65B9\u5411\uFF0C\u4EE5\u53CA\u56FE\u7247\u7684\u5BBD\u5EA6\uFF0C\u4EE5\u9002\u5E94\u5C0F\u5C3A\u5BF8\u5C4F\u5E55\u3002"),Ls.forEach(l),Ul=y(s),Q=o(s,"H2",{id:!0});var Gp=F(Q);xs=o(Gp,"A",{href:!0});var Mp=F(xs);fn=r(Mp,"5. \u6D4B\u8BD5"),Mp.forEach(l),Gp.forEach(l),Nl=y(s),u=o(s,"P",{});var q=F(u);un=r(q,"\u5176\u5B9E\u6709\u9519\u8BEF\u7684\u8BDD "),yl=o(q,"CODE",{});var Up=F(yl);mn=r(Up,"pnpm dev"),Up.forEach(l),Cn=r(q," \u4EE5\u53CA "),il=o(q,"CODE",{});var Np=F(il);gn=r(Np,"pnpm build"),Np.forEach(l),_n=r(q," \u7684\u65F6\u5019\u90FD\u4F1A\u63D0\u9192\uFF0C\u4F46\u6211\u540E\u9762\u53D1\u73B0\u4E5F\u53EF\u4EE5\u7528 "),Dl=o(q,"CODE",{});var Wp=F(Dl);hn=r(Wp,"pnpm check"),Wp.forEach(l),An=r(q," \u6765\u68C0\u67E5\u3002\u8FC7\u7A0B\u4E2D\u6211\u597D\u50CF\u6CA1\u6709\u9047\u5230\u4EC0\u4E48 Bug\u3002"),q.forEach(l),Wl=y(s),Z=o(s,"H2",{id:!0});var Xp=F(Z);ws=o(Xp,"A",{href:!0});var zp=F(ws);bn=r(zp,"6. Pull request \u5230 Github"),zp.forEach(l),Xp.forEach(l),Xl=y(s),$=o(s,"P",{});var na=F($);Bn=r(na,"\u5148\u770B\u4E86\u4E00\u4E0B Repo \u4F5C\u8005\u5199\u7684 "),S=o(na,"A",{href:!0,rel:!0,target:!0});var Vp=F(S);xn=r(Vp,"contributing docs"),Vp.forEach(l),wn=r(na,"\uFF0C\u4E86\u89E3 Contribute \u7684\u89C4\u8303\u3002"),na.forEach(l),zl=y(s),L=o(s,"P",{});var pa=F(L);Pn=r(pa,`\u6309\u7167\u76F8\u5E94\u6B65\u9AA4\u505A\u4E86\u4E4B\u540E\uFF0CGoogle \u4E86\u4E00\u4E0B\u5982\u4F55 pull request\uFF0C\u7167\u7740 FreeCodeCamp \u7684\u8FD9\u7BC7\u8FDB\u884C\u4E86\u64CD\u4F5C\uFF1A
`),T=o(pa,"A",{href:!0,rel:!0,target:!0});var Yp=F(T);jn=r(Yp,"\u5982\u4F55\u5728 GitHub \u63D0\u4EA4\u7B2C\u4E00\u4E2A pull request"),Yp.forEach(l),kn=r(pa," \uFF0C\u7136\u540E\u6210\u529F Pull \u4E86\u4E00\u4E2A Request\uFF0C\u4F46\u540E\u9762\u53D1\u73B0\u6709\u7684\u6587\u4EF6\u6CA1\u6709\u6539\uFF0C\u9020\u6210\u4E86 bug\uFF0C\u5C31\u5220\u9664\u4E86\u539F Request \u91CD\u65B0 Pull\u3002"),pa.forEach(l),Vl=y(s),J=o(s,"P",{});var Un=F(J);$n=r(Un,`\u6700\u540E\u7EC8\u4E8E\u521B\u5EFA\u6210\u529F\u4E86\u6211\u7684\u7B2C\u4E00\u4E2A Pull request\uFF01
\u94FE\u63A5\uFF1A`),H=o(Un,"A",{href:!0,rel:!0,target:!0});var Qp=F(H);Sn=r(Qp,"feat: \u2728 add project page by Sevichecc \xB7 Pull Request #19 \xB7 importantimport/urara \xB7 GitHub"),Qp.forEach(l),Un.forEach(l),Yl=y(s),K=o(s,"H2",{id:!0});var Zp=F(K);Ps=o(Zp,"A",{href:!0});var Jp=F(Ps);Ln=r(Jp,"7. Last but not least"),Jp.forEach(l),Zp.forEach(l),Ql=y(s),js=o(s,"P",{});var Kp=F(js);Tn=r(Kp,"\u5199\u4E00\u7BC7\u8FD9\u6837\u7684\u535A\u6587\uFF0C\u5E76\u53D1\u8868\u5230\u4E92\u8054\u7F51\u3002"),Kp.forEach(l),Zl=y(s),ks=o(s,"P",{});var so=F(ks);$s=o(so,"SPAN",{class:!0});var lo=F($s);Hn=r(lo,"\u597D\u5566\u6211\u77E5\u9053\u8FD9\u7BC7\u6587\u7AE0\u6709\u70B9\u81ED\u5C41\uFF0C\u4F46\u4E0B\u6B21\u8FD8\u6562\u2026\u2026"),lo.forEach(l),so.forEach(l),this.h()},h(){i(d,"href","https://www.sveltejs.cn/tutorial/basics"),i(d,"rel","nofollow noopener noreferrer external"),i(d,"target","_blank"),i(ls,"href","#1-\u5206\u6790\u9700\u6C42"),i(I,"id","1-\u5206\u6790\u9700\u6C42"),i(ps,"href","#2-\u753B\u539F\u578B\u56FE"),i(R,"id","2-\u753B\u539F\u578B\u56FE"),i(b,"href","https://whimsical.com/"),i(b,"rel","nofollow noopener noreferrer external"),i(b,"target","_blank"),i(Fs,"href","#2-\u521B\u5EFA\u7EC4\u4EF6\u6837\u5F0F-css"),i(M,"id","2-\u521B\u5EFA\u7EC4\u4EF6\u6837\u5F0F-css"),i(x,"href","https://play.tailwindcss.com/uQwYojgpuk?layout=horizontal"),i(x,"rel","nofollow noopener noreferrer external"),i(x,"target","_blank"),i(cs,"href","#4-\u7F16\u5199\u7EC4\u4EF6\u4EE3\u7801"),i(W,"id","4-\u7F16\u5199\u7EC4\u4EF6\u4EE3\u7801"),i(is,"href","#\u6570\u636E"),i(X,"id","\u6570\u636E"),zs.a=Vs,Ys.a=Qs,i(vs,"href","#\u7EC4\u4EF6"),i(z,"id","\u7EC4\u4EF6"),Ks.a=sl,ll.a=al,i(gs,"href","#\u9875\u9762"),i(V,"id","\u9875\u9762"),ol.a=Fl,tl.a=rl,i(Bs,"href","#\u54CD\u5E94\u5F0F\u5E03\u5C40"),i(Y,"id","\u54CD\u5E94\u5F0F\u5E03\u5C40"),i(k,"href","https://tailwindcss.com/docs/responsive-design"),i(k,"rel","nofollow noopener noreferrer external"),i(k,"target","_blank"),i(xs,"href","#5-\u6D4B\u8BD5"),i(Q,"id","5-\u6D4B\u8BD5"),i(ws,"href","#6-pull-request-\u5230-github"),i(Z,"id","6-pull-request-\u5230-github"),i(S,"href","https://github.com/importantimport/urara/blob/main/.github/CONTRIBUTING.md"),i(S,"rel","nofollow noopener noreferrer external"),i(S,"target","_blank"),i(T,"href","https://chinese.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github/"),i(T,"rel","nofollow noopener noreferrer external"),i(T,"target","_blank"),i(H,"href","https://github.com/importantimport/urara/pull/19"),i(H,"rel","nofollow noopener noreferrer external"),i(H,"target","_blank"),i(Ps,"href","#7-last-but-not-least"),i(K,"id","7-last-but-not-least"),i($s,"class","spoiler")},m(s,n){e(s,D,n),a(D,m),a(D,d),a(d,O),a(D,E),e(s,f,n),e(s,h,n),a(h,ya),e(s,dl,n),e(s,I,n),a(I,ls),a(ls,ia),e(s,vl,n),e(s,as,n),a(as,Da),e(s,fl,n),e(s,C,n),a(C,qs),a(qs,Ea),a(C,da),a(C,Os),a(Os,va),a(C,fa),a(C,Is),a(Is,ua),e(s,ul,n),e(s,ns,n),a(ns,ma),e(s,ml,n),e(s,v,n),a(v,Rs),a(Rs,Ca),a(v,ga),a(v,Gs),a(Gs,_a),a(v,ha),a(v,Ms),a(Ms,Aa),a(v,ba),a(v,Us),a(Us,Ba),a(v,xa),a(v,Ns),a(Ns,wa),e(s,Cl,n),e(s,R,n),a(R,ps),a(ps,Pa),e(s,gl,n),e(s,A,n),a(A,ja),a(A,b),a(b,ka),a(A,$a),ea(G,A,null),e(s,_l,n),e(s,os,n),a(os,Sa),e(s,hl,n),e(s,M,n),a(M,Fs),a(Fs,La),e(s,Al,n),e(s,es,n),a(es,Ta),e(s,bl,n),e(s,ts,n),a(ts,Ha),e(s,Bl,n),e(s,B,n),ea(U,B,null),a(B,qa),a(B,x),a(x,Oa),e(s,xl,n),e(s,rs,n),ea(N,rs,null),e(s,wl,n),e(s,W,n),a(W,cs),a(cs,Ia),e(s,Pl,n),e(s,ys,n),a(ys,Ra),e(s,jl,n),e(s,X,n),a(X,is),a(is,Ga),e(s,kl,n),e(s,Ds,n),a(Ds,Ma),e(s,$l,n),e(s,w,n),a(w,Es),a(Es,Ua),a(Es,Ws),a(Ws,Na),a(w,Wa),a(w,ds),a(ds,Xa),a(ds,Xs),a(Xs,za),e(s,Sl,n),zs.m(oo,s,n),e(s,Vs,n),Ys.m(Fo,s,n),e(s,Qs,n),e(s,z,n),a(z,vs),a(vs,Va),e(s,Ll,n),e(s,fs,n),a(fs,Ya),e(s,Tl,n),e(s,P,n),a(P,us),a(us,Qa),a(us,Zs),a(Zs,Za),a(P,Ja),a(P,ms),a(ms,Ka),a(ms,Js),a(Js,sn),e(s,Hl,n),Ks.m(eo,s,n),e(s,sl,n),e(s,Cs,n),a(Cs,ln),e(s,ql,n),ll.m(to,s,n),e(s,al,n),e(s,V,n),a(V,gs),a(gs,an),e(s,Ol,n),e(s,j,n),a(j,_s),a(_s,nn),a(_s,nl),a(nl,pn),a(j,on),a(j,hs),a(hs,Fn),a(hs,pl),a(pl,en),e(s,Il,n),ol.m(ro,s,n),e(s,Fl,n),e(s,As,n),a(As,el),a(el,tn),e(s,Rl,n),e(s,bs,n),a(bs,rn),e(s,Gl,n),tl.m(co,s,n),e(s,rl,n),e(s,Y,n),a(Y,Bs),a(Bs,cn),e(s,Ml,n),e(s,g,n),a(g,yn),a(g,k),a(k,Dn),a(g,En),a(g,cl),a(cl,dn),a(g,vn),e(s,Ul,n),e(s,Q,n),a(Q,xs),a(xs,fn),e(s,Nl,n),e(s,u,n),a(u,un),a(u,yl),a(yl,mn),a(u,Cn),a(u,il),a(il,gn),a(u,_n),a(u,Dl),a(Dl,hn),a(u,An),e(s,Wl,n),e(s,Z,n),a(Z,ws),a(ws,bn),e(s,Xl,n),e(s,$,n),a($,Bn),a($,S),a(S,xn),a($,wn),e(s,zl,n),e(s,L,n),a(L,Pn),a(L,T),a(T,jn),a(L,kn),e(s,Vl,n),e(s,J,n),a(J,$n),a(J,H),a(H,Sn),e(s,Yl,n),e(s,K,n),a(K,Ps),a(Ps,Ln),e(s,Ql,n),e(s,js,n),a(js,Tn),e(s,Zl,n),e(s,ks,n),a(ks,$s),a($s,Hn),Jl=!0},p:vo,i(s){Jl||(ta(G.$$.fragment,s),ta(U.$$.fragment,s),ta(N.$$.fragment,s),Jl=!0)},o(s){ra(G.$$.fragment,s),ra(U.$$.fragment,s),ra(N.$$.fragment,s),Jl=!1},d(s){s&&l(D),s&&l(f),s&&l(h),s&&l(dl),s&&l(I),s&&l(vl),s&&l(as),s&&l(fl),s&&l(C),s&&l(ul),s&&l(ns),s&&l(ml),s&&l(v),s&&l(Cl),s&&l(R),s&&l(gl),s&&l(A),ca(G),s&&l(_l),s&&l(os),s&&l(hl),s&&l(M),s&&l(Al),s&&l(es),s&&l(bl),s&&l(ts),s&&l(Bl),s&&l(B),ca(U),s&&l(xl),s&&l(rs),ca(N),s&&l(wl),s&&l(W),s&&l(Pl),s&&l(ys),s&&l(jl),s&&l(X),s&&l(kl),s&&l(Ds),s&&l($l),s&&l(w),s&&l(Sl),s&&zs.d(),s&&l(Vs),s&&Ys.d(),s&&l(Qs),s&&l(z),s&&l(Ll),s&&l(fs),s&&l(Tl),s&&l(P),s&&l(Hl),s&&Ks.d(),s&&l(sl),s&&l(Cs),s&&l(ql),s&&ll.d(),s&&l(al),s&&l(V),s&&l(Ol),s&&l(j),s&&l(Il),s&&ol.d(),s&&l(Fl),s&&l(As),s&&l(Rl),s&&l(bs),s&&l(Gl),s&&tl.d(),s&&l(rl),s&&l(Y),s&&l(Ml),s&&l(g),s&&l(Ul),s&&l(Q),s&&l(Nl),s&&l(u),s&&l(Wl),s&&l(Z),s&&l(Xl),s&&l($),s&&l(zl),s&&l(L),s&&l(Vl),s&&l(J),s&&l(Yl),s&&l(K),s&&l(Ql),s&&l(js),s&&l(Zl),s&&l(ks)}}}function mo(ss){let D,m;const d=[ss[0],po];let O={$$slots:{default:[uo]},$$scope:{ctx:ss}};for(let E=0;E<d.length;E+=1)O=Wn(O,d[E]);return D=new fo({props:O}),{c(){oa(D.$$.fragment)},l(E){Fa(D.$$.fragment,E)},m(E,f){ea(D,E,f),m=!0},p(E,[f]){const h=f&1?Eo(d,[f&1&&ao(E[0]),f&0&&ao(po)]):{};f&2&&(h.$$scope={dirty:f,ctx:E}),D.$set(h)},i(E){m||(ta(D.$$.fragment,E),m=!0)},o(E){ra(D.$$.fragment,E),m=!1},d(E){ca(D,E)}}}const po={title:"\u4E3A\u535A\u5BA2\u5199\u4E00\u4E2AProject showcase \u9875\u9762",created:"2022-05-26T00:00:00.000Z",summary:"\u7B2C\u4E00\u6B21Pull Request\u7684\u7ECF\u5386",tags:["Svelte","Open Source"],slug:"/2022-05-26-write-a-page-template.md",path:"/2022-05-26-write-a-page-template",toc:[{depth:2,title:"1. \u5206\u6790\u9700\u6C42",slug:"1-\u5206\u6790\u9700\u6C42"},{depth:2,title:"2. \u753B\u539F\u578B\u56FE",slug:"2-\u753B\u539F\u578B\u56FE"},{depth:2,title:"2. \u521B\u5EFA\u7EC4\u4EF6\u6837\u5F0F CSS",slug:"2-\u521B\u5EFA\u7EC4\u4EF6\u6837\u5F0F-css"},{depth:2,title:"4. \u7F16\u5199\u7EC4\u4EF6\u4EE3\u7801",slug:"4-\u7F16\u5199\u7EC4\u4EF6\u4EE3\u7801"},{depth:3,title:"\u6570\u636E",slug:"\u6570\u636E"},{depth:3,title:"\u7EC4\u4EF6",slug:"\u7EC4\u4EF6"},{depth:3,title:"\u9875\u9762",slug:"\u9875\u9762"},{depth:3,title:"\u54CD\u5E94\u5F0F\u5E03\u5C40",slug:"\u54CD\u5E94\u5F0F\u5E03\u5C40"},{depth:2,title:"5. \u6D4B\u8BD5",slug:"5-\u6D4B\u8BD5"},{depth:2,title:"6. Pull request \u5230 Github",slug:"6-pull-request-\u5230-github"},{depth:2,title:"7. Last but not least",slug:"7-last-but-not-least"}],updated:"2022-08-01T11:36:42.589Z"};function Co(ss,D,m){return ss.$$set=d=>{m(0,D=Wn(Wn({},D),no(d)))},D=no(D),[D]}class ko extends yo{constructor(D){super(),io(this,D,Co,mo,Do,{})}}export{ko as default,po as metadata};