From 32caf7dcf4866f4814f5d3a518e994191e90ffa1 Mon Sep 17 00:00:00 2001 From: bgoonz Date: Wed, 4 May 2022 08:53:45 +0000 Subject: [PATCH 1/4] hi --- static/admin/config.yml | 388 +- static/ads.txt | 80 +- static/assets/webfonts/fa-brands-400.svg | 6904 +++++++++++----------- 3 files changed, 3686 insertions(+), 3686 deletions(-) diff --git a/static/admin/config.yml b/static/admin/config.yml index 080af474fb..06026e5fb2 100644 --- a/static/admin/config.yml +++ b/static/admin/config.yml @@ -1,194 +1,194 @@ -# Configuration file for NetlifyCMS visual editor -# It's here used only for blog posts and docs pages, to ease edits from external contributors -# for all options, see https://www.netlifycms.org/docs/configuration-options/ - -publish_mode: editorial_workflow # do not commit directly, fork to a branch first and create a pull request, this is necessary for the open_authoring option - -backend: - name: github # external contributions open_authoring option requires the use of github, it does not work with git-gateway (and hence other git platforms) yet (although there are alternatives through Netlify Identity): https://www.netlifycms.org/docs/open-authoring/ - repo: bgoonz/BGOONZ_BLOG_2.0 # EDIT ME: path to the online repository to allow for external contributions, please update this to point to your repo - branch: master - open_authoring: true # allow external contributors without having to first give them access to the repository, their edits will be made on their own github repository and create a pull request automatically through the UI - -media_folder: /static/images/uploads # where media files such as images will be stored -public_folder: /images/uploads # url to media files when deployed - -show_preview_links: true # see https://www.netlifycms.org/docs/deploy-preview-links/ - -# site_url: https://your-site.com # edit and uncomment this line to enable previews -# display_url: https://your-site.com -# logo_url: https://your-site.com/images/logo.svg # custom logo -# locale: 'en' # UI language - -collections: - - name: docs - label: Docs - folder: src/pages/docs - create: true - #path: '/' # allows to walk inside folders, see https://www.netlifycms.org/docs/beta-features/#folder-collections-path and https://github.com/netlify/netlify-cms/issues/513 and nested collections which allow for recursive subfolders walking without requiring a specific path template: https://www.netlifycms.org/docs/beta-features/#nested-collections - slug: "{{title}}/index" - preview_path: "src/pages/docs/preview/{{slug}}" - #extension: md - media_folder: "{{media_folder}}/docs" - # adding a nested object will show the collection folder structure, see https://www.netlifycms.org/docs/beta-features/#nested-collections and https://github.com/netlify/netlify-cms/issues/4741#issuecomment-748627801 - summary: "{{title}} (last modified {{commit_date}})" # text displayed as the name of each entry in the UI listing - nested: - depth: 100 # max depth to show in the collection tree - #summary: '{{title}}' # optional summary for a tree node, defaults to the inferred title field - fields: - - { name: title, label: Title, widget: string } - - { name: template, label: Template, widget: hidden, default: "docs" } - - { - name: excerpt, - label: Excerpt, - widget: string, - required: false, - hint: A short description of this page, - } - - { name: body, label: Body, widget: markdown } - # adding a meta object with a path property allows editing the path of entries - # moving an existing entry will move the entire sub tree of the entry to the new location - meta: { path: { widget: parent, label: "Parent", index_file: "index" } } # use a widget type parent to get a dropdown selector for the path instead of a string https://github.com/netlify-labs/netlify-cms-widget-parent/blob/main/example/config.yml - - name: blog # used in routes, e.g., /admin/collections/blog - label: Blog # used in the UI - folder: src/pages/blog # relative url where the editable documents are stored - create: true # allow users to create new documents in this collection - slug: "{{title}}" # filename template, the adequate file extension (e.g., .md) will be automatically added - preview_path: "src/pages/blog/preview/{{title}}" - extension: md - media_folder: "{{media_folder}}/blog" - summary: "{{title}} published by {{commit_author}} ({{commit_date}})" - filter: { field: "cmseditable", value: true } # filter out blog/index.md, the homepage of blog posts, we don't want people to edit that - fields: # fields for each document, usually in front matter, default type is string - - { name: title, label: Title, widget: string } - - { name: template, label: Template, widget: hidden, default: "post" } - - { name: subtitle, label: Subtitle, widget: string, required: false } - - { name: excerpt, label: Excerpt, widget: string, required: false } - - { name: date, label: Date, widget: date } - - { - name: image, - label: "Cover Image", - widget: image, - allow_multiple: false, - required: false, - hint: "Cover image that will display at the top of the post.", - } - - { - name: thumb_image, - label: "Thumbnail image", - widget: image, - allow_multiple: false, - required: false, - hint: "Thumbnail image for the post in listings, should be the same as the cover image.", - } # can't copy another field (eg, image) yet: https://community.netlify.com/t/is-it-possible-to-set-a-dynamic-default-value-for-a-field/20079/3 - - { - name: image_position, - label: "Image position", - widget: select, - options: ["left", "top", "right"], - default: "right", - } - - { - name: author, - label: Author, - widget: relation, - collection: blog-authors, - value_field: "{{dirname}}/{{filename}}.{{extension}}", - search_fields: ["id", "first_name", "last_name"], - display_fields: ["first_name", "last_name"], - multiple: false, - required: false, - } - - { - name: categories, - label: Categories, - widget: relation, - collection: blog-categories, - value_field: "{{dirname}}/{{filename}}.{{extension}}", - search_fields: ["id", "title"], - display_fields: ["title"], - multiple: true, - required: false, - } - - { - name: tags, - label: Tags, - widget: relation, - collection: blog-tags, - value_field: "{{dirname}}/{{filename}}.{{extension}}", - search_fields: ["id", "title"], - display_fields: ["title"], - multiple: true, - required: false, - } - - { - name: show_author_bio, - label: "Show author's short bio?", - widget: boolean, - required: false, - default: false, - hint: "Display author's short bio at the end of the blog post", - } - - { - name: related_posts, - label: "Related posts", - widget: relation, - collection: blog, - valueField: "{{dirname}}/{{filename}}.{{extension}}", - searchFields: ["title"], - displayFields: ["title"], - multiple: true, - required: false, - hint: "Other related posts", - } - - { name: cmseditable, label: cmseditable, widget: hidden, default: true } - - { name: body, label: Body, widget: markdown } - - name: blog-authors - label: BlogAuthors - folder: src/data/authors - create: true - slug: "{{id}}" - extension: yaml - media_folder: "{{media_folder}}/blog" - summary: "{{first_name}} {{last_name}} ({{id}})" - fields: - - { name: id, label: Identifier, widget: string } - - { name: first_name, label: "First name", widget: string } - - { name: last_name, label: "Last name", widget: string, required: false } - - { name: photo, label: Photo, widget: image, required: false } - - { name: short_bio, label: Short bio, widget: markdown, required: false } - - name: blog-categories - label: BlogCategories - folder: src/data/categories - create: true - slug: "{{id}}" - extension: yaml - media_folder: "{{media_folder}}/blog" - fields: - - { name: id, label: Identifier, widget: string } - - { name: title, label: Title, widget: string } - - { - name: description, - label: Description, - widget: markdown, - required: false, - hint: "Short description, will be shown in page listing (ie, listing all posts from this category)", - } - #- { name: link, label: Listing page URL, widget: string, default: "blog/category/", pattern: ["blog/category/.+", "URL needs to start with `blog/category/`"], hint: "This is the URL of the page that will list all pages for this category." } # disable to leave empty, there will be no link and no issue but no listing - - name: blog-tags - label: BlogTags - folder: src/data/tags - create: true - slug: "{{id}}" - extension: yaml - media_folder: "{{media_folder}}/blog" - fields: - - { name: id, label: Identifier, widget: string } - - { name: title, label: Title, widget: string } - - { - name: description, - label: Description, - widget: markdown, - required: false, - hint: "Short description, will be shown in page listing (ie, listing all posts with this tag)", - } +# Configuration file for NetlifyCMS visual editor +# It's here used only for blog posts and docs pages, to ease edits from external contributors +# for all options, see https://www.netlifycms.org/docs/configuration-options/ + +publish_mode: editorial_workflow # do not commit directly, fork to a branch first and create a pull request, this is necessary for the open_authoring option + +backend: + name: github # external contributions open_authoring option requires the use of github, it does not work with git-gateway (and hence other git platforms) yet (although there are alternatives through Netlify Identity): https://www.netlifycms.org/docs/open-authoring/ + repo: bgoonz/BGOONZ_BLOG_2.0 # EDIT ME: path to the online repository to allow for external contributions, please update this to point to your repo + branch: master + open_authoring: true # allow external contributors without having to first give them access to the repository, their edits will be made on their own github repository and create a pull request automatically through the UI + +media_folder: /static/images/uploads # where media files such as images will be stored +public_folder: /images/uploads # url to media files when deployed + +show_preview_links: true # see https://www.netlifycms.org/docs/deploy-preview-links/ + +# site_url: https://your-site.com # edit and uncomment this line to enable previews +# display_url: https://your-site.com +# logo_url: https://your-site.com/images/logo.svg # custom logo +# locale: 'en' # UI language + +collections: + - name: docs + label: Docs + folder: src/pages/docs + create: true + #path: '/' # allows to walk inside folders, see https://www.netlifycms.org/docs/beta-features/#folder-collections-path and https://github.com/netlify/netlify-cms/issues/513 and nested collections which allow for recursive subfolders walking without requiring a specific path template: https://www.netlifycms.org/docs/beta-features/#nested-collections + slug: "{{title}}/index" + preview_path: "src/pages/docs/preview/{{slug}}" + #extension: md + media_folder: "{{media_folder}}/docs" + # adding a nested object will show the collection folder structure, see https://www.netlifycms.org/docs/beta-features/#nested-collections and https://github.com/netlify/netlify-cms/issues/4741#issuecomment-748627801 + summary: "{{title}} (last modified {{commit_date}})" # text displayed as the name of each entry in the UI listing + nested: + depth: 100 # max depth to show in the collection tree + #summary: '{{title}}' # optional summary for a tree node, defaults to the inferred title field + fields: + - { name: title, label: Title, widget: string } + - { name: template, label: Template, widget: hidden, default: "docs" } + - { + name: excerpt, + label: Excerpt, + widget: string, + required: false, + hint: A short description of this page, + } + - { name: body, label: Body, widget: markdown } + # adding a meta object with a path property allows editing the path of entries + # moving an existing entry will move the entire sub tree of the entry to the new location + meta: { path: { widget: parent, label: "Parent", index_file: "index" } } # use a widget type parent to get a dropdown selector for the path instead of a string https://github.com/netlify-labs/netlify-cms-widget-parent/blob/main/example/config.yml + - name: blog # used in routes, e.g., /admin/collections/blog + label: Blog # used in the UI + folder: src/pages/blog # relative url where the editable documents are stored + create: true # allow users to create new documents in this collection + slug: "{{title}}" # filename template, the adequate file extension (e.g., .md) will be automatically added + preview_path: "src/pages/blog/preview/{{title}}" + extension: md + media_folder: "{{media_folder}}/blog" + summary: "{{title}} published by {{commit_author}} ({{commit_date}})" + filter: { field: "cmseditable", value: true } # filter out blog/index.md, the homepage of blog posts, we don't want people to edit that + fields: # fields for each document, usually in front matter, default type is string + - { name: title, label: Title, widget: string } + - { name: template, label: Template, widget: hidden, default: "post" } + - { name: subtitle, label: Subtitle, widget: string, required: false } + - { name: excerpt, label: Excerpt, widget: string, required: false } + - { name: date, label: Date, widget: date } + - { + name: image, + label: "Cover Image", + widget: image, + allow_multiple: false, + required: false, + hint: "Cover image that will display at the top of the post.", + } + - { + name: thumb_image, + label: "Thumbnail image", + widget: image, + allow_multiple: false, + required: false, + hint: "Thumbnail image for the post in listings, should be the same as the cover image.", + } # can't copy another field (eg, image) yet: https://community.netlify.com/t/is-it-possible-to-set-a-dynamic-default-value-for-a-field/20079/3 + - { + name: image_position, + label: "Image position", + widget: select, + options: ["left", "top", "right"], + default: "right", + } + - { + name: author, + label: Author, + widget: relation, + collection: blog-authors, + value_field: "{{dirname}}/{{filename}}.{{extension}}", + search_fields: ["id", "first_name", "last_name"], + display_fields: ["first_name", "last_name"], + multiple: false, + required: false, + } + - { + name: categories, + label: Categories, + widget: relation, + collection: blog-categories, + value_field: "{{dirname}}/{{filename}}.{{extension}}", + search_fields: ["id", "title"], + display_fields: ["title"], + multiple: true, + required: false, + } + - { + name: tags, + label: Tags, + widget: relation, + collection: blog-tags, + value_field: "{{dirname}}/{{filename}}.{{extension}}", + search_fields: ["id", "title"], + display_fields: ["title"], + multiple: true, + required: false, + } + - { + name: show_author_bio, + label: "Show author's short bio?", + widget: boolean, + required: false, + default: false, + hint: "Display author's short bio at the end of the blog post", + } + - { + name: related_posts, + label: "Related posts", + widget: relation, + collection: blog, + valueField: "{{dirname}}/{{filename}}.{{extension}}", + searchFields: ["title"], + displayFields: ["title"], + multiple: true, + required: false, + hint: "Other related posts", + } + - { name: cmseditable, label: cmseditable, widget: hidden, default: true } + - { name: body, label: Body, widget: markdown } + - name: blog-authors + label: BlogAuthors + folder: src/data/authors + create: true + slug: "{{id}}" + extension: yaml + media_folder: "{{media_folder}}/blog" + summary: "{{first_name}} {{last_name}} ({{id}})" + fields: + - { name: id, label: Identifier, widget: string } + - { name: first_name, label: "First name", widget: string } + - { name: last_name, label: "Last name", widget: string, required: false } + - { name: photo, label: Photo, widget: image, required: false } + - { name: short_bio, label: Short bio, widget: markdown, required: false } + - name: blog-categories + label: BlogCategories + folder: src/data/categories + create: true + slug: "{{id}}" + extension: yaml + media_folder: "{{media_folder}}/blog" + fields: + - { name: id, label: Identifier, widget: string } + - { name: title, label: Title, widget: string } + - { + name: description, + label: Description, + widget: markdown, + required: false, + hint: "Short description, will be shown in page listing (ie, listing all posts from this category)", + } + #- { name: link, label: Listing page URL, widget: string, default: "blog/category/", pattern: ["blog/category/.+", "URL needs to start with `blog/category/`"], hint: "This is the URL of the page that will list all pages for this category." } # disable to leave empty, there will be no link and no issue but no listing + - name: blog-tags + label: BlogTags + folder: src/data/tags + create: true + slug: "{{id}}" + extension: yaml + media_folder: "{{media_folder}}/blog" + fields: + - { name: id, label: Identifier, widget: string } + - { name: title, label: Title, widget: string } + - { + name: description, + label: Description, + widget: markdown, + required: false, + hint: "Short description, will be shown in page listing (ie, listing all posts with this tag)", + } diff --git a/static/ads.txt b/static/ads.txt index ac37e8f9d2..693b316dea 100644 --- a/static/ads.txt +++ b/static/ads.txt @@ -1,40 +1,40 @@ -disqus.com, 4622518, DIRECT -google.com, pub-6650322601660058, RESELLER, f08c47fec0942fa0 -aax.media, AAXN9V74H, DIRECT -media.net, 8PR6YK195, RESELLER -pubmatic.com, 158984, RESELLER, 5d62403b186f2ace -indexexchange.com, 192393, RESELLER -rubiconproject.com, 23280, RESELLER, 0bfd66d529a55807 -openx.com, 543731411, RESELLER, 6a698e2ec38604c6 -appnexus.com, 3153, RESELLER, f5ab79cb980f11d1 -amxrtb.com, 105199574, DIRECT -appnexus.com, 12290, RESELLER -indexexchange.com, 191503, RESELLER, 50b1c356f2c5c8fc -pubmatic.com, 158355, RESELLER, 5d62403b186f2ace -lijit.com, 260380, RESELLER, fafdf38b16bf6b2b -sovrn.com, 260380, RESELLER, fafdf38b16bf6b2b -aniview.com, 616704c962b31624e671e171, RESELLER, 78b21b97965ec3f8 -advertising.com, 23089, RESELLER -appnexus.com, 12637, RESELLER, f5ab79cb980f11d1 -google.com, pub-3565385483761681, DIRECT, f08c47fec0942fa0 -pubmatic.com, 161335, RESELLER, 5d62403b186f2ace -rubiconproject.com, 13918, RESELLER, 0bfd66d529a55807 -adyoulike.com, 65821909b0ce70f6e87747d8f22c3cf0, DIRECT -appnexus.com, 9733, RESELLER -spotxchange.com, 230037, RESELLER, 7842df1d2fe2db34 -spotx.tv, 230037, RESELLER, 7842df1d2fe2db34 -appnexus.com, 2797, DIRECT -criteo.com, B-060574, DIRECT, 9fac4a4a87c2a44f -onetag.com, 5cd7fb62fac7ec9, DIRECT -openx.com, 537133236, RESELLER, 6a698e2ec38604c6 -pubmatic.com, 158685, RESELLER, 5d62403b186f2ace -rubiconproject.com, 13380, RESELLER, 0bfd66d529a55807 -sovrn.com, 279534, DIRECT, fafdf38b16bf6b2b -lijit.com, 279534, DIRECT, fafdf38b16bf6b2b -yahoo.com, 56704, DIRECT -taboola.com,1003147,DIRECT,c228e6794e811952 -spotx.tv,71451,RESELLER -advertising.com, 8603, RESELLER -contextweb.com, 560382, RESELLER -openx.com, 539154393, RESELLER -rubiconproject.com, 16698, RESELLER, 0bfd66d529a55807 +disqus.com, 4622518, DIRECT +google.com, pub-6650322601660058, RESELLER, f08c47fec0942fa0 +aax.media, AAXN9V74H, DIRECT +media.net, 8PR6YK195, RESELLER +pubmatic.com, 158984, RESELLER, 5d62403b186f2ace +indexexchange.com, 192393, RESELLER +rubiconproject.com, 23280, RESELLER, 0bfd66d529a55807 +openx.com, 543731411, RESELLER, 6a698e2ec38604c6 +appnexus.com, 3153, RESELLER, f5ab79cb980f11d1 +amxrtb.com, 105199574, DIRECT +appnexus.com, 12290, RESELLER +indexexchange.com, 191503, RESELLER, 50b1c356f2c5c8fc +pubmatic.com, 158355, RESELLER, 5d62403b186f2ace +lijit.com, 260380, RESELLER, fafdf38b16bf6b2b +sovrn.com, 260380, RESELLER, fafdf38b16bf6b2b +aniview.com, 616704c962b31624e671e171, RESELLER, 78b21b97965ec3f8 +advertising.com, 23089, RESELLER +appnexus.com, 12637, RESELLER, f5ab79cb980f11d1 +google.com, pub-3565385483761681, DIRECT, f08c47fec0942fa0 +pubmatic.com, 161335, RESELLER, 5d62403b186f2ace +rubiconproject.com, 13918, RESELLER, 0bfd66d529a55807 +adyoulike.com, 65821909b0ce70f6e87747d8f22c3cf0, DIRECT +appnexus.com, 9733, RESELLER +spotxchange.com, 230037, RESELLER, 7842df1d2fe2db34 +spotx.tv, 230037, RESELLER, 7842df1d2fe2db34 +appnexus.com, 2797, DIRECT +criteo.com, B-060574, DIRECT, 9fac4a4a87c2a44f +onetag.com, 5cd7fb62fac7ec9, DIRECT +openx.com, 537133236, RESELLER, 6a698e2ec38604c6 +pubmatic.com, 158685, RESELLER, 5d62403b186f2ace +rubiconproject.com, 13380, RESELLER, 0bfd66d529a55807 +sovrn.com, 279534, DIRECT, fafdf38b16bf6b2b +lijit.com, 279534, DIRECT, fafdf38b16bf6b2b +yahoo.com, 56704, DIRECT +taboola.com,1003147,DIRECT,c228e6794e811952 +spotx.tv,71451,RESELLER +advertising.com, 8603, RESELLER +contextweb.com, 560382, RESELLER +openx.com, 539154393, RESELLER +rubiconproject.com, 16698, RESELLER, 0bfd66d529a55807 diff --git a/static/assets/webfonts/fa-brands-400.svg b/static/assets/webfonts/fa-brands-400.svg index 1a35662c79..c5f544c7f2 100644 --- a/static/assets/webfonts/fa-brands-400.svg +++ b/static/assets/webfonts/fa-brands-400.svg @@ -1,3452 +1,3452 @@ - - - - - -Created by FontForge 20190112 at Tue May 7 11:33:44 2019 - By Robert Madole -Copyright (c) Font Awesome - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + +Created by FontForge 20190112 at Tue May 7 11:33:44 2019 + By Robert Madole +Copyright (c) Font Awesome + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From bf70215a15d462b1629137cb857e6b48106ae5a1 Mon Sep 17 00:00:00 2001 From: bgoonz Date: Wed, 4 May 2022 08:55:31 +0000 Subject: [PATCH 2/4] update --- src/pages/blog/vs-code-extensions.md | 2 +- .../get-started-with-gatsby/index.md | 353 ++++++++ src/pages/docs/tips/storybook/index.md | 68 -- src/pages/docs/tools/dev-utilities.md | 85 -- src/pages/docs/tools/index.md | 179 ---- src/pages/docs/tools/markdown-html.md | 38 - src/pages/docs/tutorials/algolia-search.md | 338 -------- src/pages/docs/tutorials/bash-commands-my.md | 800 ------------------ src/pages/docs/tutorials/bash.md | 565 ------------- src/pages/docs/tutorials/effect-hook.md | 502 ----------- .../docs/tutorials/get-file-extension.md | 92 -- src/pages/docs/tutorials/how-2-ubuntu.md | 99 --- src/pages/docs/tutorials/index.md | 14 - src/pages/docs/tutorials/psql-setup.md | 336 -------- src/utils/blm-badge.js | 125 +-- 15 files changed, 417 insertions(+), 3179 deletions(-) create mode 100644 src/pages/docs/netlify-cms-jamstack/get-started-with-gatsby/index.md delete mode 100644 src/pages/docs/tips/storybook/index.md delete mode 100644 src/pages/docs/tools/dev-utilities.md delete mode 100644 src/pages/docs/tools/index.md delete mode 100644 src/pages/docs/tools/markdown-html.md delete mode 100644 src/pages/docs/tutorials/algolia-search.md delete mode 100644 src/pages/docs/tutorials/bash-commands-my.md delete mode 100644 src/pages/docs/tutorials/bash.md delete mode 100644 src/pages/docs/tutorials/effect-hook.md delete mode 100644 src/pages/docs/tutorials/get-file-extension.md delete mode 100644 src/pages/docs/tutorials/how-2-ubuntu.md delete mode 100644 src/pages/docs/tutorials/index.md delete mode 100644 src/pages/docs/tutorials/psql-setup.md diff --git a/src/pages/blog/vs-code-extensions.md b/src/pages/blog/vs-code-extensions.md index b687822514..4d182322b5 100644 --- a/src/pages/blog/vs-code-extensions.md +++ b/src/pages/blog/vs-code-extensions.md @@ -5,7 +5,7 @@ subtitle: 10 must-have VS Code extensions for JavaScript developers excerpt: Developers will most likely argue for the rest of eternity about the most productive code editor and the best extensions. date: 2022-04-10T17:03:30.554Z -image: /blog/code_mg4k5cd9s4.png +image: /blog/vscode.png thumb_image: "" image_position: right author: src/data/authors/bgoon.yaml diff --git a/src/pages/docs/netlify-cms-jamstack/get-started-with-gatsby/index.md b/src/pages/docs/netlify-cms-jamstack/get-started-with-gatsby/index.md new file mode 100644 index 0000000000..268f0d5866 --- /dev/null +++ b/src/pages/docs/netlify-cms-jamstack/get-started-with-gatsby/index.md @@ -0,0 +1,353 @@ +--- +title: Get Started With Gatsby +template: docs +excerpt: Get Started With Gatsby +--- + +1. Create a new site + +It’ll ask for a site title and the name of the project’s directory. Continue following the prompts to choose your preferred language (JavaScript or TypeScript), CMS, styling tools and additional features. + +2. Once everything is downloaded you will see a message with instructions for navigating to your site and running it locally. + +The CLI created the site as a new folder with the name you chose in step 1. + +Start by going to the directory with + +Start the local development server with + +Gatsby will start a hot-reloading development environment accessible by default at `http://localhost:8000`. + +3. Now you’re ready to make changes to your site! + +Try editing the home page in `src/pages/index.js`. Saved changes will live reload in the browser. + +## [](https://www.gatsbyjs.com/docs/quick-start/#whats-next)What’s next? + +### [](https://www.gatsbyjs.com/docs/quick-start/#use-flags)Use flags + +The CLI also supports two flags: + +- `-y` skips the questionnaire +- `-ts` initializes your project with the [minimal TypeScript starter](https://github.com/gatsbyjs/gatsby-starter-minimal-ts) instead of the [minimal JavaScript starter](https://github.com/gatsbyjs/gatsby-starter-minimal) + +Flags are not positional, so these commands are equivalent: + +- `npm init gatsby -y -ts my-site-name` +- `npm init gatsby my-site-name -y -ts` + + + +Create a Gatsby site +-------------------- + +To create your first Gatsby site, you're going to use a command from the Gatsby command line interface (CLI): `gatsby new`. This command brings up an interactive prompt that asks you questions about the site you want to build. After you enter all the information, the CLI uses your answers to automatically generate your new Gatsby site. + +[![The welcome message for the interactive "gatsby new" command.](https://www.gatsbyjs.com/static/eab322d4f0a5a12bdc749ef0992c4e7c/321ea/gatsby-new-cli.png "The welcome message for the interactive "gatsby new" command.")](https://www.gatsbyjs.com/static/eab322d4f0a5a12bdc749ef0992c4e7c/e92cd/gatsby-new-cli.png) + +**Note:** For this Tutorial, your Gatsby CLI should be v4.8 or newer. To check what version you have installed, run the following command: + +Copycopy code to clipboard` + +gatsby --version + +` + +Need to update? Run the command below to get the latest version of the Gatsby CLI: + +Copycopy code to clipboard` + +npm install -g gatsby-cli + +` + +Let's take a closer look at the process: + +1. Open the command line, and use the `cd` command to change directories into the folder where you want to create your new Gatsby site. For example, if you wanted to create your new site on your desktop, you might type: + +Copycopy code to clipboard` + +cd Desktop + +` + +1. Run the following command from the command line. This will start up the interactive prompt to help you create a new Gatsby site. + +Desktop + +CopyDesktop: copy code to clipboard` + +gatsby new + +` + +**Having trouble with `gatsby new`?** If you had trouble globally installing `gatsby-cli` in Part 0, you can also create a new site by running `npm init gatsby` from the command line instead of `gatsby new`. + +1. When the prompt asks, **"What would you like to call your site?"** enter a name for your site. + +Copycopy code to clipboard` + +What would you like to call your site? + +✔ - My First Gatsby Site + +` + +1. When the prompt asks, **"What would you like to name the folder where your site will be created?"** use the default folder name, which will be based on the site name you chose. + +Copycopy code to clipboard` + +What would you like to name the folder where your site will be created? + +✔ Desktop/ my-first-gatsby-site + +` + +1. When the prompt asks, **"Will you be using JavaScript or TypeScript?"** choose **JavaScript**. + +Copycopy code to clipboard` + +Will you be using JavaScript or TypeScript? + +❯ JavaScript + + TypeScript + +` + +This tutorial doesn't require any prior TypeScript knowledge as it uses JavaScript. If you're familiar with TypeScript you can read the [Gatsby and TypeScript guide](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/) to learn about typings, files, and conventions. If you want to use TypeScript we recommend going through the tutorial first and then only afterwards convert the project to TypeScript. + +1. When the prompt asks, **"Will you be using a CMS?"** select **"No (or I'll add it later)"**. + +Copycopy code to clipboard` + +✔ Will you be using a CMS? + +- No (or I'll add it later) + +` + +In the future, you can use these options to tell `gatsby new` what features you want to add to your site, and `gatsby new` will automatically configure them for you. It's a much quicker way to set up new projects. + +But in this first site, you'll set things up manually to learn about how Gatsby's pieces fit together. + +1. When the prompt asks, **"Would you like to install a styling system?"** select **"No (or I'll add it later)"**. (You'll add styles manually later.) + +Copycopy code to clipboard` + +✔ Would you like to install a styling system? + +- No (or I'll add it later) + +` + +1. When the prompt asks, **"Would you like to install additional features with other plugins?"** use the arrow and Enter keys to select **"Done"**. + +Copycopy code to clipboard` + +✔ Would you like to install additional features with other plugins? + +- Done + +` + +1. The prompt will show you a summary of what `gatsby new` will do. It should look something like the output below. + +Copycopy code to clipboard` + +Thanks! Here's what we'll now do: + + 🛠 Create a new Gatsby site in the folder my-first-gatsby-site + +? Shall we do this? (Y/n) › Yes + +` + +1. When the prompt asks, **"Shall we do this?"** enter **"Y"**. The `gatsby new` command will start building your site. Your internet download speed will affect how long this command takes to run. After it finishes, you should see a message like this: + +Copycopy code to clipboard` + +🎉 Your new Gatsby site My First Gatsby Site has been successfully + +created at ~/Desktop/my-first-gatsby-site. + +Start by going to the directory with + + cd my-first-gatsby-site + +Start the local development server with + + npm run develop + +See all commands at + + https://www.gatsbyjs.com/docs/gatsby-cli/ + +` + +Congratulations, you're now the owner of a brand-new Gatsby site! + +[](https://www.gatsbyjs.com/docs/tutorial/part-1/#run-your-site-locally)Run your site locally +--------------------------------------------------------------------------------------------- + +So far, you've generated the code for your site, but what does it actually look like in a web browser like Firefox or Google Chrome? To find out, you'll first need to start up your site's local development server. + +The **development server** is a useful tool for when you're working on your site locally (from your own computer). When your development server is running, you can use a web browser to interact with your local copy of your site. That way, you can test out changes to your code, to make sure they work before you actually publish a new version of your site to the internet. + +To start up your development server, do the following: + +1. In the command line, change into the directory you created for your site: + +~/Desktop + +Copy~/Desktop: copy code to clipboard` + +cd my-first-gatsby-site + +` + +**Tip:** Whenever you want to run any commands for your site, you need to be in the context for that site. That is, your command line needs to be pointed at the directory where your site's code lives. + +1. From your site directory, start the development server by running the following command: + +~/Desktop/my-first-gatsby-site + +Copy~/Desktop/my-first-gatsby-site: copy code to clipboard` + +gatsby develop + +` + +If you weren't able to install the Gatsby command line interface globally, you can start your development server using the following command instead: + +Copycopy code to clipboard` + +npm run develop + +` + +1. After a few moments, the command line should output a message like the following, telling you your development server is ready to go! + +Copycopy code to clipboard` + +You can now view my-first-gatsby-site in the browser. + +⠀ + + http://localhost:8000/ + +⠀ + +View GraphiQL, an in-browser IDE, to explore your site's data and + +schema + +⠀ + + http://localhost:8000/___graphql + +` + +1. Open your favorite web browser and navigate to `http://localhost:8000`. + +[![The default home page generated by the "gatsby new" command.](https://www.gatsbyjs.com/static/b79cb66545b144295a8c6a5efeaafb20/321ea/localhost-new-site.png "The default home page generated by the "gatsby new" command.")](https://www.gatsbyjs.com/static/b79cb66545b144295a8c6a5efeaafb20/94cea/localhost-new-site.png) + +And there it is: your very first Gatsby site! 🎉 + +You'll be able to visit the site locally at `http://localhost:8000/` for as long as your development server is running. (That's the process you started by running the `gatsby develop` command.) To stop running that process (or to "stop running the development server"), go back to your terminal window, hold down the "control" key, and then hit "c" (`ctrl-c`). To start it again, run `gatsby develop` again! + +**Note:** If you are using VM setup like vagrant and/or would like to listen on your local IP address, run `gatsby develop --host=0.0.0.0`. Now, the development server listens on both `http://localhost` and your local IP. + +[](https://www.gatsbyjs.com/docs/tutorial/part-1/#set-up-a-github-repo-for-your-site)Set up a GitHub repo for your site +----------------------------------------------------------------------------------------------------------------------- + +GitHub is a website that many developers use to back up and share their code online. By uploading your code to GitHub, you'll be able to work on the same codebase from multiple computers. You'll also be able to use Gatsby Cloud to build and host your site. + +1. Each codebase on GitHub is stored in its own **repository** (also called a "repo", for short). To create a new repository for your blog, click the plus icon in the top-right corner of the navigation bar. Select "New repository". + + [![A dropdown in the navigation bar reveals the "New repository" button.](https://www.gatsbyjs.com/static/bf74830c88d3f8b0287b58cf397be992/321ea/new-repo-button.png "A dropdown in the navigation bar reveals the "New repository" button.")](https://www.gatsbyjs.com/static/bf74830c88d3f8b0287b58cf397be992/18539/new-repo-button.png) + +2. When filling out the form for your new repo, you can make it public or private. (This only affects the visibility of your code on GitHub. Your site will still be visible to everyone once you deploy it with Gatsby Cloud.) Leave the initialization option checkboxes unchecked. + + [![The GitHub form to create a new repository. It's set to create a public repo called "my-first-gatsby-site". The options to add a README, .gitignore file, and license are unchecked.](https://www.gatsbyjs.com/static/94ec685d2adefdf4d2aac5b3364acba9/321ea/new-repo-options.png "The GitHub form to create a new repository. It's set to create a public repo called "my-first-gatsby-site". The options to add a README, .gitignore file, and license are unchecked.")](https://www.gatsbyjs.com/static/94ec685d2adefdf4d2aac5b3364acba9/3d68f/new-repo-options.png) + +3. To push your existing code from your computer to your new GitHub repository, enter the commands below in the command line. Be sure to swap out `YOUR_GITHUB_USERNAME` for your actual username and `YOUR_GITHUB_REPO_NAME` with the name you gave your GitHub repo (like `my-first-gatsby-site`). + + Copycopy code to clipboard` + + git remote add origin https://github.com/YOUR_GITHUB_USERNAME/YOUR_GITHUB_REPO_NAME.git + + git branch -M main + + git push -u origin main + + ` + +**Using GitHub for the first time?** + +If you get an error about permissions when you try to push your code to GitHub for the first time, you might need to set up a **personal access token** for your GitHub account. This lets GitHub know that your computer has permission to push code changes to your remote repos. + +For instructions on how to set up a personal access token, follow GitHub's guide: [Creating a personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token). Your personal access token will need the **repo** scope to be able to push changes to your repository. + +Now you have a copy of your code saved on GitHub's servers. In the next step, you'll connect your Gatsby Cloud account to the GitHub repo you just created. + +[](https://www.gatsbyjs.com/docs/tutorial/part-1/#build-your-site-with-gatsby-cloud)Build your site with Gatsby Cloud +--------------------------------------------------------------------------------------------------------------------- + +Gatsby Cloud is an infrastructure platform that is specifically optimized for building, deploying, and hosting Gatsby sites. Once you connect your Gatsby Cloud account to your GitHub repository, Gatsby Cloud will build your site and make it available for others on the internet to see. + +To connect your code on GitHub to your Gatsby Cloud account, do the following: + +1. Go to your [Gatsby Cloud Dashboard](https://www.gatsbyjs.com/dashboard/). Click on the **"Add a site"** button. + + [![An empty Gatsby Cloud dashboard](https://www.gatsbyjs.com/static/9c130998b561f1770834309715c99d5b/321ea/01-create-a-site-button.png "An empty Gatsby Cloud dashboard")](https://www.gatsbyjs.com/static/9c130998b561f1770834309715c99d5b/2b36a/01-create-a-site-button.png) + +2. The next few steps will help you add your site to Gatsby Cloud. First, in the **"Import from a Git repository"** card click the **"GitHub"** icon to select GitHub as your Git provider. + + [![The "Add a site" screen. Select the option for "Import from a Git repository".](https://www.gatsbyjs.com/static/ff5dd96106160a1c11eaa25af6becdda/321ea/02-import-a-git-repo.png "The "Add a site" screen. Select the option for "Import from a Git repository".")](https://www.gatsbyjs.com/static/ff5dd96106160a1c11eaa25af6becdda/0f688/02-import-a-git-repo.png) + +3. If this is your first time connecting GitHub to Gatsby Cloud, you'll need to give Gatsby Cloud permission to access your GitHub account. + + **Note:** If you are part of more than one GitHub organization, you will need to first select the organization with which the repository resides at this step before selecting the repository itself. + +4. A new browser window should open, where GitHub will ask you whether you want to give Gatsby Cloud permission to your GitHub repositories. You can choose whether to give Gatsby Cloud access to all of your GitHub repositories or to only the repository you created (`my-first-gatsby-site`). Then click **"Install"**. + + [![The GitHub permissions page, asking whether you want to give Gatsby Cloud access to your repos. The "All repositories" option is selected.](https://www.gatsbyjs.com/static/4fd11cb2e4af910ca099f70d12aa8421/321ea/03-github-gatsby-cloud-permissions.png "The GitHub permissions page, asking whether you want to give Gatsby Cloud access to your repos. The "All repositories" option is selected.")](https://www.gatsbyjs.com/static/4fd11cb2e4af910ca099f70d12aa8421/0f96c/03-github-gatsby-cloud-permissions.png) + +5. Now, when you go back to the Gatsby Cloud window, the repository list should contain your GitHub repository. Select it. + + [![The "Select a Repository" dropdown in Gatsby Cloud lists the "my-first-gatsby-site" GitHub repository.](https://www.gatsbyjs.com/static/5fb2c6c66c2d25426b180ee40917fd83/321ea/04-select-repository.png "The "Select a Repository" dropdown in Gatsby Cloud lists the "my-first-gatsby-site" GitHub repository.")](https://www.gatsbyjs.com/static/5fb2c6c66c2d25426b180ee40917fd83/65781/04-select-repository.png) + +6. Once you select your repo, you'll be navigated to the configuration step which presents you with a few more inputs. These let you tell Gatsby Cloud where to look in your GitHub repo for your Gatsby site. You can also change what Gatsby Cloud will name your site. **Leave the default settings** and click the **"Next"** button. + + [![The new fields. "Base Branch" is set to "main", "Base Directory" is set to "/", and "Site Name" is set to "my-first-gatsby-site-main".](https://www.gatsbyjs.com/static/61bb418dbf509217b076a19507374eef/321ea/05-add-site-details.png "The new fields. "Base Branch" is set to "main", "Base Directory" is set to "/", and "Site Name" is set to "my-first-gatsby-site-main".")](https://www.gatsbyjs.com/static/61bb418dbf509217b076a19507374eef/65781/05-add-site-details.png) + +7. Gatsby Cloud will ask you if you want to add any integrations to your site. For future projects, this might be useful if you want to use a CMS. Gatsby Cloud will also ask if you want to add any environment variables. Again, this may useful for future projects, but for now, scroll past and click the **"Build Site"** button. + + [![The "Integrations" tab of the "Add a site" screen.](https://www.gatsbyjs.com/static/c36f2eede71bb383cf02e73a7a8cf320/321ea/06-integrations-and-environment-variables.png "The "Integrations" tab of the "Add a site" screen.")](https://www.gatsbyjs.com/static/c36f2eede71bb383cf02e73a7a8cf320/65781/06-integrations-and-environment-variables.png) + +8. Now that your site has been created, you'll be taken to a site dashboard where you can see the status of your builds. Gatsby Cloud should start building your site automatically. You'll see a link to your new site, which is automatically hosted on Gatsby Cloud. You can share this link with anyone, and they'll be able to see your site online! + + [![The Gatsby Cloud dashboard for a new site.](https://www.gatsbyjs.com/static/d82ecf06f74d4195697a9a4c9253049d/321ea/07-site-page.png "The Gatsby Cloud dashboard for a new site.")](https://www.gatsbyjs.com/static/d82ecf06f74d4195697a9a4c9253049d/65781/07-site-page.png) + +You did it! Your Gatsby site is now online! 👏 + +Every time you push a new change to the main branch of your GitHub repo, Gatsby Cloud will see the changes and automatically start a build for the new version of your site. + +**Tip:** There will be a unique URL for each build (like `https://build-49535320-b3ae-4761-bbeb-f8f7fa07e0fc.gtsb.io/`), and a URL that always has the latest build (like `my-first-gatsby-site-main.gatsbyjs.io`). You'll mostly want to share the human-readable URL, so that people can always see the most up-to-date version of your site. But in some cases (like when you're trying to debug a specific build of your site) it can be helpful to use the unique build URL. + +[](https://www.gatsbyjs.com/docs/tutorial/part-1/#summary)Summary +----------------------------------------------------------------- + +In this section, you learned how to create a new Gatsby site and deploy it online using Gatsby Cloud. As a quick review, here's the diagram outlining the process: + +[![The workflow for how your code gets from your computer to your users. Extended description below.](https://www.gatsbyjs.com/static/0fd27b745c1de708f034eaf97c4416e0/321ea/deployment-workflow.png "The workflow for how your code gets from your computer to your users. Extended description below.")](https://www.gatsbyjs.com/static/0fd27b745c1de708f034eaf97c4416e0/d61c2/deployment-workflow.png) + +*Expand for detailed description* + +### [](https://www.gatsbyjs.com/docs/tutorial/part-1/#key-takeaways)Key takeaways + +- To create a new Gatsby site from the command line, you can run the `gatsby new` command. +- To run your site locally, use the `gatsby develop` command. You can view your site in a web browser at `localhost:8000`. +- Gatsby Cloud is an infrastructure platform specifically optimized for building, deploying, and hosting Gatsby sites. + - When you push a new commit to the `main` branch of the GitHub repository for your site, Gatsby Cloud will detect the changes, rebuild a new version of your site, and then redeploy it. \ No newline at end of file diff --git a/src/pages/docs/tips/storybook/index.md b/src/pages/docs/tips/storybook/index.md deleted file mode 100644 index c76b5b9414..0000000000 --- a/src/pages/docs/tips/storybook/index.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Storybook -template: docs -excerpt: "Storybook is a great tool for developing and demoing components. " ---- -# Storybook - -[Storybook](https://storybook.js.org/) is a great tool for developing and demoing components. By default, it is based on Webpack and Webpack dev server. - -The [@web/dev-server-storybook](../../docs/dev-server/plugins/storybook.md) plugin uses an [opinionated build](https://github.com/modernweb-dev/storybook-prebuilt) of Storybook, making it possible to use it with Web Dev Server for es modules and buildless workflows. - -## Setup - -Install the package: - -``` -npm i --save-dev @web/dev-server-storybook -``` - -Add the plugin and set the project type. See below for supported project types. - -```js -import { storybookPlugin } from '@web/dev-server-storybook'; - -export default { - // type can be 'web-components' or 'preact' - plugins: [storybookPlugin({ type: 'web-components' })], -}; -``` - -Add a `.storybook/main.js` file: - -```js -module.exports = { - stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'], -}; -``` - -Add a story: `stories/MyButton.stories.js`: - -```js -export default { - title: 'Example/Button', - argTypes: { - backgroundColor: { control: 'color' }, - }, -}; - -const Button = ({ backgroundColor = 'white', text }) => { - return ` - - `; -}; - -export const ButtonA = Button.bind({}); -ButtonA.args = { - text: 'Button A', -}; - -export const ButtonB = Button.bind({}); -ButtonB.args = { - text: 'Button B', -}; -``` - -See the [plugin documentation](../../docs/dev-server/plugins/storybook.md) for more features and all configuration options. diff --git a/src/pages/docs/tools/dev-utilities.md b/src/pages/docs/tools/dev-utilities.md deleted file mode 100644 index edf52048a8..0000000000 --- a/src/pages/docs/tools/dev-utilities.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: General Utilities -weight: 0 -excerpt: General Utilities -seo: - title: '' - description: '' - robots: [] - extra: [] - type: stackbit_page_meta -template: docs ---- - - -## General Utilities - -
-
-
-

