diff --git a/Gemfile b/Gemfile index efa2bba..19767c3 100644 --- a/Gemfile +++ b/Gemfile @@ -20,26 +20,26 @@ gem 'require_all', '1.3.3' gem 'middleman-autoprefixer', '~>2.7.0' # Use sprokets for assets + compass -gem 'middleman-sprockets', '4.0.0' gem 'middleman-compass', '4.0.1' +gem 'middleman-sprockets', '4.0.0' + +# Generating articles +gem 'middleman-blog', '~> 4.0' # Boostrap as SASS -gem 'sass', '3.4.19' gem 'bootstrap', '~> 4.0.0.alpha4' gem 'rails-assets-tether', '>= 1.1.0' +gem 'sass', '3.4.19' # Grab jQuery gem 'jquery-middleman', '3.1.2' # Markdown redcarpet parsing engine + syntax highlighter for middleman -gem 'redcarpet', '3.3.3' gem 'middleman-syntax', '~>3.0.0' +gem 'redcarpet', '3.3.3' # Publish middleman website to gh-pages gem 'middleman-gh-pages', '~>0.3.0' # Rake tasks gem 'rake', '10.5.0' - -# Nokogiri for parsing HTML tags -gem 'nokogiri' diff --git a/Gemfile.lock b/Gemfile.lock index cc0d4dc..e79d154 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -70,6 +70,10 @@ GEM middleman-autoprefixer (2.7.0) autoprefixer-rails (>= 6.3.1, < 7.0.0) middleman-core (>= 3.3.3) + middleman-blog (4.0.2) + addressable (~> 2.3) + middleman-core (~> 4.0) + tzinfo (>= 0.3.0) middleman-cli (4.1.10) thor (>= 0.17.0, < 2.0) middleman-compass (4.0.1) @@ -110,11 +114,8 @@ GEM middleman-syntax (3.0.0) middleman-core (>= 3.2) rouge (~> 2.0) - mini_portile2 (2.2.0) minitest (5.9.0) multi_json (1.12.1) - nokogiri (1.8.0) - mini_portile2 (~> 2.2.0) padrino-helpers (0.13.2) i18n (~> 0.6, >= 0.6.7) padrino-support (= 0.13.2) @@ -154,12 +155,12 @@ DEPENDENCIES jquery-middleman (= 3.1.2) middleman (~> 4.1.0) middleman-autoprefixer (~> 2.7.0) + middleman-blog (~> 4.0) middleman-compass (= 4.0.1) middleman-gh-pages (~> 0.3.0) middleman-livereload (~> 3.4.0) middleman-sprockets (= 4.0.0) middleman-syntax (~> 3.0.0) - nokogiri rails-assets-tether (>= 1.1.0) rake (= 10.5.0) redcarpet (= 3.3.3) diff --git a/README.md b/README.md index c215f4f..2108fb9 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,11 @@ $ bundle exec middleman Your website will be watched and hosted locally at **[http://localhost:4567/](http://localhost:4567/)**. +## Bootstrap + +We currently rely on a [Ruby Bootstrap gem](https://github.com/twbs/bootstrap-rubygem/tree/v4.0.0.alpha4) compiled with Bootstrap 4.0.0-alpha4. +Relevant SASS files can be found [here](https://github.com/twbs/bootstrap-rubygem/tree/v4.0.0.alpha4/assets/stylesheets). + ## Publishing Publish using: diff --git a/config.rb b/config.rb index 81322db..3fa6633 100644 --- a/config.rb +++ b/config.rb @@ -14,6 +14,15 @@ # Automatic image dimensions on image_tag helper activate :automatic_image_sizes +# Activate 'blogging' to generate guides +activate :blog do |guide| + guide.prefix = 'articles/guides' + guide.default_extension = '.md' + guide.permalink = 'tags/{tags}/{title}.html' + guide.layout = :'articles/guides' + guide.tag_template = "#{guide.prefix}/tag_template.html" +end + # Reload the browser automatically whenever files change configure :development do activate :livereload @@ -22,11 +31,11 @@ # Methods defined in the helpers block are available in templates helpers do # Require all functions in the helpers directory - require_all 'helpers' + require_all 'lib/helpers' end -# Helpers for string -require 'lib/core_ext/string' +# All overrides for core extensions +require_all 'lib/core_ext' # Activate sprokets + compass activate :sprockets @@ -41,6 +50,9 @@ # Set the image directory to be ./images set :images_dir, 'images' +# Partials must be from partials directory +set :partials_dir, 'partials' + # Activate markdown using Redcarpet parsing engine and syntax highlighting set :markdown_engine, :redcarpet set :markdown, fenced_code_blocks: true, smartypants: true @@ -65,28 +77,28 @@ # Page options, layouts, aliases and proxies ### -# Root Layout +# Specify the root layout to index page '/index.html', layout: :index -# Article layout -page '/articles/*', layout: :'articles/index' - -# Specific code guide layout -page '/guides/code-examples/**/*.html', layout: :'articles/code-guide' -# Guides layout (use article) -page '/guides/*', layout: :'articles/index' +# Specify layouts for subdirectories of articles _in order_ of application +page '/articles/installation/**/step*', layout: :'articles/installation' +page '/articles/installation/*', layout: :'articles/index' +page '/articles/guides/index.html', layout: :'articles/index' +page '/articles/guides/tags/*', layout: :'articles/guides' +page '/articles/guides/tags/**/*', layout: :'articles/guides' +page '/articles/contributing/*', layout: :'articles/index' +page '/articles/index.html', layout: :'articles/index' # API proxy pages data.api.each do |api_group, data| name = api_group.to_human_case - guides = find_guides_in_category('code-examples/' << name.downcase) types = (data.typedefs + data.structs + data.enums).sort_by { |h| h[:name] } locals = { raw_api_data: data, + api_group: api_group, name: name, types: types, functions: data.functions, - guides: guides, defines: data.defines, description: data.description, brief: data.brief diff --git a/helpers/guides.rb b/helpers/guides.rb deleted file mode 100644 index 85567f4..0000000 --- a/helpers/guides.rb +++ /dev/null @@ -1,49 +0,0 @@ -# -# Find guide categories by searching for subdirectories of a path. -# -def find_guide_categories(path = nil) - - if path == nil - return {} - end - - # Prepend data/snippets to the path - path = 'source/guides/' << path - - dirs = Dir.entries(path).select {|entry| File.directory? File.join(path, entry) and !(entry =='.' || entry == '..') } - - return dirs - -end - -# -# Finds guides within a category by searching for files in a subdirectory -# -def find_guides_in_category(path = nil) - if path == nil - return {} - end - - # Prepend data/snippets to the path - base_uri = 'guides/' << path << '/' - path = 'source/guides/' << path << "/*.html.md" - - files = Dir.glob(path).map do |f| - extname = File.extname(f) - name = File.basename(f, extname) - src = Nokogiri::HTML(open(f)) - doc_title = src.at('meta[name="guide-title"]')['content'] - api_linked_groups = src.at('meta[name="api-link-groups"]')['content'].split(",") - api_linked_functions = src.at('meta[name="api-link-functions"]')['content'].split(",") - { - name: name, - uri: base_uri + name.sub('.html', ''), - doc_title: doc_title, - api_linked_groups: api_linked_groups, - api_linked_functions: api_linked_functions - } - end - - return files - -end diff --git a/lib/core_ext/string.rb b/lib/core_ext/string.rb index 967163a..92e0818 100644 --- a/lib/core_ext/string.rb +++ b/lib/core_ext/string.rb @@ -1,4 +1,4 @@ -require 'helpers/slug' +require 'lib/helpers/slug' HUMANIZED_STRINGS = YAML.load_file('data/humanize.yml').freeze @@ -13,6 +13,10 @@ def to_human_case selff.tr('_', ' ') end + def to_title_case + split(/[_\s]/).map(&:capitalize).join(' ') + end + def to_kebab_case to_human_case.downcase.tr(' ', '-') end diff --git a/helpers/active_class.rb b/lib/helpers/active_class.rb similarity index 100% rename from helpers/active_class.rb rename to lib/helpers/active_class.rb diff --git a/lib/helpers/guides_for_function.rb b/lib/helpers/guides_for_function.rb new file mode 100644 index 0000000..a827a13 --- /dev/null +++ b/lib/helpers/guides_for_function.rb @@ -0,0 +1,14 @@ +# Returns all blog guides that are relevant for this function. +# Essentially a lookup to which guides apply to the API group that +# owns the function. +def guides_for_function(guides, function) + guides.select do |guide| + guide.metadata[:page][:related_funcs].include?(function.name) + end +end + +def guides_for_api_group(api_name) + blog.tags.map do |tag_name, tag_data| + tag_data if tag_name == api_name + end.flatten.compact +end diff --git a/helpers/path_for_group.rb b/lib/helpers/path_for_group.rb similarity index 100% rename from helpers/path_for_group.rb rename to lib/helpers/path_for_group.rb diff --git a/helpers/sitemap_page_title.rb b/lib/helpers/sitemap_page_title.rb similarity index 90% rename from helpers/sitemap_page_title.rb rename to lib/helpers/sitemap_page_title.rb index c338068..641ec93 100644 --- a/helpers/sitemap_page_title.rb +++ b/lib/helpers/sitemap_page_title.rb @@ -13,7 +13,7 @@ def sitemap_page_title # (i.e. getting started/foo/index.html -> getting started - foo) dest_path = dest_path.split('/')[0...-1].join(' - ') # Capitalize every word - page_title = dest_path.split.map { |s| s.to_human_case }.join(' ') + page_title = dest_path.split.map(&:to_human_case).join(' ') # Return nil if no page title, or the page_title !page_title.strip.empty? ? page_title : nil end diff --git a/helpers/slug.rb b/lib/helpers/slug.rb similarity index 100% rename from helpers/slug.rb rename to lib/helpers/slug.rb diff --git a/helpers/snippet.rb b/lib/helpers/snippet.rb similarity index 100% rename from helpers/snippet.rb rename to lib/helpers/snippet.rb diff --git a/source/api/template.html.erb b/source/api/template.html.erb index 82e7462..6015bbc 100644 --- a/source/api/template.html.erb +++ b/source/api/template.html.erb @@ -7,33 +7,53 @@ <%# Functions %> <% if !functions.empty? %>
- <% if !guides.empty? %> + <% guides = guides_for_api_group(api_group) %> + <% unless guides.empty? %>

