NoWhyLogs 다운로드 - NoWhyLogs 소스 코드 다운로드

NoWhyLogs

기타 카테고리

1.0.0

다운로드

왜 게임 - Devlog

AKA NowHylogs

? /juditkaramazov

? 포트폴리오

☕ 블로그

? 시작하기

내가 사랑에 빠졌을 때를 기억하십시오 ... Astro ? 글쎄, 우리는 다시 간다! TypeScript 의 안전성 및 개발자 친화적 인 기능, React 의 동적 상호 작용 및 재사용 가능한 구성 요소 및 ASTRO .

우연히 특징적인 유연성과 깔끔한 결과를 시작하고 싶다면 Astro가 경기에 합류하면 그러한 목표를 달성하는 것이 더 쉬울 수 없다는 것을 상기시켜주십시오. 지금, 그리고 이것이 Speed ™ 순간에 필요한 또 다른 중 하나 인 경우 다음 단계를 고려하십시오.

터미널을 열고 다음 명령을 실행하십시오.

npm create astro@latest

스타터 템플릿도 사용할 수 있습니다.

 # create a new project with an official example
npm create astro@latest -- --template < example-name >

# create a new project based on a GitHub repository’s main branch
npm create astro@latest -- --template < github-username > / < github-repo >

마지막으로:

npm run dev

쉽지? Astro의 문서를 확인하거나 Discord 서버로 이동하십시오. 동료 우주 비행사를 즐기십시오! ? ‍

팁

당신이 무엇을하기로 결정하든, 프로젝트 및 플랫폼 자체와 상호 작용하면서 행동 강령을 존중해야합니다. 시간과 인내심에 감사드립니다!

? 소개

며칠 전, 나는 첫 번째 No Games -Devlog Entry를 시작했습니다.

8 월 의이 날의 마지막 열기 시간이 바르셀로나에서 멀어지면서, 우리는이 사이트의 본질과 건축을 설명하는 이상하고 거친 디지털 단어로 화면을 식히고 있습니다. 맹렬한 인간, 본질적으로 자발적.

정직하게 말해서, 내 생각을 말로 표현하는 데 꽤 오랜 시간이 걸렸습니다. 그리고 마침내 다른 무언가와 같은 내 오도를 유효한 표현으로 사용될 수있는 사이트를 만들 수있는 용기와 정신적 힘을 모으는 데 훨씬 더 오래 걸렸습니다. "웹 사이트 개발자"보다 - 내 작품이 더 이상 관련 국경이없는 "소프트웨어"개념의 해안에 도달하고 있음을 깨달았을 때 사용을 중단 한 레이블.