Search

-
- - - -
-
-
-
-
-
- -
-
-
-
-

Photo Editor

-
- - - -
-
-
-
-
-

PDF Tools

-
- - - -
-
-
- -
-
-
- -

Text Tools

-
- - - -
-
-
-
-
-
- -

Ternary Converter

-
- - - -
-
-
-
- - diff --git a/src/pages/docs/tools/index.md b/src/pages/docs/tools/index.md deleted file mode 100644 index 8a7577e068..0000000000 --- a/src/pages/docs/tools/index.md +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Tools -excerpt: >- - See some interesting tools developed by the Web-Dev-Hubcommunity to help - automate parts of your workflow. -seo: - title: Tools - description: >- - paste to markdown, excel table to markdown, excel to html, cloud storage, - text manipulation, ternary converter, github html preview, form builder, - border - extra: - - name: 'og:type' - value: website - keyName: property - - name: 'og:title' - value: Tools - keyName: property - - name: 'og:description' - value: >- - paste to markdown, excel table to markdown, excel to html, cloud - storage, text manipulation, ternary converter, github html preview, form - builder, border - keyName: property - - name: 'twitter:card' - value: summary - - name: 'twitter:title' - value: Tools - - name: 'twitter:description' - value: This is the tools page - - name: 'og:image' - value: images/tex.png - keyName: property - relativeUrl: true -template: docs ---- - - - -

