言語ハブ- netlify X hashnode hackathonの提出

The Language Hub is a central place for your language learning needs. Getting you to what you need quickly and easily

私はハッカーソンには一度も参加したことがない.私がそうしたくなかったので、私が彼らを見つけたとき、彼らの焦点はその時私のskillsetを越えたものにありました.

導入
いくつかの記事を読んでいたので、HashNodeが別のHackathonをホストしているのを見ました.私は要件を読み、唯一の主要なことはオープンソースです.
だから、私は心の近くに何かをしている-言語ハブの種類.言語参考書

訪問The Language Hub
見るthe code

考え
私は今、しばらくの間、言語を学び、教えてきました.私はしばしば私が理解したり説明しようとしている概念についての情報を見つけるために多くの時間がかかるシナリオに遭遇する-重要な部分.
生徒たちも私に何かを説明するよう頼んできた.正しい答えを与えるために、私はかなりの情報を検索しなければならない.

マイ・シンク
中央の場所-真実の源-それはあなたが知る必要がある言語の重要な部分を持っています.それはフランス語、スペイン語、ロシア語、北京語である.
迅速かつ容易に言語の重要な部分にあなたに場所.

Essentially, I would like to have a top bar where you choose your learning path. That would take you to the page of your chosen path.

That page will have a main content area and sidebar listing all the items related to it. Clicking an item in the sidebar would load that content in the main area.

これは大きな事業であり、世界中の人々からの生活のために参加する必要がある

ハウThe Language Hub 作品
サイトに到着すると、言語のボタンがあります.

カードを選択すると選択された言語の詳細ページにつながる.あなたが選択した言語について学ぶことができます
詳細ページは2つの主要なセクションに分けられます.

言語の選択したトピックについての情報を主な内容領域

選択された言語に関するより多くの話題へのリンクによるサイドバー.

また、簡単に言語パスの切り替えのためのナビゲーションのドロップダウンです.

Thanks to Tailwind, the site is responsive

プロセス
ここではどのように私は生活にこのプロジェクトをもたらす

テックスタック
私は、TextWinCSSでスタイルを整えたNextJS、Markdownを選びました.

Next.js : すべてが静的に生成される場合、それは最高の作品

TailwindCSS : それは大騒ぎではないスタイリングの最も簡単な方法です

Markdown :それは簡単に書く形式であり、プルリクエストを処理するときにあまりにも多くのトラブルを与えません

next-mdx-remote : マークダウンファイルをレンダリングします.

Chakra Ui : 私は実際にダウンドロップと戦う時間を過ごすしたくなかったので、チャクラウイを追加しました

Netlify : アプリケーションを配備するには

計画

githubリポジトリ
私はgithubリポジトリを設定し、それがパブリックであることを確認しました.

サイトデザイン:
私はすべてのものがどのように見えるかを考えている.

Home Page Concept

Detail Page Concept

ファイルとフォルダの構造
つ以上の言語を持ちたかったので、マークダウンファイルを自分のフォルダに分けなければならないでしょう

├── allLanguages
│   ├── languageOne
│   │   ├── file1.md
│   │   ├── file2.md
│   ├── languageTwo
│   │   ├── file!.md

貢献ガイド
貢献したい人のためのいくつかの簡単なガイドライン.

建物
私がやっていることの概要で、私は創造に移動します.

セットアッププロジェクト
私は新しいnextjsプロジェクトを解雇し、すぐにいくつかのものを得た.

フォルダ構造

言語ファイル

機能部品

レイアウトコンポーネント

SEO次のSEO

Aを用いた相対パスの回避jscofig.json ファイル

私が考え出さなければならなかったこと

ネストしたディレクトリからのファイルのレンダリング
最初の主なものは、ディレクトリ名とファイル名をスラッグとしてネストしたディレクトリに動的にファイルをレンダリングする方法です.

解決策
その中心に、言語ハブは、ソートのMarkdownブログです.しかし、各々の個々の言語フォルダの範囲内の各々のファイルのパスを得るために、異なる方法が必要であった.
Jon Peppnick この問題を解決するのに非常に役立ちました.
アクセスに加えてlearn フォルダは、私はforEach すべてのフォルダのループlearn そして、それらのフォルダのあらゆるファイルのためのもう一つ.
それから、私は拡張子なしでファイル名を抽出しました、そして、それらはスラグになりました.
それに加えて、私はまた、ファイルが完全なパスを形成するために置かれたフォルダ名を取った.
手順は以下の通りです.

アクセスディレクトリ

ディレクトリ内のすべてのフォルダ(LearnPath)のforeachループを実行します

学習パス内の各ファイルにforeachを実行する

ファイル名からスラグを抽出する

