Electron
/
electronjs.org-old
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

new site blog post (#835) 

* new website blog post WIP

* website post notes

* add figure templates

* incremental progress on blog post

* watch markdown changes

* a little more blog post progress

* add chinese nav screenshot

* write about homebrew cask

* use post layout

* give the logo breathing room on tablet

* blog post updates

* dat screenshot

* improve blog styles

* getting closer

* remove doublespaces

* call it GitHub Desktop

* fix typos and link to node

* alphabetize markdown URL list
This commit is contained in:
Zeke Sikelianos 2017-11-16 07:47:05 -08:00 коммит произвёл GitHub
Родитель 1b7c3c74a4
Коммит e990ab8d8d
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
7 изменённых файлов: 242 добавлений и 28 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

192
data/blog/new-website.md Normal file
Просмотреть файл

@ -0,0 +1,192 @@
---
title: "Electron's New Internationalized Website"
author: zeke
date: '2017-11-13'
---
Electron has a new website at [electronjs.org]! We've replaced
our static Jekyll site with a Node.js webserver, giving us flexibility to
internationalize the site and paving the way for more exciting new features.
## 🌍 Translations
We've begun the process of internationalizing the website with the
goal of making Electron app development accessible to a global audience of
developers. We're using a localization platform called [Crowdin] that integrates
with GitHub, opening and updating pull requests automatically as content is translated into different languages.
<figure>
<a href="https://electronjs.org/languages">
<img src="https://user-images.githubusercontent.com/2289/32803530-a35ff774-c938-11e7-9b98-5c0cfb679d84.png" alt="Electron Nav in Simplified Chinese">
<figcaption>Electron's Nav in Simplified Chinese</figcaption>
</a>
</figure>
Though we've been working quietly on this effort so far,
over 75 Electron community members have already discovered the project
organically and joined in the effort to internationalize the website and
translate Electron's docs into over 20 languages. We are seeing [daily
contributions](https://github.com/electron/electron-i18n/pulls?utf8=%E2%9C%93&q=is%3Apr%20author%3Aglotbot%20) from people all over the world, with translations for
languages like French, Vietnamese, Indonesian, and Chinese leading the way.
To choose your language and view translation progress, visit [electronjs.org/languages](https://electronjs.org/languages)
<figure>
<a href="https://electronjs.org/languages">
<img class="screenshot" src="https://user-images.githubusercontent.com/2289/32754734-e8e43c04-c886-11e7-9f34-f2da2bb4357b.png" alt="Current target languages on Crowdin">
<figcaption>Translations in progress on Crowdin</figcaption>
</a>
</figure>
If you're multilingual and interested in helping translate Electron's docs
and website, visit the [electron/electron-i18n] repo, or jump right into
translating on [Crowdin], where you can sign in using your GitHub account.
There are currently 21 languages enabled for the Electron project on Crowdin.
Adding support for more languages is easy, so if you're interested in
helping translate but you don't see your language listed,
[let us know](https://github.com/electron/electron.atom.io/issues/new) and
we'll enable it.
## Raw Translated Docs
If you prefer to read documentation in raw markdown files, you
can now do that in any language:
```sh
git clone https://github.com/electron/electron-i18n
ls electron-i18n/content
```
## App Pages
As of today, any Electron app can easily have its own page on the Electron
site. For a few examples, check out
[Etcher](https://electronjs.org/apps/etcher),
[1Clipboard](https://electronjs.org/apps/1clipboard), or
[GraphQL Playground](https://electronjs.org/apps/graphql-playground), pictured
here on the Japanese version of the site:
<figure>
<a href="https://electronjs.org/apps/graphql-playground">
<img class="screenshot" src="https://user-images.githubusercontent.com/2289/32871096-f5043292-ca33-11e7-8d03-a6a157aa183d.png" alt="GraphQL Playground">
</a>
</figure>
There are some incredible Electron apps out there, but they're not always easy
to find, and not every developer has the time or resources to build a proper
website to market and distribute their app.
Using just a
[PNG icon file and a small amount of app metadata](https://github.com/electron/electron-apps/blob/master/contributing.md),
we're able to collect a lot of information about a given app.
Using data collected from GitHub, app pages can now display screenshots,
download links, versions, release notes, and READMEs for every app that
has a public repository. Using a color palette extracted from each app's icon,
we can produce [bold and accessible colors](https://github.com/zeke/pick-a-good-color)
to give each app page some visual distinction.
The [apps index page](https://electronjs.org/apps) now also has categories
and a keyword filter to find interesting apps like [GraphQL GUIs](https://electronjs.org/apps?q=graphql)
and [p2p tools](https://electronjs.org/apps?q=graphql).
If you've got an Electron app that you'd like featured on the site, open a
pull request on the [electron/electron-apps] repository.
## One-line Installation with Homebrew
The [Homebrew] package manager for macOS has a subcommand called [cask]
that makes it easy to install desktop apps using a single command in your
terminal, like `brew cask install atom`.
We've begun collecting Homebrew cask names for popular Electron apps and are now
displaying the installation command (for macOS visitors) on every app page
that has a cask:
<figure>
<a href="https://electronjs.org/apps/dat">
<img class="screenshot" src="https://user-images.githubusercontent.com/2289/32871246-c5ef6f2a-ca34-11e7-8eb4-3a5b93b91007.png">
<figcaption>Installation options tailored for your platform: macOS, Windows, Linux</figcaption>
</a>
</figure>
To view all the apps that have homebrew cask names, visit
[electronjs.org/apps?q=homebrew](https://electronjs.org/apps?q=homebrew). If
you know of other apps with casks that we haven't indexed yet,
[please add them!](https://github.com/electron/electron-apps/blob/master/contributing.md)
## 🌐 A New Domain
We've moved the site from electron.atom.io to a new domain: [electronjs.org].
The Electron project was born inside [Atom], GitHub's open-source text editor
built on web technologies. Electron was originally called `atom-shell`. Atom
was the first app to use it, but it didn't take long for folks to realize that
this magical Chromium + Node runtime could be used for all kinds of different
applications. When companies like Microsoft and Slack started to make use of
`atom-shell`, it became clear that the project needed a new name.
And so "Electron" was born. In early 2016, GitHub assembled a new team to focus
specifically on Electron development and maintenance, apart from Atom. In the
time since, Electron has been adopted by thousands of app developers, and is now
depended on by many large companies, many of which have Electron teams of
their own.
Supporting GitHub's Electron projects like Atom and [GitHub Desktop] is still a
priority for our team, but by moving to a new domain we hope to help clarify
the technical distinction between Atom and Electron.
## 🐢🚀 Node.js Everywhere
The previous Electron website was built with [Jekyll], the popular Ruby-based
static site generator. Jekyll is a great tool for building static websites, but
the website had started to outgrow it. We wanted more dynamic capabilities like proper redirects and dynamic content rendering, so a [Node.js] server was the obvious choice.
The Electron ecosystem includes projects with components written in many
different programming languages, from Python to C++ to Bash. But JavaScript is foundational to Electron, and it's the language used most in our community.
By migrating the website from Ruby to Node.js, we aim to lower the barrier to
entry for people wishing to contribute to the website.
## ⚡️ Easier Open-Source Participation
If you've got [Node.js] (8 or higher) and
[git](https://git-scm.org) installed on your system, you can easily get the
site running locally:
```sh
git clone https://github.com/electron/electronjs.org
cd electronjs.org
npm install
npm run dev
```
The new website is hosted on Heroku. We use deployment pipelines and the
[Review Apps](https://devcenter.heroku.com/articles/github-integration-review-apps)
feature, which automatically creates a running copy of the app for every pull
request. This makes it easy for reviewers to view the actual effects of a
pull request on a live copy of the site.
## 🙏 Thanks to Contributors
We'd like to give special thanks to all the folks around the world who have
contributed their own time and energy to help improve Electron. The passion of
the open-source community has helped immeasurably in making Electron a success.
Thank you!
<figure>
<img src="https://user-images.githubusercontent.com/2289/32871386-92eaa4ea-ca35-11e7-9511-a746c7fbf2c4.png">
</figure>
[Atom]: https://atom.io
[cask]: https://caskroom.github.io
[crowdin.com/project/electron]: https://crowdin.com/project/electron
[Crowdin]: https://crowdin.com/project/electron
[electron/electron-apps]: https://github.com/electron/electron-apps
[electron/electron-i18n]: https://github.com/electron/electron-i18n#readme
[electronjs.org]: https://electronjs.org
[GitHub Desktop]: https://desktop.github.com
[Homebrew]: https://brew.sh
[Jeykll]: https://jekyllrb.com
[Node.js]: https://nodejs.org

2
middleware/blog.js
Просмотреть файл

@ -46,7 +46,7 @@ module.exports = function blogHandler (req, res, next) {
if (!context.post) return res.status(404).render('404')
res.render('posts/show', Object.assign(context, {
layout: 'page',
layout: 'post',
page: {title: `${context.post.title} | Electron Blog`}
}))
}

2
package.json
Просмотреть файл

@ -15,7 +15,7 @@
"build-versions": "script/versions",
"build-releases": "script/releases",
"release": "script/release",
"dev": "NODE_PATH=. nodemon -e js,scss,yml server.js",
"dev": "NODE_PATH=. nodemon -e js,scss,yml,md server.js",
"prepack": "check-for-leaks",
"prepush": "check-for-leaks"
},

26
scripts/platform-specific-content.js
Просмотреть файл

@ -1,21 +1,23 @@
// Reveal hidden elements specific to the user's OS
//
// Reveal hidden elements that are specific to the user's OS
//
// To use: apply a class of `darwin-only`, `linux-only`, or `win32-only`
// to any element. It will be hidden by default, and revealed on page load.
//
// Elements will be displayed as `block` by default. To use a different display
// value, add a class with `display-` as a prefix, like `display-inline-block`
// or `display-table-row`, e.g <tr class="darwin-only display-table-row">
//
// Elements will be displayed as `block` by default. To use another display
// value, add a class to the element like `display-inline-block` or
// `display-table-row`
const {getPlatformFromUserAgent} = require('platform-utils')
module.exports = function platformSpecificContent () {
const platform = getPlatformFromUserAgent()
const elements = Array.from(document.querySelectorAll(`.${platform}-only`))
Array.from(document.querySelectorAll(`.${platform}-only`))
.forEach(element => {
console.log(element)
const displayType = Array.from(element.classList).find(c => c.startsWith('display-'))
element.style.display = displayType ? displayType.replace('display-', '') : 'block'
})
elements.forEach(el => {
const classes = Array.from(el.classList)
console.log(classes)
let displayType = classes.find(c => c.startsWith('display-'))
displayType = displayType ? displayType.replace('display-', '') : 'block'
el.style.display = displayType
})
}

4
styles/_basecoat-navigation.scss
Просмотреть файл

@ -90,6 +90,10 @@
.site-header-nav {
float: none;
}
.site-header-nav {
margin-top: 25px;
}
}
.site-header-logo { @include breakpoint(lg) { float: left; } }
.site-header-nav { @include breakpoint(lg) { float: right; } }

25
styles/_blog.scss
Просмотреть файл

@ -42,6 +42,10 @@
.blog-post {
h2 {
margin-top: 2em;
}
time {
display: inline;
margin-bottom: $spacer4;
@ -62,6 +66,13 @@
display: none;
}
p {
line-height: 1.7;
a {
text-decoration: underline;
}
}
a code {
color: $main-link-color;
}
@ -77,3 +88,17 @@
margin-bottom: 20px;
}
}
figure {
margin: 2em 0;
}
figcaption {
text-align: center;
padding: 10px;
font-size: 1em;
color: $main-color;
a {
color: $main-color;
}
}

19
views/layouts/post.html
Просмотреть файл

@ -1,21 +1,12 @@
<section class='page-section blog-post strong-headers'>
{{!< main}}
<section class='page-section blog-post'>
<div class='container-narrow'>
<h1>{{page.title}}</h1>
<div class="who-when mt-1 mb-4">
<span class="octicon octicon-calendar pr-2"></span><time>{{page.date}}</time>
<a href="https://github.com/{{page.author}}" class="author-link ml-3"><img src="https://github.com/{{page.author}}.png?size=36" alt="{{page.author}}" class="avatar mr-2">{{page.author}}</a>
<a href="{{site.baseurl}}/feed.xml" class="author-link ml-3">
<span class="octicon octicon-rss mr-1"></span>
<span class="label">RSS Feed</span>
</a>
</div>
{{content}}
{{{body}}}
<div class="bg-shade p-4 rounded-1 mt-6 mt-lg-8">
<p>Have feedback on this post? Let <a href="https://twitter.com/electronjs">@electronjs</a> know on Twitter.</p>
<p>Need help or found a bug? <a href="/contact">Contact us</a>.</p>
</div>
</div>
</section>
</section>