Markdown tools

-
-
-
- -
- - - - -
-
-
-
-
- -

PDF Tools

-
- - - -
-
-
- - - -
-
-

Number Base Converter

-
- - -
-
-

Text Tools

-
- - -
-
-

Other Tools

-
- - -
-
-

Awesome Search

- -
-
-
-

Paste excel to HTML

-
- -
- -

Cloud Storage

-
- -

Up to 1TB of cloud Storage for file sharing!

- - -
-
-
-
- -
-
-
-

Text Tools

-
- - - -
-
-
-
-
- -

Ternary Converter

-
- - -
-
-
-
-
- -

Github HTML Render from link

-
- - - -
-
-
-
-
- -

Form Builder GUI

-
- - - - - -
-
- -

-
- - -
-
-
-

-
- - diff --git a/src/pages/docs/tools/markdown-html.md b/src/pages/docs/tools/markdown-html.md deleted file mode 100644 index 6d612c344c..0000000000 --- a/src/pages/docs/tools/markdown-html.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: md and html -weight: 1 -excerpt: Tools For Markdown & Html -seo: - title: '' - description: '' - robots: [] - extra: [] - type: stackbit_page_meta -template: docs ---- - - -## Tools For Markdown & Html - -
-
-
-
- -

Paste To Markdown