Paramsとしてスラグと学習経路を返す

export async function getStaticPaths() {

  // get the directory for all language info
  const learnDir = path.join("learn");

  // read the learn directory
  const languagePathsDirs = await fs.readdirSync(learnDir);

  // create empty array where all the paths will be added to
  const allPaths = [];

 // run a loop to get each folder in the learn directory
  languagePathsDirs.forEach((langPath) => {
    const langPathDir = path.join(learnDir, langPath);

   // read the  folders
    const files = fs.readdirSync(langPathDir);

    // run another loop to get the files in each of
    files.forEach((filename) => {
      const path = {
        params: {
          // extract the langPath
          langPath: langPath,
           // extract the file name to be used as part of the slug
          slug: filename.replace(".md", ""),
        },
      };
      // push the path to the empty array
      allPaths.push(path);
    });
  });

  return {
    // return the paths as params
    paths: allPaths,
    fallback: false,
  };
}

When the above code worked, a lot of the heavy lifting had been dealt with

それから、それはちょうど現在過ぎていましたparams to getStaticProps ページコンポーネントに

サイドバーのLangPathからファイルのリストをレンダリングする
次に、私はサイドバーで与えられた言語のファイル名をどのようにレンダリングするかを理解しなければなりませんでした.本質的に、個々のフォルダにそれぞれのファイルの名前が必要で、それらはサイドバーメニューの項目になります.

解決策
これは物事が本当に面白いときです.私が到着した解決策は2つの部分にあった.
まず、言語パス(フォルダ)を文字列(ファイル)として持つファイルです.
それから、ルックアップ・ファイルはそれらのアレーを取って、どのパスにマッチするかに基づいてアレーを表示する.
言語メニューファイルは次のようになります.

検索ファイル:

それから、詳細ページのルックアップと呼ばれ、その結果をサイドバーコンポーネントに渡しました.

ドロップダウン
私の次のタスクは、現在利用可能なすべての言語のリストを持つナビゲーションバーのドロップダウンを持つことでした.

解決策
これは、タスクの簡単だった.これを達成するために、私はすべての言語が利用できるファイルと彼らの国旗を持っていました.私はそれらをマップし、チャクラのUIからメニューでそれらを表示します.
ここではsource code , 我々は、開いているいくつかの問題があります

スタイリングサイト
私はすべての作業を得たとき、私は結果に非常に満足していたので、私はサイトの外観に移動しました.
私はまた、訪問者に言語を要求するか、サイトに貢献するのを許容するカスタム404ページを確実にしました.

言語ハブの配備
それはNetlify Hackathonであるとして、要件の一つは、NetLifyで展開されるアプリケーションがあった.

Netlfy makes deploying your project a breeze. Either upload your static files or link a github repository

私はnetlifyアカウントにログインしてthe-language-hub Repo、そして、Netlifyが残りをするのを待ちました
私はいくつかのエラーに遭遇しました.

エラー1 :
netlifyまたはeslintは、私が私の上に持っていたアポストロフィが好きでありませんでした404.js ページ.何が問題だったのかを把握するのに少し時間がかかった.私がしたとき、私は展開を試みました.
次に、2番目のエラーが発生しました.

エラー2 :
配備されたサイトでは、展開ログに問題はありませんでした.しかし、あなたがページを訪問するとき、あなたはサーバーエラーを得ました.

何が悪いの?
私は次を使用している.JSはそんなに、私は追加するために使用されてrevalidate 私にgetStaticProps . そのことは、それが唯一の作品ですfallback あなたのgetStaticPaths はfalse以外の値に設定されます.
それは私がしたことです-サーバエラーに終わったfalseのフォールバックのために再検証を設定します
私はそれを修正し、アプリは私が意図したように働き始めた

今何をしていますか.
現在、私はより多くの言語データを加えています.
あなた自身の1つを追加したいですか?いくつかのアドバイスを提供したいですか?コメントまたは上で私を殴ってください

結果
すべてのすべてで、私は私が学び、達成できることに満足しています.
チェックアウトThe Language Hub
今日の終わりには、これはあなたのプロジェクトです.私はそれを考えたかもしれないが、私は心の中に他のみんなを持っていた.私は非常にフィードバックとあなたが持っている提案を大いに感謝します.
私はまた、そこにある言語の改善と別の言語の追加を支援したい人を探しています.

結論
私の最初のHackathon経験は面白かったです.私はアイデアを考えて、それに取り組んで、何か具体的なものにそれを実現する設定された時間枠を持っているスリルが大好きです.
私は、再びもう一つのHackathonに参加したいです.

読んでいただきありがとうございます、接続しましょう!
私のこの小さな隅を訪問していただきありがとうございます.つながりましょう.Polywork and