<%= name %> Guides

- <% guides.each do |f| %> - <%= f[:doc_title] %> + <% guides.each do |guide| %> + <%= link_to guide.title, guide, class: 'btn btn-primary btn-sm', target: '_blank' %> <% end %>
<% end %>

Functions

+ <%# Group by functions %> <% functions.group_by { |fn| fn.name }.each do |group, functions| %> -
1 %>> -

<%= group.to_human_case %>

-
- There are multiple versions of <%= group.to_human_case %>: - -
-
+ <% if functions.length > 1 %> +
+

+ <%= group.to_human_case %> + +

+
+
+
+ This function is overloaded. The following versions exist. +
+
    + <% functions.each do |function| %> +
  • + <% link_to slug_url_for(function) do %> + <%= group.to_human_case %> + ( + <% function.parameters.each do |param_name, param_data| %> + <%= param_name %> + : + <%= param_data.type.to_human_case %> + <% end %> + ) + <% end %> +
    • + <% end %> +
+
+
+
+ <% end %> <% functions.each do |function| %> - <%= partial 'partials/api/function', locals: { function: function } %> + <%= partial 'partials/api/function', locals: { function: function, guides: guides } %> <% end %> <% end %>
diff --git a/source/articles/contributing/index.html.md.erb b/source/articles/contributing/index.html.md.erb new file mode 100644 index 0000000..eccbe20 --- /dev/null +++ b/source/articles/contributing/index.html.md.erb @@ -0,0 +1,155 @@ +# Writing a SplashKit Guide + +This tutorial will cover the details of how to write a SplashKit guide for the SplashKit website. + +You will need: + + 1. a [GitHub](http://github.com) account, + 2. a Ruby development environment (v2.3.1) to build the website, + 3. an awesome idea for a guide! + +## Getting Ready + +In order to test your guide in the SplashKit website, you need to download the source code for the website. To do this, make sure you are logged into GitHub, and then [create a fork](http://github.com/splashkit/splashkit.io/fork) of the SplashKit.io website repository onto your own personal GitHub account. + +Once you have forked the website repository, you should then [clone your fork](https://help.github.com/articles/cloning-a-repository/) of the repository to your local machine by selecting "clone or download" and copying the link. You can do this via the `git clone ` command in the terminal, or by using [GitHub Desktop](https://desktop.github.com). + +Once you have cloned your forked repository, follow the instructions posted in the website's [readme](https://github.com/splashkit/splashkit.io/blob/master/README.md). + +## Creating The Guide + +To create a new guide, navigate to the directory where you cloned the repository: + +``` +cd /path/to/splashkit.io +``` + +Guides are categorised using a _tag_, which must relate to a member in the API group. The following keys can be used to relate your article to a specific API group: + +<% data.api.keys.each do |key| %> + - **`<%= key %>`**: <%= key.to_human_case %> +<% end %> + +Once you have decided a name for your guide and which API group(s) it should relate, execute the following command: + +``` +bundle exec middleman article "[Name of Guide]" -t [tags] +``` + +You can associate multiple tags to one guide by separating tags using a comma. For example, if you wanted to write a `graphics` and `window`-related guide entitled "Drawing simple shapes", you would execute: + +``` +bundle exec middleman article "Drawing simple shapes" -t graphics,window +``` + +Once you execute this command, you will see that the guide you have named appears under `source/articles/guides` using the current day's date. For example, the command above would create `source/articles/guides/20XX-XX-XX-drawing-simple-shapes.html.md`. + +## Adding Required Frontmatter + +Open this file in a text editor and you will see the following: + +```yaml +--- + +title: Drawing simple shapes +date: 2017-12-11 06:44 UTC +tags: graphics,window + +--- +``` + +The data separated by the three dashes (`---`) is known as the _frontmatter_ of the guide. This contains metadata about the guide, which (by default) includes the guide name, date created, and associated tags. + +
+ Note: You must add the following keys to the frontmatter: + + If you do not do this you may break the API documentation generation! +
+ +We suggest you copy and paste the following example to add it to the frontmatter to ensure no mistakes: + +```yaml +--- + +title: Drawing simple shapes +date: 2017-12-11 06:44 UTC +tags: graphics,window +author: Fred Smith +author_url: http://github.com/fsmith +summary: | + This guide discusses how you can open a window to draw some simple + shapes in order to start playing around with graphics in SplashKit. +related_funcs: + - create_window + - draw_rectangle + - refresh_screen + - clear_screen + +--- + +``` + +If you are unsure what functions keys to use, refer to the C++ snake_case name in the website. For example, for the "Free Music" function: + +![Example of name to use for function](https://i.imgur.com/TiTmcd3.png) + +## Write the guide + +Underneath the bottom three dashes, you may begin writing your guide using [Github-flavoured Markdown](https://guides.github.com/features/mastering-markdown/). You won't need to add the title of the guide as a Heading 1 (`

` or `#`) as this is automatically added for you. + +
+ Note: When writing your guide, ensure you only use + Heading 2 to Heading 6 (<h2> ... <h6> or ## ... ######). + This is because Heading 1 is reserved for the guide's title. +
+ +Remember to keep the language friendly, include examples and ensure it is high quality. + +If you would like to include images in your guide, **host them on [Imgur](http://imgur.com)** as this will ensure they exist permanently (unlike temporary image hosting services such as [puush](http://puush.me/)). + +## Test the guide + +After you have finished writing, it's time to make sure everything looks right! + +From your terminal, where you created the guide, run the following command to start running the website locally: + +``` +bundle exec middleman +``` + +Now, visit [`http://localhost:4567`](http://localhost:4567) to see the website. + +Run through the following checklist to make sure: + +1. that you can navigate to the guides and see your guide your guide indexed in the _right_ API groups that you tagged your guide under, +2. make sure it all looks good (i.e., no visual errors), +3. make sure that relevant API function links appear under the respective functions in the API documentation. For example, if you wrote a `json`-tagged guide related to the `create_json` function, you would want to see the guides appear under the JSON API docs and the respective function: + ![JSON Guide Home](https://i.imgur.com/cPKwNgx.png) + ![JSON Guide Function](https://i.imgur.com/KNhJIJn.png) + +## Merging your guides into the SplashKit website + +If it's all looking good, it's time to submit a "pull request" so that a core member of the SplashKit team can review your proposed guide and get it published. + +To do this, push your changes via GitHub, and visit the GitHub webiste for your fork. View this [GitHub tutorial](https://help.github.com/guides/creating-a-pull-request/) for more details on how to do this. A member of the SplashKit team will view your guide, give feedback, and otherwise make sure everything looks good. Finally, they will then publish your guide! + +SplashKit is completely open source, and free to use — any contributions to the project are appreciated! + +If at any stage of this process you run into any issues, feel free to raise an issue on GitHub. diff --git a/source/articles/getting-started.html.md.erb b/source/articles/getting-started.html.md.erb deleted file mode 100644 index 068704b..0000000 --- a/source/articles/getting-started.html.md.erb +++ /dev/null @@ -1,7 +0,0 @@ -# Getting Started with SplashKit - -SplashKit is designed to help make learning to program fun and engaging. - -## Example Program - -<%= snippet 'hello-world' %> diff --git a/source/guides/code-examples/utilities/utilities-common-conversions-1.html.md b/source/articles/guides/2017-10-03-useful-utilities.html.md similarity index 93% rename from source/guides/code-examples/utilities/utilities-common-conversions-1.html.md rename to source/articles/guides/2017-10-03-useful-utilities.html.md index 0b6062b..6eae144 100644 --- a/source/guides/code-examples/utilities/utilities-common-conversions-1.html.md +++ b/source/articles/guides/2017-10-03-useful-utilities.html.md @@ -1,8 +1,22 @@ - - - - -# Helpful utility functions in SplashKit +--- + +title: Useful Utilities +date: 2017-10-03 06:20 UTC +author: Richard Denton +tags: utilities +summary: | + In this article, we discuss useful utilities that you can use to convert, + check and manipulate common data types in SplashKit programs. +related_funcs: + - convert_to_integer + - convert_to_double + - is_integer + - is_number + - to_uppercase + - to_lowercase + - trim + +--- SplashKit's [utilities library](/api/utilities) provides a range of useful functions that can assist you with converting, checking and manipulating common data types in your SplashKit program. @@ -235,3 +249,4 @@ int main() return 0; } ``` + diff --git a/source/guides/code-examples/database/intro-to-SplashKit-database.html.md b/source/articles/guides/2017-10-03-using-databases.html.md similarity index 91% rename from source/guides/code-examples/database/intro-to-SplashKit-database.html.md rename to source/articles/guides/2017-10-03-using-databases.html.md index a378ff5..94fd87e 100644 --- a/source/guides/code-examples/database/intro-to-SplashKit-database.html.md +++ b/source/articles/guides/2017-10-03-using-databases.html.md @@ -1,8 +1,16 @@ - - - +--- -# A Brief Introduction to using the built in database in SplashKit. +title: Using Databases +date: 2017-10-03 06:20 UTC +author: Jake Renzella +tags: databases +summary: | + Databases are powerful tools for persisting, and querying data. In this + guide, we'll be looking at SplashKit's SQLite3 database, and how to use it. +related_funcs: + - + +--- Databases are powerful tools for persisting, and querying data. In this guide, we'll be looking at SplashKit's SQLite3 database, and how to use it. @@ -82,4 +90,4 @@ free_database(my_db); * If needed, you can ask SplashKit what type of data is stored at a column using `query_type_of_col(result, 0)`. We'll ask the database for you ;) -Jake Renzella, 2016. \ No newline at end of file +Jake Renzella, 2016. diff --git a/source/guides/code-examples/json/json-guide-1.html.md b/source/articles/guides/2017-10-03-using-json.html.md similarity index 66% rename from source/guides/code-examples/json/json-guide-1.html.md rename to source/articles/guides/2017-10-03-using-json.html.md index ccf9fa8..83d43a0 100644 --- a/source/guides/code-examples/json/json-guide-1.html.md +++ b/source/articles/guides/2017-10-03-using-json.html.md @@ -1,10 +1,25 @@ - - - - -# Using JSON in SplashKit - -JSON (Javascript Object Notation) if a human-readable text format consisting +--- + +title: Using JSON +date: 2017-10-03 06:21 UTC +author: Richard Denton +author_url: +tags: json +summary: | + JSON is a human-readable text format consisting of key/value pairs and arrays. + SplashKit allows us to read through these files and create our own. This + article explains the basics of doing so with SplashKit. +related_funcs: + - create_json + - create_json + - create_json_from_string + - json_set_string + - json_set_number + - free_json + +--- + +JSON (JavaScript Object Notation) if a human-readable text format consisting of key-value (or attribute-value) pairs and arrays. SplashKit's [JSON library](/api/json) provides methods and procedures for working with @@ -12,7 +27,6 @@ JSON objects in C++. ## SplashKit JSON code usage example - ```c++ #include "splashkit.h" #include @@ -44,3 +58,4 @@ int main() return 0; } ``` + diff --git a/source/articles/guides/index.html.erb b/source/articles/guides/index.html.erb new file mode 100644 index 0000000..dbc01ab --- /dev/null +++ b/source/articles/guides/index.html.erb @@ -0,0 +1,10 @@ + diff --git a/source/articles/guides/tag_template.html.erb b/source/articles/guides/tag_template.html.erb new file mode 100644 index 0000000..205e6ed --- /dev/null +++ b/source/articles/guides/tag_template.html.erb @@ -0,0 +1,19 @@ +

<%= tagname.to_title_case.to_human_case %> Guides

+

+ <%= articles.count %> article<%= articles.count > 1 ? 's' : ''%> +

+<% articles.sort_by(&:date).each do |article| %> + <% link_to article, class: 'sk-article-link' do %> +

<%= article.title %>

+

+ Written by <%= article.metadata[:page][:author] %> on + <%= article.date.strftime("%b %e %Y") %> +

+

+ <%= article.metadata[:page][:summary] %> +

+ + Read More + + <% end %> +<% end %> diff --git a/source/articles/index.html.erb b/source/articles/index.html.erb new file mode 100644 index 0000000..6d14853 --- /dev/null +++ b/source/articles/index.html.erb @@ -0,0 +1,26 @@ +--- +# Store article categories as a list containing the category, its name, +# description and icon. +categories: + - + title: Installing SplashKit + description: Installation Guides + icon: fa-download + href: /articles/installation + - + title: Using SplashKit + description: Coding Examples + icon: fa-code + href: /articles/guides + - + title: Contributing + description: Extend SplashKit + icon: fa-plus + href: /articles/contributing +--- + +
    + <% current_page.data.categories.each do |category| %> + <%= partial 'partials/grid_item', locals: category %> + <% end %> +
diff --git a/source/articles/installation/index.html.erb b/source/articles/installation/index.html.erb new file mode 100644 index 0000000..3ed8c40 --- /dev/null +++ b/source/articles/installation/index.html.erb @@ -0,0 +1,26 @@ +--- +# Store platforms as just a key/value pair respective to what the +# platform name is and its icon +platforms: + - + title: Windows + description: Installation Guide + icon: fa-windows + href: /articles/installation/windows + - + title: macOS + description: Installation Guide + icon: fa-apple + href: /articles/installation/mac + - + title: Ubuntu + description: Installation Guide + icon: fa-linux + href: /articles/installation/ubuntu +--- + +
    + <% current_page.data.platforms.each do |platform| %> + <%= partial 'partials/grid_item', locals: platform %> + <% end %> +
diff --git a/source/articles/installation/mac/index.html.md b/source/articles/installation/mac/index.html.md new file mode 100644 index 0000000..964cc4b --- /dev/null +++ b/source/articles/installation/mac/index.html.md @@ -0,0 +1,16 @@ +--- + +title: Installing SplashKit on macOS +tags: installation,mac + +--- + +To get SplashKit installed on macOS, follow the four steps: + +- **[Step 1](/articles/installation/mac/step-1)**: Install Xcode Command Line Tools +- **[Step 2](/articles/installation/mac/step-2)**: Install SplashKit SDK +- **[Step 3](/articles/installation/mac/step-3)**: Install Visual Studio Code +- **[Step 4](/articles/installation/mac/step-4)**: Install Language Tools + +Once you have all of these steps complete you should be setup and ready to +start building SplashKit applications in the language of your choice. diff --git a/source/articles/installation/mac/languages/dotnet.html.md b/source/articles/installation/mac/languages/dotnet.html.md new file mode 100644 index 0000000..1ec4d6b --- /dev/null +++ b/source/articles/installation/mac/languages/dotnet.html.md @@ -0,0 +1,69 @@ +--- + +title: Installing the .NET Core SDK on macOS +tags: installation,mac,dotnet + +--- + +This guide assists with installing the [.NET Core SDK](https://microsoft.com/net/core) on macOS. + +1. Firstly, we need to install the [Homebrew Package Manager](https://brew.sh). + Copy and paste the command given on the website into your terminal. + + ![Installing Homebrew](images/install-gifs/mac/install-brew.gif) + + You will need to enter in your password into the terminal to install + Homebrew. Whilst you may type into the keyboard, no password characters + will appear for security reasons. + +1. Now use `brew` from your terminal to to install the .NET Core SDK: + + ```bash + $ brew cask install dotnet-sdk + ``` + + You will also need to link the `dotnet` command into `/usr/local/bin`: + + ```bash + $ ln -s /usr/local/share/dotnet/dotnet /usr/local/bin + ``` + +1. To test if the .NET Core was installed successfully, see if the `dotnet` command exists. + + ``` + $ dotnet + ``` + + If you're seeing `command not found`, you may you can execute the following command + to fix it: + + ```bash + $ ln -s /usr/local/share/dotnet/dotnet /usr/local/bin + ``` + + ![Known issues with dotnet install](images/install-gifs/mac/dotnet-known-issues.gif) + + Should you have any other installation issues, review the .NET core [release notes](https://github.com/dotnet/core/tree/master/release-notes) + or raise an issue on [GitHub](https://github.com/splashkit/splashkit-macos/issues). + +1. In Visual Studio Code you should install the following extensions: + + - [C#](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp) + - [C# XML Documentation Comments](https://marketplace.visualstudio.com/items?itemName=k--kato.docomment) + - [vscode-icons](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons) + + You can do this from the command line by executing: + + ```bash + code --install-extension ms-vscode.csharp + code --install-extension k--kato.docomment + code --install-extension robertohuertasm.vscode-icons + ``` + + You can also search for them by opening up the extensions panel. + You can use the ⌘+x to open the panel. Then search for the name + and click install: + + ![Installing VSCode C# Extensions](images/install-gifs/extensions.gif) + +Return to the [overview of the macOS install](/articles/installation/mac.html). diff --git a/source/articles/installation/mac/step-1.html.md b/source/articles/installation/mac/step-1.html.md new file mode 100644 index 0000000..005f491 --- /dev/null +++ b/source/articles/installation/mac/step-1.html.md @@ -0,0 +1,29 @@ +--- + +title: Installing Xcode Command Line Tools +tags: installation,mac + +--- + +The Command Line Tools provided by Xcode provide a large amount of developer +tools required to compile and develop applications. + +To do this, open up the _Terminal_ application by: + +1. opening _Finder_ (the first app in the Dock), +1. clicking _Applications_ in the sidebar, +1. opening the _Utilities_ folder, +1. double-clicking the _Terminal_ app. + +If you cannot find _Applications_ in your sidebar or can't find _Utilities_, +you can also jump straight to the _Utilities_ folder by opening Finder and +using the ⌘+Shift+U shortcut. + +Now type into the Terminal the following command, and hit return on your keyboard +to execute it. + +```bash +xcode-select --install +``` + +![Installing Command Line Tools](/install-gifs/mac/installing-cmd-line-tools.gif) diff --git a/source/articles/installation/mac/step-2.html.md b/source/articles/installation/mac/step-2.html.md new file mode 100644 index 0000000..7ad0adc --- /dev/null +++ b/source/articles/installation/mac/step-2.html.md @@ -0,0 +1,24 @@ +--- + +title: Installing the SplashKit SDK +tags: installation,mac + +--- + +1. Code the following code and paste and run it within the Terminal. + + ``` + $ bash <(curl -s https://raw.githubusercontent.com/splashkit/skm/master/install-scripts/skm-install.sh) + ``` + + This is the code from the [SplashKit Homepage](http://splashkit.io). + + ![](images/install-gifs/mac/2.gif) + +1. Restart the terminal and execute `skm` in the terminal to test SplashKit was successfully installed. + + ![](images/install-gifs/mac/3.gif) + +[Next - Install Visual Studio Code](/articles/installation/mac/step3.html) + +Return to the [overview of the macOS install](/articles/installation/mac.html). diff --git a/source/articles/installation/mac/step-3.html.md b/source/articles/installation/mac/step-3.html.md new file mode 100644 index 0000000..e2cccae --- /dev/null +++ b/source/articles/installation/mac/step-3.html.md @@ -0,0 +1,18 @@ +--- + +title: Installing Visual Studio Code +tags: installation,mac + +--- + +1. Download `Visual Studio Code`, found at [code.visualstudio.com](https://code.visualstudio.com). + + ![](images/install-gifs/mac/4.gif) + +1. Install Visual Studio Code. + + ![](images/install-gifs/mac/5.gif) + +[Next - Install Language Tools](/articles/installation/mac/step4.html) + +Return to the [overview of the macOS install](/articles/installation/mac.html). diff --git a/source/articles/installation/mac/step-4.html.md b/source/articles/installation/mac/step-4.html.md new file mode 100644 index 0000000..d28bba9 --- /dev/null +++ b/source/articles/installation/mac/step-4.html.md @@ -0,0 +1,21 @@ +--- + +title: Installing Language-Specific Tools +tags: installation,mac + +--- + +SplashKit works with a number of programming languages. +Each of these has its own set of tools you will need to install. + +* For C#, install the [.NET Core](/articles/installation/mac/languages/dotnet) SDK. +* For C++, you're _already_ ready to go. + +Guides for other supported languages like Python and Pascal are coming soon. + +## What's next? + +Congratulations! If you've followed these steps correctly, then you will have +installed all the tools needed to start programming with SplashKit! + +It's time to get programming... diff --git a/source/articles/installation/ubuntu/index.html.md b/source/articles/installation/ubuntu/index.html.md new file mode 100644 index 0000000..2aa7781 --- /dev/null +++ b/source/articles/installation/ubuntu/index.html.md @@ -0,0 +1,16 @@ +--- + +title: Installing SplashKit on Ubuntu +tags: installation,ubuntu + +--- + +To get SplashKit installed on Ubuntu, follow the four steps: + +- **[Step 1](/articles/installation/ubuntu/step-1)**: Ensure your Ubuntu version is supported +- **[Step 2](/articles/installation/ubuntu/step-2)**: Install pre-requisites for SplashKit +- **[Step 3](/articles/installation/ubuntu/step-3)**: Install SplashKit SDK +- **[Step 4](/articles/installation/ubuntu/step-4)**: Install Visual Studio Code + +Once you have all of these steps complete you should be setup and ready to +start building SplashKit applications in the language of your choice. diff --git a/source/guides/installation/ubuntu/step1.html.md b/source/articles/installation/ubuntu/step-1.html.md similarity index 78% rename from source/guides/installation/ubuntu/step1.html.md rename to source/articles/installation/ubuntu/step-1.html.md index 1f43d65..42c5e00 100644 --- a/source/guides/installation/ubuntu/step1.html.md +++ b/source/articles/installation/ubuntu/step-1.html.md @@ -1,3 +1,10 @@ +--- + +title: Ensuring your version of Ubuntu is supported +tags: installation,ubuntu + +--- + # Check that your version of Ubuntu is supported SplashKit requires Ubuntu version 16.04 or greater to operate without @@ -28,7 +35,7 @@ To check which version of Ubuntu you are running, follow the steps below. ![Checking verison compatibility](images/install-gifs/Ubuntu/interpret-version.jpg) Once you have confirmed that your version is supported, move on to the -[next step - Install pre-requisites for SplashKit](/guides/installation/ubuntu/step2.html). +[next step - Install pre-requisites for SplashKit](/articles/installation/ubuntu/step2.html). Return to the -[overview of the Ubuntu Linux install](/guides/installation/ubuntu.html). +[overview of the Ubuntu Linux install](/articles/installation/ubuntu.html). diff --git a/source/guides/installation/ubuntu/step2.html.md b/source/articles/installation/ubuntu/step-2.html.md similarity index 75% rename from source/guides/installation/ubuntu/step2.html.md rename to source/articles/installation/ubuntu/step-2.html.md index 9f4d2ea..431be8e 100644 --- a/source/guides/installation/ubuntu/step2.html.md +++ b/source/articles/installation/ubuntu/step-2.html.md @@ -1,7 +1,12 @@ -# Install pre-requisites for SplashKit on Ubuntu +--- -Once you have -[confirmed that your version of Ubuntu is supported](/guides/installation/ubuntu/step1.html) +title: Installing Prerequsites for SplashKit +tags: installation,ubuntu + +--- + +Once you have +[confirmed that your version of Ubuntu is supported](/articles/installation/ubuntu/step1.html) you will need to install a list of required software packages in order for SplashKit to operate on Ubuntu. @@ -39,7 +44,7 @@ for SplashKit to operate on Ubuntu. 4. Install libpng12 (Ubuntu 17.04 users only) - If your [version of Ubuntu](/guides/installation/ubuntu/step1.html) is less than 17.04, you may skip this step. + If your [version of Ubuntu](/articles/installation/ubuntu/step1.html) is less than 17.04, you may skip this step. To install libpng12, copy and paste the code below into your terminal, one line at a time. @@ -51,8 +56,8 @@ for SplashKit to operate on Ubuntu. ``` -Once you have completed this step, move on to the -[next step - Install SplashKit library](/guides/installation/ubuntu/step3.html). +Once you have completed this step, move on to the +[next step - Install SplashKit library](/articles/installation/ubuntu/step3.html). Return to the -[overview of the Ubuntu Linux install](/guides/installation/ubuntu.html). +[overview of the Ubuntu Linux install](/articles/installation/ubuntu.html). diff --git a/source/guides/installation/ubuntu/step3.html.md b/source/articles/installation/ubuntu/step-3.html.md similarity index 80% rename from source/guides/installation/ubuntu/step3.html.md rename to source/articles/installation/ubuntu/step-3.html.md index 00dceb2..3346338 100644 --- a/source/guides/installation/ubuntu/step3.html.md +++ b/source/articles/installation/ubuntu/step-3.html.md @@ -1,6 +1,11 @@ -# Install the SplashKit Library on Ubuntu +--- -Once you have [installed the pre-requisite packages](/guides/installation/ubuntu/step2.html), you can +title: Installing the SplashKit SDK +tags: installation,ubuntu + +--- + +Once you have [installed the pre-requisite packages](/articles/installation/ubuntu/step2.html), you can install the SplashKit library. 1. Open up a terminal. @@ -47,8 +52,8 @@ install the SplashKit library. ``` Once you have completed the installation of SplashKit, move on to the -[next step - Install Visual Studio Code](/guides/installation/ubuntu/step4.html) +[next step - Install Visual Studio Code](/articles/installation/ubuntu/step4.html) Return to the -[overview of the Ubuntu Linux install](/guides/installation/ubuntu.html). +[overview of the Ubuntu Linux install](/articles/installation/ubuntu.html). diff --git a/source/guides/installation/ubuntu/step4.html.md b/source/articles/installation/ubuntu/step-4.html.md similarity index 76% rename from source/guides/installation/ubuntu/step4.html.md rename to source/articles/installation/ubuntu/step-4.html.md index e23081c..297b81c 100644 --- a/source/guides/installation/ubuntu/step4.html.md +++ b/source/articles/installation/ubuntu/step-4.html.md @@ -1,6 +1,11 @@ -# Install Visual Studio Code on Ubuntu +--- -Once you have the [installed SplashKit library](/guides/installation/ubuntu/step3.html) you +title: Installing Visual Studio Code +tags: installation,ubuntu + +--- + +Once you have the [installed SplashKit library](/articles/installation/ubuntu/step3.html) you can download and install Visual Studio Code to use as a source code editor. 1. Download [Visual Studio Code](https://code.visualstudio.com/) @@ -30,4 +35,4 @@ can download and install Visual Studio Code to use as a source code editor. ![Installing Visual Studio Code on Ubuntu](images/install-gifs/Ubuntu/install-vsc.gif) Return to the -[overview of the Ubuntu Linux install](/guides/installation/ubuntu.html). +[overview of the Ubuntu Linux install](/articles/installation/ubuntu.html). diff --git a/source/articles/installation/windows/index.html.md b/source/articles/installation/windows/index.html.md new file mode 100644 index 0000000..c97cd86 --- /dev/null +++ b/source/articles/installation/windows/index.html.md @@ -0,0 +1,24 @@ +--- + +title: Installing SplashKit on Windows +tags: installation,windows + +--- + +To get SplashKit installed on Windows, follow the four steps: + +- **[Step 1](/articles/installation/windows/step-1)**: Install the MSYS2 terminal +- **[Step 2](/articles/installation/windows/step-2)**: Install SplashKit SDK +- **[Step 3](/articles/installation/windows/step-3)**: Install Visual Studio Code +- **[Step 4](/articles/installation/windows/step-4)**: Install Language Tools + +Once you have all of these steps complete you should be setup and ready to +start building SplashKit applications in the language of your choice. + + diff --git a/source/guides/installation/windows/dotnet.html.md b/source/articles/installation/windows/languages/dotnet.html.md similarity index 67% rename from source/guides/installation/windows/dotnet.html.md rename to source/articles/installation/windows/languages/dotnet.html.md index a7d300f..2590dbf 100644 --- a/source/guides/installation/windows/dotnet.html.md +++ b/source/articles/installation/windows/languages/dotnet.html.md @@ -1,8 +1,13 @@ -# Install Dotnet Code +--- + +title: Installing the .NET Core SDK on Windows +tags: installation,windows,dotnet + +--- To get programming with C#, you can install the Dotnet Core tools -1. Go to the [dotnet core](https://www.microsoft.com/net/core) page. +1. Go to the [dotnet core](https://www.microsoft.com/net/core) page. Select `windows`, `command line/other` then download the `.net core sdk`. @@ -12,4 +17,4 @@ To get programming with C#, you can install the Dotnet Core tools ![](images/install-gifs/Windows/9.gif) -Return to the [overview of the windows install](/guides/installation/windows.html). \ No newline at end of file +Return to the [overview of the windows install](/articles/installation/windows.html). diff --git a/source/guides/installation/windows/clang.html.md b/source/articles/installation/windows/languages/gcc.html.md similarity index 77% rename from source/guides/installation/windows/clang.html.md rename to source/articles/installation/windows/languages/gcc.html.md index f319986..417605d 100644 --- a/source/guides/installation/windows/clang.html.md +++ b/source/articles/installation/windows/languages/gcc.html.md @@ -1,4 +1,9 @@ -# Install clang in MSYS2 +--- + +title: Installing GCC on Windows +tags: installation,windows,clang + +--- 1. Open an MSYS2 terminal 1. Run the following command: @@ -15,7 +20,7 @@ - C++ (search for `ms-vscode.cpptools`) - vscode-icons (`robertohuertasm.vscode-icons`) - + ![](images/install-gifs/extensions.gif) -Return to the [overview of the Windows install](/guides/installation/windows.html). \ No newline at end of file +Return to the [overview of the Windows install](/articles/installation/windows.html). diff --git a/source/guides/installation/windows/step1.html.md b/source/articles/installation/windows/step-1.html.md similarity index 78% rename from source/guides/installation/windows/step1.html.md rename to source/articles/installation/windows/step-1.html.md index e22e2aa..ba78c6b 100644 --- a/source/guides/installation/windows/step1.html.md +++ b/source/articles/installation/windows/step-1.html.md @@ -1,4 +1,9 @@ -# Install MSYS2 +--- + +title: Installing MSYS2 +tags: installation,windows + +--- MSYS2 provide a unix terminal environment for Windows. We will need this to run the build commands to create our SplashKit programs. @@ -18,6 +23,6 @@ MSYS2 provide a unix terminal environment for Windows. We will need this to run ![](images/install-gifs/Windows/5.gif) -Once you have completed these step, move on to the [next step - installing SplashKit](/guides/installation/windows/step2.html). +Once you have completed these step, move on to the [next step - installing SplashKit](/articles/installation/windows/step2.html). -Return to the [overview of the windows install](/guides/installation/windows.html). \ No newline at end of file +Return to the [overview of the windows install](/articles/installation/windows.html). diff --git a/source/guides/installation/windows/step2.html.md b/source/articles/installation/windows/step-2.html.md similarity index 61% rename from source/guides/installation/windows/step2.html.md rename to source/articles/installation/windows/step-2.html.md index 18f873c..5b2c66a 100644 --- a/source/guides/installation/windows/step2.html.md +++ b/source/articles/installation/windows/step-2.html.md @@ -1,11 +1,16 @@ -# Install SplashKit Library +--- + +title: Installing the SplashKit SDK +tags: installation,windows + +--- Once you have MSYS2 installed, you can install the SplashKit library: 1. In your MSYS2 Terminal, paste and run the following line - `bash <(curl -s https://raw.githubusercontent.com/splashkit/skm/master/install-scripts/skm-install.sh)`. - + `bash <(curl -s https://raw.githubusercontent.com/splashkit/skm/master/install-scripts/skm-install.sh)`. + This can also be found on the [splashkit](http://www.splashkit.io). ![](images/install-gifs/Windows/6.gif) @@ -14,6 +19,6 @@ Once you have MSYS2 installed, you can install the SplashKit library: ![](images/install-gifs/Windows/7.gif) -[Next - Install Visual Studio Code](/guides/installation/windows/step3.html) +[Next - Install Visual Studio Code](/articles/installation/windows/step3.html) -Return to the [overview of the windows install](/guides/installation/windows.html). \ No newline at end of file +Return to the [overview of the windows install](/articles/installation/windows.html). diff --git a/source/guides/installation/windows/step3.html.md b/source/articles/installation/windows/step-3.html.md similarity index 54% rename from source/guides/installation/windows/step3.html.md rename to source/articles/installation/windows/step-3.html.md index c8e8cc0..a202077 100644 --- a/source/guides/installation/windows/step3.html.md +++ b/source/articles/installation/windows/step-3.html.md @@ -1,4 +1,9 @@ -# Install Visual Studio Code +--- + +title: Installing Visual Studio Code +tags: installation,windows + +--- SplashKit works with Visual Studio Code, a light weight, cross platform, customisable code editor. @@ -10,6 +15,6 @@ SplashKit works with Visual Studio Code, a light weight, cross platform, customi ![](images/install-gifs/Windows/11.gif) -[Next - Install Language Tools](/guides/installation/windows/step4.html) +[Next - Install Language Tools](/articles/installation/windows/step4.html) -Return to the [overview of the windows install](/guides/installation/windows.html). \ No newline at end of file +Return to the [overview of the windows install](/articles/installation/windows.html). diff --git a/source/guides/installation/windows/step4.html.md b/source/articles/installation/windows/step-4.html.md similarity index 53% rename from source/guides/installation/windows/step4.html.md rename to source/articles/installation/windows/step-4.html.md index 4237f0c..c4b4609 100644 --- a/source/guides/installation/windows/step4.html.md +++ b/source/articles/installation/windows/step-4.html.md @@ -1,9 +1,14 @@ -# Install language tools +--- + +title: Installing Language-Specific Tools +tags: installation,ubuntu + +--- SplashKit works with a number of programming languages. Each of these has its own set of tools you will need to install. -* For C#, install the [Dotnet core](/guides/installation/windows/dotnet.html) tools. -* For C++, install [g++](/guides/installation/windows/clang.html) in MSYS2. +- For C#, install the [Dotnet core](/articles/installation/languages/windows/dotnet) tools. +- For C++, install [g++](/articles/installation/windows/languages/clang) in MSYS2. ## What's next? diff --git a/source/guides/code-examples/database/index.html.erb b/source/guides/code-examples/database/index.html.erb deleted file mode 100644 index ba622cb..0000000 --- a/source/guides/code-examples/database/index.html.erb +++ /dev/null @@ -1,6 +0,0 @@ -

Database Guides

-
- <% find_guides_in_category('code-examples/database').each do |f| %> - <%= f[:doc_title] %> - <% end %> -
diff --git a/source/guides/code-examples/index.html.erb b/source/guides/code-examples/index.html.erb deleted file mode 100644 index 9305076..0000000 --- a/source/guides/code-examples/index.html.erb +++ /dev/null @@ -1,21 +0,0 @@ -
- -
-

Code examples

- - <% find_guide_categories('code-examples').each do |key| %> - - -
-
- <%= key.upcase %> -
-
Examples & guides
-
- - - <% end %> - -
- -
diff --git a/source/guides/code-examples/json/index.html.erb b/source/guides/code-examples/json/index.html.erb deleted file mode 100644 index b9c686d..0000000 --- a/source/guides/code-examples/json/index.html.erb +++ /dev/null @@ -1,6 +0,0 @@ -

JSON Guides

-
- <% find_guides_in_category('code-examples/json').each do |f| %> - <%= f[:doc_title] %> - <% end %> -
diff --git a/source/guides/code-examples/utilities/index.html.erb b/source/guides/code-examples/utilities/index.html.erb deleted file mode 100644 index b105dee..0000000 --- a/source/guides/code-examples/utilities/index.html.erb +++ /dev/null @@ -1,6 +0,0 @@ -

Guides for utilities

-
- <% find_guides_in_category('code-examples/utilities').each do |f| %> - <%= f[:doc_title] %> - <% end %> -
diff --git a/source/guides/contributing/index.html.md b/source/guides/contributing/index.html.md deleted file mode 100644 index 2a5729d..0000000 --- a/source/guides/contributing/index.html.md +++ /dev/null @@ -1,63 +0,0 @@ -# How to Write A SplashKit Guide - -This tutorial will cover the details of how to write a SplashKit guide for the SplashKit website. - -Tools needed: - - 1. A GitHub account. - 2. Ruby development environment (for building the SplashKit website). - 3. An awesome idea for a guide. - -## Getting Ready -1. In order to test your guide in the SplashKit website, you need to download the source code for the website. To do this, make sure you are logged into GitHub, and then [create a fork](https://help.github.com/articles/fork-a-repo/) of the SplashKit io repository on GitHub. Visit the [SplashKit.io Github](https://github.com/splashkit/splashkit.io) link and select `fork` on the top right. - -2. [Clone your fork](https://help.github.com/articles/cloning-a-repository/) by selecting `clone or download`, copying the link and cloning it to your computer. You can do this via git on the terminal, or using GitHub Desktop. - -3. Check the `README.md` of the cloned SplashKit website to ensure you have the correct version of the Ruby tools installed. - -## Writing The Guide. -1. In the project, locate the directory `source/guides/code-examples` and determine if you need to create a new directory for your guide. If you do, create the directory and name it appropriately, and make sure you create a file `index.html.erb` for that directory, using the template below (ensuring you replace [category] with your directories new name). - - ```erb -

[category] Guides

-
- <% find_guides_in_category('code-examples/[category]').each do |f| %> - <%= f[:doc_title] %> - <% end %> -
- ``` - -2. Create a file in the format `title.html.md` and add the following `meta` tags to the top of the file: - - ```html - - - - ``` - - Typically, the value of the `api-link-groups` should be the category in which the guide is in. - - The `api-link-functions` should contain a comma seperated list of all of the functions used within the guide. - - The above is an example for a guide named "Awesome JSON guide", which will appear in the `json` group, attached to a list of related `json` functions. - - Make sure you link your guide to the appropriate api groups and functions. - -
- Note: these tags are not rendered in the guide, they are used for parsing the api documentation. -
- -3. Write your guide! Remember to keep the language friendly, include examples and ensure it is high quality. All guides should be written in [Markdown](https://guides.github.com/features/mastering-markdown/). - - -## Test the guide. -Time to make sure everything looks right. Run `bundle exec middleman` and visit localhost to see the website. Naviate to the guides to *hopefully* see your awesome guide. Make sure it all looks good. Also ensure that all links to the API were successful by visiting the relevant api section. - -## Merging your guides into the SplashKit website -If it's all looking good, it's time to submit a `pull request` so that a member of the SplashKit team can view your proposed guide and get it published! - -To do this, push your changes via GitHub, and visit the GitHub webiste for your fork. View this [GitHub tutorial](https://help.github.com/articles/creating-a-pull-request/) for more details on how to do this. A member of the SplashKit team will view your guide, give feedback, and otherwise make sure everything looks good. Finally, they will then publish your guide! - -SplashKit is completely open source, and free to use - so any contributions to the project are appreciated! - -If at any stage of this process you run into any issues, feel free to contact Jake at `jake.renzella@deakin.edu.au` diff --git a/source/guides/index.html.erb b/source/guides/index.html.erb deleted file mode 100644 index 4e17385..0000000 --- a/source/guides/index.html.erb +++ /dev/null @@ -1,36 +0,0 @@ -
- -
-

Guides

- - -
-
- -
-

Installing SplashKit

-
Installation guides
-
- - -
-
- -
-

Using SplashKit

-
Code Examples
-
- - -
-
- -
-

Contributing To SplashKit

-
Guides
-
- - -
- -
diff --git a/source/guides/installation/index.html.erb b/source/guides/installation/index.html.erb deleted file mode 100644 index 3b0adaf..0000000 --- a/source/guides/installation/index.html.erb +++ /dev/null @@ -1,38 +0,0 @@ -
- -
-

Installation guides

- - -
-
- -
-

Windows

-
Installation guide
-
- - - -
-
- -
-

macOS

-
Installation guide
-
- - - -
-
- -
-

Ubuntu

-
Installation guide
-
- - -
- -
diff --git a/source/guides/installation/mac.html.md b/source/guides/installation/mac.html.md deleted file mode 100644 index fa21f64..0000000 --- a/source/guides/installation/mac.html.md +++ /dev/null @@ -1,10 +0,0 @@ -# Getting SplashKit installed on your system. - -To get SplashKit working on macOS - -* [Step 1](/guides/installation/mac/step1.html): Install Xcode command line tools -* [Step 2](/guides/installation/mac/step2.html): Install SplashKit library -* [Step 3](/guides/installation/mac/step3.html): Install Visual Studio Code -* [Step 4](/guides/installation/mac/step4.html): Install Language Tools - -Once you have all of these steps complete you should be setup and ready to start building SplashKit programs in the language of your choice. diff --git a/source/guides/installation/mac/dotnet/install.html.md b/source/guides/installation/mac/dotnet/install.html.md deleted file mode 100644 index 50ff63e..0000000 --- a/source/guides/installation/mac/dotnet/install.html.md +++ /dev/null @@ -1,41 +0,0 @@ -# Install Dotnet Core Tools - -1. Install the [dotnet core library](https://microsoft.com/net/core), and follow the installation steps. Firstly, we need to install the [Brew Package Manager](https://brew.sh). - - ![](images/install-gifs/mac/6.gif) - -1. And execute it in the terminal - - ![](images/install-gifs/mac/7.gif) - -1. Then copy each line of the install pre-requisites. - - ![](images/install-gifs/mac/8.gif) - -1. Continue on executing the install pre-requisites on the dotnet core page by copy-pasting the commands. - - ![](images/install-gifs/mac/9.gif) - -1. Install dotnet core SDK. - - ![](images/install-gifs/mac/10.gif) - -1. Run the installer. - - ![](images/install-gifs/mac/11.gif) - -1. To test if dotnet was installed successfully, execute the command: `dotnet` into your terminal. - - If you see `command not found`, don't worry! Executing `ln -s /usr/local/share/dotnet/dotnet /usr/local/bin` should fix it. - - ![](images/install-gifs/mac/12.gif) - -1. In Visual Studio Code you should install the following extensions: - - - C# (search for `ms-vscode.csharp`) - - C# XML Documentation Comments (`k--kato.docomment`) - - vscode-icons (`robertohuertasm.vscode-icons`) - - ![](images/install-gifs/extensions.gif) - -Return to the [overview of the macOS install](/guides/installation/mac.html). diff --git a/source/guides/installation/mac/step1.html.md b/source/guides/installation/mac/step1.html.md deleted file mode 100644 index b73e716..0000000 --- a/source/guides/installation/mac/step1.html.md +++ /dev/null @@ -1,9 +0,0 @@ -# Step 1 - Install Xcode tools - -Open the terminal, *Applications/utilities/Terminal*, and execute: `xcode-select --install`. - -![](/images/install-gifs/mac/1.gif) - -Once you have completed this step, move on to the [next step - installing SplashKit](/guides/installation/mac/step2.html). - -Return to the [overview of the macOS install](/guides/installation/mac.html). diff --git a/source/guides/installation/mac/step2.html.md b/source/guides/installation/mac/step2.html.md deleted file mode 100644 index 5e76fa4..0000000 --- a/source/guides/installation/mac/step2.html.md +++ /dev/null @@ -1,17 +0,0 @@ -# Step 2: Install SplashKit Library - -1. Code the following code and paste and run it within the Terminal. - - `bash <(curl -s https://raw.githubusercontent.com/splashkit/skm/master/install-scripts/skm-install.sh)`. - - This is the code from the [splashkit homepage](http://splashkit.io). - - ![](images/install-gifs/mac/2.gif) - -1. Restart the terminal and execute `skm` in the terminal to test SplashKit was successfully installed. - - ![](images/install-gifs/mac/3.gif) - -[Next - Install Visual Studio Code](/guides/installation/mac/step3.html) - -Return to the [overview of the macOS install](/guides/installation/mac.html). diff --git a/source/guides/installation/mac/step3.html.md b/source/guides/installation/mac/step3.html.md deleted file mode 100644 index e7785e0..0000000 --- a/source/guides/installation/mac/step3.html.md +++ /dev/null @@ -1,13 +0,0 @@ -# Install Visual Studio Code - -1. Download `Visual Studio Code`, found at [code.visualstudio.com](https://code.visualstudio.com). - - ![](images/install-gifs/mac/4.gif) - -1. Install Visual Studio Code. - - ![](images/install-gifs/mac/5.gif) - -[Next - Install Language Tools](/guides/installation/mac/step4.html) - -Return to the [overview of the macOS install](/guides/installation/mac.html). diff --git a/source/guides/installation/mac/step4.html.md b/source/guides/installation/mac/step4.html.md deleted file mode 100644 index a54e4a8..0000000 --- a/source/guides/installation/mac/step4.html.md +++ /dev/null @@ -1,10 +0,0 @@ -# Install language tools - -SplashKit works with a number of programming languages. Each of these has its own set of tools you will need to install. - -* For C#, install the [Dotnet core](/guides/installation/mac/dotnet/install.html) tools. -* For C++, you are ready to go! - - -## What's next? -Congratulations! If you've followed these steps correctly, then you will have installed all the tools needed to start programming with SplashKit! diff --git a/source/guides/installation/ubuntu.html.md b/source/guides/installation/ubuntu.html.md deleted file mode 100644 index 37537dc..0000000 --- a/source/guides/installation/ubuntu.html.md +++ /dev/null @@ -1,11 +0,0 @@ -# Getting SplashKit installed on your system. - -To get SplashKit working on Ubuntu: - -* [Step 1](/guides/installation/ubuntu/step1.html): Check that your version is supported -* [Step 2](/guides/installation/ubuntu/step2.html): Install pre-requisites for SplashKit -* [Step 3](/guides/installation/ubuntu/step3.html): Install SplashKit library -* [Step 4](/guides/installation/ubuntu/step4.html): Install Visual Studio Code - -Once you have all of these steps complete you should be setup and ready to -start building SplashKit programs in the language of your choice. diff --git a/source/guides/installation/windows.html.md b/source/guides/installation/windows.html.md deleted file mode 100644 index cdad2ce..0000000 --- a/source/guides/installation/windows.html.md +++ /dev/null @@ -1,14 +0,0 @@ -# Getting SplashKit installed on your system. - -To get SplashKit working on windows: - -* [Step 1](/guides/installation/windows/step1.html): Install MSYS2 terminal -* [Step 2](/guides/installation/windows/step2.html): Install SplashKit library -* [Step 3](/guides/installation/windows/step3.html): Install Visual Studio Code -* [Step 4](/guides/installation/windows/step4.html): Install Language Tools - -Once you have all of these steps complete you should be setup and ready to start building SplashKit programs in the language of your choice. - - \ No newline at end of file diff --git a/source/images/install-gifs/mac/6.gif b/source/images/install-gifs/mac/6.gif deleted file mode 100644 index e0912d8..0000000 Binary files a/source/images/install-gifs/mac/6.gif and /dev/null differ diff --git a/source/images/install-gifs/mac/12.gif b/source/images/install-gifs/mac/dotnet-known-issues.gif similarity index 100% rename from source/images/install-gifs/mac/12.gif rename to source/images/install-gifs/mac/dotnet-known-issues.gif diff --git a/source/images/install-gifs/mac/7.gif b/source/images/install-gifs/mac/install-brew.gif similarity index 100% rename from source/images/install-gifs/mac/7.gif rename to source/images/install-gifs/mac/install-brew.gif diff --git a/source/images/install-gifs/mac/1.gif b/source/images/install-gifs/mac/installing-cmd-line-tools.gif similarity index 100% rename from source/images/install-gifs/mac/1.gif rename to source/images/install-gifs/mac/installing-cmd-line-tools.gif diff --git a/source/index.html.erb b/source/index.html.erb index 2565ae9..c57ef04 100644 --- a/source/index.html.erb +++ b/source/index.html.erb @@ -14,7 +14,7 @@ 

<%= data.download.download_script.strip %>

- See the <%= link_to 'Installation Guides', '/guides/installation/index.html' %> for more details. + See the <%= link_to 'Installation Guides', '/articles/installation' %> for more details.

diff --git a/source/layouts/api/index.html.erb b/source/layouts/api/index.html.erb index c479422..f61ea50 100644 --- a/source/layouts/api/index.html.erb +++ b/source/layouts/api/index.html.erb @@ -2,10 +2,10 @@ <%= partial 'partials/page_header', locals: { title: name, brief: brief } %>
-
diff --git a/source/layouts/articles/code-guide.html.erb b/source/layouts/articles/code-guide.html.erb deleted file mode 100644 index 9ea4567..0000000 --- a/source/layouts/articles/code-guide.html.erb +++ /dev/null @@ -1,12 +0,0 @@ -<% wrap_layout :index do %> -
-
-
- <%= yield %> -
- -
-
-<% end %> diff --git a/source/layouts/articles/guides.erb b/source/layouts/articles/guides.erb new file mode 100644 index 0000000..f44567f --- /dev/null +++ b/source/layouts/articles/guides.erb @@ -0,0 +1,33 @@ +<% wrap_layout :'articles/index' do %> + +
+ <%# Author has written the guide %> + <% unless current_page.data[:author].nil? %> +

+ Written by + <% if current_page.data[:author_url] %> + <%= link_to current_page.data[:author], + current_page.data[:author_url] %> + <% else %> + <%= current_page.data[:author] %> + <% end %> + on <%= current_page.date.strftime("%b %e %Y") %> +

+ <% end %> + <%= yield %> +
+<% end %> diff --git a/source/layouts/articles/index.html.erb b/source/layouts/articles/index.html.erb index e239901..c17bb31 100644 --- a/source/layouts/articles/index.html.erb +++ b/source/layouts/articles/index.html.erb @@ -1,9 +1,10 @@ <% wrap_layout :index do %>
-
- <%= yield %> -
+ <% unless current_page.data.title.nil? %> +

<%= current_page.data.title %>

+ <% end %> + <%= yield %>
<% end %> diff --git a/source/layouts/articles/installation.html.erb b/source/layouts/articles/installation.html.erb new file mode 100644 index 0000000..64d5a81 --- /dev/null +++ b/source/layouts/articles/installation.html.erb @@ -0,0 +1,33 @@ +<% + # Get the current step from the URL. Now find the next and previous + # pages from the siblings of this current page. + this_step = current_page.url.match(/step-(\d)+/)[1].to_i + prev_page = current_page.siblings.find { |p| p.url.end_with?("step-#{this_step - 1}/") } + next_page = current_page.siblings.find { |p| p.url.end_with?("step-#{this_step + 1}/") } +%> +<% wrap_layout :'articles/index' do %> +

+ Step <%= this_step %> of <%= current_page.siblings.length + 1 %> +

+
+
+ <%= yield %> +
+
+ +<% end %> diff --git a/source/partials/_grid_item.html.erb b/source/partials/_grid_item.html.erb new file mode 100644 index 0000000..c87e63e --- /dev/null +++ b/source/partials/_grid_item.html.erb @@ -0,0 +1,9 @@ +
  • + <% link_to href, class: "sk-grid-btn" do %> + <% unless icon.nil? %> + + <% end %> +
    <%= title %>
    + <%= description %> + <% end %> +
    • diff --git a/source/partials/_navbar.html.erb b/source/partials/_navbar.html.erb index c74c4aa..5f815f0 100644 --- a/source/partials/_navbar.html.erb +++ b/source/partials/_navbar.html.erb @@ -14,7 +14,7 @@
  • - Guides + Articles & Guides
  • Contribute diff --git a/source/partials/api/_function.html.erb b/source/partials/api/_function.html.erb index 867b3cd..1a3c902 100644 --- a/source/partials/api/_function.html.erb +++ b/source/partials/api/_function.html.erb @@ -58,27 +58,23 @@ <% end # if params %> + <%# == Signatures == %>
    Signatures
    <%= snippet function.signatures %>
    - - <% if !guides.empty? %> + <%# == Guides == %> + <% function_guides = guides_for_function(guides, function) %> + <% unless function_guides.empty? %>
    Guides
    - <% guides.each do |g| %> - <% if !g[:api_linked_functions].empty? %> - <% g[:api_linked_functions].each do |f| %> - <% if function.unique_global_name.downcase == f.downcase %> - <%= g[:doc_title] %> - <% end # if function match %> - <% end # each function %> - <% end # if linked functions %> - <% end # each guide %> + <% function_guides.each do |guide| %> + <%= link_to guide.title, guide, class: 'btn btn-primary btn-sm', target: '_blank' %> + <% end %>
    <% end # if guides %> diff --git a/source/stylesheets/main.css.scss b/source/stylesheets/main.css.scss index cbd9fc0..41397d4 100644 --- a/source/stylesheets/main.css.scss +++ b/source/stylesheets/main.css.scss @@ -13,14 +13,15 @@ @import "partials/anchor"; @import "partials/body"; @import "partials/footer"; +@import "partials/grid"; @import "partials/navbar"; @import "partials/main"; @import "partials/page-header"; @import "partials/search"; +@import "partials/sidebar"; @import "partials/snippet"; @import "partials/splashkit-logo"; -@import "partials/_article"; -@import "partials/_guides"; +@import "partials/sticky"; // Index partials @import "partials/index/main"; @@ -28,3 +29,4 @@ @import "partials/api/article"; @import "partials/api/nav"; @import "partials/api/root-container"; +@import "partials/articles/article"; diff --git a/source/stylesheets/partials/_article.scss b/source/stylesheets/partials/_article.scss deleted file mode 100644 index 50e52e1..0000000 --- a/source/stylesheets/partials/_article.scss +++ /dev/null @@ -1,12 +0,0 @@ -.sk-article { - margin: 4rem auto 2.5em; - - @include media-breakpoint-down(sm) { - padding: 1.5rem 1.5rem 0; - margin: 0 auto; - } -} - -.sk-text-center { - text-align: center; -} diff --git a/source/stylesheets/partials/_grid.scss b/source/stylesheets/partials/_grid.scss new file mode 100644 index 0000000..5c78af5 --- /dev/null +++ b/source/stylesheets/partials/_grid.scss @@ -0,0 +1,41 @@ +ul.sk-grid { + list-style: none; + + li { + @extend .col-md-4; + @extend .col-md-3; + margin-bottom: 1em; + } + + a.sk-grid-btn { + padding: 3.5rem; + width: 100%; + display: inline-block; + background-color: $gray-lighter; + color: $body-color; + text-align: center; + text-decoration: none; + &:hover { + background-color: darken($gray-lighter, 3%); + i, header { + color: $brand-primary; + } + } + header { + font-size: 1.5rem; + } + small { + text-transform: uppercase; + color: lighten($body-color, 40%); + } + header, small { + font-weight: 500; + } + i { + @extend .fa-5x; + width: 100%; + display: block; + margin-bottom: 0.5rem; + } + } +} diff --git a/source/stylesheets/partials/_guides.scss b/source/stylesheets/partials/_guides.scss deleted file mode 100644 index cfe350e..0000000 --- a/source/stylesheets/partials/_guides.scss +++ /dev/null @@ -1,91 +0,0 @@ -.sk-guides-grid { - - .guide-row { - margin: 0 0 40px; - - &:last-of-type { - margin: 0; - } - } - - h3 { - margin: 0 0 0.75em; - @include media-breakpoint-down(md) { - margin: 0 0 0.25em; - } - } - - .coming-soon { - text-align: center; - text-transform: uppercase; - font-style: italic; - color: #aaa; - font-size: 14px; - padding: 20px 0; - } - - .guide { - padding: 10px; - display: block; - &:hover { - text-decoration: none; - } - - .inner { - background: #f4f4f4; - padding: 40px; - color: #444; - text-align: center; - - &:hover { - background: #eaeaea; - color: $brand-primary; - } - } - - .icon { - width: 90px; - height: 90px; - margin: 0 auto 20px; - - span { - text-align: center; - font-weight: 300; - font-size: 32px; - opacity: 0.5; - line-height: 90px; - } - } - - .icon-text { - width: 100%; - } - - h5 { - color: #999; - text-transform: uppercase; - font-size: 14px; - } - - } - - .guide.disabled { - opacity: 0.5; - cursor: not-allowed; - .inner { - &:hover { - color: #444; - } - } - } - -} - -.sk-guide-sidebar { - margin: 4rem auto 2.5em; - - @include media-breakpoint-down(sm) { - padding: 1.5rem 1.5rem 0; - margin: 0 auto; - } -} diff --git a/source/stylesheets/partials/_navbar.scss b/source/stylesheets/partials/_navbar.scss index b26ec8b..aebd801 100644 --- a/source/stylesheets/partials/_navbar.scss +++ b/source/stylesheets/partials/_navbar.scss @@ -41,17 +41,3 @@ body > nav.navbar.sk-navbar { } } } - -#sticky-nav { - position: -webkit-sticky; - position: sticky; - top: 2em; - height: auto; - max-height: 90vh; - overflow-x: hidden; -} -#sticky-nav:before, -#sticky-nav:after { - content: ''; - display: table; -} \ No newline at end of file diff --git a/source/stylesheets/partials/_sidebar.scss b/source/stylesheets/partials/_sidebar.scss new file mode 100644 index 0000000..8eaa96f --- /dev/null +++ b/source/stylesheets/partials/_sidebar.scss @@ -0,0 +1,34 @@ +aside.sk-sidebar { + @include media-breakpoint-down(xs) { + @include make-col(12); + padding: 2rem; + &::before { + content: "Contents"; + font-size: 2rem; + } + &::after { + // Horizontal rule + margin-top: 2rem; + border: 0; + border-top: 1px solid rgba(0, 0, 0, 0.1); + display: block; + width: 100%; + } + } + @include media-breakpoint-up(md) { + @include make-col(3); + @include make-col-push(9); + float: right; + padding-left: 2rem; + } +} +article.sk-content { + @include media-breakpoint-down(xs) { + @include make-col(12); + padding: 2rem; + } + @include media-breakpoint-up(md) { + @include make-col(9); + @include make-col-pull(3); + } +} diff --git a/source/stylesheets/partials/_sticky.scss b/source/stylesheets/partials/_sticky.scss new file mode 100644 index 0000000..e4abc26 --- /dev/null +++ b/source/stylesheets/partials/_sticky.scss @@ -0,0 +1,15 @@ +.sk-sticky-sidebar { + @include media-breakpoint-up(md) { + position: -webkit-sticky; + position: sticky; + top: 2em; + height: auto; + max-height: 90vh; + overflow-x: hidden; + } +} +.sk-sticky-sidebar:before, +.sk-sticky-sidebar:after { + content: ''; + display: table; +} diff --git a/source/stylesheets/partials/api/_api-section.scss b/source/stylesheets/partials/api/_api-section.scss index 7d6972c..8ede45d 100644 --- a/source/stylesheets/partials/api/_api-section.scss +++ b/source/stylesheets/partials/api/_api-section.scss @@ -1,3 +1,8 @@ +section.sk-api-section:first-of-type { + h3 { + padding-top: 0; + } +} section.sk-api-section { & + section.sk-api-section { margin-top: 2rem; @@ -9,14 +14,33 @@ section.sk-api-section { font-weight: 300; padding-top: 1.5em; } + .sk-api-overloaded { + margin-top: 1.5rem; + .list-group-item { + border: none; + padding: 0; + } + .list-group-item a { + padding: 0.75rem 1.25rem; + display: block; + &:hover { + background-color: lighten($gray-lightest, 2%); + text-decoration: none; + } + code:not(:last-child) { + margin-right: 1.5ex; + } + } + .list-group-item:not(:first-child) { + border-top: 1px solid #ddd; + } + + } .sk-api-description { font-size: 1rem; margin-bottom: 1.2rem; } dl { - dd a.guide-button { - margin: 0rem 0.5rem 0.5rem 0rem; - } dt { color: $text-muted; font-weight: 600; diff --git a/source/stylesheets/partials/api/_nav.scss b/source/stylesheets/partials/api/_nav.scss index 3de7bf1..c71859b 100644 --- a/source/stylesheets/partials/api/_nav.scss +++ b/source/stylesheets/partials/api/_nav.scss @@ -1,4 +1,4 @@ -.sk-api-root.container aside.sk-sidebar nav { +aside.sk-sidebar nav { ul.nav.sk-api-nav-root > li.nav-item { font-size: 0.9rem; font-weight: 300; diff --git a/source/stylesheets/partials/articles/_article.scss b/source/stylesheets/partials/articles/_article.scss new file mode 100644 index 0000000..e6b4b03 --- /dev/null +++ b/source/stylesheets/partials/articles/_article.scss @@ -0,0 +1,53 @@ +body.articles main#content .container { + margin-top: 3.5rem; +} + +.sk-article + .sk-sidebar { + margin-top: 4rem; + margin-bottom: 4rem; +} + +.sk-article:first-child { + margin: 4rem auto 2.5em; + + @include media-breakpoint-down(sm) { + padding: 1.5rem 1.5rem 0; + margin: 0 auto; + } +} + +.sk-article img { + @extend .img-thumbnail; +} + +.sk-text-center { + text-align: center; +} + +.sk-article-nav-root { + // Just use the API nav root style + @extend .sk-api-nav-root; +} + +a.sk-article-link { + color: unset; + margin-top: 1rem; + margin-bottom: 1rem; + border: 0; + border-top: 1px solid rgba(0, 0, 0, 0.1); + display: inline-block; + padding: 1rem; + &:hover { + text-decoration: none; + background-color: $gray-lightest; + span.sk-read-more { + color: $link-hover-color; + } + } + p { + font-size: 0.9rem; + } + span.sk-read-more { + color: $link-color; + } +}