-
- - - - -
-
-

Paste Excel Tabel To Markdown

- -
-
-
-

Paste excel to HTML

-
- -
diff --git a/src/pages/docs/tutorials/algolia-search.md b/src/pages/docs/tutorials/algolia-search.md deleted file mode 100644 index 2e56e544bb..0000000000 --- a/src/pages/docs/tutorials/algolia-search.md +++ /dev/null @@ -1,338 +0,0 @@ ---- -title: Text Search -weight: 0 -excerpt: -seo: - title: 'Text Search' - description: 'Algolia Search is a powerful text search engine that makes it easy to find the right content in your website.' - robots: [] - extra: [] - type: stackbit_page_meta -template: docs ---- - - -# Algolia Full Text Search - -## Aside: Selecting A Searc Engine - -
- -
➡️_____Click Here For Dropdown_____➡️((⬇️Selecting A Searc Engine (Jamstack Site)⬇️))
 - -### Search in the Jamstack World - -> ## Excerpt -> -> A website search is often the first dynamic part you'll be adding to your new Jamstack project. Let's see which solutions are available in the Jamstack world. - ---- - -Before the internet started being more complex with various web apps and progressive web apps, most businesses relied on a monolithic approach to website development (think WordPress). Different search engine options had never been discussed with the monolithic approach because there was no need for that discussion: search was automatically integrated into these websites. - -Today, in contrast to the built-in search feature, developers have the option to pick and choose the solution that does the job best for their use case. For many, a website search is often the first dynamic part they'll be adding to their new Jamstack project. - -Get the **exclusive Jamstack** web dev case studies (and more) in your mailbox! - -## jamstack-search/#site-search-solutions-available-in-jamstack)Site search solutions available in Jamstack - -While the search-as-a-service market might not be as developed as some other markets, that in no way means that the solutions available aren't up to par. It's quite the opposite; they are excellent: it just comes down to which one is the right pick for you. - -### > programmable-search-engine-by-google)Programmable Search Engine by Google - -![Programmable Search Engine by Google](./../../../../static/images/programmable-search-engine.png 'Programmable Search Engine by Google') - -Google's [Programmable Search Engine](https://programmablesearchengine.google.com/) (previously known as Google Custom Search) is a Google solution for website search functionality. It offers a customizable search box for your website that shows relevant results powered by Google Search. - -Features, pros, and cons: - -- Easy setup and easy customization of both results output and search box and page design. You can choose if you want users to see only your website results or include other sites. -- The free plan allows a lot of customization, but it also shows ads. -- Supports JSON API for REST-based access, but this is a paid-only option. - -### > algolia)Algolia - -![Algolia](https://bejamas.io/static/159d30d346ce2aa0aea26090311d87e0/f101e/algolia.png 'Algolia') - -[Algolia](https://www.algolia.com/) is one of the most popular search-as-a-service providers in the Jamstack world (and beyond) that helps you deliver what your customers search for every time. - -Algolia offers a full suite of APIs to easily integrate tailored and fast search experience. They say their mission is to give developers the building blocks to create a fast, relevant search experience. - -Features, pros, and cons: - -- Free plan for SMEs with analytics. -- Extensive documentation and guides on top of fantastic customization options. -- Active community and 24/7 support (for paid plans). -- AI-powered search with personalization, rules, and merchandising. -- You can't test your setup based on the hypothetical user's geolocation (when you build a search solution for the US audience while you are in Europe, for example). - -Our website search uses Algolia, just look at the 🔎 icon. We use [gatsby-plugin-Algolia](https://github.com/algolia/gatsby-plugin-algolia) to index our content during the build. On the frontend, we use _algoliasearch/lite_ and _react-instantsearch-dom_ which is Algolia react components that can be easily used with Gatsby. - -### > elastic)Elastic - -![Elastic](https://bejamas.io/static/291a7e4ebb746994ba3227e5301bcfcb/f101e/elastic.png 'Elastic') - -Even if you're only starting to explore the search service market, chances are you have heard of [Elastic](https://www.elastic.co/), a distributed, free and open search and analytics engine. - -It is one of the most popular and widely-used search solutions that thousands of companies worldwide use, both internally and externally. If you're looking for the widest variety of features, some of which include even observability and security, this might be the right solution for you. - -Elastic offers different plans depending on whether you choose managed or self-managed Elastic cloud or stack. Open Source options are available as well. - -Features, pros, and cons: - -- Wide variety of features + open-source option. -- Comprehensive data analytics and application performance monitoring. -- Large, active community and extensive documentation, guides, and training. -- Elastic search doesn't support multi-language requests and responses. -- Steep learning curve. -- The level of support depends on the plan you have. - -### > cloudsh)CloudSh - -![CloudSh](https://bejamas.io/static/b1bafd64c59ccb00467d4aebbf1b9221/f101e/cloudsh.png 'CloudSh') - -[CloudSh](https://cloudsh.com/) is another search-as-a-service provider that offers a powerful search engine for your website with only a few lines of JavaScript. - -It's perfect for anyone looking for a simple solution for their static website. While CloudSh offers a few plans for businesses of different sizes, including a 7-day free trial, CloudSh doesn't have a free plan in their offer. - -Features, pros, and cons: - -- CloudSh has been specially built for static websites and indexes their pages with both on-demand and scheduled basis. -- Simple to use and integrate with pre-made integration solutions for different static site generators. -- Analytics and on-demand indexing for all plans.Priority support for all except the Personal (basic) plan. - -### > meilisearch)MeiliSearch - -![MeiliSearch](https://bejamas.io/static/3bae2afe922474ea1f451e0b08938909/f101e/meilisearch.png 'MeiliSearch') - -[Meili Search](https://www.meilisearch.com/) is a blazing-fast open-source search API solution written in Rust. It is built with an idea to completely transform your users' search experience and offer them the best possible performance for instant search. - -They provide an excellent toolkit for customization, although if you decide not to customize, the solution works with a preset that will be enough for most use cases. - -Meili is an excellent solution, but it lacks some features, such as the analytics dashboard. Keep in mind that Meili is a fairly new solution on the market - and very promising at that - so we should start seeing them catch up to the others. - -Features, pros, and cons: - -- Open-source, free, and available to anyone. -- Written in Rust. Uses RESTful API. -- Easy to integrate with extensive customization possibilities (also presets available). -- Search as-you-type experience, which means that MeiliSearch can return results for almost EVERY keystroke you make. -- It looks like the great things are yet to come. Needs more features. - -### Apache Solr - -![Apache Solr](https://bejamas.io/static/1c2b3e8c3d68bc06c16bd0b4c3c20caf/f101e/solr.png 'Apache Solr') - -[Solr](https://lucene.apache.org/solr/) is another top-rated, high-speed search platform from the open-source giant Apache and built on Apache Lucene. - -Solr offers a plethora of different features: distributed indexing, replication and load-balanced querying, automated failover and recovery, and centralized configuration. - -Even though it is used by many of the world's largest websites (like AOL and BestBuy), it is a great solution for businesses of all sizes. - -Features, pros, and cons: - -- Open-source with extensive data management and analytics capabilities. -- REST API for accessing and validating the data/records. -- Large, active community and excellent documentation, guides, and training. -- CPU consumption can be high in some cases. - -### Js-Search - -[Js-Search](https://github.com/bvaughn/js-search) is a straightforward option that enables full client-side searches with the library used. When developers build static websites, they also build a search index of the pages, which is later used for searching via Js-Search. - -While this search is fast, an issue is raised because this solution isn't a good fit for full-text search. Indexing full text this way would significantly impact the whole website's performance. - -Features, pros, and cons: - -- Very simple and free. -- Great for small websites. - -### > typesense)Typesense - -![Typesense](https://bejamas.io/static/cd7fc7c7b8707f96a516ae7fc599fd3a/f101e/typesense.png 'Typesense') - -[Typesense](https://typesense.org/) is an open-source, typo tolerant search engine, which means it handles your errors while typing fast and out-of-the-box. For now, it has API clients for Javascript, PHP, Python, and Ruby, and implementation is pretty straightforward. - -Features, pros, and cons: - -- While simple at its core, Typesense has an advanced filtering system if you need fine-grained control of the search results. -- Simple to set up and update with a new version. - -## (**so-which-option-is-the-best**)So, which option is the best? - -To decide which option would be right for your business, I suggest you first write down your main requirements. Then, go through the list above, and find the best fit! - -If you're building a simple, static website, try CloduSh, Typesense, or Js-Search. And if you don't mind sharing ads in search results Google's Programmable Search Engine can be a decent option as well. - -