Red Hot Chili Pepper의 상징적 인 도로를 기억하십니까? ( "농담 이니, judit? 그것은 걸작입니다. 물론 우리는 기억합니다!" 구체적인 이유, 그리고 수많은 최고점과 최저점 후에, 내가 다시 조용히 나 자신에게 물었다. 태양을위한 그 거울 과 비슷합니다. 영혼을위한 거울.

아마도 아시다시피, 나는 이미 내 생각, 분석 및 넌센스를 공유 할 수있는 개인 블로그를 이미 소유하고 있습니다. 그러나 나는 여전히 앉을 수있는 모닥불에서 일하지 않았고, video game development 의 본질을 소화하고, "일기"또는 "Dev 블로그"형태로 여행 자체를 나타냅니다. 그렇기 때문에 Nowhylogs ( personal devlog containing relevant information on my progress as an indie developer )가 존재한다고 생각합니다. 안개가 너무 조밀 해지면 우리 모두는 우리 자신의 등대를 찾아야합니다.

? 특징

등대 점수

등대에 대해 말하면! 이전 점수는 사랑 스럽지 않습니까?

간단하고 접근하기 쉬운 반면, 나는 No Why Games - Devlog , 항상 performance , accessibility 및 best practices 먼저 배치합니다.

"어떻게 그렇게 했는가, Judit?, Judit ?, 절대 아무도 물었다. 몇 가지 비밀과 특징을 나누어서 무엇이 되었는지 알 수 있도록?

접근성

의심 할 여지없이, Accessibility 개념과 관련이있는 것은 매일 배울 수있는 가능성, 의심 및 새로운 것들의 거대한 바다로 해석됩니다. 그러나이 Devlog가 as accessible as possible 할 수 있는지 확인하고 싶었습니다. 즉, 다음을 사용하여이를 탐색 할 수 있습니다.

Keyboard
VoiceOver ? 슬

팁

예를 들어, iOS 17 이상을 실행하는 iPhone에서 음성 오버를 켤 수 있습니다. 설정 -> 접근성 -> 음성에서 수행 할 수 있습니다.

? 동적 OG 이미지 생성

"소셜 이미지"라고도 알려진 OG 이미지 (이것은 트위터, WhatsApp, Discord 등과 같은 플랫폼에서 웹 사이트 URL을 공유 할 때마다 표시되는 이미지입니다)는 소셜 미디어 참여에 필수적인 역할을 수행하지만 우리는 돈입니다. t 보통 하나씩 준비 할 시간이 있습니다 ... 맞습니까? 오른쪽...? ( 아마도 나는이 문제에 직면 한 유일한 사람 일 것입니다 ... )

기본 OG 이미지를 폴백 (이 경우 public/nowhylogs-og.jpg )으로 사용할 수는 있지만 게시물이 없을 때 게시물 후 표시되는 동일한 이미지의 정적 사용 (및 과도한 사용)을 피하고 싶었습니다. Ogimage는 프론트 마터에 지정됩니다.

hygames og 이미지

Satori의 라이브러리 덕분에 HTML 및 CSS를 SVG로 변환 할 수있는 Satori의 라이브러리 덕분에 (아직 지원되지 않는 RTL 언어와 같은 제한 사항이 있지만 시간을주십시오!) 게시물에 대한 Build Time에서 동적 OG 이미지를 생성 할 수있었습니다. 포함하지 마십시오 . 그런 다음 아름다운 이미지가 표시됩니다.

Post title .
Author name .
Site title .

비 라틴 문자를 사용해야하는 경우 src/utils/loadGoogleFont.ts 에 선호하는 글꼴을 추가하십시오.

 async function loadGoogleFonts (
  text : string
) : Promise <
  Array < { name : string ; data : ArrayBuffer ; weight : number ; style : string } >
> {
  const fontsConfig = [
    {
      name : "IBM Plex Mono" ,
      font : "IBM+Plex+Mono" ,
      weight : 400 ,
      style : "normal" ,
    } ,
    {
      name : "IBM Plex Mono" ,
      font : "IBM+Plex+Mono:wght@700" ,
      weight : 700 ,
      style : "bold" ,
    } ,
  ]
// Rest of the code.

? 퍼지 검색

검색 도구가없는 웹 사이트에서 특정 것을 찾으려고 여러 번 기억하십니까? 당신이 그것에 대해기도하기 위해기도 한 신들은 무엇을 했습니까? 더 이상 말하지 마십시오! 그것이 요즘까지도 나에게 일어나는 일이기 때문에, 나는 가벼운 퍼지 검색 라이브러리 인 Fuse.js가 권한을 부여받은 글로벌 검색을 다시 포함 시켰습니다.

자세한 내용은 언제든지 방문하십시오.

src/components/search.tsx

팁

내가 이미 Fuse.js를 다시 사용했다는 점을 감안할 때, 사랑하는 Karamablog에서 어떻게 구현했는지 확인할 수도 있습니다. 나는 당신이 그것을 후회하지 않을 것을 약속합니다!

? 빛과 어두운 테마

이미 선글라스를 입고 있습니까? 필요하지 않습니다. 요즘 필수적으로, 나는 독자들을위한 시각적 경험을 향상시키기 위해 theme switcher 통합했습니다. 왜? "devlog"라고 말하지만 여전히 블로그입니다. 우리의 망막은 우리에게 많은 중요합니다!

이 특정 기능 및 해당 구성 요소에 대한 자세한 내용은 다음을 참조하십시오.

public/toggle-theme.js

? SEO 친화적입니다

"Seothysys에 대해 한 번 논의를 중단 할 수 있습니까, Judit?" , 그다지 아닙니다! 그것이 토론의 문제라면, 그것은 단순히 존재가 어떤면에서 우리에게 도움이 될 수 있기 때문입니다. 설명하겠습니다 :

우리가 "SEO 친화적 인 컨텐츠"라고 부르는 것은 검색 엔진의 순위를 높이는 데 도움이되는 방식으로 생성 된 컨텐츠 유형입니다. 아니요. 키워드에 관한 것이 아닙니다. 재미있게, 우리가 "SEO"라고 부르는 것은 실제로 검색 엔진이 당신의 콘텐츠를 찾고, 이해하고, 연결하려는 주제에 연결하는 데 도움이됩니다.

Nowhygames-02

우리가 전에 논의한 dynamic ogImage 기억하십니까? 그러한 이미지 (오픈 그래프)조차 소셜 미디어 공유 및 SEO에 유용 합니다 ... 그 일부일뿐입니다!

예를 들어 config.ts 파일을 살펴 보겠습니다.

 export const SITE : Site = {
  website : "https://nowhylogs.vercel.app/" ,
  author : "Judit Lázaro" ,
  desc : "A minimal devlog containing No Why Games' misadventures." ,
  title : "No Why Games - Devlog" ,
  ogImage : "nowhylogs-og.jpg" ,
  lightAndDarkMode : true ,
  postPerPage : 3 ,
  scheduledPostMargin : 15 * 60 * 1000 ,
}

이러한 모든 요소 (표준 URL, 소셜 카드 등 포함)는 검색 엔진에 의해 쉽게 크롤링되고 색인화 되도록하기 위해 필수적이며 검색 엔진 결과의 가시성이 향상됩니다.

? SiteMap & Rss 피드

아시다시피, RSS는 사용자 및 응용 프로그램이 표준화 된 컴퓨터로 읽을 수있는 형식으로 웹 사이트에 대한 업데이트에 액세스 할 수있는 웹 피드입니다. 당신 과 내 통나무가 당신과 관련이있는 관심사를 빨리 잡초로 느끼면 ... 물결 모양의 버튼을 누르기를 망설이지 마십시오! ?

 import rss from "@astrojs/rss"
import { getCollection } from "astro:content"
import getSortedPosts from "@utils/getSortedPosts"
import { SITE } from "@config"

export async function GET ( ) {
  const posts = await getCollection ( "blog" )
  const sortedPosts = getSortedPosts ( posts )
  return rss ( {
    title : SITE . title ,
    description : SITE . desc ,
    site : SITE . website ,
    items : sortedPosts . map ( ( { data , slug } ) => ( {
      link : `posts/ ${ slug } /` ,
      title : data . title ,
      description : data . description ,
      pubDate : new Date ( data . modDatetime ?? data . pubDatetime ) ,
    } ) ) ,
  } )
}

더 쉽고, 더 좋습니다!

? 명령

아름다운 터미널을 사용하여 프로젝트의 루트에서 모든 명령을 실행할 수 있습니다.

명령	행동
`npm install`	종속성을 설치하십시오.
`npm run dev`	`localhost:4321` 에서 Local Dev Server를 시작하십시오.
`npm run build`	`./dist/` 로 생산 사이트를 구축하십시오.
`npm run preview`	로컬로 빌드를 미리보십시오.
`npm run format:check`	Pretier로 코드 형식을 확인하십시오.
`npm run format`	더 예쁘고 형식 코드.
`npm run sync`	모든 Astro 모듈에 대한 TypeScript 유형을 생성합니다. 여기에서 자세히 알아보십시오.
`npm run lint`	eslint와 함께 보풀.
`docker compose up -d`	Docker에서 NowHylogs를 실행하십시오.
`docker compose run app npm install`	위의 명령을 Docker 컨테이너로 실행하십시오.
`docker build -t nowhylogs .`	Nowhylogs에 대한 Docker 이미지를 작성하십시오.
`docker run -p 4321:80 nowhylogs`	Docker에서 NowHylogs를 실행하십시오. 웹 사이트는 `http://localhost:4321` 에서 액세스 할 수 있습니다.

? 스타일

아, 그래 ... 스타일, 스타일 ...!!

먼저,이 사이트의 존재를 가능하게 한 핵심 요소 중 일부를 공유 할 수 있습니다.

코드 서식 - 더 예쁘다
아이콘 - 인 아이콘
린팅 - eslint
스타일링 - 테일 윈드 스
UI/UX- Figma Design 파일

그러나 그것은이 작은 프로젝트 뒤에있는 실제 작업 (인간)의 최소 부분 일뿐입니다.

색상 팔레트 자체에 관해서는, 이제 게임이 이유가 아니기 때문에, 나는 당신이 내 개인 포트폴리오와 블로그에서 볼 수 있듯이 내가 익숙한 스타일과 거리를 두어야했습니다. 이 거리와 나 자신에 대한 새로운 근사치 (현재 인디 개발자)는 여기 주변에서 매우 유명한 예술가가 없으면 불가능했을 것입니다 : @aunedelec.

믿을 수 없을 정도로 아름다운 로고를 파괴 한 것에 대해 매우 유감스럽게 생각하는 말로 시작할 수 있지만, 나는 평생 동안 찾을 수있는 최악의 예술가라는 것이 밝혀졌습니다. 모든 농담은 비엔나에서 커피를 공유하는 동안 대화를위한 것이 아니라면, 당신의 인내, 지원, 예리한 눈, 극단적 인 기술을 공유하는 경우, 나는 글쓰기 에만 국한되지 않는 방식으로 비디오 게임을 수용 할 용기를 모은 적이 없었을 것입니다. 말하기, 그들에 대해 생각합니다 .

"재능, 지원 및 회사에 감사합니다"이외의 다른 것이 있다면, "내 인생의 일부가되어 주셔서 감사합니다"라는 거대한 일입니다. 하늘이 때때로 어두워 보일 수 있더라도, 그 구름은 항상 태양 앞에서 창백합니다 ... 그리고 Grenoble은 발코니에서 존경하기에 아주 아름다운 태양이 있습니다!

? 그들에게 멋진 후원자들에게 엄청난 감사를드립니다

Los Jugadores 아들 Mis Amigos . 즉, 나는 시끄럽고 성실한 것을 막지 않고 내 방해하는 삶의 새로운 장을 닫을 수 없었습니다. Thank you! ? .

우리의 놀라운 스폰서 인 @Entreprises LEMRHALI 에게 thank you so much . 최근에 "불확실성"은 우리 땅 주위에 상당히 큰 그림자를 퍼뜨리는 작품입니다. 그리고 내가 그렇게 할 수 있다면 그 현실을 바꾸고 싶을 때 저를 믿습니다. 아 아 ...) . 그러나 나는 모든 것이 나중에 더 빨리 그 자리를 찾을 것이라고 믿는다 .

누군가가 말했듯이 :