text:
# PwnMe
![Coverage](https://img.shields.io/badge/coverage-78%25-yellowgreen.svg)
![Open Issues](https://img.shields.io/github/issues-raw/Mehigh17/PwnMe.svg)
![License](https://img.shields.io/github/license/Mehigh17/PwnMe.svg)

PwnMe is a small library wrapping Troy Hunt's [HIBP API](https://haveibeenpwned.com/API/v2). Is implements most of the vital functions.

## Usage

I recommend taking a quick glance on Troy's [website](https://haveibeenpwned.com/API/v2) if you're not familiar with what this API does.

*NB: The term 'account' signifies a valid email address or an username.*

### Wrapper

#### Get an account pastes
```cs
var client = new PwnMeClient();

// Gets the paste list for<EMAIL_ADDRESS>which could include informations about the source of the paste, or the date, etc.
var pastes = await<EMAIL_ADDRESS>```

#### Get a password occurence count
```cs
var client = new PwnMeClient();

// Number signifying how many times this password has been breached.
var count = await client.GetOccurences("Password123");

// Example of use
if(count > 5)
{
    /* ...
     * Invalidate user action
     */
    InformUser("This password has been breached too many times, use another one!");
}
```
#### Verify if a password has been pwned
```cs
var client = new PwnMeClient();
var isPwdBreached = await client.IsPwned("Password123");

// Example of use
if(isPwdBreached)
{
    /* ...
     * Invalidate user action
     */
    InformUser("This password has been breached, please use another one.");
}
```

#### Get account breaches
```cs
var client = new PwnMeClient();

// Gets all the breaches for a given account on 'some.domain', including all the additional details and excluding the unverified breaches.
var breaches = await<EMAIL_ADDRESS>truncated: false, domain: "some.domain", includeUnverified: false);
```

#### Get breaches for a domain
```cs
var client = new PwnMeClient();

// Gets all the breaches for a specified domain
var breaches = await client.GetBreaches("some.domain");
```


text:
**[Requirements](#requirements)** |
**[Installation](#installation)** |
**[Usage](#usage)** |
**[Events](#events)** |
**[Features](#features)** |
**[Suggestions](#suggestions)** |
**[Contributing](#contributing)** |
**[License](#license)**

# Symfony GuzzleBundle

[![Total Downloads](https://poser.pugx.org/eightpoints/guzzle-bundle/downloads.png)](https://packagist.org/packages/eightpoints/guzzle-bundle)
[![Monthly Downloads](https://poser.pugx.org/eightpoints/guzzle-bundle/d/monthly.png)](https://packagist.org/packages/eightpoints/guzzle-bundle)
[![Latest Stable Version](https://poser.pugx.org/eightpoints/guzzle-bundle/v/stable.png)](https://packagist.org/packages/eightpoints/guzzle-bundle)
[![Build Status](https://travis-ci.org/8p/GuzzleBundle.svg)](https://travis-ci.org/8p/GuzzleBundle)
[![License](https://poser.pugx.org/eightpoints/guzzle-bundle/license)](https://packagist.org/packages/eightpoints/guzzle-bundle)
[![Dependency Status](https://www.versioneye.com/user/projects/57c83100968d640039516d62/badge.svg?style=square)](https://www.versioneye.com/user/projects/57c83100968d640039516d62)
[![SensioLabsInsight](https://insight.sensiolabs.com/projects/39a6e10b-ce29-44f6-97ce-44b2ff230424/mini.png)](https://insight.sensiolabs.com/projects/39a6e10b-ce29-44f6-97ce-44b2ff230424)

This bundle integrates [Guzzle 6.x][1] into Symfony. Guzzle is a PHP framework for building RESTful web service clients.
It comes with a WSSE Auth Plugin that can be used optionally.

GuzzleBundle follows semantic versioning. Read more on [semver.org][2].

----

## Requirements
 - PHP 5.6 or above
 - Symfony 2.7 or above
 - [Guzzle PHP Framework][1] (included by composer)
 - [WSSE Auth Plugin][3] (included by composer)

----

## Installation
To install this bundle, run the command below and you will get the latest version by [Packagist][4].

``` bash
composer require eightpoints/guzzle-bundle
```

To use the newest (maybe unstable) version please add following into your composer.json:

``` json
{
    "require": {
        "eightpoints/guzzle-bundle": "dev-master"
    }
}
```

----

## Usage
Load bundle in AppKernel.php:
``` php
new EightPoints\Bundle\GuzzleBundle\GuzzleBundle()
```

Configuration in config.yml:
``` yaml
guzzle:
    # (de)activate logging/profiler; default: %kernel.debug%
    logging: true

    clients:
        api_payment:
            base_url: "http://api.domain.tld"

            # custom headers (@deprecated, will be removed in v6; new: "headers" in options (see below))
            headers:
                Accept: "application/json"

            # guzzle client options (full description here: https://guzzle.readthedocs.org/en/latest/request-options.html)
            # NOTE: "headers" option is not accepted here as it is provided as described above.
            options:
                auth:
                    - acme     # login
                    - pa55w0rd # password

                headers:
                    Accept: "application/json"

                timeout: 30

            # plugin settings
            plugin:
                wsse:
                    username:   "acme"
                    password:   "pa55w0rd"
                    created_at: "-10 seconds" # optional

        api_crm:
            base_url: "http://api.crm.tld"
            headers:
                Accept: "application/json"

        ...
```
All these settings are optional. If WSSE username is defined the WSSE plugin will be injected automatically.

Using services in controller (guzzle.client.**api_crm** represents the client name of the yaml config and is an instance of GuzzleHttp\Client):
``` php
/** @var \GuzzleHttp\Client $client */
$client   = $this->get('guzzle.client.api_crm');
$response = $client->get('/users');
```

----

## Events
Handling events.  Events are dispatched before and after the request to the remote host.
### Listening To Events
```xml
    <service id="listenerID" class="Your\ListenerClass\That\Implements\GuzzleEventListenerInterface">
        <tag name="kernel.event_listener" event="guzzle_bundle.pre_transaction" method="onPreTransaction" service="servicename"/>
    </service>
```

Your event Listener, or Subscriber **MUST** implement GuzzleBundle\Events\GuzzleEventListenerInterface.
Events dispatched are guzzle_bundle.pre_transaction, guzzle_bundle.post_transaction.
The service on the tag, is so that if you have multiple REST endpoints you can define which service a particular listener is interested in.

----

## Features
### Symfony Debug Toolbar / Profiler
<img src="/Resources/doc/img/debug_logs.png" alt="Debug Logs" title="Symfony Debug Toolbar - Guzzle Logs" style="width: 360px" />

----

## Suggestions
Adding aliases:
If you want to use different names for provided services you can use aliases. This is a good idea if you don't want
have any dependency to guzzle in your service name.
``` yaml
services:
   crm.client:
       alias: guzzle.client.api_crm
```

----

## Contributing
👍 If you would like to contribute to the project, please read the [CONTRIBUTING.md](CONTRIBUTING.md).

🎉 Thanks to the [contributors][5] who participated in this project.

----

## License
This bundle is released under the [MIT license](Resources/meta/LICENSE)

[1]: http://guzzlephp.org/
[2]: http://semver.org/
[3]: https://github.com/8p/guzzle-wsse-plugin
[4]: https://packagist.org/packages/eightpoints/guzzle-bundle
[5]: https://github.com/8p/GuzzleBundle/graphs/contributors

license: MIT

repository: kitlabs-cn/KitPHP

branch_name: refs/heads/master

extension: md

license_type: permissive

repo_name: kitlabs-cn/KitPHP


text:
# Change log

https://github.com/msansoni/atom-path-copy

## 0.15.0 - (2022-05-29)
- Fix issue [issue\#6](https://github.com/msansoni/atom-path-copy/issues/6)
- Fix issue [issue\#8](https://github.com/msansoni/atom-path-copy/issues/8)

## 0.14.0 - (2016-08-17)
- Improvements to notifications. Option for 'status' style atom-space-pen-views
  or 'pop-up' style atom-notifications. Choice can be toggled in package config

## 0.13.0 - (2016-08-15)
- Enhancement see [issue\#2](https://github.com/msansoni/atom-path-copy/issues/12) from [ethanclevenger92](https://github.com/ethanclevenger91)

## 0.12.4 - (2016-05-11)
- Keybinding able to parse any pane path, rather than only the
  atom-text-editor path

## 0.12.3 - (2016-05-11)
- Fix regression issue from 0.12.1

## 0.12.2 - (2016-05-11)
- Improvements for context menu
- Beautified path-copy.coffee

## 0.12.1 - (2016-05-11)
- getPath now replaced to get pane URI to handle ATOM URIs

## 0.12.0 - (2016-05-11)
- Enhancement see [issue\#1](https://github.com/msansoni/atom-path-copy/issues/1) from [maksad](https://github.com/maksad)
- Keybinding to copy current editor path

## 0.11.3 - (2016-04-24)
- Check for config options, display default menu item if zero are visible

## 0.11.2 - (2016-04-24)
- Changed handling of path retrieval

## 0.11.1 - (2016-04-23)
- Travis CI build test

## 0.11.0 - (2016-04-23)
- Toggle notifications on/off from settings/preferences
- Notifications are now dismissable

## 0.10.0 - (2016-04-23)
- Ability to specify quotation characters to surround the copied path
- Added notifications

## 0.9.0 - (2016-04-22)
- Public release

repository: msansoni/atom-path-copy

gha_language: CoffeeScript

gha_license_id: MIT

repo_name: msansoni/atom-path-copy


text:
Changes Coming...
=========

Note: I'm in the process of modulizing this library and adding support for the Raspberry Pi (while similtaneously keeping support for the Beagle Bone).  The next version of Gridlock will have some breaking changes to the API, but asside from that, from a front-end prospective it should feel the same.  You should be able to use Gridlock in the mean time, however I would recommend only doing so if you have already purchased hardware.  The Raspberry Pi may turn out to be a better option for a project like this, both in terms of cost and ease of setup, but I don't want to recommend that anyone purchase it until I have a more mature version of the new code available.  Stay tuned.

Gridlock
=========

Gridlock is a Node.JS application for controlling a Traffic Light

  - Designed for the Beagle Bone
  - Includes a frontend with a live preview
  - API for changing state of light
  - Pusher support
  - Support for a hardware button to change light modes

Installation
--------------

NOTE: instructions assume that you are working on a Beagle Bone with both git and npm installed

1. `git clone http://github.com/jonathansadowski/Gridlock.git`
2. `cd Gridlock`
3. `npm install nconf express socket.io websocket-client`
4. `node app.js`

Running Gridlock as a Service
--------------

NOTE: You may have to change the installation path inside of the startup.sh script if you installed Gridlock in a directory other than /root/Gridlock

1. `npm install -g forever`
2. `mv startup.sh /etc/init.d/Gridlock`
3. `chmod 755 /etc/init.d/Gridlock`
4. `ln -s /etc/init.d/Gridlock /etc/rc5.d/S42Gridlock`

More Information
--------------
  - [Project Page]
  - [Beagle Bone]

Hardware
--------------
Gridlock and Beagle Bone will work with a vast array of hardware -- everything from simple LEDs to relays.  I am currently using a [SainSmart 4-Channel 5V Solid State Relay] attached to the GPIO pins of the [Beagle Bone].  I was previously using the [SainSmart 4-Channel 5V Relay], which is a great relay, but because its a physical relay, you will hear a clicking noise when the light changes, which can be annoying in any of the "blinking" modes.  I would recommend the solid state version. For more information about the hardware I use, see the [Project Page].

  [Project Page]: http://jonathansadowski.com/projects/Gridlock
  [Beagle Bone]: http://amzn.to/beaglebone
  [SainSmart 4-Channel 5V Relay]: http://amzn.to/5VRelay
  [SainSmart 4-Channel 5V Solid State Relay]: http://amzn.to/5VSSRelay

repository: jonathansadowski/Gridlock

repo_name: jonathansadowski/Gridlock


text:
# Path Aggregation Network
This is an implementation of [Path Aggregation Network for Instance Segmentation](https://arxiv.org/pdf/1803.01534.pdf, "Path Aggregation Network for instance Segmentation"). The model generates bounding boxes and segmentation masks for each instance of an object in the image. It's based on [mattport Mask RCNN](https://github.com/matterport/Mask_RCNN) which using keras and tensorflow.

![Instance Segmentation Sample](assets/street.png)

To start up with this repo, please follow up the tutorial of [Mask RCNN README.md](https://github.com/matterport/Mask_RCNN/blob/master/README.md). The usage of both repos are same.

## **TODO**
- [ ] Test on benchmarks like COCO or cityscapes


text:
# Q-tools
Query and PDO tools for PHP

## Purpose
Q-Tools is a project to help provide dynamic PDO functionality for software projects. This includes a class based system,
where database tables, columns, and inputs can be whitelisted and filtered.

repository: ChemaSalazar/Q-tools

repo_name: ChemaSalazar/Q-tools


text:
---
title: Bootstrap Theming
path: plugins/ngrid-bootstrap/theming
parent: plugins/ngrid-bootstrap
ordinal: 0
tags: theme,theming,bootstrap
---
# Bootstrap Theming

There are 2 pre-built CSS themes provided in `@pebula/ngrid-bootstrap/themes`:

- default-light.css
- default-dark.css

If you're using Angular CLI & SCSS, this is as simple as including one line in your `styles.scss` file:

```scss
@use 'bootstrap/dist/css/bootstrap';
@use<EMAIL_ADDRESS>```

Alternatively, you can [add your chosen CSS file to the styles array of your project's angular.json file](https://angular.io/guide/workspace-config#styles-and-scripts-configuration) or just reference the file directly.

```html
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link<EMAIL_ADDRESS>rel="stylesheet">
```

## Customized Bootstrap Themes (SCSS)

While bootstrap comes with it's own theming SCSS framework it is not
part of or compatible with **nGrid**.
**nGrid's** theme system is based on the theme system from `@angular/material`.

Don't worry, it is possible, we simply need to map between bootstrap's colors, spacing and typography to **nGrid**.

I> **nGrid's** theme system is based on the material system refers only for the tolling and interfaces, how color schemas and palettes are defined.
The actual style is not material designed based and does not follow it's spec!

> Note that pre-built CSS themes are located in `@pebula/ngrid-bootstrap/themes` and the SCSS theming utilities are located in `@pebula/ngrid-bootstrap`

repository: shlomiassaf/ngrid

gha_language: TypeScript

repo_name: shlomiassaf/ngrid


text:
[![View detectOS on File Exchange](https://www.mathworks.com/matlabcentral/images/matlab-file-exchange.svg)](https://www.mathworks.com/matlabcentral/fileexchange/59695-detectos)

# detectOS

**detectOS** returns the name and version number of the operating system.

## Purpose

For the development of cross-platform apps in MATLAB, it is useful to know the operating system (OS) on which MATLAB is running, e.g. to select native fonts and font sizes (see **[getOSfont](https://www.mathworks.com/matlabcentral/fileexchange/60710-getosfont)**) or to fine-tune the layout and design of graphical user interface elements. **detectOS** returns the name and version number of the underlying OS for a wide range of platforms and OS versions.

## Usage

`OS = detectOS` returns the name of the operating system as a lowercase character vector, such as `'windows'`, `'macos'` (which includes OS X), `'solaris'`, `'aix'`, `'ubuntu'`, `'centos'`, and many other Unix/Linux distributions. It is thus much more fine-grained than MATLAB's built-in `ispc` / `ismac` / `isunix` and `computer` functions. If the OS cannot be determined, an error is thrown.

`[OS, OSVersion] = detectOS` also returns the OS version number as a numeric row vector. For example, Windows 7 SP1 (version 6.1.7601) is reported as `OS = 'windows'` and `OSVersion = [6, 1, 7601]`. If the OS version cannot be determined, a warning is issued and the empty numeric array is returned.

For a list of Windows releases, see [https://en.wikipedia.org/wiki/Ver_(command)](https://en.wikipedia.org/wiki/Ver_(command)).

For a list of macOS releases, see [https://support.apple.com/en-us/HT201260](https://support.apple.com/en-us/HT201260).

## Requirements

**detectOS** is compatible with MATLAB R2016b and later releases (version 1.0 iscompatible with R2013a and later releases). It was tested on the following operating systems (64-bit, unless otherwise stated) and should run on a wide variety of other Unix/Linux distributions without any modification:

* Windows 10 (10.0.10586)
* Windows 8.1 Update 1 (6.3.9600)
* Windows 7 (6.1.7601)
* Windows 7 (6.1.7601), 32-bit
* Windows XP Pro SP3 (5.1.2600),32-bit
* macOS Big Sur (11.2.3)
* macOS Catalina (10.15.7)
* macOS Sierra (10.12.1)
* OS X El Capitan (10.11.6)
* Ubuntu 16.04 LTS
* Ubuntu 15.10
* Ubuntu 14.04 LTS
* CentOS 7
* CentOS 6.8 (Final)

## Motivation

Another great tool returning information about the CPU and operating system is **[CPU Info](https://www.mathworks.com/matlabcentral/fileexchange/33155-cpu-info)**. Unfortunately, **CPU Info** does not differentiate between Unix/Linux distributions, and does not return sensible information about the OS version in these cases. Adding this capability was the main motivation for developing **detectOS**.

## Feedback

Please let me know if you have tested **detectOS** on other operating systems. Any feedback or suggestions for improvement are welcome!

repository: JorgWoehl/detectOS

repo_name: JorgWoehl/detectOS


text:
#Motivation:

A few months ago I saw a post on the PB Ideas Portal that caught my eye: https://goo.gl/ydw2ha
This was a something that had irritated me for a long while also, though you'd never really see the problem unless you are a common user of newer windows applications which use the newer Open dialog.

Regardless... Tonight I implemented a small part of it which I figured deserves a share. The code for the implementation turned out to be really simple, though finding the right controls to modify and the right events to send to the MapInfo open dialog was relatively difficult... (Can you believe there are 35 controls in that dialog?! Even though ≈16 are only ever 'clearly' visible at any one time... (It seems most of the controls are static controls which would explain things a bit more.))

#General Information:

## Purpose:
To test the ease of use of the newer "Open Dialog" used in many windows applications.

## Current version:
Whenever an Open File dialog, with a title "Open", appears in MapInfo, whether called from the ribbon interface, keyboard shortcut or MapBasic, the window shall be hidden and a newer Open dialog shall appear in it's place. (Note: If you have 2 screens it may appear on the other screen).
The user can select a file using the new open dialog. When clicking OK the information is sent back to MapInfo (via the hidden Open file dialog)

## Limitations:
Although the newer dialog is more powerful than the base dialog in some aspects (custom sidebars and richer address bar) it's also currently only an application to get a 'feel' for using the new style of open dialog. Here are a few limitations the current build has:

* File types other than .TAB are not included. (Dialogs for "Open Workspace" etc. remain unchanged.)
* Only 1 table can be opened at a time.
* 'Preferred View' drop down list is currently inaccessible.
* 'Create copy' checkbox is currently inaccessible.
* Accessories found in the top right button/drop down of the base dialog, are currently inaccessible. (Not entirely sure what these features are used for?)
* Environments Tested:
* Tested and working in Windows 7 | MapInfo Pro 12.5.1 64-Bit.
* Please let me know if this still works in later versions Windows and MapInfo!

## License:
MIT License

## Download:
https://github.com/sancarn/MapInfo_x64OpenDialogue/raw/master/MapInfo_OpenTable_x64.exe
Please inform me if this doesn't work for you!

## How to use:
After you have downloaded the executable, run it, and go open a table in MapInfo.

## How to 'uninstall':
The program installs itself in your startup folder when it is run. Go to "Start > All Programs > Startup" and delete the shortcut to the executable. If you wish, you can then delete the executable itself.

# Technical Information:

## Source Code:
As it goes with many open source applications, feel free to contribute to the upkeep of the application. Either message me with updates or fork the library.

 Using strictly DLL Calls you can call the shell open dialog and retrieve the information that's required from that dialog, though it is pretty complex. Then to force the user to use the dialog Peter's RIBBONLib can be used to replace the "Open" table icons with the our icon, however the user would still be able to open tables with Ctrl+O, bypassing the new dialog box.

My second idea was to use a COM based application. Such an application could easily detect keyboard shortcuts but that fell through when I couldn't figure out how to use the RIBBONLib via COM. (In fact PBSupport told me it was impossible. Even if it was possible though, there'd still be another issue. When MapBasic applications are used they will often call the OpenFileDlg() function. This would yet again be another method that would go unseen by our over-arching application.

My third idea, and the one I settled on, was to use window events. They may not be as elegant, and there are likely better ways using .NET to achieve these goals, but they get the job done and at this point I just wanted to test it out! So I quickly through together this application and here we are.

Ultimately the code works as follows:
We register a "OnWinExist" event, to wait for the Open dialog window.
When a Open dialog window exists, it triggers the event.
The event triggers a function.
The function hides the base "Open dialog" window and opens the standard "Open dialog" window.
After the file has been selected, the information is re-inserted into the old dialog and executed from there.

This is the only way that I could think of, which would account for all the cases where the user could be asked to open a tab file. Ribbon, Keyboard shortcut and MapBasic. And that's why it uses window events and also why the old window flicks onto the screen temporarily when you try to open a file.

All of the above would be pretty easy to add in so feel free to modify the source code as you wish!

If you have updates, tell me and I'll be happy to add them!

# Future implementations

* I'm currently working to get all other default MapInfo dialog options working with the x64 Open Dialog. These features will be accessible through a menu in the bottom left hand corner of the dialog.

# Old MapInfo Legacy Open Dialog:

Items highlighted in blue are things which are not available in the current version of the dialog.

![Comparison](/MapInfo Dialog v.s. x64Dialog.png)

# The x64 Open Dialog:

![Comparison](/OpenDlgx64.png)


text:
# Frontend Mentor - Base Apparel coming soon page solution

![Design preview for the Base Apparel coming soon page coding challenge](./design/desktop-preview.jpg)

This is a solution to the [Base Apparel coming soon page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/base-apparel-coming-soon-page-5d46b47f8db8a7063f9331a0). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

## Table of contents

- [Frontend Mentor - Base Apparel coming soon page solution](#frontend-mentor---base-apparel-coming-soon-page-solution)
  - [Table of contents](#table-of-contents)
  - [Overview](#overview)
    - [The challenge](#the-challenge)
    - [Screenshot](#screenshot)
    - [Links](#links)
  - [My process](#my-process)
    - [Built with](#built-with)
    - [What I learned](#what-i-learned)
    - [Continued development](#continued-development)
    - [Useful resources](#useful-resources)
  - [Author](#author)
  - [Acknowledgments](#acknowledgments)

## Overview
Greetings Everyone! This project is made for the purpose of practicing and improving my CSS skills.
This challenge is setup by [`Frontend Mentor`](https://www.frontendmentor.io/challenges/base-apparel-coming-soon-page-5d46b47f8db8a7063f9331a0). To know more about this challenge, read the *challenge.md*.

### The challenge

Users should be able to:

- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Receive an error message when the `form` is submitted if:
  - The `input` field is empty
  - The email address is not formatted correctly

**`Difficulty:`**` Newbie`

### Screenshot

Screen: `1440x800 desktop`
![1440x800 desktop screenshot](./screens/screenshot-desktop-1440x800.png)

Screen: `1440x800 active state desktop`
![1440x800 active state desktop screenshot](./screens/screenshot-desktop-active-state-1440x800.png)

Screen: `375x800 mobile`
![375x800 mobile screenshot](./screens/screenshot-mobile-375x800.png)

Screen: `375x800 active state mobile`
![375x800 mobile screenshot](./screens/screenshot-mobile-active-state-375x800.png)

### Links

- Solution URL: [Github repo url](https://github.com/almoratalla/Base-Apparel-coming-soon-page)
- Live Site URL: [My Github page](https://almoratalla.github.io/projects/learning/base-apparel-coming-soon)

## My process

### Built with

- Semantic HTML5 markup
- Flexbox
- Mobile-first workflow

### What I learned

My initial design choice for this single page is to either separate the image and the main section to separate containers or just keep it straight forward. But to keep it relatively simple, semantic and consistent, I just used a `global container` that will be a flex box that will hold its children into a column. The separation of the `image` and `main` section during desktop view depends on the `order` of the image to keep it on the right side.

### Continued development

I think this is pretty much done. Other possible continuation for this is the addition of connection to api's, connection to a newsletter service or storing of the email to a database

### Useful resources

- [Frontendmentor.io](https://www.frontendmentor.io/resources) - Frontendmentor itself has a list of great resources!.
- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) - Great reference for syntax and properties.
- [CSS reset](https://dev.to/hankchizljaw/a-modern-css-reset-6p3) - I don't follow this as a boilerplate but I use this as reference.
- [CSS Tricks!](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - Something I go back to as a reference for flexbox
- [Stack Overflow](https://stackoverflow.com/) - the ever loving!

## Author

- Website - [Alain Moratalla](https://github.com/almoratalla)
- Frontend Mentor - [@almoratalla](https://www.frontendmentor.io/profile/almoratalla)
- Twitter - [@almoratalla](https://twitter.com/almoratalla)

## Acknowledgments

I tip all the hats in the world for FrontEnd Mentor for giving these free challenges. I also would like to thank the one who picked this challenge for me, you inspire me to do better.

Lastly, thank you Rick for that great song!

branch_name: refs/heads/main


text:
# Page Toc Plugin (Anchors + Table of Contents)

The **Page Toc** Plugin is for [Grav CMS](http://github.com/getgrav/grav) that generates anchors based on HTML header tags, and can also create a table of contents from those headers.

With version `3.0` this plugin is able to automatically generate anchor links with hover-click capability without the need for other plugins (such as the `anchors` plugin).  This functionality operates independently from the now optional "table of contents" functionality.

![](assets/page-toc.png)

## Installation

Installing the Page Toc plugin can be done in one of two ways. The GPM (Grav Package Manager) installation method enables you to quickly and easily install the plugin with a simple terminal command, while the manual method enables you to do so via a zip file.

### GPM Installation (Preferred)

The simplest way to install this plugin is via the [Grav Package Manager (GPM)](http://learn.getgrav.org/advanced/grav-gpm) through your system's terminal (also called the command line).  From the root of your Grav install type:

    bin/gpm install page-toc

This will install the Page Toc plugin into your `/user/plugins` directory within Grav. Its files can be found under `/your/site/grav/user/plugins/page-toc`.

### Manual Installation

To install this plugin, just download the zip version of this repository and unzip it under `/your/site/grav/user/plugins`. Then, rename the folder to `page-toc`. You can find these files on [GitHub](https://github.com/team-grav/grav-plugin-page-toc) or via [GetGrav.org](http://getgrav.org/downloads/plugins#extras).

You should now have all the plugin files under

    /your/site/grav/user/plugins/page-toc

## Configuration

Before configuring this plugin, you should copy the `user/plugins/page-toc/page-toc.yaml` to `user/config/plugins/page-toc.yaml` and only edit that copy.

Here is the default configuration and an explanation of available options:

```yaml
enabled: true               # Plugin enabled
include_css: true           # Include CSS
active: true                # Anchor IDs processed and generated for all pages
start: 1                    # Start header tag level (1 = h1) for TOC
depth: 6                    # Depth from start (2 = 2 levels deep) for TOC
hclass:                     # Custom Header TOC styling classes
anchors:                    # Anchor configuration
  start: 1                  # Start header tag level (1 = h1)
  depth: 6                  # Depth from start (2 = 2 levels deep)
  link: true                # Enabled auto-generation of clickable link with fragment
  aria: Anchor              # Aria label to use
  class:                    # Custom Header anchor styling classes
  icon: '#'                 # Icon to use, can be a symbol, emoji, ascii etc.
  position: after           # Position to put the anchor, `before|after`
  copy_to_clipboard: true   # Copy to clipboard functionality (coming soon)
  slug_maxlen: 25           # Max length of slugs used for anchors
  slug_prefix:              # A prefix used in front of generated slugs
```

> You can now have `page-toc` automatically add anchors without there being a table of contents being used, just ensure  `active` to `true`.

By default, The plugin is `active` and will add header id attributes anchors for each header level found in a page.  You can set `active: false` and then activate on a page basis by adding this to the page frontmatter:

```yaml
page-toc:
  active: true
```

You can also configure which header tags to start and depth on when building the id attribute anchors by changing the `start` and `depth` values. This can also be done on a per-page basis.

For example if you had a start of `3` and a depth of `3` you would get a TOC for `h3`, `h4`, and `h5`.

## Usage

### Shortcode-like syntax in your content

You can use the following shortcode-like syntax in your content:

```md
[TOC] or [TOC/] or [toc] or [toc /]
```

This will replace the shortcode syntax with the Table of Contents with the `components/page-toc.html.twig` Twig template. Either the default one included in the `page-toc` plugin or an overridden version from your theme.

For example in Quark theme, you will need to create a folder called `components/` under `templates/` so the file will be copied to:

```shell
user/themes/quark/templates/components/page-toc.html.twig
```

NOTE: It's not required to set the TOC plugin `active` if you use the shortcode syntax in your content.  That is a good enough indication that you want the plugin to be active.

### Customizing specific anchors

There are situations where you want to have absolute control over the exact anchor link rather than letting page-toc create one for you.  The best way to achieve this is to add your own `id` attribute to the header tag.  This can be done either via HTML in your markdown directly:

```html
<h2 id="my-custom-anchor">H2 Header</h2>
```

Or via using the header shortcodes.  This approach is particularly useful if you have markdown inside your header tag:

```markdown
[h2 id="my-custom-anchor"]H2 _header_[/h2]
```

If an `id` is found in one of the header tags that page-toc is configured to use for anchors, then it will use the provided value for the anchor id.

### Anchor Shortcode

Page TOC now includes a `anchor` shortcode that allows you to manually add linkable fragments in your content.
The shortcode will automatically generate the link if no options are provided. Alternatively you can use the bbode syntax of `anchor="some-custom-id"` or you can explicity set it.  You can also set a `prefix` and let the shortcode autogenerate the rest.

For example:

```markdown

Ut sed nisl suscipit metus sollicitudin [anchor]<span>ornare</span>[/anchor] nec vitae nulla. In pretium massa ex, in [anchor="vulputate"]vulputate tellus[/anchor] accumsan vel.

Nullam [anchor id="tempor"]tempor quis lorem[/anchor] venenatis finibus. Curabitur dapibus nulla sed tristique pretium. Nullam tempor quis [anchor prefix="sec2.2-"]lorem venenatis finibus[/anchor].
```

An example of the resulting HTML link looks like:

```html
<a id="tempor" href="#tempor" class="inline-anchor" aria-label="Anchor">tempor quis lorem</a>
```

The `inline-anchor` CSS class is used by shortcodes and any manually generated elements so it can be styled as independently from other links or anchored headers.

### Twig Templating

When the plugin is `active` it will add anchors to the header tags of the page content as configured. You can simply include the provided Twig template:

```twig
{% block content %}
	{% include 'components/page-toc.html.twig' %}
	{{  content|raw }}
{% endblock %}
```

You can also add your **Table of Contents** HTML in your Twig template directly with the provided `toc()` Twig function:

For example:

```twig
{% if active or toc_config_var('active') %}
<div class="page-toc">
    {% set table_of_contents = toc(page.content) %}
    {% if table_of_contents is not empty %}
    <h4>{{ 'PLUGIN_PAGE_TOC.TABLE_OF_CONTENTS'|t }}</h4>
    {{ table_of_contents|raw }}
    {% endif %}
</div>
{% endif %}
```

The `toc_ordered()` Twig function does the same things as a the `toc()` function, except it uses an ordered list instead of an unordered one.

or via the `toc_items()` function which rather than returning HTML directly returns objects and you can manipulate the output as needed:

```twig
{% macro toc_loop(items) %}
    {% import _self as self %}
    {% for item in items %}
        {% set class = loop.first ? 'first' : loop.last ? 'last' : null %}
        <li {% if class %}class="{{ class }}"{% endif %}>
            <a href="{{ item.uri }}">{{ item.label }}</a>
            {% if item.children|length > 0 %}
                <ul>
                    {{ _self.toc_loop(item.children) }}
                </ul>
            {% endif %}
        </li>
    {% endfor %}
{% endmacro %}

{% if config.get('plugins.page-toc.active') or attribute(page.header, 'page-toc').active %}
<div class="page-toc">
    {% set table_of_contents = toc_items(page.content) %}
    {% if table_of_contents is not empty %}
        <h4>Table of Contents</h4>
        <ul class="page-toc">
            {{ _self.toc_loop(table_of_contents.children) }}
        </ul>
    {% endif %}
</div>
{% endif %}
```

To explictly build a table of contents for a block of content:

```markdown
{% block my_content %}
# Header 1

## Header 1.1

Nullam tempor quis lorem venenatis finibus. Maecenas ut condimentum nibh. Ut sed nisl suscipit metus sollicitudin ornare nec vitae nulla. Integer sed tortor eu ligula interdum rhoncus. Sed pulvinar ut massa et ullamcorper. Curabitur bibendum ante orci, nec porttitor dolor suscipit quis. Nulla et eros enim.

### Header 1.1.1

Integer sed tortor eu ligula interdum rhoncus.

## Header 1.2
{% endblock %}

#### Table O' Contents
{{ toc(block('my_content'), 2, 1) }}
```

The `add_anchors()` twig funtion can take a string or a block of content and automatically adds anchors to any headers found per the configuration for the page, but you can override the start and depth. For example here we have a Twig block but we just want to add anchors to the H2 tags:

```markdown
{% block my_content %}
# Header 1

## Header 1.1

Nullam tempor quis lorem venenatis finibus. Maecenas ut condimentum nibh. Ut sed nisl suscipit metus sollicitudin ornare nec vitae nulla. Integer sed tortor eu ligula interdum rhoncus. Sed pulvinar ut massa et ullamcorper. Curabitur bibendum ante orci, nec porttitor dolor suscipit quis. Nulla et eros enim.

### Header 1.1.1

Integer sed tortor eu ligula interdum rhoncus.

## Header 1.2
{% endblock %}

#### Anchors Away!
{{ add_anchors(block('my_content'), 2, 1) }}
```

### Limiting levels in output

As well as limiting the levels that the page TOC plugin will use in the table of contents, you can also limit the levels that are actually displayed. To do this you can pass an optional `start`, and `depth` value to the `toc()`, `toc_ordered()` , `toc_items()` and `add_anchors()` Twig functions:

```twig
{% set table_of_contents = toc(page.content, 3, 3) %}
```

This will only display `H3` , and **3** levels deeper (up to `H5`) in the TOC output.

## Credits

The majority of this plugin's functionality is provided by the [PHP TOC Generator](https://github.com/caseyamcl/toc) library by [Casey McLaughlin](https://github.com/caseyamcl). So Thanks for making this plugin for Grav possible!

repository: trilbymedia/grav-plugin-page-toc

branch_name: refs/heads/develop

gha_language: PHP

repo_name: trilbymedia/grav-plugin-page-toc


text:
# hp12

![GitHub release (latest by date including pre-releases)](https://img.shields.io/github/v/release/duarch/hp12?include_prereleases&style=flat-square)

An online version of HP 12C Calc


text:
# Make simple animations

Luxor.jl can help you build simple animations, by assembling
a series of PNG images into an animated GIF.

!!! note

    To make richer and more complex animations, use [Javis.jl](https://github.com/Wikunia/Javis.jl), which is designed specifically for the purpose.

## 1: A Julia spinner

The first thing to do is to create a `Movie` object. This acts as a useful way to pass information from function to function.

```julia
using Luxor
mymovie = Movie(400, 400, "mymovie")
```

The resulting animation will be 400 × 400 pixels.

To make the graphics, define a function called `frame()` (it doesn't have to be called that, but it's a good name) which accepts two arguments, a Scene object, and a framenumber (which  will be an integer).

A movie consists of one or more scenes. A scene determines how many Luxor drawings should be made into a sequence and what function should be used to make them. The framenumber lets you keep track of where you are in a scene.

Here's a simple `frame` function which creates a drawing.

```julia
function frame(scene::Scene, framenumber::Int64)
    background("white")
    norm_framenumber = rescale(framenumber,
        scene.framerange.start,
        scene.framerange.stop,
        0, 1)
    rotate(norm_framenumber * 2π)
    juliacircles(100)
end
```

This function is responsible for drawing all the graphics
for a single frame. The incoming frame number is converted
(normalized) to lie between 0 and 1 - ie. between the first
frame and the last frame of the scene. It's multiplied by 2π
and used as input to `rotate`. So, as the framenumber goes from 1 to the last frame in the scene, each drawing will
be rotated by an increasing angle from 0 to 2π. For example,
for a scene with 60 frames, framenumber 30 will set a
rotation value of about `2π * 0.5`.

The Scene object has details about the number of frames for this scene, including the number of times the `frame` function is called.

To actually build the animation, the [`animate`](@ref) function takes a movie and an array of one or more scenes and creates all the drawings required. It can also build a GIF.

```julia
animate(mymovie,
        [
            Scene(mymovie, frame, 1:60)
        ],
    creategif=true,
    pathname="juliaspinner.gif")
```

![julia spinner](../assets/figures/juliaspinner.gif)

Obviously, if you increase the range from 1:60 to, say,
1:300, you'll generate 300 drawings rather than 60, and the
rotation will take longer and will be much
smoother. Of course, you could change the framerate to be
something other than the default `30`.

## 2: Combining scenes

In the next example, we'll construct an animation that uses different scenes.

Consider this animation, showing the sun’s position for each hour of a 24 hour day. (It’s only a model...)

![sun24 animation](../assets/figures/sun24.gif)

Again, start by creating a movie, a useful handle that we can pass from function to function. We'll specify 24 frames for the entire animation.

```julia
sun24demo = Movie(400, 400, "sun24", 0:23)
```

We'll define a simple `backgroundfunction` function that draws a
background that will be used for all frames (since animated
GIFs like constant backgrounds):

```julia
function backgroundfunction(scene::Scene, framenumber)
    background("black")
end
```

A `nightskyfunction` draws the night sky, covering the entire drawing:

```julia
function nightskyfunction(scene::Scene, framenumber)
    sethue("midnightblue")
    box(O, 400, 400, action = :fill)
end
```

A `dayskyfunction` draws the daytime sky:

```julia
function dayskyfunction(scene::Scene, framenumber)
    sethue("skyblue")
    box(O, 400, 400, action = :fill)
end
```

The `sunfunction` draws a sun at 24 positions during the day. Since the framenumber will be a number between 0 and 23, this can be easily converted to lie between 0 and 2π.

```julia
function sunfunction(scene::Scene, framenumber)
    t = rescale(framenumber, 0, 23, 2pi, 0)
    gsave()
        sethue("yellow")
        circle(polar(150, t), 20, action = :fill)
    grestore()
end
```

And finally, tere's a `groundfunction` that draws the ground, the lower half of the drawing:

```julia
function groundfunction(scene::Scene, framenumber)
    gsave()
    sethue("brown")
    box(Point(O.x, O.y + 100), 400, 200, action = :fill)
    grestore()
    sethue("white")
end
```

To combine these together, we'll define a group of Scenes
that make up the movie. The scenes specify which functions
are to be used, and for which frames:

```julia
backdrop  = Scene(sun24demo, backgroundfunction, 0:23)   # every frame
nightsky  = Scene(sun24demo, nightskyfunction, 0:6)      # midnight to 06:00
nightsky1 = Scene(sun24demo, nightskyfunction, 17:23)    # 17:00 to 23:00
daysky    = Scene(sun24demo, dayskyfunction, 5:19)       # 05:00 to 19:00
sun       = Scene(sun24demo, sunfunction, 6:18)          # 06:00 to 18:00
ground    = Scene(sun24demo, groundfunction, 0:23)       # every frame
```

Finally, the `animate` function scans all the scenes in the
scenelist for the movie, and calls the specified functions for each
frame to build the animation:

```julia
animate(sun24demo, [
   backdrop, nightsky, nightsky1, daysky, sun, ground
   ],
   framerate=5,
   creategif=true)
```

![sun24 animation](../assets/figures/sun24.gif)

Notice that, for some frames, such as frame 0, 1, or 23, three of the functions are called: for others, such as 7 and 8, four or more functions are called.

### An alternative

As this is a very simple example, there is of course an easier way to make this particular animation.

We can use the incoming framenumber, rescaled, as the master
parameter that determines the position and appearance of all
the graphics.

```julia
function frame(scene, framenumber)
    background("black")
    n   = rescale(framenumber, scene.framerange.start, scene.framerange.stop, 0, 1)
    n2π = rescale(n, 0, 1, 0, 2π)
    sethue(n, 0.5, 0.5)
    box(BoundingBox(), action = :fill)
    if 0.25 < n < 0.75
        sethue("yellow")
        circle(polar(150, n2π + π/2), 20, action = :fill)
    end
    if n < 0.25 || n > 0.75
        sethue("white")
        circle(polar(150, n2π + π/2), 20, action = :fill)
    end
end
```

gha_language: Julia

gha_license_id: NOASSERTION


text:
## Docker build-file repository
This is intended for automated builds of a docker-image for
scientific web-apps based on
* NGinX
* Flask
* uwsgi
* Numpy
* Scipy
* Pandas
* Matplotlib

The original docker build environment is from
https://github.com/tiangolo/uwsgi-nginx-flask-docker

## License

This project is licensed under the terms of the Apache license.


text:
---
section: Layouts
page: Tabs
title: Design
order: 2
---

## Usage

<novo-grid columns="2" align="start" gap="2rem">

Tabs make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets. Tabs are used to section information over multiple pages within the same context. Only a single tab can be open at a time, allowing the user to focus on the information that the tab contains.

### Use When

- (✓) When a page contains a lot of information that can be clearly grouped and named.

  E.g. A Candidate record page can be split up into Work History, Credentials, Education, etc.

- (✓) For top level page navigation

  For example: Vertical tabs can be used in a side navigation to switch between pages or bottom tabs can be used in mobile.

### Don′t Use When

- (x) Do not use to separate related content into multiple parts or break up (inter)actions that are important to continue with the user’s workflow.

  A user should be able to start and finish an action within a single tab. Instead consider using a Stepper component. Within a form, to organize and grouping fields together use a section divider.

- (x) Do not use when the users needs to see the information on each tab at the same time.

  If users need to see correlated content that is not on the tab they are viewing, consider using a Slideout. Or when data needs to be grouped further, use Cards.

- (x) Do not use to control the view of a single component, instead use radio buttons or tiles (button bar / segmented button).

  Don’t use tab to switch table data between states (past, present) (original, adjusted).

</novo-grid>

## Anatomy

<novo-grid columns="2" align="start" gap="2rem">

1. **Container**

   Tabs consist of a title that is descriptive of the information it holds. The currently selected tab is indicated by a colored bar that sits either below or left of the title (depending on the configuration). When the amount of tabs doesn't fit in the given space, a dropdown labeled More is added to the far right side of the tab bar. This dropdown contains all the overflowing tabs.

1. **Active Indicator**

   This is the visual symbol that represents which tab is currently active or being viewed.

1. **Leading Icon (Optional)**

   Should be avoided unless absolutely necessary, primarily used for mobile or responsive design

1. **Trailing Icon (Optional)**

   Should be avoided unless absolutely necessary, primarily used to display status to user

</novo-grid>

## Best Practices

- Tab labels should provide clear and concise descriptions of the content within
  Avoid having more than 2 words unless the name of a product or entity prevents this.

- Tab contents should be categorically independent from the content of other tabs, so the user is not confused by where information might be.

## Color

> > ![placeholder](https://via.placeholder.com/350x250)
> >
> > **Theme - background**
> >
> > Any theme color can be applied to tabs which will make the background color match the color.
> > Any theme color can be applied to tabs with the `color` attribute to change the text color
>
> > ![placeholder](https://via.placeholder.com/350x250)
> >
> > **Regular tabs**
> >
> > The currently selected tab is indicated by the blue title and the blue bar that sits below or left of the title. The other tabs are using a grey font.
>
> > ![placeholder](https://via.placeholder.com/350x250)
> >
> > **White tabs**
> >
> > When tabs are used on a colored background, e.g. on a slide out, the currently selected tab is indicated by the white title and the white bar that sits below or left of the title. The other tabs are using a white font with a 70% opacity, leaving the background color to shine through.
> > {.two-columns}

## How to configure

<novo-grid columns="2" align="start" gap="2rem">

> ![placeholder](https://via.placeholder.com/350x250)
>
> - (✓) Horizontal Tabs
>
> This is the default behavior

> ![placeholder](https://via.placeholder.com/350x250)
>
> - (x) Vertical Tabs
>
> TBW...

</novo-grid>

## Patterns

<novo-grid columns="2" align="start" gap="2rem">

> **Tab with Status**
>
> When displaying a status for tab to the user add a trailing icon to that tab. eg. if the tab has an error state use a trailing icon[color=negative] for that tab.

![placeholder](https://via.placeholder.com/350x250)

> **White tabs**
>
> When tabs are used on a colored background, e.g. on a slide out, the currently selected tab is indicated by the white title and the white bar that sits below or left of the title. The other tabs are using a white font with a 70% opacity, leaving the background color to shine through.

![placeholder](https://via.placeholder.com/350x250)

</novo-grid>

## Accessibility

- When implementing logic to update which tab item is active be sure to account for triggering the state on click, touch, and keyboard interactions.
- `<novo-tabs>` should include the aria `tablist` role and novo-tab should include the aria tab role.
- If used for page navigation then novo-tabs should include the aria `nav` role

repository: bullhorn/novo-elements

repo_name: bullhorn/novo-elements


text:
django-httpsiframecookiesetter
==============================

A workaround for Safari's strict cookie policy when trying to write cookies from within an iframe under https.

This fix is specific to Django and the CSRF cookie.

If your view is within an iframe and is secure then Safari does not permit you to write any cookies if you are not on the same domain as that of the parent page. This is a problem when using Django when trying to POST forms as the CSRF cookie can not be written and therefore Django will not process the POST request.

Solution
-----

When a specified URL is visited _and_ the request is secure _and_ there is no CSRF cookie then the user is redirected to a non secure view which sets the CSRF cookie (safari allows this) and then redirects back to the secure URL.

Usage
-----
Add new midleware after session creation:

    MIDDLEWARE_CLASSES = (
        ...
        'httpsiframecookiesetter.middleware.CookieSetterMiddleware',
        ...
    )

OR use a decoreator instead of using the middleware. Middleware will check every request.

    from httpsiframecookiesetter.decorators import check_csrf

    @check_csrf
    def view(request, .....

add iframetoolbox to installed apps:

    INSTALLED_APPS = (
        ...
        'httpsiframecookiesetter',
        ...
    )

add url config:

    url(r'^cookiesetter/', include('httpsiframecookiesetter.urls')),

You can also set the URL to check - only URLs containing '/events/' will be processed and also change other settings below

    #iframe cookie setter settings
    COOKIESETTER_URL_TO_CHECK = '/i/events/'
    COOKIESETTER_BROWSERS =  ['Safari','Mobile Safari']
    COOKIESETTER_ADDITIONAL_CHECKS =  None
    COOKIESETTER_ONLY_HTTPS = False
    COOKIESETTER_LOADING_GRAPHIC = '/media/img/ajaxloader75_32.gif'

If needed overwrite templates with your message and style. For reference look at source (download url).

license: Unlicense


text:
flask-calendar
==============

A calendar using Flask, Jinja and Foundation's Orbit

## Requirements

Only Flask, Foundation framework is included.

## Run

`python server.py`


text:
# Gatsby multi-language starter with CMS

[Demo on Netlify](https://iceberg-gatsby-multilang.netlify.com/)

A starter Internationalization / i18n without third party plugins or packages for Posts and Pages. Different URLs dependending on the language. Focused on SEO, PWA, Image Optimization, Styled Components and more. This starter is also integrate with Netlify CMS to manage all pages, posts and images.

-   Translations by using GraphQL, hooks and context API
-   Content in markdown for pages and posts in different languages
-   General translations for any content
-   Creation of menus by using, jSON, translations and GraphQL
-   Netlify CMS to manage all pages, posts and images
-   Styled Components to styles
-   All important seetings for speedy and optimized images
-   Blog Posts list with pagination
-   Focus on SEO
-   PWA

## 🚀 Getting Started

Assuming [Gatsby](https://github.com/gatsbyjs/gatsby/) is installed, run the following commands to install the project:

**With gatsby-cli**:
```
$ gatsby new gatsby-multilanguage-site https://github.com/diogorodrigues/iceberg-gatsby-multilang.git
```

**With git clone**:
```
$ git clone https://github.com/diogorodrigues/iceberg-gatsby-multilang.git your-project-name # Clone the project

cd your-project-name

rm -rf .git
yarn install # or npm install
gatsby develop # or yarn run develop
```

Running `gatsby develop` you will see the following URLs:

```
http://localhost:8000
http://localhost:8000/___graphql
http://localhost:8000/admin
```

## File Structure

A quick look at the top-level files and directories you'll see in a Gatsby project.

```
├── blog
│   ├── markdown-file.en.md
│   ├── markdown-file.pt.md
├── config
│   ├── menu
│   │   ├── en.json
│   │   ├── pt.json
│   ├── translations
│   │   ├── en.json
│   │   ├── pt.json
│   ├── i18n.js
├── pages
│   ├── markdown-file.en.md
│   ├── markdown-file.pt.md
├── src
├── static
│   ├── admin
│   │   ├── config.yml
│   ├── assets
│   │   ├── img
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── wrapPageElement.js

```

1. **blog and pages directories**:
   All markdown files to generate pages and posts.

2. **config**:
   All language settings: languages, strings, menu...
   In `i18n.js` you can set the languages and some others important info

3. **src**:
   Components, hooks, templates and fixed pages (Different of markdown pages, these pages have the same url for all languages and the text content needs to be inserted in `config/translations` files).

4. **static**:
   Netlify settings and images.

5. **gatsby-browser.js**:
   External files and the layout wrapper setting.

6. **gatsby-config.js**:
   Gatsby plugins.

7. **gatsby-node.js**:
   Logic for generating pages and posts by manipulating GraphQL.

8. **wrapPageElement.js**
   As this component wraps every page (due to the wrapPageElement API) we can be sure to have the locale available everywhere!

## About Netlify CMS

You must change the Netlify data "repo" and "site_domain" according your Github repository in `static/admin/config.yml`.

```
backend:
    name: github
    repo: _owner-name/repo-name_ # Path to your GitHub repository
    branch: master
    site_domain: _site-url_ # If site extists
```

## Important notes:

-   General information for languages are defined in `config/i18n.js`.
-   The general content translations are located in `config/translations` and the `useTranslations` custom hook pulls these translations (via GraphQL query) and inserts them into the pages.
-   The menu items translations are located in `config/menu` and the `useMenu` custom hook pulls these translations (via GraphQL query) and inserts them into the pages.
-   Due to the use of a global layout / context API and the language code passed to all pages (see `gatsby-node.js`), you know on all pages which language is currently displayed.
-   Blogposts are defined in `blog` directory and pages are defined in `pages` directory. The file names are the `slug` of the posts and pages.
-   A custom component for the  tag is implemented - this way links can stay the same for every language, without the need to manually write path prefixes.

## Deploy

---

💜 _Thanks_

---

This project started based on [this solution](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-i18n) to create a manner to provide translations, but I added a lots of other solutions based on my projects needs (like menu from GraphQL, markdown for pages, pagination, image optmization, styled components, PWA, CMS and more). Feel free to use this solution if you want. :)

repository: aakbarkhan/iceberg-gatsby

gha_language: JavaScript

repo_name: aakbarkhan/iceberg-gatsby