- -
-
-
-
-
-
- ---- - ---- - -
-|---------------------------------------🔥🔥🔥🔥🔥🔥🔥--------------------------------------|
---- ---- ---- - -
-
-
-
-
-
- -
- -### 🔍Search is a common site requirement.🔎 - -
- -###### Let's look at how to populate a search index on Algolia and implement search on a Jamstack site built with Gatsby. - -> Search is an important part of almost any site. Once you have a lot of content, it becomes an especially critical tool for helping your users find what they need. But search is also totally dynamic, so it must be impossible or, at the very least, really difficult to do on a Jamstack site, right? - -_**In this tutorial, we're going to explore adding search to a site built with Gatsby. We'll use a service called [Algolia](https://www.algolia.com/) for the search API. This is a commercial offering, but it has a generous free tier. The example site was built with Stackbit, though there's nothing in the code that we'll discuss that is Stackbit specific (for reference, you can see the full project code at [https://github.com/remotesynth/good-celery](https://github.com/remotesynth/good-celery))**_ - -**Ok, enough intro...let's get coding.** - -#### Setting Up Algolia - -###### First things first, you'll need to set up your account on Algolia and set up a project. You can skip the steps about setting up indices as we'll take care of that via code. However, be sure to grab all your API keys from the Algolia dashboard as we'll need them later. - -**Algolia provides two projects that we'll make use of:** - -- [**Gatsby Plugin Algolia**](https://github.com/algolia/gatsby-plugin-algolia) will help us create our indices and make sure they are kept in sync with our content. -- [**React InstantSearch**](https://github.com/algolia/react-instantsearch) provides a pre-built set of tools for interacting with Algolia's search API for a "search as you type" UI. This project also encompasses the `react-instantsearch-dom` UI tools we'll also use. - ---- - -**_Let's start by installing these on our Gatsby project._** - ---- - -#### Configuring Algolia in Our Gatsby Project - -Next we need to edit our `gatsby-config.js` file, first by adding these two lines prior to the `module.exports` block. - -Neither of these files exist yet, but we'll create them in a moment. Staying in `gatsby-config.js`, within the `module.exports` block and within the `plugins` array, add the following details: - -```js -{ - resolve: `gatsby-plugin-algolia`, - options: { - appId: process.env.GATSBY_ALGOLIA_APP_ID, - apiKey: process.env.ALGOLIA_ADMIN_KEY, - queries, - chunkSize: 10000, - }, -} -``` - -Finally, create (or open) a `.env` file and add the API key details from Algolia to the file as follow (replacing the values on the right of the equal signs with the appropriate keys from Algolia) - -```txt -GATSBY_ALGOLIA_APP_ID=MY_ALGOLIA_APP_ID -GATSBY_ALGOLIA_SEARCH_KEY=MY_ALGOLIA_SEARCH_KEY -GATSBY_ALGOLIA_ADMIN_KEY=MY_ALGOLIA_ADMIN_KEY -``` - -Please ensure that this `.env` file is added to your `.gitignore` so that you do not accidentally check in your private keys. - ---- - -### Adding Slugs to Posts - -In some cases, as in my site generated by Stackbit, pages do not have a `slug` field in the frontmatter. Having slugs available in the search made it much easier to output the results. Rather than manually add slugs to all of my content, Gatsby provides instructions on how to [create slugs for pages](https://www.gatsbyjs.org/docs/creating-slugs-for-pages/) automatically. - -This depends on `gatsby-source-filesystem`, so you'll need to install that first. Then, add the following code to `gatsby-node.js`: - -Now when we query Gastby for our pages, we'll be able to get the slug and provide that to our Algolia search index. - ---- - -### Populating Our Indices - -Let's create the queries that will populate our indices on Algolia. It's important to note that your query depends on the data you have in your content and how you store your content. The best way to create and test your GraphQL queries to be sure you will populate your indices correctly is to use GraphiQL, which is running locally whenever you run `gatsby develop` generally at `http://localhost:8000/___graphql`. - -In my case, my Stackbit site has both pages and posts that have differing frontmatter properties. For this example, we'll be creating a blog search so I created an index that is specific to the blog calles `Posts`. Feel free to customize your query to create indices for whatever content you wish to make searchable. - -Place the query in a `/src/utils/algolia.js` file like the one below (recall that we referenced this file in our `gatsby-config.js` file above). Note that the excerpts for the content are truncated to prevent going over the character limit for individual Algolia records. - -With the queries in place, our indices on Algolia will update whenever we build our Gatsby site. To do this, run `gatsby build` from the command line to run a production build of the site. We should see an indication that our indices have been populated from the console output. - -We can now see the results when going into Algolia and browsing Indices. - ---- - -## Creating the Search UI - -Now that our search indices are populated, let's display some results. To do this, we're going to use [React InstantSearch](https://github.com/algolia/react-instantsearch), which offers a search-as-you-type experience. It pretty much works out of the box using the [code they provide](https://www.algolia.com/doc/guides/building-search-ui/installation/react/). - -Let's look at the most basic implementation in action. Start by creating a new template as `/src/templates/search.js`. This template will just wrap the example code taken almost directly from the InstantSearch page and place it in the site's UI so that we can try it out. - -We initialize the search client with the secrets that are in the `.env` file we created earlier. Within the layout elements, we include the `InstantSearch` element tied to our `Posts` index in Algolia. The `SearchBox` outputs a search input UI and `hits` outputs the results. Next, just create a search page that will utilize this layout at `/src/pages/blog/search.md`. - -From the console run `gatsby develop` and then navigate to the page, which is typically available at `http://localhost:8000/blog/search/`. Here's what you should see: - -![](https://www.stackbit.com/images/gatsby-basic-instant-search.png) - -###### We're done! - -
-
-
-
-
-
- ---- - ---- - -##
|---------------------------------------🔥🔥🔥🔥🔥🔥🔥--------------------------------------|
- ---- - ---- - -
-
-
-
-
-
- -### Customizing the Output - -So, ok, our boss has suggested that perhaps we're not quite done yet. She doesn't think the search results are very attractive and, worse yet, they don't even lead anywhere. She has a point. - -What if, instead of a separate search page, we actually integrated the search into our existing blog page, allowing a user to filter the results based upon their search? Let's do that and, in doing so, learn how to customize the output of the InstantSearch `Hits` component. - -Create a new component as `src/components/search.js` using the source below. Don't worry, I'll explain what we're doing in a moment. - -As you can see, the actual component output UI is almost identical to the prior search page, with just a `SearchBox` and `Hits`. However, prior to that, we are overriding the default output behavior of `Hits`. If the results return any records, we loop through them, outputting cards identical to the existing blog list on `src/templates/blog.js`, using the `hit` (i.e. search result) values to populate the output. If there are no results, we just display some text informing the user. - -Now let's add it to our blog. Keep in mind that the output of the search results are identical to the regular blog list output and we are using the search without [conditionally handling an empty query](https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-display/react/#handling-the-empty-query) - this means it will always display posts even if the user has not searched yet. Thus, we can actually replace the regular page output with the search results as in the updated source for `src/templates/blog.js` below: - -The result works as shown below. - ---- - -## Where to Go From Here - -There's one more step that I should mention. We need to ensure that the environment variables we created are available when we deploy. On Netlify, all we need to do is go to Settings > Build & Deploy > Environment and add the necessary variables defined in our `.env` file to our deployment settings. - ---- - -We're all set! - -Obviously, this is just one way to implement the search. The [Gatsby documentation](https://www.gatsbyjs.org/docs/adding-search-with-algolia/) offers a similar but probably more flexible implementation. The [InstantSearch](https://www.algolia.com/doc/api-reference/widgets/instantsearch/react/) documentation also offers a ton of API and customization details with code samples to help you make the tools fit the needs of your specific site. In the end, implementing a search seems like a complicated task, but, thankfully, the tools and libraries available to us do a lot of the heavy lifting, making our jobs much easier. diff --git a/src/pages/docs/tutorials/bash-commands-my.md b/src/pages/docs/tutorials/bash-commands-my.md deleted file mode 100644 index 0f210e51f1..0000000000 --- a/src/pages/docs/tutorials/bash-commands-my.md +++ /dev/null @@ -1,800 +0,0 @@ ---- -title: Bash Commands Tutorial -weight: 0 -excerpt: Here's a list of bash commands that stand between me and insanity. -seo: - title: 'Bash Commands Tutorial' - description: 'Bash Commands That Save Me Time and Frustration' - robots: [] - extra: [] - type: stackbit_page_meta -template: docs ---- - - -# Bash Commands That Save Me Time and Frustration - -Here's a list of bash commands that stand between me and insanity. - ---- - -### Bash Commands That Save Me Time and Frustration - -#### Here's a list of bash commands that stand between me and insanity - -[![](https://camo.githubusercontent.com/22b34f635d2c806b42121947a66b17cb69fe0b64d935cbdeabe81c3bccc74e8e/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a77304a3875366a5754696b59565a7a572e6a7067)](https://camo.githubusercontent.com/22b34f635d2c806b42121947a66b17cb69fe0b64d935cbdeabe81c3bccc74e8e/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a77304a3875366a5754696b59565a7a572e6a7067) - -**This article will be accompanied by the following** [**github repository**](https://github.com/bgoonz/bash-commands-walkthrough) **which will contain all the commands listed as well as folders that demonstrate before and after usage!** - -[**bgoonz/bash-commands-walkthrough**\ -*to accompany the medium article I am writing. Contribute to bgoonz/bash-commands-walkthrough development by creating an...*github.com](https://github.com/bgoonz/bash-commands-walkthrough 'https://github.com/bgoonz/bash-commands-walkthrough')[](https://github.com/bgoonz/bash-commands-walkthrough) - -> The [readme](https://github.com/bgoonz/bash-commands-walkthrough#readme) for this git repo will provide a much more condensed list... whereas this article will break up the commands with explanations... images & links! - -**I will include the code examples as both github gists (for proper syntax highlighting) and as code snippets adjacent to said gists so that they can easily be copied and pasted... or ... if you're like me for instance; and like to use an extension to grab the markdown content of a page... the code will be included rather than just a link to the gist!** - -[![](https://camo.githubusercontent.com/a3dd21a18d0fcf7ac3c80b09877c193ba4f84657dcebde6487aea381d9aba9bf/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a336d5f5563514f41794b7449704851366a394a7a5a772e676966)](https://camo.githubusercontent.com/a3dd21a18d0fcf7ac3c80b09877c193ba4f84657dcebde6487aea381d9aba9bf/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a336d5f5563514f41794b7449704851366a394a7a5a772e676966) - -### Here's a Cheatsheet - -### Getting Started (Advanced Users Skip Section) - ---- - -#### ✔ Check the Current Directory ➡ `pwd` - -On the command line, it's important to know the directory we are currently working on. For that, we can use `pwd` command. - -[![](https://camo.githubusercontent.com/ede56713024434b9c0c8008f54475a7f4fcdcd15427580cbc504793e43a15b6d/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a64696d7a4c55726d44493455666576362e676966)](https://camo.githubusercontent.com/ede56713024434b9c0c8008f54475a7f4fcdcd15427580cbc504793e43a15b6d/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a64696d7a4c55726d44493455666576362e676966) - -It shows that I'm working on my Desktop directory. - -#### ✔ Display List of Files ➡ `ls` - -To see the list of files and directories in the current directory use `ls` command in your CLI. - -[![](https://camo.githubusercontent.com/e9cfe3bfa6f8d2ff3cc9f7959a7896facb58708e7e707d012ad989edb589b6ec/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a48487a56724b324374545077546459542e676966)](https://camo.githubusercontent.com/e9cfe3bfa6f8d2ff3cc9f7959a7896facb58708e7e707d012ad989edb589b6ec/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a48487a56724b324374545077546459542e676966) - -Shows all of my files and directories of my Desktop directory. - -- To show the contents of a directory pass the directory name to the `ls` command i.e. `ls directory_name`. -- Some useful `ls` command options:- - -OptionDescriptionls -alist all files including hidden file starting with '.'ls -llist with the long formatls -lalist long format including hidden files - -#### ✔ Create a Directory ➡ `mkdir` - -We can create a new folder using the `mkdir` command. To use it type `mkdir folder_name`. - -[![](https://camo.githubusercontent.com/8c10a898b8f52be59dc0723ab2dd0784c22c12a325ffe5cc64a38f07341ef90e/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a6d33644479433976524a42555a5378522e676966)](https://camo.githubusercontent.com/8c10a898b8f52be59dc0723ab2dd0784c22c12a325ffe5cc64a38f07341ef90e/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a6d33644479433976524a42555a5378522e676966) - -Use `ls` command to see the directory is created or not. - -I created a cli-practice directory in my working directory i.e. Desktop directory. - -#### ✔ Move Between Directories ➡ `cd` - -It's used to change directory or to move other directories. To use it type `cd directory_name`. - -[![](https://camo.githubusercontent.com/d78e325dda59d59be4bd151dd85d3b1966324cb205da2eb540f1372e8195b280/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a33344b4778543247386f4e4d446e49632e676966)](https://camo.githubusercontent.com/d78e325dda59d59be4bd151dd85d3b1966324cb205da2eb540f1372e8195b280/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a33344b4778543247386f4e4d446e49632e676966) - -Can use `pwd` command to confirm your directory name. - -Changed my directory to the cli-practice directory. And the rest of the tutorial I'm gonna work within this directory. - -#### ✔ Parent Directory ➡ `..` - -We have seen `cd` command to change directory but if we want to move back or want to move to the parent directory we can use a special symbol `..` after `cd` command, like `cd ..` - -#### ✔ Create Files ➡ `touch` - -We can create an empty file by typing `touch file_name`. It's going to create a new file in the current directory (the directory you are currently in) with your provided name. - -[![](https://camo.githubusercontent.com/97e82f91cb8cfcf342cf97e8b572b49d1bc264cbe9929c7e23d0f72589d6708d/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a78753177747637674a324e4d765036302e676966)](https://camo.githubusercontent.com/97e82f91cb8cfcf342cf97e8b572b49d1bc264cbe9929c7e23d0f72589d6708d/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a78753177747637674a324e4d765036302e676966) - -I created a hello.txt file in my current working directory. Again you can use `ls` command to see the file is created or not. - -Now open your hello.txt file in your text editor and write _Hello Everyone!_ into your hello.txt file and save it. - -#### ✔ Display the Content of a File ➡ `cat` - -We can display the content of a file using the `cat` command. To use it type `cat file_name`. - -[![](https://camo.githubusercontent.com/ffe71e48a1a9bd9b118265c18a81e0b49a515cf40453416134dfca52567bb82c/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a694b6635773951464e43654c527638612e676966)](https://camo.githubusercontent.com/ffe71e48a1a9bd9b118265c18a81e0b49a515cf40453416134dfca52567bb82c/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a694b6635773951464e43654c527638612e676966) - -Shows the content of my hello.txt file. - -#### ✔ Move Files & Directories ➡ `mv` - -To move a file and directory, we use `mv` command. - -By typing `mv file_to_move destination_directory`, you can move a file to the specified directory. - -By entering `mv directory_to_move destination_directory`, you can move all the files and directories under that directory. - -Before using this command, we are going to create two more directories and another txt file in our cli-practice directory. - -`mkdir html css touch bye.txt` - -[![](https://camo.githubusercontent.com/7197994733b63ae597fb12ba8c29509ed3c714f274d4e51542c64a942c069336/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a70696141517a5f4d51707a6f374450482e676966)](https://camo.githubusercontent.com/7197994733b63ae597fb12ba8c29509ed3c714f274d4e51542c64a942c069336/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a70696141517a5f4d51707a6f374450482e676966) - -Yes, we can use multiple directories & files names one after another to create multiple directories & files in one command. - -[![](https://camo.githubusercontent.com/5db5a79472f5bffa91c5bfd8c892437523b68072d930c7b4334c8b622ecb55de/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a356a6d6a5f5a794e7a34364775514b7a2e676966)](https://camo.githubusercontent.com/5db5a79472f5bffa91c5bfd8c892437523b68072d930c7b4334c8b622ecb55de/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a356a6d6a5f5a794e7a34364775514b7a2e676966) - -Moved my bye.txt file into my css directory and then moved my css directory into my html directory. - -#### ✔ Rename Files & Directories ➡ `mv` - -`mv` command can also be used to rename a file and a directory. - -You can rename a file by typing `mv old_file_name new_file_name` & also rename a directory by typing `mv old_directory_name new_directory_name`. - -[![](https://camo.githubusercontent.com/3feb1289a79b907796c1d736e119730dc3d2dbcd60c6ba072ee226cc8cb69b75/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a575456753164643667722d6e6d5768442e676966)](https://camo.githubusercontent.com/3feb1289a79b907796c1d736e119730dc3d2dbcd60c6ba072ee226cc8cb69b75/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a575456753164643667722d6e6d5768442e676966) - -Renamed my hello.txt file to the hi.txt file and html directory to the folder directory. - -#### ✔ Copy Files & Directories ➡ `cp` - -To do this, we use the `cp` command. - -- You can copy a file by entering `cp file_to_copy new_file_name`. - -[![](https://camo.githubusercontent.com/9b67b2ef374ba0f1457b24007824ea5b65ca861a100397322d1a13f30a70818f/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a6b434c56744b4e396f4b5062486652462e676966)](https://camo.githubusercontent.com/9b67b2ef374ba0f1457b24007824ea5b65ca861a100397322d1a13f30a70818f/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a6b434c56744b4e396f4b5062486652462e676966) - -Copied my hi.txt file content into hello.txt file. For confirmation open your hello.txt file in your text editor. - -- You can also copy a directory by adding the `-r` option, like `cp -r directory_to_copy new_directory_name`. - -_The_ `-r` _option for "recursive" means that it will copy all of the files including the files inside of subfolders._ - -[![](https://camo.githubusercontent.com/b914824b683c77cb019300487919155d05a805fb82b0a743ecdce67fd22bab55/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a4d6e6d7a4d69696f495943754b3932422e676966)](https://camo.githubusercontent.com/b914824b683c77cb019300487919155d05a805fb82b0a743ecdce67fd22bab55/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a4d6e6d7a4d69696f495943754b3932422e676966) - -Here I copied all of the files from the folder to folder-copy. - -#### ✔ Remove Files & Directories ➡ `rm` - -To do this, we use the `rm` command. - -- To remove a file, you can use the command like `rm file_to_remove`. - -[![](https://camo.githubusercontent.com/e35ef5a179966ed8271639d381b997455862bb77794f0b8c219f7ffada7168da/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a6f68436d6474686439325f4841365a652e676966)](https://camo.githubusercontent.com/e35ef5a179966ed8271639d381b997455862bb77794f0b8c219f7ffada7168da/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a6f68436d6474686439325f4841365a652e676966) - -Here I removed my hi.txt file. - -- To remove a directory, use the command like `rm -r directory_to_remove`. - -[![](https://camo.githubusercontent.com/5622af09767bfd626db8e52f5e040afeaf16be692b75a3069f7b01d74c1c4ee6/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a766f44627a7753707732344132526a512e676966)](https://camo.githubusercontent.com/5622af09767bfd626db8e52f5e040afeaf16be692b75a3069f7b01d74c1c4ee6/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a766f44627a7753707732344132526a512e676966) - -I removed my folder-copy directory from my cli-practice directory i.e. current working directory. - -#### ✔ Clear Screen ➡ `clear` - -Clear command is used to clear the terminal screen. - -#### ✔ Home Directory ➡ `~` - -The Home directory is represented by `~`. The Home directory refers to the base directory for the user. If we want to move to the Home directory we can use `cd ~` command. Or we can only use `cd` command. - ---- - -### MY COMMANDS - -### 1.) Recursively unzip zip files and then delete the archives when finished - -**here is a** [**folde**](https://github.com/bgoonz/bash-commands-walkthrough/tree/master/steps/1-recursive-unzip)**r containing the before and after... I had to change folder names slightly due to a limit on the length of file-paths in a github repo.** - -``` -find . -name "*.zip" | while read filename; do unzip -o -d "`dirname "$filename"`" "$filename"; done; - -find . -name "*.zip" -type f -print -delete - -``` - ---- - -### 2.) Install node modules recursively - -``` -npm i -g recursive-install - -npm-recursive-install - -``` - ---- - -### 3.) Clean up unnecessary files/folders in git repo - -``` -find . -empty -type f -print -delete #Remove empty files - -# ------------------------------------------------------- -find . -empty -type d -print -delete #Remove empty folders - -# ------------------------------------------------------- - -# This will remove .git folders... .gitmodule files as well as .gitattributes and .gitignore files. - -find . \( -name ".git" -o -name ".gitignore" -o -name ".gitmodules" -o -name ".gitattributes" \) -exec rm -rf -- {} + - -# ------------------------------------------------------- - -# This will remove the filenames you see listed below that just take up space if a repo has been downloaded for use exclusively in your personal file system (in which case the following files just take up space)# Disclaimer... you should not use this command in a repo that you intend to use with your work as it removes files that attribute the work to their original creators! - -find . \( -name "*SECURITY.txt" -o -name "*RELEASE.txt" -o -name "*CHANGELOG.txt" -o -name "*LICENSE.txt" -o -name "*CONTRIBUTING.txt" -name "*HISTORY.md" -o -name "*LICENSE" -o -name "*SECURITY.md" -o -name "*RELEASE.md" -o -name "*CHANGELOG.md" -o -name "*LICENSE.md" -o -name "*CODE_OF_CONDUCT.md" -o -name "\*CONTRIBUTING.md" \) -exec rm -rf -- {} + - -``` - -#### In Action - -The following output from my bash shell corresponds to the directory: - -[**bgoonz/bash-commands-walkthrough**\ -*Deployment github-pages Navigation Big O notation is the language we use for talking about how long an algorithm takes...*github.com](https://github.com/bgoonz/bash-commands-walkthrough/tree/master/steps/3-clean-up-fluf/DS-ALGO-OFFICIAL-master 'https://github.com/bgoonz/bash-commands-walkthrough/tree/master/steps/3-clean-up-fluf/DS-ALGO-OFFICIAL-master')[](https://github.com/bgoonz/bash-commands-walkthrough/tree/master/steps/3-clean-up-fluf/DS-ALGO-OFFICIAL-master) - -#### which was created by running the aforementioned commands in in a perfect copy of this directory - -[**bgoonz/DS-ALGO-OFFICIAL**\ -*Deployment github-pages Navigation Big O notation is the language we use for talking about how long an algorithm takes...*github.com](https://github.com/bgoonz/DS-ALGO-OFFICIAL 'https://github.com/bgoonz/DS-ALGO-OFFICIAL')[](https://github.com/bgoonz/DS-ALGO-OFFICIAL) - -> **.....below is the terminal output for the following commands:** - -``` -pwd -/mnt/c/Users/bryan/Downloads/bash-commands/steps/3-clean-up-fluf/DS-ALGO-OFFICIAL-master - -``` - -> **After printing the working directory for good measure:** - -``` -find . -empty -type f -print -delete - -``` - -> **The above command deletes empty files recursively starting from the directory in which it was run:** - -``` -./CONTENT/DS-n-Algos/File-System/file-utilities/node_modules/line-reader/test/data/empty_file.txt -./CONTENT/DS-n-Algos/_Extra-Practice/free-code-camp/nodejs/http-collect.js -./CONTENT/Resources/Comments/node_modules/mime/.npmignore -./markdown/tree2.md -./node_modules/loadashes6/lodash/README.md -./node_modules/loadashes6/lodash/release.md -./node_modules/web-dev-utils/Markdown-Templates/Markdown-Templates-master/filled-out-readme.md -|01:33:16|bryan@LAPTOP-9LGJ3JGS:[DS-ALGO-OFFICIAL-master] DS-ALGO-OFFICIAL-master_exitstatus:0[╗___________o> - -``` - -> **The command seen below deletes empty folders recursively starting from the directory in which it was run:** - -``` -find . -empty -type d -print -delete - -``` - -> The resulting directories.... - -``` -|01:33:16|bryan@LAPTOP-9LGJ3JGS:[DS-ALGO-OFFICIAL-master] DS-ALGO-OFFICIAL-master_exitstatus:0[╗___________o> - -find . -empty -type d -print -delete -./.git/branches -./.git/objects/info -./.git/refs/tags -|01:33:31|bryan@LAPTOP-9LGJ3JGS:[DS-ALGO-OFFICIAL-master] DS-ALGO-OFFICIAL-master_exitstatus:0[╗___________o> - -``` - -> **The command seen below deletes .git folders as well as .gitignore, .gitattributes, .gitmodule files** - -``` -find . \( -name ".git" -o -name ".gitignore" -o -name ".gitmodules" -o -name ".gitattributes" \) -exec rm -rf -- {} + - -``` - -**The command seen below deletes most SECURITY, RELEASE, CHANGELOG, LICENSE, CONTRIBUTING, & HISTORY files that take up pointless space in repo's you wish to keep exclusively for your own reference.** - -### !!!Use with caution as this command removes the attribution of the work from it's original authors - -[![!!!Use with caution as this command removes the attribution of the work from it's original authors!!!!!](https://camo.githubusercontent.com/ea68eea425581d8683031170810ceb578f8bafb975c1d5323100965dd912a3fa/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a72356447687462655a3456644f353455)](https://camo.githubusercontent.com/ea68eea425581d8683031170810ceb578f8bafb975c1d5323100965dd912a3fa/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f302a72356447687462655a3456644f353455) - -!!!Use with caution as this command removes the attribution of the work from it's original authors!!!!!find . \( -name "*SECURITY.txt" -o -name "*RELEASE.txt" -o -name "*CHANGELOG.txt" -o -name "*LICENSE.txt" -o -name "*CONTRIBUTING.txt" -name "*HISTORY.md" -o -name "*LICENSE" -o -name "*SECURITY.md" -o -name "*RELEASE.md" -o -name "*CHANGELOG.md" -o -name "*LICENSE.md" -o -name "*CODE_OF_CONDUCT.md" -o -name "\*CONTRIBUTING.md" \) -exec rm -rf -- {} + - ---- - -### 4.) Generate index.html file that links to all other files in working directory - -``` -#!/bin/sh -# find ./ | grep -i "\.*$" >files -find ./ | sed -E -e 's/([^ ]+[ ]+){8}//' | grep -i "\.*$">files -listing="files" -out="" -html="index.html" -out="basename $out.html" -html="index.html" -cmd() { - echo ' ' - echo '' - echo '' - echo ' ' - echo ' ' - echo '' - echo ' ' - echo ' ' - echo " directory " - echo "" - echo '' - echo '' - echo '' - echo "" - # continue with the HTML stuff - echo "" - echo "" - echo "
    " - awk '{print "
  • ",$1," 
    • "}' $listing - # awk '{print "
  • "}; - # {print " ",$1,"
    •  "}' \ $listing - echo "" - echo "
