Gatsby to jekyll

.gitignore

@@ -65,3 +65,8 @@ yarn-error.log
 # editors
 .idea/
 .vscode
+
+# Jekyll
+_site
+.jekyll-cache
+.jekyll-metadata

content/pages/2--Docs/index.md → Docs/index.md

@@ -1,6 +1,8 @@
 ---
 title: Documentation
 type: docs
+layout: page
+inheader: true
 ---
 <ul class="doclist">
 	<li class="doclist-item">
@@ -99,4 +101,4 @@ type: docs
 			WebVR
 	</a>
 	</li>	
-</ul>
+</ul>

README.md

@@ -1,7 +1,5 @@
 # Welcome to the Samsung Internet Developer Hub :wave:
 
-This site is built on the [GatsbyJS](https://www.gatsbyjs.org/) blog.
-
 The site and this repository are maintained by the Samsung Internet Developer Advocate Team. 
 
 If you spot any problems with our site please tell us about them using raising an [Issue](https://github.com/SamsungInternet/siteblog/issues) in this repository.
@@ -21,139 +19,3 @@ Add the correct url for your medium avatar to the 'authorImg' variable in the ma
 * PWA
 * Web Performance
 * WoT
-
-# Making a contribution...
-
-Follow these instructions on how to get started with working on the samsunginter.net blog.
-
-## Before you begin:
-
-If you do not have Gatsby Cli installed yet, you will need to do this first.
-
-```text
-npm install --global gatsby-cli
-```
-
-More information on [GatsbyJS.org](https://www.gatsbyjs.org/tutorial/part-one)
-
-Once you've installed gatsby-cli you'll also need to install the modules that come with the project.
-Inside the siteblog directory run
-
-```text
-npm install
-```
-
-## Getting started
-
-Inside the siteblog directory run:
-
-```text
-gatsby develop
-```
-
-to hot-serve your website on http://localhost:8000 
-
-Now you can make changes to the content of the site locally and see those changes at http://localhost:8000. 
-
-Alternativly you can run: 
-
-```text
-gatsby build
-```
-
-to create static site ready to host (/public).
-
-## Updating the Featured Article
-
-The featured article is inside the following directory:
-
-src > components > Hero > Feature.js
-
-It is a react component with three variables, `title`, `image` and `url`. Update these with the relevant information and commit your changes.
-
-## Folders structure
-This is the starter’s main folders structure.
-
-root  
-  ├── .cache  
-  ├── content  
-  ├── node_modules  
-  ├── src  
-  └── static  
-
-### Content
-
-The content folder contains four subfolders.
-
-root  
-  ├── content  
-  │   ├── meta  
-  │   ├── pages  
-  │   ├── parts  
-  │   └── posts  
-
-#### Meta
-There is a config.js file inside the /content/meta/ folder, this contains data about the setup of the blog.
-
-#### Posts
-Every blog post has its own folder.
-
-root  
-  ├── content  
-  │   ├── posts  
-  │   │   ├── 2017-10-01--two-things-are-infinite  
-  │   │   ├── 2017-10-03--be-who-you-are  
-  │   │   ├── 2017-10-05--you-only-live-once  
-
-When you change or add new post, remeber to keep up with the post folder name pattern (this is done for us by the glitch-medium tool)
-
-/YYYY-MM-DD--title-of-post/  
-There are three obligatory parts:
-
-a post date prefix YYYY-MM-DD,  
-a separator -- (two dashes)  
-a slug  
-Only posts inside properly named folders are displayed on the blog post list.  
-
-#### Pages
-Every page has its own folder.
-
-root  
-  ├── content  
-  │   ├── pages  
-  │   │   ├── 1--about  
-  │   │   ├── 2--Docs  
-  │   │   ├── 3--meet-the-team  
-  │   │   ├── diversity-inclusion-statement  
-  │   │   └── success  
-
-When you change or add new page, remember to properly use the page folder name pattern.
-
-/number--title/  
-There are three parts.
-
-a page order number prefix No (one or more digit)  
-a separator -- (two dashes)  
-a slug  
-Only pages inside folders with a number prefix are displayed in the navigation. Pages without will be linkable but will not appear in the navigation
-
-#### Parts
-These are the constituent parts of the blog’s layout. Edit these to add information about Samsung Internet or to add a footer to the blog posts.
-
-root  
-  ├── content  
-  │   ├── parts  
-  │   │   ├── author.md  
-  │   │   └── footnote.md  
-
-### Node Modules
-This contains all of the installed packages.
-
-### Src
-This contains the components, templates and theming of the blog. If you need to edit the markup or styling of a component, you will find it in here. 
-
-Each component contains its own CSS. Try to keep the CSS selectors as un-specific as possible when adding styles. Use an element selector or a class if you can. 
-
-## Some useful instructions & tutorials on the Gatsby Blog
-
-* [How to install, setup and add new content to a Blog starter](https://dev.greglobinski.com/install-blog-starter/)

_config.yml

@@ -0,0 +1,30 @@
+---
+defaults:
+- scope:
+    path: "" # an empty string here means all files in the project
+  values:
+    layout: "page"
+siteTitle: Samsung Internet Dev Hub - Resources for developers
+shortSiteTitle: Samsung Internet Dev Hub - Resources for developers
+siteDescription: Samsung Internet Dev Hub, blog, resources, demos and documentation
+siteUrl: https://samsunginter.net
+pathPrefix: ''
+siteImage: "/icons/icon.png"
+siteLanguage: en
+authorName: Samsung Internet
+authorTwitterAccount: samsunginternet
+headerTitle: SamsungInternet
+headerSubTitle: DevHub
+manifestName: Samsung Internet Dev Hub
+manifestShortName: Samsung Internet Dev Hub
+manifestStartUrl: "/index.html"
+manifestBackgroundColor: white
+manifestThemeColor: "#666"
+manifestDisplay: standalone
+authorSocialLinks:
+- name: github
+  url: https://github.com/samsunginternet
+- name: twitter
+  url: https://twitter.com/samsunginternet
+- name: facebook
+  url: http://facebook.com/samsunginternet

_includes/blog.html

@@ -0,0 +1,39 @@
+<main class="blog">
+  <ul>
+    {% assign sorted = (site.pages | sort: 'path') | reverse %}
+    {% for page in sorted %}
+    {% assign folder = page.path | split: "/" %}
+    {% assign date = folder[1] | split: "--" | first | date: "%a, %b %d, %y"  %}
+    {% assign stub = folder[1] | split: "--" | last | handleize  %}
+    {% assign length = folder[1] | split: "--" | size %}
+    {% if length == 2 %}{% if folder[0] == "posts" %}
+    <li class="item">
+      <a href="{{ page.url }}" class="link">
+        <div class="blog-image-container">
+        <img class="blog-image" src="/{{folder[0]}}/{{folder[1]/}}/{{page.cover}}">
+        </div>
+        <h1>
+          {{page.title}}{% include faarrow.html %}
+        </h1>
+        {% assign type = page.category %}
+        {% assign icon = page.category | remove: " " | downcase  %}
+        {% include corner.html %}
+        <p class="meta">
+          <span class="author-info">
+            {{page.author}}
+            <img class="author-img" src="{{ page.authorImg }}" />
+          </span>
+          <span>
+            {% include facalendar.html %} {{date}}
+          </span>
+          <span>
+            {% include fatag.html %} {{page.category}}
+          </span>
+        </p>
+        {% assign paragraphs = page.content | markdownify | strip_html | newline_to_br | strip_newlines | split: '<br />' %}
+        <p>{{ paragraphs[2] | truncatewords: 75 }}</p>
+      </a>
+    </li>
+    {% endif %}{% endif %}{% endfor %}
+  </ul>
+</main>

_includes/corner.html

@@ -0,0 +1,7 @@
+<span class="corner corner-feature">
+  <span class="corner-text">{{type}}</span>
+  {% assign width = "50px" %}
+  {% assign height = "50px" %}
+  {% assign fill = "#3d3d3d" %}
+  {%include icon.html %}
+</span>

_includes/faarrow.html

@@ -0,0 +1 @@
+<svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" class="arrow" style="vertical-align: middle;"><g><path d="m36.4 21.4q0 1.2-0.9 2.1l-14.5 14.5q-0.9 0.8-2 0.8-1.2 0-2-0.8l-1.7-1.7q-0.9-0.8-0.9-2t0.9-2l6.5-6.6h-15.7q-1.1 0-1.9-0.8t-0.7-2v-2.9q0-1.2 0.7-2t1.9-0.9h15.7l-6.5-6.5q-0.9-0.8-0.9-2t0.9-2l1.7-1.7q0.8-0.9 2-0.9 1.2 0 2 0.9l14.5 14.5q0.9 0.8 0.9 2z"></path></g></svg>

_includes/facalendar.html

@@ -0,0 +1 @@
+<svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="18" width="18" viewBox="0 0 40 40" style="vertical-align: middle;"><g><path d="m4.4 37.1h6.4v-6.4h-6.4v6.4z m7.8 0h7.2v-6.4h-7.2v6.4z m-7.8-7.8h6.4v-7.2h-6.4v7.2z m7.8 0h7.2v-7.2h-7.2v7.2z m-7.8-8.6h6.4v-6.4h-6.4v6.4z m16.4 16.4h7.1v-6.4h-7.1v6.4z m-8.6-16.4h7.2v-6.4h-7.2v6.4z m17.2 16.4h6.4v-6.4h-6.4v6.4z m-8.6-7.8h7.1v-7.2h-7.1v7.2z m-7.9-19.3v-6.4q0-0.3-0.2-0.5t-0.5-0.2h-1.4q-0.3 0-0.5 0.2t-0.2 0.5v6.4q0 0.3 0.2 0.5t0.5 0.2h1.4q0.3 0 0.5-0.2t0.2-0.5z m16.5 19.3h6.4v-7.2h-6.4v7.2z m-8.6-8.6h7.1v-6.4h-7.1v6.4z m8.6 0h6.4v-6.4h-6.4v6.4z m0.7-10.7v-6.4q0-0.3-0.2-0.5t-0.5-0.2h-1.5q-0.3 0-0.5 0.2t-0.2 0.5v6.4q0 0.3 0.2 0.5t0.5 0.2h1.5q0.2 0 0.5-0.2t0.2-0.5z m8.5-1.4v28.5q0 1.2-0.8 2.1t-2 0.8h-31.4q-1.2 0-2.1-0.9t-0.8-2v-28.5q0-1.2 0.8-2t2.1-0.9h2.8v-2.1q0-1.5 1.1-2.6t2.5-1h1.4q1.5 0 2.5 1.1t1.1 2.5v2.1h8.6v-2.1q0-1.5 1-2.6t2.5-1h1.5q1.4 0 2.5 1.1t1 2.5v2.1h2.9q1.1 0 2 0.9t0.8 2z"></path></g></svg>

_includes/fatag.html

@@ -0,0 +1 @@
+<svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="18" width="18" viewBox="0 0 40 40" style="vertical-align: middle;"><g><path d="m13 10q0-1.2-0.8-2t-2.1-0.9-2 0.9-0.8 2 0.8 2 2 0.9 2.1-0.9 0.8-2z m23.8 12.9q0 1.1-0.8 2l-11 10.9q-0.8 0.9-2 0.9-1.2 0-2-0.9l-16-15.9q-0.8-0.9-1.4-2.3t-0.6-2.6v-9.3q0-1.1 0.8-2t2.1-0.8h9.2q1.2 0 2.7 0.5t2.2 1.5l16 15.9q0.8 0.9 0.8 2.1z"></path></g></svg>

_includes/feature.html

@@ -0,0 +1,15 @@
+<section class="feature">
+  {% for page in (site.pages | sort: 'date' | reverse) %}
+  {% assign folder = page.path | split: "/" %}
+  {% if folder[0] == "posts" %}
+  {% if page.featuredArticle %}
+  <a href="{{page.url}}">
+    <img class="blog-image" src="/{{folder[0]}}/{{folder[1]/}}/{{page.cover}}" alt="{{page.coverAlt}}" />
+    <h2>{{page.title}}</h2>
+    {% assign type="feature" %}
+    {% assign icon="star" %}
+    {% include corner.html %}
+  </a>
+  {% break %}
+  {% endif %}{% endif %}{% endfor %}
+</section>

_includes/header.html

@@ -0,0 +1,18 @@
+<header class="header {% if page.path == "index.html" %}homepage{% endif %}">
+  <a href="/" class="link logo-link">
+    <img class="logo-img" src="/images/png/silogo.svg" alt="{{ site.siteTitle }}" />
+  </a>
+  <h1>Developer Hub</h1>
+  {% include menu.html %}
+</header>
+<div class="sensor"></div>
+<script>
+  const sensor = document.currentScript.previousElementSibling;
+  const header = sensor.previousElementSibling;
+  new IntersectionObserver(entries => entries.forEach(function onIntersection({
+    isIntersecting,
+    target
+  }) {
+    header.classList.toggle('fixed', !isIntersecting);
+  })).observe(sensor);
+</script>

_includes/hero.html

@@ -0,0 +1,19 @@
+<section class="hero">
+  <script>
+    const hero = document.currentScript.parentNode;
+    function onResize() {
+      const heroHeight = hero.offsetHeight;
+      const pageWidth = window.innerWidth + 160;
+      const rocketAngle = Math.atan(heroHeight/pageWidth);
+      hero.style.setProperty('--heroHeight', heroHeight);
+      hero.style.setProperty('--rocketAngle', rocketAngle);
+    }
+    window.addEventListener('resize', onResize);
+    window.addEventListener('DOMContentLoaded', onResize);
+  </script>
+  <div class="hero-info">
+    <h1 class="intro">Welcome to the Developer Hub for the web browser Samsung Internet.</h1>
+    <p class="intro-text">Here you will find demos, articles and documentation to help you make the most of the latest web features in Samsung Internet and other browsers too.</p>
+    {% include feature.html %}
+  </div>
+</section>