From: Ardis Lu Date: Sat, 27 Feb 2021 07:27:44 +0000 (-0800) Subject: Initial commit X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=77aee8c545f4b4dc9a789488254ddc01ba9f8316;p=ardislu.dev Initial commit --- 77aee8c545f4b4dc9a789488254ddc01ba9f8316 diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..b590a02 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,12 @@ +# https://editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +tab_width = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +max_line_length = 80 diff --git a/README.md b/README.md new file mode 100644 index 0000000..f798ce2 --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ +# ardislu.dev + +This is the frontend for [my personal blog](https://ardislu.dev). + +Also check out my [main website](https://ardis.lu)! diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..a34cb40 Binary files /dev/null and b/favicon.ico differ diff --git a/github.svg b/github.svg new file mode 100644 index 0000000..5bd3a0e --- /dev/null +++ b/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..6c4c75b --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + + + + + + ardislu.dev + + + +
+

ardislu.dev

+ + GitHub + +
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..a964ae4 --- /dev/null +++ b/script.js @@ -0,0 +1,49 @@ +const main = document.getElementsByTagName("main")[0]; +const initialColumns = Math.max(1, Math.floor(main.clientWidth / 240) - 1); + +/* Generic element builders */ +const createColumnElement = () => { + const el = document.createElement("div"); + el.classList.add("column"); + return el; +}; + +const createSkeletonElement = () => { + const el = document.createElement("article"); + el.innerHTML = '
'.repeat(6); + return el; +}; + +const createArticleElement = (article) => { + const el = document.createElement("article"); + el.innerHTML = `

${article.title}

${article.body}

Read More

`; + return el; +}; + +/* Inject placeholder skeleton loaders */ +for (let i = 0; i < initialColumns; i++) { + const col = createColumnElement(); + for (let j = 0; j < 12; j++) { + const a = createSkeletonElement(); + col.insertAdjacentElement("beforeend", a); + } + main.insertAdjacentElement("beforeend", col); +} + +/* Callback to inject content from API */ +const inject = (resp) => { + main.innerHTML = ""; + const chunkSize = Math.ceil(resp.length / initialColumns); + for (let i = 0; i < initialColumns; i++) { + const col = createColumnElement(); + const chunk = resp.splice(0, chunkSize); + for (let a of chunk) { + col.insertAdjacentElement("beforeend", createArticleElement(a)); + } + main.insertAdjacentElement("beforeend", col); + } +}; + +fetch("https://jsonplaceholder.typicode.com/posts").then((httpResponse) => + httpResponse.json().then((jsonResponse) => inject(jsonResponse)) +); diff --git a/style.css b/style.css new file mode 100644 index 0000000..e49dfea --- /dev/null +++ b/style.css @@ -0,0 +1,51 @@ +body { + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, + "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Helvetica, Arial, + sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + color: #454545; + background: #eee; +} + +header { + display: flex; + align-items: center; + justify-content: center; +} + +main { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + grid-gap: 1rem; + justify-items: center; + margin: 0 auto; + max-width: 1440px; +} + +.column { + display: flex; + flex-wrap: wrap; + align-items: center; + width: 100%; +} + +article { + margin-bottom: 1rem; + padding: 0 1rem; + width: 100%; + border: solid rgba(0, 0, 0, 0.1); + border-radius: 1rem; + box-shadow: 0.25rem 0.25rem rgba(0, 0, 0, 0.1); +} + +@keyframes shimmer { + 100% { + background: #d6d6d6; + } +} + +.skeleton-line { + margin: 1rem; + height: 1rem; + animation: shimmer 1s alternate infinite; + background: #959595; +}