" - echo "" - echo "" -} -cmd $listing --sort=extension >>$html - -``` - -#### In Action - -**I will use this copy of my Data Structures Practice Site to demonstrate the result:** - -[**side-projects-42/DS-Bash-Examples-Deploy**\ -*Deployment github-pages Navigation Big O notation is the language we use for talking about how long an algorithm takes...*github.com](https://github.com/side-projects-42/DS-Bash-Examples-Deploy 'https://github.com/side-projects-42/DS-Bash-Examples-Deploy')[](https://github.com/side-projects-42/DS-Bash-Examples-Deploy) - -[![](https://camo.githubusercontent.com/0f97bdb9d1167b14f340044bcdca3eb0472acc4c80dcc9c1db4f13ad6900bf20/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a5075754454557669583547366d6a612d35654b5549772e706e67)](https://camo.githubusercontent.com/0f97bdb9d1167b14f340044bcdca3eb0472acc4c80dcc9c1db4f13ad6900bf20/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a5075754454557669583547366d6a612d35654b5549772e706e67) - -#### The result is a index.html file that contains a list of links to each file in the directory - -> here is a link to and photo of the resulting html file: - -[**index.html**\ -*CONTENT/DS-n-Algos/*quirky-meninsky-4181b5.netlify.app](https://quirky-meninsky-4181b5.netlify.app/ 'https://quirky-meninsky-4181b5.netlify.app/')[](https://quirky-meninsky-4181b5.netlify.app/) - -[![](https://camo.githubusercontent.com/ce04a06e4fc2c23c62fd6a9dbea96125b5920b8c53a1c62434325989768cd1a7/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a414f5962577655474e39794a3463654e7a41474773772e706e67)](https://camo.githubusercontent.com/ce04a06e4fc2c23c62fd6a9dbea96125b5920b8c53a1c62434325989768cd1a7/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a414f5962577655474e39794a3463654e7a41474773772e706e67) - ---- - -### 5.) Download all links to a files of a specified extension on a user provided (url) webpage - -``` -wget -r -A.pdf https://overapi.com/gitwget --wait=2 --level=inf --limit-rate=20K --recursive --page-requisites --user-agent=Mozilla --no-parent --convert-links --adjust-extension --no-clobber -e robots=off - -``` - -> The result is stored in [this directory:](https://github.com/bgoonz/bash-commands-walkthrough/tree/master/steps/5-download-all-pdf) - -[![](https://camo.githubusercontent.com/02861c1b49280db7ab6c017bc4dc93f0d22b7385e2b33e2154fc3e734b1da3c7/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a38657656504f5f7a2d5f5441547a6b634454703135512e706e67)](https://camo.githubusercontent.com/02861c1b49280db7ab6c017bc4dc93f0d22b7385e2b33e2154fc3e734b1da3c7/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a38657656504f5f7a2d5f5441547a6b634454703135512e706e67) - ---- - -### 6.)Recursively remove lines of text containing the string badFolder from files in the working directory - -``` -find . -type f -exec sed -i '/badFolder/d' ./* {} \; - -# OR - -find . -name 'result.md' -type f -exec sed -i '/badFolder/d' ./* {} \; - -``` - -**As an example I will run this command on a file containing the text:** - -``` -Hacks Blog - -Read more at hacks.mozilla.org - -badFolder - -badFolder Implementing Private Fields for JavaScript - -When implementing a language feature for JavaScript, an implementer must make decisions about how the language in the specification maps to the implementation. Private fields is an example of where the specification language and implementation reality diverge, at least in SpiderMonkey-- the JavaScript engine which powers Firefox. To understand more, I'll explain what private fields are, a couple of models for thinking about them, and explain why our implementation diverges from the specification language.The post Implementing Private Fields for JavaScript appeared first on Mozilla Hacks - the Web developer blog. - -Posted Tuesday, June 8, 2021 by Matthew Gaudet - -Looking fine with Firefox 89 - -Firefox 89 has smartened up and brings with it a slimmed-down, slightly more minimalist interface.badFolder Along with this new look, we get some great styling features including a force-colours feature for media queries and better control over how fonts are displayed. The long-awaited top-level await keyword for JavaScript modules is now enabled, as well as the PerformanceEventTiming interface, which is another addition to the performance suite of APIs: 89 really has been working out!The post Looking fine with Firefox 89 appeared first on Mozilla Hacks - the Web developer blog. - -badFolder - -Posted Tuesday, June 1, 2021 by Chris Mills - -badFolder - -Improving Firefox stability on Linux - -Roughly a year ago at Mozilla we started an effort to improve Firefox stability on Linux. This effort quickly became an example of good synergies between FOSS projects.The post Improving Firefox stability on Linux appeared first on Mozilla Hacks - the Web developer blog. - -Posted Wednesday, May 19, 2021 by Gabriele Svelto badFolder - -Introducing Firefox's new Site Isolation Security Architecture - -Like any web browser, Firefox loads code from untrusted and potentially hostile websites and runs it on your computer. To protect you against new types of attacks from malicious sites and to meet the security principles of Mozilla, we set out to redesign Firefox on desktop.The post Introducing Firefox's new Site Isolation Security Architecture appeared first on Mozilla Hacks - the Web developer blog. - -Posted Tuesday, May 18, 2021 by Anny Gakhokidze - -Pyodide Spin Out and 0.17 Release - -We are happy to announce that Pyodide has become an independent and community-driven project. We are also pleased to announce the 0.17 release for Pyodide with many new features and improvements. Pyodide consists of the CPython 3.8 interpreter compiled to WebAssembly which allows Python to run in the browser.The post Pyodide Spin Out and 0.17 Release appeared first on Mozilla Hacks - the Web developer blog. badFolder - -Posted Thursday, April 22, 2021 by Teon Brooks - -``` - -**_I modified the command slightly to apply only to files called 'result.md':_** - -> The result is : - -``` -Hacks Blog - -Read more at hacks.mozilla.org - -When implementing a language feature for JavaScript, an implementer must make decisions about how the language in the specification maps to the implementation. Private fields is an example of where the specification language and implementation reality diverge, at least in SpiderMonkey-- the JavaScript engine which powers Firefox. To understand more, I'll explain what private fields are, a couple of models for thinking about them, and explain why our implementation diverges from the specification language.The post Implementing Private Fields for JavaScript appeared first on Mozilla Hacks - the Web developer blog. - -Posted Tuesday, June 8, 2021 by Matthew Gaudet - -Looking fine with Firefox 89 - -Posted Tuesday, June 1, 2021 by Chris Mills - -Improving Firefox stability on Linux - -Roughly a year ago at Mozilla we started an effort to improve Firefox stability on Linux. This effort quickly became an example of good synergies between FOSS projects.The post Improving Firefox stability on Linux appeared first on Mozilla Hacks - the Web developer blog. - -Introducing Firefox's new Site Isolation Security Architecture - -Like any web browser, Firefox loads code from untrusted and potentially hostile websites and runs it on your computer. To protect you against new types of attacks from malicious sites and to meet the security principles of Mozilla, we set out to redesign Firefox on desktop.The post Introducing Firefox's new Site Isolation Security Architecture appeared first on Mozilla Hacks - the Web developer blog. - -Posted Tuesday, May 18, 2021 by Anny Gakhokidze - -Pyodide Spin Out and 0.17 Release - -Posted Thursday, April 22, 2021 by Teon Brooks - -``` - -[![](https://camo.githubusercontent.com/4308e370c8f20afdfd06a497dcd7eb257b61b498a18c23a3c9584675b38b1a10/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a55703561732d4d6b4863486276495f715831417150772e706e67)](https://camo.githubusercontent.com/4308e370c8f20afdfd06a497dcd7eb257b61b498a18c23a3c9584675b38b1a10/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a55703561732d4d6b4863486276495f715831417150772e706e67) - -**the test.txt and result.md files can be found here:** - -[**bgoonz/bash-commands-walkthrough**\ -*to accompany the medium article I am writing. Contribute to bgoonz/bash-commands-walkthrough development by creating an...*github.com](https://github.com/bgoonz/bash-commands-walkthrough/tree/master/steps/6-remove-lines-contaning-bad-text 'https://github.com/bgoonz/bash-commands-walkthrough/tree/master/steps/6-remove-lines-contaning-bad-text')[](https://github.com/bgoonz/bash-commands-walkthrough/tree/master/steps/6-remove-lines-contaning-bad-text) - ---- - -### 7.) Execute command recursively - -**Here I have modified the command I wish to run recursively to account for the fact that the 'find' command already works recursively, by appending the -maxdepth 1 flag...** - -> **I am essentially removing the recursive action of the find command...** - -**That way, if the command affects the more deeply nested folders we know the outer RecurseDirs function we are using to run the _find/pandoc_ line once in every subfolder of the working directory... is working properly!** - -[![](https://camo.githubusercontent.com/b514da1e3cfcfeda7a09f9d691618ee89526a7ebe8ded7dd7140a5c88f5f9d3e/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3630302f312a35435f757a4c6e7543536c5469696f693245746e55412e706e67)](https://camo.githubusercontent.com/b514da1e3cfcfeda7a09f9d691618ee89526a7ebe8ded7dd7140a5c88f5f9d3e/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3630302f312a35435f757a4c6e7543536c5469696f693245746e55412e706e67) - -**Run in the folder shown to the left... we would expect every .md file to be accompanied by a newly generated html file by the same name.** - -**The results of said operation can be found in the** [**following directory**](https://github.com/bgoonz/bash-commands-walkthrough/tree/master/steps/7-recursive-run) - -#### In Action - -🢃 Below 🢃 - -[![](https://camo.githubusercontent.com/5f6bdf3692deea17ec807a6bb770b7474de94190813abae568dde34f9f8b5422/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a6b39633151524b593037544c4a6e7039536538396c512e676966)](https://camo.githubusercontent.com/5f6bdf3692deea17ec807a6bb770b7474de94190813abae568dde34f9f8b5422/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a6b39633151524b593037544c4a6e7039536538396c512e676966) - -#### The final result is - -[![](https://camo.githubusercontent.com/1d5d06c2c92fbb7a3f42080beacb2ae8e3e0e9887220cfe81ba851eff627c753/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a6a71726a4e654275526d5472447433766d5135304c512e706e67)](https://camo.githubusercontent.com/1d5d06c2c92fbb7a3f42080beacb2ae8e3e0e9887220cfe81ba851eff627c753/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a6a71726a4e654275526d5472447433766d5135304c512e706e67) - -_If you want to run any bash script recursively all you have to do is substitue out line #9 with the command you want to run once in every sub-folder._ - -``` -function RecurseDirs () -{ - oldIFS=$IFS - IFS=$'\n' - for f in "$@" - do - -#Replace the line below with your own command! - -#find ./ -iname "*.md" -maxdepth 1 -type f -exec sh -c 'pandoc --standalone "${0}" -o "${0%.md}.html"' {} \; - -##################################################### -# YOUR CODE BELOW! - -##################################################### - -if [[ -d "${f}" ]]; then - cd "${f}" - RecurseDirs $(ls -1 ".") - cd .. - fi - done - IFS=$oldIFS -} -RecurseDirs "./" - -``` - ---- - -### TBC - -**Here are some of the other commands I will cover in greater detail... at a later time:** - -### 9\. Copy any text between ' + echo " directory " + echo "" + echo '' + echo '' + echo '' + echo "" + # continue with the HTML stuff + echo "" + echo "" + echo "
    " + awk '{print "
  • ",$1," 
    • "}' $listing + # awk '{print "
  • "}; + # {print " ",$1,"
    •  "}' \ $listing + echo "" + echo "
