Archived!

Repository ini akan ditutup.
Proyek kodi.ng pindah ke referensi coding di skodev

Terima kasih untuk teman-teman yang sudah berkontribusi !! Repo ini akan tetap hidup, untuk yang ingin jadikan media belajar atau membuat situs serupa.

====

Refactor

new shortcode: kalau contoh kode dan result sama, cukup tulis satu kali di markdown.

Status

Just getting started! Please don't submit a new article for now. Feel free to throw any ideas, correct typos or suggesting new features on issue/PR.

About

Programming reference in Indonesian language.

Question or Feedback?

Visit discussion tab in this repository.

Link

• Site : kodi.ng
• Documentation : docs.kodi.ng
• Discussion: Discussion
• Author: hilmanski

Dev (Run locally)

• Install Hugo
• Clone repo
• Run server locally + search

./dev.sh

• Watch tailwind (open new terminal tab)

Install - One time only

cd themes/twhugo
yarn install

Next time for Dev

cd themes/twhugo
yarn dev

or one liner

cd themes/twhugo && yarn dev

Create new file

Run command

hugo new HTML/nama.md

• change HTML to whatever folder/language you're working on
• update the "order", based on latest order. Increase it by 10 or 5
• if new chapter -> add key "chapter" in frontmatter

Guide shortcode

• Write alert (info box)

{{<alert class="info">}}

<p> HTML itu singkatan dari <span class='italic'>hypertext markup language</span>.</p>
{{</alert>}}

// variasi class= info / warning / try / comment

• Codepen

{{<codepen src="id-codepen"}}

• Codesandbox shortcode Info: it's not working for "static HTML". search for alternative

{{<codesandbox>}}koding-html-intro-1s28xs{{</codesandbox>}}

• Figure / Image / GIf {{< mediacontent src="https://ucarecdn.com/96aa94cb-3025-4425-b4dc-88dd9de47184/Xnapper20221201165355.png" title="screenshot new file di VSCode" >}}

Before first release

• Very important ! (reread everything. edit multiple times! hapus "kita" menjadi "gunakan" misalnya)
• Upgrade design 100x better (use nice images)
• Make homepage background alive (nice homepage) example: https://twitter.com/meezwhite/status/1599450806217867265
• social image (OG graph autoamte by vercel)
• about page with disqus-comments
• clean highlight

(After)

• share on sekolahkoding
• share on pulodev
• share on facebook
• share on twitter
• share on instagram
• share on tiktok
• add kodi.ng link to (hilmanspace, sekolahkoding, halokoding)

Next plan

• add JS
• Write Live editor ?

Tech stack

• Main site: Hugo static site generator
• CSS: tailwind
• Code highlight https://highlightjs.org/
• Codepen, Codesandbox

---

next article:

• text styling

Todo

• add menu html dan css at navbar
• Article: (much later) css content dont forget (pseudo selector, comment, etc..)

Make endpoint for /html /css /etc.. redirect referensi

Info to add

substack skodev newletter -> as link

New

introduce new component: {{}} to show html results. change everything with hasil to use this component.