" + echo "" + echo "" +} +cmd $listing --sort=extension >>$html + +``` + +#### In Action + +**I will use this copy of my Data Structures Practice Site to demonstrate the result:** + +[**side-projects-42/DS-Bash-Examples-Deploy**\ +*Deployment github-pages Navigation Big O notation is the language we use for talking about how long an algorithm takes...*github.com](https://github.com/side-projects-42/DS-Bash-Examples-Deploy 'https://github.com/side-projects-42/DS-Bash-Examples-Deploy')[](https://github.com/side-projects-42/DS-Bash-Examples-Deploy) + +[![](https://camo.githubusercontent.com/0f97bdb9d1167b14f340044bcdca3eb0472acc4c80dcc9c1db4f13ad6900bf20/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a5075754454557669583547366d6a612d35654b5549772e706e67)](https://camo.githubusercontent.com/0f97bdb9d1167b14f340044bcdca3eb0472acc4c80dcc9c1db4f13ad6900bf20/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a5075754454557669583547366d6a612d35654b5549772e706e67) + +#### The result is a index.html file that contains a list of links to each file in the directory + +> here is a link to and photo of the resulting html file: + +[**index.html**\ +*CONTENT/DS-n-Algos/*quirky-meninsky-4181b5.netlify.app](https://quirky-meninsky-4181b5.netlify.app/ 'https://quirky-meninsky-4181b5.netlify.app/')[](https://quirky-meninsky-4181b5.netlify.app/) + +[![](https://camo.githubusercontent.com/ce04a06e4fc2c23c62fd6a9dbea96125b5920b8c53a1c62434325989768cd1a7/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a414f5962577655474e39794a3463654e7a41474773772e706e67)](https://camo.githubusercontent.com/ce04a06e4fc2c23c62fd6a9dbea96125b5920b8c53a1c62434325989768cd1a7/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3830302f312a414f5962577655474e39794a3463654e7a41474773772e706e67) + +--- + +### 5.) Download all links to a files of a specified extension on a user provided (url) webpage + +``` +wget -r -A.pdf https://overapi.com/gitwget --wait=2 --level=inf --limit-rate=20K --recursive --page-requisites --user-agent=Mozilla --no-parent --convert-links --adjust-extension --no-clobber -e robots=off + +``` + +> The result is stored in [this directory:](https://github.com/bgoonz/bash-commands-walkthrough/tree/master/steps/5-download-all-pdf) + +[![](https://camo.githubusercontent.com/02861c1b49280db7ab6c017bc4dc93f0d22b7385e2b33e2154fc3e734b1da3c7/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a38657656504f5f7a2d5f5441547a6b634454703135512e706e67)](https://camo.githubusercontent.com/02861c1b49280db7ab6c017bc4dc93f0d22b7385e2b33e2154fc3e734b1da3c7/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a38657656504f5f7a2d5f5441547a6b634454703135512e706e67) + +--- + +### 6.)Recursively remove lines of text containing the string badFolder from files in the working directory + +``` +find . -type f -exec sed -i '/badFolder/d' ./* {} \; + +# OR + +find . -name 'result.md' -type f -exec sed -i '/badFolder/d' ./* {} \; + +``` + +**As an example I will run this command on a file containing the text:** + +``` +Hacks Blog + +Read more at hacks.mozilla.org + +badFolder + +badFolder Implementing Private Fields for JavaScript + +When implementing a language feature for JavaScript, an implementer must make decisions about how the language in the specification maps to the implementation. Private fields is an example of where the specification language and implementation reality diverge, at least in SpiderMonkey-- the JavaScript engine which powers Firefox. To understand more, I'll explain what private fields are, a couple of models for thinking about them, and explain why our implementation diverges from the specification language.The post Implementing Private Fields for JavaScript appeared first on Mozilla Hacks - the Web developer blog. + +Posted Tuesday, June 8, 2021 by Matthew Gaudet + +Looking fine with Firefox 89 + +Firefox 89 has smartened up and brings with it a slimmed-down, slightly more minimalist interface.badFolder Along with this new look, we get some great styling features including a force-colours feature for media queries and better control over how fonts are displayed. The long-awaited top-level await keyword for JavaScript modules is now enabled, as well as the PerformanceEventTiming interface, which is another addition to the performance suite of APIs: 89 really has been working out!The post Looking fine with Firefox 89 appeared first on Mozilla Hacks - the Web developer blog. + +badFolder + +Posted Tuesday, June 1, 2021 by Chris Mills + +badFolder + +Improving Firefox stability on Linux + +Roughly a year ago at Mozilla we started an effort to improve Firefox stability on Linux. This effort quickly became an example of good synergies between FOSS projects.The post Improving Firefox stability on Linux appeared first on Mozilla Hacks - the Web developer blog. + +Posted Wednesday, May 19, 2021 by Gabriele Svelto badFolder + +Introducing Firefox's new Site Isolation Security Architecture + +Like any web browser, Firefox loads code from untrusted and potentially hostile websites and runs it on your computer. To protect you against new types of attacks from malicious sites and to meet the security principles of Mozilla, we set out to redesign Firefox on desktop.The post Introducing Firefox's new Site Isolation Security Architecture appeared first on Mozilla Hacks - the Web developer blog. + +Posted Tuesday, May 18, 2021 by Anny Gakhokidze + +Pyodide Spin Out and 0.17 Release + +We are happy to announce that Pyodide has become an independent and community-driven project. We are also pleased to announce the 0.17 release for Pyodide with many new features and improvements. Pyodide consists of the CPython 3.8 interpreter compiled to WebAssembly which allows Python to run in the browser.The post Pyodide Spin Out and 0.17 Release appeared first on Mozilla Hacks - the Web developer blog. badFolder + +Posted Thursday, April 22, 2021 by Teon Brooks + +``` + +**_I modified the command slightly to apply only to files called 'result.md':_** + +> The result is : + +``` +Hacks Blog + +Read more at hacks.mozilla.org + +When implementing a language feature for JavaScript, an implementer must make decisions about how the language in the specification maps to the implementation. Private fields is an example of where the specification language and implementation reality diverge, at least in SpiderMonkey-- the JavaScript engine which powers Firefox. To understand more, I'll explain what private fields are, a couple of models for thinking about them, and explain why our implementation diverges from the specification language.The post Implementing Private Fields for JavaScript appeared first on Mozilla Hacks - the Web developer blog. + +Posted Tuesday, June 8, 2021 by Matthew Gaudet + +Looking fine with Firefox 89 + +Posted Tuesday, June 1, 2021 by Chris Mills + +Improving Firefox stability on Linux + +Roughly a year ago at Mozilla we started an effort to improve Firefox stability on Linux. This effort quickly became an example of good synergies between FOSS projects.The post Improving Firefox stability on Linux appeared first on Mozilla Hacks - the Web developer blog. + +Introducing Firefox's new Site Isolation Security Architecture + +Like any web browser, Firefox loads code from untrusted and potentially hostile websites and runs it on your computer. To protect you against new types of attacks from malicious sites and to meet the security principles of Mozilla, we set out to redesign Firefox on desktop.The post Introducing Firefox's new Site Isolation Security Architecture appeared first on Mozilla Hacks - the Web developer blog. + +Posted Tuesday, May 18, 2021 by Anny Gakhokidze + +Pyodide Spin Out and 0.17 Release + +Posted Thursday, April 22, 2021 by Teon Brooks + +``` + +[![](https://camo.githubusercontent.com/4308e370c8f20afdfd06a497dcd7eb257b61b498a18c23a3c9584675b38b1a10/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a55703561732d4d6b4863486276495f715831417150772e706e67)](https://camo.githubusercontent.com/4308e370c8f20afdfd06a497dcd7eb257b61b498a18c23a3c9584675b38b1a10/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a55703561732d4d6b4863486276495f715831417150772e706e67) + +**the test.txt and result.md files can be found here:** + +[**bgoonz/bash-commands-walkthrough**\ +*to accompany the medium article I am writing. Contribute to bgoonz/bash-commands-walkthrough development by creating an...*github.com](https://github.com/bgoonz/bash-commands-walkthrough/tree/master/steps/6-remove-lines-contaning-bad-text 'https://github.com/bgoonz/bash-commands-walkthrough/tree/master/steps/6-remove-lines-contaning-bad-text')[](https://github.com/bgoonz/bash-commands-walkthrough/tree/master/steps/6-remove-lines-contaning-bad-text) + +--- + +### 7.) Execute command recursively + +**Here I have modified the command I wish to run recursively to account for the fact that the 'find' command already works recursively, by appending the -maxdepth 1 flag...** + +> **I am essentially removing the recursive action of the find command...** + +**That way, if the command affects the more deeply nested folders we know the outer RecurseDirs function we are using to run the _find/pandoc_ line once in every subfolder of the working directory... is working properly!** + +[![](https://camo.githubusercontent.com/b514da1e3cfcfeda7a09f9d691618ee89526a7ebe8ded7dd7140a5c88f5f9d3e/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3630302f312a35435f757a4c6e7543536c5469696f693245746e55412e706e67)](https://camo.githubusercontent.com/b514da1e3cfcfeda7a09f9d691618ee89526a7ebe8ded7dd7140a5c88f5f9d3e/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f3630302f312a35435f757a4c6e7543536c5469696f693245746e55412e706e67) + +**Run in the folder shown to the left... we would expect every .md file to be accompanied by a newly generated html file by the same name.** + +**The results of said operation can be found in the** [**following directory**](https://github.com/bgoonz/bash-commands-walkthrough/tree/master/steps/7-recursive-run) + +#### In Action + +🢃 Below 🢃 + +[![](https://camo.githubusercontent.com/5f6bdf3692deea17ec807a6bb770b7474de94190813abae568dde34f9f8b5422/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a6b39633151524b593037544c4a6e7039536538396c512e676966)](https://camo.githubusercontent.com/5f6bdf3692deea17ec807a6bb770b7474de94190813abae568dde34f9f8b5422/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a6b39633151524b593037544c4a6e7039536538396c512e676966) + +#### The final result is + +[![](https://camo.githubusercontent.com/1d5d06c2c92fbb7a3f42080beacb2ae8e3e0e9887220cfe81ba851eff627c753/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a6a71726a4e654275526d5472447433766d5135304c512e706e67)](https://camo.githubusercontent.com/1d5d06c2c92fbb7a3f42080beacb2ae8e3e0e9887220cfe81ba851eff627c753/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f312a6a71726a4e654275526d5472447433766d5135304c512e706e67) + +_If you want to run any bash script recursively all you have to do is substitue out line #9 with the command you want to run once in every sub-folder._ + +``` +function RecurseDirs () +{ + oldIFS=$IFS + IFS=$'\n' + for f in "$@" + do + +#Replace the line below with your own command! + +#find ./ -iname "*.md" -maxdepth 1 -type f -exec sh -c 'pandoc --standalone "${0}" -o "${0%.md}.html"' {} \; + +##################################################### +# YOUR CODE BELOW! + +##################################################### + +if [[ -d "${f}" ]]; then + cd "${f}" + RecurseDirs $(ls -1 ".") + cd .. + fi + done + IFS=$oldIFS +} +RecurseDirs "./" + +``` + +--- + +### TBC + +**Here are some of the other commands I will cover in greater detail... at a later time:** + +### 9\. Copy any text between